/** * SentariAI — shared light / dark theme tokens. * Set or data-theme="light"> (theme-init.js + theme-toggle.js). */ :root, html[data-theme="dark"] { color-scheme: dark; --bg-deep: #06080c; --bg-section: #0b0e14; /* Slightly lifted vs pure #11151c so cards / dashboard nav read more clearly against --bg-deep */ --bg-card: #1a1f2a; --text-primary: #f5f2eb; --text-secondary: #c8c4ba; --text-muted: #a39e95; --accent: #c9a227; --accent-dim: rgba(201, 162, 39, 0.15); /* Stronger edge on panels, sidebar, inputs (was 0.08 — too faint on --bg-card) */ --border: rgba(248, 246, 242, 0.14); --input-bg: #070a10; --danger: #c94a4a; --nav-gradient: linear-gradient( to bottom, rgba(6, 8, 12, 0.95) 0%, rgba(6, 8, 12, 0) 100% ); --nav-scrolled-bg: rgba(6, 8, 12, 0.92); --floating-cta-bg: rgba(11, 14, 20, 0.97); --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; --logo-span-shadow: 0 0 18px rgba(201, 162, 39, 0.45), 0 0 42px rgba(201, 162, 39, 0.12); --on-accent: #06080c; --on-accent-hover: #06080c; } /** * Light theme — readability first (inspired by high-contrast news layouts): * near-neutral backgrounds, near-black body copy, stronger borders, WCAG-friendly gold. */ html[data-theme="light"] { color-scheme: light; /* BBC-like neutrals: white + soft gray bands (avoid yellow-tinted cream vs gray text) */ --bg-deep: #ffffff; --bg-section: #f2f2f2; --bg-card: #ffffff; /* Body ~#3F3F42 / headline near-black — strong contrast on white */ --text-primary: #111111; --text-secondary: #3d3d42; --text-muted: #6b6b70; /* Gold dark enough for small UI text on white; buttons use --on-accent for label */ --accent: #7a6210; --accent-dim: rgba(122, 98, 16, 0.12); --border: rgba(0, 0, 0, 0.12); --input-bg: #ffffff; --danger: #b91c1c; --nav-gradient: linear-gradient( to bottom, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0) 100% ); --nav-scrolled-bg: #ffffff; --floating-cta-bg: #f7f7f7; --logo-span-shadow: 0 0 8px rgba(122, 98, 16, 0.18); /* Text on gold / filled buttons (fixes cream-on-gold in light mode) */ --on-accent: #ffffff; --on-accent-hover: #ffffff; } html[data-theme="light"] .logo span { text-shadow: var(--logo-span-shadow); } /* Slightly more open line-height in light mode for long reading */ html[data-theme="light"] body { line-height: 1.65; } /* Nav bar uses theme variables */ .nav { background: var(--nav-gradient); } .nav.scrolled { background: var(--nav-scrolled-bg); } /* Same as index.html inline — Leadership slot hidden until launch (shared with PHP app shell) */ .nav-links .nav-link-leadership-hidden { display: none; } /* Clear bar edge on light backgrounds (similar to news sites) */ html[data-theme="light"] .nav, html[data-theme="light"] .nav.scrolled { border-bottom: 1px solid var(--border); } /* Primary / filled buttons: label color independent of page background */ .btn-primary, .btn-submit { color: var(--on-accent) !important; } .btn-primary:hover { color: var(--on-accent-hover) !important; } /* * Inline links in content: subtle underline (nav / primary CTAs excluded). * Scope to main + footer so top nav stays clean. Left app sidebar matches top nav (no underline). */ html[data-theme="light"] main a:not(.btn):not(.logo):not(.dashboard-sidebar__link), html[data-theme="light"] footer a:not(.btn):not(.logo) { text-decoration: underline; text-decoration-color: rgba(122, 98, 16, 0.45); text-underline-offset: 0.18em; } html[data-theme="light"] main a:not(.btn):not(.logo):not(.dashboard-sidebar__link):hover, html[data-theme="light"] footer a:not(.btn):not(.logo):hover { text-decoration-color: var(--accent); } /* Schedule page has no
; treat content wrap + thank-you card like article body */ html[data-theme="light"] .schedule-wrap a:not(.btn):not(.logo), html[data-theme="light"] .schedule-thank-card a:not(.btn) { text-decoration: underline; text-decoration-color: rgba(122, 98, 16, 0.45); text-underline-offset: 0.18em; } html[data-theme="light"] .schedule-wrap a:not(.btn):not(.logo):hover, html[data-theme="light"] .schedule-thank-card a:not(.btn):hover { text-decoration-color: var(--accent); } /* Theme toggle in nav */ .nav-theme-wrap { display: flex; align-items: center; } .theme-toggle { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.2rem 0; margin: 0; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; transition: color 0.2s; } .theme-toggle:hover { color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .theme-toggle-track { position: relative; width: 2.75rem; height: 1.5rem; flex-shrink: 0; border-radius: 999px; background: rgba(128, 128, 128, 0.28); border: 1px solid var(--border); transition: background 0.2s, border-color 0.2s; } html[data-theme="light"] .theme-toggle-track { background: rgba(201, 162, 39, 0.25); } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.22s ease; } html[data-theme="light"] .theme-toggle-thumb { transform: translateX(1.25rem); } .theme-toggle-label { white-space: nowrap; } @media (max-width: 768px) { .nav-links li.nav-hide-mobile { display: none !important; } } /* Site-wide footer (matches index.html — PHP shell, static pages, schedule) */ .app-footer { padding: 2rem 0; text-align: center; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.65; } .app-footer .wrapper { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .app-footer a { color: var(--text-secondary); text-decoration: none; } .app-footer a:hover { color: var(--accent); } .app-footer__line { margin: 0; } .app-footer__line--first { margin-bottom: 0.5rem; }