/* ============================================================ HomeGroundAssist — Dark Theme Deep forest / pitch-side night palette Applied via: • html[data-theme="dark"] → manual toggle (user preference) • @media (prefers-color-scheme: dark) → system default (skipped if user has explicitly chosen light via toggle) ============================================================ */ /* ── Shared token block (used by both mechanisms below) ── */ :root { --dm-bg-top: #0e1a12; --dm-bg-bottom: #090f0b; --dm-card: rgba(20, 42, 30, 0.94); --dm-panel: rgba(16, 36, 25, 0.88); --dm-panel-border: rgba(50, 100, 72, 0.38); --dm-line: rgba(45, 95, 68, 0.42); --dm-ink: #deeae4; --dm-ink-strong: #f0f7f3; --dm-ink-mid: #a8c4b6; --dm-ink-soft: #6e9080; --dm-soft: #8aab98; --dm-muted: #556b60; --dm-accent: #18b07a; --dm-accent-strong: #0d7a52; --dm-accent-soft: rgba(24, 176, 122, 0.18); --dm-accent-glow: rgba(24, 176, 122, 0.16); --dm-danger: #e05a50; --dm-sun: rgba(247, 240, 200, 0.08); --dm-mint: rgba(213, 238, 224, 0.08); } /* ── Manual toggle: data-theme="dark" on ── */ html[data-theme="dark"] { --bg-top: var(--dm-bg-top); --bg-bottom: var(--dm-bg-bottom); --bg-a: var(--dm-bg-top); --bg-b: var(--dm-bg-bottom); --card: var(--dm-card); --panel: var(--dm-panel); --panel-border: var(--dm-panel-border); --line: var(--dm-line); --ink: var(--dm-ink); --ink-strong: var(--dm-ink-strong); --ink-mid: var(--dm-ink-mid); --ink-soft: var(--dm-ink-soft); --soft: var(--dm-soft); --muted: var(--dm-muted); --accent: var(--dm-accent); --accent-strong: var(--dm-accent-strong); --accent-soft: var(--dm-accent-soft); --accent-glow: var(--dm-accent-glow); --danger: var(--dm-danger); --sun: var(--dm-sun); --mint: var(--dm-mint); --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35); } /* ── System preference dark (user hasn't overridden to light) ── */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg-top: var(--dm-bg-top); --bg-bottom: var(--dm-bg-bottom); --bg-a: var(--dm-bg-top); --bg-b: var(--dm-bg-bottom); --card: var(--dm-card); --panel: var(--dm-panel); --panel-border: var(--dm-panel-border); --line: var(--dm-line); --ink: var(--dm-ink); --ink-strong: var(--dm-ink-strong); --ink-mid: var(--dm-ink-mid); --ink-soft: var(--dm-ink-soft); --soft: var(--dm-soft); --muted: var(--dm-muted); --accent: var(--dm-accent); --accent-strong: var(--dm-accent-strong); --accent-soft: var(--dm-accent-soft); --accent-glow: var(--dm-accent-glow); --danger: var(--dm-danger); --sun: var(--dm-sun); --mint: var(--dm-mint); --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35); } } /* ============================================================ Dark-mode body & surface overrides These target hard-coded colours that aren't tokenised ============================================================ */ /* ── Body background ── */ html[data-theme="dark"] body, @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { } } html[data-theme="dark"] body { background: radial-gradient(circle at 15% 8%, rgba(24, 176, 122, 0.07), transparent 32%), radial-gradient(circle at 88% 12%, rgba(24, 100, 65, 0.08), transparent 36%), linear-gradient(180deg, var(--dm-bg-top) 0%, var(--dm-bg-bottom) 100%); color: var(--dm-ink-mid); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body { background: radial-gradient(circle at 15% 8%, rgba(24, 176, 122, 0.07), transparent 32%), radial-gradient(circle at 88% 12%, rgba(24, 100, 65, 0.08), transparent 36%), linear-gradient(180deg, var(--dm-bg-top) 0%, var(--dm-bg-bottom) 100%); color: var(--dm-ink-mid); } } /* ── Nav ── */ html[data-theme="dark"] .page-nav, @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .page-nav { } } html[data-theme="dark"] .page-nav { background: rgba(14, 28, 20, 0.92); border-color: rgba(40, 85, 60, 0.48); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .page-nav { background: rgba(14, 28, 20, 0.92); border-color: rgba(40, 85, 60, 0.48); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3); } } html[data-theme="dark"] .page-brand, @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .page-brand { } } html[data-theme="dark"] .page-brand { color: var(--dm-ink); } html[data-theme="dark"] .page-brand-subtitle { color: var(--dm-ink-soft); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .page-brand { color: var(--dm-ink); } html:not([data-theme="light"]) .page-brand-subtitle { color: var(--dm-ink-soft); } } html[data-theme="dark"] .page-nav-link, html[data-theme="dark"] .page-nav-button { background: rgba(24, 55, 38, 0.7); color: var(--dm-ink-mid); border-color: rgba(45, 95, 68, 0.4); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .page-nav-link, html:not([data-theme="light"]) .page-nav-button { background: rgba(24, 55, 38, 0.7); color: var(--dm-ink-mid); border-color: rgba(45, 95, 68, 0.4); } } html[data-theme="dark"] .page-nav-link--primary, html[data-theme="dark"] .page-nav-link[aria-current="page"] { background: linear-gradient(135deg, var(--dm-accent), var(--dm-accent-strong)); color: #fff; border-color: transparent; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .page-nav-link--primary, html:not([data-theme="light"]) .page-nav-link[aria-current="page"] { background: linear-gradient(135deg, var(--dm-accent), var(--dm-accent-strong)); color: #fff; border-color: transparent; } } /* ── Auth pages (login, register, recording-guide, privacy, feedback) ── */ html[data-theme="dark"] .shell { background: rgba(16, 34, 24, 0.88); border-color: rgba(45, 95, 68, 0.4); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .login-panel, html[data-theme="dark"] .register-panel { background: rgba(20, 44, 32, 0.82); border-color: rgba(45, 95, 68, 0.38); } html[data-theme="dark"] .about-panel { background: linear-gradient(155deg, rgba(18, 42, 30, 0.95), rgba(14, 32, 22, 0.9)); border-color: rgba(45, 95, 68, 0.38); } html[data-theme="dark"] h1, html[data-theme="dark"] .about-title, html[data-theme="dark"] .video-section-heading, html[data-theme="dark"] .detail-title, html[data-theme="dark"] .info-title, html[data-theme="dark"] .detail-card h2, html[data-theme="dark"] .detail-card h3 { color: var(--dm-ink-strong); } html[data-theme="dark"] p, html[data-theme="dark"] .about-copy, html[data-theme="dark"] .detail-lead, html[data-theme="dark"] .video-section-sub, html[data-theme="dark"] .info-copy, html[data-theme="dark"] .sample-downloads-copy, html[data-theme="dark"] .about-list, html[data-theme="dark"] .detail-list { color: var(--dm-ink-mid); } html[data-theme="dark"] label { color: var(--dm-ink-soft); } html[data-theme="dark"] input { background: rgba(12, 30, 20, 0.9); border-color: rgba(45, 95, 68, 0.55); color: var(--dm-ink); } html[data-theme="dark"] input:focus-visible { border-color: var(--dm-accent); box-shadow: 0 0 0 3px var(--dm-accent-glow); } html[data-theme="dark"] .trust-chip { background: rgba(20, 45, 33, 0.8); border-color: rgba(45, 95, 68, 0.45); color: var(--dm-ink-mid); } html[data-theme="dark"] .info-card, html[data-theme="dark"] .detail-card, html[data-theme="dark"] .sample-downloads { background: rgba(18, 40, 28, 0.85); border-color: rgba(45, 95, 68, 0.35); } html[data-theme="dark"] .sample-download-link { background: rgba(20, 44, 32, 0.85); border-color: rgba(45, 95, 68, 0.4); color: var(--dm-ink); } html[data-theme="dark"] .sample-download-link:hover { background: rgba(24, 55, 38, 0.9); } html[data-theme="dark"] .auth-divider span { background: rgba(18, 40, 28, 0.95); color: var(--dm-ink-soft); } html[data-theme="dark"] .auth-divider::before { border-top-color: rgba(45, 95, 68, 0.4); } html[data-theme="dark"] .links a { color: var(--dm-accent); } html[data-theme="dark"] button.social-btn { background: rgba(20, 44, 32, 0.85); border-color: rgba(45, 95, 68, 0.5); color: var(--dm-ink); } html[data-theme="dark"] button.social-btn:hover { background: rgba(24, 55, 38, 0.9); } html[data-theme="dark"] .detail-note { background: rgba(24, 176, 122, 0.1); color: var(--dm-ink-mid); } /* ── Home page specific ── */ html[data-theme="dark"] .primary-upload-card, html[data-theme="dark"] .focus-builder { background: rgba(18, 40, 28, 0.88); border-color: rgba(45, 95, 68, 0.38); } html[data-theme="dark"] .mode-chip { background: rgba(20, 44, 32, 0.75); border-color: rgba(45, 95, 68, 0.4); color: var(--dm-ink-mid); } html[data-theme="dark"] .mode-chip:hover { border-color: rgba(45, 95, 68, 0.7); } html[data-theme="dark"] .purpose-clarity { background: rgba(16, 36, 25, 0.85); border-color: rgba(45, 95, 68, 0.32); } html[data-theme="dark"] .purpose-clarity-title, html[data-theme="dark"] .mode-guidance-title, html[data-theme="dark"] .focus-section-title, html[data-theme="dark"] .focus-builder-heading, html[data-theme="dark"] .focus-section-title, html[data-theme="dark"] .title { color: var(--dm-ink-strong); } html[data-theme="dark"] .subtitle, html[data-theme="dark"] .purpose-clarity-copy, html[data-theme="dark"] .focus-builder-copy, html[data-theme="dark"] .focus-section-copy, html[data-theme="dark"] .upload-helper { color: var(--dm-ink-mid); } html[data-theme="dark"] .tagline { color: var(--dm-ink-soft); } html[data-theme="dark"] .mode-guidance { background: rgba(16, 36, 25, 0.85); border-color: rgba(45, 95, 68, 0.32); } html[data-theme="dark"] .mode-guidance-card { background: rgba(20, 44, 32, 0.7); border-color: rgba(45, 95, 68, 0.3); } html[data-theme="dark"] .mode-guidance-card-copy, html[data-theme="dark"] .mode-guidance-list, html[data-theme="dark"] .purpose-flow { color: var(--dm-ink-mid); } html[data-theme="dark"] .mode-guidance-list-wrap { background: rgba(14, 30, 20, 0.7); border-color: rgba(45, 95, 68, 0.28); } html[data-theme="dark"] .focus-group { background: rgba(14, 30, 20, 0.65); border-color: rgba(45, 95, 68, 0.32); } html[data-theme="dark"] .focus-chip { background: rgba(20, 44, 32, 0.8); border-color: rgba(45, 95, 68, 0.4); color: var(--dm-ink-mid); } html[data-theme="dark"] .advanced-toggle-btn { background: rgba(16, 36, 25, 0.8); border-color: rgba(45, 95, 68, 0.38); color: var(--dm-ink); } html[data-theme="dark"] textarea { background: rgba(12, 30, 20, 0.9); border-color: rgba(45, 95, 68, 0.5); color: var(--dm-ink); } html[data-theme="dark"] .hero-proof-item { background: rgba(18, 40, 28, 0.75); border-color: rgba(45, 95, 68, 0.35); } html[data-theme="dark"] .hero-proof-copy { color: var(--dm-ink-mid); } html[data-theme="dark"] .support-disclosure { background: rgba(16, 36, 25, 0.85); border-color: rgba(45, 95, 68, 0.35); } html[data-theme="dark"] .support-disclosure summary { background: rgba(14, 30, 20, 0.9); border-bottom-color: rgba(45, 95, 68, 0.3); color: var(--dm-ink-mid); } html[data-theme="dark"] .account-menu-panel { background: rgba(14, 30, 20, 0.97); border-color: rgba(40, 85, 60, 0.5); } html[data-theme="dark"] .account-menu-trigger { background: rgba(18, 40, 28, 0.92); border-color: rgba(45, 95, 68, 0.45); color: var(--dm-ink); } html[data-theme="dark"] .account-menu-card { background: rgba(16, 36, 25, 0.88); border-color: rgba(45, 95, 68, 0.35); } html[data-theme="dark"] .account-menu-card-name { color: var(--dm-ink-strong); } html[data-theme="dark"] .account-menu-card-email, html[data-theme="dark"] .account-menu-card-club { color: var(--dm-ink-mid); } html[data-theme="dark"] .account-link { background: rgba(20, 44, 32, 0.75); color: var(--dm-ink-mid); border-color: rgba(45, 95, 68, 0.4); } html[data-theme="dark"] .how-it-works-strip { background: rgba(16, 36, 25, 0.82); border-color: rgba(45, 95, 68, 0.35); } html[data-theme="dark"] .hiw-step { background: rgba(18, 42, 30, 0.85); border-color: rgba(45, 95, 68, 0.32); } html[data-theme="dark"] .hiw-step-label { color: var(--dm-ink-soft); } html[data-theme="dark"] .hiw-step-title { color: var(--dm-ink-strong); } html[data-theme="dark"] .hiw-step-copy { color: var(--dm-ink-mid); } html[data-theme="dark"] .hiw-connector { color: rgba(45, 95, 68, 0.55); } /* ── Profile page ── */ html[data-theme="dark"] .card { background: rgba(18, 40, 28, 0.9); border-color: rgba(45, 95, 68, 0.38); } html[data-theme="dark"] .usage-summary { background: rgba(14, 30, 20, 0.8); border-color: rgba(45, 95, 68, 0.4); } html[data-theme="dark"] .usage-summary-label { color: var(--dm-ink-soft); } html[data-theme="dark"] .usage-summary-value { color: var(--dm-ink-strong); } html[data-theme="dark"] .value { background: rgba(12, 28, 19, 0.85); border-color: rgba(45, 95, 68, 0.4); color: var(--dm-ink); } html[data-theme="dark"] .history-title { color: var(--dm-ink-soft); } /* ============================================================ System-preference mirrors of the above (Keeps code DRY by reusing the same rules for auto-dark) ============================================================ */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .shell { background: rgba(16, 34, 24, 0.88); border-color: rgba(45, 95, 68, 0.4); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4); } html:not([data-theme="light"]) .login-panel, html:not([data-theme="light"]) .register-panel { background: rgba(20, 44, 32, 0.82); border-color: rgba(45, 95, 68, 0.38); } html:not([data-theme="light"]) .about-panel { background: linear-gradient(155deg, rgba(18, 42, 30, 0.95), rgba(14, 32, 22, 0.9)); border-color: rgba(45, 95, 68, 0.38); } html:not([data-theme="light"]) h1, html:not([data-theme="light"]) .about-title, html:not([data-theme="light"]) .video-section-heading, html:not([data-theme="light"]) .detail-title, html:not([data-theme="light"]) .info-title, html:not([data-theme="light"]) .title { color: var(--dm-ink-strong); } html:not([data-theme="light"]) p, html:not([data-theme="light"]) .about-copy, html:not([data-theme="light"]) .detail-lead, html:not([data-theme="light"]) .subtitle, html:not([data-theme="light"]) .upload-helper { color: var(--dm-ink-mid); } html:not([data-theme="light"]) label { color: var(--dm-ink-soft); } html:not([data-theme="light"]) input { background: rgba(12, 30, 20, 0.9); border-color: rgba(45, 95, 68, 0.55); color: var(--dm-ink); } html:not([data-theme="light"]) .page-nav { background: rgba(14, 28, 20, 0.92); border-color: rgba(40, 85, 60, 0.48); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3); } html:not([data-theme="light"]) .page-brand { color: var(--dm-ink); } html:not([data-theme="light"]) .page-brand-subtitle { color: var(--dm-ink-soft); } html:not([data-theme="light"]) .page-nav-link, html:not([data-theme="light"]) .page-nav-button { background: rgba(24, 55, 38, 0.7); color: var(--dm-ink-mid); border-color: rgba(45, 95, 68, 0.4); } html:not([data-theme="light"]) .page-nav-link--primary, html:not([data-theme="light"]) .page-nav-link[aria-current="page"] { background: linear-gradient(135deg, var(--dm-accent), var(--dm-accent-strong)); color: #fff; border-color: transparent; } html:not([data-theme="light"]) .trust-chip { background: rgba(20, 45, 33, 0.8); border-color: rgba(45, 95, 68, 0.45); color: var(--dm-ink-mid); } html:not([data-theme="light"]) .info-card, html:not([data-theme="light"]) .detail-card, html:not([data-theme="light"]) .sample-downloads { background: rgba(18, 40, 28, 0.85); border-color: rgba(45, 95, 68, 0.35); } html:not([data-theme="light"]) .sample-download-link { background: rgba(20, 44, 32, 0.85); border-color: rgba(45, 95, 68, 0.4); color: var(--dm-ink); } html:not([data-theme="light"]) .primary-upload-card, html:not([data-theme="light"]) .focus-builder { background: rgba(18, 40, 28, 0.88); border-color: rgba(45, 95, 68, 0.38); } html:not([data-theme="light"]) .mode-chip { background: rgba(20, 44, 32, 0.75); border-color: rgba(45, 95, 68, 0.4); color: var(--dm-ink-mid); } html:not([data-theme="light"]) .purpose-clarity, html:not([data-theme="light"]) .mode-guidance, html:not([data-theme="light"]) .support-disclosure { background: rgba(16, 36, 25, 0.85); border-color: rgba(45, 95, 68, 0.32); } html:not([data-theme="light"]) .mode-guidance-card { background: rgba(20, 44, 32, 0.7); border-color: rgba(45, 95, 68, 0.3); } html:not([data-theme="light"]) .focus-group { background: rgba(14, 30, 20, 0.65); border-color: rgba(45, 95, 68, 0.32); } html:not([data-theme="light"]) .focus-chip { background: rgba(20, 44, 32, 0.8); border-color: rgba(45, 95, 68, 0.4); color: var(--dm-ink-mid); } html:not([data-theme="light"]) .hero-proof-item { background: rgba(18, 40, 28, 0.75); border-color: rgba(45, 95, 68, 0.35); } html:not([data-theme="light"]) .card { background: rgba(18, 40, 28, 0.9); border-color: rgba(45, 95, 68, 0.38); } html:not([data-theme="light"]) .value { background: rgba(12, 28, 19, 0.85); border-color: rgba(45, 95, 68, 0.4); color: var(--dm-ink); } html:not([data-theme="light"]) .how-it-works-strip { background: rgba(16, 36, 25, 0.82); border-color: rgba(45, 95, 68, 0.35); } html:not([data-theme="light"]) .hiw-step { background: rgba(18, 42, 30, 0.85); border-color: rgba(45, 95, 68, 0.32); } html:not([data-theme="light"]) .hiw-step-label { color: var(--dm-ink-soft); } html:not([data-theme="light"]) .hiw-step-title { color: var(--dm-ink-strong); } html:not([data-theme="light"]) .hiw-step-copy { color: var(--dm-ink-mid); } html:not([data-theme="light"]) .auth-divider span { background: rgba(18, 40, 28, 0.95); color: var(--dm-ink-soft); } html:not([data-theme="light"]) .auth-divider::before { border-top-color: rgba(45, 95, 68, 0.4); } html:not([data-theme="light"]) .links a { color: var(--dm-accent); } } /* ── Theme toggle button (global) ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(15, 122, 85, 0.18); background: rgba(255, 255, 255, 0.88); color: #2a5040; cursor: pointer; font-size: 16px; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; flex: 0 0 auto; padding: 0; line-height: 1; } .theme-toggle:hover { border-color: rgba(15, 122, 85, 0.32); box-shadow: 0 8px 16px rgba(14, 62, 44, 0.1); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 3px solid rgba(15, 122, 85, 0.25); outline-offset: 2px; } html[data-theme="dark"] .theme-toggle, @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-toggle { background: rgba(24, 55, 38, 0.7); border-color: rgba(45, 95, 68, 0.45); color: var(--dm-ink-mid); } } html[data-theme="dark"] .theme-toggle { background: rgba(24, 55, 38, 0.7); border-color: rgba(45, 95, 68, 0.45); color: var(--dm-ink-mid); }