/* * Fund4Founders — Theme System * css/themes.css * * 4 themes: dark (default) | mid | light | green * Applied via data-theme attribute on * Switched by js/theme-switcher.js */ /* ── LIGHT (clean white — professional daylight mode) ─────── */ [data-theme="light"] { --bg: #FFFFFF; --bg-2: #FFFFFF; --surface: #FFFFFF; --surface-2: #F4F6FA; /* very soft blue-gray band */ --surface-3: #EBEEF5; /* slightly deeper — trust bar, footer */ --border: #DDE3EE; /* clean, subtle separator */ --border-soft: rgba(0,0,0,0.07); --gold: #1A6E38; /* 4.7:1 on light bg — WCAG AA */ --gold-dim: rgba(26,110,56,0.10); --gold-hover: #156030; --gold-light: #2ECC71; --green: #16A34A; --red: #DC2626; --blue: #1D4ED8; --blue-bright: #185480; --text: #1A2030; --text-primary: #1A2030; /* dark gray, not pure black */ --text-sec: #2D3748; --text-secondary:#2D3748; --text-dim: #4A5568; /* darkened for better readability */ --muted: #4A5568; --nav-bg: rgba(255,255,255,0.97); --card-bg: #FFFFFF; --input-bg: #FFFFFF; --input-border: rgba(139,105,20,0.35); --shadow: 0 4px 24px rgba(0,0,0,0.08); /* Override hardcoded dark backgrounds on body + nav */ --navy-deep: #F5F7FA; --navy: #FFFFFF; --navy-mid: #E8EDF4; --navy-light: #D1D9E6; /* Selection tokens — light theme (shared: brand green) */ --sel-bg: rgba(26,110,56,0.10); --sel-border: var(--gold); --sel-text: var(--gold); --sel-check-bg: var(--gold); --question: var(--text-primary); --question-sec: var(--gold); } /* Light theme — invert dark backgrounds */ [data-theme="light"] body { background: var(--bg) !important; color: var(--text) !important; } /* Light theme — all dark section/band/bg overrides */ [data-theme="light"] section[style*="navy"], [data-theme="light"] section[style*="surface"], [data-theme="light"] section[style*="navy-mid"], [data-theme="light"] section[style*="navy-deep"], [data-theme="light"] .section-dark, [data-theme="light"] .bg-dark, [data-theme="light"] .section-alt { background: var(--surface-2) !important; } /* Trust bar + timeline + any navy-mid div ─ light theme */ [data-theme="light"] .trust-bar { background: var(--surface-2) !important; border-color: var(--border) !important; } [data-theme="light"] .trust-item { color: var(--text-sec) !important; } [data-theme="light"] .trust-item svg { stroke: var(--gold) !important; } [data-theme="light"] .rh-timeline { background: var(--surface-2) !important; border-color: var(--border) !important; } [data-theme="light"] .rh-hero-nums { background: var(--surface-2) !important; } /* Promo banner uses hardcoded brand gradient in main.css — consistent across all themes */ /* Light theme — cards, panels */ [data-theme="light"] .card, [data-theme="light"] [class*="-card"], [data-theme="light"] .section-panel, [data-theme="light"] .form-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* Light theme — headings always dark */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5 { color: var(--text-primary) !important; } [data-theme="light"] .eyebrow { color: var(--gold) !important; } [data-theme="light"] p { color: var(--text-sec) !important; } /* Light theme — tint token overrides * White-alpha tokens flip to black-alpha (bg is light, not dark) * Gold/blue/green tints use the darkened brand colors for this theme */ [data-theme="light"] { --white-a02: rgba(0,0,0,0.02); --white-a03: rgba(0,0,0,0.03); --white-a04: rgba(0,0,0,0.04); --white-a06: rgba(0,0,0,0.06); --white-a07: rgba(0,0,0,0.07); --white-a08: rgba(0,0,0,0.08); --white-a10: rgba(0,0,0,0.10); --white-a12: rgba(0,0,0,0.10); --white-a15: rgba(0,0,0,0.12); --white-a20: rgba(0,0,0,0.15); --white-a25: rgba(0,0,0,0.18); --white-a30: rgba(0,0,0,0.20); --gold-a08: rgba(26,110,56,0.08); --gold-a10: rgba(26,110,56,0.10); --gold-a12: rgba(26,110,56,0.12); --gold-a15: rgba(26,110,56,0.15); --gold-a18: rgba(26,110,56,0.18); --gold-a20: rgba(26,110,56,0.20); --gold-a22: rgba(26,110,56,0.22); --gold-a25: rgba(26,110,56,0.25); --gold-a30: rgba(26,110,56,0.30); --gold-a35: rgba(26,110,56,0.35); --gold-a40: rgba(26,110,56,0.40); --blue-a10: rgba(24,84,128,0.10); --blue-a12: rgba(24,84,128,0.12); --blue-a15: rgba(24,84,128,0.15); --blue-a20: rgba(24,84,128,0.20); --blue-a25: rgba(24,84,128,0.25); --blue-a30: rgba(24,84,128,0.30); --border-soft: rgba(0,0,0,0.08); } /* Ensure text is readable inside alt-bg sections on light theme */ [data-theme="light"] .trust-bar .trust-item, [data-theme="light"] section[style*="navy-mid"] h2, [data-theme="light"] section[style*="navy-mid"] h3, [data-theme="light"] section[style*="navy-mid"] p, [data-theme="light"] section[style*="navy-mid"] .eyebrow { color: var(--text-primary) !important; } [data-theme="light"] section[style*="navy-mid"] .eyebrow { color: var(--gold) !important; } [data-theme="light"] p { color: var(--text-sec) !important; } [data-theme="light"] .nav { background: var(--nav-bg) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="light"] .nav-logo-text { color: var(--text-primary) !important; } [data-theme="light"] .nav-logo-text span { color: var(--gold) !important; } [data-theme="light"] .nav-links a { color: var(--text-sec) !important; font-weight: 500; } [data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.active { color: var(--gold) !important; } [data-theme="light"] .btn-ghost { color: var(--gold) !important; border-color: var(--gold) !important; } [data-theme="light"] .btn-ghost:hover { background: var(--gold-dim) !important; color: var(--gold) !important; } [data-theme="light"] .nav-cta .btn-ghost:hover { color: var(--gold) !important; background: var(--gold-dim) !important; } /* Light theme — nav sign-in / get-started buttons readable */ [data-theme="light"] .nav-signin-link { color: var(--text-sec) !important; border-color: var(--border) !important; } [data-theme="light"] .nav-signout-link, [data-theme="light"] .nav-portal-link { color: var(--gold) !important; border-color: var(--gold) !important; background: var(--gold-dim) !important; } [data-theme="light"] .btn-primary.nav-getstarted { background: var(--blue) !important; color: #FFFFFF !important; } /* Light theme footer — light gray background, dark text */ [data-theme="light"] footer, [data-theme="light"] #site-footer { background: #E8EDF4 !important; border-top: 3px solid var(--gold) !important; color: var(--text-primary) !important; } [data-theme="light"] #site-footer a, [data-theme="light"] footer a { color: var(--text-sec) !important; } [data-theme="light"] #site-footer a:hover, [data-theme="light"] footer a:hover { color: var(--gold) !important; } [data-theme="light"] .footer-col h5, [data-theme="light"] .footer-col h3 { color: var(--gold) !important; } [data-theme="light"] .footer-brand h3, [data-theme="light"] .footer-brand .nav-logo-text { color: var(--text-primary) !important; } [data-theme="light"] .footer-brand p { color: var(--text-dim) !important; } [data-theme="light"] .footer-bottom p { color: var(--text-dim) !important; } [data-theme="light"] .footer-bottom { border-top-color: var(--border) !important; } [data-theme="light"] .footer-legal a { color: var(--text-dim) !important; } /* ══════════════════════════════════════════════════════════════ * LIGHT SAGE — soft sage-green tint, slightly darker than light * bg #EDF2ED → surface-2 #E4EDE5 → surface-3 #D8E5D9 * All text AAA, brand accents AA+ * ══════════════════════════════════════════════════════════════ */ [data-theme="light-sage"] { --bg: #D8E2D8; --bg-2: #E2EAE2; --surface: #E8EEE8; --surface-2: #CDDACD; --surface-3: #C2D0C2; --border: #B0C4B2; --border-soft: rgba(0,0,0,0.07); --gold: #1A6E38; /* dark brand green — 5.6:1 AA */ --gold-dim: rgba(26,110,56,0.10); --gold-hover: #156030; --gold-light: #2ECC71; /* decorative large text only */ --green: #16A34A; --red: #DC2626; --blue: #185480; /* dark brand blue — 7.1:1 AAA */ --blue-bright: #1A5C8A; --text: #0F172A; --text-primary: #1A2A20; /* green-tinted dark gray */ --text-sec: #2D4038; --text-secondary:#2D4038; --text-dim: #445A50; /* slightly green-tinted dim */ --muted: #4A5A50; --nav-bg: rgba(216,226,216,0.97); --card-bg: #F8FAF8; --input-bg: #F4F8F4; --input-border: rgba(26,110,56,0.30); --shadow: 0 4px 24px rgba(0,0,0,0.07); --white: #FFFFFF; --warning: #92400E; --navy-deep: #EDF2ED; --navy: #F8FAF8; --navy-mid: #E4EDE5; --navy-light: #D8E5D9; /* Alpha tint tokens — sage-tuned */ --gold-a08: rgba(26,110,56,0.08); --gold-a10: rgba(26,110,56,0.10); --gold-a12: rgba(26,110,56,0.12); --gold-a15: rgba(26,110,56,0.15); --gold-a18: rgba(26,110,56,0.18); --gold-a20: rgba(26,110,56,0.20); --gold-a22: rgba(26,110,56,0.22); --gold-a25: rgba(26,110,56,0.25); --gold-a30: rgba(26,110,56,0.30); --gold-a35: rgba(26,110,56,0.35); --gold-a40: rgba(26,110,56,0.40); --blue-a10: rgba(24,84,128,0.10); --blue-a12: rgba(24,84,128,0.12); --blue-a15: rgba(24,84,128,0.15); --blue-a20: rgba(24,84,128,0.20); --blue-a25: rgba(24,84,128,0.25); --blue-a30: rgba(24,84,128,0.30); --white-a02: rgba(0,0,0,0.02); --white-a03: rgba(0,0,0,0.03); --white-a04: rgba(0,0,0,0.04); --white-a06: rgba(0,0,0,0.05); --white-a07: rgba(0,0,0,0.06); --white-a08: rgba(0,0,0,0.07); --white-a10: rgba(0,0,0,0.09); --white-a12: rgba(0,0,0,0.10); --white-a15: rgba(0,0,0,0.12); --white-a20: rgba(0,0,0,0.15); --white-a25: rgba(0,0,0,0.18); --white-a30: rgba(0,0,0,0.20); --border-soft: rgba(0,0,0,0.07); /* Selection tokens — light theme (shared: brand green) */ --sel-bg: rgba(26,110,56,0.10); --sel-border: var(--gold); --sel-text: var(--gold); --sel-check-bg: var(--gold); --question: var(--text-primary); --question-sec: var(--gold); } /* Light sage structural overrides */ [data-theme="light-sage"] body { background: var(--bg) !important; color: var(--text) !important; } [data-theme="light-sage"] section { background: var(--bg) !important; } [data-theme="light-sage"] section:nth-of-type(even) { background: var(--surface-2) !important; } [data-theme="light-sage"] section:nth-of-type(odd)[style] { background: var(--bg) !important; } [data-theme="light-sage"] section:nth-of-type(even)[style] { background: var(--surface-2) !important; } [data-theme="light-sage"] section:first-of-type, [data-theme="light-sage"] .rl-hero, [data-theme="light-sage"] .rh-hero, [data-theme="light-sage"] .dir-hero, [data-theme="light-sage"] .sc-hero { background: var(--bg) !important; } [data-theme="light-sage"] .nav { background: var(--nav-bg) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="light-sage"] .nav-logo-text { color: var(--text-primary) !important; } [data-theme="light-sage"] .nav-logo-text span { color: var(--gold) !important; } [data-theme="light-sage"] .nav-links a { color: var(--text-sec) !important; font-weight: 500; } [data-theme="light-sage"] .nav-links a:hover, [data-theme="light-sage"] .nav-links a.active { color: var(--gold) !important; } [data-theme="light-sage"] .btn-ghost { color: var(--gold) !important; border-color: var(--gold) !important; } [data-theme="light-sage"] .btn-ghost:hover { background: var(--gold-dim) !important; color: var(--gold) !important; } [data-theme="light-sage"] .nav-cta .btn-ghost:hover { color: var(--gold) !important; background: var(--gold-dim) !important; } [data-theme="light-sage"] .nav-signin-link { color: var(--text-sec) !important; border-color: var(--border) !important; } [data-theme="light-sage"] .btn-primary.nav-getstarted { background: var(--blue) !important; color: #FFFFFF !important; } [data-theme="light-sage"] .trust-bar { background: var(--surface-3) !important; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="light-sage"] .trust-item { color: var(--text-sec) !important; } [data-theme="light-sage"] .rh-timeline { background: var(--surface-2) !important; border-color: var(--border) !important; } [data-theme="light-sage"] h1,[data-theme="light-sage"] h2,[data-theme="light-sage"] h3, [data-theme="light-sage"] h4,[data-theme="light-sage"] h5 { color: var(--text-primary) !important; } [data-theme="light-sage"] .eyebrow { color: var(--gold) !important; } [data-theme="light-sage"] p { color: var(--text-sec) !important; } [data-theme="light-sage"] .card, [data-theme="light-sage"] [class*="-card"] { background: var(--surface) !important; border-color: var(--border) !important; } /* Sage theme — select/option dropdowns readable */ [data-theme="light-sage"] select, [data-theme="light-sage"] select option, [data-theme="light-sage"] .pf-select, [data-theme="light-sage"] .field select { background: var(--input-bg) !important; color: var(--text-primary) !important; } [data-theme="light-sage"] select:focus, [data-theme="light-sage"] .pf-select:focus { border-color: var(--sel-border) !important; } [data-theme="light-sage"] footer, [data-theme="light-sage"] #site-footer { background: #1A2E1E !important; border-top: 3px solid var(--gold) !important; } [data-theme="light-sage"] #site-footer a, [data-theme="light-sage"] footer a { color: #A8D8C0 !important; } [data-theme="light-sage"] #site-footer a:hover { color: #FFFFFF !important; } [data-theme="light-sage"] .footer-col h5,[data-theme="light-sage"] .footer-col h3 { color: #6AEA92 !important; } [data-theme="light-sage"] .footer-brand p { color: #8ABAA0 !important; } [data-theme="light-sage"] .footer-brand .nav-logo-text { color: #FFFFFF !important; } [data-theme="light-sage"] .footer-brand .nav-logo-text span { color: #6AEA92 !important; } [data-theme="light-sage"] #site-footer p, [data-theme="light-sage"] footer p { color: #8ABAA0 !important; } [data-theme="light-sage"] .footer-bottom p { color: #6A8A78 !important; } [data-theme="light-sage"] .footer-bottom { border-top-color: rgba(255,255,255,0.1) !important; } [data-theme="light-sage"] .footer-legal a { color: #8ABAA0 !important; } [data-theme="light-sage"] .gold-line { background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--gold-a20) 50%, var(--border) 80%, transparent 100%) !important; } /* visited */ [data-theme="light-sage"] .footer-col ul li a:visited { color: #7ABCA0 !important; } [data-theme="light-sage"] .footer-legal a:visited { color: #4A6250 !important; } [data-theme="light-sage"] main a:visited { color: #1A6E38 !important; } /* ══════════════════════════════════════════════════════════════ * LIGHT MID GRAY — soft neutral gray, midpoint between light + dark * bg #F0F1F5 → surface-2 #E8EAF0 → surface-3 #DDE0EC * All text AAA, brand accents AA+ * ══════════════════════════════════════════════════════════════ */ [data-theme="light-mid"] { --bg: #BEC2CE; --bg-2: #C6CAD6; --surface: #CDD0DA; --surface-2: #B4B8C4; --surface-3: #ADB2C0; --border: #A8ACBA; --border-soft: rgba(0,0,0,0.08); --gold: #0D4020; /* 6.7:1 AA on #BEC2CE */ --gold-dim: rgba(26,110,56,0.10); --gold-hover: #0A3318; --gold-light: #2ECC71; --green: #16A34A; --red: #DC2626; --blue: #185480; /* dark brand blue — 7.1:1 AAA */ --blue-bright: #1A5C8A; --text: #1C2233; --text-primary: #1C2233; /* blue-tinted dark gray */ --text-sec: #2E3850; --text-secondary:#2E3850; --text-dim: #3C4A60; /* 5.9:1 AA on #BEC2CE */ --muted: #3C4A60; --nav-bg: rgba(190,194,206,0.97); --card-bg: #FAFAFA; --input-bg: #ECEEF4; --input-border: rgba(26,110,56,0.30); --shadow: 0 4px 24px rgba(0,0,0,0.07); --white: #FFFFFF; --warning: #92400E; --navy-deep: #F0F1F5; --navy: #FAFAFA; --navy-mid: #E8EAF0; --navy-light: #DDE0EC; /* Alpha tint tokens — neutral-tuned */ --gold-a08: rgba(26,110,56,0.08); --gold-a10: rgba(26,110,56,0.10); --gold-a12: rgba(26,110,56,0.12); --gold-a15: rgba(26,110,56,0.15); --gold-a18: rgba(26,110,56,0.18); --gold-a20: rgba(26,110,56,0.20); --gold-a22: rgba(26,110,56,0.22); --gold-a25: rgba(26,110,56,0.25); --gold-a30: rgba(26,110,56,0.30); --gold-a35: rgba(26,110,56,0.35); --gold-a40: rgba(26,110,56,0.40); --blue-a10: rgba(24,84,128,0.10); --blue-a12: rgba(24,84,128,0.12); --blue-a15: rgba(24,84,128,0.15); --blue-a20: rgba(24,84,128,0.20); --blue-a25: rgba(24,84,128,0.25); --blue-a30: rgba(24,84,128,0.30); --white-a02: rgba(0,0,0,0.02); --white-a03: rgba(0,0,0,0.03); --white-a04: rgba(0,0,0,0.04); --white-a06: rgba(0,0,0,0.05); --white-a07: rgba(0,0,0,0.06); --white-a08: rgba(0,0,0,0.07); --white-a10: rgba(0,0,0,0.09); --white-a12: rgba(0,0,0,0.10); --white-a15: rgba(0,0,0,0.12); --white-a20: rgba(0,0,0,0.15); --white-a25: rgba(0,0,0,0.18); --white-a30: rgba(0,0,0,0.20); --border-soft: rgba(0,0,0,0.07); /* Selection tokens — light theme (shared: brand green) */ --sel-bg: rgba(26,110,56,0.10); --sel-border: var(--gold); --sel-text: var(--gold); --sel-check-bg: var(--gold); --question: var(--text-primary); --question-sec: var(--gold); } /* Light mid structural overrides */ [data-theme="light-mid"] body { background: var(--bg) !important; color: var(--text) !important; } [data-theme="light-mid"] section { background: var(--bg) !important; } [data-theme="light-mid"] section:nth-of-type(even) { background: var(--surface-2) !important; } [data-theme="light-mid"] section:nth-of-type(odd)[style] { background: var(--bg) !important; } [data-theme="light-mid"] section:nth-of-type(even)[style] { background: var(--surface-2) !important; } [data-theme="light-mid"] section:first-of-type, [data-theme="light-mid"] .rl-hero, [data-theme="light-mid"] .rh-hero, [data-theme="light-mid"] .dir-hero, [data-theme="light-mid"] .sc-hero { background: var(--bg) !important; } [data-theme="light-mid"] .nav { background: var(--nav-bg) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="light-mid"] .nav-logo-text { color: var(--text-primary) !important; } [data-theme="light-mid"] .nav-logo-text span { color: var(--gold) !important; } [data-theme="light-mid"] .nav-links a { color: var(--text-sec) !important; font-weight: 500; } [data-theme="light-mid"] .nav-links a:hover, [data-theme="light-mid"] .nav-links a.active { color: var(--gold) !important; } [data-theme="light-mid"] .btn-ghost { color: var(--gold) !important; border-color: var(--gold) !important; } [data-theme="light-mid"] .btn-ghost:hover { background: var(--gold-dim) !important; color: var(--gold) !important; } [data-theme="light-mid"] .nav-cta .btn-ghost:hover { color: var(--gold) !important; background: var(--gold-dim) !important; } [data-theme="light-mid"] .nav-signin-link { color: var(--text-sec) !important; border-color: var(--border) !important; } [data-theme="light-mid"] .btn-primary.nav-getstarted { background: var(--blue) !important; color: #FFFFFF !important; } [data-theme="light-mid"] .trust-bar { background: var(--surface-3) !important; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="light-mid"] .trust-item { color: var(--text-sec) !important; } [data-theme="light-mid"] .rh-timeline { background: var(--surface-2) !important; border-color: var(--border) !important; } [data-theme="light-mid"] h1,[data-theme="light-mid"] h2,[data-theme="light-mid"] h3, [data-theme="light-mid"] h4,[data-theme="light-mid"] h5 { color: var(--text-primary) !important; } [data-theme="light-mid"] .eyebrow { color: var(--gold) !important; } [data-theme="light-mid"] p { color: var(--text-sec) !important; } [data-theme="light-mid"] .card, [data-theme="light-mid"] [class*="-card"] { background: var(--surface) !important; border-color: var(--border) !important; } /* Mid-gray theme — select/option dropdowns readable */ [data-theme="light-mid"] select, [data-theme="light-mid"] select option, [data-theme="light-mid"] .pf-select, [data-theme="light-mid"] .field select { background: var(--input-bg) !important; color: var(--text-primary) !important; } [data-theme="light-mid"] footer, [data-theme="light-mid"] #site-footer { background: #1C2030 !important; border-top: 3px solid var(--gold) !important; } [data-theme="light-mid"] #site-footer a, [data-theme="light-mid"] footer a { color: #A8C4DE !important; } [data-theme="light-mid"] #site-footer a:hover { color: #FFFFFF !important; } [data-theme="light-mid"] .footer-col h5,[data-theme="light-mid"] .footer-col h3 { color: #6AEA92 !important; } [data-theme="light-mid"] .footer-brand p { color: #8AA8C0 !important; } [data-theme="light-mid"] .footer-brand .nav-logo-text { color: #FFFFFF !important; } [data-theme="light-mid"] .footer-brand .nav-logo-text span { color: #6AEA92 !important; } [data-theme="light-mid"] #site-footer p, [data-theme="light-mid"] footer p { color: #8AA8C0 !important; } [data-theme="light-mid"] .footer-bottom p { color: #6A8AA8 !important; } [data-theme="light-mid"] .footer-bottom { border-top-color: rgba(255,255,255,0.1) !important; } [data-theme="light-mid"] .footer-legal a { color: #8AA8C0 !important; } [data-theme="light-mid"] .gold-line { background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--gold-a20) 50%, var(--border) 80%, transparent 100%) !important; } /* visited */ [data-theme="light-mid"] .footer-col ul li a:visited { color: #7A9ABB !important; } [data-theme="light-mid"] .footer-legal a:visited { color: #475569 !important; } [data-theme="light-mid"] main a:visited { color: #1A6E38 !important; } /* ══════════════════════════════════════════════════════════════ * WARM DARK — rich espresso brown-navy, midpoint of dark series * bg #1C1A14 → surface-2 #272318 → surface-3 #312C1E * Warm amber text tones, brand green+blue accents all AAA/AA * ══════════════════════════════════════════════════════════════ */ [data-theme="warm-dark"] { --bg: #302C22; --bg-2: #38342A; --surface: #38342A; --surface-2: #3E3A2E; --surface-3: #464036; --border: rgba(200,184,154,0.14); --border-soft: rgba(200,184,154,0.08); --gold: #2ECC71; /* lighter bg — still 7.8:1 AAA */ --gold-dim: rgba(46,204,113,0.12); --gold-hover: #27AE60; --gold-light: #58E483; --green: #2ECC71; --red: #F87171; --blue: #5BAEE8; /* 5.7:1 AA on #302C22 */ --blue-bright: #62B4EC; --text: #C8BAA8; --text-primary: #EDE8E0; /* soft warm off-white */ --text-sec: #C8BAA8; --text-secondary:#C8BAA8; --text-dim: #A89880; /* 5.6:1 AA on #302C22 */ --muted: #9A8E7C; --nav-bg: rgba(48,44,34,0.97); --card-bg: #231F16; --input-bg: #3A362A; --input-border: rgba(46,204,113,0.25); --shadow: 0 4px 24px rgba(0,0,0,0.5); --white: #FFFFFF; --warning: #F59E0B; --navy-deep: #302C22; --navy: #38342A; --navy-mid: #3E3A2E; --navy-light: #464036; /* Alpha tint tokens — warm-dark tuned */ --gold-a08: rgba(46,204,113,0.08); --gold-a10: rgba(46,204,113,0.10); --gold-a12: rgba(46,204,113,0.12); --gold-a15: rgba(46,204,113,0.15); --gold-a18: rgba(46,204,113,0.18); --gold-a20: rgba(46,204,113,0.20); --gold-a22: rgba(46,204,113,0.22); --gold-a25: rgba(46,204,113,0.25); --gold-a30: rgba(46,204,113,0.30); --gold-a35: rgba(46,204,113,0.35); --gold-a40: rgba(46,204,113,0.40); --blue-a10: rgba(52,152,219,0.10); --blue-a12: rgba(52,152,219,0.12); --blue-a15: rgba(52,152,219,0.15); --blue-a20: rgba(52,152,219,0.20); --blue-a25: rgba(52,152,219,0.25); --blue-a30: rgba(52,152,219,0.30); --white-a02: rgba(200,184,154,0.02); --white-a03: rgba(200,184,154,0.03); --white-a04: rgba(200,184,154,0.04); --white-a06: rgba(200,184,154,0.06); --white-a07: rgba(200,184,154,0.07); --white-a08: rgba(200,184,154,0.08); --white-a10: rgba(200,184,154,0.10); --white-a12: rgba(200,184,154,0.12); --white-a15: rgba(200,184,154,0.15); --white-a20: rgba(200,184,154,0.20); --white-a25: rgba(200,184,154,0.25); --white-a30: rgba(200,184,154,0.30); /* Selection tokens — dark theme (shared: brand blue) */ --sel-bg: rgba(52,152,219,0.14); --sel-border: var(--blue-bright); --sel-text: var(--blue-bright); --sel-check-bg: var(--blue-bright); --question: var(--text-primary); --question-sec: var(--blue-bright); --role-talent: #B090F8; /* lighter purple — 6.9:1 AA on dark bg */ } [data-theme="warm-dark"] body { background: var(--bg); color: var(--text); } [data-theme="warm-dark"] .nav { background: var(--nav-bg) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="warm-dark"] .nav-logo-text { color: var(--text-primary) !important; } [data-theme="warm-dark"] .nav-logo-text span { color: var(--gold) !important; } [data-theme="warm-dark"] footer, [data-theme="warm-dark"] #site-footer { background: #120F0A !important; border-top: 2px solid rgba(46,204,113,0.25) !important; } [data-theme="warm-dark"] #site-footer a { color: #8A9E90 !important; } [data-theme="warm-dark"] #site-footer a:hover { color: var(--gold) !important; } [data-theme="warm-dark"] .footer-col h5, [data-theme="warm-dark"] .footer-col h3 { color: var(--gold) !important; } [data-theme="warm-dark"] .footer-brand p { color: #7A6E5C !important; } [data-theme="warm-dark"] .footer-bottom { border-top-color: rgba(200,184,154,0.08) !important; } [data-theme="warm-dark"] .footer-col ul li a:visited { color: #6A8070 !important; } [data-theme="warm-dark"] main a:visited { color: #27AE60 !important; } [data-theme="warm-dark"] .gold-line { background: linear-gradient(90deg, transparent, rgba(46,204,113,0.15), rgba(46,204,113,0.35), rgba(46,204,113,0.15), transparent) !important; } /* ══════════════════════════════════════════════════════════════ * DARK BLUE — deep navy, the signature dark theme * bg #0A0F1E → surface-2 #0D1628 → surface-3 #112035 * Cool blue-tinted text, brand green+blue AAA/AA * ══════════════════════════════════════════════════════════════ */ [data-theme="dark-blue"] { --bg: #101828; --bg-2: #141E30; --surface: #141E30; --surface-2: #182438; --surface-3: #1D2C44; --border: rgba(200,216,240,0.10); --border-soft: rgba(255,255,255,0.06); --gold: #2ECC71; /* 9.1:1 AAA */ --gold-dim: rgba(46,204,113,0.12); --gold-hover: #27AE60; --gold-light: #58E483; --green: #2ECC71; --red: #F87171; --blue: #3498DB; /* 6.1:1 AA */ --blue-bright: #5BAEE8; --text: #B8CCE8; --text-primary: #DCE8F8; /* soft off-white, blue tint */ --text-sec: #B8CCE8; --text-secondary:#B8CCE8; --text-dim: #7890AA; /* lifted for AA */ --muted: #5A728A; --nav-bg: rgba(16,24,40,0.97); --card-bg: #0D1628; --input-bg: #182030; --input-border: rgba(46,204,113,0.25); --shadow: 0 4px 24px rgba(0,0,0,0.6); --white: #FFFFFF; --warning: #F59E0B; --navy-deep: #101828; --navy: #141E30; --navy-mid: #182438; --navy-light: #1D2C44; --gold-a08: rgba(46,204,113,0.08); --gold-a10: rgba(46,204,113,0.10); --gold-a12: rgba(46,204,113,0.12); --gold-a15: rgba(46,204,113,0.15); --gold-a18: rgba(46,204,113,0.18); --gold-a20: rgba(46,204,113,0.20); --gold-a22: rgba(46,204,113,0.22); --gold-a25: rgba(46,204,113,0.25); --gold-a30: rgba(46,204,113,0.30); --gold-a35: rgba(46,204,113,0.35); --gold-a40: rgba(46,204,113,0.40); --blue-a10: rgba(52,152,219,0.10); --blue-a12: rgba(52,152,219,0.12); --blue-a15: rgba(52,152,219,0.15); --blue-a20: rgba(52,152,219,0.20); --blue-a25: rgba(52,152,219,0.25); --blue-a30: rgba(52,152,219,0.30); --white-a02: rgba(255,255,255,0.02); --white-a03: rgba(255,255,255,0.03); --white-a04: rgba(255,255,255,0.04); --white-a06: rgba(255,255,255,0.06); --white-a07: rgba(255,255,255,0.07); --white-a08: rgba(255,255,255,0.08); --white-a10: rgba(255,255,255,0.10); --white-a12: rgba(255,255,255,0.12); --white-a15: rgba(255,255,255,0.15); --white-a20: rgba(255,255,255,0.20); --white-a25: rgba(255,255,255,0.25); --white-a30: rgba(255,255,255,0.30); /* Selection tokens — dark theme (shared: brand blue) */ --sel-bg: rgba(52,152,219,0.14); --sel-border: var(--blue-bright); --sel-text: var(--blue-bright); --sel-check-bg: var(--blue-bright); --question: var(--text-primary); --question-sec: var(--blue-bright); --role-talent: #B090F8; /* lighter purple — 6.9:1 AA on dark bg */ } [data-theme="dark-blue"] body { background: var(--bg); color: var(--text); } [data-theme="dark-blue"] .nav { background: var(--nav-bg) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="dark-blue"] .nav-logo-text { color: var(--text-primary) !important; } [data-theme="dark-blue"] .nav-logo-text span { color: var(--gold) !important; } [data-theme="dark-blue"] footer, [data-theme="dark-blue"] #site-footer { background: #060A14 !important; border-top: 2px solid rgba(46,204,113,0.2) !important; } [data-theme="dark-blue"] #site-footer a { color: #6A84A8 !important; } [data-theme="dark-blue"] #site-footer a:hover { color: var(--gold) !important; } [data-theme="dark-blue"] .footer-col h5, [data-theme="dark-blue"] .footer-col h3 { color: var(--gold) !important; } [data-theme="dark-blue"] .footer-brand p { color: #5A728A !important; } [data-theme="dark-blue"] .footer-bottom { border-top-color: rgba(255,255,255,0.06) !important; } [data-theme="dark-blue"] .footer-col ul li a:visited { color: #4A6280 !important; } [data-theme="dark-blue"] main a:visited { color: #27AE60 !important; } [data-theme="dark-blue"] .gold-line { background: linear-gradient(90deg, transparent, rgba(52,152,219,0.15), rgba(46,204,113,0.30), rgba(52,152,219,0.15), transparent) !important; } /* ══════════════════════════════════════════════════════════════ * BLACK — pure dark, maximum contrast * bg #0A0A0A → surface-2 #111111 → surface-3 #1A1A1A * Neutral white text, brand green 9.4:1 AAA, blue 6.3:1 AA * ══════════════════════════════════════════════════════════════ */ [data-theme="black"] { --bg: #0D0D0D; --bg-2: #141414; --surface: #141414; --surface-2: #1A1A1A; --surface-3: #222222; --border: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.05); --gold: #2ECC71; /* 9.4:1 AAA */ --gold-dim: rgba(46,204,113,0.12); --gold-hover: #27AE60; --gold-light: #58E483; --green: #2ECC71; --red: #F87171; --blue: #3498DB; /* 6.3:1 AA */ --blue-bright: #5BAEE8; --text: #E2E2E2; --text-primary: #E8E8E8; /* soft off-white, not pure white */ --text-sec: #C0C0C0; --text-secondary:#C0C0C0; --text-dim: #909090; /* 6.1:1 AA on #0D0D0D */ --muted: #848484; --nav-bg: rgba(13,13,13,0.98); --card-bg: #111111; --input-bg: #181818; --input-border: rgba(46,204,113,0.25); --shadow: 0 4px 24px rgba(0,0,0,0.8); --white: #FFFFFF; --warning: #F59E0B; --navy-deep: #0D0D0D; --navy: #141414; --navy-mid: #1A1A1A; --navy-light: #222222; --gold-a08: rgba(46,204,113,0.08); --gold-a10: rgba(46,204,113,0.10); --gold-a12: rgba(46,204,113,0.12); --gold-a15: rgba(46,204,113,0.15); --gold-a18: rgba(46,204,113,0.18); --gold-a20: rgba(46,204,113,0.20); --gold-a22: rgba(46,204,113,0.22); --gold-a25: rgba(46,204,113,0.25); --gold-a30: rgba(46,204,113,0.30); --gold-a35: rgba(46,204,113,0.35); --gold-a40: rgba(46,204,113,0.40); --blue-a10: rgba(52,152,219,0.10); --blue-a12: rgba(52,152,219,0.12); --blue-a15: rgba(52,152,219,0.15); --blue-a20: rgba(52,152,219,0.20); --blue-a25: rgba(52,152,219,0.25); --blue-a30: rgba(52,152,219,0.30); --white-a02: rgba(255,255,255,0.02); --white-a03: rgba(255,255,255,0.03); --white-a04: rgba(255,255,255,0.04); --white-a06: rgba(255,255,255,0.06); --white-a07: rgba(255,255,255,0.07); --white-a08: rgba(255,255,255,0.08); --white-a10: rgba(255,255,255,0.10); --white-a12: rgba(255,255,255,0.12); --white-a15: rgba(255,255,255,0.15); --white-a20: rgba(255,255,255,0.20); --white-a25: rgba(255,255,255,0.25); --white-a30: rgba(255,255,255,0.30); /* Selection tokens — dark theme (shared: brand blue) */ --sel-bg: rgba(52,152,219,0.14); --sel-border: var(--blue-bright); --sel-text: var(--blue-bright); --sel-check-bg: var(--blue-bright); --question: var(--text-primary); --question-sec: var(--blue-bright); --role-talent: #B090F8; /* lighter purple — 6.9:1 AA on dark bg */ } [data-theme="black"] body { background: var(--bg); color: var(--text); } [data-theme="black"] .nav { background: var(--nav-bg) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="black"] .nav-logo-text { color: var(--text-primary) !important; } [data-theme="black"] .nav-logo-text span { color: var(--gold) !important; } [data-theme="black"] footer, [data-theme="black"] #site-footer { background: #050505 !important; border-top: 2px solid rgba(46,204,113,0.2) !important; } [data-theme="black"] #site-footer a { color: #6E6E6E !important; } [data-theme="black"] #site-footer a:hover { color: var(--gold) !important; } [data-theme="black"] .footer-col h5, [data-theme="black"] .footer-col h3 { color: var(--gold) !important; } [data-theme="black"] .footer-brand p { color: #5E5E5E !important; } [data-theme="black"] .footer-bottom { border-top-color: rgba(255,255,255,0.05) !important; } [data-theme="black"] .footer-col ul li a:visited { color: #4E4E4E !important; } [data-theme="black"] main a:visited { color: #27AE60 !important; } [data-theme="black"] .gold-line { background: linear-gradient(90deg, transparent, rgba(46,204,113,0.12), rgba(46,204,113,0.28), rgba(46,204,113,0.12), transparent) !important; } /* High contrast focus rings for black theme */ [data-theme="black"] *:focus-visible { outline: 2px solid #2ECC71 !important; outline-offset: 2px !important; } /* Light — visited links: dark enough for #F5F7FA bg */ [data-theme="light"] .footer-col ul li a:visited { color: #334155 !important; } [data-theme="light"] .footer-legal a:visited { color: #475569 !important; } [data-theme="light"] .footer-highlight:visited { color: #334155 !important; } [data-theme="light"] main a:visited { color: #8B6914 !important; } /* Sage — visited links: dark for sage bg, light for dark footer */ /* ── Logo: intentional dark app-icon treatment ────────────────────────────── * The logo graphic was designed for dark backgrounds (dark blues + greens). * We embrace this as a branded app-icon: dark square, rounded corners. * On dark themes it blends with the nav. On light themes it reads as a * deliberate icon badge — consistent everywhere. * ─────────────────────────────────────────────────────────────────────── */ .nav-logo img, .nav-logo > img, .portal-nav-logo img, .portal-nav-logo > img, .footer-brand .nav-logo img, .footer-brand .nav-logo > img, #site-footer .nav-logo img, #site-footer .nav-logo > img { background: #050E1A !important; border-radius: 8px !important; padding: 0 !important; box-sizing: border-box !important; display: block !important; mix-blend-mode: normal !important; outline: 1.5px solid rgba(201,168,76,0.3) !important; outline-offset: 0 !important; } /* ══════════════════════════════════════════════════════════════ * THEME AUDIT — Session 27/28 additions * Fix hardcoded dark colors in JS-generated components * ══════════════════════════════════════════════════════════════ */ /* Matches widget — cards and deal radar use hardcoded #0A1628 / #0D1B2E */ [data-theme="light"] .mw-match-card, [data-theme="light-sage"] .mw-match-card, [data-theme="light-mid"] .mw-match-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } [data-theme="light"] .mw-deal-radar, [data-theme="light-sage"] .mw-deal-radar, [data-theme="light-mid"] .mw-deal-radar { background: var(--surface-2) !important; border-color: var(--border) !important; } [data-theme="light"] .mw-card-body, [data-theme="light-sage"] .mw-card-body, [data-theme="light-mid"] .mw-card-body { border-top-color: var(--border) !important; } [data-theme="light"] .mw-lock-notice, [data-theme="light-sage"] .mw-lock-notice, [data-theme="light-mid"] .mw-lock-notice { background: var(--gold-a08) !important; border-color: var(--gold-a20) !important; color: var(--text-sec) !important; } [data-theme="light"] .mw-status-pill, [data-theme="light-sage"] .mw-status-pill, [data-theme="light-mid"] .mw-status-pill { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-dim) !important; } [data-theme="light"] .mw-status-pill.done, [data-theme="light-sage"] .mw-status-pill.done, [data-theme="light-mid"] .mw-status-pill.done { background: rgba(22,163,74,0.12) !important; border-color: rgba(22,163,74,0.3) !important; color: var(--green) !important; } [data-theme="light"] .mw-wrap, [data-theme="light-sage"] .mw-wrap, [data-theme="light-mid"] .mw-wrap { background: transparent !important; } /* Pipeline board — hardcoded dark card backgrounds */ [data-theme="light"] .pipe-col, [data-theme="light-sage"] .pipe-col, [data-theme="light-mid"] .pipe-col { background: var(--surface-2) !important; border-color: var(--border) !important; } [data-theme="light"] .pipe-card, [data-theme="light-sage"] .pipe-card, [data-theme="light-mid"] .pipe-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } [data-theme="light"] .pipe-col-head, [data-theme="light-sage"] .pipe-col-head, [data-theme="light-mid"] .pipe-col-head { border-bottom-color: var(--border) !important; } /* Readiness score panel — dark hardcoded bg */ [data-theme="light"] .rs-root, [data-theme="light-sage"] .rs-root, [data-theme="light-mid"] .rs-root { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } [data-theme="light"] .rs-dim, [data-theme="light-sage"] .rs-dim, [data-theme="light-mid"] .rs-dim { background: var(--surface-2) !important; border-color: var(--border) !important; } [data-theme="light"] .rs-dim:hover, [data-theme="light-sage"] .rs-dim:hover, [data-theme="light-mid"] .rs-dim:hover { background: var(--surface-3) !important; } [data-theme="light"] .rs-gap, [data-theme="light-sage"] .rs-gap, [data-theme="light-mid"] .rs-gap { background: var(--surface-2) !important; border-color: rgba(220,38,38,0.2) !important; } /* Demo page mock UI — dark hardcoded backgrounds */ [data-theme="light"] .demo-mock, [data-theme="light-sage"] .demo-mock, [data-theme="light-mid"] .demo-mock { background: var(--surface-2) !important; border-color: var(--border) !important; } [data-theme="light"] .mock-body, [data-theme="light-sage"] .mock-body, [data-theme="light-mid"] .mock-body { color: var(--text-primary) !important; } /* Ecosystem map dots readable on light themes */ [data-theme="light"] .em-map-card, [data-theme="light-sage"] .em-map-card, [data-theme="light-mid"] .em-map-card { background: var(--surface) !important; border-color: var(--border) !important; } [data-theme="light"] .em-legend, [data-theme="light-sage"] .em-legend, [data-theme="light-mid"] .em-legend { background: var(--surface-2) !important; } [data-theme="light"] .em-leg-item, [data-theme="light-sage"] .em-leg-item, [data-theme="light-mid"] .em-leg-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-sec) !important; } /* Resume banner on join forms */ [data-theme="light"] [id$="-resume-banner"], [data-theme="light-sage"] [id$="-resume-banner"], [data-theme="light-mid"] [id$="-resume-banner"] { background: rgba(24,84,128,0.07) !important; border-color: rgba(24,84,128,0.2) !important; color: var(--text-sec) !important; } /* Premium upgrade modal */ [data-theme="light"] #mw-premium-modal > div, [data-theme="light-sage"] #mw-premium-modal > div, [data-theme="light-mid"] #mw-premium-modal > div { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-primary) !important; } /* ── Global gold text fix for light themes ─────────────────────────────────── Elements using inline style="color:#C9A84C" or page-level CSS with hardcoded gold hex will be overridden to var(--gold) which remaps to a readable dark colour on light backgrounds. Prevents the issue from recurring on new pages. ─────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] [style*="color:#C9A84C"], [data-theme="light"] [style*="color: #C9A84C"], [data-theme="light"] [style*="color:#c9a84c"], [data-theme="light-sage"] [style*="color:#C9A84C"], [data-theme="light-sage"] [style*="color: #C9A84C"], [data-theme="light-sage"] [style*="color:#c9a84c"], [data-theme="light-mid"] [style*="color:#C9A84C"], [data-theme="light-mid"] [style*="color: #C9A84C"], [data-theme="light-mid"] [style*="color:#c9a84c"] { color: var(--gold) !important; } /* ── Button text contrast on light themes ───────────────────────────────────── On light/light-sage/light-mid, --gold remaps to dark green (#1A6E38). Buttons use color:var(--bg) which becomes white/light on these themes, making white text on dark-green = invisible. Force white text so it reads. ─────────────────────────────────────────────────────────────────────────── */ [data-theme="light"] .btn-gold, [data-theme="light-sage"] .btn-gold, [data-theme="light-mid"] .btn-gold, [data-theme="light"] .btn-gold:hover, [data-theme="light-sage"] .btn-gold:hover, [data-theme="light-mid"] .btn-gold:hover, [data-theme="light"] .hero-cta, [data-theme="light-sage"] .hero-cta, [data-theme="light-mid"] .hero-cta { color: #FFFFFF !important; } [data-theme="light"] .f4f-match-btn, [data-theme="light-sage"] .f4f-match-btn, [data-theme="light-mid"] .f4f-match-btn, [data-theme="light"] .f4f-modal-save-btn, [data-theme="light-sage"] .f4f-modal-save-btn, [data-theme="light-mid"] .f4f-modal-save-btn, [data-theme="light"] .f4f-trigger-btn, [data-theme="light-sage"] .f4f-trigger-btn, [data-theme="light-mid"] .f4f-trigger-btn, [data-theme="light"] .f4f-modal-next, [data-theme="light-sage"] .f4f-modal-next, [data-theme="light-mid"] .f4f-modal-next { color: #FFFFFF !important; } [data-theme="light"] .portal-nav-signout, [data-theme="light-sage"] .portal-nav-signout, [data-theme="light-mid"] .portal-nav-signout { color: #FFFFFF !important; } /* Inline style background:var(--gold) buttons */ [data-theme="light"] [style*="background:var(--gold)"], [data-theme="light-sage"] [style*="background:var(--gold)"], [data-theme="light-mid"] [style*="background:var(--gold)"], [data-theme="light"] [style*="background: var(--gold)"], [data-theme="light-sage"] [style*="background: var(--gold)"], [data-theme="light-mid"] [style*="background: var(--gold)"], [data-theme="light"] [style*="background:#C9A84C"], [data-theme="light-sage"] [style*="background:#C9A84C"], [data-theme="light-mid"] [style*="background:#C9A84C"] { color: #FFFFFF !important; } /* ── Light theme portal fixes (Session 42) ─────────────────────────────── */ /* Multi-select chips: visible borders and text on light backgrounds */ [data-theme="light"] .multi-item, [data-theme="light-sage"] .multi-item, [data-theme="light-mid"] .multi-item { border-color: rgba(0,0,0,0.18) !important; color: var(--text-sec, #3A4A5A) !important; background: rgba(0,0,0,0.04) !important; } [data-theme="light"] .multi-item:hover, [data-theme="light-sage"] .multi-item:hover, [data-theme="light-mid"] .multi-item:hover { border-color: var(--gold) !important; color: var(--text, #1A2B3A) !important; } [data-theme="light"] .multi-item.sel, [data-theme="light-sage"] .multi-item.sel, [data-theme="light-mid"] .multi-item.sel { background: rgba(26,110,56,0.10) !important; border-color: rgba(26,110,56,0.35) !important; color: var(--gold, #1A6E38) !important; } /* Tab trigger pills: visible on light bg */ [data-theme="light"] .f4f-tpill, [data-theme="light-sage"] .f4f-tpill, [data-theme="light-mid"] .f4f-tpill { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.15) !important; color: var(--text-sec, #3A4A5A) !important; } [data-theme="light"] .f4f-tpill.done, [data-theme="light-sage"] .f4f-tpill.done, [data-theme="light-mid"] .f4f-tpill.done { background: rgba(26,110,56,0.10) !important; border-color: rgba(26,110,56,0.35) !important; color: var(--gold, #1A6E38) !important; } [data-theme="light"] .f4f-tpill.active, [data-theme="light-sage"] .f4f-tpill.active, [data-theme="light-mid"] .f4f-tpill.active { background: rgba(26,110,56,0.15) !important; border-color: rgba(26,110,56,0.45) !important; color: var(--gold, #1A6E38) !important; } /* Checkbox rows: readable on light backgrounds */ [data-theme="light"] .checkbox-row, [data-theme="light-sage"] .checkbox-row, [data-theme="light-mid"] .checkbox-row { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.12) !important; } [data-theme="light"] .checkbox-row span, [data-theme="light-sage"] .checkbox-row span, [data-theme="light-mid"] .checkbox-row span { color: var(--text-sec, #3A4A5A) !important; } /* Modal tab bar: visible on light theme */ [data-theme="light"] #f4f-modal-tab-bar, [data-theme="light-sage"] #f4f-modal-tab-bar, [data-theme="light-mid"] #f4f-modal-tab-bar { background: var(--surface-2, #EFF2F7) !important; border-color: rgba(0,0,0,0.10) !important; } [data-theme="light"] .f4f-modal-tab, [data-theme="light-sage"] .f4f-modal-tab, [data-theme="light-mid"] .f4f-modal-tab { color: var(--text-sec, #3A4A5A) !important; } [data-theme="light"] .f4f-modal-tab.active, [data-theme="light-sage"] .f4f-modal-tab.active, [data-theme="light-mid"] .f4f-modal-tab.active { color: var(--text, #1A2B3A) !important; border-bottom-color: var(--gold, #1A6E38) !important; } /* Dot progress indicators */ [data-theme="light"] .f4f-progress-dot, [data-theme="light-sage"] .f4f-progress-dot, [data-theme="light-mid"] .f4f-progress-dot { background: rgba(0,0,0,0.15) !important; } [data-theme="light"] .f4f-progress-dot.done, [data-theme="light-sage"] .f4f-progress-dot.done, [data-theme="light-mid"] .f4f-progress-dot.done { background: var(--gold, #1A6E38) !important; } /* ═══════════════════════════════════════════════════════════════ GLOBAL LIGHT-THEME READABILITY OVERRIDES (Session 44) Fixes low-contrast text across all 3 light themes. These classes appear throughout platform-example, how-it-works, portal, and showcase pages. By centralising here, no HTML file needs individual patching — the variable propagation handles it. ═══════════════════════════════════════════════════════════════ */ /* All 3 light themes share the same fix set */ [data-theme="light"], [data-theme="light-sage"], [data-theme="light-mid"] { /* Page-level structural text */ --text-sec: #2D3748; --text-secondary:#2D3748; --text-dim: #4A5568; --muted: #4A5568; --td: #4A5568; --ts: #2D3748; --tp: #1A2030; } /* Explicit class overrides — catches any remaining hardcoded color on classes that pages define inline in