/** * Decoded Sports theme tokens — edit colors/type here only. * Applied via . Dark is the default. */ :root, [data-theme="dark"] { --ds-bg: #12151a; --ds-ink: #e8eaed; --ds-muted: #9aa3ad; --ds-surface: #1c2128; --ds-surface-2: #252b33; --ds-surface-3: #2f3640; --ds-border: #3a424d; --ds-accent: #2bb673; --ds-accent-ink: #0a1a12; --ds-accent-soft: #143528; --ds-hover: #3d4a1f; --ds-hover-strong: #4d5c28; --ds-filter-active: #3a6d8c; --ds-rank-hot: #5c7cfa; --ds-rank-mid: #339af0; --ds-rank-warm: #ff8787; --ds-rank-cold: #ff6b6b; --ds-rank-good: #5c7cfa; --ds-rank-bad: #ff6b6b; /* Sequential heat: wide luminance steps so close vs blowout gaps read clearly. Dark mode: muted → bright (stronger margins pop on dark surfaces). */ --ds-heat-0: #1c3aa9; --ds-heat-1: #1864ab; --ds-heat-2: #495057; --ds-heat-3: #a61e4d; --ds-heat-4: #c92a2a; --ds-heat-good-lo: #1a3550; --ds-heat-good-mid: #1c7ed6; --ds-heat-good-hi: #74c0fc; --ds-heat-bad-lo: #4a2428; --ds-heat-bad-mid: #e03131; --ds-heat-bad-hi: #ffa8a8; --ds-heatmap-ink-on-light: #14181f; --ds-heatmap-ink-on-dark: #f4f6f8; --ds-form-w: #3dd68c; --ds-form-l: #f07178; --ds-form-t: #e0b040; --ds-badge-live-bg: #143528; --ds-badge-live-ink: #8fd4b0; --ds-badge-live-border: #2a5a42; --ds-badge-up-bg: #0d3a44; --ds-badge-up-ink: #7ed4e8; --ds-badge-up-border: #1a5a68; --ds-nav-bg: #0d0f12; --ds-nav-ink: #e8eaed; --ds-thead-bg: #0d0f12; --ds-thead-ink: #e8eaed; --ds-thead-sorted: #7eb6ff; --ds-hero-from: #1a2228; --ds-hero-to: #242018; --ds-success: #3dd68c; --ds-danger: #f07178; --ds-warning: #e0b040; --ds-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); --ds-font-display: "Oswald", "Segoe UI", system-ui, sans-serif; --ds-font-body: "Roboto", "Segoe UI", system-ui, sans-serif; --ds-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --ds-radius: 0.5rem; --ds-heatmap-ink: var(--ds-heatmap-ink-on-dark); color-scheme: dark; } [data-theme="light"] { --ds-bg: #f6f7f9; --ds-ink: #1a1d23; --ds-muted: #5c6570; --ds-surface: #ffffff; --ds-surface-2: #f1f3f5; --ds-surface-3: #e9ecef; --ds-border: #dde1e6; --ds-accent: #0b6e4f; --ds-accent-ink: #ffffff; --ds-accent-soft: #d8f3e7; --ds-hover: #ffe566; --ds-hover-strong: #ffd633; --ds-filter-active: #7eb8da; --ds-rank-hot: #3b5bdb; --ds-rank-mid: #74c0fc; --ds-rank-warm: #ffa8a8; --ds-rank-cold: #fa5252; --ds-rank-good: #3b5bdb; --ds-rank-bad: #e03131; /* Light mode: pale → deep (stronger margins read as darker ink). */ --ds-heat-0: #364fc7; --ds-heat-1: #4dabf7; --ds-heat-2: #ffe3e3; --ds-heat-3: #ff8787; --ds-heat-4: #fa5252; --ds-heat-good-lo: #e7f5ff; --ds-heat-good-mid: #74c0fc; --ds-heat-good-hi: #1b3a8c; --ds-heat-bad-lo: #fff5f5; --ds-heat-bad-mid: #ff8787; --ds-heat-bad-hi: #c92a2a; --ds-heatmap-ink-on-light: #14181f; --ds-heatmap-ink-on-dark: #f4f6f8; --ds-form-w: #198754; --ds-form-l: #dc3545; --ds-form-t: #b58100; --ds-badge-live-bg: #d1e7dd; --ds-badge-live-ink: #0f5132; --ds-badge-live-border: #a3cfbb; --ds-badge-up-bg: #cff4fc; --ds-badge-up-ink: #055160; --ds-badge-up-border: #9eeaf9; --ds-nav-bg: #212529; --ds-nav-ink: #f8f9fa; --ds-thead-bg: #212529; --ds-thead-ink: #ffffff; --ds-thead-sorted: #9ec5fe; --ds-hero-from: #e8eef2; --ds-hero-to: #f7f3ea; --ds-success: #198754; --ds-danger: #dc3545; --ds-warning: #ffc107; --ds-shadow: 0 1px 3px rgba(26, 29, 35, 0.08); --ds-heatmap-ink: var(--ds-heatmap-ink-on-light); color-scheme: light; } html { font-family: var(--ds-font-body); } body { background: var(--ds-bg); color: var(--ds-ink); } h1, h2, h3, h4, .navbar-brand, .ds-display { font-family: var(--ds-font-display); letter-spacing: 0.02em; } .hero-matchup { background: linear-gradient(135deg, var(--ds-hero-from), var(--ds-hero-to)); border-radius: var(--ds-radius); padding: 1.25rem 1.5rem; border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow); } .ds-surface { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); } .metric-group-toggle.active { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-accent-ink); } .btn-primary { --bs-btn-bg: var(--ds-accent); --bs-btn-border-color: var(--ds-accent); --bs-btn-hover-bg: color-mix(in srgb, var(--ds-accent) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--ds-accent) 85%, black); --bs-btn-active-bg: color-mix(in srgb, var(--ds-accent) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--ds-accent) 75%, black); } .navbar.ds-navbar { background-color: var(--ds-nav-bg) !important; } .navbar.ds-navbar .navbar-brand, .navbar.ds-navbar .nav-link { color: var(--ds-nav-ink); } .theme-toggle { border: 1px solid color-mix(in srgb, var(--ds-nav-ink) 35%, transparent); background: transparent; color: var(--ds-nav-ink); border-radius: 0.375rem; padding: 0.35rem 0.6rem; line-height: 1; touch-action: manipulation; } .theme-toggle:hover { background: color-mix(in srgb, var(--ds-nav-ink) 12%, transparent); } .card { --bs-card-bg: var(--ds-surface); --bs-card-border-color: var(--ds-border); --bs-card-color: var(--ds-ink); } .table { --bs-table-color: var(--ds-ink); --bs-table-bg: var(--ds-surface); --bs-table-border-color: var(--ds-border); --bs-table-striped-bg: var(--ds-surface-2); --bs-table-hover-bg: var(--ds-hover); } .accordion-item { --bs-accordion-bg: var(--ds-surface); --bs-accordion-border-color: var(--ds-border); --bs-accordion-btn-bg: var(--ds-surface); --bs-accordion-btn-color: var(--ds-ink); --bs-accordion-active-bg: var(--ds-surface-2); --bs-accordion-active-color: var(--ds-ink); --bs-accordion-btn-focus-border-color: var(--ds-accent); } .form-control, .form-select { background-color: var(--ds-surface); color: var(--ds-ink); border-color: var(--ds-border); } .form-control:focus, .form-select:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ds-accent) 25%, transparent); } .footer-border { border-color: var(--ds-border) !important; } .text-body-secondary, .text-muted { color: var(--ds-muted) !important; } .matchup-story { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: 0.9rem 1.1rem; box-shadow: var(--ds-shadow); margin-bottom: 1rem; } .matchup-story h2 { font-size: 1rem; margin-bottom: 0.4rem; } .matchup-story ul { margin: 0; padding-left: 1.1rem; } .matchup-story li { margin-bottom: 0.2rem; font-size: 0.9rem; color: var(--ds-muted); } .matchup-story .story-metric { font-family: var(--ds-font-display); font-weight: 600; color: var(--ds-ink); letter-spacing: 0.03em; } .matchup-story .story-rank { font-family: var(--ds-font-display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ds-thead-sorted); letter-spacing: 0.02em; } .matchup-story .story-vals { font-family: var(--ds-font-mono); font-size: 0.84em; color: var(--ds-muted); font-variant-numeric: tabular-nums; } .matchup-story .story-caveat { font-size: 0.8rem; color: var(--ds-muted); margin-top: 0.4rem; margin-bottom: 0; } .matchup-section-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ds-bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--ds-border); padding: 0.4rem 0; margin-bottom: 0.75rem; display: none; gap: 0.35rem; flex-wrap: wrap; } @media (max-width: 991.98px) { .matchup-section-nav { display: flex; } } .matchup-section-nav a { font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--ds-ink); padding: 0.35rem 0.65rem; border-radius: 0.375rem; border: 1px solid var(--ds-border); background: var(--ds-surface); touch-action: manipulation; } .matchup-section-nav a:hover { border-color: var(--ds-accent); color: var(--ds-accent); } .upcoming-cards { display: none; flex-direction: column; gap: 0.75rem; } .upcoming-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius); padding: 0.85rem 1rem; box-shadow: var(--ds-shadow); } .upcoming-card .card-head { margin-bottom: 0.5rem; } .upcoming-card .card-teams { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; } .upcoming-card .team-cell { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; } .upcoming-card .team-cell .team-main { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; } .upcoming-card .team-cell .rank-prefix { min-width: 2ch; text-align: right; } .upcoming-card .card-team-stats { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } .upcoming-card .card-meta { font-size: 0.8rem; color: var(--ds-muted); } .upcoming-card .card-links { display: flex; gap: 0.35rem; margin-top: 0.55rem; } @media (max-width: 991.98px) { .upcoming-table-wrap { display: none !important; } .upcoming-cards { display: flex; } } @media (min-width: 992px) { .upcoming-cards { display: none !important; } } /* Multiple-select (season picker) — library defaults are light-only */ .ms-parent.form-control { background-color: var(--ds-surface) !important; color: var(--ds-ink) !important; border-color: var(--ds-border) !important; } .ms-choice { background-color: var(--ds-surface) !important; color: var(--ds-ink) !important; border-color: var(--ds-border) !important; } .ms-choice > span { color: var(--ds-ink) !important; } .ms-choice > div.icon-caret { border-top-color: var(--ds-ink) !important; } .ms-drop { background-color: var(--ds-surface) !important; color: var(--ds-ink) !important; border-color: var(--ds-border) !important; } .ms-drop ul > li label { color: var(--ds-ink) !important; } .ms-drop input[type="checkbox"], .ms-drop input[type="radio"] { accent-color: var(--ds-accent); } .ms-search input { background-color: var(--ds-surface-2) !important; color: var(--ds-ink) !important; border-color: var(--ds-border) !important; } /* Dist slider readout + +/- symbols */ .dist-readout, .dist-op { color: var(--ds-ink) !important; }