/* ========================================================================== BetCoach — design tokens ========================================================================== THE single source of truth for colour, corner, elevation, spacing, type and motion across every template. How it works ------------ Every page loads this file first, then its own CSS. Page CSS must only ever REFERENCE tokens (var(--bc-color-…)) and never redefine them, so retheming the whole app means editing this file and nothing else. Before this file existed the same token carried different values in different pages — --bc-bg alone had four (#0f172a, #07111f, #0a1120, #111820) and --bc-subtext had five. Those are now reconciled here. Naming ------ --bc-color-* colour --bc-corner-* border-radius --bc-elevation-* box-shadow --bc-spacing-* spacing scale --bc-type-* typography --bc-motion-* duration + easing --bc-layout-* structural dimensions These namespaces deliberately do NOT collide with the legacy --bc-bg / --bc-radius-* / --bc-space-* names. A reference that was missed during the migration resolves to nothing and the declaration is dropped, which is visible — rather than silently inheriting a wrong value. Adding a token: add it here, never in a page. ========================================================================== */ :root { color-scheme: dark; /* ── Canvas ───────────────────────────────────────────────────────── The page itself. -deep is the darker base used behind dashboards, -raised is a panel lifted off the canvas. */ --bc-color-canvas: #0a1120; --bc-color-canvas-deep: #07111f; --bc-color-canvas-deepest: #050b14; /* marketing + landing base */ --bc-color-canvas-raised: #0f1830; /* ── Surfaces ─────────────────────────────────────────────────────── Cards and panels. The translucent -subtle/-hover fills sit on top of any surface, so they work at every depth. */ --bc-color-surface: #141f3a; --bc-color-surface-raised: #202b36; --bc-color-surface-overlay: #293643; /* The dashboard/workstation panel sits a step below surface-raised. */ --bc-color-surface-panel: #19222c; --bc-color-surface-subtle: rgba(255, 255, 255, 0.03); --bc-color-surface-hover: rgba(255, 255, 255, 0.06); --bc-color-surface-selected: #20374c; /* Glass panels used by the landing, error and admin-shell pages. The alpha is the point — the page gradient shows through them. */ --bc-color-surface-glass: rgba(10, 21, 38, 0.88); --bc-color-surface-glass-strong: rgba(12, 23, 40, 0.94); --bc-color-sidebar: #131b24; /* ── Lines ──────────────────────────────────────────────────────────── */ --bc-color-line: rgba(255, 255, 255, 0.08); --bc-color-line-soft: rgba(255, 255, 255, 0.06); --bc-color-fill-faint: rgba(255, 255, 255, 0.02); --bc-color-fill-soft: rgba(255, 255, 255, 0.05); --bc-color-line-medium: rgba(255, 255, 255, 0.12); --bc-color-line-loud: rgba(255, 255, 255, 0.46); --bc-color-brand-tint: rgba(126, 240, 178, 0.12); --bc-color-brand-tint-line: rgba(126, 240, 178, 0.24); --bc-color-accent-tint: rgba(111, 200, 255, 0.10); --bc-color-brand-text: #c9ffe1; --bc-color-focus-ring: #8fd4ff; --bc-color-brand-grad-from: #86f6bc; --bc-color-brand-grad-to: #3dd97c; --bc-elevation-soft: 0 24px 64px rgba(0, 0, 0, 0.35); --bc-color-line-strong: rgba(255, 255, 255, 0.16); /* Accent-tinted hairlines. The blue is deliberate — these outline live market data, and a neutral line loses that signal. */ --bc-color-line-accent: rgba(56, 189, 248, 0.38); --bc-color-line-accent-soft: rgba(120, 197, 255, 0.16); /* ── Text ─────────────────────────────────────────────────────────── Four steps. Anything below -muted fails contrast on our canvas. */ --bc-color-text: #f2f5fb; --bc-color-text-strong: #f4f8ff; --bc-color-text-secondary: #a9b4cc; --bc-color-text-tertiary: #9aaac0; /* #707d9b (inherited from home.html) measured 3.96:1 on the base surface and 2.99:1 on the overlay — below AA everywhere but the canvas, and it pushed four pages' footers under the threshold during the migration. #95a1ba clears 4.5:1 on every surface in this file. */ --bc-color-text-muted: #95a1ba; --bc-color-text-on-accent: #04110b; /* ── Brand ────────────────────────────────────────────────────────── Blue is the interactive accent; green is the brand/positive mark. */ --bc-color-accent: #6fc8ff; --bc-color-accent-strong: #0ea5e9; --bc-color-brand: #7ef0b2; --bc-color-brand-strong: #22c55e; --bc-color-highlight: #b794ff; /* ── Status ───────────────────────────────────────────────────────── Semantic only. If it isn't communicating state, use a brand colour. */ --bc-color-positive: #34c775; --bc-color-negative: #ef4444; --bc-color-warning: #f59e0b; --bc-color-caution: #f8c562; --bc-color-info: #0ea5e9; --bc-color-positive-bg: rgba(34, 197, 94, 0.15); --bc-color-positive-line: rgba(34, 197, 94, 0.35); --bc-color-positive-text: #a7f3d0; --bc-color-negative-bg: rgba(239, 68, 68, 0.15); --bc-color-negative-line: rgba(239, 68, 68, 0.35); --bc-color-negative-text: #fecaca; --bc-color-warning-bg: rgba(245, 158, 11, 0.15); --bc-color-warning-line: rgba(245, 158, 11, 0.35); --bc-color-warning-text: #fde68a; --bc-color-info-bg: rgba(14, 165, 233, 0.15); --bc-color-info-line: rgba(14, 165, 233, 0.35); --bc-color-info-text: #93c5fd; /* ── Data / chart ─────────────────────────────────────────────────── Team and series colours. Home/away must stay distinguishable for the most common colour-vision deficiencies, so they differ in lightness as well as hue. */ --bc-color-home: #187cff; --bc-color-away: #ff57b9; --bc-color-cyan: #20d6e8; --bc-color-orange: #f2a654; --bc-color-gold: #ffb020; /* ── Tiers (scanner / alert severity) ───────────────────────────── */ --bc-color-tier-critical: var(--bc-color-negative); --bc-color-tier-hot: var(--bc-color-warning); --bc-color-tier-watch: var(--bc-color-info); --bc-color-tier-normal: var(--bc-color-text-tertiary); /* ── Extended palette ─────────────────────────────────────────── Colours the product already used as literals. Each keeps its exact previous value, so adding them changed nothing on screen — they are here so a theme can reach them. The four greens, four reds and four ambers are real: the app genuinely uses that many. Consolidating them is a design decision, deliberately not made here. */ --bc-color-white: #ffffff; /* pure white, used for max-emphasis text and icons */ --bc-color-black: #000000; /* pure black, shadows and overlays */ --bc-color-accent-soft: #7dd3fc; /* light sky accent */ --bc-color-accent-bright: #38bdf8; /* brighter sky accent */ --bc-color-accent-hover: #a5e4ff; /* link hover on content pages */ --bc-color-accent-text: #c8ecff; /* text on an accent-tinted pill */ --bc-color-accent-soft-bg: rgba(125, 211, 252, 0.08); --bc-color-accent-soft-line: rgba(125, 211, 252, 0.16); --bc-color-blue-strong: #0d6efd; /* saturated blue */ --bc-color-cyan-bright: #18dcff; /* bright cyan */ --bc-color-grey-200: #e5e7eb; --bc-color-grey-250: #e9ecef; --bc-color-grey-300: #dee2e6; --bc-color-grey-350: #b0b8e0; --bc-color-grey-400: #8890b5; --bc-color-grey-500: #64748b; --bc-color-grey-600: #6c757d; --bc-color-grey-700: #334155; --bc-color-surface-indigo: #2a3161; /* indigo table/chart surfaces */ --bc-color-surface-indigo-deep: #1e2756; --bc-color-surface-indigo-deeper: #1a2151; --bc-color-positive-soft: #bbf7d0; --bc-color-positive-bright: #4ade80; --bc-color-positive-deep: #16a34a; --bc-color-positive-deeper: #198754; --bc-color-positive-legacy: #4caf50; /* older green still in use */ --bc-color-negative-soft: #fca5a5; --bc-color-negative-bright: #f87171; --bc-color-negative-deep: #dc2626; --bc-color-negative-legacy: #dc3545; /* Bootstrap danger, still in use */ --bc-color-warning-bright: #eab308; --bc-color-warning-soft: #facc15; --bc-color-warning-deep: #ff9800; --bc-color-warning-legacy: #ffc107; /* Bootstrap warning, still in use */ /* ── Literals lifted out of page CSS during the light-theme pass ──── Every value here is the EXACT literal it replaced, so activating Midnight repaints nothing. They exist because a light theme has to be able to move them: they were almost all `color:` declarations, i.e. light text that becomes invisible on a white canvas. */ --bc-color-text-dim: #94a3b8; /* muted body/label text (111x) */ --bc-color-text-bright: #edf4ff; /* high-emphasis text (78x) */ --bc-color-positive-light: #86efac; /* light green text/edge (40x) */ --bc-color-text-icy: #d9eeff; --bc-color-text-pale: #e8edf8; --bc-color-accent-icy: #7ddcff; --bc-color-accent-mid: #66b3ff; --bc-color-canvas-abyss: #081424; /* live-odds-history base */ --bc-color-canvas-void: #070b14; /* signals base */ --bc-color-surface-ink: #0b0f1a; /* dark panel (13x) */ --bc-color-surface-ink-raised:#0b1324; /* odds-history hero stop */ /* ── Foreground channels, for rgba() text at arbitrary alpha ─────── Page CSS writes light text as rgba(255,255,255,.7) and friends at nine different alpha levels. One token per level would be absurd, so these carry only the RGB channels and each call site keeps its own alpha: color: rgba(var(--bc-color-fg-rgb), 0.7) In the dark themes these are the same whites they replaced, so nothing moves. A light theme flips them once and every alpha level follows. */ --bc-color-fg-rgb: 255, 255, 255; --bc-color-text-bright-rgb: 237, 244, 255; --bc-color-text-dim-rgb: 148, 163, 184; /* ── Corners ────────────────────────────────────────────────────── */ --bc-corner-xs: 8px; --bc-corner-sm: 12px; --bc-corner-md: 16px; --bc-corner-lg: 20px; --bc-corner-xl: 24px; --bc-corner-pill: 999px; /* ── Elevation ──────────────────────────────────────────────────── */ --bc-elevation-sm: 0 2px 8px rgba(0, 0, 0, 0.15); --bc-elevation-md: 0 8px 24px rgba(0, 0, 0, 0.32); --bc-elevation-lg: 0 12px 30px rgba(0, 0, 0, 0.35); --bc-elevation-xl: 0 24px 64px rgba(0, 0, 0, 0.40); --bc-elevation-overlay: 0 30px 80px rgba(0, 0, 0, 0.45); --bc-elevation-accent: 0 12px 50px rgba(14, 165, 233, 0.15); /* ── Spacing (4pt grid) ─────────────────────────────────────────── */ --bc-spacing-1: 4px; --bc-spacing-2: 8px; --bc-spacing-3: 12px; --bc-spacing-4: 16px; --bc-spacing-5: 20px; --bc-spacing-6: 24px; --bc-spacing-8: 32px; --bc-spacing-10: 40px; --bc-spacing-12: 48px; /* ── Type ───────────────────────────────────────────────────────── */ /* The platform UI font is the one thing every visitor renders identically; a stack that depends on locally-installed fonts (the app used to name Inter without ever loading it) is an inconsistency, not a decision. The emoji families are last and deliberate — product labels use emoji, and without them Windows and Linux drop to a monochrome glyph. */ --bc-type-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --bc-type-size-xs: 11px; --bc-type-size-sm: 12px; --bc-type-size-base: 14px; --bc-type-size-lg: 16px; --bc-type-size-xl: 18px; --bc-type-size-2xl: 24px; --bc-type-size-3xl: 28px; /* ── Motion ─────────────────────────────────────────────────────── */ --bc-motion-fast: 120ms cubic-bezier(0.22, 1, 0.36, 1); --bc-motion-base: 200ms cubic-bezier(0.22, 1, 0.36, 1); --bc-motion-emphasis: 260ms cubic-bezier(0.34, 1.2, 0.4, 1); --bc-motion-duration-fast: 0.2s; --bc-motion-duration-base: 0.3s; --bc-motion-duration-slow: 0.5s; /* ── Layout ─────────────────────────────────────────────────────── */ --bc-layout-sidebar: 220px; --bc-layout-sidebar-collapsed: 64px; --bc-layout-gutter: 20px; --bc-layout-shell: 100%; /* Referenced by mobile filter chrome but never previously defined, so those var() calls resolved to nothing. */ --bc-layout-filter-chrome-bottom: 0px; } /* ========================================================================== Base ========================================================================== color-scheme: dark above tells the browser to render its own surfaces — the canvas, form controls, scrollbars — dark. Several pages (table, results, comparison, prediction, …) never declared a background of their own and relied on the default white canvas, so on its own that switch would leave them with a dark canvas and unmanaged text. Declaring the canvas and the default text colour here keeps every page coherent: one dark theme, inherited, with no page left half-flipped. Pages that set their own background still win. ========================================================================== */ html { background-color: var(--bc-color-canvas); color: var(--bc-color-text); } /* ========================================================================== Accessibility ========================================================================== Defined once here so every page inherits them. Individual pages should not need their own copies. ========================================================================== */ @media (prefers-contrast: more) { :root { --bc-color-text-secondary: #dbe4f5; --bc-color-text-tertiary: #c6d2df; --bc-color-text-muted: #b3bed6; --bc-color-line: rgba(255, 255, 255, 0.28); --bc-color-line-soft: rgba(255, 255, 255, 0.22); --bc-color-line-strong: rgba(255, 255, 255, 0.46); --bc-color-surface-subtle: rgba(255, 255, 255, 0.07); } } @media (prefers-reduced-motion: reduce) { /* The app ships 13 infinite looping animations (pulses, glows, chevron slides). Neutralising the motion tokens alone does not stop them, because they are declared with literal `animation:` shorthands — so halt every animation and transition here instead. 1ms rather than `none`: animations still fire their animationend event, so JavaScript that waits on one does not hang. */ *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } :root { --bc-motion-fast: 1ms linear; --bc-motion-base: 1ms linear; --bc-motion-emphasis: 1ms linear; --bc-motion-duration-fast: 1ms; --bc-motion-duration-base: 1ms; --bc-motion-duration-slow: 1ms; } } /* ========================================================================== Touch targets ========================================================================== Bootstrap sizes its controls for a mouse: .form-control and .btn land between 35px and 42px, which is under the 44px a finger needs. This raises only the floor, only on touch pointers, so dense desktop UI is untouched. min-height rather than height, because min-height wins over an explicit height without having to out-specify every component rule that sets one. */ @media (pointer: coarse) { .btn, .nav-link, .navbar-brand, input.form-control, select.form-control, textarea.form-control, select.custom-select, .form-select, select, textarea, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { min-height: 44px; } }