/* ============================================================================ * 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)); } } /* ============================================================================ * 12. Systemic responsive-layout guards (network-wide) — 2026-07 visual audit * One shared fix for the wave-1/2 recurring layout bugs across ~24 sites: * (a) the page BODY must NEVER scroll horizontally; * (b) wide data tables scroll WITHIN their own wrapper so stat columns stay * reachable instead of being clipped off-screen; * (c) off-canvas nav drawers can't widen the document. * Lives in theme.css because it loads LAST and is present on every site, so * these rules win regardless of per-site CSS. Class-agnostic (uses :has()) so * it covers every per-site table-wrapper name without touching a generator. * ==========================================================================*/ /* 12a. HARD RULE — the document never scrolls sideways. `overflow-x: clip` clips the overflow WITHOUT establishing a scroll container, so (unlike `hidden`) it can't break the sticky topbar or sticky table headers and leaves the vertical axis untouched; `hidden` is the fallback for engines that don't support `clip`. This is what stops leaking off-canvas drawers (mma/esports) and over-wide tables from pushing the page sideways. */ html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } /* 12b. Class-agnostic horizontal scroll CONTAINER for data tables. Any block that DIRECTLY wraps a becomes a horizontal scroller — this covers every per-site wrapper name (.wrap .tbl-wrap .scan-tablewrap .boardwrap .lwrap …) AND back-fills a scroller on the sites that ship none (so a wide table scrolls inside its box instead of pushing the body sideways / being clipped). Sites that already wrap+scroll are unaffected (idempotent). */ :where(div, section, figure):has(> table) { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* 12c. THE core fix for the "squeezed table / mid-word wrap" bug (npb board "TE A M / PR OJ", kbo "eli te", f1/cricket hidden stat columns). Auto table layout SHRINKS columns to fit a narrow phone — crushing words mid-letter and hiding the numbers that ARE the page. On phones, force the table to at least its NATURAL content width so it scrolls inside 12b's container instead of crushing. `min-width:max-content` is deliberate: per-site CSS sets `width` (e.g. width:100%), and in the used-width cascade min-width WINS over width — so this overrides the squeeze WITHOUT an !important / specificity fight, and stays a no-op on tables narrower than the viewport (they keep width:100%). */ @media (max-width: 768px) { :where(div, section, figure):has(> table) > table { min-width: max-content; } } /* 12d. Keep the first (name / rank) column pinned while the stat columns scroll, on phones where the horizontal scroll actually happens. Opaque backgrounds so scrolled cells pass cleanly underneath. No-op on tables that fit (nothing to scroll), so it's safe to apply broadly. */ @media (max-width: 768px) { :where(div, section, figure):has(> table) > table > :where(thead, tbody) > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); } :where(div, section, figure):has(> table) > table > thead > tr > :first-child { z-index: 3; background: var(--panel-2); /* corner cell: above both sticky axes */ } } /* 12e. Off-canvas nav drawers (shared shell) never widen the document; their closed / off-screen state is clipped by 12a instead of scrolling the body. Selector list mirrors switcher.js DRAWER_SEL so every shell variant is covered. */ #hrk-mobile-drawer, #mobile-drawer, .navsheet, .navsheet-inner, .drawer, .mobile-menu, nav.hrk-nav-open { max-width: 100vw; box-sizing: border-box; }