/* ============================================================================ HOMEPAGE LIGHT THEME ---------------------------------------------------------------------------- Converts the homepage from the dark (#010D12) theme to a light theme built on white + subtle brand-cyan tints. EVERY rule is scoped to `body.ac-homepage` so the rest of the site (which shares many of these selectors and loads the same global stylesheet) stays on the dark theme. Loaded only on the front page, after all other homepage CSS. Fully reversible: dequeue this file. Brand accent stays #07A9D1 / #06CFC3 (cyan-teal). Only backgrounds + text flip; the gradient accents, primary buttons and cyan rims are kept. ============================================================================ */ body.ac-homepage { /* Light palette (cool off-white with a slight cyan bias toward the brand) */ --lt-page: #F1F6F9; /* base page ground */ --lt-surface: #FFFFFF; /* white cards / panels */ --lt-tint: #E9F3F7; /* soft cyan panel */ --lt-tint-deep: #DCEDF3; /* deeper cyan panel */ --lt-ink: #08222E; /* primary text (dark brand navy, not pure black) */ --lt-ink-soft: #08222E; /* secondary text — darkened from #34505C so no greyish text remains */ --lt-muted: #08222E; /* muted text — darkened from #566B77 so no greyish text remains */ --lt-border: rgba(9, 32, 42, 0.10); --lt-border-brand: rgba(7, 169, 209, 0.22); --lt-brand-ink: #0B6F88; /* readable cyan for labels on light */ /* Coral-red "attention" accent (blue = trust, red = worth-your-attention). Used sparingly — hero rotating word, the final CTA, proof tags, insight tags, and hover/active states. Teal stays the primary brand/action colour. */ --lt-attn: #E5484D; /* coral-red pop (UI / on dark) */ --lt-attn-strong: #C62B30; /* darker coral for small text / hover on white */ background-color: var(--lt-page) !important; color: var(--lt-ink) !important; } /* ---------------------------------------------------------------- NAV / HEADER ADAPTIVE liquid-glass pill: • Over the hero (default) → dark smoky glass, white text • Past the hero (.past-hero) → light cyan-tinted glass, dark text `.past-hero` is toggled on .ac-header-wrap by an IntersectionObserver on the hero (ac-homepage.js). Both states lean hard into "liquid glass": heavy backdrop blur + saturation + a touch of brightness (refraction), a bright specular top edge, a soft lift, and the brand-teal rim (::before). NOTE: --lg-pill-bg resolves at :root with the dark tint, so the token can't be overridden downstream — the `background` + `backdrop-filter` are set directly. Scoped to body.ac-homepage; the rest of the site keeps the base dark nav. */ /* Smooth flip between the two states + text-colour crossfade */ body.ac-homepage .ac-header-pill { transition: background .5s ease, box-shadow .5s ease, -webkit-backdrop-filter .5s ease, backdrop-filter .5s ease !important; } body.ac-homepage .ac-nav__list a, body.ac-homepage .ac-header-icon, body.ac-homepage .ac-hamburger span { transition: color .4s ease, stroke .4s ease, background .4s ease !important; } /* ── State A — over the hero: enhanced DARK liquid glass ── */ body.ac-homepage .ac-header-pill { background: linear-gradient(160deg, rgba(20,30,44,0.24) 0%, rgba(6,12,20,0.34) 100%) !important; -webkit-backdrop-filter: blur(30px) saturate(185%) brightness(1.06) !important; backdrop-filter: blur(30px) saturate(185%) brightness(1.06) !important; box-shadow: 0 12px 46px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 1px rgba(255,255,255,0.06) !important; } /* ── State B — past the hero (over light content): LIGHT liquid glass ── */ body.ac-homepage .ac-header-wrap.past-hero .ac-header-pill { background: linear-gradient(160deg, rgba(255,255,255,0.48) 0%, rgba(226,244,249,0.38) 100%) !important; -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.05) !important; backdrop-filter: blur(32px) saturate(180%) brightness(1.05) !important; box-shadow: 0 12px 42px rgba(12,60,80,0.18), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 1px rgba(7,169,209,0.10) !important; } /* Text / icons: white over the hero (base), dark once past it */ body.ac-homepage .ac-header-wrap.past-hero .ac-nav__list a { color: var(--lt-ink) !important; } body.ac-homepage .ac-header-wrap.past-hero .ac-nav__list a:hover { color: var(--ac-primary) !important; } body.ac-homepage .ac-header-wrap.past-hero .ac-nav__list a.active { background: rgba(7, 169, 209, 0.10) !important; color: var(--lt-brand-ink) !important; } body.ac-homepage .ac-header-wrap.past-hero .ac-header-icon { color: var(--lt-ink) !important; } body.ac-homepage .ac-header-wrap.past-hero .ac-header-icon svg, body.ac-homepage .ac-header-wrap.past-hero .ac-header-icon svg * { stroke: var(--lt-ink) !important; } /* Circle chrome: the white glass tint vanishes on the light pill — swap to ink */ body.ac-homepage .ac-header-wrap.past-hero .ac-header-icon { background: rgba(8, 34, 46, 0.06) !important; border-color: rgba(8, 34, 46, 0.22) !important; } body.ac-homepage .ac-header-wrap.past-hero .ac-header-icon:hover { background: rgba(8, 34, 46, 0.12) !important; border-color: rgba(8, 34, 46, 0.38) !important; } body.ac-homepage .ac-header-wrap.past-hero .ac-hamburger span { background: var(--lt-ink) !important; } /* Teal "Let's Talk" CTA kept as-is in both states (brand pop). Mobile full-screen menu overlay left dark (separate context). */ /* ---------------------------------------------------------------------- BADGES The WHAT-WE-DO eyebrow is now a .racetrack-badge like every other section eyebrow (one unified spec in ac-homepage.unmin.css — Client Impact is the reference), so no per-section badge override is needed here. The HERO badge is untouched (the hero is left entirely to the base stylesheet). */ /* ------------------------------------------------------------------------ HERO HANDS OFF THE HERO. The hero — the dark ShaderGradient