/* ───────────────────────────────────────────────────────────── Fantasy Stat Tracker — theme tokens Three palettes (broadcast, turf, varsity) × light/dark. Light/dark is driven by Bootstrap's data-bs-theme on . Palette is driven by data-fst-theme on . ───────────────────────────────────────────────────────────── */ /* ── Shared tokens (apply to all palettes) ─────────────────── */ :root { --fst-radius: 0.5rem; --fst-radius-sm: 0.35rem; --fst-shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08); --fst-shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06); --fst-transition: 150ms ease; } /* ═══════════════════════════ BROADCAST (navy + amber) ═══════════════════════════ */ [data-fst-theme="broadcast"] { --fst-primary: #0f2a4a; --fst-primary-hover: #163a66; --fst-accent: #f5a623; --fst-accent-hover: #e1950f; --fst-surface: #ffffff; --fst-surface-alt: #f4f6fa; --fst-text: #15202b; --fst-text-muted: #5a6773; --fst-border: #d9dee5; --fst-row-selected: #dce8f7; --fst-nav-bg: #0f2a4a; --fst-nav-text: #f2f4f8; --fst-nav-text-muted: #b9c4d4; } [data-fst-theme="broadcast"][data-bs-theme="dark"] { --fst-primary: #4a82c9; --fst-primary-hover: #6ea0dc; --fst-accent: #ffc04d; --fst-accent-hover: #ffcf73; --fst-surface: #111826; --fst-surface-alt: #18212f; --fst-text: #e6ecf3; --fst-text-muted: #95a2b3; --fst-border: #2a3445; --fst-row-selected: #1e3352; --fst-nav-bg: #0a1a30; --fst-nav-text: #e6ecf3; --fst-nav-text-muted: #95a2b3; } /* ═══════════════════════════ TURF (emerald + charcoal) ══════════════════════════ */ [data-fst-theme="turf"] { --fst-primary: #0e7c5a; --fst-primary-hover: #0f966c; --fst-accent: #f0a500; --fst-accent-hover: #d69200; --fst-surface: #ffffff; --fst-surface-alt: #f3f6f4; --fst-text: #1f2937; --fst-text-muted: #596273; --fst-border: #d6ddd8; --fst-row-selected: #d3ecdf; --fst-nav-bg: #0e7c5a; --fst-nav-text: #f0fdf4; --fst-nav-text-muted: #c9e4d6; } [data-fst-theme="turf"][data-bs-theme="dark"] { --fst-primary: #28b37d; --fst-primary-hover: #46c995; --fst-accent: #ffc34d; --fst-accent-hover: #ffd073; --fst-surface: #121a1f; --fst-surface-alt: #1a2229; --fst-text: #e6f2ec; --fst-text-muted: #9aaaa2; --fst-border: #2a3239; --fst-row-selected: #153d2d; --fst-nav-bg: #0b1317; --fst-nav-text: #e6f2ec; --fst-nav-text-muted: #9aaaa2; } /* ═══════════════════════════ CLASSIC (vanilla Bootstrap) ═══════════════════════════ */ [data-fst-theme="classic"] { --fst-primary: #0d6efd; --fst-primary-hover: #0b5ed7; --fst-accent: #6c757d; --fst-accent-hover: #5c636a; --fst-surface: #ffffff; --fst-surface-alt: #f8f9fa; --fst-text: #212529; --fst-text-muted: #6c757d; --fst-border: #dee2e6; --fst-row-selected: #cce5ff; --fst-nav-bg: #ffffff; --fst-nav-text: #212529; --fst-nav-text-muted: #6c757d; } [data-fst-theme="classic"][data-bs-theme="dark"] { --fst-primary: #6ea8fe; --fst-primary-hover: #8bbafe; --fst-accent: #adb5bd; --fst-accent-hover: #ced4da; --fst-surface: #212529; --fst-surface-alt: #2b3035; --fst-text: #dee2e6; --fst-text-muted: #adb5bd; --fst-border: #495057; --fst-row-selected: #2c3e50; --fst-nav-bg: #212529; --fst-nav-text: #dee2e6; --fst-nav-text-muted: #adb5bd; } /* ═══════════════════════════ VARSITY (maroon + gold) ═══════════════════════════ */ [data-fst-theme="varsity"] { --fst-primary: #7a1f2b; --fst-primary-hover: #942636; --fst-accent: #d4a23a; --fst-accent-hover: #b98a27; --fst-surface: #ffffff; --fst-surface-alt: #f7f3ef; --fst-text: #221614; --fst-text-muted: #6b5d59; --fst-border: #e4dad4; --fst-row-selected: #f1dcdf; --fst-nav-bg: #7a1f2b; --fst-nav-text: #fbf5ea; --fst-nav-text-muted: #dcc8c9; } [data-fst-theme="varsity"][data-bs-theme="dark"] { --fst-primary: #c45664; --fst-primary-hover: #d4727f; --fst-accent: #e9be5c; --fst-accent-hover: #f0cb7e; --fst-surface: #1a1112; --fst-surface-alt: #221617; --fst-text: #f2e6e4; --fst-text-muted: #a89693; --fst-border: #33242a; --fst-row-selected: #4a1e27; --fst-nav-bg: #12090b; --fst-nav-text: #f2e6e4; --fst-nav-text-muted: #a89693; } /* ═══════════════════════════ MIDNIGHT (deep purple + cyan) ══════════════════════ */ [data-fst-theme="midnight"] { --fst-primary: #2d1b69; --fst-primary-hover: #3b2485; --fst-accent: #22d3ee; --fst-accent-hover: #0ea5b7; --fst-surface: #ffffff; --fst-surface-alt: #f5f3fb; --fst-text: #1e1b2e; --fst-text-muted: #605a75; --fst-border: #ddd8ea; --fst-row-selected: #e2dcf5; --fst-nav-bg: #2d1b69; --fst-nav-text: #f5f3ff; --fst-nav-text-muted: #c6bee3; } [data-fst-theme="midnight"][data-bs-theme="dark"] { --fst-primary: #8b7fd4; --fst-primary-hover: #a599e2; --fst-accent: #5ee7f5; --fst-accent-hover: #86eef8; --fst-surface: #141024; --fst-surface-alt: #1c1631; --fst-text: #ecebf5; --fst-text-muted: #9e98b8; --fst-border: #2d2644; --fst-row-selected: #2a2152; --fst-nav-bg: #0d0919; --fst-nav-text: #ecebf5; --fst-nav-text-muted: #9e98b8; } /* ═══════════════════════════ SUNSET (warm orange + magenta) ══════════════════════ */ [data-fst-theme="sunset"] { --fst-primary: #c2410c; --fst-primary-hover: #db5014; --fst-accent: #e11d74; --fst-accent-hover: #c91866; --fst-surface: #ffffff; --fst-surface-alt: #fdf6f1; --fst-text: #2c1810; --fst-text-muted: #7a5c4a; --fst-border: #f1dcc9; --fst-row-selected: #ffe5d0; --fst-nav-bg: #c2410c; --fst-nav-text: #fff7ed; --fst-nav-text-muted: #fdd7b8; } [data-fst-theme="sunset"][data-bs-theme="dark"] { --fst-primary: #fb923c; --fst-primary-hover: #fdba74; --fst-accent: #f472b6; --fst-accent-hover: #f9a8d4; --fst-surface: #1a1210; --fst-surface-alt: #241814; --fst-text: #fce8d6; --fst-text-muted: #b39885; --fst-border: #3a261e; --fst-row-selected: #4a2818; --fst-nav-bg: #0f0907; --fst-nav-text: #fce8d6; --fst-nav-text-muted: #b39885; } /* ═══════════════════════════ OCEAN (teal + coral) ══════════════════════════════ */ [data-fst-theme="ocean"] { --fst-primary: #0b6e8a; --fst-primary-hover: #0e85a5; --fst-accent: #ff6b6b; --fst-accent-hover: #ff5252; --fst-surface: #ffffff; --fst-surface-alt: #f0f7f9; --fst-text: #0f2730; --fst-text-muted: #557079; --fst-border: #cfe1e6; --fst-row-selected: #d1ecf3; --fst-nav-bg: #0b6e8a; --fst-nav-text: #ecfeff; --fst-nav-text-muted: #b8dde5; } [data-fst-theme="ocean"][data-bs-theme="dark"] { --fst-primary: #38bdf8; --fst-primary-hover: #7dd3fc; --fst-accent: #ff8787; --fst-accent-hover: #ffa3a3; --fst-surface: #0f1b22; --fst-surface-alt: #16232b; --fst-text: #e0f2f7; --fst-text-muted: #8fa8b2; --fst-border: #233541; --fst-row-selected: #0d3a4a; --fst-nav-bg: #07131a; --fst-nav-text: #e0f2f7; --fst-nav-text-muted: #8fa8b2; } /* ═══════════════════════════ SLATE (cool gray + electric blue) ═════════════════ */ [data-fst-theme="slate"] { --fst-primary: #475569; --fst-primary-hover: #5a6a80; --fst-accent: #3b82f6; --fst-accent-hover: #2563eb; --fst-surface: #ffffff; --fst-surface-alt: #f4f6f8; --fst-text: #1e293b; --fst-text-muted: #64748b; --fst-border: #d9dfe6; --fst-row-selected: #dbe5f2; --fst-nav-bg: #334155; --fst-nav-text: #f1f5f9; --fst-nav-text-muted: #b6bfcb; } [data-fst-theme="slate"][data-bs-theme="dark"] { --fst-primary: #94a3b8; --fst-primary-hover: #b3becd; --fst-accent: #60a5fa; --fst-accent-hover: #93c5fd; --fst-surface: #151a22; --fst-surface-alt: #1c232d; --fst-text: #e2e8f0; --fst-text-muted: #94a3b8; --fst-border: #2a3340; --fst-row-selected: #24314a; --fst-nav-bg: #0c1018; --fst-nav-text: #e2e8f0; --fst-nav-text-muted: #94a3b8; } /* ═══════════════════════════ FOREST (olive + rust) ════════════════════════════ */ [data-fst-theme="forest"] { --fst-primary: #3f5c3a; --fst-primary-hover: #4f7248; --fst-accent: #b45309; --fst-accent-hover: #d97706; --fst-surface: #ffffff; --fst-surface-alt: #f5f6f1; --fst-text: #1f2a1b; --fst-text-muted: #5e6b58; --fst-border: #d8dcce; --fst-row-selected: #dce4d3; --fst-nav-bg: #3f5c3a; --fst-nav-text: #f2f5ec; --fst-nav-text-muted: #c1cbb6; } [data-fst-theme="forest"][data-bs-theme="dark"] { --fst-primary: #86a87c; --fst-primary-hover: #9ebd94; --fst-accent: #f59e0b; --fst-accent-hover: #fbbf24; --fst-surface: #161a14; --fst-surface-alt: #1e231b; --fst-text: #e8eadf; --fst-text-muted: #9aa392; --fst-border: #2a3127; --fst-row-selected: #2d3927; --fst-nav-bg: #0e110c; --fst-nav-text: #e8eadf; --fst-nav-text-muted: #9aa392; } /* ═══════════════════════════ MONO (minimal grayscale) ═════════════════════════ */ [data-fst-theme="mono"] { --fst-primary: #1f1f1f; --fst-primary-hover: #333333; --fst-accent: #d4a017; --fst-accent-hover: #b8891a; --fst-surface: #ffffff; --fst-surface-alt: #f5f5f5; --fst-text: #0f0f0f; --fst-text-muted: #666666; --fst-border: #dddddd; --fst-row-selected: #e5e5e5; --fst-nav-bg: #1f1f1f; --fst-nav-text: #fafafa; --fst-nav-text-muted: #b3b3b3; } [data-fst-theme="mono"][data-bs-theme="dark"] { --fst-primary: #e5e5e5; --fst-primary-hover: #f5f5f5; --fst-accent: #fbbf24; --fst-accent-hover: #fcd34d; --fst-surface: #121212; --fst-surface-alt: #1c1c1c; --fst-text: #ededed; --fst-text-muted: #a3a3a3; --fst-border: #2a2a2a; --fst-row-selected: #2e2e2e; --fst-nav-bg: #000000; --fst-nav-text: #ededed; --fst-nav-text-muted: #a3a3a3; } /* ── Bootstrap variable overrides so standard bs-* classes track the palette ── */ :root[data-fst-theme] { --bs-primary: var(--fst-primary); --bs-primary-rgb: 15, 42, 74; /* approximate — overridden below per-palette via .btn-primary */ --bs-link-color: var(--fst-primary); --bs-link-hover-color: var(--fst-primary-hover); --bs-body-color: var(--fst-text); --bs-body-bg: var(--fst-surface); --bs-border-color: var(--fst-border); } /* Body + base text use the tokens */ body { background-color: var(--fst-surface); color: var(--fst-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Primary button/link tracking */ .btn-primary { background-color: var(--fst-primary); border-color: var(--fst-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--fst-primary-hover) !important; border-color: var(--fst-primary-hover) !important; } .btn-outline-primary { color: var(--fst-primary); border-color: var(--fst-primary); } .btn-outline-primary:hover { background-color: var(--fst-primary); border-color: var(--fst-primary); } a { color: var(--fst-primary); } a:hover { color: var(--fst-primary-hover); } /* Accent utility */ .text-accent { color: var(--fst-accent) !important; } .bg-accent { background-color: var(--fst-accent) !important; color: #111 !important; } .btn-accent { background-color: var(--fst-accent); border-color: var(--fst-accent); color: #111; } .btn-accent:hover { background-color: var(--fst-accent-hover); border-color: var(--fst-accent-hover); color: #111; } /* Branded navbar */ .navbar.fst-navbar { background-color: var(--fst-nav-bg) !important; border-bottom: 1px solid var(--fst-border); box-shadow: var(--fst-shadow-sm); } .navbar.fst-navbar .navbar-brand, .navbar.fst-navbar .nav-link, .navbar.fst-navbar .navbar-text { color: var(--fst-nav-text) !important; } .navbar.fst-navbar .nav-link:hover { color: var(--fst-accent) !important; } .navbar.fst-navbar .navbar-toggler { border-color: var(--fst-nav-text-muted); } .navbar.fst-navbar .navbar-toggler-icon { filter: invert(1) opacity(0.85); } .navbar.fst-navbar .dropdown-menu { background-color: var(--fst-surface); border: 1px solid var(--fst-border); } .navbar.fst-navbar .dropdown-item { color: var(--fst-text); } .navbar.fst-navbar .dropdown-item:hover { background-color: var(--fst-surface-alt); } /* Logout / misc buttons inside the navbar track the nav text color so they stay visible on both light (Classic) and dark (Broadcast/Turf/Varsity) navbars */ .navbar.fst-navbar .btn-outline-light, .navbar.fst-navbar .btn-outline-secondary { color: var(--fst-nav-text); border-color: var(--fst-nav-text-muted); } .navbar.fst-navbar .btn-outline-light:hover, .navbar.fst-navbar .btn-outline-secondary:hover { background-color: var(--fst-nav-text); color: var(--fst-nav-bg); border-color: var(--fst-nav-text); } /* Cards pick up surface + border + shadow automatically */ .card { background-color: var(--fst-surface); border-color: var(--fst-border); box-shadow: var(--fst-shadow-sm); border-radius: var(--fst-radius); } /* Tables blend with theme */ .table { --bs-table-bg: transparent; --bs-table-color: var(--fst-text); --bs-table-striped-bg: var(--fst-surface-alt); --bs-table-striped-color: var(--fst-text); --bs-table-hover-bg: var(--fst-surface-alt); --bs-table-hover-color: var(--fst-text); color: var(--fst-text); } .table > :not(caption) > * > * { border-color: var(--fst-border); } .table-hover > tbody > tr:hover > * { background-color: var(--fst-surface-alt); color: var(--fst-text); } /* Footer */ .footer { background-color: var(--fst-surface-alt); border-top: 1px solid var(--fst-border) !important; color: var(--fst-text-muted); } /* Theme switcher in navbar */ .fst-theme-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; border: 1px solid rgba(0,0,0,.15); vertical-align: -2px; } /* ═══════════════════════════ Sticky table headers ═══════════════════════════ Roster tables can get very tall — keep the column headers visible while the user scrolls the page. Uses window scroll, not a scroll container. */ .table > thead > tr > th { position: sticky; top: 0; background-color: var(--fst-surface); z-index: 5; box-shadow: inset 0 -1px 0 var(--fst-border); } @media print { .table > thead > tr > th { position: static; box-shadow: none; } } /* Bootstrap's `.table-light` / `.table-dark` thead variants pin --bs-table-color and --bs-table-bg to fixed light/dark pairings. That collides with the sticky- header rule above, which forces background to var(--fst-surface) and lets the text color stay whatever Bootstrap pinned — producing dark-on-dark (table-light in dark mode) or light-on-light (table-dark in light mode). Both variants are used across the codebase (baseball roster, prospect projections, hockey/football player profile tables, etc.), so override both at the table-CSS-variable layer to track the active theme. The existing thead markup picks up the correct contrast in both modes without touching any view. */ .table > thead.table-light > tr > th, .table > thead.table-light, .table > thead.table-dark > tr > th, .table > thead.table-dark { --bs-table-color: var(--fst-text); --bs-table-bg: var(--fst-surface); color: var(--fst-text); background-color: var(--fst-surface); } /* ═══════════════════════════ Numeric stat cells ═════════════════════════════ Right-align + tabular-nums so stat columns read cleanly. Applied per cell via or globally to a table via . */ .stat-num, .stat-table td:not(:first-child):not(.no-num), .stat-table th:not(:first-child):not(.no-num) { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Apply tabular-nums to every Bootstrap .table — only affects digit glyphs, so it's harmless on name/text columns and keeps numeric columns aligned without per-table class wiring. */ .table { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ═══════════════════════════ Skeleton loading rows ══════════════════════════ */ .skeleton-row td { padding: 0.75rem 0.5rem !important; } .skeleton-bar { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--fst-surface-alt) 0%, var(--fst-border) 50%, var(--fst-surface-alt) 100%); background-size: 200% 100%; animation: fst-shimmer 1.4s ease-in-out infinite; } @keyframes fst-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ═══════════════════════════ Toast container ════════════════════════════════ */ .fst-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 1090; max-width: 360px; } /* Smooth transitions when theme flips */ body, .card, .navbar, .footer, .table { transition: background-color var(--fst-transition), color var(--fst-transition), border-color var(--fst-transition); } /* ═══════════════════════════ Per-sport accent tints ═══════════════════════════ Layered on top of the active palette. Used on: - Team cards on the dashboard: colored top stripe - Roster pages: thin accent bar under the page title (body[data-sport]) Keeps palette theming intact; only adds a small sport cue. */ [data-sport-accent="baseball"] { --fst-sport: #d50032; } [data-sport-accent="basketball"] { --fst-sport: #f88d2a; } [data-sport-accent="football"] { --fst-sport: #1b7d4a; } [data-sport-accent="hockey"] { --fst-sport: #4a90e2; } body[data-sport="baseball"] { --fst-sport: #d50032; } body[data-sport="basketball"] { --fst-sport: #f88d2a; } body[data-sport="football"] { --fst-sport: #1b7d4a; } body[data-sport="hockey"] { --fst-sport: #4a90e2; } /* Card top stripe (used on dashboard team cards) */ .card.team-card { position: relative; overflow: hidden; } .card.team-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--fst-sport, var(--fst-primary)); } /* Roster page accent bar under the h2 title */ body[data-sport] main > h2:first-of-type { border-bottom: 3px solid var(--fst-sport); padding-bottom: .35rem; margin-bottom: 1rem; }