/* ============================================================ 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. ============================================================ */ /* Unify the React-route navy/gold with the static pages (#00122c navy, #c98a38 gold). Overrides the bundle's :root vars. Added 2026-07-28. */ :root{ --navy: 216 100% 9%; /* #00122c */ --gold: 34 57% 50%; /* #c98a38 */ --primary: 216 100% 9%; --secondary: 34 57% 50%; --secondary-foreground: 216 100% 9%; --ring: 34 57% 50%; } /* ============================================================ 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 100% 13%) !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; } /* centered gold divider for Strategic Sourcing sections */ .gold-divider-center{width:64px;height:3px;background:hsl(var(--gold));border-radius:2px;} /* ===== Strategic Sourcing page: utilities restored (not present in purged build) ===== */ .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .gap-10{gap:2.5rem} .gap-x-6{column-gap:1.5rem} .gap-y-12{row-gap:3rem} .p-12{padding:3rem} .w-16{width:4rem}.h-16{height:4rem} .aspect-square{aspect-ratio:1/1} .aspect-\[16\/10\]{aspect-ratio:16/10} @media (min-width:640px){ .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:768px){ .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (min-width:1024px){ .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} .lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))} .lg\:p-20{padding:5rem} .lg\:border-l{border-left-width:1px} .lg\:border-t-0{border-top-width:0} } @media (min-width:1280px){ .xl\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))} } /* ================= STRATEGIC ADVISORY page (reproduce light mockup) ================= */ /* spacing/util fallbacks (purged build) */ .h-20{height:5rem}.w-11{width:2.75rem}.h-11{height:2.75rem}.w-9{width:2.25rem}.h-9{height:2.25rem} .gap-12{gap:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem} .max-w-xl{max-width:36rem} @media (min-width:1024px){.lg\:p-16{padding:4rem}} /* light sections override the global navy-theme */ html.navy-theme .ddadv .adv-hero, html.navy-theme .ddadv .adv-cta{background-color:#f5f7fa !important;} html.navy-theme .ddadv .adv-soft{background-color:#eef1f6 !important;} html.navy-theme .ddadv .adv-light{background-color:#ffffff !important;} html.navy-theme .ddadv .adv-hero{background-color:#ffffff !important;} /* body / tagline text dark in light sections */ html.navy-theme .ddadv .adv-body{color:#4a5568 !important;} html.navy-theme .ddadv .adv-tagline{color:hsl(var(--navy)) !important;} html.navy-theme .ddadv .adv-title-navy{color:hsl(var(--navy)) !important;} html.navy-theme .ddadv .adv-title-gold{color:hsl(var(--gold)) !important;} html.navy-theme .ddadv .adv-card-title, html.navy-theme .ddadv .adv-why-title{color:hsl(var(--navy)) !important;} html.navy-theme .ddadv .adv-h2{color:hsl(var(--gold)) !important;} .ddadv .adv-title{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:2.6rem;} .ddadv .adv-tagline{font-family:Georgia,serif;} /* hero media */ .ddadv .adv-hero-media{height:440px;border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(16,40,80,.18);} @media (max-width:1023px){.ddadv .adv-hero-media{height:300px;}} /* process (navy) */ .ddadv .adv-step{background:hsl(var(--gold)) !important;} html.navy-theme .ddadv .adv-step{color:hsl(var(--navy)) !important;} html.navy-theme .ddadv .adv-step-title{color:#ffffff !important;} html.navy-theme .ddadv .adv-step-text{color:rgba(255,255,255,.75) !important;} /* expertise cards (light) */ .ddadv .adv-card{background:#ffffff !important;border:1px solid #e5e9f0;box-shadow:0 12px 30px rgba(16,40,80,.08);transition:transform .4s ease,box-shadow .4s ease;} .ddadv .adv-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(16,40,80,.16);} /* icons */ .ddadv .adv-ico,.ddadv .adv-ico-d{border:2px solid hsl(var(--gold));} .ddadv .adv-ico,.ddadv .adv-ico svg,.ddadv .adv-ico-d,.ddadv .adv-ico-d svg{color:hsl(var(--gold)) !important;stroke:hsl(var(--gold)) !important;} /* promise (navy) */ .ddadv .adv-quote-mark{display:block;color:hsl(var(--gold));font-family:Georgia,serif;font-size:4rem;line-height:.6;margin-bottom:1rem;} html.navy-theme .ddadv .adv-quote-line{color:#ffffff !important;font-family:Georgia,serif;font-weight:300;} html.navy-theme .ddadv .adv-prom-title{color:#ffffff !important;} html.navy-theme .ddadv .adv-prom-text{color:rgba(255,255,255,.72) !important;} /* the promise half stays navy even though the band section is navy already */ .ddadv .adv-navy2{background-color:hsl(var(--navy));} /* ===== FINAL grid utilities — must be last, ascending breakpoints so larger wins ===== */ .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (min-width:1024px){ .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} .lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))} } @media (min-width:1280px){.xl\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}} /* ================= SMART SOLUTIONS page (navy hero + gold band + light cards + navy approach) ================= */ .ddsmart .sm-title{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:3rem;line-height:1.05;} .ddsmart .sm-intro-h{font-family:Georgia,serif;font-weight:700;font-size:2.2rem;line-height:1.15;} .ddsmart .sm-card-title,.ddsmart .sm-approach-h,.ddsmart .sm-closing-big{font-family:Georgia,serif;font-weight:700;} .ddsmart .sm-approach-h{font-size:2rem;} .ddsmart .sm-closing-big{font-size:2.4rem;line-height:1.1;} .ddsmart .sm-tagline{font-family:Georgia,serif;} /* hero (navy default) title colours */ html.navy-theme .ddsmart .sm-title-white{color:#ffffff !important;} html.navy-theme .ddsmart .sm-title-gold{color:hsl(var(--gold)) !important;} html.navy-theme .ddsmart .sm-tagline{color:hsl(var(--gold)) !important;} html.navy-theme .ddsmart .sm-hero .sm-body{color:rgba(255,255,255,.82) !important;} .ddsmart .sm-hero-media{height:420px;border-radius:10px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35);} @media (max-width:1023px){.ddsmart .sm-hero-media{height:280px;}} /* value band (gold/bronze) */ .ddsmart .sm-band{background:linear-gradient(90deg,#7c5f1c 0%,#b0862c 50%,#7c5f1c 100%);padding:1.25rem 0;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(0,0,0,.2);} html.navy-theme .ddsmart .sm-band,html.navy-theme .ddsmart .sm-band *{color:#ffffff !important;} .ddsmart .sm-chip-ico{border:1.5px solid rgba(255,255,255,.85);} .ddsmart .sm-chip-ico svg{color:#fff !important;stroke:#fff !important;} @media (max-width:767px){.ddsmart .sm-band .sm-chip{justify-content:flex-start;}} /* light intro + cards */ html.navy-theme .ddsmart .sm-intro{background:#ffffff !important;} html.navy-theme .ddsmart .sm-cards{background:#eef1f6 !important;} html.navy-theme .ddsmart .sm-intro-h{color:hsl(var(--navy)) !important;} html.navy-theme .ddsmart .sm-desc{color:#4a5568 !important;} html.navy-theme .ddsmart .sm-intro .sm-desc{color:#3a4658 !important;} /* cards */ .ddsmart .sm-card{background:#ffffff !important;border:1px solid #e5e9f0;box-shadow:0 12px 30px rgba(16,40,80,.08);transition:transform .4s ease,box-shadow .4s ease;} .ddsmart .sm-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(16,40,80,.16);} .ddsmart .sm-num{background:hsl(var(--navy));color:#fff !important;} html.navy-theme .ddsmart .sm-num{color:#fff !important;} html.navy-theme .ddsmart .sm-card-title{color:hsl(var(--gold)) !important;} /* approach + closing (navy default) */ .ddsmart .sm-ico{border:2px solid hsl(var(--gold));} .ddsmart .sm-ico,.ddsmart .sm-ico svg{color:hsl(var(--gold)) !important;stroke:hsl(var(--gold)) !important;} html.navy-theme .ddsmart .sm-approach-h,html.navy-theme .ddsmart .sm-closing-big{color:hsl(var(--gold)) !important;} html.navy-theme .ddsmart .sm-step-title{color:#ffffff !important;} html.navy-theme .ddsmart .sm-step-text,html.navy-theme .ddsmart .sm-closing-tag,html.navy-theme .ddsmart .sm-cta-text{color:rgba(255,255,255,.75) !important;} html.navy-theme .ddsmart .sm-closing-small{color:#ffffff !important;} .ddsmart .sm-closing{border-top:1px solid rgba(255,255,255,.1);} .ddsmart .sm-cta-btn{background:hsl(var(--gold));color:hsl(var(--navy)) !important;} html.navy-theme .ddsmart .sm-cta-btn,html.navy-theme .ddsmart .sm-cta-btn *{color:hsl(var(--navy)) !important;} .aspect-\[4\/3\]{aspect-ratio:4/3} /* fix: intro heading spans must be navy on the light intro section */ html.navy-theme .ddsmart .sm-intro-h, html.navy-theme .ddsmart .sm-intro-h span{color:hsl(var(--navy)) !important;} /* ================= SEREN by Kayeni — cream & gold one-pager (overrides gold-theme; navy only in footer) ================= */ /* section backgrounds (cream / warm tan / soft white) */ html.gold-theme .ddseren .sr-cream{background:#f4ecdb !important;} html.gold-theme .ddseren .sr-white{background:#faf5ea !important;} html.gold-theme .ddseren .sr-tan{background:#ecdfc4 !important;} /* typography */ .ddseren .sr-brand,.ddseren .sr-tagline,.ddseren .sr-h2,.ddseren .sr-closing-t,.ddseren .sr-by-t{font-family:Georgia,'Times New Roman',serif;} .ddseren .sr-brand{font-size:5rem;letter-spacing:.28em;font-weight:600;line-height:1;} .ddseren .sr-lockup{position:relative;display:inline-block;margin-bottom:.5rem;} .ddseren .sr-reg{font-size:1.1rem;vertical-align:super;margin-left:.15em;} .ddseren .sr-by-t{font-size:1.4rem;font-style:italic;} .ddseren .sr-sub{font-size:1.05rem;letter-spacing:.18em;} .ddseren .sr-tagline{font-size:1.7rem;font-weight:600;line-height:1.25;} .ddseren .sr-h2{font-size:1.8rem;font-weight:600;} .ddseren .sr-closing-t{font-size:1.9rem;font-weight:600;line-height:1.3;max-width:40rem;margin-left:auto;margin-right:auto;} /* colours: SEREN + accents gold, headings navy, body warm brown */ html.gold-theme .ddseren .sr-brand,html.gold-theme .ddseren .sr-reg{color:hsl(var(--gold)) !important;} html.gold-theme .ddseren .sr-by-t,html.gold-theme .ddseren .sr-sub,html.gold-theme .ddseren .sr-tagline,html.gold-theme .ddseren .sr-h2,html.gold-theme .ddseren .sr-closing-t,html.gold-theme .ddseren .sr-dim-t,html.gold-theme .ddseren .sr-card-t,html.gold-theme .ddseren .sr-sig-t{color:hsl(var(--navy)) !important;} html.gold-theme .ddseren .sr-body{color:#6a5c43 !important;} /* gold rules / dividers */ .ddseren .sr-rule{display:inline-block;width:52px;height:1.5px;background:hsl(var(--gold));} .ddseren .sr-divider{width:120px;height:1.5px;background:hsl(var(--gold));position:relative;} .ddseren .sr-divider:after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:hsl(var(--gold));border-radius:50%;transform:translate(-50%,-50%) rotate(45deg);} /* icons (gold line, no navy) */ .ddseren .sr-ico svg,.ddseren .sr-ico-sm svg{color:hsl(var(--gold)) !important;stroke:hsl(var(--gold)) !important;} .ddseren .sr-ico{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;} /* dimension separators */ html.gold-theme .ddseren .sr-dims .sr-dim{border-left:1px solid rgba(150,110,40,.28);} html.gold-theme .ddseren .sr-dims .grid>.sr-dim:first-child{border-left:0;} @media (max-width:1023px){html.gold-theme .ddseren .sr-dims .sr-dim{border-left:0;}} /* hero media */ .ddseren .sr-media{height:340px;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(90,70,30,.20);} @media (max-width:1023px){.ddseren .sr-media{height:240px;}} /* curated cards */ .ddseren .sr-card{background:#f8f1e2 !important;border:1px solid #e4d6ba;box-shadow:0 12px 26px rgba(90,70,30,.12);border-radius:2px;transition:transform .4s ease,box-shadow .4s ease;} .ddseren .sr-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(90,70,30,.20);} html.gold-theme .ddseren .sr-card-bar{background:#ece0c6 !important;} .ddseren .sr-ico-sm svg{width:1.1rem;height:1.1rem;} /* CTA pill button (gold, navy text) */ .ddseren .sr-cta{background:hsl(var(--gold));border-radius:9999px;} html.gold-theme .ddseren .sr-cta,html.gold-theme .ddseren .sr-cta *{color:hsl(var(--navy)) !important;} .ddseren .sr-cta:hover{filter:brightness(1.06);} /* FOOTER stays navy (the only navy on the page — the bottom) */ html.gold-theme .ddseren footer{background:hsl(216 60% 12%) !important;border-top:1px solid rgba(212,175,95,.22) !important;} html.gold-theme .ddseren footer *{color:#eae2d2 !important;border-color:rgba(212,175,95,.14) !important;} html.gold-theme .ddseren footer a:hover{color:hsl(var(--gold)) !important;} html.gold-theme .ddseren footer [class*="text-[hsl(var(--gold))]"]{color:hsl(var(--gold)) !important;} .aspect-\[16\/10\]{aspect-ratio:16/10} /* SEREN curated cards: use the mockup's short banner crops at native-ish size (avoid upscaling) */ html.gold-theme .ddseren .sr-card .aspect-\[16\/10\]{aspect-ratio:auto !important;height:150px;} .ddseren .sr-hero .sr-media{height:360px;} @media (max-width:1023px){.ddseren .sr-hero .sr-media{height:260px;}} /* ============================================================ SEREN — brand lockup replaced by the supplied logo artwork The hero previously set "SEREN®" and "by Kayeni" as live text (.sr-lockup / .sr-by). The supplied logo already contains the wordmark, the ornament rule and "by Kayeni", so the text is kept for screen readers and hidden visually. Added 2026-07-26. ============================================================ */ .ddseren .sr-lockup{ display:block; width:min(440px, 92%); aspect-ratio:1162 / 286; margin:0 auto .9rem; background:url("/assets/seren/seren-logo.png") center center / contain no-repeat; } /* keep the words in the accessibility tree, take them off the screen */ .ddseren .sr-lockup .sr-brand, .ddseren .sr-lockup .sr-reg, .ddseren .sr-by{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } @media (min-width:1024px){ .ddseren .sr-lockup{ margin-left:0; margin-right:auto; } }