/* ============================================================================ ImagineInk Brand System — light/white theme (Phase 0) Loaded LAST in (after ai-premium.css) so this :root wins over the competing :root blocks in ai-premium.css (base L347, ink L6422, flip L11448). Brand: sky-blue #1CA3DD primary + navy #26303C, on white. Strategy: re-skin by overriding the existing --iim-* token VALUES; keep all JS/markup/class hooks. No structural CSS changes here. ============================================================================ */ :root{ /* ---- Brand palette ---- */ --iim-primary:#1CA3DD; --iim-primary-strong:#1685ba; --iim-primary-soft:rgba(28,163,221,.12); --iim-accent:#1CA3DD; --iim-accent-soft:rgba(28,163,221,.14); --iim-cyan:#1CA3DD; --iim-blue:#1CA3DD; --iim-agency-cyan:#1CA3DD; /* ---- Surfaces (light) — override the dark #08142d / dark-glass values ---- */ --iim-bg:#ffffff; --iim-bg-soft:#f4f8fb; --iim-surface:#ffffff; --iim-surface-soft:#f4f8fb; --iim-surface-2:#f7fafd; --iim-surface-glass:rgba(255,255,255,.72); /* ---- Borders / lines ---- */ --iim-border:#e3eaf0; --iim-border-strong:#cfdae6; --iim-line:#e6ebf2; /* ---- Text — navy on white. Explicitly fixes the L11448 global white flip ---- */ --iim-text:#26303c; --iim-text-soft:#5b6b7d; --iim-text-inverse:#ffffff; --iim-heading:#26303c; --iim-body:#3a4654; --iim-muted:#6b7785; --iim-dark-text:#26303c; /* ---- Ink / deep (navy — for dark bands, on-light contrast) ---- */ --iim-ink:#26303c; --iim-ink-2:#1f2832; --iim-ink-3:#18202a; --iim-deep:#26303c; --iim-deep-2:#1f2832; /* ---- Type — clean sans for the brand (Inter/Manrope already loaded) ---- */ --iim-type-display:"Inter","Manrope","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --iim-type-body:"Inter","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; /* ---- Effects ---- */ --iim-radius:16px; --iim-shadow-sm:0 12px 28px rgba(38,48,60,.08); --iim-shadow-md:0 20px 48px rgba(38,48,60,.12); --iim-grad-brand:linear-gradient(115deg,#1ca3dd,#26303c); } /* ---- Light page baseline (overrides the dark editorial body) ---- */ html, body{ background:#ffffff; } body{ color:var(--iim-body); } /* Neutralize the dark editorial body flag if present on / */ html.iim-r3-on, html.iim-r3-on body, body.iim-r3-on{ background:#ffffff !important; color:var(--iim-body); } /* ---- Headings inherit brand navy ---- */ h1,h2,h3,h4,h5,h6{ color:var(--iim-heading); } /* ---- Buttons: brand fill (scoped to known button classes, not bare ) ---- */ .btn-primary, a.btn-primary, button.btn-primary, .iim-svc-btn-primary, .iim-r3-hero__cta{ background:var(--iim-primary); border-color:var(--iim-primary); color:#ffffff; } .btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, .iim-svc-btn-primary:hover, .iim-r3-hero__cta:hover{ background:var(--iim-primary-strong); border-color:var(--iim-primary-strong); color:#ffffff; } .btn-secondary, .iim-svc-btn-secondary{ background:transparent; border:1px solid var(--iim-border-strong); color:var(--iim-ink); } .btn-secondary:hover, .iim-svc-btn-secondary:hover{ border-color:var(--iim-primary); color:var(--iim-primary); } /* ---- Content prose links pick up the brand blue (scoped — not nav/footer) ---- */ .iim-content-prose a, .iim-page-intro a, .iim-block a{ color:var(--iim-primary); } .iim-content-prose a:hover, .iim-page-intro a:hover, .iim-block a:hover{ color:var(--iim-primary-strong); } /* ---- Section eyebrow / accent text ---- */ .iim-trust-eyebrow, .iim-svc-eyebrow, .iim-section-head .eyebrow{ color:var(--iim-primary); } /* ============================================================================ Header — light brand (Phase 0 global). !important is used deliberately: ai-premium.css has ~20 higher-specificity dark header rules (home / r3 / scrolled / sticky variants, e.g. L13636, L18608, L19371) that are NOT !important, so !important here wins them all in one block without enumerating every selector. CTA button is protected. ============================================================================ */ #header .header-inner{ background:#ffffff !important; border-bottom:1px solid var(--iim-border) !important; box-shadow:0 6px 22px rgba(38,48,60,.07) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } /* Nav links → navy; hover/current → brand blue (kill the dark glow) */ #header #mainMenu nav > ul > li > a{ color:var(--iim-ink) !important; text-shadow:none !important; } #header #mainMenu nav > ul > li:hover > a, #header #mainMenu nav > ul > li.current > a{ color:var(--iim-primary) !important; text-shadow:none !important; } #header #mainMenu nav > ul > li.current > a::after, #header #mainMenu nav > ul > li:hover > a::after{ background:var(--iim-primary) !important; } /* Header utility icons → navy (exclude the CTA button) */ #header .header-extras a:not(.btn):not(.btn-primary), #header #btn-search, #header #mainMenu-trigger .lines, #header #mainMenu-trigger .lines::before, #header #mainMenu-trigger .lines::after{ color:var(--iim-ink) !important; } /* Keep the primary CTA blue with white text */ #header .btn-primary, #header a.btn-primary{ background:var(--iim-primary) !important; border-color:var(--iim-primary) !important; color:#ffffff !important; } /* Logo: drop the dark panel so the on-white brand logo reads correctly */ #header #logo{ background:transparent !important; box-shadow:none !important; border:0 !important; } #header #logo img{ filter:none !important; } /* Dropdown menus → light */ #mainMenu .dropdown-menu, #mainMenu .dropdown-menu .dropdown-menu{ background:#ffffff !important; border:1px solid var(--iim-border) !important; box-shadow:var(--iim-shadow-sm) !important; } #mainMenu .dropdown-menu a{ color:var(--iim-ink) !important; } #mainMenu .dropdown-menu a:hover{ color:var(--iim-primary) !important; background:var(--iim-surface-soft) !important; } /* ============================================================================ Premium-header neutralization (Phase 0 — CORRECTED). Diagnosis (verified against the SERVED css/ai-premium.min.css, 2026-05-28): the live header is