/* Global dark mode theme. Activated by adding `dark` class to the element. Approach: - Override existing CSS variables used across the site. - Keep component CSS unchanged by driving theme via variables. */ html.dark { color-scheme: dark; } html.dark:root { /* Core */ --BACKGROUNDCOLOUR: #0b1220; /* Brand */ --BRANGYBLUE: rgb(110, 168, 255); --BRANGYBLUENAV: rgba(110, 168, 255, 0.55); /* Shared text */ --MATCH-TEXT: #e6edf7; --MATCH-MUTED: rgba(230, 237, 247, 0.72); --SQUAD-TEXT: #e6edf7; --SQUAD-MUTED: rgba(230, 237, 247, 0.72); --PROFILE-TEXT: #e6edf7; --PROFILE-MUTED: rgba(230, 237, 247, 0.72); --HOME-TEXT: #e6edf7; --HOME-MUTED: rgba(230, 237, 247, 0.70); --STATSOVERVIEW-TEXT: #e6edf7; --STATSOVERVIEW-MUTED: rgba(230, 237, 247, 0.70); --STATSDETAILED-TEXT: #e6edf7; --STATSDETAILED-MUTED: rgba(230, 237, 247, 0.70); /* Page backgrounds (used in gradients in style.css) */ --MATCH-PAGE-BG-1: #0b1220; --MATCH-PAGE-BG-2: #0b1220; --SQUAD-PAGE-BG-1: #0b1220; --SQUAD-PAGE-BG-2: #0b1220; --PROFILE-PAGE-BG-1: #0b1220; --PROFILE-PAGE-BG-2: #0b1220; --HOME-PAGE-BG-1: #0b1220; --HOME-PAGE-BG-2: #0b1220; --STATSOVERVIEW-PAGE-BG-1: #0b1220; --STATSOVERVIEW-PAGE-BG-2: #0b1220; --STATSDETAILED-PAGE-BG-1: #0b1220; --STATSDETAILED-PAGE-BG-2: #0b1220; /* Surfaces */ --MATCH-SURFACE: rgba(15, 23, 42, 0.92); --SQUAD-SURFACE: rgba(15, 23, 42, 0.92); --PROFILE-SURFACE: rgba(15, 23, 42, 0.92); --HOME-SURFACE: rgba(15, 23, 42, 0.92); --STATSOVERVIEW-SURFACE: rgba(15, 23, 42, 0.92); --STATSDETAILED-SURFACE: rgba(15, 23, 42, 0.92); /* Borders */ --MATCH-BORDER: rgba(110, 168, 255, 0.22); --SQUAD-BORDER: rgba(110, 168, 255, 0.20); --PROFILE-BORDER: rgba(110, 168, 255, 0.20); --HOME-BORDER: rgba(110, 168, 255, 0.18); --STATSOVERVIEW-BORDER: rgba(110, 168, 255, 0.18); --STATSDETAILED-BORDER: rgba(110, 168, 255, 0.18); } /* Generic surfaces/text to catch pages that still use raw colors */ html.dark body { background-color: var(--BACKGROUNDCOLOUR); color: #e6edf7; } /* Ensure page backgrounds are truly dark (override any existing gradients) */ html.dark body.matchPage, html.dark body.squadPage, html.dark body.playerProfilePage, html.dark body.homePage, html.dark body.statsOverviewPage, html.dark body.statsDetailedPage { background: #0b1220 !important; background-attachment: initial; color: #e6edf7; } /* PLAYER PROFILE: make tab/selection areas and containers dark + white text */ html.dark .secondRow, html.dark .thirdRow, html.dark .fourthRow, html.dark .fifthRow, html.dark .sixthRow, html.dark .seventhRow, html.dark .eighthRow, html.dark .ninthRow, html.dark .tenthRow { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e6edf7; } html.dark .primaryPosition h3, html.dark .positionHeader h3, html.dark .shirtFoot h3, html.dark .thirdRow h3, html.dark .playerName, html.dark .primaryPosition p, html.dark .otherPositions p { color: #e6edf7 !important; } /* MATCH PAGE: dark tab selection area */ html.dark .matchTextNavSection { background: rgba(15, 23, 42, 0.92) !important; border-bottom-color: rgba(255, 255, 255, 0.10) !important; } html.dark .matchTextNavSection .matchNavOption { color: rgba(230, 237, 247, 0.85) !important; } html.dark .matchNavOption.active { color: #ffffff !important; } html.dark .matchNavOption:hover:not(.active) { background-color: rgba(110, 168, 255, 0.12) !important; color: #e6edf7 !important; } /* STATS OVERVIEW: each top-5 tile/section should be dark */ html.dark body.statsOverviewPage .statColumn { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark body.statsOverviewPage .statColumn::before { background: radial-gradient(600px 220px at 85% 15%, rgba(110, 168, 255, 0.16), transparent 60%), radial-gradient(560px 260px at 15% 95%, rgba(110, 168, 255, 0.10), transparent 60%) !important; opacity: 0.32 !important; } html.dark body.statsOverviewPage .playerRow { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark body.statsOverviewPage .buttonContainer button { background: rgba(15, 23, 42, 0.92) !important; color: rgba(230, 237, 247, 0.95) !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25) !important; } html.dark body.statsOverviewPage .buttonContainer button:hover { background: rgba(110, 168, 255, 0.18) !important; border-color: rgba(110, 168, 255, 0.28) !important; color: rgba(230, 237, 247, 0.98) !important; box-shadow: 0 12px 26px rgba(110, 168, 255, 0.10) !important; } /* PLAYER DETAILED: remove alternating row colours + ensure tab text is white */ html.dark body.statsDetailedPage .statsNavOption { color: rgba(230, 237, 247, 0.85) !important; } html.dark body.statsDetailedPage .statsNavOption.active { color: #6ea8ff !important; } html.dark #statsTable tr:nth-child(even), html.dark #scoringBreakdownTable tr:nth-child(even), html.dark #assistingBreakdownTable tr:nth-child(even) { background-color: transparent !important; } html.dark #statsTable tr, html.dark #scoringBreakdownTable tr, html.dark #assistingBreakdownTable tr { background: rgba(255, 255, 255, 0.03) !important; } html.dark #statsTable tr:hover, html.dark #scoringBreakdownTable tr:hover, html.dark #assistingBreakdownTable tr:hover { background: rgba(110, 168, 255, 0.10) !important; } html.dark #statsTable td, html.dark #statsTable th, html.dark #scoringBreakdownTable td, html.dark #scoringBreakdownTable th, html.dark #assistingBreakdownTable td, html.dark #assistingBreakdownTable th { border-color: rgba(255, 255, 255, 0.12) !important; } /* Player detailed tables (modernized styles) */ html.dark #statsTable, html.dark #scoringBreakdownTable, html.dark #assistingBreakdownTable { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35) !important; } /* Keep headers readable in dark mode (while preserving per-column colour coding) */ html.dark #statsTable th, html.dark #scoringBreakdownTable th, html.dark #assistingBreakdownTable th { color: rgba(255, 255, 255, 0.98) !important; } html.dark body.statsDetailedPage { /* Override the light-mode table tokens defined in statsPlayer.css */ --stats-table-border: rgba(255, 255, 255, 0.10); --stats-table-row-hover: rgba(110, 168, 255, 0.14); --stats-table-row-even: rgba(255, 255, 255, 0.03); --stats-table-text: rgba(230, 237, 247, 0.96); --stats-table-muted: rgba(230, 237, 247, 0.72); } html.dark #statsTable td, html.dark #scoringBreakdownTable td, html.dark #assistingBreakdownTable td { color: #e6edf7 !important; } /* TEAM DETAILED: make non-title chart text white. Chart.js renders on canvas (not CSS), so we also darken surrounding UI. The JS should set chart tick/legend colours; this CSS is a fallback for any HTML text. */ html.dark body.statsDetailedPage .teamStatBox, html.dark body.statsDetailedPage .statContainer { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; color: #e6edf7; } html.dark body.statsDetailedPage .teamStatBox p, html.dark body.statsDetailedPage .gdTable, html.dark body.statsDetailedPage .ppgTable { color: #e6edf7 !important; } html.dark body.statsDetailedPage .gdTable tr:not(:first-child), html.dark body.statsDetailedPage .ppgTable tr:not(:first-child) { background-color: rgba(255, 255, 255, 0.04) !important; } html.dark body.statsDetailedPage .gdTable tr:not(:last-child), html.dark body.statsDetailedPage .ppgTable tr:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; } /* TEAM DETAILED: remove the top-left white glow/sheeen on tiles in dark mode */ html.dark body.statsDetailedPage .teamStatBox::before { /* remove the bright top-left radial */ background: radial-gradient(600px 220px at 85% 15%, rgba(110, 168, 255, 0.16), transparent 60%), radial-gradient(560px 260px at 15% 95%, rgba(110, 168, 255, 0.10), transparent 60%) !important; opacity: 0.35 !important; } /* Darken the detailed stats top button bar */ html.dark body.statsDetailedPage .statsButtonsSection { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark body.statsDetailedPage .statsButtonsSection button { background: rgba(255, 255, 255, 0.06) !important; color: rgba(230, 237, 247, 0.92) !important; border-color: rgba(255, 255, 255, 0.14) !important; } html.dark body.statsDetailedPage .statsButtonsSection button:hover { background: rgba(110, 168, 255, 0.12) !important; } html.dark body.statsDetailedPage .statsButtonsSection button.active { background: linear-gradient(135deg, rgba(110, 168, 255, 0.95), rgba(62, 123, 216, 0.92) 55%, rgba(65, 195, 184, 0.80)) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 12px 26px rgba(110, 168, 255, 0.18) !important; } /* HOMEPAGE: make each match row darker in dark mode */ html.dark body.homePage a.matchRow { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark body.homePage a.matchRow::before { background: radial-gradient(700px 240px at 50% 0%, rgba(110, 168, 255, 0.14), transparent 60%), radial-gradient(520px 260px at 20% 110%, rgba(65, 195, 184, 0.08), transparent 60%) !important; opacity: 0.25 !important; } html.dark body.homePage a.matchRow:hover { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(110, 168, 255, 0.28) !important; } /* MATCH: goal info popout bottom half dark (body part / assist type / goal category) */ html.dark .goalInfoModal { background: rgba(15, 23, 42, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.10); } html.dark .goalInfoGrid { background: rgba(15, 23, 42, 0.96) !important; } html.dark .goalInfoCard { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: none !important; } html.dark .goalInfoCardLabel { color: rgba(230, 237, 247, 0.72) !important; } html.dark .goalInfoCardValue { color: rgba(230, 237, 247, 0.95) !important; } /* PLAYER PROFILE: ensure tabs + table/charts containers are dark (dark mode only) */ html.dark body.playerProfilePage .selectionRow { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark body.playerProfilePage .selectionRow::after { background: rgba(255, 255, 255, 0.10) !important; } html.dark body.playerProfilePage .selectionOption { color: rgba(230, 237, 247, 0.85) !important; } html.dark body.playerProfilePage .selectionOption:hover:not(.active) { background-color: rgba(110, 168, 255, 0.12) !important; color: rgba(230, 237, 247, 0.95) !important; } html.dark body.playerProfilePage .fourthRow { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; } /* Match-stats table-like block on player page */ html.dark body.playerProfilePage .recentResults { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; } html.dark body.playerProfilePage .matchHeader { border-bottom-color: rgba(255, 255, 255, 0.10) !important; } html.dark body.playerProfilePage .headerItem, html.dark body.playerProfilePage .matchItem { color: rgba(230, 237, 247, 0.92) !important; } /* Charts on player page */ html.dark body.playerProfilePage .chartBox { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.10) !important; box-shadow: none !important; color: rgba(230, 237, 247, 0.92) !important; } html.dark body.playerProfilePage .chartBox h3, html.dark body.playerProfilePage .chartBox p { color: rgba(230, 237, 247, 0.92) !important; } /* Nav tweaks for dark mode */ html.dark .topNav { background: linear-gradient(135deg, rgba(20, 35, 70, 0.88), rgba(10, 18, 36, 0.50)); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); } html.dark .topNav a { color: rgba(230, 237, 247, 0.92); } html.dark .topNav a:hover { background-color: rgba(255, 255, 255, 0.10); } html.dark .topNav a.active { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } /* Make common "white" blocks in older CSS dark-friendly */ html.dark .overviewTable .teamName { background-color: rgba(255, 255, 255, 0.06); } /* Tables: soften light gray borders */ html.dark table td, html.dark table th { border-color: rgba(255, 255, 255, 0.10) !important; } /* Links */ html.dark a { color: inherit; } /* Focus ring for accessibility */ html.dark :focus-visible { outline: 2px solid rgba(110, 168, 255, 0.55); outline-offset: 2px; } /* ========================= FANTASY PAGE (dark mode) ========================= */ /* Tab headings: white when inactive; active stays blue */ html.dark .fantasyTextNavSection { border-bottom-color: rgba(255, 255, 255, 0.12) !important; } html.dark .fantasyNavOption { color: rgba(230, 237, 247, 0.92) !important; } html.dark .fantasyNavOption.active { color: #6ea8ff !important; } /* My Team: dark surfaces + white text (but keep position indicators as-is) */ html.dark .contentSection[data-section="team"] .teamHeader { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #e6edf7 !important; } html.dark .contentSection[data-section="team"] .teamMeta, html.dark .contentSection[data-section="team"] .teamMeta span, html.dark .contentSection[data-section="team"] .teamName { color: #e6edf7 !important; } html.dark .contentSection[data-section="team"] .selectedPanel, html.dark .contentSection[data-section="team"] .availablePanel { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #e6edf7 !important; } html.dark .contentSection[data-section="team"] .selectedPanel h3, html.dark .contentSection[data-section="team"] .availablePanel h3, html.dark .contentSection[data-section="team"] .playerName { color: #e6edf7 !important; } html.dark .contentSection[data-section="team"] .playerCard { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #e6edf7 !important; } html.dark .contentSection[data-section="team"] #playerSearch { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #e6edf7 !important; } html.dark .contentSection[data-section="team"] #playerSearch::placeholder { color: rgba(230, 237, 247, 0.60) !important; } /* Preserve position indicator text color (requested) */ html.dark .contentSection[data-section="team"] .posBadge, html.dark .contentSection[data-section="team"] .pill em { color: inherit !important; } /* Pills/buttons: dark-friendly */ html.dark .contentSection[data-section="team"] .pill { border-color: rgba(255, 255, 255, 0.14) !important; } html.dark .contentSection[data-section="team"] .removeBtn { border-color: rgba(255, 255, 255, 0.22) !important; color: rgba(230, 237, 247, 0.92) !important; } html.dark .contentSection[data-section="team"] .removeBtn:hover { background: rgba(110, 168, 255, 0.10) !important; border-color: rgba(110, 168, 255, 0.25) !important; } html.dark .contentSection[data-section="team"] .addBtn { border-color: rgba(110, 168, 255, 0.55) !important; color: rgba(110, 168, 255, 0.95) !important; } html.dark .contentSection[data-section="team"] .addBtn:hover { background: rgba(110, 168, 255, 0.12) !important; } html.dark .contentSection[data-section="team"] .primaryBtn { color: #0b1220 !important; } /* Rules tables: remove alternating row backgrounds; all rows dark with light text */ html.dark .contentSection[data-section="rules"] .rulesTable { color: #e6edf7 !important; } html.dark .contentSection[data-section="rules"] .rulesTable tbody tr:nth-child(even) { background-color: transparent !important; } html.dark .contentSection[data-section="rules"] .rulesTable tbody tr { background: rgba(255, 255, 255, 0.04) !important; } html.dark .contentSection[data-section="rules"] .rulesTable th, html.dark .contentSection[data-section="rules"] .rulesTable td { border-color: rgba(255, 255, 255, 0.14) !important; color: #e6edf7 !important; } html.dark .contentSection[data-section="rules"] h2, html.dark .contentSection[data-section="rules"] p, html.dark .contentSection[data-section="rules"] li { color: #e6edf7 !important; } /* Keep player text within 'Your Picks' pills black in dark mode */ html.dark .contentSection[data-section="team"] .selectedPanel .pill { color: #000 !important; } html.dark .contentSection[data-section="team"] .selectedPanel .pill em { color: #000 !important; } /* Available Players: position indicator text should be black (e.g. DEF) */ html.dark .contentSection[data-section="team"] .availablePanel .posBadge { color: #000 !important; }