Theming¶

Theme System¶

The landing page uses CSS custom properties (variables) for theming, allowing runtime theme switching via environment variables.

Available Themes¶

Professional Blue¶

LANDING_THEME=blue

Property	Value
Primary	`#1e40af` (Blue 800)
Primary Dark	`#1e3a8a` (Blue 900)
Accent	`#3b82f6` (Blue 500)
Font	Inter

Best for: Corporate, trustworthy appearance

Modern Slate (Default)¶

LANDING_THEME=slate

Property	Value
Primary	`#334155` (Slate 700)
Primary Dark	`#1e293b` (Slate 800)
Accent	`#0ea5e9` (Sky 500)
Font	Plus Jakarta Sans

Best for: Contemporary, sophisticated look

Warm Earth¶

LANDING_THEME=earth

Property	Value
Primary	`#78350f` (Amber 900)
Primary Dark	`#451a03` (Amber 950)
Accent	`#d97706` (Amber 600)
Font	DM Sans

Best for: Natural, inviting, home-focused

How Themes Work¶

CSS Variables¶

Each theme defines CSS custom properties:

/* themes/slate.css */
:root {
    --color-primary: #334155;
    --color-primary-dark: #1e293b;
    --color-accent: #0ea5e9;
    --color-background: #ffffff;
    --color-text: #0f172a;
    --font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

Theme Loading¶

In base.html, the theme CSS is loaded based on the THEME environment variable:

<!-- Theme CSS -->
<link rel="stylesheet"
      href="{{ url_for('static', filename='css/themes/' + config.THEME + '.css') }}">

Tailwind Integration¶

tailwind.config.js uses CSS variables for colors:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        'primary-dark': 'var(--color-primary-dark)',
        accent: 'var(--color-accent)',
      },
      fontFamily: {
        sans: ['var(--font-family)', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Creating a Custom Theme¶

Create theme CSS file:

/* app/static/css/themes/custom.css */
:root {
    --color-primary: #your-color;
    --color-primary-dark: #your-darker-color;
    --color-accent: #your-accent;
    --color-background: #ffffff;
    --color-text: #0f172a;
    --font-family: 'Your Font', system-ui, sans-serif;
}

Add Google Font (if needed) in base.html:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Your+Font:wght@400;500;600;700&display=swap" rel="stylesheet">

Set theme in .env:

LANDING_THEME=custom

Restart the container:

./production_deploy.sh restart-service landing

Customizing Components¶

Buttons¶

<!-- Primary button -->
<a class="bg-primary hover:bg-primary-dark text-white px-6 py-3 rounded-xl">
    Get Started
</a>

<!-- Accent button -->
<a class="bg-accent hover:opacity-90 text-white px-6 py-3 rounded-xl">
    Learn More
</a>

Cards¶

<div class="bg-white rounded-2xl shadow-lg p-8 hover:shadow-xl transition-shadow">
    <!-- Card content -->
</div>

Gradient Text¶

<span class="gradient-text">Highlighted Text</span>

The gradient uses primary and accent colors:

.gradient-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Rebuilding CSS¶

After modifying Tailwind classes in templates, rebuild the CSS:

cd landing-page
npm run build

Or use watch mode during development:

npm run watch

For production deployment:

./production_deploy.sh rebuild-landing

Logo Customization¶

The landing page supports custom logos in the header and footer.

Logo Files¶

File	Location	Usage
`logo.svg`	`app/static/images/logo.svg`	Header (light background)
`logo-white.svg`	`app/static/images/logo-white.svg`	Footer (dark background)

Replacing the Logo¶

Create your logo as SVG (recommended) or PNG
Replace the files:
landing-page/app/static/images/logo.svg - for header
landing-page/app/static/images/logo-white.svg - for footer (white/light colored)
Recommended dimensions: height ~50px, width auto

Fallback Behavior¶

If logo files fail to load, a text fallback displays automatically using the company name from configuration.

<img src="{{ url_for('static', filename='images/logo.svg') }}"
     alt="{{ company.name }} Logo"
     class="h-12 w-auto"
     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
<!-- Fallback text logo shown if image fails -->
<div class="items-center gap-3 hidden">
    <span class="font-display font-bold text-xl">{{ company.name }}</span>
</div>

Hero Section Gradients¶

The hero section uses soft gradient effects for a professional, modern look.

Background Gradient¶

<section class="bg-gradient-to-br from-white via-gray-50 to-primary/10">

Decorative Gradient Orbs¶

Soft, blurred color orbs create depth without using background images:

<!-- Top-right primary color orb -->
<div class="absolute top-0 right-0 w-[600px] h-[600px]
            bg-gradient-to-bl from-primary/15 to-transparent
            rounded-full blur-3xl"></div>

<!-- Bottom-left accent color orb -->
<div class="absolute bottom-0 left-0 w-[500px] h-[500px]
            bg-gradient-to-tr from-accent/15 to-transparent
            rounded-full blur-3xl"></div>

<!-- Center gradient orb -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
            w-[800px] h-[800px]
            bg-gradient-to-r from-primary/5 via-transparent to-accent/5
            rounded-full blur-3xl"></div>

Adjusting Gradient Intensity¶

Increase opacity values (e.g., primary/15 → primary/25) for stronger effect
Decrease opacity values (e.g., primary/15 → primary/8) for subtler effect
Adjust blur (blur-3xl → blur-2xl) for sharper or softer edges