/* * Predictively — Light Mode System * v1.0.0 * * ADDITIVE ONLY. Zero mutations to existing CSS files. * All rules scoped to [data-theme="light"] except the toggle button * and the transition layer (which are safe globally). * * Architecture: [data-theme="light"] on * Load order: after predictively-product-ui */ /* ============================================================= 1. TRANSITION LAYER Applied only AFTER initial load (via data-theme-ready attr set by JS). Prevents any flash on first paint. ============================================================= */ html[data-theme-ready], html[data-theme-ready] *, html[data-theme-ready] *::before, html[data-theme-ready] *::after { transition: background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), fill 220ms cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Exclude elements where transitions cause visual glitches */ html[data-theme-ready] img, html[data-theme-ready] video, html[data-theme-ready] canvas, html[data-theme-ready] iframe, html[data-theme-ready] .lm-toggle__icon, html[data-theme-ready] [data-no-transition] { transition: opacity 220ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ============================================================= 2. LIGHT MODE CSS CUSTOM PROPERTY OVERRIDES Token-level re-map. Covers ~80% of styles automatically. ============================================================= */ [data-theme="light"] { /* ── Backgrounds ── */ --color-bg: #F3F6FB; --color-bg-deep: #E8EDF5; --color-bg-raised: #FFFFFF; --color-bg-surface: #FFFFFF; --color-bg-frost: rgba(15, 30, 60, 0.04); --color-bg-frost-hover: rgba(15, 30, 60, 0.08); /* ── Surfaces ── */ --color-surface: rgba(255, 255, 255, 0.94); --color-surface-solid: #FFFFFF; --color-surface-soft: #F6F9FF; /* ── Panels ── */ --color-panel: #F3F6FB; --color-panel-raised: #FFFFFF; --color-panel-soft: #F6F9FF; /* ── Ink / Text ── */ --color-ink: #0C1626; --color-ink-soft: rgba(12, 22, 38, 0.70); --color-ink-muted: rgba(12, 22, 38, 0.45); --color-ink-ghost: rgba(12, 22, 38, 0.25); --color-ink-inverse: #0C1626; /* ── Borders ── */ --color-border: rgba(15, 30, 60, 0.10); --color-border-mid: rgba(15, 30, 60, 0.16); --color-border-strong: rgba(15, 30, 60, 0.24); --color-border-legacy: rgba(15, 30, 60, 0.10); /* ── Accent palette (deepened for white-bg contrast) ── */ --color-accent: #2563EB; --color-accent-soft: rgba(37, 99, 235, 0.10); --color-accent-glow: rgba(37, 99, 235, 0.18); --color-accent-line: rgba(37, 99, 235, 0.28); --color-teal: #0D9488; --color-amber: #D97706; --color-red: #DC2626; --color-green: #059669; /* ── Shadows (airy, not heavy) ── */ --shadow-soft: 0 2px 16px rgba(15, 30, 60, 0.08), 0 1px 4px rgba(15, 30, 60, 0.05); --shadow-panel: 0 8px 40px rgba(15, 30, 60, 0.11), 0 2px 8px rgba(15, 30, 60, 0.07); --shadow-glow: 0 0 0 6px rgba(37, 99, 235, 0.18); /* ── Product shell tokens ── */ --product-shell: rgba(255, 255, 255, 0.88); --product-shell-strong: rgba(255, 255, 255, 0.98); --product-line: rgba(15, 30, 60, 0.08); --product-line-mid: rgba(15, 30, 60, 0.12); --product-line-strong: rgba(15, 30, 60, 0.18); --product-panel: #FFFFFF; --product-panel-soft: #F6F9FF; } /* ============================================================= 3. BODY ============================================================= */ [data-theme="light"] body { background-color: var(--color-bg); color: var(--color-ink); } /* ============================================================= 4. HEADER Hardcoded override: background rgba(12,18,32,0.88) ============================================================= */ [data-theme="light"] .site-header { background: rgba(243, 246, 251, 0.92); border-bottom-color: rgba(15, 30, 60, 0.10); } /* ============================================================= 5. NAVIGATION LINKS ============================================================= */ [data-theme="light"] .menu a, [data-theme="light"] .site-navigation__utility-link { color: var(--color-ink-soft); } [data-theme="light"] .menu a:hover, [data-theme="light"] .site-navigation__utility-link:hover, [data-theme="light"] .site-navigation__utility-link--primary { color: var(--color-ink); } /* Mobile nav dropdown — hardcoded: rgba(17,24,39,0.98) */ @media (max-width: 959px) { [data-theme="light"] .site-navigation { background: rgba(247, 250, 255, 0.98) !important; border-color: rgba(15, 30, 60, 0.14) !important; } } /* Hamburger bars */ [data-theme="light"] .site-nav-toggle__bar, [data-theme="light"] .site-nav-toggle__bar::before, [data-theme="light"] .site-nav-toggle__bar::after { background: var(--color-ink-soft); } [data-theme="light"] .site-navigation__user-dot { background: var(--color-teal); border-color: var(--color-bg); } /* ============================================================= 6. LOGO SWAP — CSS LAYER JS does the src swap. This CSS hides the light logo img element inserted by JS when dark mode is active, and vice versa. ============================================================= */ /* Light mode logo element: hidden by default */ .lm-logo-light { display: none !important; } /* In light mode: show light logo, hide dark logo */ [data-theme="light"] .lm-logo-light { display: inline !important; } [data-theme="light"] .lm-logo-dark { display: none !important; } /* ============================================================= 7. BUTTONS Hardcoded overrides: rgba(255,255,255,0.04/0.07) ============================================================= */ [data-theme="light"] .button--secondary, [data-theme="light"] .button--ghost { background: rgba(15, 30, 60, 0.05); border-color: rgba(15, 30, 60, 0.14); color: var(--color-ink-soft); } [data-theme="light"] .button--secondary:hover, [data-theme="light"] .button--secondary:focus-visible, [data-theme="light"] .button--ghost:hover, [data-theme="light"] .button--ghost:focus-visible { background: rgba(15, 30, 60, 0.09); border-color: rgba(15, 30, 60, 0.22); color: var(--color-ink); } /* ============================================================= 8. BADGE Hardcoded: rgba(255,255,255,0.04) ============================================================= */ [data-theme="light"] .badge { background: rgba(15, 30, 60, 0.05); border-color: rgba(15, 30, 60, 0.12); color: var(--color-ink-muted); } [data-theme="light"] .badge--soft { background: var(--color-accent-soft); border-color: rgba(37, 99, 235, 0.18); color: var(--color-accent); } /* ============================================================= 9. PRE / CODE BLOCKS Hardcoded: #0e1727 ============================================================= */ [data-theme="light"] pre { background: #EEF2FF; color: #1E2D4A; border: 1px solid rgba(15, 30, 60, 0.12); } [data-theme="light"] code { color: var(--color-accent); } /* ============================================================= 10. SURFACE UTILITY CLASS ============================================================= */ [data-theme="light"] .surface { background: var(--color-bg-surface); border-color: var(--color-border); box-shadow: var(--shadow-soft); } /* .surface--dark always stays dark — restored explicitly in §46 below. Note: the [data-theme="light"] .surface rule above would otherwise override the hardcoded dark gradient because both classes are applied together (class="surface surface--dark"). §46 wins with equal specificity because it appears later in the stylesheet. */ /* ============================================================= 11. TOKEN LIST / CHECK LIST Hardcoded: rgba(255,255,255,0.04) inside .surface--dark These are inherited rules, safe to skip. ============================================================= */ [data-theme="light"] .token-list li { background: rgba(15, 30, 60, 0.04); border-color: rgba(15, 30, 60, 0.10); color: var(--color-ink-soft); } /* ============================================================= 12. SIGNAL CHIP (Home hero) Hardcoded: rgba(255,255,255,0.88) — blends in light mode ============================================================= */ [data-theme="light"] .signal-chip { background: #FFFFFF; border: 1px solid rgba(15, 30, 60, 0.10); } /* ============================================================= 13. HERO SIGNAL LIST HOVER Hardcoded: #182336 ============================================================= */ [data-theme="light"] .hero-signal-list__item:hover { background: rgba(15, 30, 60, 0.06); } /* ============================================================= 14. PROOF / POST / INSIGHT / AUDIENCE CARDS ============================================================= */ [data-theme="light"] .proof-card, [data-theme="light"] .post-card, [data-theme="light"] .insight-card, [data-theme="light"] .audience-item, [data-theme="light"] .problem-card { background: #FFFFFF; border-color: var(--color-border); } [data-theme="light"] .proof-card:hover, [data-theme="light"] .post-card:hover, [data-theme="light"] .insight-card:hover, [data-theme="light"] .audience-item:hover, [data-theme="light"] .problem-card:hover { background: var(--color-bg); border-color: var(--color-border-mid); } /* ============================================================= 15. PRICING CARDS & TABLES ============================================================= */ [data-theme="light"] .pricing-card { background: #FFFFFF; border-color: var(--color-border); } [data-theme="light"] .pricing-card--featured { border-color: rgba(245, 158, 11, 0.35); } [data-theme="light"] .pricing-compare { border-color: var(--color-border); } [data-theme="light"] .pricing-compare__row--them { background: rgba(15, 30, 60, 0.03); } [data-theme="light"] .pricing-compare__row--us { background: rgba(37, 99, 235, 0.05); border-top-color: rgba(37, 99, 235, 0.15); } [data-theme="light"] .pricing-reasons, [data-theme="light"] .pricing-faq { border-color: var(--color-border); } [data-theme="light"] .pricing-reason, [data-theme="light"] .pricing-faq__item { background: #FFFFFF; border-bottom-color: var(--color-border); } [data-theme="light"] .pricing-reason:hover, [data-theme="light"] .pricing-faq__item:hover { background: var(--color-bg); } /* Tier compare table — hardcoded rgba(255,255,255,0.025/0.015) */ [data-theme="light"] .pricing-tier-compare { border-color: var(--color-border); } [data-theme="light"] .pricing-tier-compare__head { background: rgba(15, 30, 60, 0.03); border-bottom-color: var(--color-border-mid); } [data-theme="light"] .pricing-tier-compare__row { background: #FFFFFF; border-bottom-color: var(--color-border); } [data-theme="light"] .pricing-tier-compare__row:hover { background: var(--color-bg); } [data-theme="light"] .pricing-tier-compare__row--section, [data-theme="light"] .pricing-tier-compare__row--section:hover { background: rgba(15, 30, 60, 0.025); } /* ============================================================= 16. COVERAGE TABLE ============================================================= */ [data-theme="light"] .coverage-table { border-color: var(--color-border); } [data-theme="light"] .coverage-table__row { border-bottom-color: var(--color-border); } [data-theme="light"] .coverage-table__group-label { background: rgba(15, 30, 60, 0.03); color: var(--color-ink-muted); border-bottom-color: var(--color-border); } /* ============================================================= 17. BRIEF ARCH LIST ============================================================= */ [data-theme="light"] .brief-arch__item { border-bottom-color: var(--color-border); } [data-theme="light"] .brief-arch__item:hover { background: rgba(15, 30, 60, 0.03); } /* ============================================================= 18. FORMS ============================================================= */ [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] input[type="password"], [data-theme="light"] input[type="search"], [data-theme="light"] input[type="url"], [data-theme="light"] input[type="tel"], [data-theme="light"] textarea, [data-theme="light"] select { background: #FFFFFF; border-color: rgba(15, 30, 60, 0.18); color: var(--color-ink); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--color-ink-ghost); } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); } /* ============================================================= 19. POST NAVIGATION Hardcoded: rgba(255,255,255,0.75) — override to solid white ============================================================= */ [data-theme="light"] .post-navigation a { background: #FFFFFF; border-color: var(--color-border); } /* ============================================================= 20. CTA STRIP Stays dark in light mode — deliberate contrast anchor. Overrides any token-driven bg flip. ============================================================= */ [data-theme="light"] .cta-strip { background: #1B2F5E; } [data-theme="light"] .cta-strip__title { color: #EEF2F8; } [data-theme="light"] .cta-strip__text { color: rgba(238, 242, 248, 0.68); } /* ============================================================= 21. FOOTER Stays dark in light mode — brand consistency anchor. ============================================================= */ /* Footer stays permanently dark — brand consistency anchor. * Re-declare ALL dark-mode tokens inside .site-footer so every * descendant that uses var(--color-*) inherits the dark values * automatically, without needing individual child overrides. */ [data-theme="light"] .site-footer { background: #0D1626; /* ── Dark-mode token re-declarations ── */ --color-bg: #0C1220; --color-bg-deep: #080E1A; --color-bg-raised: #111827; --color-bg-surface: #161F2E; --color-bg-frost: rgba(255, 255, 255, 0.04); --color-bg-frost-hover: rgba(255, 255, 255, 0.07); --color-ink: #EEF2F8; --color-ink-soft: rgba(238, 242, 248, 0.62); --color-ink-muted: rgba(238, 242, 248, 0.36); --color-ink-ghost: rgba(238, 242, 248, 0.18); --color-ink-inverse: #EEF2F8; --color-border: rgba(255, 255, 255, 0.08); --color-border-mid: rgba(255, 255, 255, 0.12); --color-border-strong: rgba(255, 255, 255, 0.18); --color-border-legacy: rgba(255, 255, 255, 0.08); --product-line: rgba(255, 255, 255, 0.06); --product-line-mid: rgba(255, 255, 255, 0.10); --product-line-strong: rgba(255, 255, 255, 0.16); } /* Utility nav links inside the footer (e.g. Intelligence Centre button). * §5 sets .site-navigation__utility-link color to dark ink which is * invisible against the dark footer background — restore to dark-mode * light text. */ [data-theme="light"] .site-footer .site-navigation__utility-link { background: rgba(255, 255, 255, 0.07); color: rgba(238, 242, 248, 0.70); border-color: rgba(255, 255, 255, 0.12); } [data-theme="light"] .site-footer .site-navigation__utility-link:hover, [data-theme="light"] .site-footer .site-navigation__utility-link:focus-visible { background: rgba(255, 255, 255, 0.13); color: rgba(238, 242, 248, 0.92); border-color: rgba(255, 255, 255, 0.22); } [data-theme="light"] .site-footer .site-navigation__utility-link--primary { color: rgba(238, 242, 248, 0.88); } [data-theme="light"] .site-footer__descriptor, [data-theme="light"] .site-footer__meta, [data-theme="light"] .site-footer__legal { color: rgba(238, 242, 248, 0.45); } [data-theme="light"] .footer-nav__group h4 { color: rgba(238, 242, 248, 0.55); } [data-theme="light"] .menu--footer a, [data-theme="light"] .menu--footer li a, [data-theme="light"] .menu--legal a, [data-theme="light"] .menu--legal li a { color: rgba(238, 242, 248, 0.42); } [data-theme="light"] .menu--footer a:hover, [data-theme="light"] .menu--footer li a:hover, [data-theme="light"] .menu--legal a:hover, [data-theme="light"] .menu--legal li a:hover { color: rgba(238, 242, 248, 0.85); } /* ============================================================= 22. PLATFORM SECTION DIVIDERS ============================================================= */ [data-theme="light"] .platform-section { border-top-color: var(--color-border); } /* ============================================================= 23. HOME IDENT STRIP ============================================================= */ [data-theme="light"] .home-ident { border-bottom-color: var(--color-border); } /* ============================================================= 24. REPORT / DATA VIZ COMPONENTS The hero-workspace, report-workspace, and all chart containers are product UI mockups — intentionally dark in both modes. This is a deliberate design choice: dark "product chrome" on a light background creates high visual hierarchy. Do NOT add overrides here. ============================================================= */ /* ============================================================= 25. SCROLLBAR STYLING ============================================================= */ [data-theme="light"] { scrollbar-color: rgba(15, 30, 60, 0.18) transparent; } [data-theme="light"]::-webkit-scrollbar-thumb { background: rgba(15, 30, 60, 0.16); border-radius: 4px; } [data-theme="light"]::-webkit-scrollbar-track { background: transparent; } /* ============================================================= 26. TOGGLE BUTTON Injected by light-mode.js. Styles are not scoped to [data-theme="light"] so they work in both modes. ============================================================= */ .lm-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--color-border-mid); border-radius: var(--radius-pill); background: var(--color-bg-frost); color: var(--color-ink-muted); cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden; /* Own transition (not affected by data-theme-ready wildcard) */ transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease; } .lm-toggle:hover { border-color: var(--color-border-strong); background: var(--color-bg-frost-hover); color: var(--color-ink); transform: scale(1.1); } .lm-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .lm-toggle:active { transform: scale(0.95); } .lm-toggle__icon { width: 1rem; height: 1rem; position: absolute; transition: opacity 200ms ease, transform 260ms cubic-bezier(0.4, 0, 0.2, 1); } /* Sun icon — visible in dark mode */ .lm-toggle__icon--sun { opacity: 1; transform: rotate(0deg) scale(1); } /* Moon icon — hidden in dark mode */ .lm-toggle__icon--moon { opacity: 0; transform: rotate(-30deg) scale(0.6); } /* In light mode: swap icon states */ [data-theme="light"] .lm-toggle { color: #D97706; border-color: rgba(217, 119, 6, 0.22); background: rgba(217, 119, 6, 0.06); } [data-theme="light"] .lm-toggle:hover { background: rgba(217, 119, 6, 0.10); border-color: rgba(217, 119, 6, 0.32); color: #D97706; transform: scale(1.1); } [data-theme="light"] .lm-toggle__icon--sun { opacity: 0; transform: rotate(30deg) scale(0.6); } [data-theme="light"] .lm-toggle__icon--moon { opacity: 1; transform: rotate(0deg) scale(1); } /* ============================================================= 27. SYSTEM PREFERENCE FALLBACK (no-JS) Applies tokens when OS is light and no explicit data-theme. JS overrides this by always setting data-theme explicitly. ============================================================= */ @media (prefers-color-scheme: light) { html:not([data-theme]) { --color-bg: #F3F6FB; --color-bg-deep: #E8EDF5; --color-bg-raised: #FFFFFF; --color-bg-surface: #FFFFFF; --color-bg-frost: rgba(15, 30, 60, 0.04); --color-bg-frost-hover: rgba(15, 30, 60, 0.08); --color-surface: rgba(255, 255, 255, 0.94); --color-surface-solid: #FFFFFF; --color-surface-soft: #F6F9FF; --color-panel: #F3F6FB; --color-panel-raised: #FFFFFF; --color-panel-soft: #F6F9FF; --color-ink: #0C1626; --color-ink-soft: rgba(12, 22, 38, 0.70); --color-ink-muted: rgba(12, 22, 38, 0.45); --color-ink-ghost: rgba(12, 22, 38, 0.25); --color-ink-inverse: #0C1626; --color-border: rgba(15, 30, 60, 0.10); --color-border-mid: rgba(15, 30, 60, 0.16); --color-border-strong: rgba(15, 30, 60, 0.24); --color-border-legacy: rgba(15, 30, 60, 0.10); --color-accent: #2563EB; --color-accent-soft: rgba(37, 99, 235, 0.10); --color-accent-glow: rgba(37, 99, 235, 0.18); --color-accent-line: rgba(37, 99, 235, 0.28); --color-teal: #0D9488; --shadow-soft: 0 2px 16px rgba(15, 30, 60, 0.08), 0 1px 4px rgba(15, 30, 60, 0.05); --shadow-panel: 0 8px 40px rgba(15, 30, 60, 0.11), 0 2px 8px rgba(15, 30, 60, 0.07); --product-shell: rgba(255, 255, 255, 0.88); --product-shell-strong: rgba(255, 255, 255, 0.98); --product-line: rgba(15, 30, 60, 0.08); --product-line-mid: rgba(15, 30, 60, 0.12); --product-line-strong: rgba(15, 30, 60, 0.18); --product-panel: #FFFFFF; --product-panel-soft: #F6F9FF; } } /* ============================================================= 28. HOME HERO — CITY BACKDROP The city backdrop overlays use hardcoded #0C1220 fades so the background ALWAYS stays dark in both modes. All text/pill/button colours inside must be forced back to light-on-dark regardless of the token flip. ============================================================= */ /* Main text — force light */ [data-theme="light"] .home-hero--city .home-hero__title, [data-theme="light"] .home-hero--city h1 { color: #EEF2F8; } [data-theme="light"] .home-hero--city .home-hero__summary { color: rgba(238, 242, 248, 0.72); } /* Section label (blue — already readable on dark) */ [data-theme="light"] .home-hero--city .section-label { color: var(--color-accent); } /* Ident strip values — uses token color-ink-soft which flips dark */ [data-theme="light"] .home-hero--city .home-ident__value { color: rgba(238, 242, 248, 0.75); } [data-theme="light"] .home-hero--city .home-ident__value--live { color: #0D9488; } /* Ident borders — product-rule will flip fine via token; explicit for safety */ [data-theme="light"] .home-hero--city .home-ident { border-top-color: rgba(255, 255, 255, 0.08); border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="light"] .home-hero--city .home-ident__item { border-right-color: rgba(255, 255, 255, 0.08); } /* Signal pills — hardcoded dark bg, but token text would flip dark */ [data-theme="light"] .hero-signal-pill { border-color: rgba(255, 255, 255, 0.14); background: rgba(12, 18, 32, 0.72); color: rgba(238, 242, 248, 0.80); } [data-theme="light"] .hero-signal-pill__key { color: rgba(238, 242, 248, 0.35); } [data-theme="light"] .hero-signal-pill--live { border-color: rgba(20, 184, 166, 0.28); background: rgba(20, 184, 166, 0.10); color: #0D9488; } [data-theme="light"] .hero-signal-pill--live .hero-signal-pill__key { color: rgba(20, 184, 166, 0.55); } /* Ghost/secondary button inside dark hero */ [data-theme="light"] .home-hero--city .button--secondary, [data-theme="light"] .home-hero--city .button--ghost { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); color: rgba(238, 242, 248, 0.85); } [data-theme="light"] .home-hero--city .button--secondary:hover, [data-theme="light"] .home-hero--city .button--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); color: #EEF2F8; } /* ============================================================= 29. REPORT COMMAND PANEL — WHITE CARDS IN LIGHT MODE .report-panel--summary has a hardcoded dark gradient background that must be explicitly overridden. All child text colors inside that panel are also hardcoded light-on-dark. ============================================================= */ /* Main summary panel: override hardcoded gradient → white */ [data-theme="light"] .report-panel--summary { background: #FFFFFF !important; border-color: var(--color-border) !important; box-shadow: var(--shadow-soft) !important; color: var(--color-ink) !important; } /* Top accent line — restore readable version */ [data-theme="light"] .report-panel--summary::before { background: linear-gradient(90deg, transparent, var(--color-accent-line), transparent) !important; } /* Headings and body text — override hardcoded rgba(238,242,248,N) */ [data-theme="light"] .report-panel--summary h2, [data-theme="light"] .report-panel--summary h3, [data-theme="light"] .report-panel--summary p, [data-theme="light"] .report-panel--summary .report-panel__header p { color: var(--color-ink) !important; } [data-theme="light"] .report-panel--summary .eyebrow, [data-theme="light"] .report-panel--summary .section-label { color: var(--color-ink-muted) !important; } /* Lede and support paragraphs — hardcoded colors */ [data-theme="light"] .report-command__lede { color: var(--color-ink) !important; } [data-theme="light"] .report-command__support { border-top-color: var(--color-border) !important; color: var(--color-ink-soft) !important; } /* KPI metric grid — outer border hardcoded rgba(255,255,255,.08) */ [data-theme="light"] .report-metric-grid { border-color: var(--color-border); } /* KPI metric cards — hardcoded rgba(255,255,255,.03) bg, rgba(255,255,255,.06) borders */ [data-theme="light"] .report-metric-card { background: rgba(15, 30, 60, 0.03); border-right-color: rgba(15, 30, 60, 0.08); border-bottom-color: rgba(15, 30, 60, 0.08); } [data-theme="light"] .report-metric-card:hover { background: rgba(15, 30, 60, 0.06); } /* All other report panels already use var(--color-bg-surface) which flips to #FFFFFF via token — no override needed for those. Only the --summary variant had the hardcoded dark gradient. */ /* ============================================================= 30. RISK RANK SEVERITY BADGES IN LIGHT MODE Hardcoded light text colours (#FDA0A0, #FBBF70) are unreadable on white backgrounds. Swap to darker accessible equivalents. ============================================================= */ /* Risk-rank severity badges: these only appear in the home page sample brief (permanently dark surface). Keep the original dark-mode pastel colours. No overrides needed — product-ui.css dark defaults are correct. */ /* ============================================================= 31. REPORT ANCHOR NAV (tab bar above the report) Uses product-rule / token colours — mostly fine. Add explicit border override for safety. ============================================================= */ [data-theme="light"] .report-anchor-nav { border-bottom-color: var(--color-border); } [data-theme="light"] .report-anchor-nav__link { color: var(--color-ink-muted); } [data-theme="light"] .report-anchor-nav__link:hover { color: var(--color-ink-soft); } [data-theme="light"] .report-anchor-nav__link.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); } /* ============================================================= 32. HOME IDENT STRIP (outside hero context — if reused) When .home-ident appears outside .home-hero--city the label hardcoded colour (rgba(238,242,248,0.18)) would be invisible on a light background. Override to use ghost token. ============================================================= */ [data-theme="light"] .home-ident__label { color: var(--color-ink-ghost); } /* Inside the hero the label is fine (dark bg) — re-force it */ [data-theme="light"] .home-hero--city .home-ident__label { color: rgba(238, 242, 248, 0.22); } /* ============================================================= 33. MISC HARDENED OVERRIDES — additional pass ============================================================= */ /* report-manifest header — hardcoded rgba(255,255,255,0.025) */ [data-theme="light"] .report-manifest__header { background: rgba(15, 30, 60, 0.025); border-bottom-color: var(--color-border); } /* Platform pipeline stages */ [data-theme="light"] .platform-pipeline__stage, [data-theme="light"] .design-choices__row, [data-theme="light"] .methodology-steps__step, [data-theme="light"] .methodology-principle { background: #FFFFFF; border-color: var(--color-border); } [data-theme="light"] .platform-pipeline__stage:hover, [data-theme="light"] .design-choices__row:hover, [data-theme="light"] .methodology-steps__step:hover, [data-theme="light"] .methodology-principle:hover { background: var(--color-bg); } /* Market list */ [data-theme="light"] .market-list { border-color: var(--color-border); } [data-theme="light"] .market-list__item { background: #FFFFFF; border-color: var(--color-border); } [data-theme="light"] .market-list__item:hover { background: var(--color-bg); } /* Insight cards */ [data-theme="light"] .insight-card { background: #FFFFFF; border-color: var(--color-border); } [data-theme="light"] .insight-card:hover { background: var(--color-bg); border-color: var(--color-border-mid); } /* risk-rank-list items — only used in the home page sample brief (permanently dark). Keep dark background and dark-mode severity badge colours. */ [data-theme="light"] .risk-rank-list__item { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); color: rgba(238, 242, 248, 0.80); } [data-theme="light"] .risk-rank-list__item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } [data-theme="light"] .risk-rank-list__body strong { color: #EEF2F8; } [data-theme="light"] .risk-rank-list__body p { color: rgba(238, 242, 248, 0.55); } /* Keep severity badges in their dark-surface colours */ [data-theme="light"] .risk-rank-list__item--low .risk-rank-list__severity { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); color: rgba(238, 242, 248, 0.45); } /* ============================================================= 34. MISSING TOKEN: --color-bg-elevated Referenced by --t2-color-elevated in tier2-report.css. Without this override the tier2 "elevated" surface remains #2D3748 (dark) in light mode. ============================================================= */ [data-theme="light"] { --color-bg-elevated: #EEF2FA; } /* ============================================================= 35. TIER 2 PREMIUM INTELLIGENCE REPORT The --t2-color-* tokens chain through var(--color-*) so most colours flip automatically via Section 2. Only components with hardcoded rgba(255,255,255,N) backgrounds / borders, and the fallback-only --t2-color-elevated token, need explicit fixes. ============================================================= */ /* Section dividers */ [data-theme="light"] .tier2-section { border-top-color: rgba(15, 30, 60, 0.08); } [data-theme="light"] .tier2-section__title { color: rgba(12, 22, 38, 0.50); } [data-theme="light"] .tier2-section__subtitle { color: rgba(12, 22, 38, 0.38); } /* Metric cards — hardcoded dark surface + white borders */ [data-theme="light"] .tier2-metric-card { background: #FFFFFF; border-color: rgba(15, 30, 60, 0.10); box-shadow: var(--shadow-soft); } [data-theme="light"] .tier2-metric-card[data-dm-id]:hover { border-color: var(--lens-accent, var(--color-accent)); box-shadow: 0 0 0 1px var(--lens-accent, var(--color-accent)) inset, 0 4px 20px rgba(37, 99, 235, 0.10); transform: translateY(-2px); } /* Type pill — uses --t2-color-elevated fallback (#2D3748) */ [data-theme="light"] .tier2-metric-card__type-pill { background: rgba(15, 30, 60, 0.06); color: rgba(12, 22, 38, 0.52); } [data-theme="light"] .tier2-metric-card__value { color: #0C1626; } [data-theme="light"] .tier2-metric-card__label { color: rgba(12, 22, 38, 0.55); } [data-theme="light"] .tier2-metric-card__interpretation { color: rgba(12, 22, 38, 0.50); } [data-theme="light"] .tier2-percentile-bar { background: rgba(15, 30, 60, 0.10); } [data-theme="light"] .tier2-percentile-bar__label { color: rgba(12, 22, 38, 0.38); } [data-theme="light"] .tier2-metric-card__lens-hint { color: var(--color-accent); opacity: 0; } [data-theme="light"] .tier2-metric-card[data-dm-id]:hover .tier2-metric-card__lens-hint { opacity: 0.65; } /* Regime pills: keep semantic dark backgrounds (status indicators — dark green / brown / orange / red are conventionally readable and intentionally "alarming" in colour). Only override unknown. */ [data-theme="light"] .tier2-regime-pill--unknown, [data-theme="light"] .tier2-regime__state--unknown { background: rgba(15, 30, 60, 0.08); color: rgba(12, 22, 38, 0.55); } /* Regime rationale */ [data-theme="light"] .tier2-regime__rationale-title { color: rgba(12, 22, 38, 0.45); } [data-theme="light"] .tier2-regime__rationale-list { color: rgba(12, 22, 38, 0.70); } [data-theme="light"] .tier2-regime__attrs dt { color: rgba(12, 22, 38, 0.45); } /* Trend table — hardcoded rgba(255,255,255,.04) borders */ [data-theme="light"] .tier2-trend-table th { background: rgba(15, 30, 60, 0.03); color: rgba(12, 22, 38, 0.45); border-bottom-color: rgba(15, 30, 60, 0.10); } [data-theme="light"] .tier2-trend-table td { border-bottom-color: rgba(15, 30, 60, 0.06); color: rgba(12, 22, 38, 0.75); } [data-theme="light"] .tier2-trend-table tbody tr:hover { background: rgba(15, 30, 60, 0.025); } [data-theme="light"] .tier2-trend-table__direction--up { color: #059669; } [data-theme="light"] .tier2-trend-table__direction--down { color: #DC2626; } [data-theme="light"] .tier2-trend-table__direction--flat { color: rgba(12, 22, 38, 0.40); } /* Panels (Momentum, Volatility) */ [data-theme="light"] .tier2-panel { background: #FFFFFF; border-color: rgba(15, 30, 60, 0.10); box-shadow: var(--shadow-soft); } [data-theme="light"] .tier2-panel__title { color: rgba(12, 22, 38, 0.45); } /* ── Insight card type accent colours ──────────────────────────── * The dark-mode --t2-type-* tokens are pastel/light (e.g. #F6AD55, * #68D391) — readable on dark surfaces but too faint on white. * Override them here to deeper, WCAG-accessible values so the * left-border accent AND pill text are fully legible in light mode. * ────────────────────────────────────────────────────────────── */ [data-theme="light"] { --t2-type-trend: #1D6DB5; /* blue — deepened from #63B3ED */ --t2-type-anomaly: #B45309; /* amber — deepened from #F6AD55 */ --t2-type-structural: #6D28D9; /* purple — deepened from #9F7AEA */ --t2-type-risk: #B91C1C; /* red — deepened from #FC8181 */ --t2-type-opportunity: #047857; /* green — deepened from #68D391 */ } /* Insight cards — use directional border properties, NOT the * border-color shorthand. The shorthand sets all four sides and * kills the border-left-color set by the --type modifier class. * Specificity: [data-theme] + .class = (0,2,0) > .class--modifier (0,1,0) * so we must restore left explicitly with equal or higher specificity. */ [data-theme="light"] .tier2-insight-card { background: #FFFFFF; border-top-color: rgba(15, 30, 60, 0.10); border-right-color: rgba(15, 30, 60, 0.10); border-bottom-color: rgba(15, 30, 60, 0.10); /* border-left-color restored per-type below */ } /* Restore left-border accent per type (matching specificity: 0,2,0) */ [data-theme="light"] .tier2-insight-card--trend { border-left-color: var(--t2-type-trend); } [data-theme="light"] .tier2-insight-card--anomaly { border-left-color: var(--t2-type-anomaly); } [data-theme="light"] .tier2-insight-card--structural { border-left-color: var(--t2-type-structural); } [data-theme="light"] .tier2-insight-card--risk { border-left-color: var(--t2-type-risk); } [data-theme="light"] .tier2-insight-card--opportunity { border-left-color: var(--t2-type-opportunity); } [data-theme="light"] .tier2-insight-card:hover { border-top-color: rgba(15, 30, 60, 0.18); border-right-color: rgba(15, 30, 60, 0.18); border-bottom-color: rgba(15, 30, 60, 0.18); background: var(--color-bg); /* border-left-color stays as the type accent */ } /* Type pill backgrounds — the original rgba(X,0.2) values are * designed for dark surfaces; on white they appear washed out. * Use a darker base colour at lower opacity for a readable tint. */ [data-theme="light"] .tier2-insight-card__type-pill--trend { background: rgba(29, 109, 181, 0.10); } [data-theme="light"] .tier2-insight-card__type-pill--anomaly { background: rgba(180, 83, 9, 0.10); } [data-theme="light"] .tier2-insight-card__type-pill--structural { background: rgba(109, 40, 217, 0.10); } [data-theme="light"] .tier2-insight-card__type-pill--risk { background: rgba(185, 28, 28, 0.10); } [data-theme="light"] .tier2-insight-card__type-pill--opportunity { background: rgba(4, 120, 87, 0.10); } /* pill text colour is inherited from --t2-type-* which are now dark ↑ */ /* Confidence level text — pastel greens/ambers are illegible on white */ [data-theme="light"] .tier2-insight-card__confidence--high { color: #047857; } /* green */ [data-theme="light"] .tier2-insight-card__confidence--medium { color: #B45309; } /* amber */ [data-theme="light"] .tier2-insight-card__header { border-bottom-color: rgba(15, 30, 60, 0.07); } [data-theme="light"] .tier2-insight-card__category { color: rgba(12, 22, 38, 0.40); } [data-theme="light"] .tier2-insight-card__title { color: #0C1626; } [data-theme="light"] .tier2-insight-card__body { color: rgba(12, 22, 38, 0.68); } /* Risk / recommendation / inflection cards — same border-color * shorthand problem. Fix by splitting into directional properties * so the hardcoded border-left-color on --low/--medium/--high/--critical * modifier classes is not overridden. */ [data-theme="light"] .tier2-risk-card, [data-theme="light"] .tier2-recommendation-card, [data-theme="light"] .tier2-inflection-card { background: #FFFFFF; border-top-color: rgba(15, 30, 60, 0.10); border-right-color: rgba(15, 30, 60, 0.10); border-bottom-color: rgba(15, 30, 60, 0.10); } /* Risk card left-border accent — the hardcoded pastel colours are * visible enough as 4px solid borders on white, but deepen slightly * for better pop against a white card surface. */ [data-theme="light"] .tier2-risk-card--low { border-left-color: #047857; } [data-theme="light"] .tier2-risk-card--medium { border-left-color: #B45309; } [data-theme="light"] .tier2-risk-card--high { border-left-color: #B91C1C; } [data-theme="light"] .tier2-risk-card--critical { border-left-color: #991B1B; } /* Inflection event left-border accents (hardcoded pastels in tier2-report.css) */ [data-theme="light"] .tier2-inflection-event--upward { border-left-color: #047857; } [data-theme="light"] .tier2-inflection-event--downward { border-left-color: #B91C1C; } /* ── Tier 2 badges (priority, confidence, category labels) ─────── * All .tier2-badge--* variants use pastel colours (rgba 15% bg, * #68D391/#F6AD55/#FC8181/#63B3ED text) designed for dark surfaces. * On white they fail contrast — deepen to accessible values. * ────────────────────────────────────────────────────────────── */ [data-theme="light"] .tier2-badge--low, [data-theme="light"] .tier2-badge--growth, [data-theme="light"] .tier2-badge--conf-high { background: rgba(4, 120, 87, 0.10); color: #047857; } [data-theme="light"] .tier2-badge--medium, [data-theme="light"] .tier2-badge--watch, [data-theme="light"] .tier2-badge--priority-near-term, [data-theme="light"] .tier2-badge--conf-medium { background: rgba(180, 83, 9, 0.10); color: #B45309; } [data-theme="light"] .tier2-badge--high, [data-theme="light"] .tier2-badge--risk { background: rgba(185, 28, 28, 0.10); color: #B91C1C; } [data-theme="light"] .tier2-badge--optimization, [data-theme="light"] .tier2-badge--priority-strategic { background: rgba(29, 109, 181, 0.10); color: #1D6DB5; } /* ── Trend table directional arrows ────────────────────────────── * #68D391 (green) and #FC8181 (red) on white are too light. * ────────────────────────────────────────────────────────────── */ [data-theme="light"] .tier2-trend-table__direction--up { color: #047857; } [data-theme="light"] .tier2-trend-table__direction--down { color: #B91C1C; } /* ── Metric card signal dots ───────────────────────────────────── * Small coloured dots — darken so they remain punchy on white bg. * ────────────────────────────────────────────────────────────── */ [data-theme="light"] .tier2-metric-card__signal--positive { background: #047857; box-shadow: 0 0 6px rgba(4, 120, 87, 0.40); } [data-theme="light"] .tier2-metric-card__signal--negative { background: #B91C1C; box-shadow: 0 0 6px rgba(185, 28, 28, 0.35); } /* ── Inflection event markers ──────────────────────────────────── * Marker icon text colour — pastel on white is unreadable. * ────────────────────────────────────────────────────────────── */ [data-theme="light"] .tier2-inflection-event--upward .tier2-inflection-event__marker { color: #047857; } [data-theme="light"] .tier2-inflection-event--downward .tier2-inflection-event__marker { color: #B91C1C; } /* Filter / nav bar */ [data-theme="light"] .tier2-filter-bar { background: rgba(15, 30, 60, 0.025); border-bottom-color: rgba(15, 30, 60, 0.08); } [data-theme="light"] .tier2-filter-btn { color: rgba(12, 22, 38, 0.52); } [data-theme="light"] .tier2-filter-btn.is-active, [data-theme="light"] .tier2-filter-btn:hover { color: var(--color-accent); background: rgba(37, 99, 235, 0.07); } /* ============================================================= 35b. REGIME PANEL — light mode overrides The regime panel uses hardcoded dark rgba() text values so every significant colour needs an explicit light-mode swap. ============================================================= */ [data-theme="light"] .regime-panel { background: #FFFFFF; border-color: rgba(15, 30, 60, 0.10); border-top-color: var(--rp-accent, rgba(15,30,60,0.40)); color: rgba(12, 22, 38, 0.80); } [data-theme="light"] .regime-panel__summary, [data-theme="light"] .regime-panel__anatomy, [data-theme="light"] .regime-panel__signals, [data-theme="light"] .regime-panel__playbook, [data-theme="light"] .regime-panel__rationale, [data-theme="light"] .regime-panel__spectrum { border-top-color: rgba(15, 30, 60, 0.08); } /* Hero background is an inline gradient at ~12% opacity — renders as a light tint on white in light mode, which is legible and intentional. */ [data-theme="light"] .regime-score-display__denom { color: rgba(12, 22, 38, 0.35); } [data-theme="light"] .regime-score-bar { background: rgba(15, 30, 60, 0.09); } [data-theme="light"] .regime-score-range { color: rgba(12, 22, 38, 0.40); } [data-theme="light"] .regime-score-range strong { color: rgba(12, 22, 38, 0.62); } [data-theme="light"] .regime-section-label { color: rgba(12, 22, 38, 0.35); } [data-theme="light"] .regime-summary__text { color: rgba(12, 22, 38, 0.72); } [data-theme="light"] .regime-pillar { background: rgba(15, 30, 60, 0.03); border-color: rgba(15, 30, 60, 0.09); } [data-theme="light"] .regime-pillar--primary { background: rgba(15, 30, 60, 0.055); border-color: rgba(15, 30, 60, 0.13); } [data-theme="light"] .regime-pillar__name { color: rgba(12, 22, 38, 0.82); } [data-theme="light"] .regime-pillar__desc { color: rgba(12, 22, 38, 0.50); } [data-theme="light"] .regime-anatomy__note { background: rgba(15, 30, 60, 0.03); border-left-color: rgba(15, 30, 60, 0.18); color: rgba(12, 22, 38, 0.42); } [data-theme="light"] .regime-sig { background: rgba(15, 30, 60, 0.03); border-color: rgba(15, 30, 60, 0.09); } [data-theme="light"] .regime-sig__label { color: rgba(12, 22, 38, 0.35); } /* Neutral signal value — was white, needs to be dark in light mode */ [data-theme="light"] .regime-sig__val--neutral { color: rgba(12, 22, 38, 0.72); } [data-theme="light"] .regime-playbook__intro { color: rgba(12, 22, 38, 0.45); } [data-theme="light"] .regime-playbook__item { color: rgba(12, 22, 38, 0.74); } [data-theme="light"] .regime-rationale__list { color: rgba(12, 22, 38, 0.66); } /* Spectrum segments stay the same vivid colours — they read fine in light */ [data-theme="light"] .regime-spectrum__needle-wrap { /* needle colours are inline styles — no override needed */ } /* ── Tier 2 chart canvas wrap — light background so Chart.js labels are readable */ [data-theme="light"] .tier2-chart-canvas-wrap { background: #FFFFFF; border-radius: var(--radius-md, 8px); padding: 0.5rem; } /* Heatmap cells */ [data-theme="light"] .tier2-heatmap-cell--positive { background: rgba(5, 150, 105, 0.12); color: #065F46; } [data-theme="light"] .tier2-heatmap-cell--negative { background: rgba(220, 38, 38, 0.10); color: #991B1B; } [data-theme="light"] .tier2-heatmap-cell--neutral { background: rgba(15, 30, 60, 0.06); color: rgba(12, 22, 38, 0.52); } /* Report header meta */ [data-theme="light"] .tier2-meta-list dt { color: rgba(12, 22, 38, 0.45); } [data-theme="light"] .tier2-report__subtitle { color: rgba(12, 22, 38, 0.50); } /* Table wrap overflow scroll */ [data-theme="light"] .tier2-table-wrap { scrollbar-color: rgba(15, 30, 60, 0.15) transparent; } /* ============================================================= 36. METRIC LENS MODAL (dm-lens-*) Fully hardcoded dark in both the CSS and JS-injected HTML. Every surface needs an explicit light override. ============================================================= */ [data-theme="light"] .dm-lens-backdrop { background: rgba(220, 228, 245, 0.85); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } [data-theme="light"] .dm-lens-modal { background: #FFFFFF; border-color: rgba(15, 30, 60, 0.12); border-top-color: var(--lens-accent, var(--color-accent)); box-shadow: 0 0 0 1px rgba(15, 30, 60, 0.06), 0 20px 60px rgba(15, 30, 60, 0.14); } [data-theme="light"] .dm-lens-modal__inner { scrollbar-color: rgba(15, 30, 60, 0.14) transparent; } [data-theme="light"] .dm-lens-num { color: rgba(12, 22, 38, 0.28); } [data-theme="light"] .dm-lens-id-unit { color: rgba(12, 22, 38, 0.40); } [data-theme="light"] .dm-lens-id-unit code { background: rgba(15, 30, 60, 0.05); border-color: rgba(15, 30, 60, 0.10); color: rgba(12, 22, 38, 0.68); } [data-theme="light"] .dm-lens-section-label { color: rgba(12, 22, 38, 0.33); } [data-theme="light"] .dm-lens-formula code { background: rgba(15, 30, 60, 0.04); color: rgba(12, 22, 38, 0.85); } [data-theme="light"] .dm-lens-plain { color: rgba(12, 22, 38, 0.72); } [data-theme="light"] .dm-lens-signals li { color: rgba(12, 22, 38, 0.60); } [data-theme="light"] .dm-lens-close { border-color: rgba(15, 30, 60, 0.14); background: rgba(15, 30, 60, 0.04); color: rgba(12, 22, 38, 0.45); } [data-theme="light"] .dm-lens-close:hover { background: rgba(15, 30, 60, 0.09); border-color: rgba(15, 30, 60, 0.22); color: #0C1626; } /* ============================================================= 37. DERIVED METRICS REFERENCE PAGE (dm-card, dm-group) Inline