/* corneredge.bet main stylesheet (non-critical). Loaded with media=print swap. Critical CSS in critical.css handles above-the-fold + header. */ /* Sections / layout primitives */ .ce-main{min-height:60vh} .ce-page{padding:32px 0 64px} .ce-section{padding:48px 0} .ce-section-alt{background:var(--c-slate)} .ce-section-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap} .ce-section-title{font-size:clamp(22px,2vw + 12px,30px);margin:0} /* Market hub pages: bump every h2 to the section-title size so any heading inside the content area (FAQ block, partials, custom content) reads with the same hierarchy as the explicitly classed section titles. Existing .ce-section-title H2s are already this size so this rule is a no-op for them; H2s without the class get the bump. */ .single-fbe_market_page h2{font-size:clamp(22px,2vw + 12px,30px)} .ce-section-link{color:var(--c-text-2);font-size:14px;font-weight:500} .ce-section-link:hover{color:var(--c-lime)} .ce-section-meta{color:var(--c-text-3);font-size:13px;margin:16px 0 0} .ce-section-lede{color:var(--c-text-2);font-size:14px;margin:0 0 16px;line-height:1.5} .ce-page-header{margin-bottom:24px} .ce-page-title{margin:0 0 8px} .ce-page-desc,.ce-page-meta{color:var(--c-text-2);font-size:14px} /* Prose (post/page content) */ .ce-prose{max-width:720px;color:var(--c-text-1);font-size:17px;line-height:1.7} .ce-prose p{margin:0 0 1.2em} .ce-prose a{color:var(--c-lime);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .ce-prose a:hover{color:var(--c-white)} .ce-prose h2,.ce-prose h3{margin-top:1.6em} .ce-prose ul,.ce-prose ol{padding-left:24px;margin:0 0 1.2em} .ce-prose li{margin:6px 0} .ce-prose blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--c-lime);background:var(--c-slate);border-radius:0 var(--r-md) var(--r-md) 0} .ce-prose code{background:var(--c-slate-2);padding:2px 6px;border-radius:4px;font-size:.92em} /* Post list */ .ce-post-list{display:grid;gap:16px} .ce-post-card{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-md);padding:20px} .ce-post-card-title{margin:0 0 8px;font-size:20px} .ce-post-card-title a{color:var(--c-text-1)} .ce-post-card-title a:hover{color:var(--c-lime)} .ce-post-card-excerpt{color:var(--c-text-2);font-size:14px} /* Footer */ .ce-footer{background:var(--c-slate);border-top:var(--b-soft);padding:48px 0 24px;margin-top:64px} .ce-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:32px} @media (max-width:980px){.ce-footer-grid{grid-template-columns:1fr 1fr;gap:24px}} @media (max-width:480px){.ce-footer-grid{grid-template-columns:1fr}} .ce-footer-brand{max-width:320px} .ce-footer-logo{height:36px;width:auto;max-width:240px;display:block} .ce-footer-tagline{color:var(--c-text-2);font-size:14px;margin:16px 0 0;line-height:1.55} .ce-footer-heading{font-family:var(--font-body);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-3);margin:8px 0 16px} .ce-footer-list{list-style:none;margin:0;padding:0} .ce-footer-list li{margin:8px 0} .ce-footer-list a{color:var(--c-text-2);font-size:14px} .ce-footer-list a:hover{color:var(--c-lime)} .ce-footer-bottom{border-top:var(--b-soft);padding-top:24px;color:var(--c-text-3);font-size:12px} .ce-responsible-gambling{margin:0 0 16px;line-height:1.6} .ce-responsible-gambling strong{color:var(--c-text-1)} .ce-footer-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 18px} .ce-footer-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center} .ce-footer-legal li{display:inline-flex;align-items:center} .ce-footer-legal li + li::before{content:"\B7";color:var(--c-text-3);padding:0 10px;opacity:0.7} .ce-footer-legal a{color:var(--c-text-2);font-size:12px;letter-spacing:0.01em} .ce-footer-legal a:hover{color:var(--c-lime)} .ce-copyright{margin:0} /* Hero (only secondary hero used outside above-the-fold; main hero CSS in critical) */ /* Homepage hero split + pick card CSS is inlined in front-page.php so it renders on first paint without waiting for the async theme.css. */ /* Market hub grid */ .ce-market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .ce-market-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--c-slate-2);border:var(--b-soft);border-radius:var(--r-md);padding:18px 20px;color:var(--c-text-1);transition:transform .1s ease,border-color .1s ease,background .15s ease;min-height:64px} .ce-market-card:hover{background:var(--c-slate);border-color:var(--c-lime);color:var(--c-text-1);transform:translateY(-1px)} .ce-market-card-title{margin:0;font-size:16px;font-family:var(--font-body);font-weight:600;letter-spacing:0;line-height:1.2} .ce-market-card-arrow{color:var(--c-lime);font-size:18px;flex-shrink:0;align-self:center} /* Stacked league card: title on top, small meta line underneath, arrow to the right of the body. Card height is uniform so the grid lines up regardless of whether a card carries match count text. */ .ce-market-card-stack{padding:14px 18px} .ce-market-card-body{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0} .ce-market-card-meta{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--c-lime);line-height:1.3;text-transform:lowercase} .ce-market-card.is-dormant .ce-market-card-title{color:var(--c-text-2)} .ce-market-card.is-dormant .ce-market-card-meta{color:var(--c-text-3)} /* Prediction table */ .ce-prediction-wrap{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-md);overflow:hidden} .ce-prediction-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:var(--b-soft);flex-wrap:wrap} .ce-filter-bar{display:flex;gap:8px;flex-wrap:wrap} .ce-filter-pill{display:inline-flex;align-items:center;gap:6px;background:var(--c-slate-2);color:var(--c-text-2);border:var(--b-soft);border-radius:var(--r-pill);padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none} .ce-filter-pill:hover{color:var(--c-lime);border-color:var(--c-lime)} .ce-filter-pill.is-active{background:var(--c-lime);color:var(--c-charcoal);border-color:var(--c-lime)} .ce-prediction-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .ce-prediction-table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-3);padding:12px 12px;background:var(--c-slate-2);border-bottom:var(--b-soft);font-weight:600} .ce-prediction-table tbody td{padding:14px 12px;border-bottom:var(--b-soft);color:var(--c-text-1);font-size:14px;vertical-align:middle} .ce-prediction-table tbody tr:hover{background:rgba(166,255,0,.04)} .ce-prediction-table tbody tr:last-child td{border-bottom:0} .ce-pred-time{color:var(--c-text-2);white-space:nowrap;font-feature-settings:"tnum"} .ce-pred-league{color:var(--c-text-3);font-size:12px} .ce-pred-match{font-weight:600;color:var(--c-text-1)} .ce-pred-match a{color:inherit;text-decoration:none} .ce-pred-match a:hover{color:var(--c-lime)} .ce-pred-selection{font-weight:600} .ce-pred-odds{font-variant-numeric:tabular-nums;font-weight:600} .ce-pred-cta{white-space:nowrap} /* "Best price at X" only renders on mobile (see media query). Hidden on desktop because the dedicated Sportsbook column already shows the brand logo. */ .ce-pred-best-at{display:none} .ce-th-cta{width:1%} /* Sportsbook badge column (logo or monogram, clickable, affiliate link) */ .ce-pred-book{width:1%;padding:8px 12px 8px 0!important;vertical-align:middle} .ce-pred-book-link{display:inline-flex;align-items:center;justify-content:center;height:42px;width:120px;padding:0 14px;border-radius:var(--r-md);background:var(--c-slate-2);border:1px solid rgba(255,255,255,0.04);box-sizing:border-box;transition:border-color .15s ease,background .15s ease,transform .15s ease;overflow:hidden} .ce-pred-book-link:hover{border-color:var(--c-lime);background:var(--c-slate);transform:translateY(-1px)} /* All shipped bookmaker SVGs use ~3:1 aspect (viewBox 240x80). Sizing by height fills the badge without distortion. overflow:visible on the SVG itself keeps italic descenders from getting clipped by the box. */ .ce-sb-badge-svg{height:26px;width:auto;max-width:100%;display:block;overflow:visible} .ce-sb-badge-mono{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:var(--font-display,var(--font-body));font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--c-lime)} /* Smaller CTA used in the final column of the predictions table */ .ce-btn-sm{height:34px;padding:0 14px;font-size:13px;border-radius:var(--r-md)} /* Confidence indicator */ .ce-confidence{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600} .ce-confidence-bar{width:64px;height:6px;border-radius:var(--r-pill);background:var(--c-slate-2);overflow:hidden;position:relative} .ce-confidence-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--c-lime);border-radius:var(--r-pill)} .ce-confidence.is-strong{color:var(--c-lime)} .ce-confidence.is-strong .ce-confidence-bar::after{background:var(--c-lime)} .ce-confidence.is-medium{color:var(--c-cyan)} .ce-confidence.is-medium .ce-confidence-bar::after{background:var(--c-cyan)} .ce-confidence.is-low{color:var(--c-amber)} .ce-confidence.is-low .ce-confidence-bar::after{background:var(--c-amber)} .ce-confidence.is-weak{color:var(--c-red)} .ce-confidence.is-weak .ce-confidence-bar::after{background:var(--c-red)} /* Bookmaker grid */ .ce-bookmaker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;align-items:stretch} .ce-bookmaker-card{display:flex;flex-direction:column;background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-md);padding:20px;transition:border-color .15s ease} .ce-bookmaker-card:hover{border-color:var(--c-lime)} /* Fixed-height head block so logo + name + tag rows sit on the same baseline across all cards no matter how many tags an operator carries. */ .ce-bookmaker-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;min-height:64px} .ce-bookmaker-logo{flex-shrink:0;width:110px;height:60px;border-radius:var(--r-md);background:var(--c-slate-2);border:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;padding:8px 12px;box-sizing:border-box;overflow:hidden} .ce-bookmaker-logo svg{height:32px;width:auto;max-width:100%;display:block;overflow:visible} .ce-bookmaker-logo .ce-sb-badge-mono{font-size:18px;color:var(--c-lime)} .ce-bookmaker-head > div:last-child{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0} .ce-bookmaker-name{margin:0;font-size:17px;font-family:var(--font-body);font-weight:700;line-height:1.2} /* Reserve space for one full tag row even when an operator has zero tags, so cards with fewer tags do not push their bonus text up. */ .ce-bookmaker-tags{display:flex;gap:6px;margin:0;flex-wrap:wrap;min-height:20px} .ce-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-pill);background:var(--c-slate-2);color:var(--c-text-2);white-space:nowrap} .ce-tag.is-lime{background:rgba(166,255,0,.12);color:var(--c-lime)} .ce-tag.is-cyan{background:rgba(34,211,238,.12);color:var(--c-cyan)} /* min-height so 1-line and 2-line bonus copy land on the same vertical row. 3em fits two lines comfortably at 14px / 1.5 line-height. */ .ce-bookmaker-bonus{color:var(--c-text-2);font-size:14px;margin:0 0 18px;line-height:1.5;min-height:3em} .ce-bookmaker-cta{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap} .ce-bookmaker-cta .ce-btn{flex:1;min-width:96px} /* Match page */ .ce-match-hero{padding:32px 0 24px;background:linear-gradient(180deg,var(--c-slate) 0,var(--c-charcoal) 100%);border-bottom:var(--b-soft)} .ce-match-meta{color:var(--c-text-3);font-size:13px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.08em} .ce-match-title{font-size:clamp(26px,3vw + 12px,42px);margin:0 0 8px} .ce-match-when{color:var(--c-text-2);font-size:14px} .ce-match-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} @media (max-width:900px){.ce-match-grid{grid-template-columns:1fr}} .ce-prediction-card{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-lg);padding:24px} .ce-prediction-card .ce-pred-headline{font-family:var(--font-display);font-size:24px;font-weight:700;margin:0 0 4px} .ce-prediction-card .ce-pred-line{color:var(--c-text-3);font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 16px} .ce-team-compare{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:24px} .ce-team-compare th,.ce-team-compare td{padding:10px 12px;border-bottom:var(--b-soft);font-size:14px;text-align:center} .ce-team-compare th{color:var(--c-text-3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em} .ce-team-compare tbody tr:last-child td{border-bottom:0} .ce-team-compare td:first-child,.ce-team-compare th:first-child{text-align:left;color:var(--c-text-2)} .ce-team-compare .is-winner{color:var(--c-lime);font-weight:600} /* Plugin SVG icons (inline; use currentColor) */ svg.ce-icon,.ce-bm-procon-icon svg,.ce-bm-feature-icon svg,.ce-bm-stat-icon svg, .ce-bm-breakdown-icon svg,.ce-bm-markets h2 svg,.ce-bm-procon h3 svg, .ce-tag-icon svg,.ce-bm-compare-features svg{ width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex-shrink:0 } .is-lime{color:var(--c-lime)!important} .is-dim{color:var(--c-text-3)!important;opacity:0.5} /* Bookmaker review page */ .ce-bm-hero{position:relative;padding:56px 0 40px;border-bottom:var(--b-soft);overflow:hidden;isolation:isolate} .ce-bm-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--bk-color,#A6FF00) 12%,#0D1117) 0%,#0D1117 50%,#151922 100%);z-index:-1} .ce-bm-hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,color-mix(in srgb,var(--bk-color,#A6FF00) 18%,transparent),transparent 60%);pointer-events:none} .ce-bm-hero-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center} @media (max-width:900px){.ce-bm-hero-inner{grid-template-columns:1fr;gap:32px}} .ce-bm-hero-left{position:relative;z-index:1} .ce-bm-brandline{margin:8px 0 12px} .ce-bm-brandline{margin:14px 0 18px;display:flex;justify-content:flex-start;align-items:center} .ce-bm-wordmark,.ce-bm-wordmark-svg{height:56px;width:auto;display:block;max-width:360px;margin-left:0} .ce-bm-wordmark-svg{overflow:visible} .ce-bm-hero-tagline{margin:0 0 20px;max-width:560px} .ce-bm-hero-title{margin:0;font-size:clamp(28px,3vw + 12px,44px);line-height:1.1;letter-spacing:-.02em} .ce-bm-hero-tagline{margin:0 0 20px;color:var(--c-text-2);font-size:17px;line-height:1.5;max-width:560px;font-weight:400} .ce-bm-hero-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:24px} .ce-bm-stars{color:var(--bk-color,#A6FF00);font-size:20px;letter-spacing:1px;display:inline-flex;align-items:baseline;gap:6px} .ce-bm-stars strong{font-size:16px;color:var(--c-text-1);margin-left:4px;letter-spacing:0} .ce-tag-icon{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:12px} .ce-tag-icon svg{width:14px;height:14px} .ce-bm-hero-cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px} .ce-bm-bonus-pill{display:inline-flex;flex-direction:column;background:rgba(255,255,255,0.04);border:1px solid color-mix(in srgb,var(--bk-color,#A6FF00) 35%,transparent);border-radius:var(--r-md);padding:8px 16px;line-height:1.2} .ce-bm-bonus-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--bk-color,#A6FF00) 80%,#FFFFFF);font-weight:700} .ce-bm-bonus-text{font-size:14px;font-weight:600;color:var(--c-text-1);margin-top:2px} .ce-btn-lg{height:54px;font-size:16px;padding:0 28px;font-weight:700;letter-spacing:.01em} .ce-bm-disclaimer-mini{margin:12px 0 0;color:var(--c-text-3);font-size:11px;letter-spacing:.02em} .ce-bm-disclaimer-mini a{color:var(--c-text-2);text-decoration:underline} .ce-bm-hero-right{display:flex;justify-content:flex-end;align-items:center;position:relative} @media (max-width:900px){.ce-bm-hero-right{justify-content:center}} .ce-bm-mockup{max-width:360px;width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.4));transform:rotate(2deg);transition:transform .3s ease} .ce-bm-mockup:hover{transform:rotate(0deg)} /* Quick stats strip */ .ce-bm-stats{background:linear-gradient(90deg,color-mix(in srgb,var(--bk-color,#A6FF00) 8%,#0D1117) 0%,#0D1117 100%);border-bottom:var(--b-soft);padding:24px 0} .ce-bm-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} @media (max-width:680px){.ce-bm-stats-grid{grid-template-columns:repeat(2,1fr);gap:16px}} .ce-bm-stat{display:flex;align-items:center;gap:14px;padding:8px 0} .ce-bm-stat-icon{flex-shrink:0;width:44px;height:44px;border-radius:var(--r-md);background:color-mix(in srgb,var(--bk-color,#A6FF00) 14%,transparent);color:var(--bk-color,#A6FF00);display:flex;align-items:center;justify-content:center} .ce-bm-stat-icon svg{width:22px;height:22px} .ce-bm-stat-value{display:block;font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--c-text-1);line-height:1.1} .ce-bm-stat-label{display:block;color:var(--c-text-3);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:2px} .ce-bm-page > section{padding:40px 0;border-bottom:var(--b-soft)} .ce-bm-page > section:last-of-type{border-bottom:0} .ce-bm-page > section h2{margin:0 0 20px;font-size:clamp(20px,1.5vw + 14px,28px)} .ce-bm-verdict-text{font-size:18px;line-height:1.6;color:var(--c-text-1);max-width:820px;margin:0} .ce-bm-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:32px 0!important;border:0!important} .ce-bm-feature{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-lg);padding:24px;transition:border-color .15s ease,transform .15s ease;position:relative;overflow:hidden} .ce-bm-feature:hover{border-color:color-mix(in srgb,var(--bk-color,#A6FF00) 40%,transparent);transform:translateY(-2px)} .ce-bm-feature::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--bk-color,#A6FF00) 0%,transparent 100%);opacity:0.6} .ce-bm-feature-icon{width:44px;height:44px;border-radius:10px;background:color-mix(in srgb,var(--bk-color,#A6FF00) 14%,transparent);color:var(--bk-color,#A6FF00);display:flex;align-items:center;justify-content:center;margin-bottom:14px} .ce-bm-feature-icon svg{width:22px;height:22px} .ce-bm-feature h3{margin:0 0 6px;font-size:16px;font-family:var(--font-body);font-weight:700;letter-spacing:0} .ce-bm-feature p{margin:0;color:var(--c-text-2);font-size:13px;line-height:1.55} .ce-bm-proscons{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media (max-width:680px){.ce-bm-proscons{grid-template-columns:1fr}} .ce-bm-procon{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-lg);padding:24px 28px} .ce-bm-procon h3{margin:0 0 16px;font-size:18px;font-family:var(--font-display);font-weight:700;display:flex;align-items:center;gap:8px} .ce-bm-procon h3 svg{width:24px;height:24px} .ce-bm-pros h3{color:var(--c-lime)} .ce-bm-cons h3{color:var(--c-red)} .ce-bm-procon ul{list-style:none;padding:0;margin:0} .ce-bm-procon li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);color:var(--c-text-1);font-size:14px;line-height:1.55;display:flex;align-items:flex-start;gap:10px} .ce-bm-procon li:last-child{border-bottom:0} .ce-bm-procon-icon{flex-shrink:0;margin-top:2px} .ce-bm-procon-icon svg{width:18px;height:18px} .ce-bm-pros .ce-bm-procon-icon{color:var(--c-lime)} .ce-bm-cons .ce-bm-procon-icon{color:var(--c-red)} .ce-bm-breakdown-inner{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center} @media (max-width:680px){.ce-bm-breakdown-inner{grid-template-columns:1fr;gap:24px;justify-items:center}} .ce-bm-gauge{position:relative;width:160px;height:160px;flex-shrink:0} .ce-bm-gauge svg{width:100%;height:100%} .ce-bm-gauge-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ce-bm-gauge-text strong{font-family:var(--font-display);font-size:42px;font-weight:700;line-height:1;color:var(--c-text-1)} .ce-bm-gauge-text span{color:var(--c-text-3);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:4px} .ce-bm-breakdown-icon{display:inline-flex;width:24px;height:24px;border-radius:6px;background:color-mix(in srgb,var(--bk-color,#A6FF00) 14%,transparent);color:var(--bk-color,#A6FF00);align-items:center;justify-content:center;margin-right:10px;vertical-align:-6px} .ce-bm-breakdown-icon svg{width:14px;height:14px} .ce-bm-breakdown-table{width:100%;border-collapse:collapse} .ce-bm-breakdown-table th{text-align:left;padding:14px 16px 14px 0;color:var(--c-text-1);font-weight:500;font-size:14px;width:220px;border-bottom:var(--b-soft)} .ce-bm-breakdown-table td{padding:12px 0;border-bottom:var(--b-soft);vertical-align:middle} .ce-bm-breakdown-table tr:last-child th,.ce-bm-breakdown-table tr:last-child td{border-bottom:0} .ce-bm-breakdown-bar{width:100%} .ce-bm-breakdown-track{display:block;width:100%;max-width:280px;height:8px;background:var(--c-slate-2);border-radius:var(--r-pill);overflow:hidden} .ce-bm-breakdown-fill{display:block;height:100%;border-radius:var(--r-pill);transition:width .4s ease} .ce-bm-breakdown-score{padding-left:16px;color:var(--c-text-1);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;width:80px;text-align:right} .ce-bm-markets h2{display:flex;align-items:center;gap:10px} .ce-bm-markets h2 svg{width:28px;height:28px;color:var(--bk-color,#A6FF00)} .ce-bm-markets-grid{display:flex;flex-wrap:wrap;gap:8px} .ce-bm-market-pill{display:inline-flex;align-items:center;background:var(--c-slate);border:1px solid color-mix(in srgb,var(--bk-color,#A6FF00) 20%,rgba(255,255,255,.06));border-radius:var(--r-pill);padding:8px 16px;color:var(--c-text-1);font-size:13px;font-weight:500;transition:background .15s ease,border-color .15s ease} .ce-bm-market-pill:hover{background:color-mix(in srgb,var(--bk-color,#A6FF00) 10%,var(--c-slate));border-color:var(--bk-color,#A6FF00)} /* Comparison cards */ .ce-bm-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .ce-bm-compare-card{position:relative;background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;transition:border-color .15s ease} .ce-bm-compare-card:hover{border-color:var(--c-lime)} .ce-bm-compare-card.is-current{border-color:var(--bk-color,#A6FF00);background:color-mix(in srgb,var(--bk-color,#A6FF00) 6%,var(--c-slate))} .ce-bm-compare-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--bk-color,#A6FF00);color:#0D1117;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-pill)} .ce-bm-compare-logo{height:48px;display:flex;align-items:center;justify-content:center;width:100%;padding:4px 8px;box-sizing:border-box;overflow:hidden} .ce-bm-compare-logo img,.ce-bm-compare-svg{height:36px;width:auto;max-width:100%;display:block;overflow:visible} .ce-bm-compare-rating{color:var(--c-text-2);font-size:14px} .ce-bm-compare-rating strong{color:var(--c-text-1);font-family:var(--font-display);font-size:24px;font-weight:700} .ce-bm-compare-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;color:var(--c-text-2);font-size:13px;width:100%} .ce-bm-compare-features li{display:flex;align-items:center;gap:8px;justify-content:center} .ce-bm-compare-features svg{width:18px;height:18px} .ce-bm-compare-card .ce-btn{width:100%} .ce-bm-review .ce-prose{max-width:820px} .ce-bm-review .ce-prose h2{margin-top:1.4em;font-size:24px} .ce-bm-review .ce-prose .ce-lede{font-size:18px;color:var(--c-text-2);margin-bottom:1.5em} .ce-bm-quickfacts-list{display:grid;grid-template-columns:200px 1fr;gap:8px 24px;margin:0;max-width:720px} .ce-bm-quickfacts-list dt{color:var(--c-text-3);font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding:8px 0;border-bottom:var(--b-soft)} .ce-bm-quickfacts-list dd{margin:0;color:var(--c-text-1);font-size:14px;padding:8px 0;border-bottom:var(--b-soft)} .ce-bm-quickfacts-list dd.ce-bm-restricted{color:var(--c-red)} .ce-bm-related{padding-top:8px!important} /* Methodology page */ .ce-method-hero .ce-bm-hero-inner{grid-template-columns:1fr 1.1fr} @media (max-width:900px){.ce-method-hero .ce-bm-hero-inner{grid-template-columns:1fr}} .ce-method-h1{margin:8px 0 16px;font-size:clamp(30px,3vw + 14px,52px);line-height:1.05;letter-spacing:-.02em;font-family:var(--font-display);font-weight:700} .ce-method-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px} .ce-method-flow{max-width:100%;height:auto;width:100%;filter:drop-shadow(0 20px 50px rgba(0,0,0,.4))} .ce-method-page > section{padding:48px 0;border-bottom:var(--b-soft)} .ce-method-page > section:last-of-type{border-bottom:0} .ce-method-page h2{font-size:clamp(24px,2vw + 12px,34px);margin:0 0 16px;font-family:var(--font-display);font-weight:700;letter-spacing:-.01em} .ce-method-page h3{font-size:clamp(18px,1vw + 14px,22px);margin:32px 0 12px;font-family:var(--font-display);font-weight:700} .ce-method-lede{font-size:18px;color:var(--c-text-2);max-width:820px;line-height:1.55;margin:0 0 28px} .ce-muted{color:var(--c-text-3);font-size:13px;display:inline-block;margin-top:2px} .ce-method-step{position:relative} .ce-method-step-num{position:absolute;top:14px;right:18px;font-family:var(--font-display);font-weight:700;font-size:42px;line-height:1;color:rgba(166,255,0,0.16);letter-spacing:-2px} .ce-method-table{width:100%;max-width:820px;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:8px 0} .ce-method-table th{text-align:left;color:var(--c-text-3);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:10px 12px;border-bottom:var(--b-soft)} .ce-method-table td{padding:14px 12px;border-bottom:var(--b-soft);color:var(--c-text-1);font-size:14px;line-height:1.5;vertical-align:top} .ce-method-table td:last-child{text-align:right;white-space:nowrap} .ce-method-table tr:last-child td{border-bottom:0} .ce-method-worked tr:last-child td{background:rgba(166,255,0,0.06)} .ce-method-worked tr:last-child td:last-child{color:var(--c-lime);font-size:16px} .ce-method-code{background:var(--c-slate);border:var(--b-soft);border-left:3px solid var(--c-lime);border-radius:var(--r-md);padding:20px 24px;margin:16px 0 24px;overflow-x:auto} .ce-method-code pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:13px;line-height:1.7;color:var(--c-text-1)} .ce-method-code code{background:transparent;padding:0;font-size:inherit} .ce-conf-bands{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:8px 0 24px} .ce-conf-band{position:relative;background:var(--c-slate);border:var(--b-soft);border-left:4px solid var(--c-text-3);border-radius:var(--r-md);padding:18px 20px} .ce-conf-band.is-strong{border-left-color:var(--c-lime)} .ce-conf-band.is-medium{border-left-color:var(--c-cyan)} .ce-conf-band.is-low{border-left-color:var(--c-amber)} .ce-conf-band.is-weak{border-left-color:var(--c-red)} .ce-conf-range{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--c-text-1);margin-bottom:4px} .ce-conf-band strong{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px} .ce-conf-band.is-strong strong{color:var(--c-lime)} .ce-conf-band.is-medium strong{color:var(--c-cyan)} .ce-conf-band.is-low strong{color:var(--c-amber)} .ce-conf-band.is-weak strong{color:var(--c-red)} .ce-conf-band p{margin:0;font-size:13px;color:var(--c-text-2);line-height:1.55} .ce-method-anti-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .ce-method-anti-card{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-md);padding:20px;display:flex;flex-direction:column;gap:8px} .ce-method-anti-icon{width:36px;height:36px;border-radius:10px;background:rgba(239,68,68,0.12);color:var(--c-red);display:flex;align-items:center;justify-content:center} .ce-method-anti-icon svg{width:20px;height:20px} .ce-method-anti-card h3{margin:0;font-size:16px;font-family:var(--font-body);font-weight:700} .ce-method-anti-card p{margin:0;font-size:13px;color:var(--c-text-2);line-height:1.55} .ce-method-commit-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:12px;max-width:820px} .ce-method-commit-list li{display:flex;gap:12px;align-items:flex-start;color:var(--c-text-1);font-size:15px;line-height:1.55;padding:14px 18px;background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-md)} .ce-method-commit-list svg{flex-shrink:0;width:20px;height:20px;color:var(--c-lime);margin-top:1px} .ce-method-cta{text-align:center} .ce-method-cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px} /* Sportsbooks archive (/sportsbooks/) */ .ce-sb-page > section{padding:48px 0;border-bottom:var(--b-soft)} .ce-sb-page > section:last-of-type{border-bottom:0} .ce-sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-top:8px} .ce-sb-card{position:relative;display:flex;flex-direction:column;background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-lg);padding:24px;transition:border-color .15s ease,transform .15s ease;overflow:hidden} .ce-sb-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--bk-color,#A6FF00) 0%,transparent 100%);opacity:.7} .ce-sb-card:hover{border-color:color-mix(in srgb,var(--bk-color,#A6FF00) 50%,transparent);transform:translateY(-2px)} .ce-sb-card.is-featured{border-color:color-mix(in srgb,var(--bk-color,#A6FF00) 45%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--bk-color,#A6FF00) 4%,var(--c-slate)) 0%,var(--c-slate) 60%)} .ce-sb-card-badge{position:absolute;top:14px;right:14px;background:var(--bk-color,#A6FF00);color:#0D1117;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:var(--r-pill)} .ce-sb-card-head{display:flex;align-items:center;gap:14px;margin:4px 0 14px} .ce-sb-card-logo{flex-shrink:0;width:100px;height:48px;display:flex;align-items:center;justify-content:flex-start;padding:4px 0;box-sizing:border-box;overflow:hidden} .ce-sb-card-logo svg{height:32px;width:auto;max-width:100%;display:block;overflow:visible} .ce-sb-card-mark{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-md);background:color-mix(in srgb,var(--bk-color,#A6FF00) 16%,var(--c-slate-2));color:var(--bk-color,#A6FF00);font-weight:700;font-size:14px;letter-spacing:.04em} .ce-sb-card-id{flex:1;min-width:0} .ce-sb-card-name{margin:0 0 4px;font-size:18px;font-family:var(--font-body);font-weight:700;color:var(--c-text-1)} .ce-sb-card-rating{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;color:var(--c-text-2)} .ce-sb-card-stars{color:var(--bk-color,#A6FF00);font-size:14px;letter-spacing:1px} .ce-sb-card-rating strong{color:var(--c-text-1);font-family:var(--font-display);font-weight:700} .ce-sb-card-tagline{margin:0 0 12px;color:var(--c-text-2);font-size:13px;line-height:1.5} .ce-sb-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px} .ce-sb-card-markets{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px} .ce-sb-card-markets li{display:flex;align-items:center;gap:8px;color:var(--c-text-1);font-size:13px;line-height:1.4} .ce-sb-card-markets svg{flex-shrink:0;width:14px;height:14px;color:var(--c-lime)} .ce-sb-card-bonus{margin:0 0 16px;padding:12px 14px;background:rgba(255,255,255,.02);border:1px solid color-mix(in srgb,var(--bk-color,#A6FF00) 18%,transparent);border-radius:var(--r-md);display:flex;flex-direction:column;gap:2px} .ce-sb-card-bonus-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:color-mix(in srgb,var(--bk-color,#A6FF00) 75%,var(--c-text-2));font-weight:700} .ce-sb-card-bonus-text{font-size:13px;color:var(--c-text-1);line-height:1.4} .ce-sb-card-cta{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap} .ce-sb-card-cta .ce-btn{flex:1;min-width:140px} @media (max-width:520px){.ce-sb-card-cta .ce-btn{flex:1 1 100%}} /* Best for callout tiles */ .ce-sb-best-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:8px} .ce-sb-best{position:relative;display:flex;flex-direction:column;background:var(--c-slate);border:var(--b-soft);border-left:4px solid var(--bk-color,#A6FF00);border-radius:var(--r-md);padding:20px 22px;color:var(--c-text-1);text-decoration:none;transition:background .15s ease,transform .15s ease;overflow:hidden;min-height:160px} .ce-sb-best:hover{background:color-mix(in srgb,var(--bk-color,#A6FF00) 5%,var(--c-slate));transform:translateY(-2px);color:var(--c-text-1)} .ce-sb-best-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-3);font-weight:600;margin-bottom:4px} .ce-sb-best-title{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--c-text-1);line-height:1.1;margin-bottom:4px} .ce-sb-best-headline{font-size:13px;color:var(--bk-color,#A6FF00);font-weight:600;margin-bottom:10px} .ce-sb-best-blurb{margin:0;color:var(--c-text-2);font-size:13px;line-height:1.55} .ce-sb-best-arrow{position:absolute;top:18px;right:18px;color:var(--bk-color,#A6FF00);font-size:20px;opacity:.55;transition:transform .15s ease,opacity .15s ease} .ce-sb-best:hover .ce-sb-best-arrow{transform:translateX(4px);opacity:1} /* HTML sitemap (/sitemap/) */ .ce-sitemap-page{padding-top:32px} .ce-sitemap-header{margin:0 0 28px;max-width:780px} .ce-sitemap-header h1{margin:6px 0 8px} .ce-sitemap-lede{margin:0;color:var(--c-text-2);font-size:15px;line-height:1.55} .ce-sitemap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:32px} .ce-sitemap-section{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-lg);padding:24px 26px;display:flex;flex-direction:column;gap:14px} .ce-sitemap-section-title{margin:0;display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--c-text-1);letter-spacing:0} .ce-sitemap-section-title svg{width:20px;height:20px;color:var(--c-lime);flex-shrink:0} .ce-sitemap-count{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--c-lime) 14%,transparent);color:var(--c-lime);font-family:var(--font-mono,var(--font-body));font-size:12px;font-weight:600;font-variant-numeric:tabular-nums} .ce-sitemap-subsection-title{margin:8px 0 0;font-size:11px;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--c-text-3)} .ce-sitemap-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px} .ce-sitemap-list li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03);line-height:1.4} .ce-sitemap-list li:last-child{border-bottom:0} .ce-sitemap-list a{color:var(--c-text-1);font-size:14px;text-decoration:none;display:inline-block;transition:color .12s ease} .ce-sitemap-list a:hover{color:var(--c-lime)} .ce-sitemap-list a strong{font-weight:600} .ce-sitemap-list-dense{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0 12px} .ce-sitemap-list-dense li{border-bottom:1px solid rgba(255,255,255,.03)} .ce-sitemap-meta{color:var(--c-text-3);font-size:12px;font-weight:400} .ce-sitemap-empty{color:var(--c-text-3);font-size:13px;font-style:italic} .ce-sitemap-note{margin:6px 0 0;color:var(--c-text-3);font-size:12px;line-height:1.5} @media (max-width:520px){ .ce-sitemap-grid{grid-template-columns:1fr} .ce-sitemap-section{padding:20px 22px} } /* Sticky mobile CTA */ .ce-sticky-cta{position:fixed;left:0;right:0;bottom:0;padding:12px 16px;background:rgba(13,17,23,.96);backdrop-filter:blur(10px);border-top:var(--b-soft);display:none;z-index:30} .ce-sticky-cta .ce-btn{width:100%} @media (max-width:768px){.ce-sticky-cta{display:block}.ce-main{padding-bottom:72px}} /* FAQ */ .fbe-faq{margin:32px 0} .fbe-faq dl{display:grid;gap:8px} .fbe-faq dt{font-weight:600;font-size:16px;padding:14px 16px;background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-md);cursor:pointer;position:relative} .fbe-faq dt::after{content:"+";position:absolute;right:16px;color:var(--c-lime);font-weight:700} .fbe-faq dd{margin:0 0 8px;padding:0 16px 16px;color:var(--c-text-2);font-size:15px;line-height:1.6;background:var(--c-slate);border:var(--b-soft);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);margin-top:-8px} /* Disclaimer / updated badge */ .fbe-disclaimer{margin:16px 0;padding:12px 16px;background:var(--c-slate-2);border-left:3px solid var(--c-amber);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--c-text-2);font-size:13px;line-height:1.55} .fbe-updated{display:inline-block;color:var(--c-text-3);font-size:12px} /* Search form */ .ce-search-form{display:flex;gap:8px;align-items:center} .ce-search-input{background:var(--c-slate-2);border:var(--b-soft);border-radius:var(--r-md);color:var(--c-text-1);padding:10px 14px;font-size:14px;min-width:240px} .ce-search-input:focus{outline:0;border-color:var(--c-lime)} .ce-search-submit{background:var(--c-lime);color:var(--c-charcoal);border:0;border-radius:var(--r-md);padding:10px 16px;font-weight:600;cursor:pointer} /* Pagination */ .wp-block-query-pagination,.navigation.pagination{display:flex;gap:8px;justify-content:center;margin-top:32px} .page-numbers{padding:8px 12px;border-radius:var(--r-md);background:var(--c-slate);border:var(--b-soft);color:var(--c-text-2);text-decoration:none} .page-numbers:hover,.page-numbers.current{background:var(--c-lime);color:var(--c-charcoal);border-color:var(--c-lime)} /* Prediction table -> mobile cards. Designed match card per row instead of a flat key-value dump. Grid lays out: row 1: league + kickoff (small, muted) row 2: match name (large, bold) row 3: prediction (lime accent strip) row 4: confidence | best odds | sportsbook badge (three equal columns) row 5: Bet Now CTA (full width) */ @media (max-width:680px){ .ce-prediction-wrap{border:0;background:transparent} .ce-prediction-toolbar{padding:0 0 12px;border-bottom:0} .ce-prediction-table{border-collapse:separate} .ce-prediction-table thead{display:none} .ce-prediction-table tbody{display:flex;flex-direction:column;gap:12px} .ce-prediction-table tbody tr{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas: "meta meta" "match match" "pred pred" "conf odds" "cta cta"; gap:10px 12px; padding:16px; border:var(--b-soft); border-radius:var(--r-lg); background:var(--c-slate); box-shadow:var(--shadow-card) } .ce-prediction-table tbody td{ padding:0; border:0; display:block; font-size:14px; } .ce-prediction-table tbody td::before{display:none} /* Meta row: league + kickoff inline (we have two separate cells, so flex them on a single line with gap and uppercase eyebrow styling) */ .ce-prediction-table tbody td[data-label="Kickoff"]{ grid-area:meta; display:flex; align-items:baseline; gap:10px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--c-text-3); } .ce-prediction-table tbody td[data-label="Kickoff"] .ce-pred-time{ color:var(--c-text-1); font-weight:600; } .ce-prediction-table tbody td[data-label="Kickoff"] .ce-pred-league{ color:var(--c-text-3); font-size:12px; } .ce-prediction-table tbody td[data-label="Kickoff"] .ce-pred-league::before{ content:"\00b7"; padding:0 6px; color:var(--c-text-3); } /* Match name: hero of the card */ .ce-prediction-table tbody td[data-label="Match"]{ grid-area:match; font-size:18px; font-weight:700; line-height:1.25; color:var(--c-text-1); } .ce-prediction-table tbody td[data-label="Match"] a{color:var(--c-text-1)} /* Prediction line: lime accent chip */ .ce-prediction-table tbody td[data-label="Prediction"]{ grid-area:pred; font-size:13px; font-weight:700; color:var(--c-lime); text-transform:uppercase; letter-spacing:.06em; padding:8px 10px; background:rgba(166,255,0,.08); border-radius:var(--r-sm); } /* Two-column stat strip: confidence + best odds */ .ce-prediction-table tbody td[data-label="Confidence"], .ce-prediction-table tbody td[data-label="Best odds"]{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px 4px; background:var(--c-slate-2); border-radius:var(--r-sm); } .ce-prediction-table tbody td[data-label="Confidence"]{grid-area:conf} .ce-prediction-table tbody td[data-label="Best odds"]{grid-area:odds;font-weight:700;color:var(--c-text-1);font-size:18px} .ce-prediction-table tbody td[data-label="Confidence"]::after, .ce-prediction-table tbody td[data-label="Best odds"]::after{ content:attr(data-label); display:block; order:-1; color:var(--c-text-3); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; } /* Skip the Sportsbook column entirely on mobile. The brand is communicated by the "Best price at X" line that sits above the Bet Now button (see the .ce-pred-best-at rule inside the Action cell below). Fighting the desktop .ce-pred-book-link width on mobile across three attempts cost too much time — the brand surface here works without any cascade conflict. */ .ce-prediction-table tbody td[data-label="Sportsbook"]{display:none !important} /* "Best price at Stake" appears above the Bet Now button on mobile only. */ .ce-prediction-table tbody .ce-pred-best-at{ display:block !important; margin:0 0 8px; color:var(--c-text-3); font-size:13px; text-align:center; } .ce-prediction-table tbody .ce-pred-best-at strong{ color:var(--c-text-1); font-weight:700; } /* CTA row */ .ce-prediction-table tbody td[data-label="Action"]{grid-area:cta} .ce-prediction-table tbody td[data-label="Action"] .ce-btn{ width:100%; height:48px; font-size:15px; } } /* ============================================================ World Cup 2026 crypto sportsbook ranking page ============================================================ */ .ce-wc-page{padding-bottom:48px} .ce-wc-section{margin-top:48px} .ce-wc-section h2{font-size:clamp(22px,1.6vw + 14px,30px);margin:0 0 12px;letter-spacing:-.01em} .ce-wc-section .ce-method-lede{color:var(--c-text-2);font-size:16px;line-height:1.6;max-width:820px;margin:0 0 24px} .ce-wc-intro p{color:var(--c-text-2);line-height:1.7;margin:0 0 14px} /* Top ranking table */ .ce-wc-rank-table-wrap{overflow-x:auto;border:var(--b-soft);border-radius:var(--r-lg);background:var(--c-slate)} .ce-wc-rank-table{width:100%;border-collapse:collapse;font-size:15px;min-width:760px} .ce-wc-rank-table thead th{background:var(--c-slate-2);color:var(--c-text-3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:14px 16px;border-bottom:var(--b-soft)} .ce-wc-rank-table tbody td{padding:18px 16px;border-bottom:var(--b-soft);vertical-align:middle} .ce-wc-rank-table tbody tr:last-child td{border-bottom:0} .ce-wc-rank-table tbody tr:hover{background:rgba(255,255,255,0.02)} .ce-wc-rank-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-pill);background:var(--c-slate-2);font-family:var(--font-display);font-weight:700;color:var(--c-lime)} .ce-wc-rank-table tbody tr:first-child .ce-wc-rank-num{background:rgba(166,255,0,.16);color:var(--c-lime)} .ce-wc-rank-name{display:inline-flex;align-items:center;gap:14px;color:inherit} .ce-wc-rank-name strong{font-size:16px} .ce-wc-rank-badge{display:inline-flex;align-items:center;justify-content:center;width:120px;height:42px;padding:0 14px;border-radius:var(--r-md);background:var(--c-slate-2);border:1px solid rgba(255,255,255,0.04);box-sizing:border-box;flex-shrink:0;overflow:hidden} .ce-wc-rank-badge .ce-sb-badge-svg{height:26px;width:auto;max-width:100%;display:block;overflow:visible} .ce-wc-rank-badge .ce-sb-badge-mono{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--c-lime)} .ce-wc-score{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--c-text-1);font-variant-numeric:tabular-nums} .ce-wc-score-max{font-size:13px;color:var(--c-text-3);font-weight:600;margin-left:2px} .ce-wc-best-for{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);background:rgba(166,255,0,.12);color:var(--c-lime)} .ce-wc-bonus-cell{color:var(--c-text-2);font-size:14px;max-width:280px} .ce-wc-th-cta{width:1%;white-space:nowrap} /* Scoring rubric grid */ .ce-wc-rubric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} .ce-wc-rubric-card{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-md);padding:20px;transition:border-color .15s ease} .ce-wc-rubric-card:hover{border-color:var(--c-lime)} .ce-wc-rubric-head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px} .ce-wc-rubric-weight{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--c-lime);line-height:1;font-variant-numeric:tabular-nums} .ce-wc-rubric-weight span{font-size:14px;color:var(--c-text-3);font-weight:600;margin-left:2px} .ce-wc-rubric-name{margin:0;font-size:16px;font-weight:700;color:var(--c-text-1)} .ce-wc-rubric-desc{margin:0;color:var(--c-text-2);font-size:14px;line-height:1.55} .ce-wc-rubric-foot{margin-top:18px;color:var(--c-text-3);font-size:13px} .ce-wc-rubric-foot a{color:var(--c-text-2);text-decoration:underline} /* Operator deep dive cards */ .ce-wc-op{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-lg);padding:28px;margin-top:24px;scroll-margin-top:80px} .ce-wc-op:target{border-color:var(--c-lime);box-shadow:0 0 0 1px var(--c-lime) inset} .ce-wc-op-head{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:20px;border-bottom:var(--b-soft);margin-bottom:20px} .ce-wc-op-rank{display:flex;flex-direction:column;gap:6px;align-items:flex-start;flex-shrink:0} .ce-wc-op-rank-num{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--c-lime);background:rgba(166,255,0,.12);padding:4px 10px;border-radius:var(--r-pill)} .ce-wc-op-rank-tag{font-size:11px;font-weight:600;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.06em} .ce-wc-op-id{display:flex;align-items:center;gap:18px;flex:1;min-width:240px} .ce-wc-op-logo{flex-shrink:0;width:140px;height:62px;border-radius:var(--r-md);background:var(--c-slate-2);border:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;padding:8px 14px;box-sizing:border-box;overflow:hidden} .ce-wc-op-logo .ce-sb-badge-svg{height:34px;width:auto;max-width:100%;display:block;overflow:visible} .ce-wc-op-logo .ce-sb-badge-mono{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--c-lime)} .ce-wc-op-name{margin:0 0 4px;font-size:24px;font-weight:700;line-height:1.1} .ce-wc-op-score-wrap{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .ce-wc-op-score{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--c-lime);font-variant-numeric:tabular-nums} .ce-wc-op-score-max{font-size:14px;color:var(--c-text-3);font-weight:600;margin-left:2px} .ce-wc-op-score-label{font-size:12px;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.06em} .ce-wc-op-cta{flex-shrink:0} .ce-wc-op-body h4{font-size:15px;font-weight:700;color:var(--c-text-1);margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em} .ce-wc-op-verdict p{margin:0 0 18px;color:var(--c-text-2);line-height:1.7;font-size:15px} .ce-wc-op-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:20px} .ce-wc-op-cols ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px} .ce-wc-op-cols li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--c-text-2)} .ce-wc-op-tick{flex-shrink:0;color:var(--c-lime);display:inline-flex} .ce-wc-op-cross{flex-shrink:0;color:var(--c-amber,#FFB020);display:inline-flex} .ce-wc-op-bets{padding:16px 18px;background:var(--c-slate-2);border-radius:var(--r-md);margin-bottom:20px;border-left:3px solid var(--c-lime)} .ce-wc-op-bets p{margin:8px 0 0;color:var(--c-text-2);font-size:14px;line-height:1.6} /* Fact-sheet style: one spec per row, label on the left, value on the right. Reads like a product spec table rather than a 5-column strip of competing chips, so scanning by category is easier. */ .ce-wc-op-specs{display:flex;flex-direction:column;gap:0;margin:0;background:var(--c-slate-2);border:1px solid rgba(255,255,255,0.04);border-radius:var(--r-md);overflow:hidden} .ce-wc-op-specs > div{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,0.04);align-items:baseline} .ce-wc-op-specs > div:last-child{border-bottom:0} .ce-wc-op-specs dt{font-size:11px;font-weight:700;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.08em;margin:0} .ce-wc-op-specs dd{margin:0;font-size:14px;font-weight:500;color:var(--c-text-1);line-height:1.55} @media (max-width:560px){ .ce-wc-op-specs > div{grid-template-columns:1fr;gap:4px;padding:12px 16px} .ce-wc-op-specs dd{font-size:14px} } /* Coverage + coin matrix tables */ .ce-wc-matrix-wrap{overflow-x:auto;border:var(--b-soft);border-radius:var(--r-lg);background:var(--c-slate)} .ce-wc-matrix{width:100%;border-collapse:collapse;font-size:14px;min-width:560px} .ce-wc-matrix thead th{background:var(--c-slate-2);padding:14px 12px;border-bottom:var(--b-soft);color:var(--c-text-3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-align:center} .ce-wc-matrix thead th:first-child{text-align:left} .ce-wc-matrix tbody th{padding:14px 12px;border-bottom:var(--b-soft);color:var(--c-text-1);font-weight:600;text-align:left} .ce-wc-matrix tbody td{padding:14px 12px;border-bottom:var(--b-soft);text-align:center} .ce-wc-matrix tbody tr:last-child th, .ce-wc-matrix tbody tr:last-child td{border-bottom:0} .ce-wc-matrix-head{display:inline-flex;align-items:center;justify-content:center;width:84px;height:32px;color:inherit} .ce-wc-matrix-head .ce-sb-badge-svg{height:20px;width:auto;max-width:100%;overflow:visible} .ce-wc-matrix-head .ce-sb-badge-mono{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.06em;color:var(--c-lime)} .ce-wc-cell.is-yes{color:var(--c-lime)} .ce-wc-cell.is-no{color:var(--c-text-3);opacity:.6} .ce-wc-cell svg{width:18px;height:18px} /* Strategy + risk grids. Strategy uses 3 columns so 5 cards balance to 3+2 instead of 4+1 orphan; risk stays at 3 cards in a denser grid. */ .ce-wc-strategy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px} .ce-wc-risk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px} .ce-wc-strategy-card,.ce-wc-risk-card{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-md);padding:24px} /* Strategy card: number lives in its own grid column on the left so long headings never run under it, and the visual rhythm of 01..05 stays consistent regardless of heading length. The number row-spans both content rows so the heading and paragraph both share column 2 — without the span the paragraph would fall back into column 1 and squeeze the heading into one-word-per-line wrapping. */ .ce-wc-strategy-card{display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto 1fr;gap:6px 18px;align-items:start} .ce-wc-strategy-num{grid-column:1;grid-row:1 / span 2;font-family:var(--font-display);font-size:42px;font-weight:700;color:var(--c-lime);opacity:.45;line-height:1;font-variant-numeric:tabular-nums;padding-top:2px} .ce-wc-strategy-card h3,.ce-wc-risk-card h3{margin:0 0 10px;font-size:17px;font-weight:700;line-height:1.25} .ce-wc-strategy-card h3{margin-top:0} .ce-wc-strategy-card p,.ce-wc-risk-card p{margin:0;color:var(--c-text-2);font-size:14px;line-height:1.6} .ce-wc-risk-card a{color:var(--c-lime);text-decoration:underline} @media (max-width:520px){ .ce-wc-strategy-card{grid-template-columns:auto 1fr;gap:14px} .ce-wc-strategy-num{font-size:32px;min-width:42px} } /* Numbered checklist */ .ce-wc-checklist{list-style:none;padding:0;margin:0;counter-reset:wc-list;display:flex;flex-direction:column;gap:16px} .ce-wc-checklist li{background:var(--c-slate);border:var(--b-soft);border-radius:var(--r-md);padding:20px 24px 20px 70px;position:relative;counter-increment:wc-list} .ce-wc-checklist li::before{content:counter(wc-list,decimal-leading-zero);position:absolute;left:24px;top:18px;font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--c-lime);font-variant-numeric:tabular-nums} .ce-wc-checklist li strong{display:block;margin-bottom:6px;font-size:16px;color:var(--c-text-1)} .ce-wc-checklist li p{margin:0;color:var(--c-text-2);font-size:14px;line-height:1.6} /* Closing CTA */ .ce-wc-cta{margin-top:48px} .ce-wc-cta-card{background:linear-gradient(135deg,rgba(166,255,0,.10) 0,var(--c-slate) 60%);border:var(--b-soft);border-radius:var(--r-lg);padding:32px;text-align:center} .ce-wc-cta-card h2{margin:0 0 10px} .ce-wc-cta-card p{margin:0 auto 20px;color:var(--c-text-2);max-width:620px;line-height:1.6} .ce-wc-cta-card .ce-method-hero-cta{justify-content:center} .ce-wc-disclaimer{margin-top:32px;font-size:12px;color:var(--c-text-3);line-height:1.5} .ce-wc-disclaimer a{color:var(--c-text-2);text-decoration:underline} @media (max-width:760px){ .ce-wc-op-head{gap:16px} .ce-wc-op-id{min-width:0;width:100%} .ce-wc-op-cta{width:100%} .ce-wc-op-cta.ce-btn{width:100%} .ce-wc-op-cols{grid-template-columns:1fr;gap:18px} .ce-wc-op{padding:20px} .ce-wc-rank-table tbody td{padding:14px 12px} .ce-wc-rank-badge{width:80px;height:36px;padding:0 8px} .ce-wc-rank-badge .ce-sb-badge-svg{height:20px} .ce-wc-bonus-cell{display:none} } /* Client-side filter visibility — pure CSS, zero JS-driven DOM rebuild. Each is tagged with data-fbe-buckets="today week" and data-fbe- line="9.5"; the wrap carries data-fbe-active-bucket and data-fbe- active-line. Rules below hide rows whose attributes do not match the active filter. "week" matches every row (every row has 'week' in its bucket list) so the rule is a no-op for that selection. Empty active-line (the "All" button) is also a no-op. */ .ce-prediction-wrap[data-fbe-active-bucket="today"] tbody tr:not([data-fbe-buckets~="today"]) { display: none } .ce-prediction-wrap[data-fbe-active-bucket="tomorrow"] tbody tr:not([data-fbe-buckets~="tomorrow"]) { display: none } .ce-prediction-wrap[data-fbe-active-bucket="weekend"] tbody tr:not([data-fbe-buckets~="weekend"]) { display: none } .ce-prediction-wrap[data-fbe-active-line="8.5"] tbody tr[data-fbe-line]:not([data-fbe-line="8.5"]) { display: none } .ce-prediction-wrap[data-fbe-active-line="9.5"] tbody tr[data-fbe-line]:not([data-fbe-line="9.5"]) { display: none } .ce-prediction-wrap[data-fbe-active-line="10.5"] tbody tr[data-fbe-line]:not([data-fbe-line="10.5"]) { display: none } .ce-prediction-wrap[data-fbe-active-line="11.5"] tbody tr[data-fbe-line]:not([data-fbe-line="11.5"]) { display: none } .ce-prediction-wrap[data-fbe-active-line="3.5"] tbody tr[data-fbe-line]:not([data-fbe-line="3.5"]) { display: none } .ce-prediction-wrap[data-fbe-active-line="4.5"] tbody tr[data-fbe-line]:not([data-fbe-line="4.5"]) { display: none } .ce-prediction-wrap[data-fbe-active-line="5.5"] tbody tr[data-fbe-line]:not([data-fbe-line="5.5"]) { display: none } /* Filter pills are