/* ============================================================================ * ColesAlgo unified design system — theme.css (v1) * One refined visual language across all 17 sites. Loaded LAST in so it * wins source-order ties; token overrides use :root:root (specificity 0,2,0) * to beat each page's inline :root (0,1,0) regardless of order. * * Drives everything off the EXISTING token vocabulary every page already uses * (--bg, --panel, --border, --text, --muted, --pos, --neg) + each site's own * accent (--accent / --optic / --brand-*), so the sport color is preserved. * ==========================================================================*/ /* ---- 1. Refined token palette (premium dark, crisper elevation) ---------- */ :root:root { /* surfaces — deeper app bg, clearer card elevation */ --bg: #080a0e; --bg-2: #0d0f14; --panel: #14161d; --panel-2: #1b1e27; --panel-3: #242833; --surface: var(--panel); --surface-2: var(--panel-2); /* hairline borders read sharper on dark than flat greys */ --border: #232733; --border-2: #313644; --hairline: rgba(255,255,255,.06); /* text ramp — cleaner near-white, calmer muted steps */ --text: #f4f5f8; --text-2: #cbcfd9; --muted: #9aa0ad; --muted-2: #6f7682; /* sentiment — slightly richer, still soft on the eye */ --pos: #5fd2a0; --neg: #ff7d8c; --warn: #f5c66b; /* the site's sport accent — fall back through the names sites use */ --accent: var(--brand-gold, var(--optic, var(--feat, #F5C542))); --accent-ink: #0b0c10; /* text on top of an accent fill */ /* radii scale */ --r-xs: 7px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 26px; /* elevation */ --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 8px 24px -8px rgba(0,0,0,.55); --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.65); /* motion + focus */ --ease: cubic-bezier(.4, 0, .2, 1); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); } /* ---- 2. Base layer — typography, rendering, rhythm ----------------------- */ html { -webkit-text-size-adjust: 100%; } body { background: radial-gradient(1200px 620px at 50% -8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), var(--bg); color: var(--text); font-feature-settings: "cv05" 1, "ss01" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* heading hierarchy — tighter tracking, confident scale */ h1, h2, h3, .page-title { letter-spacing: -0.01em; color: var(--text); } .page-title { line-height: 1.02; } /* numbers in a data product should align */ .v, .stat .v, td.num, .num, .tabular, [class*="score"], [class*="edge"], [class*="odds"] { font-variant-numeric: tabular-nums; } a { transition: color .15s var(--ease); } a:hover { color: var(--accent); } /* ---- 3. Selection, scrollbars, focus ------------------------------------ */ ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); } * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--muted-2); } *::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); } /* ---- 4. Cards / panels -------------------------------------------------- */ .card, .panel, .tile, .box, .stat-card, .section-card { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #fff 1%), var(--panel)) ; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); } .card:hover, .tile:hover, .stat-card:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); box-shadow: var(--shadow-md); } /* a thin accent rule on top of hero/stat strips reads as "premium" */ .slate-hero, .hero, .stat-strip { border-radius: var(--r-md) !important; box-shadow: var(--shadow-sm); } /* ---- 5. Data tables ----------------------------------------------------- */ table { border-collapse: separate; border-spacing: 0; } thead th { position: sticky; top: 0; background: color-mix(in srgb, var(--panel-2) 86%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--muted); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; font-size: 10.5px; border-bottom: 1px solid var(--border-2); z-index: 2; } tbody tr { transition: background .12s var(--ease); } tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } tbody td { border-bottom: 1px solid var(--hairline); } /* ---- 6. Pills / chips / badges ------------------------------------------ */ .pill, .chip, .tag, .badge { border-radius: 999px; border: 1px solid var(--border-2); background: var(--panel-2); transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .pill:hover, .chip:hover { border-color: var(--accent); } .pill.active, .chip.active, .tab.active, .seg.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; } /* sentiment chips inherit the refined pos/neg */ .pos, .up, .good, [class*="over"] { color: var(--pos); } .neg, .down, .bad, [class*="under"] { color: var(--neg); } /* ---- 7. Buttons --------------------------------------------------------- */ button, .btn { border-radius: var(--r-sm); font-weight: 600; transition: transform .12s var(--ease), background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); } .btn:active, button:active { transform: translateY(1px); } .btn-primary, .btn.primary, button.primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); } .btn-primary:hover, .btn.primary:hover { filter: brightness(1.06); } .btn-ghost, .btn.secondary { background: transparent; border: 1px solid var(--border-2); color: var(--text-2); } .btn-ghost:hover { border-color: var(--accent); color: var(--text); } /* ---- 8. Top nav polish (works on .topbar / .bar / header) --------------- */ .topbar, header.bar, .nav-bar { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--hairline); } /* ---- 9. Inputs ---------------------------------------------------------- */ input, select, textarea { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--r-sm); color: var(--text); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; } /* ---- 10. Motion: respect reduced-motion --------------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---- 11. "Members only" subscribe banner clearance ---------------------- */ /* auth.js/pw_block.js mount a fixed bottom CTA (#ca-pw-cta, z-index 2147483000) for logged-out/unentitled visitors. Reserve matching space so it never occludes the footer, last table row or hero tiles. Scoped with :has() so entitled/paid users (no banner) get no empty gap. */ body:has(#ca-pw-cta) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 720px) { body:has(#ca-pw-cta) { padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px)); } }