/* ===== DARK THEME OVERRIDES ===== Applied when . Overrides the editorial light palette with a deep-navy dark variant. Kept as a separate CSS file so the light default stays unchanged and we avoid refactoring every per-template inline style. */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] body { background: #0f0f14; color: #e5e5e5; } /* Site chrome */ html[data-theme="dark"] .site-header { background: #0a0a10 !important; border-bottom: 1px solid #22252e; } html[data-theme="dark"] .nav-link { color: #b8bcc4 !important; } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active { color: #f5f5f5 !important; } html[data-theme="dark"] .logo-accent { color: #ff6b8a; } html[data-theme="dark"] .main-content { background: transparent; } /* Footer */ html[data-theme="dark"] .site-footer, html[data-theme="dark"] footer { background: #0a0a10; color: #b8bcc4; } html[data-theme="dark"] footer a { color: #d4d7dd; } /* Theme toggle button */ .theme-toggle { background: transparent; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; transition: background 0.2s, border-color 0.2s; padding: 0; margin-left: 0.5rem; } .theme-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); } html[data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,0.15); } html[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.3); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Cards, surfaces, rules — everywhere */ html[data-theme="dark"] { --ink: #e5e5e5; --paper: #1a1a20; --accent: #ff6b8a; --rule: #22252e; --muted: #8f929a; --soft: #222530; --win: #fb923c; --loss: #4b5563; } /* Main panels */ html[data-theme="dark"] .mv2, html[data-theme="dark"] .mv2-list, html[data-theme="dark"] .h2h-page, html[data-theme="dark"] .h2h-list-page, html[data-theme="dark"] .archive-page, html[data-theme="dark"] .archive-list-page, html[data-theme="dark"] .matches-list-page { color: #e5e5e5; } html[data-theme="dark"] .mv2-hero-wrap { background: #0f0f14 !important; border-bottom-color: #22252e !important; } html[data-theme="dark"] .mv2-hero { border-top-color: #e5e5e5; border-bottom-color: #22252e; } html[data-theme="dark"] .mv2-tab { color: #8f929a; } html[data-theme="dark"] .mv2-tab.active { color: #ff6b8a; border-bottom-color: #ff6b8a; } html[data-theme="dark"] .mv2-tab:hover:not(.active) { color: #e5e5e5; } html[data-theme="dark"] .mv2-info-card, html[data-theme="dark"] .mv2-analysis, html[data-theme="dark"] .mv2-events, html[data-theme="dark"] .mv2-players-team, html[data-theme="dark"] .mv2-bench-col, html[data-theme="dark"] .mv2-coaches-row, html[data-theme="dark"] .mv2-standings-wrap, html[data-theme="dark"] .mv2-h2h-summary, html[data-theme="dark"] .mv2-h2h-matches, html[data-theme="dark"] .mv2-subs-rows { background: #1a1a20 !important; border-color: #22252e !important; } html[data-theme="dark"] .mv2-analysis { background: #16161c !important; border-left-color: #ff6b8a !important; } html[data-theme="dark"] .mv2-analysis p { color: #e5e5e5; } html[data-theme="dark"] .mv2-info-icon { background: #0f0f14 !important; border-color: #22252e; } html[data-theme="dark"] .mv2-event.phase { background: #22252e !important; color: #b8bcc4; } html[data-theme="dark"] .mv2-event.phase .mv2-e-label strong { color: #f5f5f5 !important; } html[data-theme="dark"] .mv2-players-team h3 { background: #0f0f14 !important; border-bottom-color: #22252e !important; } html[data-theme="dark"] .mv2-players-divider { background: #0f0f14 !important; color: #8f929a; } html[data-theme="dark"] .mv2-standings thead th { background: #0f0f14 !important; color: #8f929a; } html[data-theme="dark"] .mv2-standings tr.hit { background: #2a1d26 !important; } html[data-theme="dark"] .mv2-h2h-match:hover, html[data-theme="dark"] .mv2-card:hover, html[data-theme="dark"] .match-row:hover, html[data-theme="dark"] .team-card:hover { background: #222530 !important; } html[data-theme="dark"] .result-card { background: #1a1a20 !important; border-color: #22252e !important; color: #e5e5e5; } html[data-theme="dark"] .result-card:hover { border-color: #ff6b8a !important; } html[data-theme="dark"] .result-league, html[data-theme="dark"] .result-meta { border-color: #22252e !important; } /* Filter chips */ html[data-theme="dark"] .mv2-filter-chip { background: #1a1a20; border-color: #22252e; color: #8f929a; } html[data-theme="dark"] .mv2-filter-chip:hover { border-color: #ff6b8a; color: #f5f5f5; } html[data-theme="dark"] .mv2-filter-chip.active { background: #ff6b8a; color: #0f0f14; border-color: #ff6b8a; } /* Editorial post pages */ html[data-theme="dark"] .editorial-article, html[data-theme="dark"] .editorial-article-body, html[data-theme="dark"] .editorial-article-title, html[data-theme="dark"] .editorial-article-deck, html[data-theme="dark"] .editorial-article-meta { color: inherit; } html[data-theme="dark"] .editorial-article-body p, html[data-theme="dark"] .editorial-article-body li, html[data-theme="dark"] .editorial-article-body h2, html[data-theme="dark"] .editorial-article-body h3 { color: #e5e5e5; } html[data-theme="dark"] .editorial-article-body a { color: #ff6b8a; } html[data-theme="dark"] .editorial-article-body blockquote { border-left-color: #ff6b8a; color: #b8bcc4; } html[data-theme="dark"] .editorial-source-box, html[data-theme="dark"] .editorial-post-nav a, html[data-theme="dark"] .related-article-card { background: #1a1a20; border-color: #22252e; color: #e5e5e5; } html[data-theme="dark"] .related-section-title { color: #f5f5f5; border-color: #22252e; } html[data-theme="dark"] .related-article-title a { color: #e5e5e5; } html[data-theme="dark"] .recent-matches-widget { background: #1a1a20 !important; border-top-color: #e5e5e5 !important; border-bottom-color: #22252e !important; } html[data-theme="dark"] .recent-matches-widget a { background: #0f0f14 !important; border-color: #22252e !important; color: #e5e5e5 !important; } /* Homepage */ html[data-theme="dark"] .big-match-card, html[data-theme="dark"] .upcoming-card { background: #1a1a20; border: 1px solid #22252e; color: #e5e5e5; } html[data-theme="dark"] .section-title { color: #f5f5f5; } html[data-theme="dark"] .section-header { border-color: #22252e; } /* Breadcrumbs + misc */ html[data-theme="dark"] .mv2-crumb a, html[data-theme="dark"] .breadcrumbs a, html[data-theme="dark"] .archive-breadcrumb a, html[data-theme="dark"] .h2h-breadcrumb a, html[data-theme="dark"] .match-breadcrumb a { color: #8f929a; } html[data-theme="dark"] .mv2-crumb a:hover { color: #ff6b8a; } /* Score / numbers should stay bright */ html[data-theme="dark"] .mv2-score, html[data-theme="dark"] .mv2-card-score, html[data-theme="dark"] .mv2-h2h-wins, html[data-theme="dark"] .summary-card-value, html[data-theme="dark"] .mv2-player-name { color: #f5f5f5; } /* Rating badges & form pills stay saturated — no override needed */