/* ============================================================ Tier-1 theme — served override, loaded LAST in . Pass 1: tabular numerals + brand-gold retune. Pass 2: surface elevation — body (darkest) > panel #121212 > card #1a1b1f. Pass 3: APCA text legibility (off-white body, lifted dim tokens) + 16px inputs. Dark theme only (light theme keeps its [data-theme=light] values). ============================================================ */ /* 1) Tabular numerals — odds, prices and stats line up in a true column */ body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* 3a) Off-white body text — kills pure-#fff OLED halation on phones (mockup #e9eaee) */ html:not([data-theme="light"]) body { color: #e9eaee; } /* 3b) 16px form inputs — stop iOS Safari zoom-on-focus (Tier-1 #6) */ html:not([data-theme="light"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), html:not([data-theme="light"]) select, html:not([data-theme="light"]) textarea { font-size: 16px; } /* 2+3) Dark-theme token retune (higher specificity than :root, loaded last) */ html:not([data-theme="light"]) { --color-gold: #e7b937; /* the one warm brand punctuation */ --gold: #e7b937; --color-gold-lt: #f0cf6f; --gold-lt: #f0cf6f; --color-silver: #b4bcc8; /* dimmest text — APCA lift (Pass 1) */ /* Pass 2 — surface elevation for token-driven pages */ --bg-input: #121212; /* was #0B0D11 — panel tier */ --bg-card: #1a1b1f; /* was #0E1014 — card tier (lightest) */ --bg-card-hover: #232429; /* was #14171C — card hover, one step up */ /* Pass 3 — APCA text legibility lift (dark theme) */ --color-muted: #9ba1ac; /* APCA-measured Lc~50 on card (was #52525b, then #8b919c=Lc41 under floor) */ --bz-dim: #a7adba; /* APCA-measured Lc~56 on card (was #6b7079, then #9aa0ad=Lc49) */ } /* ============================================================ Pass 5 — 44px tap targets on betting/action controls (Tier-1 #6). Scoped to real action controls (place-bet logos, expand, share, claim-offer, carousel arrows, deeper-links) — NOT footer/nav text links, whose 44px would bloat the layout. Measured via live DOM. ============================================================ */ .pl-sq, .card-xpand, .oc-arrow, .tip-share, .oc-cta, .sec-deeper-a { min-height: 44px; } .oc-arrow { min-width: 44px; } /* beat the bundle's more-specific .card .card-xpand width; pl-sq left 28x44 (passes WCAG AA, avoids reflowing the 96-logo odds grid) */ .card-xpand.card-xpand.card-xpand { min-width: 44px; } /* ============================================================ Pass 6 — Tier-1 seal. (a) "#ad" on every TEXT affiliate/operator link (skips logo/image links via :not(:has(img)) so bookmaker logos aren't broken). (b) explicit, unbundled subscribe-consent microcopy styling. ============================================================ */ a[rel~="sponsored"]:not(:has(img))::after, a[rel~="nofollow"][href*="track"]:not(:has(img))::after { content: " #ad"; font: 700 0.66em/1 var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .04em; opacity: .6; margin-left: .35em; vertical-align: baseline; } .sub-consent { margin: 8px auto 0; max-width: 30rem; text-align: center; font-size: 11px; line-height: 1.45; color: var(--color-muted, #9ba1ac); } .sub-consent a { color: var(--color-silver, #b4bcc8); text-decoration: underline; } /* one explicit "#ad" marker on the bookmaker odds/logo row (per-block, not per-logo) */ .pl-row::before { content: "#ad"; font: 700 0.62em/1 var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .04em; opacity: .5; align-self: center; margin-right: .45em; flex: 0 0 auto; } /* ============================================================ TIER 3 (batch 1) — scan-first data tables (Live Intelligence). Scoped to the numeric stat tables only (NOT fixtures/schedules). Numbers right-align into a true column; entity name stays left; 1px dividers instead of zebra; sticky opaque header for long tables. Explicit class list (not :where) so it wins over the bundle rules. ============================================================ */ .standings-table tbody td, .beteb-stat-table tbody td, .beteb-team-stat-table tbody td, .beteb-ha-table tbody td, .course-result-table tbody td, .morale-table tbody td, .runners-table tbody td, .lc-table tbody td, .f1ds-table tbody td, .standings-table thead th, .beteb-stat-table thead th, .beteb-team-stat-table thead th, .beteb-ha-table thead th, .course-result-table thead th, .morale-table thead th, .runners-table thead th, .lc-table thead th, .f1ds-table thead th { text-align: right; } .standings-table tbody td:first-child, .beteb-stat-table tbody td:first-child, .beteb-team-stat-table tbody td:first-child, .beteb-ha-table tbody td:first-child, .course-result-table tbody td:first-child, .morale-table tbody td:first-child, .runners-table tbody td:first-child, .lc-table tbody td:first-child, .f1ds-table tbody td:first-child, .standings-table thead th:first-child, .beteb-stat-table thead th:first-child, .beteb-team-stat-table thead th:first-child, .beteb-ha-table thead th:first-child, .course-result-table thead th:first-child, .morale-table thead th:first-child, .runners-table thead th:first-child, .lc-table thead th:first-child, .f1ds-table thead th:first-child { text-align: left; } .standings-table tbody td, .beteb-stat-table tbody td, .beteb-team-stat-table tbody td, .beteb-ha-table tbody td, .course-result-table tbody td, .morale-table tbody td, .runners-table tbody td, .lc-table tbody td, .f1ds-table tbody td { border-top: 1px solid var(--rule, rgba(255,255,255,.07)); } .standings-table thead th, .beteb-stat-table thead th, .beteb-team-stat-table thead th, .beteb-ha-table thead th, .course-result-table thead th, .morale-table thead th, .runners-table thead th, .lc-table thead th, .f1ds-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-card, #1a1b1f); } /* Tier 3 fix — number cells are generated with a stronger left-align; force the scan columns */ .standings-table tbody td, .beteb-stat-table tbody td, .beteb-team-stat-table tbody td, .beteb-ha-table tbody td, .course-result-table tbody td, .morale-table tbody td, .runners-table tbody td, .lc-table tbody td, .f1ds-table tbody td, .standings-table thead th, .beteb-stat-table thead th, .beteb-team-stat-table thead th, .beteb-ha-table thead th, .course-result-table thead th, .morale-table thead th, .runners-table thead th, .lc-table thead th, .f1ds-table thead th { text-align: right !important; } .standings-table tbody td:first-child, .beteb-stat-table tbody td:first-child, .beteb-team-stat-table tbody td:first-child, .beteb-ha-table tbody td:first-child, .course-result-table tbody td:first-child, .morale-table tbody td:first-child, .runners-table tbody td:first-child, .lc-table tbody td:first-child, .f1ds-table tbody td:first-child, .standings-table thead th:first-child, .beteb-stat-table thead th:first-child, .beteb-team-stat-table thead th:first-child, .beteb-ha-table thead th:first-child, .course-result-table thead th:first-child, .morale-table thead th:first-child, .runners-table thead th:first-child, .lc-table thead th:first-child, .f1ds-table thead th:first-child { text-align: left !important; } /* Tier 3 batch 2 — sortable stat-table headers (progressive enhancement) */ .bz-sortable { cursor: pointer; -webkit-user-select: none; user-select: none; } .bz-sortable:hover { color: var(--color-gold, #e7b937); } .bz-sortable.bz-asc::after { content: " \25B2"; font-size: .62em; opacity: .85; } .bz-sortable.bz-desc::after { content: " \25BC"; font-size: .62em; opacity: .85; } /* Tier 3 batch 3 — persisted density toggle (compact reduces stat-table row height) */ html.bz-density-compact .standings-table td, html.bz-density-compact .standings-table th, html.bz-density-compact .beteb-stat-table td, html.bz-density-compact .beteb-stat-table th, html.bz-density-compact .beteb-team-stat-table td, html.bz-density-compact .beteb-team-stat-table th, html.bz-density-compact .beteb-ha-table td, html.bz-density-compact .beteb-ha-table th, html.bz-density-compact .course-result-table td, html.bz-density-compact .course-result-table th, html.bz-density-compact .morale-table td, html.bz-density-compact .morale-table th, html.bz-density-compact .runners-table td, html.bz-density-compact .runners-table th, html.bz-density-compact .lc-table td, html.bz-density-compact .lc-table th, html.bz-density-compact .f1ds-table td, html.bz-density-compact .f1ds-table th { padding-top: 3px !important; padding-bottom: 3px !important; } .bz-density-toggle { position: absolute; top: 8px; right: 10px; z-index: 3; font: 700 10px/1 var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted, #9ba1ac); background: var(--bg-card, #1a1b1f); border: 1px solid var(--rule, rgba(255,255,255,.14)); border-radius: 6px; padding: 5px 9px; cursor: pointer; } .bz-density-toggle:hover { color: var(--color-gold, #e7b937); border-color: var(--color-gold, #e7b937); } /* ============================================================ TIER 3/4 — frozen first column on mobile (entity name stays put while the numeric columns scroll). Scoped to <=768px where tables overflow. ============================================================ */ @media (max-width: 768px) { .standings-table tbody td:first-child, .beteb-stat-table tbody td:first-child, .beteb-team-stat-table tbody td:first-child, .beteb-ha-table tbody td:first-child, .course-result-table tbody td:first-child, .morale-table tbody td:first-child, .runners-table tbody td:first-child, .lc-table tbody td:first-child, .f1ds-table tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-card, #1a1b1f); } .standings-table thead th:first-child, .beteb-stat-table thead th:first-child, .beteb-team-stat-table thead th:first-child, .beteb-ha-table thead th:first-child, .course-result-table thead th:first-child, .morale-table thead th:first-child, .runners-table thead th:first-child, .lc-table thead th:first-child, .f1ds-table thead th:first-child { position: sticky; left: 0; z-index: 4; background: var(--bg-card, #1a1b1f); } } /* ============================================================ TIER 5 (#22) — reduced-motion-first accessibility guard. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Tier 3 closeout — table tools cluster (freshness + density) + progressive disclosure */ .bz-tbl-tools { position: absolute; top: 8px; right: 10px; z-index: 3; display: flex; align-items: center; gap: 8px; } .bz-tbl-tools .bz-density-toggle { position: static; top: auto; right: auto; } .bz-freshness { font: 600 10px/1 var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted, #9ba1ac); opacity: .85; white-space: nowrap; } @media (max-width: 520px) { .bz-freshness { display: none; } } .bz-showall { display: block; width: 100%; margin: 6px 0 0; font: 700 10px/1 var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted, #9ba1ac); background: transparent; border: 1px dashed var(--rule, rgba(255,255,255,.18)); border-radius: 6px; padding: 8px; cursor: pointer; } .bz-showall:hover { color: var(--color-gold, #e7b937); border-color: var(--color-gold, #e7b937); } .bz-collapsible.bz-collapsed tbody tr:nth-child(n+11) { display: none; } /* Tier 3 closeout fix — tools bar now sits above the first visible stat table */ .bz-tbl-tools { position: static; top: auto; right: auto; display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 0 6px; } /* ============================================================ TIER 4 (#15) — intel sport switcher -> bottom thumb-zone nav on mobile. Scoped with :has(.sport-tab-btn) to the INTEL bar only (the tips/home .stab filter bar is left untouched). Icon-over-label, safe-area aware, body gets bottom padding so content is never covered. ============================================================ */ @media (max-width: 768px) { .sport-tab-bar:has(.sport-tab-btn) { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 470; width: 100% !important; max-width: none !important; margin: 0 !important; display: flex !important; gap: 0 !important; border-radius: 0 !important; overflow: visible !important; padding: 5px 2px calc(5px + env(safe-area-inset-bottom, 0px)) !important; background: rgba(9,9,11,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 0 !important; border-top: 1px solid var(--rule, rgba(255,255,255,.10)) !important; } .sport-tab-bar:has(.sport-tab-btn) .sport-tab-btn { flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; padding: 4px 1px !important; border-radius: 8px !important; font-size: 9px !important; line-height: 1 !important; letter-spacing: .01em !important; white-space: nowrap !important; background: transparent !important; border: 0 !important; } .sport-tab-bar:has(.sport-tab-btn) .sport-tab-btn .sport-tab-icon { font-size: 17px !important; margin: 0 !important; } .sport-tab-bar:has(.sport-tab-btn) .sport-tab-btn.active { color: var(--color-gold, #e7b937) !important; background: rgba(231,185,55,.12) !important; } body:has(.sport-tab-bar .sport-tab-btn) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; } } /* Tier 4 bottom-nav — force on-brand gold active (beat the existing #sport-tab-bar !important) */ @media (max-width: 768px) { #sport-tab-bar:has(.sport-tab-btn) .sport-tab-btn.active { color: var(--color-gold, #e7b937) !important; background: rgba(231,185,55,.14) !important; } } /* Tier 4 bottom-nav — gold active also on the label span (span carries its own colour) */ @media (max-width: 768px) { #sport-tab-bar:has(.sport-tab-btn) .sport-tab-btn.active, #sport-tab-bar:has(.sport-tab-btn) .sport-tab-btn.active span { color: var(--color-gold, #e7b937) !important; } } /* Tier 4 #17 — mobile tap-row-to-expand: a wide stat-table row stacks its columns */ @media (max-width: 768px) { .bz-expandable tbody tr:not(.bz-detail-row) { cursor: pointer; } .bz-expandable tbody tr.bz-expanded { background: rgba(231,185,55,.06); } .bz-detail-row > td { padding: 0 !important; position: static !important; left: auto !important; background: var(--bg-card, #1a1b1f) !important; text-align: left !important; } .bz-detail-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 14px; padding: 10px 12px; } .bz-detail-item { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding-bottom: 4px; border-bottom: 1px solid var(--rule, rgba(255,255,255,.07)); } .bz-detail-item span { color: var(--color-muted, #9ba1ac); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; } .bz-detail-item b { color: var(--color-silver, #b4bcc8); font-family: var(--font-mono, monospace); font-size: 13px; } } @media (min-width: 769px) { .bz-detail-row { display: none; } } /* Tier 4 #16 — mobile round-by-round bracket (round selector; no full-grid scroll) */ .bz-round-nav { display: none; } @media (max-width: 768px) { .bz-round-nav { display: flex; gap: 6px; overflow-x: auto; margin: 2px 0 12px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .bz-round-tab { flex: 0 0 auto; font: 700 11px/1 var(--font-mono, "JetBrains Mono", monospace); letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted, #9ba1ac); background: var(--bg-card, #1a1b1f); border: 1px solid var(--rule, rgba(255,255,255,.12)); border-radius: 999px; padding: 7px 12px; cursor: pointer; white-space: nowrap; } .bz-round-tab.active { color: var(--color-gold, #e7b937); border-color: var(--color-gold, #e7b937); background: rgba(231,185,55,.12); } .wc-bracket { overflow-x: visible !important; display: block !important; } .wc-bracket > .wc-round.bz-round-hidden { display: none !important; } .wc-bracket > .wc-round { flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; } } /* Tier 4 fix — lift the Ko-fi floating "tip the creator" widget above the mobile bottom nav on intel pages (it defaults to the bottom corner and collides with the sport nav). Only bottom is changed, so it works whether Ko-fi anchors left or right. */ @media (max-width: 768px) { body:has(.sport-tab-bar .sport-tab-btn) [class*="floatingchat-container-wrap"], body:has(.sport-tab-bar .sport-tab-btn) #kofi-widget-overlay, body:has(.sport-tab-bar .sport-tab-btn) [class*="floatingchat"][style*="fixed"] { bottom: calc(var(--beteb-bb-h, 72px) + 12px + env(safe-area-inset-bottom, 0px)) !important; } } /* Tier 4 — surface Tips (+ Ask BETEB) in the mobile top bar. The site marks only Intel/Offers/Feedback as .hide-mob, but the whole .nav-links list is display:none on mobile, burying Tips behind the hamburger. Reveal the list; .hide-mob items stay hidden. */ @media (max-width: 768px) { nav .nav-links { display: flex !important; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; } nav .nav-links li.hide-mob { display: none !important; } nav .nav-links li a { font-size: 12px; letter-spacing: .04em; white-space: nowrap; } } /* Extend scan-first + mobile treatment to the Wimbledon player table (.wim-pt: # · Player · 7 stat cols) */ .wim-pt tbody td:nth-child(n+3), .wim-pt thead th:nth-child(n+3) { text-align: right !important; } /* stat cols; keep # + Player left */ .wim-pt tbody td { border-top: 1px solid var(--rule, rgba(255,255,255,.07)); } .wim-pt thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-card, #1a1b1f); } html.bz-density-compact .wim-pt td, html.bz-density-compact .wim-pt th { padding-top: 3px !important; padding-bottom: 3px !important; } /* ============================================================ TIER 5 (#22) — smooth cross-page View Transitions on same-origin nav (Chrome/supported browsers; graceful no-op elsewhere). Fast, tasteful default cross-fade; neutralised under prefers-reduced-motion. Reversible. ============================================================ */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Fix — subscribe consent must sit full-width BELOW the email+button, not squeezed beside it */ .sub-form { flex-wrap: wrap !important; } .sub-consent { flex: 0 0 100% !important; width: 100% !important; order: 99; margin-top: 9px !important; } /* ============================================================ Compact tips PROTOTYPE (racing only) — progressive disclosure. Collapsed card = summary head only; the "+" reveals reasoning + bookmaker odds + share. Research: keep essentials visible, collapse the extras. [[Compact Tips Layout Research 2026]] ============================================================ */ #body-racing .card:not(.card-open) .pl-row, #body-racing .card:not(.card-open) .pl-lbl, #body-racing .card:not(.card-open) .tip-share { display: none !important; } #body-racing .card { padding-bottom: 11px; } /* make the expand affordance clearer than a bare "+" */ #body-racing .card-xpand { position: relative; } /* ============================================================ Compact tips v2 (racing) — KEEP the affiliate place-bet visible, just slimmer; only the written reasoning collapses behind "+". Overrides the v1 "hide pl-row" prototype above. ============================================================ */ #body-racing .card:not(.card-open) .pl-row { display: flex !important; } #body-racing .card:not(.card-open) .pl-lbl { display: inline !important; } #body-racing .card:not(.card-open) .tip-share { display: inline-flex !important; } #body-racing .card .pl-row { margin-top: 8px !important; gap: 5px !important; align-items: center !important; } #body-racing .card .pl-lbl { font-size: 9px !important; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted,#9ba1ac); align-self: center; } #body-racing .card .pl-sq.pl-logo { min-width: 30px !important; min-height: 26px !important; height: 26px !important; padding: 3px 6px !important; border-radius: 6px; } #body-racing .card .pl-sq.pl-logo img { max-height: 15px !important; width: auto !important; } #body-racing .card .tip-share { min-height: 0 !important; height: auto !important; width: auto !important; padding: 5px 10px !important; font-size: 10px !important; letter-spacing: .04em; margin-top: 7px !important; display: inline-flex !important; align-items: center; border-radius: 7px; } /* ============================================================ Compact tips — MULTI-COLUMN masonry flow (racing proto). Uses the width (2 cols ≥700px, 3 cols ≥1100px), no height gaps; sub-header spans all columns; cards stay intact. ============================================================ */ @media (min-width: 700px) { #body-racing .sub { column-count: 2; column-gap: 12px; } #body-racing .sub-hdr { column-span: all; -webkit-column-span: all; margin: 0 0 8px !important; } #body-racing .card { break-inside: avoid; -webkit-column-break-inside: avoid; display: block; margin: 0 0 12px !important; width: 100%; } } @media (min-width: 1100px) { #body-racing .sub { column-count: 3; } } /* ============================================================ Compact tips — ROLL OUT to ALL sports (.tips-wrapper). + WC game bets: collapse the full reasoning (.wcb-rsn), keep the one-line "✓ proof"; full reasoning shows when the card expands. ============================================================ */ .card:not(.card-open) .wcb-rsn { display: none !important; } .tips-wrapper .card .pl-row { margin-top: 8px !important; gap: 5px !important; align-items: center !important; } .tips-wrapper .card .pl-lbl { font-size: 9px !important; text-transform: uppercase; color: var(--color-muted,#9ba1ac); } .tips-wrapper .card .pl-sq.pl-logo { min-width: 30px !important; min-height: 26px !important; height: 26px !important; padding: 3px 6px !important; border-radius: 6px; } .tips-wrapper .card .pl-sq.pl-logo img { max-height: 15px !important; width: auto !important; } .tips-wrapper .card .tip-share { min-height: 0 !important; height: auto !important; width: auto !important; padding: 5px 10px !important; font-size: 10px !important; margin-top: 7px !important; display: inline-flex !important; border-radius: 7px; } @media (min-width: 700px) { .tips-wrapper .sub { column-count: 2; column-gap: 12px; } .tips-wrapper .sub-hdr { column-span: all; -webkit-column-span: all; margin: 0 0 8px !important; } .tips-wrapper .card { break-inside: avoid; -webkit-column-break-inside: avoid; display: block; margin: 0 0 12px !important; width: 100%; } } @media (min-width: 1200px) { .tips-wrapper .sub { column-count: 3; } } /* ============================================================ Conversion-focused tip CARD redesign (all sports). Leans into the per-card --accent (sport / special-event colour). Prominent odds, bold selection, place-bet as a clear tinted action bar. Compact + grid + reasoning-on-expand stay. [[Tip Card Conversion Design 2026]] ============================================================ */ .tips-wrapper .card { border-left: 3px solid var(--accent, #e7b937) !important; } .tips-wrapper .card-sel { font-size: 16px !important; font-weight: 700 !important; line-height: 1.2; } .tips-wrapper .card-odds { font-family: var(--font-mono, "JetBrains Mono", monospace) !important; font-size: 21px !important; font-weight: 700 !important; color: var(--accent, #e7b937) !important; background: rgba(var(--accent-rgb, 231,185,55), .12) !important; border: 1px solid rgba(var(--accent-rgb, 231,185,55), .35) !important; border-radius: 9px !important; padding: 4px 11px !important; align-self: flex-start; white-space: nowrap; } .tips-wrapper .card .pl-row { background: rgba(var(--accent-rgb, 231,185,55), .06) !important; border: 1px solid rgba(var(--accent-rgb, 231,185,55), .18) !important; border-radius: 9px !important; padding: 7px 9px !important; margin-top: 9px !important; } .tips-wrapper .card .pl-lbl { color: var(--accent, #e7b937) !important; font-weight: 700 !important; letter-spacing: .06em; } /* ===== BETEB Today's Board — scoped under #beteb-board ===== */ /* Persistently hide the OLD sport sections + the CLV hero once the board loads */ html.bb-on #section-football, html.bb-on #section-racing, html.bb-on #section-nba, html.bb-on #section-tennis, html.bb-on #section-f1, html.bb-on #event-special, html.bb-on #event-tips, html.bb-on #event-banner, html.bb-on #tips-strip, html.bb-on #tips-caption, html.bb-on .sport-tab-bar, html.bb-on .hm-hero { display:none !important; } #beteb-board{--card:#181a20;--ink:#f1f3f7;--dim:#c6ccd6;--muted:#9aa3b2;--rule:rgba(255,255,255,.10);--gold:#e7b937;margin:0 0 10px;padding-top:80px} #beteb-board *{box-sizing:border-box} #beteb-board .conf{display:flex;align-items:center;gap:2px} #beteb-board .conf b{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:10px;color:var(--dim);margin-right:5px;font-weight:700} #beteb-board .cd{width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.16)} #beteb-board .cd.f{background:var(--ac,#e7b937)} /* filter bar — clear, labelled, prominent */ #beteb-board .bb-filterwrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 0 14px;padding:11px 14px;border-radius:13px;background:#14161c;border:1px solid var(--rule)} #beteb-board .bb-flabel{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);flex:0 0 auto} #beteb-board .bb-filters{display:flex;gap:8px;overflow-x:auto;padding:2px;flex:1;-webkit-overflow-scrolling:touch} #beteb-board .fpill{flex:0 0 auto;font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#1f2229;color:var(--ink);cursor:pointer;white-space:nowrap} #beteb-board .fpill:hover{border-color:rgba(231,185,55,.5)} #beteb-board .fpill.on{color:#0a0a0c;background:var(--gold);border-color:var(--gold);box-shadow:0 2px 12px rgba(231,185,55,.28)} /* headline picks — simple heading */ #beteb-board .bb-hd{font-family:var(--font-head,'Barlow Condensed',sans-serif);font-weight:700;font-size:17px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);margin:0 0 15px;display:flex;align-items:center;justify-content:center;gap:10px} #beteb-board .bb-hd::before{content:"";width:5px;height:18px;border-radius:2px;background:var(--gold)} #beteb-board .best{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} #beteb-board .hero-tile{flex:0 1 236px;min-width:0;position:relative;border-radius:16px;padding:15px;overflow:hidden;background:var(--card);border:1px solid var(--rule);border-top:2px solid var(--ac)} #beteb-board .hero-tile::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0%,rgba(var(--acrgb),.16),transparent 62%)} #beteb-board .hero-tile>*{position:relative} #beteb-board .hero-tile.locked{border-style:dashed;border-top-style:solid} #beteb-board .htag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);margin-bottom:9px} #beteb-board .htag .dot{width:7px;height:7px;border-radius:50%;background:var(--ac)} #beteb-board .hsel{font-weight:700;font-size:19px;line-height:1.15;color:var(--ink)} #beteb-board .hwhat{font-size:11px;font-weight:600;color:var(--ac);text-transform:uppercase;letter-spacing:.05em;margin:2px 0} #beteb-board .hmeta{font-size:12.5px;color:var(--dim);margin-bottom:12px} #beteb-board .hrow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px} #beteb-board .hodds{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:800;font-size:30px;color:var(--ac);line-height:1} #beteb-board .hbet{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:13px;color:#0a0a0c;background:linear-gradient(180deg,#f0cf6f,var(--ac));border-radius:10px;padding:11px} #beteb-board .hbet.lock{color:var(--gold);background:transparent;border:1px solid rgba(231,185,55,.55)} #beteb-board .hero-bet{margin-top:0} /* full-width SUBSCRIBE band (real form relocated here) */ #subscribe{margin:14px 0 2px;scroll-margin-top:80px} #subscribe .hmx-signup{display:grid;grid-template-columns:minmax(190px,1fr) minmax(300px,1.5fr);grid-template-areas:"eye form" "head form";align-items:center;column-gap:30px;row-gap:1px;width:100%;max-width:none;margin:0;padding:8px 18px;border-radius:14px;text-align:left; background:radial-gradient(130% 220% at 100% 0%,rgba(231,185,55,.13),transparent 56%),#181a20;border:1px solid rgba(231,185,55,.3)} #subscribe .hm-signup-eye{grid-area:eye;align-self:end;font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#e7b937;margin:0} #subscribe .hm-signup-h{grid-area:head;align-self:start;font-family:var(--font-head,'Barlow Condensed',sans-serif);font-weight:700;font-size:17px;line-height:1.05;color:#f1f3f7;margin:0;max-width:24ch} #subscribe .sub-block{grid-area:form;max-width:640px;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px} @media(max-width:640px){#subscribe .hmx-signup{grid-template-columns:1fr;grid-template-areas:"eye" "head" "form";row-gap:9px}} #subscribe .sub-age{display:flex;align-items:center;gap:7px;font-size:12px;color:#dfe3ea;margin:0;cursor:pointer;line-height:1.25;white-space:nowrap;flex:0 0 auto;padding:0 !important;border:0 !important;background:none !important;min-height:0 !important} #subscribe .sub-age input[type=checkbox]{margin:1px 0 0;accent-color:#e7b937;width:17px;height:17px;flex:0 0 auto;cursor:pointer} #subscribe .sub-age a{color:#e7b937} #subscribe .sub-form{display:flex;gap:8px;flex-wrap:nowrap;margin:0;flex:1 1 240px} #subscribe .email-field{flex:1;min-width:170px;background:#0e0f14;border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:7px 12px;color:#f1f3f7;font-size:14px;font-family:'Inter',system-ui,sans-serif} #subscribe .email-field::placeholder{color:#8a92a0} #subscribe .sub-form button{font-weight:700;font-size:13.5px;color:#0a0a0c;background:linear-gradient(180deg,#f0cf6f,#e7b937);border:0;border-radius:9px;padding:7px 18px;cursor:pointer;white-space:nowrap} #subscribe .sub-form button:disabled{opacity:.5;cursor:not-allowed} #subscribe .sub-form.locked .email-field{opacity:.6} #subscribe .sub-consent{flex:0 0 100%;order:99;font-size:10px;color:#9aa3b2;margin:3px 0 0;line-height:1.4} #subscribe .sub-consent a{color:#c6ccd6;text-decoration:underline} #subscribe .sub-status{font-size:12.5px;margin-top:8px;font-weight:600} #subscribe .sub-status.ok{color:#4be08a}#subscribe .sub-status.err{color:#ff7a7a} /* offers slot spacing */ #bb-off-slot{margin:4px 0 2px} /* sections */ #beteb-board .bb-section{margin-top:24px} #beteb-board .sec-hd{display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:13px;background:linear-gradient(100deg,rgba(var(--acrgb),.18),transparent 72%);border:1px solid rgba(var(--acrgb),.28);border-left:3px solid var(--ac);margin-bottom:12px} #beteb-board .sec-ic{font-size:20px} #beteb-board .sec-t{font-family:var(--font-head,'Barlow Condensed',sans-serif);font-weight:700;font-size:22px;letter-spacing:.5px;color:var(--ink)} #beteb-board .sec-s{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em} #beteb-board .sec-n{margin-left:auto;font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:11px;color:var(--ac);background:rgba(var(--acrgb),.16);border:1px solid rgba(var(--acrgb),.36);padding:5px 11px;border-radius:999px} /* MASONRY packing — small tiles stack beside tall ones to use all the width */ #beteb-board .bb-grid{display:grid;grid-template-columns:1fr;gap:10px} @media(min-width:600px){#beteb-board .bb-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){#beteb-board .bb-grid{grid-template-columns:repeat(3,1fr)}} /* sub-group divider (Main / Alternatives / Wimbledon …) — spans all columns */ #beteb-board .bb-subhd{grid-column:1/-1;column-span:all;-webkit-column-span:all;display:flex;align-items:center;gap:9px;font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sc);margin:8px 0 4px} #beteb-board .bb-subhd span{width:22px;height:3px;border-radius:2px;background:var(--sc)} /* tile */ #beteb-board .tile{break-inside:avoid;-webkit-column-break-inside:avoid;background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--ac);border-radius:12px;padding:11px 12px;margin:0;display:block} #beteb-board .t-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} #beteb-board .t-tag{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ac);display:inline-flex;align-items:center;gap:5px;margin-bottom:5px} #beteb-board .t-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--ac)} #beteb-board .t-sel{font-weight:700;font-size:15.5px;line-height:1.2;color:var(--ink)} #beteb-board .t-what{font-size:11px;font-weight:600;color:var(--ac);text-transform:uppercase;letter-spacing:.04em;margin-top:2px} #beteb-board .t-meta{font-size:12.5px;color:var(--dim);margin-top:2px} #beteb-board .t-odds{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:800;font-size:19px;color:var(--ac);white-space:nowrap;background:rgba(var(--acrgb),.14);border:1px solid rgba(var(--acrgb),.34);border-radius:8px;padding:4px 9px;align-self:flex-start} #beteb-board .t-conf{margin-top:8px} #beteb-board .t-foot{display:flex;align-items:flex-start;gap:8px;margin-top:10px} /* multiples — legs */ #beteb-board .mlegs{margin-top:9px;border-top:1px solid var(--rule)} #beteb-board .mleg{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--rule)} #beteb-board .mleg .mh{font-weight:600;font-size:13.5px;color:var(--ink);flex:1} #beteb-board .mleg .mm{font-size:11.5px;color:var(--dim)} #beteb-board .mleg .mo{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:12.5px;color:var(--ac)} /* place bet reveal */ #beteb-board .t-bet{flex:1;position:relative} #beteb-board .t-place{width:100%;display:flex;align-items:center;gap:6px;font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:rgba(var(--acrgb),.12);border:1px solid rgba(var(--acrgb),.3);border-radius:8px;padding:9px 10px;cursor:pointer} #beteb-board .t-place .ar{margin-left:auto;color:var(--ac);transition:transform .2s} #beteb-board .t-bet.show .t-place .ar{transform:rotate(180deg)} #beteb-board .t-books{display:none;flex-direction:column;gap:6px;margin-top:6px} #beteb-board .t-bet.show .t-books{display:flex} #beteb-board .t-books a{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);background:#0e0f14;border:1px solid var(--rule);border-radius:8px;padding:8px 10px;font-weight:600;font-size:12.5px} #beteb-board .t-books a:hover{border-color:rgba(var(--acrgb),.5)} #beteb-board .t-books .bklogo{height:22px;width:auto;max-width:70px;border-radius:4px;flex:0 0 auto;object-fit:contain} #beteb-board .t-books .go{margin-left:auto;color:var(--ac);font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700} #beteb-board .hero-bet .t-books{position:absolute;left:0;right:0;bottom:100%;margin:0 0 6px;background:var(--card);padding:6px;border:1px solid var(--rule);border-radius:10px;z-index:2} #beteb-board .t-whybtn{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:transparent;border:1px solid var(--rule);border-radius:8px;padding:9px 10px;cursor:pointer;flex:0 0 auto} #beteb-board .t-detail{display:none;font-size:12.5px;color:var(--dim);line-height:1.55;margin-top:9px;padding-top:9px;border-top:1px solid var(--rule)} #beteb-board .tile.open .t-detail{display:block} /* WC bet tiers — legs shown */ #beteb-board .tier{padding:9px 0;border-top:1px solid var(--rule)} #beteb-board .tier:first-of-type{border-top:0} #beteb-board .tier-h{display:flex;align-items:center;justify-content:space-between;gap:8px} #beteb-board .tier-l{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;font-size:10px;letter-spacing:.05em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px} #beteb-board .tier-o{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:800;font-size:14px} #beteb-board .tier-sel{font-weight:600;font-size:13px;margin-top:3px;color:var(--ink)} #beteb-board .legs{margin-top:6px;padding-left:1px;list-style:none} #beteb-board .legs li{font-size:12px;color:var(--dim);padding:2.5px 0 2.5px 15px;position:relative;line-height:1.35} #beteb-board .legs li::before{content:"›";position:absolute;left:1px;color:var(--tc);font-weight:700} /* Golden Boot / Total Goals — normal masonry tiles (their visual fits a column) */ #beteb-board .tile.wide{grid-column:1/-1} /* Golden Boot leaderboard */ #beteb-board .gb-tbl{margin-top:10px;border-top:1px solid var(--rule)} #beteb-board .gb-row{display:flex;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid var(--rule);font-size:13px} #beteb-board .gb-row .gb-p{font-weight:600;color:var(--ink);flex:1} #beteb-board .gb-row .gb-t{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em} #beteb-board .gb-row .gb-g{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:800;font-size:14px;color:var(--dim);min-width:24px;text-align:right} #beteb-board .gb-row.pick{background:rgba(231,185,55,.12);margin:0 -8px;padding:6px 8px;border-radius:7px;border-bottom-color:transparent} #beteb-board .gb-row.pick .gb-p,#beteb-board .gb-row.pick .gb-g{color:#e7b937} #beteb-board .gb-row.pick .gb-p::after{content:" ★";color:#e7b937} /* Total Goals live visual */ #beteb-board .tg-live{margin-top:11px} #beteb-board .tg-big{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:800;font-size:32px;color:#e7b937;line-height:1} #beteb-board .tg-big small{font-size:12px;color:var(--dim);font-weight:600;letter-spacing:.02em} #beteb-board .tg-sub{font-size:11.5px;color:var(--dim);margin:5px 0 9px} #beteb-board .tg-bar{position:relative;height:9px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden} #beteb-board .tg-bar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#e7b937,#f0cf6f)} #beteb-board .tg-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:5px;font-family:var(--font-mono,'JetBrains Mono',monospace)} /* Tier 5 board - first-paint loading placeholder (kills FOUC of the old layout) */ #bb-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:56vh;color:var(--color-muted,#9ba1ac)} #bb-loading .bbl-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(231,185,55,.2);border-top-color:#e7b937;animation:bblspin .8s linear infinite} #bb-loading .bbl-t{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase} @keyframes bblspin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){#bb-loading .bbl-spin{animation:none}} /* ===== SUBSCRIBE BAR REDESIGN v4 - one row filling full width, compliance line under ===== */ #subscribe .hmx-signup{display:flex !important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:7px 16px;grid-template-columns:none;padding:9px 24px !important;max-width:none;width:100%;margin:0;text-align:left} #subscribe .hm-signup-eye{display:none} #subscribe .hm-signup-h{margin:0;font-size:15px;line-height:1.15;max-width:none;flex:0 0 auto;align-self:center;color:#f1f3f7;white-space:nowrap} #subscribe .hm-signup-h::before{content:"\1F4E8 "} #subscribe .sub-block{display:contents} #subscribe .sub-form{display:contents} #subscribe .sub-age{flex:0 0 auto;margin:0;white-space:nowrap;align-self:center} #subscribe input.honeypot{display:none} #subscribe .email-field{flex:1 1 200px;min-width:150px;align-self:center} #subscribe .sub-form button{flex:0 0 auto;align-self:center} #subscribe .sub-consent{flex:0 0 100%;order:99;text-align:center;font-size:9.5px;line-height:1.3;margin:3px auto 0;color:#8a92a0;max-width:none} #subscribe .sub-status{flex:0 0 100%;order:100;text-align:center;width:100%;margin:0} @media(max-width:820px){#subscribe .hm-signup-h{flex:0 0 100%;text-align:center;white-space:normal}#subscribe .sub-age{flex:1 1 auto;justify-content:center}#subscribe .email-field{flex:1 1 60%}} /* board section-header links: Intel + Ask BETEB per sport (fit existing header height) */ #beteb-board .sec-tt{min-width:0;flex:0 1 auto} #beteb-board .sec-hd-r{margin-left:auto;display:flex;align-items:center;gap:7px;flex:0 0 auto} #beteb-board .sec-lk{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:10.5px;font-weight:700;letter-spacing:.03em;text-decoration:none;padding:5px 9px;border-radius:8px;white-space:nowrap;line-height:1;transition:filter .15s} #beteb-board .sec-lk .lk-i{font-size:11px;line-height:1} #beteb-board .sec-lk:hover{filter:brightness(1.18)} #beteb-board .sl-intel{color:#aee0f7;border:1px solid rgba(56,189,248,.32);background:rgba(56,189,248,.10)} #beteb-board .sl-ask{color:#ecd49a;border:1px solid rgba(201,168,76,.34);background:rgba(201,168,76,.12)} @media(max-width:640px){#beteb-board .sec-lk .lk-t{display:none}#beteb-board .sec-lk{padding:6px 7px}#beteb-board .sec-n{display:none}} /* board homepage: force-hide the sport tab bar incl. the mobile #id override (beats #sport-tab-bar !important) */ html.bb-on #sport-tab-bar, html.bb-on .sport-tab-bar { display:none !important; } /* Tier 4 fix (cont.) — the Ko-fi popup panel (class uses floating-chat with a hyphen, so the rule above misses it): keep its bottom edge above the measured mobile bottom nav too. */ @media (max-width: 768px) { body:has(.sport-tab-bar .sport-tab-btn) [class*="floating-chat-kofi-popup"] { bottom: calc(var(--beteb-bb-h, 72px) + 76px + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100vh - var(--beteb-bb-h, 72px) - 140px) !important; } }