/* ========================================================================== GoodluckSporting — DARK MODE ========================================================================== Light is the DEFAULT theme (this file does nothing until is set by the header toggle). Everything here is scoped under [data-theme="dark"], so deleting this file's reverts the site to light with zero risk. Strategy: the site's colors run on CSS variables (--bg, --panel, --text, …) defined in style.css :root. We override those variables for dark mode, which recolors ~90% of the site automatically. The rest are a handful of hardcoded #fff backgrounds in ticker.css / card frames, overridden explicitly below. ========================================================================== */ [data-theme="dark"] { /* Core surfaces — the whole page goes dark. */ --bg: #0d1117; /* page background (near-black, slight blue) */ --panel: #161b22; /* cards, panels, rows */ --line: #262d36; /* borders / dividers */ --text: #e6edf3; /* primary text (near-white) */ --muted: #9aa7b4; /* secondary text */ --muted-2: #6b7684; /* faintest text */ /* Brand greens stay — they read well on dark. Nudge the plain brand a touch brighter so it pops against the dark background. */ --brand: #26c26e; --brand-2: #2fd47e; --brand-dark: #0FA958; /* Shadows are near-invisible on dark; soften to subtle dark glows. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 10px rgba(0,0,0,0.45); --shadow-lift: 0 10px 24px rgba(0,0,0,0.55); } /* --- Base page + body (in case body sets its own gradient/bg) --- */ [data-theme="dark"] body { background: var(--bg); color: var(--text); } /* --- Hardcoded #fff backgrounds in ticker.css that variables don't cover --- */ /* Card/panel-type surfaces that were literal white. */ [data-theme="dark"] .rst-toggle-wrap, /* results season toggle wrap (L1157) */ [data-theme="dark"] .news-card-original, /* article card body (L1585 area) */ [data-theme="dark"] .gd-pill, /* game-detail sub-pills (L1967) */ [data-theme="dark"] .gd-standings, /* standings tab bg (L1979) */ [data-theme="dark"] .gd-tab-body { /* game-detail tab body (L1980) */ background: var(--panel); } /* The "GoodluckSporting Articles" rail heading was black-on-white by design; flip it to light-on-dark so it doesn't glare. */ [data-theme="dark"] .bn-original-head { color: var(--text) !important; background: var(--panel) !important; border-bottom-color: var(--line) !important; } /* --- Game-detail card frames (baseball-card-frame.css / tennis-card-frame.css style these; those files use light card backgrounds). Force the card surfaces dark by class, independent of which file defines them. --- */ [data-theme="dark"] .gd-view, [data-theme="dark"] .gd-view:not(.gd-tennis), [data-theme="dark"] .gd-tennis, [data-theme="dark"] .gd-scoreboard, [data-theme="dark"] .gd-tab-body, [data-theme="dark"] .gd-match-body, [data-theme="dark"] .gd-trail { background: var(--panel); color: var(--text); } /* Standings tables inside game detail + the main standings table: keep rows readable on dark (they lean on --panel/--line, but ensure text flips). */ [data-theme="dark"] .gd-st-table, [data-theme="dark"] .standings-table, [data-theme="dark"] .player-table, [data-theme="dark"] .stat-table { color: var(--text); } /* --- Feed rows + league blocks: these mostly use --panel/--line already, so they recolor automatically. The dark header bar (#1e2329) and dark league header strips are ALREADY dark, so they stay as-is and still look right. --- */ /* Inputs / any white form fields, if present. */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--panel); color: var(--text); border-color: var(--line); } /* Images with baked white backgrounds (team logos on transparent PNGs are fine; this just guards flag images from looking boxed). No-op if not needed. */ [data-theme="dark"] .league-flag-img { background: transparent; } /* Scrollbar tint on dark (WebKit). */ [data-theme="dark"] ::-webkit-scrollbar { background: var(--bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 6px; } /* ========================================================================== THEME TOGGLE BUTTON (lives in the header logo row) — styled for BOTH themes ========================================================================== */ .theme-toggle { margin-left: auto; /* push it to the right, before the hamburger */ margin-right: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.10); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease, transform .1s ease; flex: 0 0 auto; } .theme-toggle:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.45); transform: scale(1.06); } /* The header bar is dark in BOTH themes (#1e2329 / #050a17), so white icon + translucent-white styling works in light and dark alike. */ /* On desktop the logo row is one line; nav-toggle (hamburger) is hidden there, so the theme toggle sits neatly at the right of the logo row. */ @media (min-width: 861px) { .theme-toggle { margin-left: auto; } } /* ========================================================================== CONTRAST FIXES (round 2) — hardcoded light-mode colors that stayed dark-on-dark or bright-white in dark mode. Each targets a specific element seen unreadable in testing. ========================================================================== */ /* --- Sidebar "ALL LEAGUES" header: had a near-white gradient bg → invisible text. Give it a dark panel bg + light text. --- */ [data-theme="dark"] .sidebar-title { background: linear-gradient(180deg, #1b222c, #161b22) !important; color: var(--text) !important; border-bottom-color: var(--line); } /* --- Legal pages (privacy / terms / contact): headings + intro used hardcoded dark colors → dark-on-dark. --- */ [data-theme="dark"] .legal-wrap h1 { color: var(--text) !important; } [data-theme="dark"] .legal-wrap h2 { color: var(--text) !important; } [data-theme="dark"] .legal-intro { color: #b8c2cd !important; } [data-theme="dark"] .legal-wrap p, [data-theme="dark"] .legal-wrap li { color: var(--text); } /* --- Game detail scoreboard: team names + score numbers were near-black. --- */ [data-theme="dark"] .gd-team-name { color: var(--text) !important; } [data-theme="dark"] .gd-score-num { color: var(--text) !important; } /* --- Tennis detail: player names were near-black → invisible. --- */ [data-theme="dark"] .gd-tn-name { color: var(--text) !important; } /* --- Team-stats header row + standings: keep readable on dark. --- */ [data-theme="dark"] .stat-group-row td { color: #c3ccd6; background: rgba(255,255,255,.05); } [data-theme="dark"] .player-table .p-name-col { background: var(--panel); } [data-theme="dark"] .gd-st-name, [data-theme="dark"] .gd-st-num, [data-theme="dark"] .standings-table td { color: var(--text); } /* --- Article rail + news-page GLS article headlines were near-black. --- */ [data-theme="dark"] .bn-original .bn-headline { color: var(--text) !important; } [data-theme="dark"] .bn-headline { color: var(--text); } /* --- Sport-ball league icons in the sidebar: at full opacity they read as heavy/overwhelming on the dark background. Dim them so the league NAMES lead and the balls are a subtle accent. Light mode is unchanged. --- */ [data-theme="dark"] .sidebar-list .league-icon-prefix, [data-theme="dark"] .sidebar-list .league-flag-img, [data-theme="dark"] .sidebar-subgroup .league-icon-prefix { opacity: .55; } /* --- Sidebar sub-group country headings (United States / Spain / …): ensure they stay legible on dark. --- */ [data-theme="dark"] .sidebar-subgroup-title { color: var(--muted); } /* --- Any residual card/panel that inherited a hardcoded white in game detail or standings tabs. --- */ [data-theme="dark"] .gd-match-body, [data-theme="dark"] .gd-scoreboard, [data-theme="dark"] .stat-table, [data-theme="dark"] .standings-table { background: var(--panel); color: var(--text); } /* --- Article pages (article.html + server-rendered /a/ pages): body wrapper + text used hardcoded dark colors. Flip text to light so the article is readable once the page background goes dark. --- */ [data-theme="dark"] .article-wrap { color: var(--text); } [data-theme="dark"] .article-headline { color: var(--text) !important; } [data-theme="dark"] .article-team-chip { color: var(--text); } [data-theme="dark"] .article-body p { color: #d7dee6 !important; } [data-theme="dark"] .article-teams { background: rgba(255,255,255,.05); } [data-theme="dark"] .article-badge { background: rgba(255,255,255,.08); } /* --- Archive page (/archive server-rendered): NYT-style masthead + cards use light backgrounds/black text. Flip for dark. (Applies once archive.js emits the dark-mode link + data-theme.) --- */ [data-theme="dark"] .arch-card { background: var(--panel); border-color: var(--line); } [data-theme="dark"] .arch-card-headline { color: var(--text); } [data-theme="dark"] .archive-wrap h1, [data-theme="dark"] .arch-masthead, [data-theme="dark"] .arch-sport { color: var(--text); } [data-theme="dark"] .arch-card-snippet { color: var(--muted); } /* ========================================================================== CONTRAST FIXES (round 3) — SYSTEMATIC. The game-detail card frames + ticker cards + schedule rows use hardcoded near-black text (#14181f / #1a1f27 / #1f2733) everywhere, so EVERY sport's detail page had dark-on-dark text. This block flips the whole family at once so all sports/levels are covered. ========================================================================== */ /* --- Game-detail scoreboard + tabs + breadcrumb: all hardcoded #14181f. --- */ [data-theme="dark"] .gd-team-name, [data-theme="dark"] .gd-score-num, [data-theme="dark"] .gd-tab, [data-theme="dark"] .gd-tab:hover, [data-theme="dark"] .gd-st-name, [data-theme="dark"] .gd-crumb-label, [data-theme="dark"] .gd-crumb-current { color: var(--text) !important; } /* --- Tennis detail: summary head, stats head/rows, set winners — all #14181f. These are the "MATCH SUMMARY" wording + serve-stats you saw still dark. --- */ [data-theme="dark"] .gd-tn-summary-head, [data-theme="dark"] .gd-tn-stats-head, [data-theme="dark"] .gd-tn-stats-title, [data-theme="dark"] .gd-tn-stat-a, [data-theme="dark"] .gd-tn-stat-b, [data-theme="dark"] .gd-tn-set-win, [data-theme="dark"] .gd-tn-name { color: var(--text) !important; } /* --- Top ticker score cards (home page scroll strip): team abbreviations inherited a dark color → unreadable on the dark card. Force light. --- */ [data-theme="dark"] .tkc-abbrs, [data-theme="dark"] .tkc-abbrs > span, [data-theme="dark"] .tkc-val { color: var(--text); } [data-theme="dark"] .tkc-abbrs .tkc-lose { color: var(--muted); } /* --- Schedule / results rows (Fixtures + Results tabs, all sports): #1f2733. --- */ [data-theme="dark"] .sch-date-day, [data-theme="dark"] .sch-opp-name, [data-theme="dark"] .sch-result { color: var(--text); } /* --- Catch-all safety net: any remaining game-detail body text defaults to the light text color so nothing stays dark-on-dark. Specific rules above still win where needed. --- */ [data-theme="dark"] .gd-view, [data-theme="dark"] .gd-view:not(.gd-tennis), [data-theme="dark"] .gd-tennis { color: var(--text); } /* ========================================================================== MOBILE + DROPDOWN FIXES (dark mode) ========================================================================== */ /* Dropdown mega-menu flags were hard to see when the menu opened in dark mode. The flags are flag IMAGES (flagcdn) or emoji; give the flag slot a faint light backing so small flags with dark edges (e.g. some crests) stay visible against the dark menu surface, and ensure emoji flags aren't dimmed. */ [data-theme="dark"] #site-header .mega-flag, [data-theme="dark"] #site-header .mega-flag .league-flag-img { opacity: 1; filter: none; } [data-theme="dark"] #site-header .mega-flag .league-flag-img { background: rgba(255,255,255,.12); border-radius: 2px; } /* --- Stat/player table header bars (the "Wings" / team-name bar above the team-stats + player-stats tables): hardcoded #F7F9FA white → stayed white in dark mode. Flip to dark panel. Covers every sport's box score. --- */ [data-theme="dark"] .player-table-head, [data-theme="dark"] .stat-table-head { background: rgba(255,255,255,.05); color: var(--text); } [data-theme="dark"] .stat-table-head span:nth-child(2) { color: var(--muted); } /* Sticky player-name column had a hardcoded panel bg — keep it dark so it doesn't flash light while scrolling the stats table sideways. */ [data-theme="dark"] .player-table .p-name-col { background: var(--panel); } /* --- Feed row hover: base style is .match-row:hover{background:#F7F9FA} (light grey) which whites out the row in dark mode, washing out team names. Replace with a subtle light overlay so the row highlights but text stays readable. --- */ [data-theme="dark"] .match-row:hover { background: rgba(255,255,255,.05) !important; } [data-theme="dark"] .match-row.clickable:hover { background: linear-gradient(90deg, rgba(38,194,110,.10), transparent 60%) !important; } /* ========================================================================== CONTRAST FIXES (round 4) — from mobile screenshots. All dark-mode only. ========================================================================== */ /* (1) STANDINGS header row (#/TEAM/W/L/PCT/GB/PTS): hardcoded white gradient thead bg (#FBFCFD/#F3F6F8) → white bar in dark. Flip to dark. */ [data-theme="dark"] .standings-table thead tr { background: rgba(255,255,255,.05) !important; } [data-theme="dark"] .standings-table th { color: var(--muted); } /* (2) STATS leaders rank badges (1-10): green gradient pill washes out in dark. User wants plain WHITE numbers, no green pill, in dark mode. */ [data-theme="dark"] .leader-rank { background: none !important; box-shadow: none !important; color: var(--text) !important; } /* (3) HOME FEED red live text: game time / quarter / status use --live (#F0324B) which is too bright red in dark. Make them white. The small left live-bar accent (box-shadow inset) stays as the live indicator. */ [data-theme="dark"] .m-live, [data-theme="dark"] .m-time, [data-theme="dark"] .m-status, [data-theme="dark"] .m-down-distance { color: var(--text) !important; } /* keep the pulsing blip red so "live" still reads at a glance */ [data-theme="dark"] .m-blip { background: var(--live); } /* (3b) TV network label (MLB.TV, ESPN, etc.) on live rows was red (#c0392b) → too bright. Make it muted-light. */ [data-theme="dark"] .match-row.is-live .m-tv, [data-theme="dark"] .m-tv { color: var(--muted) !important; } /* (6) Live status in game detail + tennis "Set N" red text → lighten. */ [data-theme="dark"] .gd-status-live { color: #ff6b7d; } /* (5) FILTER TABS (ALL/LIVE/FINISHED/SCHEDULED/PREDICTIONS): user wants plain GREEN TEXT on the active tab, not the washed green FILL. Remove the fill, use a subtle outline + bright green text so it still reads as "active". */ [data-theme="dark"] .status-filter-tab { color: var(--text); } [data-theme="dark"] .status-filter-tab.active { background: transparent !important; border-color: var(--brand) !important; color: var(--brand) !important; } [data-theme="dark"] .status-filter-tab.active .sf-count { color: var(--brand) !important; } /* Date "TODAY" pill: same treatment — the green gradient fill looked washed in dark; use green text + green outline instead of a filled pill. */ [data-theme="dark"] .date-pill.selected { background: transparent !important; border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: none !important; } /* (7) DARK TEAM LOGOS (Yankees navy, Blue Jays, etc.): dark-colored logos disappear against the dark background. Give team logos a subtle light circular backing in dark mode so they stand out — the way ESPN/LiveScore do. Light, small padding + rounded so it reads as a clean chip, not a box. */ [data-theme="dark"] .m-logo:not(.m-flag):not(.m-player-photo), [data-theme="dark"] .roster-team-logo, [data-theme="dark"] .pp-team-logo { background: rgba(255,255,255,.90); border-radius: 50%; padding: 1px; box-sizing: border-box; } /* (8) GAME-DETAIL STANDINGS row lines: .gd-st-table td had a hardcoded near-white border (#f0f2f4) that GLARES in dark mode AND breaks between cells (the "not connected" lines). The main standings table (correct look) borders the whole ROW with var(--line). Match that: drop the per-cell border, put one continuous subtle-grey line on the row so it spans end-to-end. */ [data-theme="dark"] .gd-st-table td { border-bottom: 0 !important; } [data-theme="dark"] .gd-st-table tr { border-bottom: 1px solid var(--line); } [data-theme="dark"] .gd-st-table tr:last-child { border-bottom: none; } /* (9) ARTICLE / LEAGUE BADGE PILLS (news page "NFL · PREVIEW", archive card "WNBA" pills): these use a transparent-green pill FILL (.news-tag, .news-tag-preview, .bn-league-tag) that reads as washed transparent-green on dark. User wants plain GREEN TEXT, no fill. Drop the fill; brighten the text. */ [data-theme="dark"] .news-tag, [data-theme="dark"] .news-card-original .news-tag-preview, [data-theme="dark"] .bn-league-tag, [data-theme="dark"] .bn-kind-preview { background: transparent !important; color: var(--brand) !important; padding-left: 0; padding-right: 0; } /* Recap keeps its red identity but also loses the fill (text only). */ [data-theme="dark"] .news-card-original .news-tag-recap, [data-theme="dark"] .bn-kind-recap { background: transparent !important; color: #ff6b7d !important; padding-left: 0; padding-right: 0; } /* (10) "Match Details ›" link → WHITE text in dark mode (user wants it white, not green, on the feed rows + anywhere the row action shows). */ [data-theme="dark"] .m-details, [data-theme="dark"] .match-row.clickable .m-details, [data-theme="dark"] .m-details-text, [data-theme="dark"] .m-details-arrow { color: var(--text) !important; } [data-theme="dark"] .match-row.clickable:hover .m-details { color: var(--text) !important; background: rgba(255,255,255,.06) !important; } /* (11) Date "TODAY" pill when it's today but NOT the selected date: .date-pill.is-today:not(.selected) had a transparent-green FILL (rgba(15,169,88,.06)) → the washed green "at the top" on league pages. Drop the fill; keep green text + green outline. */ [data-theme="dark"] .date-pill.is-today:not(.selected) { background: transparent !important; border-color: var(--brand) !important; color: var(--brand) !important; }