/* ============================================================ NAVY / GOLD / WHITE THEME OVERRIDE Scope: applies only when , which the inline script in index.html sets on these routes: / (Home) /services/strategic-sourcing (Strategic Sourcing) /services/strategic-advisory (Strategic Advisory) /journal and /journal/* (Journal + articles) Goal: navy background, standard text white, bold text gold — matching the site header/hero. ============================================================ */ /* ============================================================ GLOBAL — HEADER (applies to ALL pages, not scope-limited) The header is transparent at the top of the page and only turns navy once scrolled. Force it navy everywhere so the white nav text is always readable and the bar is consistent site-wide. ============================================================ */ header.fixed { background-color: hsl(var(--navy)) !important; border-bottom: 1px solid hsl(var(--gold) / 0.12) !important; } /* ---- 1. Backgrounds: make the whole page navy ---- */ html.navy-theme, html.navy-theme body { background-color: hsl(var(--navy)) !important; } /* Any section / light block becomes navy */ html.navy-theme section, html.navy-theme .bg-white, html.navy-theme .bg-card, html.navy-theme [class*="bg-[hsl(var(--accent))]"], html.navy-theme [class*="bg-[hsl(var(--background))]"], html.navy-theme [class*="bg-[hsl(var(--light-gray))]"] { background-color: hsl(var(--navy)) !important; } /* Cards / panels get a slightly lighter navy + subtle gold edge so they stay legible against the section behind them */ html.navy-theme .bg-card, html.navy-theme .bg-white { background-color: hsl(216 55% 17%) !important; border-color: hsl(var(--gold) / 0.18) !important; } /* Keep the translucent navy tint blocks a touch lighter for depth */ html.navy-theme [class*="bg-[hsl(var(--navy)/0.2)]"] { background-color: hsl(var(--navy) / 0.45) !important; } /* ---- 2. Standard text: white ---- */ html.navy-theme, html.navy-theme p, html.navy-theme span, html.navy-theme li, html.navy-theme a, html.navy-theme div, html.navy-theme label, html.navy-theme blockquote, html.navy-theme figcaption, html.navy-theme td, html.navy-theme th, html.navy-theme [class*="text-[hsl(var(--navy))]"], html.navy-theme .text-foreground, html.navy-theme .text-muted-foreground, html.navy-theme .text-card-foreground { color: #ffffff !important; } /* Divider / border lines that were navy would vanish on navy — tint them gold */ html.navy-theme [class*="border-[hsl(var(--navy))]"], html.navy-theme .border-border, html.navy-theme [class*="border-border"] { border-color: hsl(var(--gold) / 0.18) !important; } /* ---- 3. Bold / emphasised text: gold ---- */ /* Headings get their weight from the display font (no font-bold class), so target the tags themselves as well as the weight utilities. */ html.navy-theme h1, html.navy-theme h2, html.navy-theme h3, html.navy-theme h4, html.navy-theme h5, html.navy-theme h6, /* higher-specificity variants so headings that also carry a text-[hsl(var(--navy))] utility still resolve to gold */ html.navy-theme h1[class], html.navy-theme h2[class], html.navy-theme h3[class], html.navy-theme h4[class], html.navy-theme h5[class], html.navy-theme h6[class], html.navy-theme strong, html.navy-theme b, html.navy-theme .font-bold, html.navy-theme .font-semibold, html.navy-theme .font-extrabold, html.navy-theme .font-black, html.navy-theme [class*="text-[hsl(var(--gold))]"] { color: hsl(var(--gold)) !important; } /* ---- 4. Protect gold-background elements (buttons / badges) ---- */ /* Solid gold background => keep dark navy text so it stays readable. */ html.navy-theme [class*="bg-[hsl(var(--gold))]"], html.navy-theme [class*="bg-[hsl(var(--gold))]"] * { color: hsl(var(--navy)) !important; } /* ============================================================ KAYENI & SEREN — Gold background / Navy text Scope: (route /services/kayeni). The page content and footer switch to a gold palette with navy text; the header stays navy (global rule above). CTA buttons are inverted to navy so they remain visible on the gold background. ============================================================ */ /* Page background -> gold */ html.gold-theme, html.gold-theme body { background-color: hsl(var(--gold)) !important; } /* All content sections + footer -> gold */ html.gold-theme section, html.gold-theme footer, html.gold-theme section [class*="bg-[hsl(var(--navy))]"], html.gold-theme section [class*="bg-[hsl(var(--accent))]"], html.gold-theme section [class*="bg-[hsl(var(--background))]"], html.gold-theme section .bg-white, html.gold-theme section .bg-card, html.gold-theme footer [class*="bg-[hsl(var(--navy))]"] { background-color: hsl(var(--gold)) !important; } /* Cards / panels: slightly deeper gold + navy edge for separation */ html.gold-theme section .bg-white, html.gold-theme section .bg-card { background-color: hsl(45 72% 52%) !important; border-color: hsl(var(--navy) / 0.25) !important; } /* All text in the page + footer -> navy (leaves the header untouched) */ html.gold-theme section, html.gold-theme section *, html.gold-theme footer, html.gold-theme footer * { color: hsl(var(--navy)) !important; border-color: hsl(var(--navy) / 0.18) !important; } /* Hero photo overlay was a dark navy gradient (for white text). Recolor it gold so the navy hero heading stays readable while the image still shows. */ html.gold-theme section [class*="from-[hsl(var(--navy))]"] { background-image: linear-gradient( to right, hsl(var(--gold)) 0%, hsl(var(--gold) / 0.7) 55%, hsl(var(--gold) / 0.35) 100% ) !important; } /* CTA buttons / badges (were solid gold): invert to navy so they pop */ html.gold-theme section [class*="bg-[hsl(var(--gold))]"], html.gold-theme footer [class*="bg-[hsl(var(--gold))]"] { background-color: hsl(var(--navy)) !important; border-color: hsl(var(--navy)) !important; } html.gold-theme section [class*="bg-[hsl(var(--gold))]"], html.gold-theme section [class*="bg-[hsl(var(--gold))]"] *, html.gold-theme footer [class*="bg-[hsl(var(--gold))]"], html.gold-theme footer [class*="bg-[hsl(var(--gold))]"] * { color: hsl(var(--gold)) !important; }