/* ============================================================ MCA — LIGHT THEME Activated by `theme-light` on + (toggled in nav). The site ships dark; this layer flips tokens and re-skins every hard-coded dark surface to a warm-beige light treatment. Strategy: - Flip the design tokens to a warm beige palette. - The route-scoped dark classes (home-dark / blog-dark / team-dark-page) are switched OFF in light mode by the router, so those components fall back to their light base styles automatically. - This file overrides the surfaces that are *always* dark (nav, footer, results band, insights band, Life-at-MCA, reports, case studies, team globe, and the two immersive product pages). - Intentional dark moments are kept: the immersive page heroes and closing CTAs, the data-dashboard bands (AI impact / GS proof) and the code-window device. They read as deliberate accents on a light page. ============================================================ */ html.theme-light { background: #FAF7F1; } html.theme-light body, body.theme-light { --bg: #FAF7F1; --ink: #181A1C; --deep: #1A3B4D; --muted: #5F6469; --surface: #F2ECE0; --border: #E3DBCC; --hairline: #ECE5D8; background: var(--bg); color: var(--ink); } html.theme-light body ::selection { background: var(--deep); color: #fff; } /* ============================================================ THEME TOGGLE BUTTON (lives in nav) ============================================================ */ .nav__theme { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } .nav__theme:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-1px); } .nav__theme:active { transform: translateY(0); } .nav__theme-icon { display: inline-flex; animation: theme-icon-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes theme-icon-in { from { opacity: 0; transform: rotate(-35deg) scale(0.7); } to { opacity: 1; transform: rotate(0deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .nav__theme-icon { animation: none; } } /* Light-mode appearance of the toggle */ html.theme-light .nav__theme { border-color: var(--border); background: #fff; color: var(--ink); } html.theme-light .nav__theme:hover { background: var(--surface); border-color: var(--ink); } /* Toggle row inside the mobile menu */ .mobile-menu__theme { margin-top: 12px; display: inline-flex; align-items: center; gap: 14px; align-self: flex-start; padding: 12px 0; border: 0; background: transparent; cursor: pointer; font-family: var(--font-head); font-size: 28px; font-weight: 500; color: var(--ink); } .mobile-menu__theme .nav__theme-icon { color: var(--teal); } @media (max-width: 600px) { .mobile-menu__theme { font-size: 22px; } } /* ============================================================ NAV — solid beige header in light mode (works over the dark hero video / immersive heroes too) ============================================================ */ html.theme-light .nav--dark { color: var(--ink); background: rgba(250, 247, 241, 0.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--hairline); box-shadow: none; } html.theme-light .nav--dark.nav--dark-scrolled { background: rgba(250, 247, 241, 0.9); box-shadow: 0 1px 0 0 var(--hairline), 0 8px 24px -16px rgba(26, 59, 77, 0.10); } html.theme-light .nav--dark .nav__link { color: var(--ink); } html.theme-light .nav--dark .nav__link:hover { background: rgba(0, 0, 0, 0.05); } html.theme-light .nav--dark .nav__link--active { color: var(--teal); } html.theme-light .nav--dark .nav__hamburger { background: #fff; border-color: var(--border); color: var(--ink); } html.theme-light .nav--dark .nav__dropdown { background: #fff; border-color: var(--hairline); box-shadow: 0 12px 40px -12px rgba(26, 59, 77, 0.14); } html.theme-light .nav--dark .nav__dd-item:hover { background: var(--surface); } html.theme-light .nav--dark .nav__dd-title { color: var(--ink); } html.theme-light .nav--dark .nav__dd-desc { color: var(--muted); } html.theme-light .nav--dark .btn--primary { background: var(--ink); color: #fff; } html.theme-light .nav--dark .btn--primary:hover { background: var(--teal); color: #fff; } html.theme-light .mobile-menu { background: var(--bg); } html.theme-light .mobile-menu a { color: var(--ink); border-bottom-color: var(--hairline); } /* ============================================================ HOME — always-dark feature bands → light ============================================================ */ /* Results band (metrics + trusted-by) */ html.theme-light .results-section { background: var(--surface); color: var(--ink); } html.theme-light .results-section::before { display: none; } html.theme-light .metrics__title { color: var(--ink); } html.theme-light .metric__num { color: var(--teal); text-shadow: none; } html.theme-light .metric__label { color: var(--muted); } html.theme-light .metrics--flush .metric { border-color: var(--border); } html.theme-light .metrics--flush .metric::before { background: linear-gradient(135deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0) 55%); } html.theme-light .trusted { border-top-color: var(--border); } html.theme-light .trusted__title { color: var(--ink); } /* Eyebrows in these bands carry an inline white style — flip them. */ html.theme-light .results-section .eyebrow, html.theme-light .trusted .eyebrow { color: var(--muted) !important; } /* Partner logos are white/monochrome (made for dark). Keep them on a warm, dark-taupe tray in light mode (not navy/black) so they stay legible while staying in the beige family, with a soft lift off the page. */ html.theme-light .logo-wall { background: #3B342B; border-radius: var(--r-lg); padding: 30px 0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 20px 50px -32px rgba(59, 52, 43, 0.45); } /* Insights marquee band (home) */ html.theme-light .insights-sec { background: var(--surface); color: var(--ink); } html.theme-light .insights-sec .eyebrow { color: var(--muted); } html.theme-light .insights-sec .h2 { color: var(--ink); } html.theme-light .ins-card__title { color: var(--ink); } html.theme-light .ins-card__meta { color: var(--teal); } html.theme-light .ins-card__metric { color: var(--muted); } html.theme-light .ins-card__cta { color: var(--muted); border-top-color: var(--hairline); } html.theme-light .ins-card:hover .ins-card__cta { color: var(--ink); } html.theme-light .insights-sec .btn--secondary { color: var(--ink); border-color: var(--border); } html.theme-light .insights-sec .btn--secondary:hover { border-color: var(--ink); background: rgba(0, 0, 0, 0.04); } /* Life at MCA (.tl) */ html.theme-light .tl { background: var(--surface); color: var(--ink); border-top-color: var(--hairline); border-bottom-color: var(--hairline); } html.theme-light .tl::before { display: none; } html.theme-light .tl__copy, html.theme-light .tl__title { color: var(--ink); } html.theme-light .tl__title em span { color: var(--ink) !important; } html.theme-light .tl__eyebrow, html.theme-light .tl__prev-eyebrow { color: var(--muted); } html.theme-light .tl__lede { color: var(--muted); } html.theme-light .tl__prev-stage { background: #3B342B; border-color: rgba(255, 255, 255, 0.07); } html.theme-light .tl__card { background: #fff; border-color: var(--border); box-shadow: 0 30px 80px -30px rgba(26, 59, 77, 0.12); } html.theme-light .tl__stage { background: var(--surface); } html.theme-light .tl__cap { background: #fff; border-top-color: var(--hairline); color: var(--ink); } html.theme-light .tl__cap-sub { color: var(--muted); } html.theme-light .tl__count { color: var(--muted); } html.theme-light .tl__dot { background: rgba(0, 0, 0, 0.16); } html.theme-light .tl__dot--active { background: var(--ink); } html.theme-light .tl__logos-wrap { border-top-color: var(--hairline); } /* Team-life carousel (about/team) */ html.theme-light .team-life { background: var(--surface); color: var(--ink); } html.theme-light .team-life::before { display: none; } html.theme-light .team-life__title { color: var(--ink); } html.theme-light .team-life__copy { color: var(--muted); } html.theme-light .team-life__intro .eyebrow { color: var(--muted); } html.theme-light .team-life__chip { color: var(--ink); border-color: var(--border); background: #fff; } html.theme-light .team-life__card { background: #fff; border-color: var(--border); } /* ============================================================ FOOTER → light (shared by every page) ============================================================ */ html.theme-light .footer { background: var(--surface); color: var(--muted); } html.theme-light .footer__top { border-bottom-color: var(--border); } html.theme-light .footer__brand-name, html.theme-light .footer__col-title { color: var(--ink); } html.theme-light .footer__col a:hover { color: var(--ink); } html.theme-light .footer__bottom { color: var(--muted); } /* ============================================================ REPORTS PAGE (.rpt-*) — always dark → light ============================================================ */ html.theme-light .rpt-hero { background: var(--bg); color: var(--ink); border-bottom-color: var(--hairline); } html.theme-light .rpt-hero__bg { display: none; } html.theme-light .rpt-hero__chip { border-color: var(--border); background: #fff; color: var(--muted); } html.theme-light .rpt-hero__chip-sep, html.theme-light .rpt-hero__chip-count { color: var(--muted); } html.theme-light .rpt-hero__title { color: var(--ink); } html.theme-light .rpt-hero__accent { background: linear-gradient(180deg, #00A5A1 0%, #007D7A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } html.theme-light .rpt-hero__sub { color: var(--muted); } html.theme-light .rpt-hero__meta { color: var(--muted); } html.theme-light .rpt-hero__dot { background: rgba(0, 0, 0, 0.25); } html.theme-light .rpt-section { background: var(--surface); color: var(--ink); } html.theme-light .rpt-section::before { background: linear-gradient(to right, transparent, var(--border), transparent); } html.theme-light .rpt-card { background: #fff; border-color: var(--border); } html.theme-light .rpt-card:hover { border-color: rgba(0, 165, 161, 0.45); box-shadow: 0 30px 60px -28px rgba(26, 59, 77, 0.20), 0 0 0 1px rgba(0, 165, 161, 0.06); } html.theme-light .rpt-cover { background: var(--surface); border-bottom-color: var(--hairline); } html.theme-light .rpt-card__read, html.theme-light .rpt-card__date { color: var(--muted); } html.theme-light .rpt-card__title { color: var(--ink); } html.theme-light .rpt-card__preview { color: var(--muted); } html.theme-light .rpt-card__foot { border-top-color: var(--hairline); } html.theme-light .rpt-card__cta { color: var(--ink); border-color: var(--border); background: #fff; } html.theme-light .rpt-cta { background: linear-gradient(180deg, rgba(0, 165, 161, 0.06), rgba(0, 0, 0, 0.01)), #fff; border-color: var(--border); } html.theme-light .rpt-cta::before { background: radial-gradient(60% 80% at 100% 0%, rgba(0, 165, 161, 0.12), transparent 60%); } html.theme-light .rpt-cta__title { color: var(--ink); } html.theme-light .rpt-cta__desc { color: var(--muted); } html.theme-light .rpt-cta .btn--primary { background: var(--ink); color: #fff; } html.theme-light .rpt-cta .btn--primary:hover { background: var(--teal); color: #fff; } html.theme-light main:has(.rpt-section) + .footer { margin-top: 0; } /* ============================================================ TEAM PAGE — dark section + globe → light ============================================================ */ html.theme-light .section--team-dark { background: var(--bg); color: var(--ink); } html.theme-light .section--team-dark::before { display: none; } html.theme-light .section--team-dark .eyebrow { color: var(--muted); } html.theme-light .section--team-dark .h2 { color: var(--ink); } html.theme-light .section--team-dark .lede { color: var(--muted); } html.theme-light .section--team-dark .team-leadership, html.theme-light .section--team-dark .team-grid { background: var(--border); border-color: var(--border); } html.theme-light .section--team-dark .member { background: #fff; } html.theme-light .section--team-dark .member:hover { background: var(--surface); } html.theme-light .section--team-dark .member__name { color: var(--ink); } html.theme-light .section--team-dark .member__role { color: var(--muted); } html.theme-light .section--team-dark .member__photo--img { background: var(--surface); } html.theme-light .section--team-dark .member__photo { background: repeating-linear-gradient(135deg, #fff 0 10px, var(--surface) 10px 20px); border-color: var(--hairline); color: var(--deep); } html.theme-light .section--team-dark .member__social { background: #fff; border-color: var(--border); color: var(--muted); } html.theme-light .section--team-dark .member__social:hover { color: #fff; } html.theme-light .section--team-dark .btn--secondary { color: var(--ink); border-color: var(--border); background: transparent; } html.theme-light .section--team-dark .btn--secondary:hover { background: rgba(0, 0, 0, 0.04); border-color: var(--ink); } html.theme-light .section--team-dark .experience-strip span { color: var(--muted); border-color: var(--border); } html.theme-light .section--team-dark .cta-block { background: var(--ink); border-color: transparent; box-shadow: 0 40px 80px -40px rgba(26, 59, 77, 0.25); } html.theme-light .globe-header { border-bottom-color: var(--border); } html.theme-light .globe-header__title { color: var(--ink); } html.theme-light .globe-header__sub { color: var(--muted); } html.theme-light .globe-header__cities li { color: var(--muted); } /* Globe is a dark "planet" sphere (sphereFill) — it reads well on beige, so its meridian/latitude lines stay light. No stroke override needed. */ /* ============================================================ CASE STUDIES (list) — .csx-* always dark → light ============================================================ */ html.theme-light .csx-hero { position: relative; overflow: hidden; isolation: isolate; padding: 208px 0 128px; min-height: 92vh; display: flex; align-items: center; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--hairline); } @media (max-width: 640px) { html.theme-light .csx-hero { min-height: auto; padding: 150px 0 96px; } } html.theme-light .csx-hero__grid { background-image: linear-gradient(to right, rgba(0, 120, 118, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 120, 118, 0.06) 1px, transparent 1px); } html.theme-light .csx-hero__noise { display: none; } html.theme-light .csx-hero__vignette { background: radial-gradient(115% 80% at 50% 42%, transparent 45%, rgba(250, 247, 241, 0.7) 85%, var(--bg) 100%); } html.theme-light .csx-hero__fade { background: linear-gradient(to bottom, transparent, var(--bg)); } html.theme-light .csx-hero__beam--1 { opacity: 0.3; } html.theme-light .csx-hero__beam--2 { opacity: 0.18; } html.theme-light .csx-hero__title { color: var(--ink); } html.theme-light .csx-hero__sub { color: var(--muted); } html.theme-light .csx-hero__stat-num { color: var(--ink); } html.theme-light .csx-hero__stat-label { color: var(--muted); } html.theme-light .csx-hero__stat-div { background: linear-gradient(to bottom, transparent, var(--border), transparent); } html.theme-light .csx-feature { background: #fff; border-color: var(--border); } html.theme-light .csx-feature:hover { box-shadow: 0 40px 80px -40px rgba(26, 59, 77, 0.22); } html.theme-light .csx-feature__title { color: var(--ink); } html.theme-light .csx-feature__summary { color: var(--muted); } html.theme-light .csx-feature__result { border-top-color: var(--hairline); } html.theme-light .csx-feature__result-label { color: var(--muted); } html.theme-light .csx-feature__cta { color: var(--ink); } html.theme-light .csx-chip { color: var(--muted); border-color: var(--border); background: #fff; } html.theme-light .csx-card { background: #fff; border-color: var(--border); } html.theme-light .csx-card:hover { box-shadow: 0 28px 60px -36px rgba(26, 59, 77, 0.25); } html.theme-light .csx-card__result { border-bottom-color: var(--hairline); } html.theme-light .csx-card__result-label { color: var(--muted); } html.theme-light .csx-card__title { color: var(--ink); } html.theme-light .csx-card__summary { color: var(--muted); } html.theme-light .csx-card__cta { color: var(--ink); } /* Case study DETAIL band + quote (art2 is already theme-aware) */ html.theme-light .csx-band__grid { border-color: var(--border); background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0)); } html.theme-light .csx-band__lead { border-right-color: var(--border); } @media (max-width: 760px) { html.theme-light .csx-band__lead { border-right: 0; border-bottom-color: var(--border); } } html.theme-light .csx-band__lead-label { color: var(--muted); } html.theme-light .csx-band__metric-val { color: var(--ink); } html.theme-light .csx-band__metric-label { color: var(--muted); } html.theme-light .csx-quote { background: linear-gradient(90deg, rgba(0, 165, 161, 0.08), rgba(0, 0, 0, 0)); } html.theme-light .csx-quote p { color: var(--ink); } html.theme-light .csx-quote__name { color: var(--ink); } html.theme-light .csx-quote__role { color: var(--muted); } /* ============================================================ IMMERSIVE PAGES — shared helpers Kept dark on purpose: .ai-hero / .gs-hero, .ai-final / .gs-final, the data bands (.ai-impact, .gs-proof) and the code window. Everything else flips to light (beats the page's !important block). ============================================================ */ html.theme-light body:has(.ai-final), html.theme-light body:has(.gs-final) { background: var(--bg) !important; } /* ---- AI SOLUTIONS — section backgrounds ---- */ html.theme-light .ai-shift, html.theme-light .ai-partner, html.theme-light .ai-why { background: #fff !important; color: var(--ink); } html.theme-light .ai-systems, html.theme-light .ai-how, html.theme-light .ai-ind { background: var(--surface) !important; background-image: none !important; color: var(--ink); } html.theme-light .ai-ops { background: var(--surface) !important; color: var(--ink); } html.theme-light .ai-ops::before { display: none; } /* headings / ledes / eyebrows */ html.theme-light .ai-shift__title, html.theme-light .ai-systems__title, html.theme-light .ai-partner__title, html.theme-light .ai-how__title, html.theme-light .ai-why__title, html.theme-light .ai-ind__title, html.theme-light .ai-ops__title { color: var(--ink) !important; } html.theme-light .ai-shift .eyebrow, html.theme-light .ai-systems .eyebrow, html.theme-light .ai-partner .eyebrow, html.theme-light .ai-how .eyebrow, html.theme-light .ai-why .eyebrow, html.theme-light .ai-ind .eyebrow, html.theme-light .ai-ops .eyebrow { color: var(--muted) !important; } html.theme-light .ai-shift__lede, html.theme-light .ai-systems__lede, html.theme-light .ai-partner__lede, html.theme-light .ai-how__lede, html.theme-light .ai-ind__lede, html.theme-light .ai-ops__lede, html.theme-light .ai-why__p { color: var(--muted) !important; } html.theme-light .ai-shift__title em, html.theme-light .ai-systems__title em, html.theme-light .ai-partner__title em, html.theme-light .ai-how__title em, html.theme-light .ai-why__title em, html.theme-light .ai-ind__title em { color: var(--teal) !important; } /* Intelligence shift grid */ html.theme-light .ai-shift__grid { border-top-color: var(--border) !important; border-bottom-color: var(--border) !important; } html.theme-light .ai-shift__card { border-right-color: var(--border) !important; } @media (max-width: 900px) { html.theme-light .ai-shift__card { border-bottom-color: var(--border) !important; } } html.theme-light .ai-shift__card:hover { background: var(--surface) !important; } html.theme-light .ai-shift__cardTitle { color: var(--ink); } html.theme-light .ai-shift__cardDesc { color: var(--muted) !important; } /* AI systems bento */ html.theme-light .ai-bento__card { background: #fff !important; border-color: var(--border) !important; color: var(--ink); } html.theme-light .ai-bento__card:hover { border-color: var(--ink) !important; background: #fff !important; } html.theme-light .ai-bento__title { color: var(--ink); } html.theme-light .ai-bento__desc { color: var(--muted) !important; } html.theme-light .ai-bento__glyph { border-color: var(--border) !important; color: var(--deep); background: #fff; } html.theme-light .ai-bento__card:hover .ai-bento__glyph { background: var(--ink) !important; color: var(--teal) !important; border-color: var(--ink) !important; } html.theme-light .ai-bento__hover { color: var(--ink) !important; } /* How we partner */ html.theme-light .ai-partner__card { background: var(--surface) !important; border-color: var(--border) !important; } html.theme-light .ai-partner__card:hover { background: #fff !important; border-color: var(--ink) !important; } html.theme-light .ai-partner__cTitle { color: var(--ink); } html.theme-light .ai-partner__cDesc { color: var(--muted) !important; } html.theme-light .ai-partner__list li { color: var(--ink); border-top-color: var(--border) !important; } html.theme-light .ai-partner__list li:last-child { border-bottom-color: var(--border) !important; } html.theme-light .ai-partner__process { border-top-color: var(--border); } html.theme-light .ai-partner__processLabel { color: var(--muted); } /* How we work timeline */ html.theme-light .ai-how__line { background: linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent) !important; } @media (max-width: 900px) { html.theme-light .ai-how__line { background: linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent) !important; } } html.theme-light .ai-how__nodeRing { background: var(--surface) !important; border-color: var(--border) !important; } html.theme-light .ai-how__sTitle { color: var(--ink); } html.theme-light .ai-how__sDesc { color: var(--muted) !important; } /* Why MCA points (code window stays dark) */ html.theme-light .ai-why__point { border-top-color: var(--border) !important; } html.theme-light .ai-why__point:last-child { border-bottom-color: var(--border) !important; } html.theme-light .ai-why__pointTitle { color: var(--ink); } html.theme-light .ai-why__pointDesc { color: var(--muted) !important; } html.theme-light .ai-why__p--lead { color: var(--ink) !important; } html.theme-light .ai-why__tags span { color: var(--muted) !important; } /* Industries grid */ html.theme-light .ai-ind__grid { background: var(--border) !important; border-color: var(--border) !important; } html.theme-light .ai-ind__cell { background: #fff !important; background-color: #fff !important; color: var(--ink); } html.theme-light .ai-ind__cell:hover { background-color: var(--ink) !important; color: #fff !important; } html.theme-light .ai-ind__cellNum { color: var(--muted) !important; } html.theme-light .ai-ind__caps { background: #fff !important; border-color: var(--border) !important; } html.theme-light .ai-ind__capsHead { color: var(--muted) !important; } html.theme-light .ai-ind__capsList li { color: var(--ink); border-bottom-color: var(--border) !important; } /* Operators (pillars + stack marquee) */ html.theme-light .ai-ops__title, html.theme-light .ai-ops__pTitle, html.theme-light .gs-ops__title, html.theme-light .gs-ops__pTitle { color: var(--ink); } html.theme-light .ai-ops__pDesc, html.theme-light .gs-ops__pDesc { color: var(--muted); } html.theme-light .ai-ops__grid, html.theme-light .gs-ops__grid { background: var(--border); border-color: var(--border); } html.theme-light .ai-ops__pillar, html.theme-light .gs-ops__pillar { background: #fff; } html.theme-light .ai-ops__pillar:hover, html.theme-light .gs-ops__pillar:hover { background: var(--surface); } html.theme-light .ai-stack, html.theme-light .gs-stack { border-top-color: var(--border); } html.theme-light .ai-stack__label, html.theme-light .gs-stack__label { color: var(--muted); } html.theme-light .ai-stack__pill, html.theme-light .gs-stack__pill { background: #fff; border-color: var(--border); color: var(--ink); } /* Buttons embedded in (now light) AI sections */ html.theme-light .ai-shift .btn--secondary, html.theme-light .ai-systems .btn--secondary, html.theme-light .ai-partner .btn--secondary, html.theme-light .ai-how .btn--secondary, html.theme-light .ai-why .btn--secondary, html.theme-light .ai-ind .btn--secondary, html.theme-light .ai-ops .btn--secondary { background: transparent !important; color: var(--ink) !important; border-color: var(--border) !important; } html.theme-light .ai-shift .btn--secondary:hover, html.theme-light .ai-systems .btn--secondary:hover, html.theme-light .ai-partner .btn--secondary:hover, html.theme-light .ai-how .btn--secondary:hover, html.theme-light .ai-why .btn--secondary:hover, html.theme-light .ai-ind .btn--secondary:hover, html.theme-light .ai-ops .btn--secondary:hover { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--ink) !important; } html.theme-light .ai-shift .btn--primary, html.theme-light .ai-systems .btn--primary, html.theme-light .ai-partner .btn--primary, html.theme-light .ai-how .btn--primary, html.theme-light .ai-why .btn--primary, html.theme-light .ai-ind .btn--primary { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; } /* ============================================================ GROWTH & SCALE — section backgrounds → light Kept dark: .gs-hero, .gs-proof (data band), .gs-final. ============================================================ */ html.theme-light .gs-mandate, html.theme-light .gs-engage, html.theme-light .gs-why { background: #fff !important; color: var(--ink); } html.theme-light .gs-system, html.theme-light .gs-method, html.theme-light .gs-eco { background: var(--surface) !important; color: var(--ink); } html.theme-light .gs-ops { background: var(--surface) !important; color: var(--ink); } html.theme-light .gs-ops::before { display: none; } html.theme-light .gs-mandate .eyebrow, html.theme-light .gs-system .eyebrow, html.theme-light .gs-engage .eyebrow, html.theme-light .gs-method .eyebrow, html.theme-light .gs-why .eyebrow, html.theme-light .gs-eco .eyebrow, html.theme-light .gs-ops .eyebrow { color: var(--muted) !important; } html.theme-light .gs-mandate__title, html.theme-light .gs-system__title, html.theme-light .gs-engage__title, html.theme-light .gs-method__title, html.theme-light .gs-why__title, html.theme-light .gs-eco__title, html.theme-light .gs-ops__title { color: var(--ink) !important; } html.theme-light .gs-mandate__title em, html.theme-light .gs-system__title em, html.theme-light .gs-engage__title em, html.theme-light .gs-method__title em, html.theme-light .gs-why__title em, html.theme-light .gs-eco__title em { color: var(--teal) !important; } html.theme-light .gs-mandate__lede, html.theme-light .gs-system__lede, html.theme-light .gs-engage__lede, html.theme-light .gs-method__lede, html.theme-light .gs-eco__lede, html.theme-light .gs-why__p { color: var(--muted) !important; } /* Mandate cards */ html.theme-light .gs-mandate__card { border-color: var(--border) !important; } html.theme-light .gs-mandate__card:hover { background: var(--surface) !important; } html.theme-light .gs-mandate__cardTitle { color: var(--ink); } html.theme-light .gs-mandate__cardDesc { color: var(--muted) !important; } /* System bento */ html.theme-light .gs-bento__card { background: #fff !important; border-color: var(--border) !important; color: var(--ink); } html.theme-light .gs-bento__card:hover { border-color: var(--ink) !important; background: #fff !important; } html.theme-light .gs-bento__glyph { border-color: var(--border) !important; color: var(--deep); background: #fff; } html.theme-light .gs-bento__card:hover .gs-bento__glyph { background: var(--ink) !important; color: var(--teal) !important; border-color: var(--ink) !important; } html.theme-light .gs-bento__title { color: var(--ink); } html.theme-light .gs-bento__desc { color: var(--muted) !important; } html.theme-light .gs-bento__hover { color: var(--ink) !important; } /* Engagement cards */ html.theme-light .gs-engage__card { background: var(--surface) !important; border-color: var(--border) !important; } html.theme-light .gs-engage__card:hover { background: #fff !important; border-color: var(--ink) !important; } html.theme-light .gs-engage__cTitle { color: var(--ink); } html.theme-light .gs-engage__cDesc { color: var(--muted) !important; } html.theme-light .gs-engage__list li { color: var(--ink); border-top-color: var(--border) !important; } html.theme-light .gs-engage__list li:last-child { border-bottom-color: var(--border) !important; } /* Method timeline */ html.theme-light .gs-method__line { background: linear-gradient(90deg, transparent, var(--border) 8%, var(--border) 92%, transparent) !important; } @media (max-width: 900px) { html.theme-light .gs-method__line { background: linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent) !important; } } html.theme-light .gs-method__nodeRing { background: var(--surface) !important; border-color: var(--border) !important; } html.theme-light .gs-method__sTitle { color: var(--ink); } html.theme-light .gs-method__sDesc { color: var(--muted) !important; } /* Ecosystems grid */ html.theme-light .gs-eco__grid { background: var(--border) !important; border-color: var(--border) !important; } html.theme-light .gs-eco__cell { background: #fff !important; color: var(--ink); } html.theme-light .gs-eco__cell:hover { background: var(--ink) !important; color: #fff !important; } html.theme-light .gs-eco__cellNum { color: var(--muted) !important; } /* The System (gss layered rail) */ html.theme-light .gs-gss__halo { background: radial-gradient(50% 60% at 50% 0%, rgba(0, 165, 161, 0.12), rgba(0, 165, 161, 0) 70%); } html.theme-light .gs-gss__title { color: var(--ink); } html.theme-light .gs-gss__title em { color: var(--teal); } html.theme-light .gs-gss__sub { color: var(--muted); } html.theme-light .gs-gss__meterLabel { color: var(--muted); } html.theme-light .gs-gss__meterTrack { background: var(--border); } html.theme-light .gs-gss__spine { background: linear-gradient(180deg, rgba(0, 165, 161, 0.6), var(--border) 90%); } html.theme-light .gs-gss__node { background: #fff; border-color: rgba(0, 165, 161, 0.45); box-shadow: 0 0 0 5px var(--surface), 0 0 22px -6px rgba(0, 165, 161, 0.45); } html.theme-light .gs-gss__nodeNum { color: #008C88; } html.theme-light .gs-gss__card { background: var(--surface); border-color: var(--border); } html.theme-light .gs-gss__card:hover { border-color: rgba(0, 165, 161, 0.5); background: #fff; } html.theme-light .gs-gss__glyph { border-color: var(--border); background: #fff; color: #008C88; } html.theme-light .gs-gss__index { color: var(--muted); } html.theme-light .gs-gss__layerTitle { color: var(--ink); } html.theme-light .gs-gss__lead { color: #008C88; } html.theme-light .gs-gss__desc { color: var(--muted); } /* Buttons embedded in (now light) GS sections */ html.theme-light .gs-mandate .btn--secondary, html.theme-light .gs-system .btn--secondary, html.theme-light .gs-engage .btn--secondary, html.theme-light .gs-method .btn--secondary, html.theme-light .gs-why .btn--secondary, html.theme-light .gs-eco .btn--secondary, html.theme-light .gs-ops .btn--secondary { background: transparent !important; color: var(--ink) !important; border-color: var(--border) !important; } html.theme-light .gs-mandate .btn--secondary:hover, html.theme-light .gs-system .btn--secondary:hover, html.theme-light .gs-engage .btn--secondary:hover, html.theme-light .gs-method .btn--secondary:hover, html.theme-light .gs-why .btn--secondary:hover, html.theme-light .gs-eco .btn--secondary:hover, html.theme-light .gs-ops .btn--secondary:hover { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--ink) !important; } html.theme-light .gs-mandate .btn--primary, html.theme-light .gs-system .btn--primary, html.theme-light .gs-engage .btn--primary, html.theme-light .gs-method .btn--primary, html.theme-light .gs-why .btn--primary, html.theme-light .gs-eco .btn--primary { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; } html.theme-light .gs-mandate .btn--ghost, html.theme-light .gs-system .btn--ghost, html.theme-light .gs-engage .btn--ghost, html.theme-light .gs-why .btn--ghost, html.theme-light .gs-method .btn--ghost, html.theme-light .gs-eco .btn--ghost { color: var(--ink) !important; } /* ============================================================ FULLY-LIGHT CONVERSIONS (formerly intentional dark moments — now flipped on request) ============================================================ */ /* ---- Home Final CTA card (.cta-block) ---- */ html.theme-light .cta-block { background: linear-gradient(180deg, #fff, var(--surface)); border: 1px solid var(--border); color: var(--ink); } html.theme-light .cta-block::before { background: radial-gradient(circle, rgba(0, 165, 161, 0.16), transparent 60%); } html.theme-light .cta-block__title { color: var(--ink); } html.theme-light .cta-block__sub { color: var(--muted); } html.theme-light .cta-block .eyebrow { color: var(--muted) !important; } /* override the earlier dark team-page treatment */ html.theme-light .section--team-dark .cta-block { background: linear-gradient(180deg, #fff, var(--surface)); border: 1px solid var(--border); box-shadow: 0 40px 80px -40px rgba(26, 59, 77, 0.18); } /* ---- AI Solutions — Measurable Impact dashboard ---- */ html.theme-light .ai-impact { background: var(--surface) !important; } html.theme-light .ai-impact .eyebrow { color: var(--muted) !important; } html.theme-light .ai-impact__title { color: var(--ink); } html.theme-light .ai-impact__title em { color: var(--teal); } html.theme-light .ai-impact__lede { color: var(--muted); } html.theme-light .impact-card { background: #fff; border-color: var(--border); } html.theme-light .impact-card:hover { background: #fff; border-color: var(--ink); } html.theme-light .impact-card::before { background: radial-gradient(70% 60% at 100% 0%, rgba(0, 165, 161, 0.08), transparent 60%); } html.theme-light .impact-card__eyebrow { color: var(--muted); } html.theme-light .impact-card__num { color: var(--ink); } html.theme-light .impact-card__label { color: var(--muted); } html.theme-light .impact-card__desc { color: var(--muted); } html.theme-light .impact-card__axis { color: var(--muted); } html.theme-light .impact-gridline { stroke: rgba(0, 0, 0, 0.07); } html.theme-light .impact-baseline { stroke: rgba(0, 0, 0, 0.26); } html.theme-light .impact-dot { fill: #fff; } html.theme-light .impact-bar__meta { color: var(--muted); } html.theme-light .impact-bar__track { background: rgba(0, 0, 0, 0.06); } html.theme-light .impact-bar__fill--muted { background: rgba(0, 0, 0, 0.18); box-shadow: none; } html.theme-light .impact-gauge__track { stroke: rgba(0, 0, 0, 0.08); } html.theme-light .impact-seg--miss { background: rgba(0, 0, 0, 0.14); } /* ---- Closing CTAs: AI final + GS final ---- */ html.theme-light .ai-final, html.theme-light .ai-final__block, html.theme-light .gs-final, html.theme-light .gs-final__block { background: var(--surface) !important; color: var(--ink); } html.theme-light .ai-final__grid > span, html.theme-light .gs-final__grid > span { border-right-color: rgba(0, 0, 0, 0.05); border-bottom-color: rgba(0, 0, 0, 0.05); } html.theme-light .ai-final__block::after, html.theme-light .gs-final__block::after { background: radial-gradient(50% 50% at 20% 10%, rgba(0, 165, 161, 0.12), transparent 60%), radial-gradient(60% 60% at 100% 100%, rgba(26, 59, 77, 0.08), transparent 65%); } html.theme-light .ai-final__eyebrow, html.theme-light .gs-final__eyebrow { color: var(--muted) !important; } html.theme-light .ai-final__title, html.theme-light .gs-final__title { color: var(--ink); } html.theme-light .ai-final__title em, html.theme-light .gs-final__title em { color: var(--teal); } html.theme-light .ai-final__sub, html.theme-light .gs-final__sub { color: var(--muted); } html.theme-light .ai-final__ctas .btn--secondary, html.theme-light .gs-final__ctas .btn--secondary { background: transparent !important; color: var(--ink) !important; border-color: var(--border) !important; } html.theme-light .ai-final__ctas .btn--secondary:hover, html.theme-light .gs-final__ctas .btn--secondary:hover { background: rgba(0, 0, 0, 0.04) !important; border-color: var(--ink) !important; } /* ---- GS — Impact in Numbers (Proof) data band ---- */ /* dark-mode defaults for the SVG stroke vars used inline in the JSX */ .gs-proof { --proof-track: rgba(255, 255, 255, 0.10); --proof-grid: rgba(255, 255, 255, 0.07); } html.theme-light .gs-proof { background: var(--surface) !important; color: var(--ink); --proof-track: rgba(0, 0, 0, 0.10); --proof-grid: rgba(0, 0, 0, 0.08); } html.theme-light .gs-proof .eyebrow { color: var(--muted) !important; } html.theme-light .gs-proof__title { color: var(--ink); } html.theme-light .gs-proof__title em, html.theme-light .gs-proof__hl { color: var(--teal); } html.theme-light .gs-proof__lede { color: var(--muted); } html.theme-light .gs-proof__stat { background: #fff; border-color: var(--border); } html.theme-light .gs-proof__stat:hover { background: #fff; border-color: rgba(0, 165, 161, 0.45); } html.theme-light .gs-proof__statLabel { color: var(--muted); } html.theme-light .gs-proof__statVal { color: var(--ink); } html.theme-light .gs-proof__panel { background: #fff; border-color: var(--border); } html.theme-light .gs-proof__panelHead { color: var(--muted); } html.theme-light .gs-proof__reachRow { border-bottom-color: var(--border); } html.theme-light .gs-proof__reachLabel { color: var(--ink); } html.theme-light .gs-proof__reachVal { color: var(--teal); } html.theme-light .gs-proof__donutVal { color: var(--ink); } html.theme-light .gs-proof__donutLabel { color: var(--muted); } html.theme-light .gs-proof__tvlYlbl, html.theme-light .gs-proof__tvlXlbl { fill: var(--muted); } html.theme-light .gs-proof__tvlCallout { fill: var(--ink); } html.theme-light .gs-proof__noteText { color: var(--ink); } html.theme-light .gs-proof__noteText strong { color: var(--ink); } html.theme-light .gs-proof__noteLabel { color: var(--teal); } html.theme-light .gs-proof__miniVal { color: var(--ink); } html.theme-light .gs-proof__miniLabel { color: var(--muted); } html.theme-light .gs-proof__mini { border-top-color: var(--border); }