/* =====================================================================
Global Sports BD — premium editorial theme (v7.0)
Scoped under body.is-modern. Magazine-grade typography (Fraunces serif),
paper-tone palette, refined dark editorial panels.
1. Tokens
2. Reset & typography
3. Header / topbar overrides
4. Cinematic hero
5. Live scores panel (dark)
6. Editorial mosaic (today's stories)
7. Twin sports columns (Football / Cricket)
8. Premium fixtures table (dark)
9. Watch editorial panel (dark)
10. Player portrait grid
11. Leagues row
12. Newsletter card
13. Footer
14. Responsive
===================================================================== */
/* ------------------------ 1. TOKENS ------------------------ */
body.is-modern {
/* Paper-tone palette */
--m-bg: #f6f3ec; /* warm cream */
--m-bg-2: #efebe2; /* deeper paper */
--m-surface: #ffffff;
--m-surface-2: #f1ede4; /* warm beige */
--m-line: #e3ddd0; /* warm divider */
--m-line-2: #d2cbb9;
/* Premium dark layer */
--m-deep: #15161a; /* near-black */
--m-deep-2: #1f2024; /* dark with hint of warmth */
--m-deep-3: #2c2d33;
--m-deep-line: #3a3b41;
/* Type */
--m-text: #1a1a1d;
--m-text-2: #57534e;
--m-text-3: #8a857a;
--m-text-4: #b3aea1;
--m-text-on-deep: #f6f3ec;
--m-text-on-deep-2: #c4bdac;
--m-text-on-deep-3: #8a857a;
/* Accents */
--m-red: #b91c1c;
--m-red-2: #991b1b;
--m-red-soft: #fdf2f2;
--m-blue: #1e40af;
--m-blue-2: #1e3a8a;
--m-blue-soft: #eef2ff;
--m-green: #166534;
--m-gold: #b8842c;
--m-gold-soft: #f7eccc;
--m-cream: #f5e9c8;
/* Effects */
--m-shadow-1: 0 1px 2px rgba(15,15,16,.04);
--m-shadow-2: 0 4px 12px -2px rgba(15,15,16,.06), 0 2px 4px -2px rgba(15,15,16,.04);
--m-shadow-3: 0 16px 32px -8px rgba(15,15,16,.10), 0 6px 12px -4px rgba(15,15,16,.06);
--m-shadow-4: 0 32px 64px -16px rgba(15,15,16,.18);
--m-shadow-deep: 0 32px 64px -16px rgba(15,15,16,.55);
--m-radius-sm: 6px;
--m-radius: 12px;
--m-radius-lg: 20px;
--m-radius-xl: 32px;
--m-container: 1320px;
--m-gutter: clamp(20px, 4vw, 48px);
--m-font-serif: 'Fraunces', 'Georgia', 'Times New Roman', serif;
--m-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--m-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
--m-easing: cubic-bezier(.22, 1, .36, 1);
--m-transition: 280ms var(--m-easing);
}
/* ------------------------ 2. RESET / TYPOGRAPHY ------------------------ */
body.is-modern {
background: var(--m-bg);
color: var(--m-text);
font-family: var(--m-font-sans);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body.is-modern .gsbd-main { background: var(--m-bg); }
body.is-modern a { color: var(--m-text); text-decoration: none; transition: color var(--m-transition); }
body.is-modern a:hover { color: var(--m-red); }
body.is-modern h1, body.is-modern h2, body.is-modern h3, body.is-modern h4 {
/* Set color explicitly so the legacy main.css `h1,h2,h3,h4 { color: var(--text-primary) }`
(which is light-gray for the dark theme) doesn't bleed through onto cream surfaces.
Dark-bg titles override below with higher specificity. */
color: var(--m-text);
margin: 0;
line-height: 1.04;
font-feature-settings: "ss01" 1, "ss02" 1;
}
/* Light-on-dark titles — body.is-modern prefix gives specificity (0,2,1) which beats
body.is-modern h1 at (0,1,2). Grouped here so the cascade is auditable in one place. */
body.is-modern .m-hero__title,
body.is-modern .m-twin__spotlight-title,
body.is-modern .m-page-hero__title,
body.is-modern .m-mhero__team-name,
body.is-modern .m-pcard__name,
body.is-modern .m-watch__nextup-teams { color: #fff; }
/* Watch promo v3 sits on light cream surface — title needs warm-dark text */
body.is-modern .m-watch__title { color: var(--m-text); }
body.is-modern .m-livepanel__title,
body.is-modern .m-fixtures__title,
body.is-modern .m-newsletter__title,
body.is-modern .m-sched__title { color: var(--m-text-on-deep); }
body.is-modern .m-mhero__team-score { color: #fff; }
/* Dark-panel link colours — beat the legacy body.is-modern a (0,1,2) by jumping to (0,2,1) */
body.is-modern .m-livepanel__more,
body.is-modern .m-fixtures__more {
color: var(--m-text-on-deep-2);
}
body.is-modern .m-livepanel__more:hover,
body.is-modern .m-fixtures__more:hover {
color: var(--m-gold);
}
/* Dark-panel rows — anchors that need cream text not warm-dark */
body.is-modern .m-sched__row,
body.is-modern .m-sched__row:hover {
color: var(--m-text-on-deep);
}
body.is-modern .m-mono {
font-family: var(--m-font-mono);
font-feature-settings: "tnum" 1, "ss01" 1;
}
.m-container {
max-width: var(--m-container);
margin-inline: auto;
padding-inline: var(--m-gutter);
}
.m-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--m-font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--m-text-3);
}
.m-eyebrow::before {
content: "";
width: 22px; height: 1px;
background: currentColor;
opacity: .55;
}
.m-eyebrow--red { color: var(--m-red); }
.m-eyebrow--blue { color: var(--m-blue); }
.m-eyebrow--gold { color: var(--m-gold); }
.m-eyebrow--cream { color: var(--m-cream); }
.m-eyebrow--light { color: var(--m-text-on-deep-2); }
.m-display {
font-family: var(--m-font-serif);
font-weight: 500;
letter-spacing: -0.024em;
line-height: 1.0;
font-variation-settings: "opsz" 144;
}
.m-display--italic { font-style: italic; font-weight: 400; }
/* ------------------------ 3. HEADER / TOPBAR overrides ------------------------ */
/* ---- Premium topbar ---- */
body.is-modern .gsbd-topbar {
background: linear-gradient(90deg, #0a0a0c 0%, #15161a 50%, #0a0a0c 100%);
border-bottom: 0;
color: var(--m-text-on-deep-2);
font-size: 13px;
position: relative;
overflow: hidden; /* CRITICAL: clip the auto-scrolling trending ticker */
isolation: isolate;
}
body.is-modern .gsbd-topbar::after {
/* Faint gold rule below the topbar — visual seam to the header */
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,132,44,.40), transparent);
pointer-events: none;
}
body.is-modern .gsbd-topbar__inner {
flex-wrap: nowrap;
min-width: 0;
gap: 20px;
padding-block: 12px; /* taller so the pulsing dot has room to breathe */
align-items: center;
}
body.is-modern .gsbd-topbar__left {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 20px;
/* No overflow:hidden here — was clipping the BST dot's pulse box-shadow.
The trending ticker (.gsbd-topbar__live-list) has its own overflow rule. */
}
body.is-modern .gsbd-topbar__right {
flex-shrink: 0;
}
body.is-modern .gsbd-topbar * { color: var(--m-text-on-deep-2) !important; }
body.is-modern .gsbd-topbar__clock {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
padding-right: 18px;
border-right: 1px solid rgba(255,255,255,.08);
position: relative;
}
body.is-modern .gsbd-topbar__clock-label {
/* Reset legacy red-pill styling */
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
color: var(--m-gold) !important;
font-weight: 700;
letter-spacing: .18em;
font-size: 11px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1;
}
/* Dot lives in the flex flow rather than absolute-positioned at left:0,
so its pulse box-shadow can never get clipped against the container edge. */
body.is-modern .gsbd-topbar__clock-label::before {
content: "";
flex: 0 0 auto;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--m-gold);
box-shadow: 0 0 0 0 rgba(184,132,44,.6);
animation: m-pulse 2.4s ease-out infinite;
}
body.is-modern .gsbd-topbar__clock-time {
color: var(--m-text-on-deep) !important;
font-family: var(--m-font-mono);
font-feature-settings: "tnum" 1;
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
}
body.is-modern .gsbd-topbar__date {
color: var(--m-text-on-deep-3) !important;
font-size: 12px;
letter-spacing: .04em;
}
body.is-modern .gsbd-topbar__live {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
display: flex;
align-items: center;
gap: 14px;
}
body.is-modern .gsbd-topbar__live-label {
color: var(--m-red) !important;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
flex-shrink: 0;
padding-right: 14px;
border-right: 1px solid rgba(255,255,255,.08);
}
body.is-modern .gsbd-topbar__live-list {
flex: 1; min-width: 0;
overflow: hidden;
white-space: nowrap;
}
body.is-modern .gsbd-topbar a { color: var(--m-text-on-deep-2) !important; transition: color var(--m-transition); }
body.is-modern .gsbd-topbar a:hover { color: var(--m-gold) !important; }
body.is-modern .gsbd-topbar__social {
display: inline-flex;
align-items: center;
gap: 6px;
padding-left: 18px;
border-left: 1px solid rgba(255,255,255,.08);
}
body.is-modern .gsbd-topbar__social a {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
display: grid; place-items: center;
color: var(--m-text-on-deep-2) !important;
transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
}
body.is-modern .gsbd-topbar__social a:hover {
background: var(--m-gold);
border-color: var(--m-gold);
color: var(--m-deep) !important;
transform: translateY(-1px);
}
body.is-modern .gsbd-header {
position: sticky; top: 0; z-index: 50;
background: rgba(246, 243, 236, .82);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--m-line);
box-shadow: none;
}
body.is-modern .gsbd-logo { color: var(--m-text); align-items: center; gap: 14px; }
body.is-modern .gsbd-logo strong {
color: var(--m-text);
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(20px, 1.55vw, 24px);
letter-spacing: -0.022em;
line-height: 1.04;
font-variation-settings: "opsz" 144;
}
body.is-modern .gsbd-logo em {
color: var(--m-text-3);
font-family: var(--m-font-sans);
font-style: normal;
font-size: 10.5px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
line-height: 1;
margin-top: 4px;
}
body.is-modern .gsbd-logo__mark {
font-family: var(--m-font-serif);
font-weight: 600;
letter-spacing: -0.02em;
background: var(--m-text);
color: var(--m-bg);
border-radius: 4px;
padding: 6px 8px;
font-size: 13px;
line-height: 1;
}
body.is-modern .gsbd-nav__list {
display: flex;
align-items: center;
gap: clamp(18px, 2.2vw, 32px);
}
body.is-modern .gsbd-nav__list > li > a {
position: relative;
color: var(--m-text-2) !important;
font-family: var(--m-font-sans) !important;
font-weight: 600 !important;
font-size: 11.5px !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
padding: 14px 0 !important;
transition: color var(--m-transition);
}
body.is-modern .gsbd-nav__list > li > a::after {
content: "";
position: absolute;
left: 0; right: 100%;
bottom: 8px;
height: 1px;
background: linear-gradient(90deg, var(--m-gold) 0%, var(--m-red) 100%);
transition: right 280ms cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
body.is-modern .gsbd-nav__list > li > a:hover,
body.is-modern .gsbd-nav__list > li.current-menu-item > a,
body.is-modern .gsbd-nav__list > li.current-cat > a,
body.is-modern .gsbd-nav__list > li.current-menu-parent > a {
color: var(--m-text) !important;
}
body.is-modern .gsbd-nav__list > li > a:hover::after,
body.is-modern .gsbd-nav__list > li.current-menu-item > a::after,
body.is-modern .gsbd-nav__list > li.current-menu-parent > a::after { right: 0; }
/* Caret next to parent items */
body.is-modern .gsbd-nav__list > li.menu-item-has-children > a::before,
body.is-modern .gsbd-nav__list > li:has(> .sub-menu) > a::before,
body.is-modern .gsbd-nav__list > li:has(> .children) > a::before {
content: "";
position: absolute;
right: -14px;
top: 50%;
width: 7px; height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-70%) rotate(45deg);
opacity: .55;
pointer-events: none;
transition: transform 220ms ease, opacity 220ms ease;
}
body.is-modern .gsbd-nav__list > li:hover > a::before,
body.is-modern .gsbd-nav__list > li:focus-within > a::before {
opacity: 1;
transform: translateY(-30%) rotate(225deg);
}
/* ---- Premium submenu panel ----
IMPORTANT: do not override `position` (legacy main.css uses position:absolute for floating)
and do not set `overflow:hidden` (that clips the hover bridge ::before, breaking hover). */
body.is-modern .gsbd-nav__list .sub-menu,
body.is-modern .gsbd-nav__list .children {
background: #fdfbf5 !important;
border: 1px solid var(--m-line) !important;
border-radius: 14px !important;
box-shadow:
0 1px 0 rgba(255,255,255,.7) inset,
0 24px 60px -28px rgba(21,22,26,.45),
0 8px 18px -10px rgba(21,22,26,.18) !important;
padding: 10px !important;
min-width: 260px !important;
}
body.is-modern .gsbd-nav__list .sub-menu::after,
body.is-modern .gsbd-nav__list .children::after {
content: "";
position: absolute;
left: 16px; right: 16px;
top: 1px;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--m-gold) 35%, var(--m-red) 65%, transparent 100%);
border-radius: 2px;
pointer-events: none;
}
body.is-modern .gsbd-nav__list .sub-menu li,
body.is-modern .gsbd-nav__list .children li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.is-modern .gsbd-nav__list .sub-menu li::before,
body.is-modern .gsbd-nav__list .sub-menu li::marker,
body.is-modern .gsbd-nav__list .children li::before,
body.is-modern .gsbd-nav__list .children li::marker {
content: none !important;
display: none !important;
}
body.is-modern .gsbd-nav__list .sub-menu a,
body.is-modern .gsbd-nav__list .children a {
position: relative;
display: block !important;
padding: 11px 16px 11px 22px !important;
border-radius: 10px !important;
color: var(--m-text) !important;
font-family: var(--m-font-sans) !important;
font-weight: 500 !important;
font-size: 13.5px !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.3 !important;
transition:
background 220ms ease,
color 220ms ease,
padding-left 260ms cubic-bezier(.2,.8,.2,1),
transform 220ms cubic-bezier(.2,.8,.2,1) !important;
}
body.is-modern .gsbd-nav__list .sub-menu a::before,
body.is-modern .gsbd-nav__list .children a::before {
content: "";
position: absolute;
left: 10px; top: 50%;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--m-gold);
transform: translateY(-50%) scale(0);
transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
body.is-modern .gsbd-nav__list .sub-menu a:hover,
body.is-modern .gsbd-nav__list .children a:hover,
body.is-modern .gsbd-nav__list .sub-menu .current-menu-item > a,
body.is-modern .gsbd-nav__list .children .current-menu-item > a {
background: linear-gradient(90deg, rgba(184,132,44,.10) 0%, rgba(184,132,44,.02) 100%) !important;
color: var(--m-text) !important;
padding-left: 28px !important;
}
body.is-modern .gsbd-nav__list .sub-menu a:hover::before,
body.is-modern .gsbd-nav__list .children a:hover::before {
transform: translateY(-50%) scale(1);
}
/* Mobile drawer — premium dark panel */
@media (max-width: 1024px) {
body.is-modern .gsbd-nav {
background: var(--m-deep) !important;
border-left: 1px solid rgba(255,255,255,.06);
}
body.is-modern .gsbd-nav__list { gap: 0; padding: 12px; }
body.is-modern .gsbd-nav__list > li {
border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
body.is-modern .gsbd-nav__list > li > a {
color: var(--m-text-on-deep) !important;
padding: 18px 14px !important;
}
body.is-modern .gsbd-nav__list > li > a::after { display: none; }
body.is-modern .gsbd-nav__list > li > a:hover {
color: var(--m-gold) !important;
}
body.is-modern .gsbd-nav__list .sub-menu,
body.is-modern .gsbd-nav__list .children {
position: static !important;
background: rgba(255,255,255,.02) !important;
border: 0 !important;
border-radius: 8px !important;
box-shadow: none !important;
padding: 6px !important;
margin: 4px 8px 12px !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
}
body.is-modern .gsbd-nav__list .sub-menu::after,
body.is-modern .gsbd-nav__list .children::after { display: none; }
body.is-modern .gsbd-nav__list .sub-menu a,
body.is-modern .gsbd-nav__list .children a {
color: var(--m-text-on-deep-2) !important;
}
body.is-modern .gsbd-nav__list .sub-menu a:hover,
body.is-modern .gsbd-nav__list .children a:hover {
background: rgba(184,132,44,.12) !important;
color: var(--m-text-on-deep) !important;
}
}
body.is-modern .gsbd-search-toggle {
font-family: var(--m-font-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
}
/* ------------------------ 3b. WORDMARK / IMAGE LOGO ------------------------ */
body.is-modern .gsbd-wordmark {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--m-text);
isolation: isolate;
}
body.is-modern .gsbd-wordmark--image {
line-height: 0;
}
body.is-modern .gsbd-wordmark__img {
display: block;
height: clamp(38px, 4.2vw, 56px);
width: auto;
max-width: 100%;
transition: transform 320ms cubic-bezier(.2,.8,.2,1), filter 320ms ease;
will-change: transform;
}
body.is-modern .gsbd-wordmark--image:hover .gsbd-wordmark__img {
transform: translateY(-1px);
filter: drop-shadow(0 6px 14px rgba(15, 76, 41, 0.18));
}
body.is-modern .gsbd-wordmark--image:focus-visible {
outline: 2px solid var(--m-gold);
outline-offset: 4px;
border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
body.is-modern .gsbd-wordmark__img {
transition: none;
}
}
body.is-modern .gsbd-wordmark__inner {
position: relative;
display: inline-flex;
align-items: baseline;
gap: clamp(6px, 0.6vw, 10px);
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(22px, 1.85vw, 28px);
line-height: 1;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 144;
padding-block: 6px;
padding-right: 0.12em;
overflow: visible;
color: var(--m-text);
}
body.is-modern .gsbd-wordmark__word {
display: inline-block;
opacity: 0;
transform: translateY(8px);
animation: gsbd-wm-up 700ms cubic-bezier(.2,.8,.2,1) forwards;
will-change: transform, opacity;
}
body.is-modern .gsbd-wordmark__word:nth-child(1) { animation-delay: 80ms; }
body.is-modern .gsbd-wordmark__word:nth-child(2) { animation-delay: 200ms; }
body.is-modern .gsbd-wordmark__word:nth-child(3) { animation-delay: 320ms; }
body.is-modern .gsbd-wordmark__word--accent {
font-style: italic;
font-weight: 400;
padding-right: 0.18em;
margin-right: -0.06em;
overflow: visible;
background: linear-gradient(92deg, var(--m-gold) 0%, #e7b766 35%, #b8842c 65%, var(--m-gold) 100%);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: gsbd-wm-up 700ms cubic-bezier(.2,.8,.2,1) 320ms forwards,
gsbd-wm-shimmer 5.5s linear 1100ms infinite;
}
body.is-modern .gsbd-wordmark__rule {
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1.5px;
background: linear-gradient(90deg, transparent 0%, var(--m-gold) 35%, var(--m-red) 65%, transparent 100%);
transform-origin: left center;
transform: scaleX(0);
animation: gsbd-wm-rule 900ms cubic-bezier(.2,.8,.2,1) 520ms forwards;
pointer-events: none;
}
body.is-modern .gsbd-wordmark:hover .gsbd-wordmark__rule {
animation: gsbd-wm-rule-hover 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
body.is-modern .gsbd-wordmark:hover .gsbd-wordmark__word {
transition: transform 320ms cubic-bezier(.2,.8,.2,1);
transform: translateY(-1px);
}
body.is-modern .gsbd-wordmark:focus-visible {
outline: none;
}
body.is-modern .gsbd-wordmark:focus-visible .gsbd-wordmark__rule {
transform: scaleX(1);
background: var(--m-gold);
}
@keyframes gsbd-wm-up {
to { opacity: 1; transform: translateY(0); }
}
@keyframes gsbd-wm-rule {
0% { transform: scaleX(0); opacity: 0; }
40% { opacity: 1; }
100% { transform: scaleX(1); opacity: 1; }
}
@keyframes gsbd-wm-rule-hover {
0% { transform: scaleX(1) translateX(0); opacity: 1; }
50% { transform: scaleX(0) translateX(100%); opacity: 0; transform-origin: right center; }
51% { transform: scaleX(0) translateX(0); opacity: 0; transform-origin: left center; }
100% { transform: scaleX(1) translateX(0); opacity: 1; transform-origin: left center; }
}
@keyframes gsbd-wm-shimmer {
0% { background-position: 0% 50%; }
100% { background-position: -220% 50%; }
}
@media (prefers-reduced-motion: reduce) {
body.is-modern .gsbd-wordmark__word,
body.is-modern .gsbd-wordmark__rule,
body.is-modern .gsbd-wordmark__word--accent {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
body.is-modern .gsbd-wordmark__rule { transform: scaleX(1) !important; }
}
body.is-modern .gsbd-search-toggle {
background: transparent;
color: var(--m-text);
border: 1px solid var(--m-line-2);
border-radius: 999px;
padding: 9px 18px;
}
body.is-modern .gsbd-search-toggle:hover {
background: var(--m-text);
color: var(--m-bg);
border-color: var(--m-text);
}
body.is-modern .gsbd-burger span { background: var(--m-text); }
body.is-modern .gsbd-mobile-tabs { display: none !important; }
body.is-modern { padding-bottom: 0 !important; }
/* ------------------------ 4. CINEMATIC HERO ------------------------ */
.m-hero {
padding-block: 0;
position: relative;
}
.m-hero__inner {
position: relative;
background: var(--m-deep);
color: var(--m-text-on-deep);
overflow: hidden;
isolation: isolate;
min-height: 640px;
display: flex;
align-items: flex-end;
}
.m-hero__bg {
position: absolute; inset: 0;
z-index: 0;
}
.m-hero__bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 30%;
opacity: .55;
transform: scale(1.02);
transition: opacity 800ms var(--m-easing), transform 1200ms var(--m-easing);
}
.m-hero:hover .m-hero__bg img { opacity: .65; transform: scale(1.04); }
.m-hero__inner::before {
content: "";
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(21,22,26,.30) 0%, rgba(21,22,26,.55) 50%, rgba(21,22,26,.95) 100%),
radial-gradient(ellipse at 0% 100%, rgba(184,132,44,.16) 0%, transparent 50%);
pointer-events: none;
}
.m-hero__inner::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,132,44,.5), transparent);
z-index: 3;
}
.m-hero__content {
position: relative;
z-index: 2;
width: 100%;
padding-block: clamp(48px, 8vw, 96px);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(32px, 5vw, 64px);
align-items: end;
}
.m-hero__main {
max-width: 880px;
}
.m-hero__kicker {
display: inline-flex; align-items: center; gap: 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--m-gold);
margin-bottom: 28px;
}
.m-hero__kicker::before {
content: "";
width: 32px; height: 1px;
background: var(--m-gold);
}
.m-hero__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(40px, 6.5vw, 88px);
color: #fff;
letter-spacing: -0.03em;
line-height: .98;
margin: 0 0 24px;
font-variation-settings: "opsz" 144;
}
.m-hero__title em { font-style: italic; font-weight: 400; color: var(--m-gold); }
.m-hero__main:hover .m-hero__title { color: #fff; }
.m-hero__dek {
font-size: clamp(15px, 1.4vw, 19px);
line-height: 1.55;
color: var(--m-text-on-deep-2);
max-width: 620px;
margin: 0 0 32px;
}
.m-hero__byline {
display: flex; align-items: center; gap: 16px;
font-size: 13px;
color: var(--m-text-on-deep-2);
flex-wrap: wrap;
}
.m-hero__byline strong {
color: var(--m-text-on-deep);
font-weight: 700;
letter-spacing: -0.005em;
}
.m-hero__byline span.dot {
width: 3px; height: 3px;
background: var(--m-text-on-deep-3);
border-radius: 50%;
display: inline-block;
}
.m-hero__cta {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 32px;
background: #fff;
color: var(--m-text);
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.005em;
transition: transform var(--m-transition), background var(--m-transition);
}
.m-hero__main:hover .m-hero__cta { transform: translateX(4px); background: var(--m-gold); color: var(--m-deep); }
.m-hero__sidekicker {
align-self: flex-end;
text-align: right;
color: var(--m-text-on-deep-2);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
}
.m-hero__sidekicker em {
display: block;
font-family: var(--m-font-mono);
font-style: normal;
font-size: 28px;
color: var(--m-text-on-deep);
margin-top: 8px;
letter-spacing: -0.02em;
}
/* Side-cards strip — sits below hero, half-overlapping the bottom edge */
.m-hero__rail {
position: relative;
z-index: 4;
margin-top: -48px;
margin-bottom: clamp(48px, 6vw, 80px);
}
.m-hero__rail-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.m-hcard {
background: var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
padding: 22px 22px 20px;
text-decoration: none;
color: var(--m-text);
box-shadow: var(--m-shadow-3);
transition: transform var(--m-transition), box-shadow var(--m-transition);
display: flex; flex-direction: column;
min-height: 180px;
}
.m-hcard:hover { transform: translateY(-3px); box-shadow: var(--m-shadow-4); color: var(--m-text); }
.m-hcard__chip {
display: inline-flex; align-self: flex-start;
font-size: 11px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--m-red);
padding-bottom: 6px;
border-bottom: 1px solid var(--m-line);
margin-bottom: 14px;
}
.m-hcard__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.18;
letter-spacing: -0.014em;
margin: 0 0 12px;
font-variation-settings: "opsz" 36;
}
.m-hcard__meta {
margin-top: auto;
font-size: 12px;
color: var(--m-text-3);
letter-spacing: .04em;
font-weight: 500;
}
.m-hcard__meta .m-mono { color: var(--m-text-2); }
/* ------------------------ 5. LIVE SCORES PANEL (dark) ------------------------ */
.m-livepanel {
background: var(--m-deep-2);
color: var(--m-text-on-deep);
border-radius: var(--m-radius-xl);
padding: clamp(28px, 3.5vw, 48px);
box-shadow: var(--m-shadow-deep);
position: relative;
isolation: isolate;
overflow: hidden;
}
.m-livepanel::before {
content: "";
position: absolute; left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, var(--m-red) 0%, var(--m-gold) 50%, transparent 100%);
}
.m-livepanel__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.m-livepanel__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(24px, 2.6vw, 36px);
color: var(--m-text-on-deep);
letter-spacing: -0.022em;
}
.m-livepanel__more {
color: var(--m-text-on-deep-2);
font-size: 13px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.m-livepanel__more:hover { color: var(--m-gold); }
/* --- Marquee track (Match centre slider) --- */
.m-livepanel__rail {
display: flex; gap: 16px;
overflow-x: auto;
padding: 4px 4px 12px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.m-livepanel__rail::-webkit-scrollbar { display: none; }
/* Marquee rail — positioning context for the slider nav buttons */
.m-marquee-rail {
position: relative;
margin: 4px -4px 12px;
}
/* Marquee viewport — hides overflow, fades edges, hosts the animated track. */
.m-marquee {
position: relative;
overflow: hidden;
}
/* ---- Slider nav (prev/next) overlaid on the marquee rail ---- */
.m-marquee__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.14);
background: rgba(21,22,26,.82);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
color: var(--m-text-on-deep);
display: grid;
place-items: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition:
opacity 240ms ease,
background 220ms ease,
border-color 220ms ease,
color 220ms ease,
transform 220ms cubic-bezier(.2,.8,.2,1);
box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
}
.m-marquee__nav svg { width: 18px; height: 18px; }
.m-marquee__nav--prev { left: 8px; }
.m-marquee__nav--next { right: 8px; }
.m-marquee-rail:hover .m-marquee__nav,
.m-marquee-rail:focus-within .m-marquee__nav {
opacity: 1;
pointer-events: auto;
}
.m-marquee__nav:hover {
background: var(--m-gold);
border-color: var(--m-gold);
color: var(--m-deep);
transform: translateY(-50%) scale(1.06);
}
.m-marquee__nav:focus-visible {
outline: 2px solid var(--m-gold);
outline-offset: 2px;
opacity: 1;
}
.m-marquee__nav:disabled,
.m-marquee__nav[aria-disabled="true"] {
opacity: .25 !important;
pointer-events: none;
cursor: default;
}
.m-marquee::before,
.m-marquee::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: clamp(40px, 6vw, 96px);
z-index: 2;
pointer-events: none;
}
.m-marquee::before {
left: 0;
background: linear-gradient(90deg, var(--m-deep-2) 10%, transparent);
}
.m-marquee::after {
right: 0;
background: linear-gradient(-90deg, var(--m-deep-2) 10%, transparent);
}
.m-marquee__track {
display: flex;
gap: 16px;
width: max-content;
padding: 4px 0 12px;
animation: m-marquee var(--m-marquee-duration, 60s) linear infinite;
will-change: transform;
}
@keyframes m-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* Hover / focus pauses — clickable cards remain interactive */
.m-marquee:hover .m-marquee__track,
.m-marquee:focus-within .m-marquee__track {
animation-play-state: paused;
}
/* Cloned cards (added by JS) are decorative — hide from a11y tree */
.m-marquee__track [aria-hidden="true"] { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
.m-marquee__track {
animation: none;
transform: none;
}
}
/* Mobile: skip the marquee, use native swipe scroll instead. JS will hand off
to the legacy m-livepanel__rail behavior at this breakpoint. */
@media (max-width: 720px) {
.m-marquee {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-inline: 0;
}
.m-marquee::before, .m-marquee::after { display: none; }
.m-marquee::-webkit-scrollbar { display: none; }
.m-marquee__track {
animation: none;
width: max-content;
padding-inline: 4px;
}
.m-marquee__track .m-fcard { scroll-snap-align: start; }
.m-marquee-rail { margin-inline: 0; }
/* Mobile: hover-to-reveal doesn't apply — show nav as ghost pills always */
.m-marquee__nav {
opacity: 1;
pointer-events: auto;
width: 38px;
height: 38px;
background: rgba(21,22,26,.88);
}
.m-marquee__nav svg { width: 15px; height: 15px; }
.m-marquee__nav--prev { left: 4px; }
.m-marquee__nav--next { right: 4px; }
}
.m-fcard {
flex: 0 0 320px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--m-radius-lg);
padding: 18px 20px 16px;
text-decoration: none;
color: var(--m-text-on-deep);
scroll-snap-align: start;
transition: transform var(--m-transition), border-color var(--m-transition), background var(--m-transition);
position: relative;
overflow: hidden;
backdrop-filter: blur(8px);
}
.m-fcard::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--m-text-on-deep-3);
opacity: .4;
}
.m-fcard--live::before { background: var(--m-red); opacity: 1; }
.m-fcard--football::before { background: var(--m-blue); opacity: .8; }
.m-fcard--cricket::before { background: var(--m-gold); opacity: .85; }
.m-fcard:hover {
transform: translateY(-3px);
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.14);
color: var(--m-text-on-deep);
}
.m-fcard__top {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
margin-bottom: 16px;
min-height: 22px;
}
.m-fcard__status {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
background: rgba(255,255,255,.08);
color: var(--m-text-on-deep-2);
}
.m-fcard__status--live {
background: var(--m-red);
color: #fff;
}
.m-fcard__status--upcoming {
background: rgba(30,64,175,.30);
color: #93c5fd;
}
.m-fcard__status--final {
background: rgba(255,255,255,.08);
color: var(--m-text-on-deep-2);
}
.m-fcard__pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0 rgba(255,255,255,.6);
animation: m-pulse 1.6s ease-out infinite;
}
@keyframes m-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.m-fcard__competition {
font-size: 11px;
color: var(--m-text-on-deep-2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 60%;
}
.m-fcard__teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.m-fcard__team {
display: flex; flex-direction: column; align-items: center;
gap: 6px;
min-width: 0;
}
.m-fcard__crest {
width: 52px; height: 52px;
display: grid; place-items: center;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 50%;
overflow: hidden;
}
.m-fcard__crest img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.m-fcard__crest-fallback {
font-family: var(--m-font-sans);
font-weight: 800;
font-size: 16px;
color: var(--m-text-on-deep-2);
}
.m-fcard__code {
font-family: var(--m-font-sans);
font-size: 14px;
font-weight: 700;
letter-spacing: .04em;
color: var(--m-text-on-deep);
}
.m-fcard__score {
font-family: var(--m-font-mono);
font-size: 26px;
font-weight: 700;
line-height: 1;
color: var(--m-text-on-deep);
margin-top: 2px;
letter-spacing: -0.01em;
}
.m-fcard__divider { display: grid; place-items: center; min-width: 36px; }
.m-fcard__vs {
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
color: var(--m-text-on-deep-3);
text-transform: uppercase;
}
.m-fcard__dash {
color: var(--m-text-on-deep-3);
font-size: 18px;
}
.m-fcard__bottom {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.06);
font-size: 12px;
color: var(--m-text-on-deep-3);
min-height: 28px;
}
.m-fcard__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-fcard__meta--strong { color: var(--m-text-on-deep-2); font-weight: 600; }
.m-fcard__broadcast { flex-shrink: 0; color: var(--m-gold); font-weight: 500; }
/* ------------------------ 6. EDITORIAL MOSAIC ------------------------ */
.m-section { padding-block: clamp(28px, 3.2vw, 52px); }
.m-section--snug { padding-block: clamp(16px, 1.6vw, 26px); }
.m-section-head {
display: flex; align-items: end; justify-content: space-between;
gap: 24px;
margin-bottom: clamp(28px, 3vw, 48px);
border-bottom: 1px solid var(--m-line);
padding-bottom: clamp(20px, 2.4vw, 28px);
}
.m-section-head__block { max-width: 720px; }
.m-section-head__title {
font-family: var(--m-font-serif);
font-size: clamp(28px, 3.6vw, 48px);
font-weight: 500;
letter-spacing: -0.026em;
line-height: 1.04;
margin-top: 12px;
}
.m-section-head__title em {
font-style: italic;
font-weight: 400;
color: var(--m-gold);
}
.m-section-head__more {
flex-shrink: 0;
font-size: 13px;
font-weight: 600;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: .14em;
padding-bottom: 4px;
border-bottom: 1px solid var(--m-line);
transition: color var(--m-transition), border-color var(--m-transition);
}
.m-section-head__more:hover { color: var(--m-red); border-bottom-color: var(--m-red); }
/* Editorial spread — split-screen lead + 3-column row of supporting stories
============================================================ */
.m-mosaic {
display: flex;
flex-direction: column;
gap: clamp(28px, 3.5vw, 48px);
}
/* --- LEAD: SPLIT-SCREEN MAGAZINE COVER --- */
.m-mlead {
display: grid;
grid-template-columns: 6fr 5fr;
background: var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--m-text);
box-shadow: var(--m-shadow-2);
transition: transform var(--m-transition), box-shadow var(--m-transition);
isolation: isolate;
position: relative;
align-items: stretch; /* Both halves match each other's height */
min-height: clamp(440px, 50vw, 560px);
}
.m-mlead:hover {
transform: translateY(-3px);
box-shadow: var(--m-shadow-4);
color: var(--m-text);
}
.m-mlead__media {
position: relative;
overflow: hidden;
background: var(--m-deep-2);
/* No aspect-ratio — fill the grid cell height matched to the panel content */
height: 100%;
min-height: 100%;
}
.m-mlead__media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1600ms var(--m-easing), filter 600ms var(--m-easing);
filter: saturate(.92) contrast(1.05);
}
.m-mlead:hover .m-mlead__media img { transform: scale(1.05); filter: saturate(1.05) contrast(1.05); }
.m-mlead__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(15,15,16,.20) 0%, transparent 30%, rgba(15,15,16,.0) 60%, rgba(15,15,16,.55) 100%);
}
/* Stamp lower-left over image */
.m-mlead__stamp {
position: absolute;
left: 28px; bottom: 28px;
z-index: 2;
color: rgba(255,255,255,.95);
display: flex; flex-direction: column;
line-height: 1;
}
.m-mlead__stamp em {
font-style: italic;
font-family: var(--m-font-serif);
font-weight: 400;
font-size: 56px;
letter-spacing: -0.04em;
color: rgba(255,255,255,.96);
font-variation-settings: "opsz" 144;
margin-bottom: 4px;
line-height: 0.85;
}
.m-mlead__stamp small {
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
color: rgba(255,255,255,.72);
}
/* Paper panel */
.m-mlead__panel {
background:
radial-gradient(ellipse at 100% 0%, rgba(184,132,44,.06) 0%, transparent 55%),
var(--m-surface);
padding: clamp(32px, 4vw, 56px) clamp(32px, 3.5vw, 52px);
display: flex; flex-direction: column;
gap: 0;
position: relative;
}
.m-mlead__issue {
display: flex; align-items: center; gap: 14px;
font-family: var(--m-font-mono);
font-size: 11px;
color: var(--m-text-3);
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 28px;
}
.m-mlead__issue::after {
content: "";
flex: 1;
height: 1px;
background: var(--m-line-2);
}
.m-mlead__kicker {
color: var(--m-red);
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 16px;
display: inline-flex; align-items: center; gap: 10px;
}
.m-mlead__kicker::before {
content: "";
width: 24px; height: 1px;
background: var(--m-red);
}
.m-mlead__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(28px, 3.6vw, 52px);
line-height: 1.02;
letter-spacing: -0.028em;
margin: 0 0 20px;
color: var(--m-text);
font-variation-settings: "opsz" 144;
transition: color var(--m-transition);
}
/* Premium drop cap — first letter scales up with refined rhythm */
.m-mlead__title::first-letter {
font-size: 1.6em;
font-weight: 600;
color: var(--m-red);
float: left;
line-height: 0.92;
margin-right: 0.06em;
margin-top: -0.02em;
letter-spacing: -0.05em;
}
.m-mlead:hover .m-mlead__title { color: var(--m-text); }
.m-mlead__dek {
color: var(--m-text-2);
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.6;
margin: 0 0 28px;
}
.m-mlead__byline {
display: flex; align-items: center; gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--m-line);
font-size: 12px;
color: var(--m-text-3);
letter-spacing: .03em;
flex-wrap: wrap;
margin-bottom: 24px;
}
.m-mlead__byline strong {
color: var(--m-text);
font-weight: 600;
letter-spacing: -0.005em;
}
.m-mlead__byline .dot {
width: 3px; height: 3px;
background: var(--m-text-4);
border-radius: 50%;
}
.m-mlead__cta {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 10px;
color: var(--m-text);
font-size: 13px;
font-weight: 700;
letter-spacing: .04em;
padding: 12px 0;
border-bottom: 2px solid var(--m-text);
transition: color var(--m-transition), border-color var(--m-transition), gap var(--m-transition);
margin-top: auto;
}
.m-mlead:hover .m-mlead__cta {
color: var(--m-red);
border-bottom-color: var(--m-red);
gap: 14px;
}
/* --- 3-COLUMN ROW: 2 STORIES + EDITOR'S NOTE --- */
.m-mcols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.5vw, 32px);
}
.m-mcol {
background: var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--m-text);
transition: transform var(--m-transition), box-shadow var(--m-transition), border-color var(--m-transition);
display: flex; flex-direction: column;
}
.m-mcol:hover {
transform: translateY(-3px);
box-shadow: var(--m-shadow-3);
border-color: var(--m-line-2);
color: var(--m-text);
}
.m-mcol__media {
aspect-ratio: 16 / 10;
background: var(--m-surface-2);
overflow: hidden;
position: relative;
}
.m-mcol__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1000ms var(--m-easing), filter 500ms var(--m-easing);
filter: saturate(.95);
}
.m-mcol:hover .m-mcol__media img { transform: scale(1.06); filter: saturate(1); }
.m-mcol__num {
position: absolute;
top: 14px; left: 18px;
z-index: 2;
font-family: var(--m-font-serif);
font-style: italic;
font-weight: 400;
font-size: 22px;
color: rgba(255,255,255,.95);
letter-spacing: -0.01em;
line-height: 1;
text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.m-mcol__body {
padding: clamp(22px, 2.4vw, 30px);
display: flex; flex-direction: column;
flex: 1;
}
.m-mcol__chip {
color: var(--m-red);
font-size: 10px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 12px;
display: inline-flex; align-items: center; gap: 8px;
}
.m-mcol__chip::before {
content: "";
width: 18px; height: 1px;
background: var(--m-red);
}
.m-mcol__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.2;
letter-spacing: -0.016em;
margin: 0 0 14px;
color: var(--m-text);
transition: color var(--m-transition);
}
.m-mcol:hover .m-mcol__title { color: var(--m-red-2); }
.m-mcol__dek {
color: var(--m-text-2);
font-size: 13px;
line-height: 1.55;
margin: 0 0 18px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.m-mcol__byline {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--m-line);
display: flex; align-items: center; gap: 10px;
font-size: 11px;
color: var(--m-text-3);
font-weight: 500;
letter-spacing: .03em;
}
.m-mcol__byline strong { color: var(--m-text-2); font-weight: 600; }
.m-mcol__byline .dot { width: 3px; height: 3px; background: var(--m-text-4); border-radius: 50%; }
/* Editor's Note tile — paper-on-paper, italic serif blockquote */
.m-mnote {
background:
radial-gradient(ellipse at 0% 0%, rgba(184,132,44,.10) 0%, transparent 55%),
var(--m-bg-2);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 32px);
position: relative;
overflow: hidden;
isolation: isolate;
display: flex; flex-direction: column;
}
.m-mnote::before {
content: """;
position: absolute;
top: clamp(-18px, -1.5vw, -8px);
left: clamp(16px, 2vw, 28px);
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(120px, 14vw, 180px);
color: rgba(184,132,44,.18);
line-height: 0.8;
pointer-events: none;
font-variation-settings: "opsz" 144;
}
.m-mnote__head {
color: var(--m-gold);
font-size: 11px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
margin-bottom: 22px;
z-index: 1;
position: relative;
display: inline-flex; align-items: center; gap: 10px;
}
.m-mnote__head::before {
content: "";
width: 22px; height: 1px;
background: var(--m-gold);
}
.m-mnote__body {
font-family: var(--m-font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.45;
color: var(--m-text);
letter-spacing: -0.012em;
margin: 0 0 24px;
z-index: 1;
position: relative;
}
.m-mnote__sig {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--m-line);
font-family: var(--m-font-mono);
font-size: 11px;
color: var(--m-text-3);
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
z-index: 1;
position: relative;
}
.m-mnote__sig strong {
color: var(--m-text-2);
font-weight: 700;
letter-spacing: .14em;
}
/* ------------------------ 7. TWIN SPORTS COLUMNS ------------------------ */
.m-twin {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3vw, 48px);
}
.m-twin__col {
border-top: 2px solid var(--m-text);
padding-top: 24px;
}
.m-twin__col--football { border-top-color: var(--m-blue); }
.m-twin__col--cricket { border-top-color: var(--m-gold); }
.m-twin__head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 24px;
}
.m-twin__title {
font-family: var(--m-font-serif);
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 500;
letter-spacing: -0.024em;
}
.m-twin__more {
font-size: 12px;
font-weight: 600;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: .12em;
}
.m-twin__more:hover { color: var(--m-red); }
.m-twin__spotlight {
display: block;
position: relative;
border-radius: var(--m-radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
margin-bottom: 24px;
background: var(--m-surface-2);
isolation: isolate;
}
.m-twin__spotlight img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 800ms var(--m-easing);
}
.m-twin__spotlight:hover img { transform: scale(1.04); }
.m-twin__spotlight::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(15,15,16,.92) 100%);
z-index: 1;
}
.m-twin__spotlight-body {
position: absolute; left: 0; right: 0; bottom: 0;
padding: clamp(20px, 2.4vw, 28px);
color: #fff;
z-index: 2;
}
.m-twin__spotlight-title {
font-family: var(--m-font-serif);
color: #fff;
font-size: clamp(18px, 1.8vw, 24px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.018em;
}
.m-twin__list { list-style: none; padding: 0; margin: 0; }
.m-twin__list li + li {
border-top: 1px solid var(--m-line);
margin-top: 18px;
padding-top: 18px;
}
.m-twin__list a {
display: grid;
grid-template-columns: 92px 1fr;
gap: 18px;
align-items: center;
text-decoration: none;
color: var(--m-text);
}
.m-twin__list-thumb {
width: 92px; height: 68px;
border-radius: 10px;
background: var(--m-surface-2);
overflow: hidden;
flex-shrink: 0;
}
.m-twin__list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-twin__list-title {
font-family: var(--m-font-serif);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.012em;
margin: 0;
}
.m-twin__list-meta {
margin-top: 5px;
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: .1em;
font-weight: 600;
}
.m-twin__list a:hover .m-twin__list-title { color: var(--m-red); }
/* ------------------------ 8. PREMIUM FIXTURES TABLE (DARK) ------------------------ */
.m-fixtures {
background: var(--m-deep);
color: var(--m-text-on-deep);
border-radius: var(--m-radius-xl);
overflow: hidden;
box-shadow: var(--m-shadow-deep);
}
.m-fixtures__head {
display: flex; align-items: baseline; justify-content: space-between;
padding: 32px 40px 24px;
gap: 16px;
flex-wrap: wrap;
border-bottom: 1px solid rgba(255,255,255,.06);
}
.m-fixtures__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(24px, 2.6vw, 32px);
color: var(--m-text-on-deep);
letter-spacing: -0.022em;
}
.m-fixtures__title em { font-style: italic; color: var(--m-gold); }
.m-fixtures__more {
color: var(--m-text-on-deep-2);
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
.m-fixtures__more:hover { color: var(--m-gold); }
.m-fixtures__day {
border-top: 1px solid rgba(255,255,255,.04);
}
.m-fixtures__day:first-of-type { border-top: 0; }
.m-fixtures__day-head {
padding: 18px 40px;
background: rgba(255,255,255,.02);
font-size: 11px;
font-weight: 700;
color: var(--m-gold);
letter-spacing: .18em;
text-transform: uppercase;
display: flex; align-items: center; gap: 14px;
}
.m-fixtures__day-head em {
font-style: normal;
color: var(--m-text-on-deep-3);
font-weight: 500;
letter-spacing: .04em;
text-transform: none;
font-size: 12px;
font-family: var(--m-font-mono);
}
.m-frow {
display: grid;
grid-template-columns: 110px 1fr 200px 220px 130px;
gap: 20px;
padding: 20px 40px;
align-items: center;
border-top: 1px solid rgba(255,255,255,.04);
text-decoration: none;
color: var(--m-text-on-deep);
transition: background var(--m-transition);
}
.m-frow:hover { background: rgba(255,255,255,.03); color: var(--m-text-on-deep); }
.m-frow__time {
font-family: var(--m-font-mono);
font-weight: 600;
color: var(--m-text-on-deep);
font-size: 15px;
letter-spacing: -0.005em;
}
.m-frow__time--live {
color: #fff;
background: var(--m-red);
padding: 6px 12px;
border-radius: 4px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
font-family: var(--m-font-sans);
font-weight: 700;
}
.m-frow__teams {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.014em;
line-height: 1.2;
}
.m-frow__teams strong { font-weight: 600; }
.m-frow__teams span.vs {
font-style: italic;
color: var(--m-text-on-deep-3);
font-weight: 400;
padding: 0 8px;
}
.m-frow__type {
font-size: 11px;
color: var(--m-gold);
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 600;
}
.m-frow__venue {
font-size: 13px;
color: var(--m-text-on-deep-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-frow__cta {
font-size: 11px;
font-weight: 600;
color: var(--m-text-on-deep-2);
text-transform: uppercase;
letter-spacing: .14em;
text-align: right;
}
.m-frow:hover .m-frow__cta { color: var(--m-gold); }
/* ------------------------ 8b. PREMIUM SCHEDULE CAROUSEL ------------------------ */
.m-sched {
background: var(--m-deep);
color: var(--m-text-on-deep);
border-radius: var(--m-radius-xl);
overflow: hidden;
box-shadow: var(--m-shadow-deep);
position: relative;
isolation: isolate;
}
.m-sched::before {
content: "";
position: absolute; left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, var(--m-gold) 0%, var(--m-red) 50%, transparent 100%);
z-index: 3;
}
.m-sched__head {
display: flex; align-items: baseline; justify-content: space-between;
padding: 32px 40px 18px;
gap: 16px;
flex-wrap: wrap;
}
.m-sched__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(24px, 2.6vw, 32px);
color: var(--m-text-on-deep);
letter-spacing: -0.022em;
margin-top: 6px;
}
.m-sched__title em { font-style: italic; color: var(--m-gold); font-weight: 400; }
.m-sched__count {
color: var(--m-text-on-deep-3);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
font-family: var(--m-font-mono);
}
/* Day pills row with sliding indicator + prev/next nav */
.m-sched__tabs-wrap {
position: relative;
border-bottom: 1px solid rgba(255,255,255,.06);
overflow: hidden;
/* Edge-fade gradients hint at scrollable content beyond view */
}
.m-sched__tabs-wrap::before,
.m-sched__tabs-wrap::after {
content: "";
position: absolute;
top: 0; bottom: 1px;
width: 56px;
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 220ms var(--m-easing);
}
.m-sched__tabs-wrap::before {
left: 0;
background: linear-gradient(90deg, var(--m-deep) 30%, transparent);
}
.m-sched__tabs-wrap::after {
right: 0;
background: linear-gradient(-90deg, var(--m-deep) 30%, transparent);
}
.m-sched__tabs-wrap[data-can-prev="1"]::before { opacity: 1; }
.m-sched__tabs-wrap[data-can-next="1"]::after { opacity: 1; }
.m-sched__tabs {
display: flex;
gap: 0;
padding: 0 64px; /* room for prev/next buttons either side */
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
/* Prev/Next nav buttons (injected by JS) */
.m-sched__tabs-btn {
appearance: none;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: var(--m-text-on-deep);
width: 36px; height: 36px;
border-radius: 50%;
cursor: pointer;
display: grid; place-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
backdrop-filter: blur(6px);
}
.m-sched__tabs-btn--prev { left: 12px; }
.m-sched__tabs-btn--next { right: 12px; }
.m-sched__tabs-btn:hover {
background: var(--m-gold);
border-color: var(--m-gold);
color: #0a0a0c;
}
.m-sched__tabs-btn:disabled,
.m-sched__tabs-btn[aria-disabled="true"] {
opacity: 0;
pointer-events: none;
}
.m-sched__tabs-btn svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
.m-sched__tabs {
padding: 0 44px; /* room for the floating prev/next pills */
scroll-padding-inline: 44px;
}
.m-sched__tabs-btn {
display: grid !important;
width: 32px;
height: 32px;
background: rgba(21,22,26,.92);
border-color: rgba(255,255,255,.10);
box-shadow: 0 6px 14px -8px rgba(0,0,0,.6);
}
.m-sched__tabs-btn--prev { left: 6px; }
.m-sched__tabs-btn--next { right: 6px; }
.m-sched__tabs-btn svg { width: 13px; height: 13px; }
/* Sharper edge fades on mobile so buttons read clearly */
.m-sched__tabs-wrap::before,
.m-sched__tabs-wrap::after { width: 40px; }
}
.m-sched__tabs::-webkit-scrollbar { display: none; }
.m-sched__pill {
appearance: none;
background: transparent;
border: 0;
padding: 16px 20px 18px;
color: var(--m-text-on-deep-3);
cursor: pointer;
font-family: var(--m-font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
transition: color var(--m-transition), transform var(--m-transition);
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 4px;
flex-shrink: 0;
min-width: 88px;
}
.m-sched__pill:hover { color: var(--m-text-on-deep-2); }
.m-sched__pill:hover em { color: var(--m-text-on-deep); }
.m-sched__pill[aria-selected="true"] {
color: var(--m-gold);
}
.m-sched__pill[aria-selected="true"] em {
color: var(--m-gold);
}
.m-sched__pill em {
font-style: normal;
font-family: var(--m-font-mono);
font-size: 22px;
color: var(--m-text-on-deep);
letter-spacing: -0.02em;
line-height: 1;
font-weight: 600;
transition: color var(--m-transition);
}
.m-sched__pill[data-today="1"][aria-selected="true"] em {
color: #fff;
background: var(--m-red);
padding: 5px 10px;
border-radius: 6px;
box-shadow: 0 0 0 0 rgba(185,28,28,.5);
animation: m-pulse 2s ease-out infinite;
}
.m-sched__pill[data-today="1"]:not([aria-selected="true"]) em {
color: var(--m-red);
}
.m-sched__pill .m-sched__pill-count {
font-family: var(--m-font-mono);
font-size: 10px;
color: var(--m-text-on-deep-3);
letter-spacing: 0;
text-transform: none;
margin-top: 2px;
font-weight: 500;
}
/* Sliding gold indicator under active pill */
.m-sched__indicator {
position: absolute;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--m-gold) 20%, var(--m-gold) 80%, transparent);
transition: transform 420ms cubic-bezier(.65, 0, .35, 1), width 420ms cubic-bezier(.65, 0, .35, 1);
pointer-events: none;
width: 0;
transform: translateX(0);
will-change: transform, width;
}
/* Auto-rotate progress strip below tabs */
.m-sched__progress {
position: absolute;
bottom: 0;
left: 0;
height: 1px;
background: rgba(184,132,44,.20);
width: 0;
pointer-events: none;
transition: width 50ms linear;
}
.m-sched:hover .m-sched__progress,
.m-sched:focus-within .m-sched__progress { background: rgba(184,132,44,.10); }
/* Day panels */
.m-sched__stage {
position: relative;
min-height: 200px;
}
.m-sched__panel {
transition: opacity 280ms var(--m-easing), transform 280ms var(--m-easing);
}
.m-sched__panel[hidden] { display: none; }
.m-sched__panel.is-entering {
opacity: 0;
transform: translateY(8px);
}
.m-sched__panel.is-active {
opacity: 1;
transform: translateY(0);
}
.m-sched__panel-head {
padding: 22px 40px 14px;
display: flex; align-items: baseline; gap: 14px;
color: var(--m-text-on-deep-3);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
}
.m-sched__panel-head strong {
color: var(--m-gold);
font-weight: 700;
letter-spacing: .18em;
}
.m-sched__panel-head em {
font-style: normal;
font-family: var(--m-font-mono);
color: var(--m-text-on-deep-2);
letter-spacing: -0.005em;
text-transform: none;
}
.m-sched__panel-head[data-today="1"] strong {
color: var(--m-red);
}
/* Match row */
.m-sched__row {
display: grid;
grid-template-columns: 100px 1fr 180px 220px 130px;
gap: 20px;
padding: 18px 40px;
align-items: center;
border-top: 1px solid rgba(255,255,255,.04);
text-decoration: none;
color: var(--m-text-on-deep);
position: relative;
transition: background 220ms var(--m-easing);
/* Stagger reveal */
opacity: 0;
transform: translateY(6px);
animation: m-sched-row-in 420ms var(--m-easing) forwards;
animation-delay: calc(var(--m-row-i, 0) * 60ms);
}
@keyframes m-sched-row-in {
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.m-sched__row { animation: none; opacity: 1; transform: none; }
}
.m-sched__row:hover {
background: rgba(255,255,255,.03);
color: var(--m-text-on-deep);
}
.m-sched__row::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: transparent;
transition: background 200ms var(--m-easing);
}
.m-sched__row:hover::before { background: var(--m-gold); }
.m-sched__row--live::before { background: var(--m-red); }
.m-sched__row--live { background: rgba(185,28,28,.06); }
.m-sched__row--live:hover { background: rgba(185,28,28,.10); }
.m-sched__time {
font-family: var(--m-font-mono);
font-weight: 600;
color: var(--m-text-on-deep);
font-size: 15px;
letter-spacing: -0.005em;
}
.m-sched__time--live {
background: var(--m-red);
color: #fff;
padding: 6px 12px;
border-radius: 4px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
font-family: var(--m-font-sans);
font-weight: 700;
box-shadow: 0 0 0 0 rgba(185,28,28,.5);
animation: m-pulse 2s ease-out infinite;
}
.m-sched__teams {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.014em;
line-height: 1.2;
display: flex; align-items: center; gap: 10px;
}
.m-sched__teams strong { font-weight: 600; }
.m-sched__teams .vs {
font-style: italic;
color: var(--m-text-on-deep-3);
font-weight: 400;
padding: 0 4px;
}
.m-sched__teams-crests {
display: flex; align-items: center; gap: 6px;
margin-right: 6px;
}
.m-sched__crest {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.08);
display: grid; place-items: center;
overflow: hidden;
}
.m-sched__crest img {
width: 100%; height: 100%;
object-fit: contain;
padding: 2px;
}
.m-sched__crest-mini {
font-family: var(--m-font-sans);
font-weight: 700;
font-size: 10px;
color: var(--m-text-on-deep-2);
}
.m-sched__type {
font-size: 11px;
color: var(--m-gold);
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 600;
}
.m-sched__venue {
font-size: 13px;
color: var(--m-text-on-deep-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
display: flex; align-items: center; gap: 6px;
}
.m-sched__venue::before { content: "📍"; opacity: .7; font-size: 11px; }
.m-sched__cta {
font-size: 11px;
font-weight: 600;
color: var(--m-text-on-deep-2);
text-transform: uppercase;
letter-spacing: .12em;
text-align: right;
transition: color 200ms var(--m-easing), transform 200ms var(--m-easing);
display: inline-flex; align-items: center; gap: 6px;
justify-content: flex-end;
}
.m-sched__row:hover .m-sched__cta {
color: var(--m-gold);
transform: translateX(4px);
}
/* ------------------------ 9. WATCH PROMO — v3 (Three ways to watch) ------------------------ */
.m-watch {
position: relative;
border-radius: var(--m-radius-xl);
overflow: hidden;
background:
radial-gradient(ellipse at 100% 0%, rgba(184,132,44,.04) 0%, transparent 55%),
linear-gradient(180deg, var(--m-bg) 0%, var(--m-surface) 100%);
border: 1px solid var(--m-line);
color: var(--m-text);
padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px);
isolation: isolate;
box-shadow: var(--m-shadow-2);
}
.m-watch::before {
content: "";
position: absolute; left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--m-gold) 30%, var(--m-gold) 70%, transparent);
opacity: .55;
}
.m-watch__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
.m-watch__head { max-width: 780px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.m-watch__eyebrow-row {
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
margin-bottom: clamp(20px, 2.4vw, 28px);
}
.m-watch__eyebrow {
color: var(--m-red);
font-size: 11px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
display: inline-flex; align-items: center; gap: 12px;
}
.m-watch__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--m-red); }
.m-watch__clock {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
border: 1px solid var(--m-line-2);
border-radius: 999px;
background: var(--m-surface);
font-size: 11px;
letter-spacing: .14em;
color: var(--m-text-3);
text-transform: uppercase;
font-weight: 600;
}
.m-watch__clock-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--m-gold);
flex: 0 0 auto;
box-shadow: 0 0 0 0 rgba(184,132,44,.5);
animation: m-pulse 2.4s ease-out infinite;
}
.m-watch__clock-time {
font-family: var(--m-font-mono);
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--m-text);
}
.m-watch__title {
font-family: var(--m-font-serif);
font-weight: 500;
color: var(--m-text);
font-size: clamp(40px, 5.4vw, 80px);
letter-spacing: -0.030em;
line-height: .98;
margin: 0 0 clamp(18px, 2vw, 24px);
font-variation-settings: "opsz" 144;
}
.m-watch__title em { font-style: italic; color: var(--m-gold); font-weight: 400; }
.m-watch__lead {
color: var(--m-text-2);
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.55;
max-width: 60ch;
margin: 0;
}
/* 3 ways tiles */
.m-watch__ways {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 22px);
margin-bottom: clamp(36px, 4vw, 56px);
}
.m-way {
background: var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
padding: clamp(24px, 2.8vw, 36px) clamp(22px, 2.4vw, 30px);
display: flex; flex-direction: column;
position: relative;
overflow: hidden;
isolation: isolate;
transition: border-color var(--m-transition), transform var(--m-transition), box-shadow var(--m-transition);
min-height: 360px;
}
.m-way::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--m-way-color, var(--m-red));
}
.m-way:hover {
transform: translateY(-3px);
border-color: var(--m-line-2);
box-shadow: var(--m-shadow-3);
}
.m-way__num {
font-family: var(--m-font-mono);
font-size: 12px;
color: var(--m-way-color, var(--m-red));
letter-spacing: .14em;
margin-bottom: 14px;
font-weight: 700;
}
.m-way__name {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(24px, 2.4vw, 32px);
letter-spacing: -0.022em;
color: var(--m-text);
margin-bottom: 6px;
line-height: 1.0;
}
.m-way__tag {
color: var(--m-text-3);
font-size: 11px;
letter-spacing: .18em;
margin-bottom: 22px;
text-transform: uppercase;
font-weight: 700;
}
.m-way__list { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--m-line); }
.m-way__list li {
padding: 12px 0;
border-bottom: 1px solid var(--m-line);
font-size: 14px;
font-weight: 600;
color: var(--m-text);
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px;
}
.m-way__list li small {
color: var(--m-text-3);
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
}
.m-way__cost {
margin-top: auto;
padding-top: 14px;
border-top: 1px dashed var(--m-line-2);
color: var(--m-text-3);
font-size: 12px;
letter-spacing: .04em;
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px;
}
.m-way__cost strong {
color: var(--m-text);
font-family: var(--m-font-mono);
font-weight: 700;
font-size: 14px;
letter-spacing: -0.005em;
}
.m-watch__foot {
display: flex; align-items: center; gap: 24px;
flex-wrap: wrap;
padding-top: clamp(28px, 3vw, 40px);
border-top: 1px solid var(--m-line);
}
/* High-specificity body.is-modern prefix beats body.is-modern a (0,1,2) which
was forcing warm-dark text onto these anchor buttons, hiding the labels. */
body.is-modern .m-watch__cta {
display: inline-flex; align-items: center; gap: 10px;
background: var(--m-text);
color: var(--m-bg);
padding: 14px 28px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
letter-spacing: .005em;
transition: transform var(--m-transition), background var(--m-transition), color var(--m-transition);
}
body.is-modern .m-watch__cta:hover {
background: var(--m-red);
color: #fff;
}
.m-watch__cta-arrow { transition: transform 280ms var(--m-easing); }
.m-watch__cta:hover .m-watch__cta-arrow { transform: translateX(4px); }
body.is-modern .m-watch__cta-secondary {
color: var(--m-text-2);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
padding-bottom: 4px;
border-bottom: 1px solid var(--m-line-2);
transition: color var(--m-transition), border-bottom-color var(--m-transition);
}
body.is-modern .m-watch__cta-secondary:hover { color: var(--m-red); border-bottom-color: var(--m-red); }
.m-watch__foot-trust {
margin-left: auto;
color: var(--m-text-3);
font-size: 12px;
letter-spacing: .04em;
display: inline-flex; align-items: center; gap: 8px;
}
.m-watch__foot-trust strong {
color: var(--m-text);
font-family: var(--m-font-mono);
font-weight: 700;
}
@media (max-width: 1024px) {
.m-watch__ways { grid-template-columns: 1fr; }
.m-way { min-height: auto; }
}
@media (max-width: 720px) {
.m-watch__foot-trust { margin-left: 0; width: 100%; }
}
/* ------------------------ 10. PLAYER PORTRAIT GRID ------------------------ */
.m-stars {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: clamp(16px, 2vw, 24px);
}
.m-star {
background: var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--m-text);
transition: transform var(--m-transition), box-shadow var(--m-transition), border-color var(--m-transition);
display: flex; flex-direction: column;
}
.m-star:hover {
transform: translateY(-3px);
box-shadow: var(--m-shadow-3);
border-color: var(--m-line-2);
color: var(--m-text);
}
.m-star__media {
aspect-ratio: 4 / 5;
background: linear-gradient(135deg, var(--m-surface-2) 0%, var(--m-bg-2) 100%);
display: grid; place-items: center;
overflow: hidden;
position: relative;
}
.m-star__media img { width: 100%; height: 100%; object-fit: cover; }
.m-star__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(15,15,16,.85) 100%);
}
.m-star__avatar {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 64px;
color: var(--m-text-3);
letter-spacing: -0.02em;
z-index: 1;
}
.m-star__media-name {
position: absolute; left: 20px; right: 20px; bottom: 16px;
z-index: 2;
color: #fff;
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 20px;
line-height: 1.15;
letter-spacing: -0.014em;
}
.m-star__body {
padding: 18px 20px;
border-top: 1px solid var(--m-line);
}
.m-star__kicker {
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 600;
margin-bottom: 12px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-star__stats {
display: flex; gap: 16px;
list-style: none; padding: 0; margin: 0;
}
.m-star__stats li { flex: 1; }
.m-star__stats strong {
display: block;
font-family: var(--m-font-mono);
font-size: 18px;
font-weight: 700;
color: var(--m-text);
letter-spacing: -0.015em;
}
.m-star__stats span {
display: block;
margin-top: 2px;
font-size: 10px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 600;
}
/* ------------------------ 10b. STARS SLIDER (premium player carousel) ------------------------ */
.m-stars-slider {
position: relative;
isolation: isolate;
}
.m-stars-slider__viewport {
overflow: hidden;
margin: 0 -4px;
padding: 4px;
}
.m-stars-slider__track {
display: flex;
gap: clamp(14px, 1.6vw, 20px);
transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
will-change: transform;
}
.m-stars-slider__slide {
flex: 0 0 calc((100% - 3 * clamp(14px, 1.6vw, 20px)) / 4);
}
@media (max-width: 1024px) {
.m-stars-slider__slide { flex-basis: calc((100% - 2 * clamp(14px, 1.6vw, 20px)) / 3); }
}
@media (max-width: 720px) {
.m-stars-slider__slide { flex-basis: calc((100% - clamp(10px, 1.6vw, 14px)) / 1.6); }
}
@media (max-width: 480px) {
.m-stars-slider__slide { flex-basis: 78%; }
}
/* Prev / next arrows */
.m-stars-slider__nav {
display: flex; gap: 10px;
margin-top: clamp(20px, 2.4vw, 28px);
justify-content: flex-end;
align-items: center;
}
.m-stars-slider__btn {
appearance: none;
background: var(--m-surface);
border: 1px solid var(--m-line-2);
color: var(--m-text);
width: 48px; height: 48px;
border-radius: 50%;
cursor: pointer;
display: grid; place-items: center;
transition: background var(--m-transition), border-color var(--m-transition), color var(--m-transition), transform var(--m-transition);
}
.m-stars-slider__btn:hover {
background: var(--m-text);
border-color: var(--m-text);
color: var(--m-bg);
}
.m-stars-slider__btn:disabled {
opacity: .35;
cursor: not-allowed;
background: var(--m-surface);
border-color: var(--m-line);
color: var(--m-text-3);
transform: none;
}
.m-stars-slider__btn svg { width: 18px; height: 18px; }
.m-stars-slider__progress {
flex: 1;
height: 1px;
background: var(--m-line);
margin-right: 10px;
position: relative;
border-radius: 1px;
overflow: hidden;
max-width: 280px;
}
.m-stars-slider__progress::after {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: var(--m-stars-progress, 25%);
background: var(--m-text);
transition: width 520ms cubic-bezier(.22, 1, .36, 1);
}
.m-stars-slider__counter {
font-family: var(--m-font-mono);
font-size: 12px;
color: var(--m-text-3);
letter-spacing: .04em;
padding-right: 8px;
}
.m-stars-slider__counter strong { color: var(--m-text); font-weight: 600; }
/* Premium player card */
.m-pcard {
display: flex; flex-direction: column;
background: var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--m-text);
transition: transform 360ms var(--m-easing), box-shadow var(--m-transition), border-color var(--m-transition);
position: relative;
isolation: isolate;
height: 100%;
}
.m-pcard:hover {
transform: translateY(-4px);
box-shadow: var(--m-shadow-3);
border-color: var(--m-line-2);
color: var(--m-text);
}
/* Conic gold sheen on hover */
.m-pcard::before {
content: "";
position: absolute; inset: -1px;
border-radius: var(--m-radius-lg);
padding: 1px;
background: conic-gradient(from 220deg, transparent 0deg, var(--m-gold) 90deg, transparent 180deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 380ms var(--m-easing);
pointer-events: none;
z-index: -1;
}
.m-pcard:hover::before { opacity: 1; }
.m-pcard__media {
aspect-ratio: 4 / 5;
background:
linear-gradient(180deg, color-mix(in srgb, var(--m-pcard-hue, var(--m-blue)) 22%, transparent) 0%, transparent 60%),
linear-gradient(135deg, var(--m-bg-2) 0%, var(--m-surface-2) 100%);
display: grid; place-items: center;
overflow: hidden;
position: relative;
}
.m-pcard__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1000ms var(--m-easing), filter 500ms var(--m-easing);
filter: saturate(.95);
}
.m-pcard:hover .m-pcard__media img { transform: scale(1.06); filter: saturate(1.05); }
.m-pcard__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(15,15,16,.94) 100%);
}
.m-pcard__avatar {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(56px, 8vw, 88px);
color: color-mix(in srgb, var(--m-pcard-hue, var(--m-blue)) 60%, var(--m-text-3));
letter-spacing: -0.02em;
line-height: 1;
z-index: 1;
}
/* Number stamp top-left */
.m-pcard__num {
position: absolute;
top: 16px; left: 18px;
z-index: 2;
font-family: var(--m-font-serif);
font-style: italic;
font-weight: 400;
font-size: 22px;
color: rgba(255,255,255,.95);
letter-spacing: -0.01em;
line-height: 1;
text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
/* Position chip top-right */
.m-pcard__chip {
position: absolute;
top: 16px; right: 16px;
z-index: 2;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #fff;
background: rgba(15,15,16,.55);
backdrop-filter: blur(8px);
padding: 5px 10px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
}
/* Name overlaid on image bottom */
.m-pcard__name {
position: absolute;
left: 20px; right: 20px; bottom: 18px;
z-index: 2;
color: #fff;
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.1;
letter-spacing: -0.018em;
margin: 0;
font-variation-settings: "opsz" 144;
}
.m-pcard__body {
padding: 18px 20px 20px;
display: flex; flex-direction: column;
flex: 1;
border-top: 1px solid var(--m-line);
}
.m-pcard__kicker {
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 700;
margin-bottom: 14px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-pcard__stats {
display: flex; gap: 18px;
list-style: none; padding: 0; margin: 0;
}
.m-pcard__stats li {
flex: 1;
border-left: 1px solid var(--m-line);
padding-left: 14px;
}
.m-pcard__stats li:first-child {
border-left: 0;
padding-left: 0;
}
.m-pcard__stats strong {
display: block;
font-family: var(--m-font-mono);
font-size: 22px;
font-weight: 700;
color: var(--m-text);
line-height: 1;
letter-spacing: -0.015em;
}
.m-pcard__stats span {
display: block;
margin-top: 6px;
font-size: 10px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 700;
}
.m-pcard__cta {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--m-line);
display: flex; align-items: center; justify-content: space-between;
font-family: var(--m-font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--m-text-3);
transition: color var(--m-transition);
}
.m-pcard:hover .m-pcard__cta { color: var(--m-text); }
.m-pcard__cta-arrow {
transition: transform 280ms var(--m-easing);
font-size: 14px;
}
.m-pcard:hover .m-pcard__cta-arrow { transform: translateX(4px); }
/* Drop the legacy .m-stars grid in favour of the slider track */
/* ------------------------ 11. LEAGUES ROW ------------------------ */
.m-leagues {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(14px, 1.6vw, 18px);
}
.m-lcard {
border-radius: var(--m-radius-lg);
padding: 26px 24px 22px;
color: #fff;
text-decoration: none;
background: linear-gradient(160deg, var(--m-lcard-color, var(--m-blue)) 0%, color-mix(in srgb, var(--m-lcard-color, var(--m-blue)) 70%, black) 100%);
transition: transform var(--m-transition), box-shadow var(--m-transition);
display: flex; flex-direction: column; gap: 14px;
min-height: 140px;
position: relative;
overflow: hidden;
isolation: isolate;
}
.m-lcard::before {
content: "";
position: absolute; right: -50%; top: -50%;
width: 200%; height: 200%;
background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 50%);
transition: transform 600ms var(--m-easing);
}
.m-lcard:hover { transform: translateY(-3px); box-shadow: var(--m-shadow-3); color: #fff; }
.m-lcard:hover::before { transform: translate(-25%, -25%); }
.m-lcard__badge {
position: relative;
z-index: 1;
width: 56px; height: 56px;
border-radius: 14px;
overflow: hidden;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
display: grid;
place-items: center;
margin-bottom: 4px;
box-shadow: 0 6px 16px -4px rgba(0,0,0,.35);
}
.m-lcard__badge img {
width: 100%; height: 100%;
object-fit: contain;
padding: 4px;
}
.m-lcard__name {
font-family: var(--m-font-serif);
font-size: 22px;
font-weight: 500;
color: #fff;
line-height: 1.1;
letter-spacing: -0.018em;
position: relative;
z-index: 1;
}
.m-lcard__meta {
margin-top: auto;
font-size: 11px;
color: rgba(255,255,255,.78);
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 600;
position: relative;
z-index: 1;
}
/* ------------------------ 12. FINALE CTA — paper navigation hub ------------------------ */
.m-finale {
position: relative;
background:
radial-gradient(ellipse at 50% -20%, rgba(184,132,44,.08) 0%, transparent 55%),
var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-xl);
padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 72px);
overflow: hidden;
isolation: isolate;
text-align: center;
}
/* Top gold rule */
.m-finale::before {
content: "";
position: absolute; left: 50%; top: 0;
width: clamp(120px, 18vw, 200px);
height: 2px;
background: var(--m-gold);
transform: translateX(-50%);
}
/* Hairline below the rule */
.m-finale::after {
content: "";
position: absolute; left: 12%; right: 12%; top: 0;
height: 1px;
background: var(--m-line);
}
.m-finale__eyebrow {
display: inline-flex; align-items: center; gap: 12px;
color: var(--m-gold);
font-size: 11px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
margin-bottom: clamp(20px, 2.4vw, 28px);
}
.m-finale__eyebrow::before,
.m-finale__eyebrow::after {
content: "";
width: 24px; height: 1px;
background: currentColor;
opacity: .5;
}
.m-finale__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(36px, 5vw, 64px);
line-height: 1.04;
letter-spacing: -0.026em;
color: var(--m-text);
margin: 0 auto clamp(20px, 2.4vw, 28px);
font-variation-settings: "opsz" 144;
/* No max-width — keeps 'Don't miss kick-off.' on one line at all sizes */
text-align: center;
text-wrap: balance;
}
.m-finale__title em {
font-style: italic;
color: var(--m-gold);
font-weight: 400;
}
.m-finale__lead {
color: var(--m-text-2);
font-size: clamp(15px, 1.2vw, 18px);
line-height: 1.6;
max-width: 60ch;
margin: 0 auto clamp(40px, 5vw, 64px);
}
/* Destination tiles row */
.m-finale__tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(14px, 1.6vw, 20px);
text-align: left;
max-width: 1080px;
margin: 0 auto;
}
.m-fdest {
display: block;
position: relative;
background: var(--m-bg);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 24px);
text-decoration: none;
color: var(--m-text);
transition: transform 320ms var(--m-easing), border-color var(--m-transition), box-shadow var(--m-transition), background var(--m-transition);
overflow: hidden;
isolation: isolate;
min-height: 180px;
display: flex; flex-direction: column;
}
.m-fdest::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--m-fdest-color, var(--m-red));
transform: scaleY(0.3);
transform-origin: top;
transition: transform 360ms var(--m-easing);
}
.m-fdest:hover {
transform: translateY(-4px);
background: var(--m-surface);
border-color: var(--m-line-2);
box-shadow: var(--m-shadow-3);
color: var(--m-text);
}
.m-fdest:hover::before { transform: scaleY(1); }
.m-fdest__num {
font-family: var(--m-font-mono);
font-size: 11px;
color: var(--m-text-3);
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 16px;
font-weight: 600;
}
.m-fdest__name {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(20px, 1.7vw, 26px);
color: var(--m-text);
letter-spacing: -0.018em;
line-height: 1.1;
margin-bottom: 10px;
transition: color var(--m-transition);
}
.m-fdest:hover .m-fdest__name { color: var(--m-fdest-color, var(--m-red-2)); }
.m-fdest__desc {
color: var(--m-text-3);
font-size: 13px;
line-height: 1.5;
margin: 0 0 18px;
}
.m-fdest__foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--m-line);
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px;
font-size: 11px;
color: var(--m-text-3);
letter-spacing: .04em;
}
.m-fdest__count {
font-family: var(--m-font-mono);
font-weight: 600;
color: var(--m-text-2);
font-size: 13px;
letter-spacing: -0.005em;
}
.m-fdest__arrow {
font-size: 14px;
color: var(--m-text-3);
transition: transform 280ms var(--m-easing), color var(--m-transition);
}
.m-fdest:hover .m-fdest__arrow {
transform: translateX(6px);
color: var(--m-fdest-color, var(--m-red));
}
/* ------------------------ 13. FOOTER ------------------------ */
body.is-modern .gsbd-footer {
background: var(--m-deep) !important;
color: var(--m-text-on-deep-2) !important;
border-top: 0;
}
body.is-modern .gsbd-footer * { color: inherit !important; }
body.is-modern .gsbd-footer__name {
color: var(--m-text-on-deep) !important;
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: 22px !important;
letter-spacing: -0.018em !important;
}
body.is-modern .gsbd-footer__cols {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(24px, 3vw, 48px);
}
body.is-modern .gsbd-footer__cols > div {
position: relative;
padding-top: 18px;
}
body.is-modern .gsbd-footer__cols > div::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 28px; height: 1px;
background: var(--m-gold);
opacity: .55;
}
body.is-modern .gsbd-footer__cols h4 {
color: var(--m-gold) !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
margin: 0 0 18px !important;
line-height: 1 !important;
}
body.is-modern .gsbd-footer__cols ul,
body.is-modern .gsbd-footer__cols ul li,
body.is-modern .gsbd-footer__cols > div > li,
body.is-modern .gsbd-footer__cols .cat-item {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
background: none !important;
}
body.is-modern .gsbd-footer__cols li::before,
body.is-modern .gsbd-footer__cols li::marker,
body.is-modern .gsbd-footer__cols .cat-item::before,
body.is-modern .gsbd-footer__cols .cat-item::marker {
content: none !important;
display: none !important;
}
body.is-modern .gsbd-footer__cols li,
body.is-modern .gsbd-footer__cols .cat-item {
margin: 0 !important;
}
body.is-modern .gsbd-footer__cols a {
position: relative;
display: inline-flex !important;
align-items: center;
gap: 0;
padding: 7px 0 !important;
font-family: var(--m-font-serif) !important;
font-size: 15.5px !important;
font-weight: 400 !important;
letter-spacing: -0.012em !important;
line-height: 1.25 !important;
color: var(--m-text-on-deep) !important;
text-decoration: none !important;
transition: color 220ms ease, transform 280ms cubic-bezier(.2,.8,.2,1), padding-left 280ms cubic-bezier(.2,.8,.2,1) !important;
}
body.is-modern .gsbd-footer__cols a::before {
content: "";
width: 0;
height: 1px;
background: var(--m-gold);
margin-right: 0;
opacity: 0;
transition: width 280ms cubic-bezier(.2,.8,.2,1), margin-right 280ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
}
body.is-modern .gsbd-footer__cols a:hover {
color: var(--m-gold) !important;
}
body.is-modern .gsbd-footer__cols a:hover::before {
width: 14px;
margin-right: 10px;
opacity: 1;
}
body.is-modern .gsbd-footer__tag {
font-family: var(--m-font-sans) !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
color: var(--m-text-on-deep-2) !important;
margin-top: 10px;
max-width: 32ch;
}
body.is-modern .gsbd-footer__bar small {
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--m-text-on-deep-3) !important;
}
body.is-modern .gsbd-footer__cols a { color: var(--m-text-on-deep-2) !important; }
body.is-modern .gsbd-footer__cols a:hover { color: var(--m-gold) !important; }
body.is-modern .gsbd-footer__bar { background: rgba(0,0,0,.30) !important; border-top: 1px solid rgba(255,255,255,.06); }
body.is-modern .gsbd-footer__social a {
background: rgba(255,255,255,.05);
color: var(--m-text-on-deep-2) !important;
border: 1px solid rgba(255,255,255,.08);
}
/* ------------------------ 13b. SEARCH PANEL — editorial typography ------------------------ */
body.is-modern .gsbd-search-panel {
background:
radial-gradient(120% 160% at 50% 0%, rgba(184, 132, 44, .10) 0%, transparent 55%),
linear-gradient(180deg, var(--m-deep) 0%, #0a0b0e 100%) !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
}
body.is-modern .gsbd-search-panel::before {
background: linear-gradient(90deg, transparent 0%, var(--m-gold) 50%, transparent 100%) !important;
opacity: .55 !important;
}
body.is-modern .gsbd-search-panel__eyebrow {
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
color: var(--m-gold) !important;
}
body.is-modern .gsbd-search-panel__eyebrow::before {
background: var(--m-gold) !important;
width: 32px !important;
height: 1px !important;
}
body.is-modern .gsbd-search-panel__suggest-label {
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-on-deep-3) !important;
}
body.is-modern .gsbd-search-chip {
font-family: var(--m-font-sans) !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--m-text-on-deep-2) !important;
background: rgba(255,255,255,.04) !important;
border-color: rgba(255,255,255,.10) !important;
padding: 8px 16px !important;
}
body.is-modern .gsbd-search-chip:hover {
color: var(--m-deep) !important;
background: var(--m-gold) !important;
border-color: var(--m-gold) !important;
}
body.is-modern .gsbd-search-panel__hint {
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--m-text-on-deep-3) !important;
}
body.is-modern .gsbd-search-panel__hint kbd {
font-family: var(--m-font-mono) !important;
font-size: 10.5px !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--m-text-on-deep-2) !important;
}
body.is-modern .gsbd-search-panel .gsbd-search {
display: flex !important;
align-items: stretch !important;
gap: 0 !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.14) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 12px 0 6px !important;
}
body.is-modern .gsbd-search-panel .gsbd-search:focus-within {
border-bottom-color: var(--m-gold) !important;
}
body.is-modern .gsbd-search-panel .gsbd-search::before,
body.is-modern .gsbd-search-panel .gsbd-search::after {
display: none !important;
}
body.is-modern .gsbd-search-panel .gsbd-search__input,
body.is-modern .gsbd-search-panel input[type="search"],
body.is-modern .gsbd-search-panel .search-field {
font-family: var(--m-font-serif) !important;
font-size: clamp(22px, 2.4vw, 32px) !important;
font-weight: 400 !important;
letter-spacing: -0.018em !important;
color: var(--m-text-on-deep) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
padding: 14px 0 !important;
width: 100% !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
body.is-modern .gsbd-search-panel .gsbd-search__input::placeholder,
body.is-modern .gsbd-search-panel input[type="search"]::placeholder {
color: var(--m-text-on-deep-3) !important;
font-style: italic;
opacity: 1;
}
body.is-modern .gsbd-search-panel .gsbd-search__submit,
body.is-modern .gsbd-search-panel button[type="submit"] {
font-family: var(--m-font-sans) !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
background: transparent !important;
color: var(--m-gold) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 4px 0 18px !important;
align-self: center;
cursor: pointer;
transition: color var(--m-transition);
}
body.is-modern .gsbd-search-panel .gsbd-search__submit:hover,
body.is-modern .gsbd-search-panel button[type="submit"]:hover {
color: var(--m-text-on-deep) !important;
}
body.is-modern .gsbd-cheatsheet,
body.is-modern .gsbd-cheatsheet * { color: var(--m-text-2) !important; }
body.is-modern .gsbd-cheatsheet {
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-xl) !important;
}
body.is-modern .gsbd-cheatsheet__title {
color: var(--m-text) !important;
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
letter-spacing: -0.022em !important;
}
body.is-modern .gsbd-cheatsheet__kicker {
color: var(--m-gold) !important;
letter-spacing: .18em !important;
}
/* League-tinted page hero — compact premium magazine masthead */
.m-page-hero--league {
padding-block: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 36px) !important;
background:
linear-gradient(135deg,
color-mix(in srgb, var(--m-league-color, var(--m-blue)) 78%, #000) 0%,
color-mix(in srgb, var(--m-league-color, var(--m-blue)) 55%, #000) 60%,
var(--m-deep) 100%) !important;
min-height: 0 !important;
}
.m-page-hero--league::before {
background:
radial-gradient(700px 320px at 10% 0%, color-mix(in srgb, var(--m-league-color, var(--m-blue)) 80%, transparent) 0%, transparent 60%),
radial-gradient(500px 280px at 95% 100%, rgba(184,132,44,.18) 0%, transparent 65%);
opacity: .9;
}
.m-page-hero--league::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 100%);
z-index: 0;
pointer-events: none;
}
.m-page-hero--league .m-container {
position: relative;
}
/* League hero — compact two-column grid (text + crest) */
.m-league-hero {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(20px, 3vw, 40px);
align-items: center;
padding-bottom: clamp(20px, 2.4vw, 28px);
border-bottom: 1px solid rgba(255,255,255,.14);
margin-bottom: clamp(20px, 2.4vw, 28px);
}
.m-league-hero__main { min-width: 0; }
.m-league-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--m-font-sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
color: #ffd685;
margin-bottom: 12px;
}
.m-league-hero__eyebrow::before {
content: "";
width: 26px; height: 1px;
background: #ffd685;
opacity: .9;
}
.m-league-hero__title {
color: #fff !important;
margin: 0 0 14px !important;
max-width: 16ch;
font-size: clamp(28px, 3.8vw, 48px) !important;
line-height: 1.0 !important;
letter-spacing: -0.026em !important;
text-shadow: 0 2px 20px rgba(0,0,0,.30);
text-transform: none !important;
}
.m-league-hero__chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 14px;
}
.m-league-hero__chip {
display: inline-flex;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.20);
color: #fff;
padding: 5px 11px;
border-radius: 999px;
font-family: var(--m-font-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: .20em;
text-transform: uppercase;
}
.m-league-hero__champion {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 16px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,215,133,.4);
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.m-league-hero__champion-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
color: #ffd685;
font-family: var(--m-font-sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
flex-shrink: 0;
}
.m-league-hero__champion-name {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 16px;
letter-spacing: -0.012em;
color: #fff;
line-height: 1.1;
}
/* Crest displayed in hero — compact showcase tile */
.m-league-hero__crest {
position: relative;
width: clamp(96px, 10vw, 128px);
height: clamp(96px, 10vw, 128px);
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 100%);
display: grid;
place-items: center;
overflow: visible;
padding: 12px;
box-shadow:
0 1px 0 rgba(255,255,255,.7) inset,
0 0 0 1px rgba(255,255,255,.12),
0 22px 44px -22px rgba(0,0,0,.6);
flex-shrink: 0;
transition: transform 480ms cubic-bezier(.2,.8,.2,1);
}
.m-league-hero__crest::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 26px;
background: linear-gradient(135deg, color-mix(in srgb, var(--m-league-color, var(--m-red)) 60%, transparent), transparent 60%);
opacity: .35;
z-index: -1;
filter: blur(12px);
}
.m-league-hero__crest:hover { transform: rotate(0deg) scale(1.04); }
.m-league-hero__crest img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-league-hero__crest--fallback {
background:
linear-gradient(135deg, color-mix(in srgb, var(--m-league-color, var(--m-red)) 100%, transparent) 0%, color-mix(in srgb, var(--m-league-color, var(--m-red)) 70%, var(--m-deep)) 100%) !important;
border: 1px solid rgba(255,255,255,.18);
}
.m-league-hero__crest--fallback span {
font-family: var(--m-font-serif);
font-weight: 700;
font-size: clamp(46px, 4.6vw, 64px);
letter-spacing: -0.04em;
color: rgba(255,255,255,.95);
text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
/* Stats — compact pill row */
.m-page-hero--league .m-page-hero__stats {
position: relative;
z-index: 2;
display: flex !important;
flex-wrap: wrap;
gap: 0 !important;
padding: 14px 18px !important;
margin: 0;
background: rgba(0,0,0,.20);
border: 1px solid rgba(255,255,255,.14);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
list-style: none;
grid-template-columns: none !important;
}
.m-page-hero--league .m-page-hero__stats li {
flex: 1 1 auto;
padding: 0 18px;
border-right: 1px solid rgba(255,255,255,.12);
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.m-page-hero--league .m-page-hero__stats li:first-child { padding-left: 4px; }
.m-page-hero--league .m-page-hero__stats li:last-child { border-right: 0; padding-right: 4px; }
.m-page-hero--league .m-page-hero__stats strong {
font-family: var(--m-font-serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.018em;
line-height: 1.05;
color: #fff;
margin: 0;
font-variation-settings: "opsz" 144;
}
.m-page-hero--league .m-page-hero__stats span {
font-family: var(--m-font-sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
margin: 0;
}
.m-league-hero__broadcast {
font-family: var(--m-font-serif) !important;
font-size: 16px !important;
line-height: 1.1 !important;
letter-spacing: -0.012em !important;
}
/* Crumb readability boost on the lighter coloured background */
.m-page-hero--league .m-page-hero__crumb {
color: rgba(255,255,255,.85) !important;
margin-bottom: 18px !important;
}
.m-page-hero--league .m-page-hero__crumb a { color: rgba(255,255,255,.72) !important; }
.m-page-hero--league .m-page-hero__crumb a:hover { color: #ffd685 !important; }
.m-page-hero--league .m-page-hero__crumb span.sep { color: rgba(255,255,255,.40) !important; }
@media (max-width: 720px) {
body.is-modern .m-page-hero--league .m-page-hero__stats {
flex-wrap: wrap;
padding: 10px 14px !important;
gap: 8px 0 !important;
}
body.is-modern .m-page-hero--league .m-page-hero__stats li {
flex: 0 0 50%;
padding: 6px 12px !important;
border-right: 1px solid rgba(255,255,255,.10) !important;
}
body.is-modern .m-page-hero--league .m-page-hero__stats li:nth-child(2n) {
border-right: 0 !important;
}
body.is-modern .m-page-hero--league .m-page-hero__stats strong { font-size: 18px; }
}
@media (max-width: 720px) {
body.is-modern .m-league-hero {
grid-template-columns: 1fr;
gap: 22px;
}
body.is-modern .m-league-hero__crest {
width: 120px;
height: 120px;
border-radius: 22px;
}
body.is-modern .m-page-hero--league .m-page-hero__stats {
grid-template-columns: 1fr 1fr;
gap: 16px 0;
}
body.is-modern .m-page-hero--league .m-page-hero__stats li {
padding: 0 clamp(14px, 3vw, 22px) !important;
}
body.is-modern .m-page-hero--league .m-page-hero__stats li:nth-child(odd) {
padding-left: 0 !important;
}
body.is-modern .m-page-hero--league .m-page-hero__stats li:nth-child(2n) {
border-right: 0 !important;
}
}
/* League sidebar — premium card */
.m-mside--league {
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-lg) !important;
padding: clamp(22px, 2.5vw, 28px) !important;
position: relative;
overflow: hidden;
}
.m-mside--league::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--m-league-color, var(--m-gold)) 0%, transparent 100%);
}
.m-mside__eyebrow {
display: inline-block;
font-family: var(--m-font-sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--m-gold);
margin-bottom: 6px;
}
.m-mside__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: 22px !important;
letter-spacing: -0.018em !important;
color: var(--m-text) !important;
margin: 0 0 16px !important;
padding: 0 0 16px !important;
border-bottom: 1px solid var(--m-line) !important;
line-height: 1.15 !important;
text-transform: none !important;
}
.m-mside__list {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 20px !important;
padding: 0 !important;
}
.m-mside__list > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 0 !important;
background: none !important;
}
.m-mside__list dt {
font-family: var(--m-font-sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--m-text-3);
margin: 0;
flex-shrink: 0;
}
.m-mside__list dd {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 15px;
letter-spacing: -0.012em;
color: var(--m-text);
margin: 0;
text-align: right;
line-height: 1.3;
}
.m-mside__cta {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
justify-content: center;
padding: 12px 20px;
background: var(--m-text);
color: var(--m-bg) !important;
border-radius: 999px;
font-family: var(--m-font-sans);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none !important;
transition: background 220ms ease, transform 220ms ease;
}
.m-mside--league .m-mside__cta:hover {
background: var(--m-league-color, var(--m-gold));
transform: translateY(-1px);
color: #fff !important;
}
/* ------------------------ 13b. PAGE HERO (archives, profiles) ------------------------ */
.m-page-hero {
background: var(--m-deep);
color: var(--m-text-on-deep);
padding-block: clamp(56px, 8vw, 96px) clamp(40px, 5vw, 72px);
position: relative;
overflow: hidden;
isolation: isolate;
}
.m-page-hero::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 0% 100%, rgba(184,132,44,.18) 0%, transparent 55%),
radial-gradient(ellipse at 100% 0%, rgba(185,28,28,.10) 0%, transparent 55%);
z-index: 0;
}
.m-page-hero > * { position: relative; z-index: 1; }
.m-page-hero__crumb {
display: flex; align-items: center; gap: 10px;
color: var(--m-text-on-deep-3);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 28px;
}
.m-page-hero__crumb a {
color: var(--m-text-on-deep-2);
transition: color var(--m-transition);
}
.m-page-hero__crumb a:hover { color: var(--m-gold); }
.m-page-hero__crumb span.sep {
color: var(--m-text-on-deep-3);
opacity: .5;
}
.m-page-hero__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(40px, 6.4vw, 84px);
color: #fff;
letter-spacing: -0.028em;
line-height: .98;
margin: 0 0 24px;
font-variation-settings: "opsz" 144;
max-width: 12ch;
}
.m-page-hero__title em { font-style: italic; font-weight: 400; color: var(--m-gold); }
.m-page-hero__lead {
color: var(--m-text-on-deep-2);
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
max-width: 640px;
margin: 0 0 40px;
}
.m-page-hero__stats {
display: grid;
grid-template-columns: repeat(4, auto);
gap: clamp(32px, 5vw, 64px);
list-style: none;
padding: 0; margin: 0;
border-top: 1px solid rgba(255,255,255,.10);
padding-top: 32px;
justify-content: start;
}
.m-page-hero__stats li { min-width: 80px; }
.m-page-hero__stats strong {
display: block;
font-family: var(--m-font-mono);
font-size: clamp(32px, 4vw, 48px);
font-weight: 600;
color: #fff;
letter-spacing: -0.02em;
line-height: 1;
}
.m-page-hero__stats span {
display: block;
margin-top: 8px;
font-size: 11px;
color: var(--m-text-on-deep-3);
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 600;
}
.m-page-hero__stats li.is-live strong { color: var(--m-red); }
.m-page-hero__stats li.is-live span { color: var(--m-red); }
/* ------------------------ 13c. SECTION TITLE (mid-page) ------------------------ */
.m-stitle {
display: flex; align-items: baseline; justify-content: space-between;
gap: 24px;
margin-bottom: clamp(20px, 2.4vw, 32px);
padding-bottom: 16px;
border-bottom: 1px solid var(--m-line);
}
.m-stitle__h {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 32px);
letter-spacing: -0.022em;
color: var(--m-text);
display: flex; align-items: baseline; gap: 14px;
}
.m-stitle__h em { font-style: italic; color: var(--m-gold); font-weight: 400; }
.m-stitle__count {
font-family: var(--m-font-mono);
font-size: 14px;
color: var(--m-text-3);
font-weight: 500;
letter-spacing: -0.01em;
}
.m-stitle--live .m-stitle__h::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--m-red);
box-shadow: 0 0 0 0 rgba(185,28,28,.5);
animation: m-pulse 1.6s ease-out infinite;
align-self: center;
}
/* ------------------------ 13d. LIGHT FCARD GRID (for archive sections) ------------------------ */
.m-fcard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: clamp(14px, 1.8vw, 20px);
}
.m-fcard-grid .m-fcard--light {
flex: none;
background: var(--m-surface);
border: 1px solid var(--m-line);
color: var(--m-text);
backdrop-filter: none;
box-shadow: var(--m-shadow-1);
}
.m-fcard-grid .m-fcard--light:hover {
background: var(--m-surface);
border-color: var(--m-line-2);
box-shadow: var(--m-shadow-3);
color: var(--m-text);
}
.m-fcard-grid .m-fcard--light .m-fcard__competition,
.m-fcard-grid .m-fcard--light .m-fcard__bottom { color: var(--m-text-3); }
.m-fcard-grid .m-fcard--light .m-fcard__crest {
background: var(--m-surface-2);
border: 1px solid var(--m-line);
}
.m-fcard-grid .m-fcard--light .m-fcard__crest-fallback { color: var(--m-text-3); }
.m-fcard-grid .m-fcard--light .m-fcard__code { color: var(--m-text); }
.m-fcard-grid .m-fcard--light .m-fcard__score { color: var(--m-text); }
.m-fcard-grid .m-fcard--light .m-fcard__bottom { border-top-color: var(--m-line); }
.m-fcard-grid .m-fcard--light .m-fcard__meta--strong { color: var(--m-text-2); }
.m-fcard-grid .m-fcard--light .m-fcard__broadcast { color: var(--m-text-3); }
.m-fcard-grid .m-fcard--light .m-fcard__status {
background: var(--m-surface-2);
color: var(--m-text-3);
}
.m-fcard-grid .m-fcard--light .m-fcard__status--live {
background: var(--m-red);
color: #fff;
}
.m-fcard-grid .m-fcard--light .m-fcard__status--upcoming {
background: var(--m-blue-soft);
color: var(--m-blue);
}
.m-fcard-grid .m-fcard--light .m-fcard__status--final {
background: var(--m-surface-2);
color: var(--m-text-2);
}
.m-fcard-grid .m-fcard--light .m-fcard__vs {
background: var(--m-bg);
border: 1px solid var(--m-line);
color: var(--m-text-3);
}
.m-fcard-grid .m-fcard--light .m-fcard__dash { color: var(--m-text-4); }
/* ------------------------ 13e. MATCH CENTRE (single match) ------------------------ */
.m-mhero {
--m-mhero-color: #1d4ed8;
background:
linear-gradient(135deg,
color-mix(in srgb, var(--m-mhero-color) 78%, #000) 0%,
color-mix(in srgb, var(--m-mhero-color) 55%, #000) 60%,
var(--m-deep) 100%);
color: var(--m-text-on-deep);
padding-block: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 36px);
position: relative;
overflow: hidden;
isolation: isolate;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.m-mhero--football { --m-mhero-color: #1e40af; }
.m-mhero--cricket { --m-mhero-color: #166534; }
.m-mhero--live { --m-mhero-color: #b91c1c; }
.m-mhero::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(700px 320px at 10% 0%, color-mix(in srgb, var(--m-mhero-color) 80%, transparent) 0%, transparent 60%),
radial-gradient(500px 280px at 95% 100%, rgba(184,132,44,.18) 0%, transparent 65%);
opacity: .9;
z-index: 0;
}
.m-mhero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 100%);
z-index: 0;
pointer-events: none;
}
.m-mhero > * { position: relative; z-index: 1; }
.m-mhero__crumb {
display: flex; align-items: center; gap: 10px;
color: rgba(255,255,255,.85);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 18px;
}
.m-mhero__crumb a { color: rgba(255,255,255,.72); transition: color var(--m-transition); }
.m-mhero__crumb a:hover { color: #ffd685; }
.m-mhero__crumb span.sep { color: rgba(255,255,255,.40); }
.m-mhero__chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: clamp(20px, 2.4vw, 30px);
}
.m-mhero__chip {
display: inline-flex; align-items: center;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.20);
color: #fff;
padding: 5px 11px;
border-radius: 999px;
font-family: var(--m-font-sans);
font-size: 10px;
letter-spacing: .20em;
text-transform: uppercase;
font-weight: 700;
backdrop-filter: blur(8px);
}
.m-mhero__chip--gold {
background: rgba(255,215,133,.18);
border-color: rgba(255,215,133,.40);
color: #ffd685;
}
.m-mhero__board {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(20px, 3vw, 48px);
margin-bottom: clamp(20px, 2.4vw, 28px);
padding-bottom: clamp(18px, 2.2vw, 24px);
border-bottom: 1px solid rgba(255,255,255,.14);
}
.m-mhero__team {
display: flex; flex-direction: column; align-items: center;
gap: 10px;
text-align: center;
min-width: 0;
}
.m-mhero__crest {
position: relative;
width: clamp(80px, 9vw, 112px);
height: clamp(80px, 9vw, 112px);
background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 100%);
border: 0;
border-radius: 22px;
display: grid; place-items: center;
overflow: visible;
box-shadow:
0 1px 0 rgba(255,255,255,.7) inset,
0 0 0 1px rgba(255,255,255,.12),
0 22px 44px -22px rgba(0,0,0,.6);
padding: 10px;
transition: transform 480ms cubic-bezier(.2,.8,.2,1);
}
.m-mhero__crest::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 26px;
background: linear-gradient(135deg, color-mix(in srgb, var(--m-mhero-color) 60%, transparent), transparent 60%);
opacity: .35;
z-index: -1;
filter: blur(12px);
}
.m-mhero__team:hover .m-mhero__crest { transform: rotate(-3deg) scale(1.04); }
.m-mhero__crest img {
width: 100%; height: 100%;
object-fit: contain;
padding: 0;
background: none;
}
.m-mhero__crest-fallback {
font-family: var(--m-font-serif);
font-weight: 700;
font-size: clamp(36px, 4.4vw, 52px);
color: var(--m-mhero-color);
letter-spacing: -0.02em;
}
.m-mhero__team-name {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(22px, 2.8vw, 36px);
color: #fff;
letter-spacing: -0.022em;
line-height: 1.0;
font-variation-settings: "opsz" 144;
margin: 0;
text-shadow: 0 2px 18px rgba(0,0,0,.30);
}
.m-mhero__team-full {
font-family: var(--m-font-sans);
font-size: 10px;
color: rgba(255,255,255,.72);
text-transform: uppercase;
letter-spacing: .22em;
font-weight: 700;
margin: 0;
}
.m-mhero__team-score {
font-family: var(--m-font-mono);
font-weight: 700;
font-size: clamp(40px, 5.4vw, 64px);
color: #fff;
line-height: 1;
letter-spacing: -0.025em;
margin-top: 4px;
}
.m-mhero__center {
display: flex; flex-direction: column; align-items: center;
gap: 8px;
min-width: 110px;
}
.m-mhero__status {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--m-font-sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 999px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.20);
color: #fff;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.m-mhero__status--live {
background: var(--m-red);
color: #fff;
}
.m-mhero__status--final {
background: rgba(255,255,255,.10);
color: #fff;
}
.m-mhero__status--upcoming {
background: rgba(255,215,133,.18) !important;
color: #ffd685 !important;
border: 1px solid rgba(255,215,133,.45) !important;
}
.m-mhero__status--final {
background: rgba(255,255,255,.20) !important;
color: #fff !important;
}
.m-mhero__pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0 rgba(255,255,255,.6);
animation: m-pulse 1.6s ease-out infinite;
}
.m-mhero__vs {
font-family: var(--m-font-serif);
font-style: italic;
font-size: clamp(20px, 2.4vw, 30px);
color: rgba(255,255,255,.55);
line-height: 1;
letter-spacing: -0.01em;
}
.m-mhero__time {
font-family: var(--m-font-mono);
font-size: 12.5px;
color: #ffd685;
letter-spacing: -0.005em;
font-weight: 700;
}
.m-mhero__day {
font-family: var(--m-font-sans);
font-size: 10px;
color: rgba(255,255,255,.65);
text-transform: uppercase;
letter-spacing: .22em;
font-weight: 700;
}
/* Stats bar — glass-blur pill with divided cells (matches league hero pattern) */
.m-mhero__sub {
display: flex !important; flex-wrap: wrap;
gap: 0;
color: var(--m-text-on-deep-2);
background: rgba(0,0,0,.20);
border: 1px solid rgba(255,255,255,.14);
border-radius: 14px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 14px 18px;
margin: 0;
}
.m-mhero__sub-item {
flex: 1 1 auto;
padding: 0 18px;
border-right: 1px solid rgba(255,255,255,.12);
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.m-mhero__sub-item:first-child { padding-left: 4px; }
.m-mhero__sub-item:last-child { border-right: 0; padding-right: 4px; }
.m-mhero__sub strong {
display: block;
font-family: var(--m-font-sans);
font-size: 9.5px;
color: rgba(255,255,255,.72);
text-transform: uppercase;
letter-spacing: .22em;
font-weight: 700;
margin: 0;
}
.m-mhero__sub-item span {
color: #fff;
font-weight: 500;
font-family: var(--m-font-serif);
font-size: 16px;
letter-spacing: -0.012em;
line-height: 1.15;
font-variation-settings: "opsz" 32;
}
.m-mhero__sub-item--text span {
font-family: var(--m-font-serif);
font-size: 16px;
}
.m-mhero__result {
margin: clamp(18px, 2vw, 24px) 0 0;
padding: 14px 22px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,215,133,.40);
border-radius: 999px;
font-family: var(--m-font-serif);
font-style: italic;
font-size: 16px;
color: #ffd685;
text-align: center;
display: inline-block;
}
@media (max-width: 720px) {
body.is-modern .m-mhero__board {
gap: 12px;
}
body.is-modern .m-mhero__crest {
width: 64px !important;
height: 64px !important;
border-radius: 16px;
}
body.is-modern .m-mhero__team-name { font-size: 18px !important; }
body.is-modern .m-mhero__team-full { font-size: 9px; }
body.is-modern .m-mhero__sub {
flex-wrap: wrap;
padding: 10px 14px;
gap: 8px 0;
}
body.is-modern .m-mhero__sub-item {
flex: 0 0 50%;
padding: 6px 12px !important;
border-right: 1px solid rgba(255,255,255,.10) !important;
}
body.is-modern .m-mhero__sub-item:nth-child(2n) {
border-right: 0 !important;
}
}
/* Tabs */
.m-mtabs__bar {
border-bottom: 1px solid var(--m-line);
margin-bottom: clamp(24px, 3vw, 40px);
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.m-mtabs__bar::-webkit-scrollbar { display: none; }
.m-mtabs__bar [role="tab"] {
appearance: none;
background: transparent;
border: 0;
color: var(--m-text-3);
padding: 18px 24px;
font-family: var(--m-font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
position: relative;
transition: color var(--m-transition);
white-space: nowrap;
}
.m-mtabs__bar [role="tab"]:hover { color: var(--m-text); }
.m-mtabs__bar [role="tab"][aria-selected="true"],
.m-mtabs__bar [role="tab"].is-active {
color: var(--m-text);
}
.m-mtabs__bar [role="tab"][aria-selected="true"]::after,
.m-mtabs__bar [role="tab"].is-active::after {
content: "";
position: absolute;
left: 16px; right: 16px; bottom: -1px;
height: 2px;
background: var(--m-text);
border-radius: 2px 2px 0 0;
}
.m-mpanel { padding-bottom: clamp(40px, 5vw, 64px); }
.m-mpanel__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: clamp(24px, 4vw, 56px);
}
.m-mpanel__main { min-width: 0; }
.m-mpanel__h {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: -0.022em;
margin: 0 0 24px;
padding-bottom: 14px;
border-bottom: 1px solid var(--m-line);
}
.m-mpanel__h em { font-style: italic; color: var(--m-gold); font-weight: 400; }
/* Fact grid (Overview tab) */
.m-mfacts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
margin: 0 0 32px;
background: var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
overflow: hidden;
}
.m-mfacts > div {
padding: 18px 22px;
border-top: 1px solid var(--m-line);
border-left: 1px solid var(--m-line);
}
.m-mfacts > div:nth-child(-n+2) { border-top: 0; }
.m-mfacts > div:nth-child(odd) { border-left: 0; }
.m-mfacts dt {
font-size: 11px;
color: var(--m-text-3);
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 600;
margin-bottom: 6px;
}
.m-mfacts dd {
margin: 0;
color: var(--m-text);
font-weight: 600;
font-size: 15px;
font-family: var(--m-font-mono);
letter-spacing: -0.005em;
}
.m-mfacts dd.is-text {
font-family: var(--m-font-sans);
}
/* Sidebar quick info */
.m-mside {
background: var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
padding: 24px 26px;
}
.m-mside h3 {
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--m-text-3);
margin: 0 0 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--m-line);
}
.m-mside ul { list-style: none; margin: 0; padding: 0; }
.m-mside li {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
border-bottom: 1px dashed var(--m-line);
font-size: 14px;
color: var(--m-text);
}
.m-mside li:last-child { border-bottom: 0; }
.m-mside li > span:first-child {
width: 22px; flex-shrink: 0;
font-size: 16px;
text-align: center;
}
.m-mside li b {
margin-left: auto;
font-weight: 600;
font-family: var(--m-font-mono);
font-size: 13px;
color: var(--m-text-2);
letter-spacing: -0.005em;
}
/* Article body inside Overview tab */
.m-mpanel__body {
color: var(--m-text-2);
line-height: 1.7;
font-size: 16px;
}
.m-mpanel__body p { margin: 0 0 16px; }
.m-mpanel__body h2, .m-mpanel__body h3 {
font-family: var(--m-font-serif);
font-weight: 500;
color: var(--m-text);
letter-spacing: -0.02em;
margin: 32px 0 12px;
}
.m-mpanel__body h2 { font-size: 24px; }
.m-mpanel__body h3 { font-size: 20px; }
/* Watch tab */
.m-mwatch {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.m-mwatch__block {
background: var(--m-surface);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
padding: 24px 26px;
}
.m-mwatch__block h3 {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 18px;
margin: 0 0 14px;
letter-spacing: -0.014em;
}
.m-mwatch__block ul {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.m-mwatch__block li {
background: var(--m-bg-2);
color: var(--m-text);
padding: 10px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
border: 1px solid var(--m-line);
}
/* Lineups / Stats placeholder */
.m-mempty {
background: var(--m-surface);
border: 1px dashed var(--m-line-2);
border-radius: var(--m-radius-lg);
padding: clamp(48px, 6vw, 88px) 32px;
text-align: center;
}
.m-mempty__icon {
font-size: 56px;
line-height: 1;
margin-bottom: 20px;
opacity: .4;
}
.m-mempty__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(20px, 2vw, 26px);
letter-spacing: -0.018em;
color: var(--m-text);
margin: 0 0 10px;
}
.m-mempty__lead {
color: var(--m-text-3);
max-width: 480px;
margin: 0 auto;
font-size: 15px;
line-height: 1.55;
}
/* Related matches block */
.m-mrelated {
margin-top: clamp(40px, 5vw, 64px);
padding-top: clamp(40px, 5vw, 64px);
border-top: 1px solid var(--m-line);
}
/* Empty state for archive */
.m-empty {
background: var(--m-surface);
border: 1px dashed var(--m-line-2);
border-radius: var(--m-radius-lg);
padding: clamp(40px, 6vw, 72px) 24px;
text-align: center;
color: var(--m-text-3);
font-size: 15px;
}
/* ------------------------ 14. RESPONSIVE ------------------------ */
@media (max-width: 1024px) {
.m-hero__inner { min-height: 520px; }
.m-hero__content { grid-template-columns: 1fr; }
.m-hero__sidekicker { display: none; }
.m-hero__rail-grid { grid-template-columns: repeat(2, 1fr); }
.m-mlead { grid-template-columns: 1fr; }
.m-mlead__media { aspect-ratio: 16/9; min-height: 320px; }
.m-mcols { grid-template-columns: 1fr 1fr; }
.m-mnote { grid-column: 1 / -1; }
.m-twin { grid-template-columns: 1fr; }
.m-watch { grid-template-columns: 1fr; }
.m-frow { grid-template-columns: 90px 1fr auto; gap: 14px; padding: 16px 24px; }
.m-frow__type, .m-frow__venue, .m-frow__cta { display: none; }
/* Watch promo */
.m-watch__platforms { grid-template-columns: repeat(2, 1fr); }
/* Schedule carousel */
.m-sched__head, .m-sched__tabs, .m-sched__panel-head { padding-inline: 24px; }
.m-sched__row { grid-template-columns: 90px 1fr auto; gap: 14px; padding: 16px 24px; }
.m-sched__type, .m-sched__venue, .m-sched__cta { display: none; }
.m-sched__pill { padding: 14px 14px 16px; min-width: 76px; }
.m-sched__pill em { font-size: 18px; }
.m-sched__teams { font-size: 16px; }
.m-sched__teams-crests { gap: 4px; }
.m-sched__crest { width: 22px; height: 22px; }
}
@media (max-width: 1024px) {
.m-mpanel__layout { grid-template-columns: 1fr; }
.m-mhero__board { gap: 16px; }
}
@media (max-width: 720px) {
body.is-modern { font-size: 16px; }
.m-page-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.m-stitle { flex-direction: column; align-items: flex-start; gap: 6px; }
.m-mhero__board { grid-template-columns: 1fr auto 1fr; gap: 12px; }
.m-mhero__crest { width: 72px; height: 72px; }
.m-mhero__team-name { font-size: 22px; }
.m-mhero__team-score { font-size: 36px; }
.m-mhero__center { min-width: 80px; gap: 8px; }
.m-mhero__status { font-size: 11px; padding: 7px 12px; }
.m-mhero__sub { gap: 16px; }
.m-mfacts { grid-template-columns: 1fr; }
.m-mfacts > div { border-left: 0; }
.m-mfacts > div:nth-child(2) { border-top: 1px solid var(--m-line); }
.m-mtabs__bar [role="tab"] { padding: 14px 16px; font-size: 12px; }
/* Finale tiles: 2 cols on tablet+ phone, 1 col on smallest screens */
.m-finale__tiles { grid-template-columns: repeat(2, 1fr); }
/* Watch promo on phones */
.m-watch__platforms { grid-template-columns: 1fr 1fr; gap: 10px; }
.m-watch__platform { padding: 16px 16px 14px; }
.m-watch__platform-name { font-size: 16px; }
.m-watch__ctas { gap: 14px; }
.m-watch__cta { padding: 14px 22px; font-size: 13px; }
.m-watch__cta-secondary { font-size: 12px; }
.m-watch__eyebrow-row { gap: 12px; }
.m-hero__inner { min-height: 440px; }
.m-hero__content { padding-block: 56px 40px; }
.m-hero__title { font-size: clamp(32px, 9vw, 48px); }
.m-hero__rail { margin-top: -32px; }
.m-hero__rail-grid { grid-template-columns: 1fr; gap: 14px; }
.m-mlead { grid-template-columns: 1fr; }
.m-mlead__media { aspect-ratio: 16/10; min-height: 260px; }
.m-mlead__panel { padding: 28px 24px; }
.m-mlead__stamp em { font-size: 40px; }
.m-mlead__title { font-size: 30px; }
.m-mlead__title::first-letter { font-size: 1.5em; }
.m-mcols { grid-template-columns: 1fr; gap: 16px; }
.m-mnote { grid-column: auto; }
.m-section { padding-block: 24px; }
.m-section-head { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 20px; }
.m-livepanel { padding: 24px 20px; }
.m-fixtures__head { padding: 24px; }
.m-fixtures__day-head { padding: 14px 24px; }
.m-frow { padding: 14px 24px; }
.m-frow__teams { font-size: 16px; }
.m-newsletter__form { flex-direction: column; padding: 8px; border-radius: 16px; gap: 6px; }
.m-newsletter__form input { padding: 14px; }
.m-newsletter__form button { padding: 14px; border-radius: 12px; }
body.is-modern .gsbd-topbar__live, body.is-modern .gsbd-topbar__social { display: none !important; }
}
/* ------------------------ 14. TOP SITES — tighten gap above ------------------------ */
body.is-modern .gsbd-main { padding-bottom: 0 !important; }
body.is-modern .gsbd-tops {
margin-block: 0 28px !important;
padding-top: clamp(20px, 2.4vw, 32px) !important;
padding-bottom: clamp(24px, 3vw, 40px) !important;
}
body.is-modern .gsbd-tops__head {
padding-bottom: clamp(14px, 1.6vw, 20px) !important;
margin-bottom: clamp(18px, 2vw, 26px) !important;
}
/* ------------------------ 14b. TOP SITES — logo crop fix ------------------------ */
body.is-modern .gsbd-tops__brand {
flex-direction: row !important;
align-items: center !important;
gap: 14px !important;
min-width: 0;
}
body.is-modern .gsbd-tops__logo {
width: 56px !important;
height: 56px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 12px !important;
padding: 8px !important;
overflow: visible !important;
}
body.is-modern .gsbd-tops__logo img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
overflow: visible !important;
display: block !important;
}
body.is-modern .gsbd-tops__logo-fallback {
width: 100% !important;
height: 100% !important;
border-radius: 8px !important;
font-size: 1.05rem !important;
}
body.is-modern .gsbd-tops__name {
font-family: var(--m-font-serif) !important;
font-size: 17px !important;
font-weight: 500 !important;
letter-spacing: -0.012em !important;
color: var(--m-text-on-deep) !important;
line-height: 1.2 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
@media (max-width: 720px) {
body.is-modern .gsbd-tops__logo {
width: 44px !important;
height: 44px !important;
padding: 6px !important;
}
body.is-modern .gsbd-tops__name {
font-size: 15px !important;
}
body.is-modern .gsbd-footer__cols {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ============================================================
15. COMPREHENSIVE MOBILE RESPONSIVE PASS
Tablet (<= 1024px) & Phone (<= 720px) & Small (<= 480px).
============================================================ */
/* ---- Global: prevent any horizontal overflow leak ---- */
html, body { overflow-x: clip; }
body.is-modern, body.is-modern .gsbd-main { max-width: 100%; }
/* ---- Tablet (<= 1024px) ---- */
@media (max-width: 1024px) {
/* CRITICAL: backdrop-filter creates a containing block for position:fixed
descendants — that traps the slide-out drawer inside the header bounds.
Must be disabled below the desktop nav breakpoint. */
body.is-modern .gsbd-header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: var(--m-bg) !important;
}
body.is-modern .m-container { padding-inline: 20px; }
body.is-modern .m-hero__title { font-size: clamp(36px, 7.5vw, 64px); }
body.is-modern .m-hero__content {
grid-template-columns: 1fr;
gap: 28px;
padding-block: clamp(40px, 6vw, 72px);
}
body.is-modern .m-hero__sidekicker { justify-self: start; }
/* Twin sport columns stack */
body.is-modern .m-twin { grid-template-columns: 1fr; gap: 28px; }
/* Watch — Three ways: stack to 1 col on tablet portrait */
body.is-modern .m-watch__ways { grid-template-columns: 1fr; gap: 16px; }
/* Top sites: keep grid but tighter */
body.is-modern .gsbd-tops__row {
grid-template-columns: 56px minmax(120px, 1fr) auto auto !important;
gap: 14px !important;
}
body.is-modern .gsbd-tops__bonus { grid-column: 1 / -1; order: 5; }
}
/* ---- Phone (<= 720px) ---- */
@media (max-width: 720px) {
/* Header & wordmark */
body.is-modern .gsbd-header__inner { padding-block: 10px; gap: 12px; }
body.is-modern .gsbd-wordmark__inner { font-size: 20px; gap: 6px; }
body.is-modern .gsbd-wordmark__img { height: 34px; }
body.is-modern .gsbd-search-toggle { padding: 8px 12px !important; }
body.is-modern .gsbd-search-toggle span { display: none; }
/* Topbar: hide non-essentials, keep clock only */
body.is-modern .gsbd-topbar { font-size: 11px; }
body.is-modern .gsbd-topbar__inner { padding-block: 8px; gap: 10px; }
body.is-modern .gsbd-topbar__date { display: none; }
/* Container padding */
body.is-modern .m-container { padding-inline: 16px; }
/* Hero */
body.is-modern .m-hero__inner { min-height: 480px; }
body.is-modern .m-hero__content { padding-block: 40px 32px; gap: 20px; }
body.is-modern .m-hero__kicker { font-size: 11px; letter-spacing: .22em; margin-bottom: 18px; }
body.is-modern .m-hero__kicker::before { width: 22px; }
body.is-modern .m-hero__title { font-size: clamp(28px, 8.6vw, 40px); line-height: 1.06; }
body.is-modern .m-hero__dek { font-size: 15px; }
body.is-modern .m-hero__byline { font-size: 12px; flex-wrap: wrap; gap: 8px; }
body.is-modern .m-hero__cta { padding: 11px 18px; font-size: 13px; }
body.is-modern .m-hero__sidekicker { padding: 12px 16px; font-size: 11px; }
body.is-modern .m-hero__sidekicker em { font-size: 22px; }
body.is-modern .m-hero__rail { margin-top: -28px; padding-block: 0; }
body.is-modern .m-hcard { padding: 16px 18px; }
body.is-modern .m-hcard__title { font-size: 17px; }
/* Live panel marquee — looser swipe on touch */
body.is-modern .m-livepanel { padding: 22px 18px; }
body.is-modern .m-livepanel__title { font-size: 24px; }
body.is-modern .m-livepanel__more { font-size: 11px; }
body.is-modern .m-fcard { min-width: 264px; padding: 16px 18px; }
body.is-modern .m-fcard__crest { width: 38px; height: 38px; }
body.is-modern .m-fcard__code { font-size: 14px; }
body.is-modern .m-fcard__competition { max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Editorial mosaic */
body.is-modern .m-section-head__title { font-size: clamp(26px, 7vw, 36px); line-height: 1.06; }
body.is-modern .m-mlead__media { aspect-ratio: 16/10; min-height: 220px; }
body.is-modern .m-mlead__panel { padding: 22px 20px 26px; }
body.is-modern .m-mlead__title { font-size: 26px; }
body.is-modern .m-mlead__title::first-letter {
float: none;
font-size: 1.25em;
line-height: inherit;
margin-right: 0;
margin-top: 0;
letter-spacing: -0.02em;
}
body.is-modern .m-mlead__dek { font-size: 14px; }
body.is-modern .m-mlead__stamp em { font-size: 32px; }
body.is-modern .m-mlead__stamp small { font-size: 9px; }
body.is-modern .m-mcol__media { aspect-ratio: 16/10; }
body.is-modern .m-mcol__title { font-size: 18px; }
body.is-modern .m-mcol__dek { font-size: 13.5px; }
body.is-modern .m-mnote { padding: 22px 20px; }
body.is-modern .m-mnote__body { font-size: 15px; }
/* Twin spotlight images */
body.is-modern .m-twin__title { font-size: 22px; }
body.is-modern .m-twin__spotlight { aspect-ratio: 16/10; }
body.is-modern .m-twin__spotlight-title { font-size: 17px; }
body.is-modern .m-twin__list-thumb { width: 88px; height: 64px; }
body.is-modern .m-twin__list-title { font-size: 14.5px; }
/* Schedule */
body.is-modern .m-sched { padding: 22px 18px; border-radius: 18px; }
body.is-modern .m-sched__title { font-size: 24px; }
body.is-modern .m-sched__count { font-size: 11px; }
body.is-modern .m-sched__tabs { gap: 6px; padding-bottom: 10px; }
body.is-modern .m-sched__pill { padding: 8px 12px; min-width: 64px; }
body.is-modern .m-sched__pill em { font-size: 18px; }
body.is-modern .m-sched__pill-count { font-size: 9.5px; }
body.is-modern .m-sched__panel-head { padding: 14px 16px; }
body.is-modern .m-sched__row {
grid-template-columns: 64px 1fr auto !important;
grid-template-areas: "time teams cta" "venue venue venue" !important;
gap: 8px 12px !important;
padding: 12px 14px !important;
}
body.is-modern .m-sched__time { grid-area: time; font-size: 13px; }
body.is-modern .m-sched__teams { grid-area: teams; font-size: 13px; flex-wrap: wrap; }
body.is-modern .m-sched__type { display: none !important; }
body.is-modern .m-sched__venue { grid-area: venue; font-size: 11px; opacity: .7; }
body.is-modern .m-sched__cta { grid-area: cta; font-size: 11px; }
/* Watch — Three ways stays 1-col already from tablet rule */
body.is-modern .m-watch { padding: 28px 20px; border-radius: 18px; }
body.is-modern .m-watch__title { font-size: clamp(26px, 7vw, 36px); }
body.is-modern .m-watch__lead { font-size: 14.5px; }
body.is-modern .m-watch__eyebrow-row { flex-wrap: wrap; gap: 10px; }
body.is-modern .m-way { padding: 22px 20px 24px; }
body.is-modern .m-way__name { font-size: 22px; }
body.is-modern .m-watch__foot { flex-direction: column; align-items: stretch; gap: 14px; }
body.is-modern .m-watch__cta { width: 100%; justify-content: center; padding: 14px 22px; }
body.is-modern .m-watch__cta-secondary { text-align: center; }
body.is-modern .m-watch__foot-trust { text-align: center; }
/* Stars slider — single card with peek, scroll-snap for native swipe feel */
body.is-modern .m-stars-slider__viewport {
margin-inline: -16px;
padding-inline: 16px;
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
body.is-modern .m-stars-slider__track { gap: 12px !important; }
body.is-modern .m-stars-slider__slide {
width: calc(100% - 36px) !important;
max-width: 320px !important;
flex: 0 0 auto;
scroll-snap-align: start;
scroll-snap-stop: always;
}
body.is-modern .m-pcard {
width: 100% !important;
max-width: 100% !important;
}
body.is-modern .m-pcard__media {
aspect-ratio: 4/5;
max-height: 380px;
}
body.is-modern .m-pcard__name { font-size: 22px; }
body.is-modern .m-pcard__body { padding: 16px 18px 18px; }
body.is-modern .m-pcard__cta { font-size: 11px; letter-spacing: .14em; }
body.is-modern .m-stars-slider__nav {
gap: 12px;
margin-top: 18px;
flex-wrap: wrap;
justify-content: center;
}
body.is-modern .m-stars-slider__progress { flex: 1 1 100%; order: -1; height: 2px; }
body.is-modern .m-stars-slider__counter { font-size: 11px; letter-spacing: .14em; }
body.is-modern .m-stars-slider__btn { width: 44px; height: 44px; }
/* Leagues — 2 cols on phone */
body.is-modern .m-leagues { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
body.is-modern .m-lcard { padding: 18px 16px; }
body.is-modern .m-lcard__name { font-size: 14px; }
body.is-modern .m-lcard__meta { font-size: 11px; }
/* Finale — single column on small phones */
body.is-modern .m-finale { padding: 32px 22px; border-radius: 22px; }
body.is-modern .m-finale__title { font-size: clamp(28px, 8vw, 40px); }
body.is-modern .m-finale__lead { font-size: 14.5px; }
body.is-modern .m-finale__tiles { grid-template-columns: 1fr 1fr !important; gap: 10px; }
body.is-modern .m-fdest { padding: 18px 16px; }
body.is-modern .m-fdest__name { font-size: 16px; }
body.is-modern .m-fdest__desc { font-size: 12.5px; line-height: 1.4; }
/* Top sites — full vertical stack on phones */
body.is-modern .gsbd-tops { padding: 22px 16px !important; border-radius: 16px !important; }
body.is-modern .gsbd-tops__title { font-size: clamp(24px, 7vw, 34px) !important; }
body.is-modern .gsbd-tops__row {
grid-template-columns: 44px 1fr auto !important;
grid-template-areas:
"rank brand actions"
"rating rating actions"
"bonus bonus bonus" !important;
gap: 10px 12px !important;
padding: 14px 14px !important;
}
body.is-modern .gsbd-tops__rank { grid-area: rank; width: 38px !important; height: 38px !important; }
body.is-modern .gsbd-tops__brand { grid-area: brand; gap: 10px !important; }
body.is-modern .gsbd-tops__rating { grid-area: rating; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06); }
body.is-modern .gsbd-tops__bonus { grid-area: bonus; padding: 8px 12px; background: rgba(255,255,255,.04); border-radius: 8px; }
body.is-modern .gsbd-tops__bonus-text { font-size: 12px; }
body.is-modern .gsbd-tops__actions {
grid-area: actions; flex-direction: column; gap: 6px; align-items: stretch;
}
body.is-modern .gsbd-tops__review,
body.is-modern .gsbd-tops__visit { padding: 8px 14px !important; font-size: 11px !important; text-align: center; }
body.is-modern .gsbd-tops__row--featured .gsbd-tops__badge { font-size: 9px !important; padding: 4px 8px !important; }
/* Footer */
body.is-modern .gsbd-footer__top { padding: 36px 20px 28px; gap: 28px; }
body.is-modern .gsbd-footer__brand { max-width: 100%; }
body.is-modern .gsbd-footer__name { font-size: 22px !important; }
body.is-modern .gsbd-footer__cols {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px 16px !important;
}
body.is-modern .gsbd-footer__cols a { font-size: 14.5px !important; }
body.is-modern .gsbd-footer__bar-inner { flex-direction: column; gap: 6px; padding-block: 18px; text-align: center; }
body.is-modern .gsbd-footer__bar small { font-size: 10px !important; letter-spacing: .12em !important; }
/* ============================================================
Search panel — PREMIUM MOBILE
Reset editorial "type-on-a-line" desktop look and rebuild as a
luxe pill-input + red CTA button stacked vertically.
============================================================ */
body.is-modern .gsbd-search-panel {
padding-block: 22px 26px !important;
background:
radial-gradient(140% 120% at 50% -20%, rgba(230, 57, 70, .22) 0%, transparent 55%),
radial-gradient(120% 100% at 100% 100%, rgba(244, 180, 0, .09) 0%, transparent 60%),
linear-gradient(180deg, #131C2B 0%, #060F1C 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .06),
0 28px 60px -28px rgba(0, 0, 0, .8) !important;
}
body.is-modern .gsbd-search-panel::before {
height: 2px !important;
opacity: 1 !important;
background: linear-gradient(90deg,
transparent 0%,
var(--brand-red, #E63946) 30%,
var(--accent-gold, #F4B400) 70%,
transparent 100%) !important;
}
body.is-modern .gsbd-search-panel__inner { padding-inline: 4px; }
/* Eyebrow row — refined */
body.is-modern .gsbd-search-panel__head { margin-bottom: 18px !important; }
body.is-modern .gsbd-search-panel__eyebrow {
font-size: .64rem !important;
letter-spacing: .3em !important;
color: #FFFFFF !important;
}
body.is-modern .gsbd-search-panel__eyebrow::before {
width: 22px !important; height: 2px !important;
background: linear-gradient(90deg, var(--brand-red, #E63946), var(--accent-gold, #F4B400)) !important;
border-radius: 2px !important;
}
body.is-modern .gsbd-search-panel__close {
width: 38px !important; height: 38px !important;
border: 1px solid rgba(255, 255, 255, .14) !important;
background: rgba(255, 255, 255, .04) !important;
color: rgba(255, 255, 255, .85) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body.is-modern .gsbd-search-panel__close:hover,
body.is-modern .gsbd-search-panel__close:focus-visible {
background: var(--brand-red, #E63946) !important;
border-color: var(--brand-red, #E63946) !important;
color: #FFFFFF !important;
}
/* Form: stack input above CTA, both full width */
body.is-modern .gsbd-search-panel .gsbd-search {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Search INPUT — premium pill with subtle gradient ring */
body.is-modern .gsbd-search-panel .gsbd-search__input,
body.is-modern .gsbd-search-panel input[type="search"],
body.is-modern .gsbd-search-panel .search-field {
font-family: var(--m-font-sans) !important;
font-size: 16px !important;
font-weight: 500 !important;
font-style: normal !important;
letter-spacing: 0 !important;
color: #FFFFFF !important;
background-color: rgba(255, 255, 255, .04) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 16px center !important;
background-size: 18px 18px !important;
border: 1px solid rgba(255, 255, 255, .14) !important;
border-radius: 999px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
outline: none !important;
padding: 14px 18px 14px 46px !important;
width: 100% !important;
}
body.is-modern .gsbd-search-panel .gsbd-search__input::placeholder,
body.is-modern .gsbd-search-panel input[type="search"]::placeholder {
color: rgba(255, 255, 255, .5) !important;
font-style: normal !important;
font-family: var(--m-font-sans) !important;
font-size: 15px !important;
font-weight: 400 !important;
letter-spacing: .01em !important;
opacity: 1;
}
body.is-modern .gsbd-search-panel .gsbd-search__input:focus,
body.is-modern .gsbd-search-panel input[type="search"]:focus {
background-color: rgba(255, 255, 255, .08) !important;
border-color: var(--brand-red, #E63946) !important;
box-shadow:
0 0 0 4px rgba(230, 57, 70, .18),
inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
/* Submit BUTTON — premium red CTA */
body.is-modern .gsbd-search-panel .gsbd-search__submit,
body.is-modern .gsbd-search-panel button[type="submit"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
font-family: var(--m-font-sans) !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
color: #FFFFFF !important;
background: linear-gradient(135deg, #E63946 0%, #B82532 100%) !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
border-radius: 999px !important;
box-shadow:
0 8px 24px -10px rgba(230, 57, 70, .65),
inset 0 1px 0 rgba(255, 255, 255, .15) !important;
padding: 14px 18px !important;
margin: 0 !important;
cursor: pointer;
transition: transform 200ms, box-shadow 200ms, filter 200ms !important;
}
body.is-modern .gsbd-search-panel .gsbd-search__submit:hover,
body.is-modern .gsbd-search-panel button[type="submit"]:hover {
color: #FFFFFF !important;
filter: brightness(1.08);
box-shadow:
0 12px 28px -8px rgba(230, 57, 70, .75),
inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
body.is-modern .gsbd-search-panel .gsbd-search__submit:active,
body.is-modern .gsbd-search-panel button[type="submit"]:active {
transform: translateY(1px);
}
/* Suggest row: label above scrollable chips */
body.is-modern .gsbd-search-panel__suggest {
margin-top: 22px !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
body.is-modern .gsbd-search-panel__suggest-label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-size: .58rem !important;
letter-spacing: .26em !important;
color: rgba(255, 255, 255, .55) !important;
}
body.is-modern .gsbd-search-panel__suggest-label::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-gold, #F4B400);
box-shadow: 0 0 10px rgba(244, 180, 0, .6);
}
body.is-modern .gsbd-search-panel__chips {
flex-wrap: nowrap !important;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
margin-inline: -4px;
padding: 2px 4px 4px;
scroll-snap-type: x proximity;
gap: 8px !important;
}
body.is-modern .gsbd-search-panel__chips::-webkit-scrollbar { display: none; }
body.is-modern .gsbd-search-panel__chips li { flex-shrink: 0; scroll-snap-align: start; }
body.is-modern .gsbd-search-chip {
padding: 9px 16px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
text-transform: none !important;
color: rgba(255, 255, 255, .82) !important;
background: rgba(255, 255, 255, .05) !important;
border: 1px solid rgba(255, 255, 255, .1) !important;
border-radius: 999px !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
body.is-modern .gsbd-search-chip:hover,
body.is-modern .gsbd-search-chip:focus-visible {
color: #FFFFFF !important;
background: linear-gradient(135deg, var(--brand-red, #E63946) 0%, #B82532 100%) !important;
border-color: var(--brand-red, #E63946) !important;
box-shadow: 0 8px 20px -10px rgba(230, 57, 70, .65) !important;
}
/* Hide the desktop "Press Esc to close" hint — irrelevant on touch devices */
body.is-modern .gsbd-search-panel__hint { display: none !important; }
/* Section vertical rhythm — already tightened, keep snug here */
body.is-modern .m-section { padding-block: 22px; }
}
/* ============================================================
17. BETTING SITES ARCHIVE — editorial reskin
Re-skins the legacy .gsbd-bet-* classes to match the homepage system.
============================================================ */
body.is-modern .gsbd-bet-mega-hero {
position: relative;
background: var(--m-surface) !important;
border-bottom: 1px solid var(--m-line);
padding-block: clamp(36px, 5vw, 72px) clamp(24px, 3vw, 40px) !important;
overflow: hidden;
isolation: isolate;
color: var(--m-text);
}
body.is-modern .gsbd-bet-mega-hero__bg {
display: none !important;
}
body.is-modern .gsbd-bet-mega-hero::before {
content: "";
position: absolute;
inset: -40% 50% auto -10%;
height: 200%;
background: radial-gradient(60% 40% at 30% 30%, rgba(184,132,44,.10) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
body.is-modern .gsbd-bet-mega-hero__inner { position: relative; z-index: 1; }
body.is-modern .gsbd-bet-mega-hero__crumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 20px !important;
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-3) !important;
}
body.is-modern .gsbd-bet-mega-hero__crumb a {
color: var(--m-text-3) !important;
transition: color var(--m-transition);
}
body.is-modern .gsbd-bet-mega-hero__crumb a:hover { color: var(--m-red) !important; }
body.is-modern .gsbd-bet-mega-hero__crumb > span { color: var(--m-line-2) !important; }
body.is-modern .gsbd-bet-mega-hero__crumb > span:last-child { color: var(--m-text) !important; }
body.is-modern .gsbd-bet-mega-hero__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(36px, 5.6vw, 72px) !important;
line-height: 1.04 !important;
letter-spacing: -0.026em !important;
color: var(--m-text) !important;
text-transform: none !important;
margin: 0 0 18px !important;
font-variation-settings: "opsz" 144;
max-width: 22ch;
}
body.is-modern .gsbd-bet-mega-hero__lead {
max-width: 56ch !important;
font-family: var(--m-font-sans) !important;
font-size: clamp(15px, 1.2vw, 17px) !important;
line-height: 1.55 !important;
color: var(--m-text-2) !important;
margin: 0 0 28px !important;
text-transform: none !important;
}
body.is-modern .gsbd-bet-mega-hero__stats {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
gap: 0 !important;
margin: 0 !important;
padding: 24px 0 0 !important;
list-style: none !important;
border-top: 1px solid var(--m-line);
}
body.is-modern .gsbd-bet-mega-hero__stats li {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 18px 0 0 !important;
background: none !important;
border: 0 !important;
}
body.is-modern .gsbd-bet-mega-hero__stats li::before,
body.is-modern .gsbd-bet-mega-hero__stats li::marker { content: none !important; display: none !important; }
body.is-modern .gsbd-bet-mega-hero__stats strong {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(24px, 2.2vw, 30px) !important;
letter-spacing: -0.02em !important;
color: var(--m-text) !important;
line-height: 1.1 !important;
}
body.is-modern .gsbd-bet-mega-hero__stats span {
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-3) !important;
}
/* Jump-nav anchor strip */
body.is-modern .gsbd-bet-jumpnav {
background: var(--m-bg) !important;
border-bottom: 1px solid var(--m-line);
padding-block: 0 !important;
}
body.is-modern .gsbd-bet-jumpnav__inner {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 0;
padding: 0 !important;
}
body.is-modern .gsbd-bet-jumpnav__inner a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 18px 24px !important;
font-family: var(--m-font-sans) !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-2) !important;
border-right: 1px solid var(--m-line);
transition: color 220ms ease, background 220ms ease;
background: none !important;
}
body.is-modern .gsbd-bet-jumpnav__inner a:last-child { border-right: 0; }
body.is-modern .gsbd-bet-jumpnav__inner a span {
font-family: var(--m-font-mono) !important;
color: var(--m-gold) !important;
font-size: 11px;
letter-spacing: 0;
}
body.is-modern .gsbd-bet-jumpnav__inner a:hover {
color: var(--m-text) !important;
background: var(--m-surface) !important;
}
/* Page wrap */
body.is-modern .gsbd-bet-archive { padding-block: clamp(40px, 5vw, 72px); }
body.is-modern .gsbd-bet-archive > section + section { margin-top: clamp(40px, 5vw, 80px); }
/* Section heads (Top Ranked, etc.) */
body.is-modern .gsbd-section__head {
display: flex;
align-items: flex-end;
gap: 20px;
border-bottom: 1px solid var(--m-line);
padding-bottom: clamp(20px, 2.4vw, 28px);
margin-bottom: clamp(24px, 3vw, 40px);
}
body.is-modern .gsbd-section__num-box {
--nb-red: #E63946;
--nb-red-deep: #B82532;
--nb-gold: #F4B400;
position: relative;
display: inline-grid;
place-items: center;
width: 56px; height: 56px;
background:
radial-gradient(140% 140% at 0% 0%, rgba(255,255,255,.18) 0%, transparent 55%),
linear-gradient(135deg, var(--nb-red) 0%, var(--nb-red-deep) 100%) !important;
color: #FFFFFF !important;
border-radius: 14px !important;
font-size: 18px !important;
font-family: var(--m-font-display, var(--m-font-sans)) !important;
font-weight: 800 !important;
letter-spacing: .02em !important;
line-height: 1 !important;
flex-shrink: 0;
isolation: isolate;
overflow: visible;
box-shadow:
0 10px 24px -10px rgba(230, 57, 70, .65),
0 1px 0 rgba(255, 255, 255, .15) inset,
0 -2px 0 rgba(0, 0, 0, .18) inset;
transform: rotate(-3deg);
transition:
transform 420ms cubic-bezier(.2,.8,.2,1),
box-shadow 420ms cubic-bezier(.2,.8,.2,1);
animation: gsbd-nb-float 4.5s ease-in-out infinite;
will-change: transform;
}
/* Gold ring border accent */
body.is-modern .gsbd-section__num-box::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 17px;
padding: 2px;
background: linear-gradient(135deg, var(--nb-gold) 0%, transparent 40%, transparent 60%, var(--nb-red) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .85;
pointer-events: none;
z-index: -1;
animation: gsbd-nb-spin 9s linear infinite;
}
/* Pulsing gold corner dot */
body.is-modern .gsbd-section__num-box::after {
content: '';
position: absolute;
top: -4px; right: -4px;
width: 10px; height: 10px;
background: var(--nb-gold);
border-radius: 50%;
box-shadow:
0 0 0 2px rgba(11, 19, 32, .9),
0 0 16px rgba(244, 180, 0, .9);
animation: gsbd-nb-pulse 2.4s ease-in-out infinite;
}
/* Hover: lift + straighten + intensify shadow */
body.is-modern .gsbd-section:hover .gsbd-section__num-box,
body.is-modern .gsbd-section__head:hover .gsbd-section__num-box {
transform: rotate(0deg) scale(1.06) translateY(-2px);
box-shadow:
0 18px 38px -10px rgba(230, 57, 70, .75),
0 1px 0 rgba(255, 255, 255, .22) inset,
0 -2px 0 rgba(0, 0, 0, .22) inset;
animation-play-state: paused;
}
/* Idle float */
@keyframes gsbd-nb-float {
0%, 100% { transform: rotate(-3deg) translateY(0); }
50% { transform: rotate(-3deg) translateY(-3px); }
}
/* Gold ring slow rotation */
@keyframes gsbd-nb-spin {
to { transform: rotate(360deg); }
}
/* Corner dot pulse */
@keyframes gsbd-nb-pulse {
0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 2px rgba(11, 19, 32, .9), 0 0 16px rgba(244, 180, 0, .9); }
50% { transform: scale(1.25); opacity: .85; box-shadow: 0 0 0 2px rgba(11, 19, 32, .9), 0 0 22px rgba(244, 180, 0, 1); }
}
@media (prefers-reduced-motion: reduce) {
body.is-modern .gsbd-section__num-box,
body.is-modern .gsbd-section__num-box::before,
body.is-modern .gsbd-section__num-box::after { animation: none !important; }
}
body.is-modern .gsbd-section__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(28px, 3.6vw, 48px) !important;
line-height: 1.04 !important;
letter-spacing: -0.024em !important;
color: var(--m-text) !important;
margin: 0 0 6px !important;
text-transform: none !important;
font-variation-settings: "opsz" 144;
}
body.is-modern .gsbd-section__title em {
font-style: italic;
font-weight: 400;
color: var(--m-gold);
}
body.is-modern .gsbd-section__lead {
font-family: var(--m-font-sans) !important;
font-size: 14.5px !important;
color: var(--m-text-2) !important;
margin: 0 !important;
line-height: 1.5 !important;
}
/* Spotlight — operator #1 */
body.is-modern .gsbd-bet-spotlight {
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-xl) !important;
color: var(--m-text) !important;
box-shadow: var(--m-shadow-2);
overflow: hidden;
margin-bottom: clamp(24px, 3vw, 40px);
}
body.is-modern .gsbd-bet-spotlight * { color: inherit; }
body.is-modern .gsbd-bet-spotlight__crown {
background: linear-gradient(90deg, var(--m-gold), #e7b766) !important;
color: #0a0a0c !important;
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
padding: 8px 20px !important;
}
body.is-modern .gsbd-bet-spotlight__inner {
padding: clamp(22px, 3vw, 36px) !important;
padding-bottom: 0 !important; /* features sits flush below as a sibling */
}
body.is-modern .gsbd-bet-spotlight__features {
list-style: none !important;
display: flex !important;
flex-wrap: wrap;
gap: 8px clamp(20px, 2.5vw, 36px) !important;
margin: 0 clamp(22px, 3vw, 36px) !important;
padding: clamp(16px, 1.8vw, 22px) 0 clamp(18px, 2vw, 24px) !important;
border-top: 1px solid var(--m-line) !important;
}
body.is-modern .gsbd-bet-spotlight__features li {
display: inline-flex !important;
align-items: center;
gap: 8px !important;
color: var(--m-text-2) !important;
font-family: var(--m-font-sans) !important;
font-size: 13.5px !important;
line-height: 1.35 !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.is-modern .gsbd-bet-spotlight__features li::before,
body.is-modern .gsbd-bet-spotlight__features li::marker {
content: none !important;
display: none !important;
}
body.is-modern .gsbd-bet-spotlight__features li svg {
color: #16a34a !important;
flex-shrink: 0;
width: 14px !important;
height: 14px !important;
background: rgba(22,163,74,.10);
border-radius: 50%;
padding: 3px;
box-sizing: content-box;
}
body.is-modern .gsbd-bet-spotlight__logo {
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-md) !important;
padding: 10px !important;
}
body.is-modern .gsbd-bet-spotlight__kicker {
font-family: var(--m-font-sans) !important;
color: var(--m-gold) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
}
body.is-modern .gsbd-bet-spotlight__name {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(26px, 2.6vw, 36px) !important;
letter-spacing: -0.02em !important;
line-height: 1.05 !important;
color: var(--m-text) !important;
}
body.is-modern .gsbd-bet-spotlight__summary {
font-family: var(--m-font-sans) !important;
color: var(--m-text-2) !important;
font-size: 14.5px !important;
line-height: 1.55 !important;
}
/* Bonus block — premium editorial card */
body.is-modern .gsbd-bet-spotlight__cta-wrap {
display: flex !important;
flex-direction: column;
gap: 12px !important;
align-items: stretch !important;
}
body.is-modern .gsbd-bet-spotlight__bonus {
position: relative;
display: flex !important;
flex-direction: column;
align-items: center !important;
text-align: center !important;
gap: 6px !important;
background: linear-gradient(180deg, var(--m-surface) 0%, var(--m-bg) 100%) !important;
border: 1px solid var(--m-line-2) !important;
border-radius: var(--m-radius-lg) !important;
padding: 22px 24px 24px !important;
overflow: hidden;
isolation: isolate;
box-shadow: var(--m-shadow-1);
}
body.is-modern .gsbd-bet-spotlight__bonus::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--m-gold) 50%, transparent 100%);
}
body.is-modern .gsbd-bet-spotlight__bonus::after {
content: "";
position: absolute;
inset: -50% 30% auto auto;
width: 200%;
height: 200%;
background: radial-gradient(40% 30% at 80% 30%, rgba(184,132,44,.10) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
body.is-modern .gsbd-bet-spotlight__bonus-label {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--m-gold) !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
margin-bottom: 2px !important;
}
body.is-modern .gsbd-bet-spotlight__bonus-label::before,
body.is-modern .gsbd-bet-spotlight__bonus-label::after {
content: "";
width: 16px;
height: 1px;
background: var(--m-gold);
opacity: .55;
}
body.is-modern .gsbd-bet-spotlight__bonus-amt {
font-family: var(--m-font-serif) !important;
color: var(--m-text) !important;
font-weight: 500 !important;
font-size: clamp(34px, 3.6vw, 48px) !important;
letter-spacing: -0.028em !important;
line-height: 1.0 !important;
font-variation-settings: "opsz" 144;
margin: 4px 0 6px !important;
text-transform: none !important;
}
body.is-modern .gsbd-bet-spotlight__bonus-terms {
display: inline-block;
font-family: var(--m-font-sans) !important;
color: var(--m-text-3) !important;
font-size: 10.5px !important;
font-weight: 600 !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
padding: 5px 12px;
background: var(--m-bg);
border: 1px solid var(--m-line);
border-radius: 999px;
}
/* Spotlight bottom strip — cells with proper rhythm */
body.is-modern .gsbd-bet-spotlight__strip {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
background: var(--m-surface) !important;
border-top: 1px solid var(--m-line);
margin: 0 !important;
padding: 0 !important;
}
body.is-modern .gsbd-bet-spotlight__strip-cell {
position: relative;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
padding: 20px 22px !important;
border-right: 1px solid var(--m-line) !important;
background: none !important;
transition: background 220ms ease;
}
body.is-modern .gsbd-bet-spotlight__strip-cell:last-child { border-right: 0 !important; }
body.is-modern .gsbd-bet-spotlight__strip-cell:hover {
background: var(--m-bg) !important;
}
body.is-modern .gsbd-bet-spotlight__strip-cell--wide {
grid-column: span 2;
min-width: 0;
}
body.is-modern .gsbd-bet-spotlight__strip-label {
color: var(--m-gold) !important;
font-family: var(--m-font-sans) !important;
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
line-height: 1 !important;
}
body.is-modern .gsbd-bet-spotlight__strip-cell strong {
font-family: var(--m-font-serif) !important;
color: var(--m-text) !important;
font-weight: 500 !important;
font-size: clamp(20px, 1.8vw, 24px) !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
margin-top: 2px;
font-variation-settings: "opsz" 144;
}
body.is-modern .gsbd-bet-spotlight__strip-cell--wide .gsbd-bet-spotlight__payments {
margin-top: 4px !important;
}
body.is-modern .gsbd-bet-spotlight__strip-cell--wide .gsbd-bet-spotlight__payments::before {
display: none !important; /* "Pays via" label redundant — strip already has its own label */
}
@media (max-width: 720px) {
body.is-modern .gsbd-bet-spotlight__strip { grid-template-columns: 1fr 1fr !important; }
body.is-modern .gsbd-bet-spotlight__strip-cell { padding: 16px 18px !important; }
body.is-modern .gsbd-bet-spotlight__strip-cell--wide { grid-column: 1 / -1; border-right: 0 !important; border-top: 1px solid var(--m-line) !important; }
}
body.is-modern .gsbd-bet-spotlight__cta {
font-family: var(--m-font-sans) !important;
font-weight: 700 !important;
font-size: 12.5px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
background: var(--m-text) !important;
color: var(--m-bg) !important;
border: 0 !important;
border-radius: 999px !important;
padding: 14px 28px !important;
transition: background 220ms ease, transform 220ms ease;
}
body.is-modern .gsbd-bet-spotlight__cta:hover {
background: var(--m-gold) !important;
color: var(--m-deep) !important;
transform: translateY(-1px);
}
body.is-modern .gsbd-bet-spotlight__review {
color: var(--m-text-3) !important;
font-family: var(--m-font-sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
body.is-modern .gsbd-bet-spotlight__review:hover { color: var(--m-text) !important; }
body.is-modern .gsbd-bet-spotlight__strip {
background: var(--m-surface) !important;
border-top: 1px solid var(--m-line);
}
body.is-modern .gsbd-bet-spotlight__strip-label {
color: var(--m-text-3) !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
}
/* Operator ranking cards */
body.is-modern .gsbd-bet-card {
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-lg) !important;
color: var(--m-text) !important;
transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
margin-bottom: 12px;
}
body.is-modern .gsbd-bet-card:hover {
border-color: var(--m-line-2) !important;
box-shadow: var(--m-shadow-2);
transform: translateY(-1px);
}
body.is-modern .gsbd-bet-card * { color: inherit; }
body.is-modern .gsbd-bet-card__rank {
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
color: var(--m-text-2) !important;
font-family: var(--m-font-mono) !important;
font-weight: 700 !important;
border-radius: var(--m-radius-sm) !important;
}
body.is-modern .gsbd-bet-card__logo {
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-sm) !important;
}
body.is-modern .gsbd-bet-card__name {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: 18px !important;
letter-spacing: -0.012em !important;
color: var(--m-text) !important;
}
body.is-modern .gsbd-bet-card__summary {
color: var(--m-text-2) !important;
font-family: var(--m-font-sans) !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
}
body.is-modern .gsbd-bet-card__bonus {
position: relative;
display: flex !important;
flex-direction: column;
align-items: center !important;
text-align: center !important;
gap: 4px !important;
background: linear-gradient(180deg, var(--m-surface) 0%, var(--m-bg) 100%) !important;
border: 1px solid var(--m-line-2) !important;
border-radius: var(--m-radius-md) !important;
padding: 14px 18px 16px !important;
overflow: hidden;
isolation: isolate;
transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
body.is-modern .gsbd-bet-card__bonus::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 72%;
height: 1.5px;
background: linear-gradient(90deg, transparent 0%, var(--m-gold) 50%, transparent 100%);
}
body.is-modern .gsbd-bet-card__bonus::after {
content: "";
position: absolute;
inset: -50% 30% auto auto;
width: 200%;
height: 200%;
background: radial-gradient(40% 30% at 80% 30%, rgba(184,132,44,.08) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
body.is-modern .gsbd-bet-card:hover .gsbd-bet-card__bonus {
border-color: var(--m-gold) !important;
box-shadow: 0 4px 14px -8px rgba(184,132,44,.35);
}
body.is-modern .gsbd-bet-card__bonus-label {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--m-gold) !important;
font-family: var(--m-font-sans) !important;
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
line-height: 1 !important;
}
body.is-modern .gsbd-bet-card__bonus-label::before,
body.is-modern .gsbd-bet-card__bonus-label::after {
content: "";
width: 12px;
height: 1px;
background: var(--m-gold);
opacity: .5;
}
body.is-modern .gsbd-bet-card__bonus-amount,
body.is-modern .gsbd-bet-card__bonus strong {
font-family: var(--m-font-serif) !important;
color: var(--m-text) !important;
font-weight: 500 !important;
font-size: clamp(18px, 1.6vw, 22px) !important;
letter-spacing: -0.018em !important;
line-height: 1.05 !important;
font-variation-settings: "opsz" 144;
margin: 2px 0 !important;
text-transform: none !important;
}
body.is-modern .gsbd-bet-card__bonus-terms {
display: inline-block;
font-family: var(--m-font-sans) !important;
color: var(--m-text-3) !important;
font-size: 9.5px !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
margin-top: 4px;
}
/* ---- Payment method chips ---- */
body.is-modern .gsbd-bet-card__payments,
body.is-modern .gsbd-bet-spotlight__payments {
list-style: none !important;
margin: 8px 0 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap;
gap: 6px !important;
align-items: center;
}
body.is-modern .gsbd-bet-card__payments::before,
body.is-modern .gsbd-bet-spotlight__payments::before {
content: "Pays via";
font-family: var(--m-font-sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--m-text-3);
margin-right: 4px;
flex-shrink: 0;
}
body.is-modern .gsbd-bet-card__payments li,
body.is-modern .gsbd-bet-spotlight__payments li {
display: inline-flex !important;
align-items: center;
gap: 5px;
padding: 5px 10px !important;
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: 999px !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
color: var(--m-text-2) !important;
line-height: 1.2 !important;
transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease;
white-space: nowrap;
}
body.is-modern .gsbd-bet-card__payments li::before,
body.is-modern .gsbd-bet-card__payments li::marker,
body.is-modern .gsbd-bet-spotlight__payments li::before,
body.is-modern .gsbd-bet-spotlight__payments li::marker {
content: none !important;
display: none !important;
}
body.is-modern .gsbd-bet-card__payments li::after,
body.is-modern .gsbd-bet-spotlight__payments li::after {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--m-text-3);
order: -1;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(0,0,0,.04) inset;
}
body.is-modern .gsbd-bet-card__payments li:hover,
body.is-modern .gsbd-bet-spotlight__payments li:hover {
color: var(--m-text) !important;
border-color: var(--m-text) !important;
transform: translateY(-1px);
}
/* Brand-color dots for known payment methods.
We can't add classes to the legacy markup, so we match by attribute-free
text using :has() for modern browsers — falls back gracefully on older ones. */
body.is-modern .gsbd-bet-card__payments li:nth-child(1)::after { background: #e2136e; } /* bKash pink */
body.is-modern .gsbd-bet-card__payments li:nth-child(2)::after { background: #f6841f; } /* Nagad orange */
body.is-modern .gsbd-bet-card__payments li:nth-child(3)::after { background: #8b3aa8; } /* Rocket purple */
body.is-modern .gsbd-bet-card__payments li:nth-child(4)::after { background: #26a17b; } /* USDT teal */
body.is-modern .gsbd-bet-card__payments li:nth-child(5)::after { background: #f7931a; } /* BTC orange */
body.is-modern .gsbd-bet-card__payments li:nth-child(n+6)::after { background: var(--m-gold); }
body.is-modern .gsbd-bet-spotlight__payments li:nth-child(1)::after { background: #e2136e; }
body.is-modern .gsbd-bet-spotlight__payments li:nth-child(2)::after { background: #f6841f; }
body.is-modern .gsbd-bet-spotlight__payments li:nth-child(3)::after { background: #8b3aa8; }
body.is-modern .gsbd-bet-spotlight__payments li:nth-child(4)::after { background: #26a17b; }
body.is-modern .gsbd-bet-spotlight__payments li:nth-child(5)::after { background: #f7931a; }
body.is-modern .gsbd-bet-spotlight__payments li:nth-child(n+6)::after { background: var(--m-gold); }
/* Trust badges section */
body.is-modern .gsbd-bet-trust {
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-xl) !important;
color: var(--m-text) !important;
padding: clamp(24px, 3vw, 40px) !important;
}
body.is-modern .gsbd-bet-trust * { color: inherit; }
body.is-modern .gsbd-bet-trust__kicker {
color: var(--m-gold) !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
}
body.is-modern .gsbd-bet-trust__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(22px, 2.4vw, 30px) !important;
letter-spacing: -0.02em !important;
color: var(--m-text) !important;
margin-top: 6px !important;
}
body.is-modern .gsbd-bet-trust__grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 14px !important;
margin-top: clamp(20px, 2.4vw, 28px);
}
body.is-modern .gsbd-bet-trust__item {
position: relative;
display: flex !important;
flex-direction: column;
gap: 10px;
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-lg) !important;
padding: 22px 22px 20px !important;
color: var(--m-text) !important;
overflow: hidden;
isolation: isolate;
transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease, border-color 240ms ease;
}
body.is-modern .gsbd-bet-trust__item::before {
/* Gold rule above each card */
content: "";
position: absolute;
top: 0; left: 0;
width: 36px; height: 2px;
background: var(--m-gold);
transition: width 320ms cubic-bezier(.2,.8,.2,1);
}
body.is-modern .gsbd-bet-trust__item:hover {
transform: translateY(-3px);
box-shadow: var(--m-shadow-2);
border-color: var(--m-line-2) !important;
}
body.is-modern .gsbd-bet-trust__item:hover::before { width: 100%; opacity: .7; }
body.is-modern .gsbd-bet-trust__icon {
display: inline-grid !important;
place-items: center;
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(184,132,44,.16) 0%, rgba(184,132,44,.04) 100%) !important;
border: 1px solid rgba(184,132,44,.22);
color: var(--m-gold) !important;
margin-bottom: 4px;
flex-shrink: 0;
transition: transform 280ms cubic-bezier(.2,.8,.2,1), background 280ms ease;
}
body.is-modern .gsbd-bet-trust__item:hover .gsbd-bet-trust__icon {
transform: rotate(-6deg) scale(1.05);
background: linear-gradient(135deg, rgba(184,132,44,.28) 0%, rgba(184,132,44,.08) 100%) !important;
}
body.is-modern .gsbd-bet-trust__icon svg {
width: 18px; height: 18px;
stroke-width: 2;
}
body.is-modern .gsbd-bet-trust__value {
display: block;
font-family: var(--m-font-serif) !important;
color: var(--m-text) !important;
font-weight: 500 !important;
font-size: clamp(26px, 2.2vw, 32px) !important;
letter-spacing: -0.022em !important;
line-height: 1.05 !important;
font-variation-settings: "opsz" 144;
margin: 2px 0 0 !important;
}
body.is-modern .gsbd-bet-trust__label {
color: var(--m-text-3) !important;
font-family: var(--m-font-sans) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
margin-top: -2px !important;
}
body.is-modern .gsbd-bet-trust__desc {
color: var(--m-text-2) !important;
font-family: var(--m-font-sans) !important;
font-size: 13px !important;
line-height: 1.5 !important;
margin: 6px 0 0 !important;
padding-top: 12px !important;
border-top: 1px solid var(--m-line);
}
/* Comparison table */
body.is-modern .gsbd-bet-compare {
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-xl) !important;
color: var(--m-text) !important;
padding: clamp(24px, 3vw, 36px) !important;
overflow: hidden;
}
body.is-modern .gsbd-bet-compare * { color: inherit; }
body.is-modern .gsbd-bet-compare__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(22px, 2.4vw, 30px) !important;
letter-spacing: -0.02em !important;
color: var(--m-text) !important;
text-transform: none !important;
margin-bottom: clamp(16px, 2vw, 24px) !important;
}
body.is-modern .gsbd-bet-compare__wrap {
overflow-x: auto;
border-radius: var(--m-radius-md);
border: 1px solid var(--m-line);
background: var(--m-bg);
-webkit-overflow-scrolling: touch;
scrollbar-color: var(--m-line-2) transparent;
}
body.is-modern .gsbd-bet-compare__wrap::-webkit-scrollbar { height: 8px; }
body.is-modern .gsbd-bet-compare__wrap::-webkit-scrollbar-thumb { background: var(--m-line-2); border-radius: 999px; }
body.is-modern .gsbd-bet-compare__table {
border-collapse: separate !important;
border-spacing: 0 !important;
width: 100%;
min-width: 720px;
font-family: var(--m-font-sans);
}
body.is-modern .gsbd-bet-compare__table thead {
background: linear-gradient(180deg, var(--m-surface) 0%, rgba(243, 240, 232, .6) 100%) !important;
}
body.is-modern .gsbd-bet-compare__table thead th {
background: transparent !important;
color: var(--m-text-3) !important;
font-family: var(--m-font-sans) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
border: 0 !important;
border-bottom: 1px solid var(--m-line) !important;
padding: 18px 18px !important;
text-align: left !important;
white-space: nowrap;
position: sticky;
top: 0;
z-index: 2;
}
body.is-modern .gsbd-bet-compare__table thead th.num,
body.is-modern .gsbd-bet-compare__table thead th:nth-child(3),
body.is-modern .gsbd-bet-compare__table thead th:nth-child(4),
body.is-modern .gsbd-bet-compare__table thead th:nth-child(5),
body.is-modern .gsbd-bet-compare__table thead th:nth-child(6) {
text-align: right !important;
}
body.is-modern .gsbd-bet-compare__table thead th:last-child {
text-align: right !important;
padding-right: 22px !important;
}
body.is-modern .gsbd-bet-compare__table thead th:first-child {
padding-left: 22px !important;
border-radius: 0;
}
body.is-modern .gsbd-bet-compare__table tbody tr {
transition: background 220ms ease;
}
body.is-modern .gsbd-bet-compare__table tbody tr:nth-child(even) {
background: rgba(243, 240, 232, .35);
}
body.is-modern .gsbd-bet-compare__table tbody tr:hover {
background: rgba(184, 132, 44, .06) !important;
}
body.is-modern .gsbd-bet-compare__table tbody td {
border: 0 !important;
border-bottom: 1px solid var(--m-line) !important;
padding: 16px 18px !important;
font-family: var(--m-font-sans) !important;
color: var(--m-text-2) !important;
font-size: 14px !important;
vertical-align: middle !important;
text-align: left !important;
line-height: 1.4;
}
body.is-modern .gsbd-bet-compare__table tbody td:first-child { padding-left: 22px !important; }
body.is-modern .gsbd-bet-compare__table tbody td:last-child {
padding-right: 22px !important;
text-align: right !important;
}
body.is-modern .gsbd-bet-compare__table tbody tr:last-child td { border-bottom: 0 !important; }
/* Rank chip */
body.is-modern .gsbd-bet-compare__table .num {
font-family: var(--m-font-mono) !important;
color: var(--m-text-3) !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: .04em;
text-align: right !important;
width: 56px;
white-space: nowrap;
}
body.is-modern .gsbd-bet-compare__table tbody td.num {
color: var(--m-text-3) !important;
font-size: 13px !important;
}
body.is-modern .gsbd-bet-compare__table tbody tr:first-child td.num {
color: var(--m-gold) !important;
}
/* Operator name cell — bold serif, link styling */
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(2) strong {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: 16px !important;
letter-spacing: -0.012em !important;
color: var(--m-text) !important;
line-height: 1.2;
}
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(2) a {
color: var(--m-text) !important;
text-decoration: none !important;
transition: color 220ms ease;
border-bottom: 1px solid transparent;
}
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(2) a:hover {
color: var(--m-red) !important;
border-bottom-color: var(--m-red);
}
/* Rating cell — gold star + mono number, right-aligned */
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(3) {
text-align: right !important;
font-family: var(--m-font-mono) !important;
font-weight: 700 !important;
color: var(--m-text) !important;
font-size: 14px !important;
letter-spacing: 0;
}
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(3)::first-letter {
color: var(--m-gold);
}
/* Bonus / min deposit / withdrawal — right-aligned mono for numerics */
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(4),
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(5),
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(6) {
text-align: right !important;
font-family: var(--m-font-mono) !important;
color: var(--m-text-2) !important;
font-feature-settings: "tnum" 1;
font-size: 13px !important;
letter-spacing: -0.005em;
white-space: nowrap;
}
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(4) {
color: var(--m-text) !important;
font-weight: 600 !important;
}
/* CTA button */
body.is-modern .gsbd-bet-compare__cta {
display: inline-flex !important;
align-items: center;
gap: 6px;
background: var(--m-text) !important;
color: var(--m-bg) !important;
font-family: var(--m-font-sans) !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
padding: 9px 18px !important;
transition: background 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
border: 0 !important;
text-decoration: none !important;
box-shadow: 0 4px 10px -6px rgba(0,0,0,.25);
}
body.is-modern .gsbd-bet-compare__cta:hover {
background: var(--m-gold) !important;
color: var(--m-deep) !important;
transform: translateY(-1px);
box-shadow: 0 8px 16px -6px rgba(184,132,44,.4);
}
/* Mobile: keep first 2 cols visible (# + Operator), allow scroll for rest */
@media (max-width: 720px) {
body.is-modern .gsbd-bet-compare__table { min-width: 600px; }
body.is-modern .gsbd-bet-compare__table thead th,
body.is-modern .gsbd-bet-compare__table tbody td { padding: 12px 14px !important; }
body.is-modern .gsbd-bet-compare__table thead th { font-size: 9.5px !important; }
body.is-modern .gsbd-bet-compare__table tbody td:nth-child(2) strong { font-size: 14px !important; }
body.is-modern .gsbd-bet-compare__cta { padding: 7px 14px !important; font-size: 10.5px !important; }
}
/* Methodology */
body.is-modern .gsbd-bet-method {
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-xl) !important;
color: var(--m-text) !important;
padding: clamp(28px, 3.5vw, 48px) !important;
}
body.is-modern .gsbd-bet-method * { color: inherit; }
body.is-modern .gsbd-bet-method__kicker {
color: var(--m-gold) !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
}
body.is-modern .gsbd-bet-method__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(24px, 2.8vw, 36px) !important;
letter-spacing: -0.022em !important;
color: var(--m-text) !important;
margin: 6px 0 14px !important;
}
body.is-modern .gsbd-bet-method__lead {
font-family: var(--m-font-sans) !important;
color: var(--m-text-2) !important;
font-size: 14.5px !important;
line-height: 1.55 !important;
max-width: 64ch;
}
body.is-modern .gsbd-bet-method__item {
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-md) !important;
padding: 18px 20px !important;
}
body.is-modern .gsbd-bet-method__item-label {
font-family: var(--m-font-serif) !important;
color: var(--m-text) !important;
font-weight: 500 !important;
font-size: 16px !important;
letter-spacing: -0.012em !important;
}
body.is-modern .gsbd-bet-method__item-weight {
font-family: var(--m-font-mono) !important;
color: var(--m-gold) !important;
font-weight: 700 !important;
font-size: 14px !important;
}
body.is-modern .gsbd-bet-method__bar {
background: var(--m-line) !important;
height: 4px !important;
border-radius: 999px;
overflow: hidden;
}
body.is-modern .gsbd-bet-method__bar > * {
background: linear-gradient(90deg, var(--m-gold) 0%, var(--m-red) 100%) !important;
height: 100%;
border-radius: 999px;
}
body.is-modern .gsbd-bet-method__item-desc {
color: var(--m-text-2) !important;
font-family: var(--m-font-sans) !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
/* FAQ */
body.is-modern .gsbd-bet-faq {
background: var(--m-bg) !important;
color: var(--m-text) !important;
}
body.is-modern .gsbd-bet-faq * { color: inherit; }
body.is-modern .gsbd-bet-faq__kicker {
color: var(--m-red) !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
}
body.is-modern .gsbd-bet-faq__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(26px, 3vw, 40px) !important;
letter-spacing: -0.024em !important;
color: var(--m-text) !important;
margin: 6px 0 24px !important;
}
body.is-modern .gsbd-bet-faq__item {
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-md) !important;
margin-bottom: 8px !important;
overflow: hidden;
}
body.is-modern .gsbd-bet-faq__item[open] {
background: var(--m-surface) !important;
border-color: var(--m-line-2) !important;
}
body.is-modern .gsbd-bet-faq__q {
font-family: var(--m-font-serif) !important;
color: var(--m-text) !important;
font-weight: 500 !important;
font-size: 17px !important;
letter-spacing: -0.012em !important;
padding: 18px 20px !important;
cursor: pointer;
list-style: none;
}
body.is-modern .gsbd-bet-faq__q::-webkit-details-marker { display: none; }
body.is-modern .gsbd-bet-faq__icon {
color: var(--m-gold) !important;
}
body.is-modern .gsbd-bet-faq__a {
color: var(--m-text-2) !important;
font-family: var(--m-font-sans) !important;
font-size: 14.5px !important;
line-height: 1.6 !important;
padding: 0 20px 18px !important;
border-top: 1px solid var(--m-line);
}
/* ============================================================
18. SINGLE POST — editorial magazine article (m-hero pattern)
============================================================ */
/* Crumb inside the m-hero */
body.is-modern .m-hero--single .m-hero__crumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 22px;
font-family: var(--m-font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--m-text-on-deep-3);
}
body.is-modern .m-hero--single .m-hero__crumb a {
color: var(--m-text-on-deep-3);
transition: color var(--m-transition);
}
body.is-modern .m-hero--single .m-hero__crumb a:hover { color: var(--m-gold); }
body.is-modern .m-hero--single .m-hero__crumb span { color: rgba(255,255,255,.18); }
body.is-modern .m-hero--single .m-hero__crumb a:last-of-type { color: var(--m-text-on-deep); }
/* The body content uses .m-article wrapper */
body.is-modern .m-article {
max-width: 760px;
margin-inline: auto;
background: transparent !important;
color: var(--m-text);
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
body.is-modern .m-article__content { /* alias */ }
/* Legacy .gsbd-article-hero — keep these in case any page still uses old markup */
body.is-modern.single-post .gsbd-article-hero,
body.is-modern.single .gsbd-article-hero {
position: relative;
background: var(--m-deep);
color: var(--m-text-on-deep);
min-height: clamp(440px, 60vw, 640px);
display: flex;
align-items: flex-end;
overflow: hidden;
isolation: isolate;
padding: 0 !important;
}
body.is-modern .gsbd-article-hero--photo {
background-image: var(--gsbd-hero-img);
background-size: cover;
background-position: center 30%;
transition: background-position 1200ms cubic-bezier(.2,.8,.2,1);
}
body.is-modern .gsbd-article-hero--photo:hover {
background-position: center 33%;
}
body.is-modern .gsbd-article-hero--photo::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(21,22,26,.30) 0%, rgba(21,22,26,.55) 50%, rgba(21,22,26,.95) 100%),
radial-gradient(ellipse at 0% 100%, rgba(184,132,44,.16) 0%, transparent 50%);
z-index: 0;
}
/* Editorial issue stamp at top right of the hero — homepage-mosaic vibe */
body.is-modern .gsbd-article-hero__inner::before {
content: "Issue №" counter(week);
counter-reset: week var(--gsbd-week, 18);
position: absolute;
top: clamp(28px, 4vw, 56px);
right: clamp(20px, 3vw, 40px);
font-family: var(--m-font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(13px, 1.2vw, 15px);
letter-spacing: .04em;
color: var(--m-gold);
opacity: .8;
z-index: 3;
padding: 4px 12px;
border: 1px solid rgba(184,132,44,.30);
border-radius: 999px;
backdrop-filter: blur(6px);
}
body.is-modern .gsbd-article-hero::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,132,44,.5), transparent);
z-index: 3;
}
body.is-modern .gsbd-article-hero__inner {
position: relative;
z-index: 2;
padding-block: clamp(48px, 6vw, 88px) !important;
width: 100%;
}
body.is-modern .gsbd-article-hero .gsbd-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 24px !important;
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-on-deep-3) !important;
}
body.is-modern .gsbd-article-hero .gsbd-breadcrumb a {
color: var(--m-text-on-deep-3) !important;
transition: color var(--m-transition);
}
body.is-modern .gsbd-article-hero .gsbd-breadcrumb a:hover { color: var(--m-gold) !important; }
body.is-modern .gsbd-article-hero .gsbd-breadcrumb span { color: rgba(255,255,255,.18) !important; }
body.is-modern .gsbd-article-hero__badge {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 28px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--m-gold) !important;
font-family: var(--m-font-sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
}
body.is-modern .gsbd-article-hero__badge::before {
content: "";
width: 32px; height: 1px;
background: var(--m-gold);
}
body.is-modern .gsbd-article-hero__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(36px, 5.6vw, 80px) !important;
line-height: 1.02 !important;
letter-spacing: -0.026em !important;
color: var(--m-text-on-deep) !important;
margin: 0 0 24px !important;
max-width: 22ch;
font-variation-settings: "opsz" 144;
}
body.is-modern .gsbd-article-hero__dek {
font-family: var(--m-font-sans) !important;
font-size: clamp(15px, 1.3vw, 19px) !important;
line-height: 1.55 !important;
color: var(--m-text-on-deep-2) !important;
max-width: 56ch;
margin: 0 0 32px !important;
}
body.is-modern .gsbd-article-hero__meta {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 16px 22px !important;
padding-top: 24px !important;
border-top: 1px solid rgba(255,255,255,.10);
}
body.is-modern .gsbd-article-hero__divider {
width: 1px;
height: 28px;
background: rgba(255,255,255,.10);
}
body.is-modern .gsbd-article-hero .gsbd-author {
display: inline-flex;
align-items: center;
gap: 12px;
}
body.is-modern .gsbd-article-hero .gsbd-author__avatar {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
border: 1px solid rgba(255,255,255,.15);
}
body.is-modern .gsbd-article-hero .gsbd-author__block,
body.is-modern .gsbd-article-hero__meta-block {
display: flex;
flex-direction: column;
gap: 2px;
}
body.is-modern .gsbd-article-hero .gsbd-author__label {
font-family: var(--m-font-sans) !important;
font-size: 9.5px !important;
font-weight: 600 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-on-deep-3) !important;
line-height: 1;
}
body.is-modern .gsbd-article-hero .gsbd-author__name {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: 16px !important;
color: var(--m-text-on-deep) !important;
letter-spacing: -0.012em;
line-height: 1.2;
}
body.is-modern .gsbd-article-hero__meta-block time,
body.is-modern .gsbd-article-hero__meta-block span:not(.gsbd-author__label) {
font-family: var(--m-font-mono) !important;
color: var(--m-text-on-deep) !important;
font-size: 13px !important;
line-height: 1.2;
}
/* Sticky share rail */
body.is-modern .gsbd-share-rail {
position: fixed;
left: 24px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 8px;
z-index: 30;
}
body.is-modern .gsbd-share-rail a {
display: grid;
place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--m-bg);
border: 1px solid var(--m-line);
color: var(--m-text-2);
transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
body.is-modern .gsbd-share-rail a:hover {
background: var(--m-text);
color: var(--m-bg);
border-color: var(--m-text);
transform: translateY(-1px);
}
/* Article layout — drop sidebar for editorial reading */
body.is-modern .gsbd-article-layout {
display: block !important;
grid-template-columns: none !important;
padding-block: clamp(40px, 5vw, 72px) !important;
max-width: 1240px;
margin-inline: auto;
}
body.is-modern .gsbd-article-sidebar { display: none !important; }
body.is-modern .gsbd-article {
max-width: 760px;
margin-inline: auto;
background: transparent !important;
color: var(--m-text) !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
/* Football/cricket fixtures strip — light editorial reskin */
body.is-modern .gsbd-strip--single,
body.is-modern .gsbd-strip--cat {
background: transparent !important;
border: 0 !important;
padding-block: clamp(20px, 2.4vw, 32px) !important;
margin: 0 !important;
}
body.is-modern .gsbd-strip__head {
display: flex !important;
align-items: end !important;
justify-content: space-between !important;
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--m-line) !important;
}
body.is-modern .gsbd-strip__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(20px, 2vw, 26px) !important;
color: var(--m-text) !important;
letter-spacing: -0.018em !important;
margin: 0 !important;
text-transform: none !important;
}
body.is-modern .gsbd-strip__more {
font-family: var(--m-font-sans) !important;
color: var(--m-text-3) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
border-bottom: 1px solid var(--m-line-2);
padding-bottom: 2px;
text-decoration: none !important;
transition: color 220ms ease;
}
body.is-modern .gsbd-strip__more:hover {
color: var(--m-red) !important;
border-color: var(--m-red);
}
body.is-modern .gsbd-strip__rail {
list-style: none !important;
display: flex !important;
gap: 14px !important;
overflow-x: auto !important;
margin: 0 !important;
padding: 4px 0 12px !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
body.is-modern .gsbd-strip__rail::-webkit-scrollbar { display: none; }
body.is-modern .gsbd-strip__item {
flex-shrink: 0;
margin: 0 !important;
background: none !important;
list-style: none !important;
}
body.is-modern .gsbd-strip__item::before,
body.is-modern .gsbd-strip__item::marker { content: none !important; display: none !important; }
/* Related-reading grid uses .gsbd-grid card template — neutralise dark background */
body.is-modern .gsbd-section--related .gsbd-grid > * {
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-md) !important;
overflow: hidden !important;
color: var(--m-text) !important;
transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease, box-shadow 220ms ease;
}
body.is-modern .gsbd-section--related .gsbd-grid > *:hover {
transform: translateY(-3px);
border-color: var(--m-line-2) !important;
box-shadow: var(--m-shadow-2);
}
body.is-modern .gsbd-section--related .gsbd-grid h2,
body.is-modern .gsbd-section--related .gsbd-grid h3 {
color: var(--m-text) !important;
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
letter-spacing: -0.018em !important;
}
body.is-modern .gsbd-section--related .gsbd-grid p { color: var(--m-text-2) !important; }
body.is-modern .gsbd-section--related .gsbd-grid * { color: inherit; }
/* Reading progress bar */
body.is-modern .gsbd-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
background: transparent;
z-index: 100;
}
body.is-modern .gsbd-progress__bar {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--m-gold) 0%, var(--m-red) 100%);
width: 0;
transition: width 100ms linear;
}
/* Article body typography */
body.is-modern .gsbd-article__content {
color: var(--m-text-2);
font-family: var(--m-font-sans);
font-size: 17px;
line-height: 1.75;
}
body.is-modern .gsbd-article__content > * { max-width: 100%; }
body.is-modern .gsbd-article__content p {
margin: 0 0 22px;
color: var(--m-text-2);
}
body.is-modern .gsbd-article__content p:first-child::first-letter {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 4.4em;
float: left;
line-height: .85;
margin: 6px 12px 0 -2px;
color: var(--m-text);
letter-spacing: -0.04em;
}
body.is-modern .gsbd-article__content h2,
body.is-modern .gsbd-article__content h3,
body.is-modern .gsbd-article__content h4 {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
color: var(--m-text) !important;
letter-spacing: -0.02em !important;
line-height: 1.15 !important;
margin: 40px 0 14px !important;
font-variation-settings: "opsz" 32;
border: 0 !important;
padding: 0 !important;
background: none !important;
}
body.is-modern .gsbd-article__content h2 { font-size: clamp(26px, 2.6vw, 34px) !important; }
body.is-modern .gsbd-article__content h3 { font-size: clamp(22px, 2.2vw, 26px) !important; }
body.is-modern .gsbd-article__content h4 { font-size: 18px !important; text-transform: none !important; }
body.is-modern .gsbd-article__content strong { color: var(--m-text); font-weight: 600; }
body.is-modern .gsbd-article__content a {
color: var(--m-red);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 220ms ease;
}
body.is-modern .gsbd-article__content a:hover { color: var(--m-text); }
body.is-modern .gsbd-article__content ul,
body.is-modern .gsbd-article__content ol {
margin: 0 0 22px !important;
padding-left: 1.4em !important;
}
body.is-modern .gsbd-article__content li {
margin-bottom: 8px;
color: var(--m-text-2);
background: none !important;
}
body.is-modern .gsbd-article__content li::marker { color: var(--m-gold); }
body.is-modern .gsbd-article__content blockquote {
margin: 32px 0 !important;
padding: 4px 0 4px 28px !important;
border-left: 3px solid var(--m-gold) !important;
background: none !important;
font-family: var(--m-font-serif) !important;
font-size: clamp(20px, 1.6vw, 24px) !important;
font-weight: 400 !important;
line-height: 1.45 !important;
letter-spacing: -0.012em;
color: var(--m-text) !important;
}
body.is-modern .gsbd-article__content blockquote p { font-size: inherit !important; color: inherit !important; }
body.is-modern .gsbd-article__content img,
body.is-modern .gsbd-article__content figure {
border-radius: var(--m-radius-md) !important;
margin: 28px 0 !important;
overflow: hidden;
background: var(--m-surface);
}
body.is-modern .gsbd-article__content figcaption {
margin-top: 10px;
font-size: 13px;
color: var(--m-text-3);
font-style: italic;
text-align: center;
}
body.is-modern .gsbd-article__content table {
width: 100% !important;
margin: 24px 0 !important;
border-collapse: separate !important;
border-spacing: 0;
border: 1px solid var(--m-line);
border-radius: var(--m-radius-md);
overflow: hidden;
font-size: 14.5px;
}
body.is-modern .gsbd-article__content table thead th {
background: var(--m-surface) !important;
color: var(--m-text-3) !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
padding: 14px 16px !important;
text-align: left !important;
border-bottom: 1px solid var(--m-line) !important;
}
body.is-modern .gsbd-article__content table tbody td {
padding: 12px 16px !important;
border-bottom: 1px solid var(--m-line) !important;
color: var(--m-text-2) !important;
}
body.is-modern .gsbd-article__content table tbody tr:nth-child(even) td { background: rgba(243, 240, 232, .35); }
body.is-modern .gsbd-article__content table tbody tr:last-child td { border-bottom: 0 !important; }
body.is-modern .gsbd-article__content code {
background: var(--m-surface);
padding: 2px 8px;
border-radius: 4px;
font-family: var(--m-font-mono);
font-size: .92em;
color: var(--m-text);
}
body.is-modern .gsbd-article__content hr {
border: 0;
margin: 36px 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--m-line-2), transparent);
}
/* Article footer (tags) */
body.is-modern .gsbd-article__foot {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--m-line);
}
body.is-modern .gsbd-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
body.is-modern .gsbd-tags__label {
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-3) !important;
margin-right: 4px;
}
body.is-modern .gsbd-tags__item {
display: inline-flex;
padding: 6px 14px !important;
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: 999px !important;
font-family: var(--m-font-sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--m-text-2) !important;
text-decoration: none !important;
transition: color 220ms ease, background 220ms ease, border-color 220ms ease;
letter-spacing: 0;
}
body.is-modern .gsbd-tags__item:hover {
color: var(--m-text) !important;
border-color: var(--m-text) !important;
}
/* Author bio */
body.is-modern .gsbd-author-bio {
display: flex !important;
gap: 24px;
margin-top: 48px;
padding: clamp(24px, 3vw, 36px) !important;
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-lg) !important;
align-items: flex-start;
position: relative;
overflow: hidden;
}
body.is-modern .gsbd-author-bio::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100px; height: 2px;
background: linear-gradient(90deg, var(--m-gold) 0%, var(--m-red) 100%);
}
body.is-modern .gsbd-author-bio__avatar {
width: 72px !important;
height: 72px !important;
border-radius: 50% !important;
flex-shrink: 0;
border: 2px solid var(--m-bg);
box-shadow: 0 0 0 1px var(--m-line);
}
body.is-modern .gsbd-author-bio__body { flex: 1; min-width: 0; }
body.is-modern .gsbd-author-bio__kicker {
color: var(--m-gold) !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
}
body.is-modern .gsbd-author-bio__name {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: 22px !important;
color: var(--m-text) !important;
margin: 6px 0 10px !important;
letter-spacing: -0.018em !important;
}
body.is-modern .gsbd-author-bio__desc {
font-family: var(--m-font-sans) !important;
color: var(--m-text-2) !important;
font-size: 14.5px !important;
line-height: 1.55 !important;
margin: 0 0 12px !important;
}
body.is-modern .gsbd-author-bio__links a {
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--m-text) !important;
border-bottom: 1px solid var(--m-text);
padding-bottom: 2px;
text-decoration: none !important;
}
body.is-modern .gsbd-author-bio__links a:hover { color: var(--m-red) !important; border-color: var(--m-red); }
/* Related section — reuse the editorial archive grid look */
body.is-modern .gsbd-section--related {
margin-top: clamp(40px, 5vw, 64px) !important;
padding-block: clamp(32px, 4vw, 48px) !important;
border-top: 1px solid var(--m-line);
}
body.is-modern .gsbd-section--related .gsbd-section__head {
display: flex;
align-items: end;
gap: 20px;
border-bottom: 1px solid var(--m-line);
padding-bottom: clamp(18px, 2vw, 24px);
margin-bottom: clamp(24px, 3vw, 36px);
}
body.is-modern .gsbd-section--related .gsbd-section__more {
margin-left: auto;
font-family: var(--m-font-sans) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--m-text-3) !important;
border-bottom: 1px solid var(--m-line-2);
padding-bottom: 2px;
text-decoration: none !important;
}
body.is-modern .gsbd-section--related .gsbd-section__more:hover {
color: var(--m-red) !important;
border-color: var(--m-red);
}
body.is-modern .gsbd-section--related .gsbd-section__lead {
color: var(--m-text-2) !important;
font-family: var(--m-font-sans) !important;
font-size: 14.5px !important;
}
body.is-modern .gsbd-section--related .gsbd-section__lead strong { color: var(--m-text); }
body.is-modern .gsbd-section--related .gsbd-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: clamp(20px, 2vw, 28px) !important;
}
/* Mobile single post */
@media (max-width: 1100px) {
body.is-modern .gsbd-share-rail { display: none !important; }
body.is-modern .gsbd-article { max-width: 720px; }
}
@media (max-width: 720px) {
body.is-modern .gsbd-article-hero__inner { padding-block: 36px 32px !important; }
body.is-modern .gsbd-article-hero__title { font-size: clamp(28px, 8.4vw, 42px) !important; }
body.is-modern .gsbd-article-hero__dek { font-size: 15px !important; }
body.is-modern .gsbd-article-hero__meta { gap: 14px 18px !important; }
body.is-modern .gsbd-article-hero__divider { display: none; }
body.is-modern .gsbd-article__content { font-size: 16px; }
body.is-modern .gsbd-article__content p:first-child::first-letter { font-size: 3.4em; }
body.is-modern .gsbd-author-bio { flex-direction: column; gap: 16px; padding: 22px !important; }
body.is-modern .gsbd-author-bio__avatar { width: 56px !important; height: 56px !important; }
body.is-modern .gsbd-section--related .gsbd-grid { grid-template-columns: 1fr !important; }
body.is-modern .gsbd-section--related .gsbd-section__head { flex-direction: column; align-items: flex-start; }
body.is-modern .gsbd-section--related .gsbd-section__more { margin-left: 0; }
}
/* Comments — full editorial reskin */
body.is-modern .gsbd-comments {
background: transparent !important;
color: var(--m-text) !important;
margin: clamp(40px, 5vw, 64px) auto clamp(40px, 5vw, 72px) !important;
padding: 0 !important;
max-width: 760px !important;
border: 0 !important;
border-radius: 0 !important;
}
/* The .gsbd-container wrapping the comments inherits its parent (cream body)
but sits flush against the dark Top-Betting CTA. Give it breathing room. */
body.is-modern .gsbd-main > .gsbd-container:last-child,
body.is-modern .gsbd-container:has(> .gsbd-comments),
body.is-modern .gsbd-container:has(> .comments-area) {
padding-bottom: clamp(32px, 4vw, 56px);
}
body.is-modern .gsbd-comments * { color: inherit; }
body.is-modern .comments-area,
body.is-modern .comment-respond {
background: var(--m-bg) !important;
color: var(--m-text) !important;
padding: clamp(24px, 3vw, 36px) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-lg) !important;
margin: 0 !important;
}
body.is-modern .comments-title,
body.is-modern .comment-reply-title {
font-family: var(--m-font-serif) !important;
color: var(--m-text) !important;
font-weight: 500 !important;
font-size: clamp(22px, 2.4vw, 28px) !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
margin: 0 0 8px !important;
text-transform: none !important;
}
body.is-modern .comment-respond > p:not(.form-submit):not(.comment-notes) {
color: var(--m-text-3) !important;
font-family: var(--m-font-sans) !important;
font-size: 13px !important;
margin: 0 0 16px !important;
}
body.is-modern .comment-notes {
font-family: var(--m-font-sans) !important;
color: var(--m-text-3) !important;
font-size: 13px !important;
margin: 0 0 18px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid var(--m-line) !important;
text-align: left !important;
}
body.is-modern .comment-form,
body.is-modern .gsbd-comment-form {
background: transparent !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
display: grid !important;
gap: 14px !important;
margin: 0 !important;
}
body.is-modern .comment-form-comment,
body.is-modern .comment-form-author,
body.is-modern .comment-form-email,
body.is-modern .comment-form-url {
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 8px;
}
body.is-modern .comment-form .comment-form-author,
body.is-modern .comment-form .comment-form-email {
display: inline-flex;
}
@media (min-width: 600px) {
body.is-modern .comment-form {
grid-template-columns: 1fr 1fr;
}
body.is-modern .comment-form .comment-form-comment,
body.is-modern .comment-form .comment-notes,
body.is-modern .comment-form .comment-form-cookies-consent,
body.is-modern .comment-form .form-submit { grid-column: 1 / -1; }
}
body.is-modern .comment-form label {
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-3) !important;
margin: 0 !important;
}
body.is-modern .comment-form .required,
body.is-modern .comment-form .required-field-message { color: var(--m-red) !important; }
body.is-modern .comment-form input[type="text"],
body.is-modern .comment-form input[type="email"],
body.is-modern .comment-form input[type="url"],
body.is-modern .comment-form textarea,
body.is-modern .gsbd-comment-form input[type="text"],
body.is-modern .gsbd-comment-form input[type="email"],
body.is-modern .gsbd-comment-form input[type="url"],
body.is-modern .gsbd-comment-form textarea {
font-family: var(--m-font-sans) !important;
width: 100% !important;
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-sm) !important;
color: var(--m-text) !important;
padding: 12px 14px !important;
font-size: 15px !important;
line-height: 1.5 !important;
box-shadow: none !important;
transition: border-color 220ms ease, background 220ms ease;
-webkit-appearance: none;
appearance: none;
}
body.is-modern .comment-form textarea {
min-height: 140px !important;
resize: vertical;
}
body.is-modern .comment-form input::placeholder,
body.is-modern .comment-form textarea::placeholder {
color: var(--m-text-3) !important;
font-style: italic;
opacity: 1;
}
body.is-modern .comment-form input:focus,
body.is-modern .comment-form textarea:focus {
outline: none !important;
border-color: var(--m-text) !important;
background: var(--m-bg) !important;
}
body.is-modern .comment-form-cookies-consent {
display: flex !important;
align-items: center;
gap: 10px;
margin: 0 !important;
}
body.is-modern .comment-form-cookies-consent label {
font-family: var(--m-font-sans) !important;
font-size: 12.5px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--m-text-2) !important;
}
body.is-modern .comment-form-cookies-consent input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--m-gold);
}
body.is-modern .form-submit { margin: 4px 0 0 !important; text-align: right; }
body.is-modern .form-submit input[type="submit"],
body.is-modern .submit,
body.is-modern .gsbd-comment-form button[type="submit"] {
font-family: var(--m-font-sans) !important;
background: var(--m-text) !important;
color: var(--m-bg) !important;
border: 0 !important;
border-radius: 999px !important;
padding: 13px 28px !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
transition: background 220ms ease, color 220ms ease, transform 220ms ease;
cursor: pointer;
box-shadow: 0 4px 10px -6px rgba(0,0,0,.25);
}
body.is-modern .form-submit input[type="submit"]:hover,
body.is-modern .submit:hover,
body.is-modern .gsbd-comment-form button[type="submit"]:hover {
background: var(--m-gold) !important;
color: var(--m-deep) !important;
transform: translateY(-1px);
}
/* Existing comments list */
body.is-modern .comment-list {
list-style: none !important;
margin: 0 0 28px !important;
padding: 0 !important;
}
body.is-modern .comment-list .comment {
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-md) !important;
padding: 18px 20px !important;
margin: 0 0 12px !important;
list-style: none !important;
}
body.is-modern .comment-list .comment::before,
body.is-modern .comment-list .comment::marker { content: none !important; display: none !important; }
body.is-modern .comment-list .comment-author cite,
body.is-modern .comment-list .fn {
font-family: var(--m-font-serif) !important;
color: var(--m-text) !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 16px !important;
}
body.is-modern .comment-list .comment-meta a,
body.is-modern .comment-list .comment-metadata {
font-family: var(--m-font-sans) !important;
color: var(--m-text-3) !important;
font-size: 11.5px !important;
}
/* ARTICLE TABLE — high-specificity override since legacy main.css colors them dark */
body.is-modern .gsbd-article__content table,
body.is-modern .gsbd-article__content > div table,
body.is-modern .m-article__content table {
width: 100% !important;
margin: 24px 0 !important;
border: 1px solid var(--m-line) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: var(--m-radius-md) !important;
overflow: hidden !important;
background: var(--m-bg) !important;
color: var(--m-text) !important;
font-family: var(--m-font-sans) !important;
font-size: 14.5px !important;
box-shadow: none !important;
}
body.is-modern .gsbd-article__content table * { color: inherit !important; }
body.is-modern .gsbd-article__content table thead,
body.is-modern .gsbd-article__content table thead tr {
background: var(--m-surface) !important;
}
body.is-modern .gsbd-article__content table thead th,
body.is-modern .gsbd-article__content table thead td {
background: var(--m-surface) !important;
color: var(--m-text-3) !important;
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
padding: 14px 16px !important;
text-align: left !important;
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid var(--m-line) !important;
}
body.is-modern .gsbd-article__content table tbody tr {
background: var(--m-bg) !important;
transition: background 220ms ease;
}
body.is-modern .gsbd-article__content table tbody tr:nth-child(even) {
background: rgba(243, 240, 232, .35) !important;
}
body.is-modern .gsbd-article__content table tbody tr:hover {
background: rgba(184, 132, 44, .06) !important;
}
body.is-modern .gsbd-article__content table tbody td,
body.is-modern .gsbd-article__content table tbody th {
padding: 12px 16px !important;
color: var(--m-text-2) !important;
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid var(--m-line) !important;
background: transparent !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body.is-modern .gsbd-article__content table tbody tr:last-child td,
body.is-modern .gsbd-article__content table tbody tr:last-child th {
border-bottom: 0 !important;
}
body.is-modern .gsbd-article__content table tbody td:first-child,
body.is-modern .gsbd-article__content table tbody th:first-child {
color: var(--m-text) !important;
font-weight: 500 !important;
}
/* FIXTURE STRIP — slider nav like the homepage marquee */
body.is-modern .gsbd-strip__rail {
position: relative;
}
body.is-modern .gsbd-strip__scroll-wrap {
position: relative;
}
body.is-modern .gsbd-strip__scroll-wrap::before,
body.is-modern .gsbd-strip__scroll-wrap::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 56px;
z-index: 2;
pointer-events: none;
opacity: .9;
}
body.is-modern .gsbd-strip__scroll-wrap::before {
left: 0;
background: linear-gradient(90deg, var(--m-bg) 30%, transparent);
}
body.is-modern .gsbd-strip__scroll-wrap::after {
right: 0;
background: linear-gradient(-90deg, var(--m-bg) 30%, transparent);
}
body.is-modern .gsbd-strip__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.14);
background: rgba(21,22,26,.85);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
color: var(--m-text-on-deep);
display: grid;
place-items: center;
cursor: pointer;
transition:
background 220ms ease,
border-color 220ms ease,
color 220ms ease,
opacity 220ms ease,
transform 220ms cubic-bezier(.2,.8,.2,1);
box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
padding: 0;
}
body.is-modern .gsbd-strip__nav svg { width: 18px; height: 18px; }
body.is-modern .gsbd-strip__nav--prev { left: 8px; }
body.is-modern .gsbd-strip__nav--next { right: 8px; }
body.is-modern .gsbd-strip__nav:hover {
background: var(--m-gold);
border-color: var(--m-gold);
color: var(--m-deep);
transform: translateY(-50%) scale(1.06);
}
body.is-modern .gsbd-strip__nav[aria-disabled="true"],
body.is-modern .gsbd-strip__nav:disabled {
opacity: 0;
pointer-events: none;
}
@media (max-width: 720px) {
body.is-modern .gsbd-strip__nav {
width: 36px;
height: 36px;
background: rgba(21,22,26,.92);
}
body.is-modern .gsbd-strip__nav svg { width: 14px; height: 14px; }
}
/* ============================================================
17b. SINGLE BETTING SITE — editorial reskin
============================================================ */
body.is-modern .gsbd-bet-single-hero {
position: relative;
background: var(--m-surface) !important;
border-bottom: 1px solid var(--m-line);
padding-block: clamp(36px, 5vw, 64px) clamp(28px, 3.5vw, 48px) !important;
overflow: hidden;
isolation: isolate;
color: var(--m-text);
}
body.is-modern .gsbd-bet-single-hero::before {
content: "";
position: absolute;
inset: -40% 50% auto -10%;
height: 200%;
background: radial-gradient(60% 40% at 30% 30%, rgba(184,132,44,.10) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
body.is-modern .gsbd-bet-single-hero__inner { position: relative; z-index: 1; }
body.is-modern .gsbd-bet-single-hero .gsbd-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 24px !important;
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-3) !important;
}
body.is-modern .gsbd-bet-single-hero .gsbd-breadcrumb a {
color: var(--m-text-3) !important;
transition: color var(--m-transition);
}
body.is-modern .gsbd-bet-single-hero .gsbd-breadcrumb a:hover { color: var(--m-red) !important; }
body.is-modern .gsbd-bet-single-hero .gsbd-breadcrumb span { color: var(--m-line-2) !important; }
body.is-modern .gsbd-bet-single-hero__row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: clamp(28px, 4vw, 56px) !important;
align-items: center !important;
}
body.is-modern .gsbd-bet-single-hero__brand {
display: flex !important;
align-items: center !important;
gap: clamp(20px, 2.5vw, 28px) !important;
}
body.is-modern .gsbd-bet-single-hero__logo {
width: 88px; height: 88px;
flex-shrink: 0;
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-md) !important;
padding: 12px !important;
display: grid;
place-items: center;
overflow: hidden;
}
body.is-modern .gsbd-bet-single-hero__logo img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
body.is-modern .gsbd-bet-single-hero__kicker {
display: inline-block;
font-family: var(--m-font-sans) !important;
color: var(--m-gold) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
margin-bottom: 6px !important;
}
body.is-modern .gsbd-bet-single-hero__title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(36px, 4.4vw, 56px) !important;
line-height: 1.02 !important;
letter-spacing: -0.026em !important;
color: var(--m-text) !important;
text-transform: none !important;
margin: 0 0 12px !important;
font-variation-settings: "opsz" 144;
}
body.is-modern .gsbd-bet-single-hero__rating {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-family: var(--m-font-sans) !important;
font-size: 13px !important;
color: var(--m-text-2) !important;
}
body.is-modern .gsbd-bet-single-hero__rating .s {
color: var(--m-line-2) !important;
font-size: 14px;
letter-spacing: .04em;
}
body.is-modern .gsbd-bet-single-hero__rating .s--full { color: var(--m-gold) !important; }
body.is-modern .gsbd-bet-single-hero__rating .s--half {
background: linear-gradient(90deg, var(--m-gold) 50%, var(--m-line-2) 50%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
}
body.is-modern .gsbd-bet-single-hero__rating strong {
font-family: var(--m-font-mono) !important;
color: var(--m-text) !important;
font-weight: 700;
}
body.is-modern .gsbd-bet-single-hero__rating em {
font-style: normal;
color: var(--m-text-3) !important;
font-size: 12px;
}
/* Bonus CTA panel */
body.is-modern .gsbd-bet-single-hero__cta {
display: flex !important;
flex-direction: column;
align-items: stretch;
background: var(--m-deep) !important;
color: var(--m-text-on-deep) !important;
border-radius: var(--m-radius-lg) !important;
padding: 22px 26px !important;
gap: 4px !important;
min-width: 280px;
position: relative;
overflow: hidden;
}
body.is-modern .gsbd-bet-single-hero__cta::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--m-gold) 50%, transparent 100%);
}
body.is-modern .gsbd-bet-single-hero__bonus-label {
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
color: var(--m-gold) !important;
}
body.is-modern .gsbd-bet-single-hero__bonus-amt {
font-family: var(--m-font-serif) !important;
font-size: clamp(26px, 2.6vw, 36px) !important;
font-weight: 500 !important;
letter-spacing: -0.022em !important;
color: var(--m-text-on-deep) !important;
line-height: 1.05 !important;
margin: 4px 0 6px !important;
}
body.is-modern .gsbd-bet-single-hero__bonus-terms {
font-family: var(--m-font-sans) !important;
color: var(--m-text-on-deep-3) !important;
font-size: 11.5px !important;
margin-bottom: 14px !important;
}
body.is-modern .gsbd-bet-single-hero__btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
background: var(--m-gold) !important;
color: var(--m-deep) !important;
border: 0 !important;
border-radius: 999px !important;
padding: 12px 24px !important;
font-family: var(--m-font-sans) !important;
font-weight: 700 !important;
font-size: 12.5px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: background 220ms ease, transform 220ms ease;
}
body.is-modern .gsbd-bet-single-hero__btn:hover {
background: var(--m-text-on-deep) !important;
transform: translateY(-1px);
}
/* Single page wrapper */
body.is-modern .gsbd-bet-single {
background: var(--m-bg) !important;
color: var(--m-text) !important;
padding-block: clamp(40px, 5vw, 72px) !important;
}
/* Section headings */
body.is-modern .gsbd-bet-single__h2 {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(24px, 2.8vw, 36px) !important;
line-height: 1.06 !important;
letter-spacing: -0.022em !important;
color: var(--m-text) !important;
text-transform: none !important;
margin: 0 0 20px !important;
padding: 0 0 14px !important;
border-bottom: 1px solid var(--m-line);
position: relative;
border-left: 0 !important;
padding-left: 0 !important;
font-variation-settings: "opsz" 144;
}
body.is-modern .gsbd-bet-single__h2::before {
content: "";
display: block;
width: 28px;
height: 1px;
background: var(--m-gold);
margin-bottom: 12px;
opacity: .7;
}
/* Quick facts grid */
body.is-modern .gsbd-bet-single__facts {
margin-bottom: clamp(40px, 5vw, 64px);
}
body.is-modern .gsbd-bet-single__facts-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 0 !important;
margin: 0 !important;
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-lg) !important;
overflow: hidden;
}
body.is-modern .gsbd-bet-single__facts-grid > div {
padding: 18px 22px !important;
border-right: 1px solid var(--m-line);
border-bottom: 1px solid var(--m-line);
background: none !important;
color: var(--m-text);
display: flex;
flex-direction: column;
gap: 4px;
}
body.is-modern .gsbd-bet-single__facts-grid > div:last-child { border-right: 0; }
body.is-modern .gsbd-bet-single__facts-grid dt {
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--m-text-3) !important;
margin: 0 !important;
}
body.is-modern .gsbd-bet-single__facts-grid dd {
font-family: var(--m-font-serif) !important;
color: var(--m-text) !important;
font-weight: 500 !important;
font-size: 17px !important;
letter-spacing: -0.012em !important;
margin: 0 !important;
line-height: 1.25 !important;
}
/* Body article */
body.is-modern .gsbd-bet-single__body {
margin-bottom: clamp(40px, 5vw, 64px);
color: var(--m-text-2) !important;
font-family: var(--m-font-sans);
font-size: 16px;
line-height: 1.7;
}
body.is-modern .gsbd-bet-single__body * { color: inherit; }
body.is-modern .gsbd-bet-single__body p { margin: 0 0 16px; }
body.is-modern .gsbd-bet-single__body h2,
body.is-modern .gsbd-bet-single__body h3 {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
color: var(--m-text) !important;
letter-spacing: -0.018em;
margin: 28px 0 12px;
font-variation-settings: "opsz" 32;
}
body.is-modern .gsbd-bet-single__body h2 { font-size: 26px; }
body.is-modern .gsbd-bet-single__body h3 { font-size: 20px; }
body.is-modern .gsbd-bet-single__body strong { color: var(--m-text); font-weight: 600; }
body.is-modern .gsbd-bet-single__body a { color: var(--m-red); text-decoration: underline; text-underline-offset: 3px; }
body.is-modern .gsbd-bet-single__body a:hover { color: var(--m-text); }
body.is-modern .gsbd-bet-single__body ul,
body.is-modern .gsbd-bet-single__body ol { margin: 0 0 16px; padding-left: 1.4em; }
body.is-modern .gsbd-bet-single__body li { margin-bottom: 6px; }
/* Pros & Cons */
body.is-modern .gsbd-bet-single__proscons {
margin-bottom: clamp(40px, 5vw, 64px);
}
body.is-modern .gsbd-bet-single__proscons-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
}
body.is-modern .gsbd-bet-single__pros,
body.is-modern .gsbd-bet-single__cons {
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-lg) !important;
padding: 24px !important;
color: var(--m-text);
}
body.is-modern .gsbd-bet-single__pros { border-top: 3px solid #16a34a !important; }
body.is-modern .gsbd-bet-single__cons { border-top: 3px solid #dc2626 !important; }
body.is-modern .gsbd-bet-single__pros h3,
body.is-modern .gsbd-bet-single__cons h3 {
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
margin: 0 0 16px !important;
text-shadow: none !important;
}
body.is-modern .gsbd-bet-single__pros h3 { color: #16a34a !important; }
body.is-modern .gsbd-bet-single__cons h3 { color: #dc2626 !important; }
body.is-modern .gsbd-bet-single__pros ul,
body.is-modern .gsbd-bet-single__cons ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.is-modern .gsbd-bet-single__pros li,
body.is-modern .gsbd-bet-single__cons li {
position: relative;
padding: 6px 0 6px 26px !important;
font-family: var(--m-font-sans) !important;
font-size: 14.5px !important;
color: var(--m-text-2) !important;
line-height: 1.5 !important;
margin: 0 !important;
border-bottom: 1px solid var(--m-line);
background: none !important;
}
body.is-modern .gsbd-bet-single__pros li:last-child,
body.is-modern .gsbd-bet-single__cons li:last-child { border-bottom: 0; }
body.is-modern .gsbd-bet-single__pros li::before,
body.is-modern .gsbd-bet-single__cons li::before {
content: "";
position: absolute;
left: 0;
top: 12px;
width: 16px;
height: 16px;
border-radius: 50%;
display: grid;
place-items: center;
}
body.is-modern .gsbd-bet-single__pros li::before {
background: rgba(22,163,74,.12);
border: 1px solid rgba(22,163,74,.4);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3 3 7-7' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
body.is-modern .gsbd-bet-single__cons li::before {
background: rgba(220,38,38,.10);
border: 1px solid rgba(220,38,38,.4);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
/* Sports + payments chips block */
body.is-modern .gsbd-bet-single__chips-block {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
margin-bottom: clamp(40px, 5vw, 64px) !important;
}
body.is-modern .gsbd-bet-single__chips {
background: var(--m-surface) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-lg) !important;
padding: 24px !important;
color: var(--m-text);
}
body.is-modern .gsbd-bet-single__chips h3 {
font-family: var(--m-font-sans) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .26em !important;
text-transform: uppercase !important;
color: var(--m-gold) !important;
margin: 0 0 14px !important;
}
body.is-modern .gsbd-bet-single__chips ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap;
gap: 6px !important;
}
body.is-modern .gsbd-bet-single__chips li {
display: inline-flex !important;
align-items: center;
padding: 7px 14px !important;
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: 999px !important;
font-family: var(--m-font-sans) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: var(--m-text-2) !important;
margin: 0 !important;
line-height: 1.2 !important;
}
body.is-modern .gsbd-bet-single__chips li::before,
body.is-modern .gsbd-bet-single__chips li::marker { content: none !important; display: none !important; }
/* Final CTA block */
body.is-modern .gsbd-bet-single__cta-block {
background: var(--m-deep) !important;
color: var(--m-text-on-deep) !important;
border-radius: var(--m-radius-xl) !important;
padding: clamp(36px, 4.5vw, 56px) clamp(24px, 3vw, 40px) !important;
margin-bottom: clamp(40px, 5vw, 64px) !important;
text-align: center;
position: relative;
overflow: hidden;
}
body.is-modern .gsbd-bet-single__cta-block::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--m-gold) 50%, transparent 100%);
}
body.is-modern .gsbd-bet-single__cta-block::after {
content: "";
position: absolute;
inset: -50% 30% auto -10%;
height: 200%;
background: radial-gradient(40% 30% at 30% 30%, rgba(184,132,44,.18) 0%, transparent 70%);
pointer-events: none;
}
body.is-modern .gsbd-bet-single__cta-block .gsbd-bet-single__h2 {
color: var(--m-text-on-deep) !important;
border: 0 !important;
padding: 0 !important;
margin: 0 0 24px !important;
text-align: center;
position: relative;
z-index: 1;
}
body.is-modern .gsbd-bet-single__cta-block .gsbd-bet-single__h2::before { display: none; }
body.is-modern .gsbd-bet-single__cta-btn {
display: inline-flex !important;
align-items: center;
background: var(--m-gold) !important;
color: var(--m-deep) !important;
border: 0 !important;
border-radius: 999px !important;
padding: 16px 32px !important;
font-family: var(--m-font-sans) !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: background 220ms ease, transform 220ms ease;
position: relative;
z-index: 1;
}
body.is-modern .gsbd-bet-single__cta-btn:hover {
background: var(--m-text-on-deep) !important;
transform: translateY(-1px);
}
/* Mobile single betting site */
@media (max-width: 720px) {
body.is-modern .gsbd-bet-single-hero {
padding-block: 28px 24px !important;
}
body.is-modern .gsbd-bet-single-hero__row {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
body.is-modern .gsbd-bet-single-hero__brand {
flex-direction: column;
align-items: flex-start !important;
gap: 16px !important;
}
body.is-modern .gsbd-bet-single-hero__logo { width: 64px; height: 64px; padding: 8px !important; }
body.is-modern .gsbd-bet-single-hero__title { font-size: clamp(28px, 8vw, 40px) !important; }
body.is-modern .gsbd-bet-single-hero__cta { min-width: 0; padding: 18px 22px !important; }
body.is-modern .gsbd-bet-single__facts-grid { grid-template-columns: 1fr 1fr !important; }
body.is-modern .gsbd-bet-single__facts-grid > div { padding: 14px 16px !important; }
body.is-modern .gsbd-bet-single__proscons-grid,
body.is-modern .gsbd-bet-single__chips-block { grid-template-columns: 1fr !important; }
body.is-modern .gsbd-bet-single__cta-block { padding: 28px 20px !important; }
}
@media (max-width: 480px) {
body.is-modern .gsbd-bet-single__facts-grid { grid-template-columns: 1fr !important; }
}
/* Mobile: betting archive */
@media (max-width: 720px) {
body.is-modern .gsbd-bet-mega-hero { padding-block: 28px 22px !important; }
body.is-modern .gsbd-bet-mega-hero__title { font-size: clamp(30px, 9vw, 44px) !important; }
body.is-modern .gsbd-bet-mega-hero__lead { font-size: 14px !important; }
body.is-modern .gsbd-bet-mega-hero__stats { grid-template-columns: 1fr 1fr !important; gap: 16px 12px !important; }
body.is-modern .gsbd-bet-jumpnav__inner {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
body.is-modern .gsbd-bet-jumpnav__inner::-webkit-scrollbar { display: none; }
body.is-modern .gsbd-bet-jumpnav__inner a {
flex-shrink: 0;
padding: 14px 18px !important;
font-size: 10.5px !important;
}
body.is-modern .gsbd-section__head { flex-direction: column; align-items: flex-start; gap: 10px; }
body.is-modern .gsbd-bet-spotlight__inner { padding: 22px !important; }
body.is-modern .gsbd-bet-compare { padding: 20px !important; }
body.is-modern .gsbd-bet-compare__wrap { overflow-x: auto; }
body.is-modern .gsbd-bet-method { padding: 24px !important; }
body.is-modern .gsbd-bet-faq__q { font-size: 15px !important; padding: 16px !important; }
}
/* ============================================================
16. ARCHIVE PAGES (Players, etc.) — editorial hero + grid
============================================================ */
.m-archive-hero {
position: relative;
background: var(--m-surface);
border-bottom: 1px solid var(--m-line);
padding-block: clamp(36px, 5vw, 72px) clamp(24px, 3vw, 40px);
overflow: hidden;
isolation: isolate;
}
.m-archive-hero::before {
/* Soft gold light bloom — subtle editorial accent */
content: "";
position: absolute;
inset: -40% 50% auto -10%;
height: 200%;
background: radial-gradient(60% 40% at 30% 30%, rgba(184,132,44,.08) 0%, transparent 70%);
z-index: 0;
pointer-events: none;
}
.m-archive-hero > .m-container { position: relative; z-index: 1; }
.m-archive-hero__crumb {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 20px;
font-family: var(--m-font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--m-text-3);
}
.m-archive-hero__crumb a {
color: var(--m-text-3);
transition: color var(--m-transition);
}
.m-archive-hero__crumb a:hover { color: var(--m-red); }
.m-archive-hero__crumb span[aria-hidden="true"] { color: var(--m-line-2); }
.m-archive-hero__crumb > span:last-child { color: var(--m-text); }
.m-archive-hero__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(28px, 4vw, 64px);
align-items: end;
}
.m-archive-hero__title {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(40px, 6.5vw, 88px);
line-height: 1.0;
letter-spacing: -0.028em;
color: var(--m-text);
margin: 8px 0 18px;
font-variation-settings: "opsz" 144;
}
.m-archive-hero__title em {
font-style: italic;
font-weight: 400;
color: var(--m-gold);
}
.m-archive-hero__lead {
max-width: 56ch;
font-family: var(--m-font-sans);
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.55;
color: var(--m-text-2);
margin: 0;
}
.m-archive-hero__count {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 18px 24px;
border-left: 1px solid var(--m-line-2);
text-align: right;
flex-shrink: 0;
}
.m-archive-hero__count em {
font-family: var(--m-font-serif);
font-style: normal;
font-weight: 500;
font-size: clamp(40px, 4.6vw, 64px);
letter-spacing: -0.028em;
color: var(--m-text);
line-height: 1;
font-variation-settings: "opsz" 144;
}
.m-archive-hero__count span {
font-family: var(--m-font-sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--m-text-3);
margin-top: 8px;
}
/* Filter chips */
.m-archive-chips {
list-style: none;
margin: clamp(28px, 3vw, 40px) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.m-archive-chips li { margin: 0; }
.m-archive-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid var(--m-line-2);
border-radius: 999px;
background: var(--m-bg);
color: var(--m-text-2);
font-family: var(--m-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
text-decoration: none;
}
.m-archive-chip em {
font-family: var(--m-font-mono);
font-style: normal;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0;
color: var(--m-text-3);
padding: 2px 7px;
border-radius: 8px;
background: var(--m-surface);
border: 1px solid var(--m-line);
}
.m-archive-chip:hover {
color: var(--m-text);
border-color: var(--m-text);
transform: translateY(-1px);
}
.m-archive-chip.is-active {
background: var(--m-text);
color: var(--m-bg);
border-color: var(--m-text);
}
.m-archive-chip.is-active em {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.18);
color: var(--m-bg);
}
/* Roster grid — uses .m-pcard from the homepage stars slider */
.m-roster {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: clamp(16px, 1.6vw, 24px);
}
.m-roster .m-pcard { width: auto; max-width: none; }
/* Pagination */
.m-archive-pagination {
margin-top: clamp(32px, 4vw, 56px);
padding-top: clamp(24px, 3vw, 36px);
border-top: 1px solid var(--m-line);
display: flex;
justify-content: center;
}
.m-archive-pagination .nav-links {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--m-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
}
.m-archive-pagination .page-numbers {
display: inline-grid;
place-items: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border: 1px solid var(--m-line);
border-radius: 999px;
color: var(--m-text-2);
background: var(--m-bg);
transition: color 220ms ease, background 220ms ease, border-color 220ms ease;
text-decoration: none;
}
.m-archive-pagination .page-numbers:hover {
color: var(--m-text);
border-color: var(--m-text);
}
.m-archive-pagination .page-numbers.current {
background: var(--m-text);
color: var(--m-bg);
border-color: var(--m-text);
}
.m-archive-pagination .page-numbers.dots {
border: 0;
background: transparent;
color: var(--m-text-3);
}
/* Empty state */
.m-empty {
padding: 60px 24px;
text-align: center;
font-family: var(--m-font-serif);
font-size: 22px;
color: var(--m-text-3);
}
/* Hero title trailing dot — small editorial flourish */
.m-archive-hero__title-dot {
color: var(--m-red);
font-style: normal;
}
/* Featured lead — re-use the homepage mosaic lead pattern with margin */
.m-mlead--archive {
margin-bottom: clamp(28px, 3vw, 48px);
}
/* Archive editorial grid (post cards) */
.m-archive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: clamp(20px, 2vw, 32px);
}
/* Editorial archive card */
.m-acard {
display: flex;
flex-direction: column;
background: var(--m-bg);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--m-text);
transition: transform 360ms var(--m-easing), box-shadow var(--m-transition), border-color var(--m-transition);
isolation: isolate;
height: 100%;
}
.m-acard:hover {
transform: translateY(-4px);
box-shadow: var(--m-shadow-3);
border-color: var(--m-line-2);
}
.m-acard__media {
position: relative;
display: block;
aspect-ratio: 16/10;
overflow: hidden;
background: var(--m-surface);
}
.m-acard__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 600ms var(--m-easing);
}
.m-acard:hover .m-acard__media img { transform: scale(1.04); }
.m-acard__body {
padding: 22px 22px 24px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
}
.m-acard__chip {
align-self: flex-start;
font-family: var(--m-font-sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--m-red);
}
.m-acard__title {
margin: 0;
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(19px, 1.6vw, 22px);
line-height: 1.18;
letter-spacing: -0.018em;
color: var(--m-text);
font-variation-settings: "opsz" 32;
}
.m-acard__dek {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: var(--m-text-2);
}
.m-acard__meta {
margin-top: auto;
padding-top: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--m-font-sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: .04em;
color: var(--m-text-3);
}
.m-acard__meta .m-mono { color: var(--m-text-2); font-weight: 600; }
.m-acard__meta span[aria-hidden="true"] { color: var(--m-line-2); }
/* Category-specific hero accents */
.m-archive-hero--football::before {
background: radial-gradient(60% 40% at 30% 30%, rgba(30,64,175,.12) 0%, transparent 70%);
}
.m-archive-hero--cricket::before {
background: radial-gradient(60% 40% at 30% 30%, rgba(22,101,52,.12) 0%, transparent 70%);
}
.m-archive-hero--search::before {
background: radial-gradient(60% 40% at 30% 30%, rgba(184,132,44,.12) 0%, transparent 70%);
}
.m-archive-hero--leagues::before {
background: radial-gradient(60% 40% at 30% 30%, rgba(20,30,80,.10) 0%, transparent 70%);
}
.m-archive-hero--author::before {
background: radial-gradient(60% 40% at 30% 30%, rgba(184,132,44,.10) 0%, transparent 70%);
}
/* Author hero — avatar + name + lead + count */
.m-author-hero {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: clamp(20px, 2.4vw, 32px);
align-items: center;
}
.m-author-hero__avatar {
width: 120px;
height: 120px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--m-bg);
border: 1px solid var(--m-line-2);
box-shadow: 0 14px 30px -16px rgba(21,22,26,.25);
display: grid;
place-items: center;
}
.m-author-hero__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.m-author-hero__body { min-width: 0; }
.m-author-hero__body .m-archive-hero__title {
margin: 8px 0 14px;
}
@media (max-width: 720px) {
body.is-modern .m-author-hero {
grid-template-columns: 1fr;
gap: 18px;
align-items: start;
}
body.is-modern .m-author-hero__avatar {
width: 96px;
height: 96px;
}
body.is-modern .m-archive-hero--author .m-archive-hero__count {
align-items: flex-start;
text-align: left;
border-left: 0;
border-top: 1px solid var(--m-line);
padding: 14px 0 0;
}
}
/* ============================================================
16b. LEAGUES GRID (premium colored tile cards)
============================================================ */
.m-leagues-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: clamp(16px, 1.8vw, 22px);
}
.m-lgcard {
position: relative;
display: flex;
flex-direction: column;
background: var(--m-bg);
border: 1px solid var(--m-line);
border-radius: var(--m-radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--m-text);
isolation: isolate;
transition: transform 360ms var(--m-easing), box-shadow 240ms ease, border-color 240ms ease;
}
.m-lgcard:hover {
transform: translateY(-4px);
box-shadow: var(--m-shadow-3);
border-color: var(--m-line-2);
}
.m-lgcard__head {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16/8;
background:
radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 60%),
var(--m-lgcard-color, var(--m-red));
overflow: hidden;
}
.m-lgcard__head::after {
/* Soft conic flourish — pure decoration */
content: "";
position: absolute;
inset: -40% -30% auto auto;
width: 160%;
height: 240%;
background: conic-gradient(from 200deg, rgba(255,255,255,.14), transparent 35%, transparent 65%, rgba(255,255,255,.05) 80%);
opacity: .8;
pointer-events: none;
}
.m-lgcard__crest {
position: relative;
z-index: 2;
width: 88px;
height: 88px;
background: rgba(255,255,255,.96);
border-radius: 18px;
display: grid;
place-items: center;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 14px 28px -14px rgba(0,0,0,.45);
padding: 8px;
transition: transform 360ms var(--m-easing);
}
.m-lgcard:hover .m-lgcard__crest { transform: scale(1.04) rotate(-1.5deg); }
.m-lgcard__crest img { width: 100%; height: 100%; object-fit: contain; display: block; }
.m-lgcard__crest-fallback {
font-family: var(--m-font-serif);
font-weight: 600;
letter-spacing: -0.02em;
font-size: 26px;
color: var(--m-lgcard-color, var(--m-red));
}
.m-lgcard__body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 22px 24px;
flex: 1 1 auto;
}
.m-lgcard__name {
margin: 0;
font-family: var(--m-font-serif);
font-weight: 500;
font-size: clamp(20px, 1.8vw, 24px);
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--m-text);
font-variation-settings: "opsz" 32;
}
.m-lgcard__country {
font-family: var(--m-font-sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--m-text-3);
margin-top: -4px;
}
.m-lgcard__facts {
list-style: none;
margin: 4px 0 0;
padding: 12px 0 0;
display: flex;
gap: 28px;
border-top: 1px solid var(--m-line);
}
.m-lgcard__facts li {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
}
.m-lgcard__facts li::before,
.m-lgcard__facts li::marker { content: none; display: none; }
.m-lgcard__facts strong {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 20px;
letter-spacing: -0.018em;
line-height: 1;
color: var(--m-text);
}
.m-lgcard__facts span {
font-family: var(--m-font-sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--m-text-3);
}
.m-lgcard__champion {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
background: var(--m-surface);
border-radius: var(--m-radius-sm);
border-left: 3px solid var(--m-lgcard-color, var(--m-gold));
}
.m-lgcard__champion-eyebrow {
font-family: var(--m-font-sans);
font-size: 9.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--m-text-3);
}
.m-lgcard__champion strong {
font-family: var(--m-font-serif);
font-weight: 500;
font-size: 15px;
color: var(--m-text);
letter-spacing: -0.012em;
}
.m-lgcard__bcast {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--m-font-sans);
font-size: 12px;
color: var(--m-text-2);
}
.m-lgcard__bcast svg { color: var(--m-text-3); flex-shrink: 0; }
.m-lgcard__cta {
margin-top: auto;
padding-top: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--m-font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--m-text);
transition: color 220ms ease;
}
.m-lgcard__cta-arrow {
display: inline-block;
transition: transform 320ms var(--m-easing);
}
.m-lgcard:hover .m-lgcard__cta { color: var(--m-lgcard-color, var(--m-red)); }
.m-lgcard:hover .m-lgcard__cta-arrow { transform: translateX(4px); }
@media (max-width: 720px) {
body.is-modern .m-leagues-grid { grid-template-columns: 1fr; gap: 14px; }
body.is-modern .m-lgcard__head { aspect-ratio: 16/9; }
body.is-modern .m-lgcard__crest { width: 72px; height: 72px; }
body.is-modern .m-lgcard__body { padding: 18px 18px 20px; gap: 8px; }
}
/* Cream inline search form (search hero + 404) */
.m-search {
display: flex;
align-items: stretch;
gap: 0;
margin: clamp(20px, 2.4vw, 28px) 0 0;
background: var(--m-bg);
border: 1px solid var(--m-line);
border-radius: 999px;
padding: 6px 6px 6px 18px;
transition: border-color 220ms ease, box-shadow 220ms ease;
}
.m-search:focus-within {
border-color: var(--m-text);
box-shadow: 0 0 0 4px rgba(26,26,29,.06);
}
.m-search__icon {
display: grid;
place-items: center;
width: 28px;
color: var(--m-text-3);
flex-shrink: 0;
}
.m-search:focus-within .m-search__icon { color: var(--m-text); }
.m-search__input,
body.is-modern .m-search input[type="search"] {
flex: 1 !important;
min-width: 0 !important;
width: auto !important;
border: 0 !important;
background: transparent !important;
padding: 12px 14px !important;
font-family: var(--m-font-serif) !important;
font-size: clamp(18px, 1.8vw, 22px) !important;
font-weight: 400 !important;
letter-spacing: -0.012em !important;
color: var(--m-text) !important;
outline: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.m-search__input::placeholder {
color: var(--m-text-3);
font-style: italic;
opacity: 1;
}
.m-search__submit {
flex-shrink: 0;
background: var(--m-text);
color: var(--m-bg);
border: 0;
border-radius: 999px;
padding: 12px 26px;
font-family: var(--m-font-sans);
font-weight: 700;
font-size: 12.5px;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.m-search__submit:hover {
background: var(--m-gold);
color: var(--m-deep);
transform: translateY(-1px);
}
@media (max-width: 720px) {
.m-search { padding: 4px 4px 4px 14px; }
.m-search__input { padding: 10px 10px; font-size: 17px; }
.m-search__submit { padding: 10px 18px; font-size: 11px; }
}
/* Archive responsive */
@media (max-width: 720px) {
body.is-modern .m-archive-hero {
padding-block: 28px 22px;
}
body.is-modern .m-archive-hero__row {
grid-template-columns: 1fr;
gap: 18px;
}
body.is-modern .m-archive-hero__title {
font-size: clamp(34px, 9vw, 52px);
}
body.is-modern .m-archive-hero__lead { font-size: 14.5px; }
body.is-modern .m-archive-hero__count {
align-items: flex-start;
text-align: left;
border-left: 0;
border-top: 1px solid var(--m-line);
padding: 14px 0 0;
}
body.is-modern .m-archive-hero__count em { font-size: 36px; }
body.is-modern .m-archive-chips {
margin-top: 22px;
flex-wrap: nowrap;
overflow-x: auto;
padding-block: 4px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
margin-inline: -16px;
padding-inline: 16px;
}
body.is-modern .m-archive-chips::-webkit-scrollbar { display: none; }
body.is-modern .m-archive-chip {
flex-shrink: 0;
scroll-snap-align: start;
padding: 9px 14px;
font-size: 11px;
}
body.is-modern .m-roster {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
body.is-modern .m-archive-grid {
grid-template-columns: 1fr;
gap: 16px;
}
body.is-modern .m-acard__body {
padding: 18px 18px 20px;
gap: 8px;
}
body.is-modern .m-acard__title { font-size: 18px; }
body.is-modern .m-acard__dek { font-size: 13.5px; }
body.is-modern .m-mlead--archive { margin-bottom: 24px; }
}
@media (max-width: 480px) {
body.is-modern .m-roster { grid-template-columns: 1fr; }
}
/* ---- Small phone (<= 480px) ---- */
@media (max-width: 480px) {
body.is-modern .m-container { padding-inline: 14px; }
body.is-modern .m-hero__title { font-size: clamp(26px, 9vw, 34px); }
body.is-modern .m-hero__dek { font-size: 14px; }
body.is-modern .m-hero__rail { margin-top: -20px; }
body.is-modern .m-section-head__title { font-size: clamp(22px, 7.5vw, 30px); }
body.is-modern .m-leagues { grid-template-columns: 1fr 1fr !important; }
body.is-modern .m-finale__tiles { grid-template-columns: 1fr !important; }
body.is-modern .gsbd-footer__cols { grid-template-columns: 1fr 1fr !important; }
/* Tops section heading */
body.is-modern .gsbd-tops__head {
text-align: center !important;
flex-direction: column !important;
align-items: center !important;
gap: 8px !important;
}
body.is-modern .gsbd-tops__head-block {
text-align: center !important;
max-width: 100% !important;
margin-inline: auto !important;
}
body.is-modern .gsbd-tops__head-block .m-eyebrow,
body.is-modern .gsbd-tops__head-block .m-eyebrow--gold {
display: inline-flex !important;
justify-content: center !important;
margin-inline: auto !important;
}
body.is-modern .gsbd-tops__title { text-align: center !important; }
body.is-modern .gsbd-tops__row {
grid-template-columns: 1fr !important;
grid-template-areas:
"rank"
"brand"
"rating"
"bonus"
"actions" !important;
gap: 12px !important;
padding: 22px 18px 20px !important;
text-align: center !important;
position: relative;
}
body.is-modern .gsbd-tops__rank {
grid-area: rank !important;
margin: 0 auto !important;
width: 36px !important;
height: 36px !important;
border-radius: 999px !important;
font-size: 13px !important;
}
body.is-modern .gsbd-tops__row--featured .gsbd-tops__rank {
background: linear-gradient(180deg, var(--m-gold) 0%, #b8842c 100%) !important;
color: #0a0a0c !important;
border-color: var(--m-gold) !important;
}
body.is-modern .gsbd-tops__row--featured .gsbd-tops__badge {
position: absolute;
top: 10px;
right: 12px;
margin: 0 !important;
font-size: 9px !important;
padding: 4px 9px !important;
letter-spacing: .14em !important;
}
body.is-modern .gsbd-tops__brand {
grid-area: brand !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 10px !important;
}
body.is-modern .gsbd-tops__rating {
grid-area: rating !important;
justify-content: center !important;
padding: 0 !important;
border: 0 !important;
}
body.is-modern .gsbd-tops__bonus {
grid-area: bonus !important;
justify-content: center !important;
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 12px !important;
padding: 10px 14px !important;
text-align: center;
}
body.is-modern .gsbd-tops__bonus-icon { flex-shrink: 0; opacity: .9; }
body.is-modern .gsbd-tops__bonus-text { text-align: center !important; }
body.is-modern .gsbd-tops__actions {
grid-area: actions !important;
flex-direction: row !important;
gap: 8px !important;
align-items: stretch !important;
}
body.is-modern .gsbd-tops__review,
body.is-modern .gsbd-tops__visit {
flex: 1 !important;
text-align: center !important;
justify-content: center !important;
padding: 11px 14px !important;
font-size: 11px !important;
letter-spacing: .14em !important;
}
}
/* ============================================================
19. UNIVERSAL MOBILE PASS — single source of truth.
Runs at <= 720px and <= 480px. Centers buttons & inline-flex
text inside cards. Ensures every section reflows to a clean
single-column flow with consistent padding.
============================================================ */
@media (max-width: 720px) {
/* ---- Centered button text/content ---- */
body.is-modern button,
body.is-modern .button,
body.is-modern a.m-hero__cta,
body.is-modern a.m-mlead__cta,
body.is-modern a.m-finale__cta,
body.is-modern a.m-pcard__cta,
body.is-modern a.m-watch__cta,
body.is-modern a.m-watch__cta-secondary,
body.is-modern a.m-acard__cta,
body.is-modern a.m-lgcard__cta,
body.is-modern a.gsbd-tops__visit,
body.is-modern a.gsbd-tops__review,
body.is-modern a.gsbd-tops__all,
body.is-modern a.gsbd-bet-spotlight__cta,
body.is-modern a.gsbd-bet-spotlight__review,
body.is-modern a.gsbd-bet-single-hero__btn,
body.is-modern a.gsbd-bet-single__cta-btn,
body.is-modern a.gsbd-bet-compare__cta,
body.is-modern .gsbd-search__submit,
body.is-modern .m-search__submit,
body.is-modern a.m-mside__cta,
body.is-modern a.m-stars-slider__more-link,
body.is-modern a.m-section-head__more,
body.is-modern a.m-livepanel__more,
body.is-modern a.m-twin__more,
body.is-modern a.m-strip__more,
body.is-modern a.gsbd-strip__more,
body.is-modern .form-submit input[type="submit"],
body.is-modern .submit,
body.is-modern .gsbd-comment-form button[type="submit"] {
text-align: center !important;
justify-content: center !important;
align-items: center !important;
}
/* ---- Any explicit CTA pill stretches to full width on phone ---- */
body.is-modern .m-hero__cta,
body.is-modern .m-finale__cta,
body.is-modern .m-mlead__cta,
body.is-modern .gsbd-bet-single-hero__btn,
body.is-modern .gsbd-bet-single__cta-btn,
body.is-modern .gsbd-bet-spotlight__cta,
body.is-modern .m-mside__cta {
width: 100%;
text-align: center;
justify-content: center !important;
display: inline-flex !important;
}
/* ---- Section heads stack with everything left-aligned ---- */
body.is-modern .m-section-head,
body.is-modern .gsbd-tops__head,
body.is-modern .m-livepanel__head,
body.is-modern .m-sched__head,
body.is-modern .gsbd-section__head,
body.is-modern .m-watch__head,
body.is-modern .m-watch__foot,
body.is-modern .gsbd-strip__head {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
}
body.is-modern .m-section-head__more,
body.is-modern .m-livepanel__more,
body.is-modern .gsbd-strip__more {
align-self: flex-start;
}
/* ---- Hero CTAs already center on mobile (covers any remaining ones) ---- */
body.is-modern .m-hero__main { text-align: left; }
body.is-modern .m-hero__byline {
flex-wrap: wrap;
gap: 8px 12px;
}
/* ---- Player / archive / acard CTA arrows centered ---- */
body.is-modern .m-pcard__cta,
body.is-modern .m-acard__cta,
body.is-modern .m-lgcard__cta,
body.is-modern .m-fdest__foot {
justify-content: center !important;
}
/* ---- All grids that should be single-col on phone ---- */
body.is-modern .m-twin,
body.is-modern .m-watch__ways,
body.is-modern .m-mcols,
body.is-modern .m-mfacts,
body.is-modern .m-mhero__sub-item--text {
display: block !important;
}
body.is-modern .m-twin > * + *,
body.is-modern .m-watch__ways > * + *,
body.is-modern .m-mcols > * + * {
margin-top: 14px;
}
/* ---- Match-page tabs: scrollable + centered active indicator ---- */
body.is-modern .m-mtabs__bar {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
body.is-modern .m-mtabs__bar::-webkit-scrollbar { display: none; }
body.is-modern .m-mtabs__bar [role="tab"] {
flex-shrink: 0;
text-align: center;
}
/* ---- Match panel layout: stack ---- */
body.is-modern .m-mpanel__layout {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
body.is-modern .m-mpanel__side { order: 2; }
/* ---- Single league: schedule day-pill counts smaller ---- */
body.is-modern .m-sched__pill em { font-size: 16px; }
body.is-modern .m-sched__pill { padding: 6px 10px; min-width: 56px; }
/* ---- Spotlight single betting: stack title+rating row ---- */
body.is-modern .gsbd-bet-spotlight__brand {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
body.is-modern .gsbd-bet-spotlight__cta-wrap {
align-items: stretch;
}
/* ---- Comparison table: scrolls horizontally already, center CTAs in cells ---- */
body.is-modern .gsbd-bet-compare__cta {
text-align: center;
}
/* ---- Form submit alignment ---- */
body.is-modern .form-submit { text-align: center !important; }
body.is-modern .form-submit input[type="submit"],
body.is-modern .submit { width: 100%; }
/* ---- Newsletter form (if any) — stack ---- */
body.is-modern .m-newsletter__form,
body.is-modern .gsbd-newsletter__form {
flex-direction: column !important;
align-items: stretch !important;
}
body.is-modern .m-newsletter__form button,
body.is-modern .gsbd-newsletter__form button { width: 100%; }
/* ---- Search form on hero — input + button stack neatly ---- */
body.is-modern .m-search { flex-wrap: wrap; padding: 8px; }
body.is-modern .m-search__icon { display: none; }
body.is-modern .m-search__input { flex-basis: 100%; padding: 10px 12px; }
body.is-modern .m-search__submit { width: 100%; padding: 12px; }
/* ---- Footer: brand + social centered ---- */
body.is-modern .gsbd-footer__brand {
text-align: center;
}
body.is-modern .gsbd-footer__social {
justify-content: center;
}
/* ---- Topbar: hide non-essentials already done; clock alignment ---- */
body.is-modern .gsbd-topbar__clock {
padding-right: 0;
border-right: 0;
}
/* ---- Mobile drawer nav: links centered ---- */
body.is-modern .gsbd-nav__list > li > a { text-align: left; padding: 16px 18px !important; }
/* ---- Stats blocks (any) ---- */
body.is-modern .m-page-hero__stats { padding: 12px 14px !important; }
/* ---- Pagination: centered ---- */
body.is-modern .m-archive-pagination { justify-content: center; }
body.is-modern .m-archive-pagination .nav-links { flex-wrap: wrap; justify-content: center; gap: 4px; }
}
/* ---- Small phones (<= 480px) — finer adjustments ---- */
@media (max-width: 480px) {
body.is-modern .m-mhero__board {
grid-template-columns: 1fr 1fr;
gap: 14px 10px;
}
body.is-modern .m-mhero__center {
grid-column: 1 / -1;
order: -1;
margin-bottom: 6px;
}
body.is-modern .m-mhero__team-name { font-size: 18px !important; }
body.is-modern .m-mhero__team-full { font-size: 9px; }
body.is-modern .gsbd-bet-jumpnav__inner a {
flex: 0 0 50%;
text-align: center;
justify-content: center;
}
}
/* ============================================================
20. BETTING SITES — full mobile centering pass (<= 720px)
Centers every section's text, content, and inline meta.
============================================================ */
@media (max-width: 720px) {
/* Hero */
body.is-modern .gsbd-bet-mega-hero__inner { text-align: center !important; }
body.is-modern .gsbd-bet-mega-hero__crumb { justify-content: center !important; }
body.is-modern .gsbd-bet-mega-hero__title { text-align: center !important; max-width: 100% !important; margin-inline: auto !important; }
body.is-modern .gsbd-bet-mega-hero__lead { text-align: center !important; margin-inline: auto !important; }
body.is-modern .gsbd-bet-mega-hero__stats { text-align: center !important; justify-items: center !important; }
body.is-modern .gsbd-bet-mega-hero__stats li {
align-items: center !important;
text-align: center !important;
padding-right: 0 !important;
}
/* Jump nav anchors */
body.is-modern .gsbd-bet-jumpnav__inner a { text-align: center !important; justify-content: center !important; }
/* Section heads */
body.is-modern .gsbd-section__head {
text-align: center !important;
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
}
body.is-modern .gsbd-section__num-box { margin: 0 auto !important; }
body.is-modern .gsbd-section__title-block { text-align: center !important; }
body.is-modern .gsbd-section__title { text-align: center !important; }
body.is-modern .gsbd-section__title em { display: inline; }
body.is-modern .gsbd-section__lead { text-align: center !important; margin-inline: auto !important; }
/* Spotlight #1 — center the brand block + summary + CTA */
body.is-modern .gsbd-bet-spotlight__brand {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
body.is-modern .gsbd-bet-spotlight__brand-meta { text-align: center; }
body.is-modern .gsbd-bet-spotlight__kicker,
body.is-modern .gsbd-bet-spotlight__name { text-align: center; }
body.is-modern .gsbd-bet-spotlight__rating { justify-content: center !important; }
body.is-modern .gsbd-bet-spotlight__summary { text-align: center !important; }
body.is-modern .gsbd-bet-spotlight__cta-wrap { align-items: center !important; }
body.is-modern .gsbd-bet-spotlight__features {
justify-content: center !important;
text-align: center;
}
body.is-modern .gsbd-bet-spotlight__features li { justify-content: center; }
body.is-modern .gsbd-bet-spotlight__strip-cell { align-items: center !important; text-align: center !important; }
body.is-modern .gsbd-bet-spotlight__strip-cell--wide .gsbd-bet-spotlight__payments { justify-content: center !important; }
body.is-modern .gsbd-bet-spotlight__payments::before { display: none !important; }
/* Operator ranking cards (02-10) — center each block */
body.is-modern .gsbd-bet-card__brand {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
body.is-modern .gsbd-bet-card__brand-meta { text-align: center; }
body.is-modern .gsbd-bet-card__name { text-align: center; }
body.is-modern .gsbd-bet-card__rating { justify-content: center !important; }
body.is-modern .gsbd-bet-card__summary { text-align: center !important; }
body.is-modern .gsbd-bet-card__bonus { align-items: center !important; text-align: center !important; }
body.is-modern .gsbd-bet-card__payments {
justify-content: center !important;
}
body.is-modern .gsbd-bet-card__payments::before { display: none !important; }
body.is-modern .gsbd-bet-card__cta,
body.is-modern a.gsbd-bet-card__visit,
body.is-modern a.gsbd-bet-card__review {
margin-inline: auto;
justify-content: center;
text-align: center;
}
/* Trust badges grid — already centered, ensure inner content centered */
body.is-modern .gsbd-bet-trust__head { text-align: center !important; }
body.is-modern .gsbd-bet-trust__kicker,
body.is-modern .gsbd-bet-trust__title { text-align: center !important; margin-inline: auto !important; }
body.is-modern .gsbd-bet-trust__item {
text-align: center !important;
align-items: center !important;
}
body.is-modern .gsbd-bet-trust__icon { margin: 0 auto 4px !important; }
body.is-modern .gsbd-bet-trust__value,
body.is-modern .gsbd-bet-trust__label,
body.is-modern .gsbd-bet-trust__desc { text-align: center !important; }
/* Methodology cards — center labels & weights */
body.is-modern .gsbd-bet-method__head { text-align: center !important; }
body.is-modern .gsbd-bet-method__kicker,
body.is-modern .gsbd-bet-method__title,
body.is-modern .gsbd-bet-method__lead { text-align: center !important; margin-inline: auto !important; }
body.is-modern .gsbd-bet-method__item {
text-align: center !important;
}
body.is-modern .gsbd-bet-method__item-head {
justify-content: center !important;
flex-wrap: wrap;
}
body.is-modern .gsbd-bet-method__item-desc { text-align: center !important; }
/* FAQ — center heading area, keep questions left-aligned for readability */
body.is-modern .gsbd-bet-faq__head { text-align: center !important; }
body.is-modern .gsbd-bet-faq__kicker,
body.is-modern .gsbd-bet-faq__title { text-align: center !important; margin-inline: auto !important; }
/* Compare-table heading */
body.is-modern .gsbd-bet-compare__title { text-align: center !important; }
/* Tops list "All betting sites" footer link */
body.is-modern .gsbd-tops__foot { justify-content: center !important; }
body.is-modern .gsbd-tops__all { margin-inline: auto !important; justify-content: center !important; }
}
@media (max-width: 480px) {
/* All cards full width */
body.is-modern .m-stars-slider__slide { width: calc(100% - 32px) !important; }
body.is-modern .m-leagues,
body.is-modern .m-leagues-grid,
body.is-modern .m-roster,
body.is-modern .m-archive-grid {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
21. UNIVERSAL MOBILE CENTERING — applies the betting-pages
centering pattern to every other editorial section template.
Activates at <= 720px.
============================================================ */
@media (max-width: 720px) {
/* ---- Archive hero (Football, Cricket, Players, Leagues, Search, Tag, Author, etc.) ---- */
body.is-modern .m-archive-hero .m-container { text-align: center; }
body.is-modern .m-archive-hero__crumb { justify-content: center !important; }
body.is-modern .m-archive-hero__title { text-align: center !important; max-width: 100% !important; }
body.is-modern .m-archive-hero__lead { text-align: center !important; margin-inline: auto !important; }
body.is-modern .m-archive-hero__row { text-align: center; align-items: center; }
body.is-modern .m-archive-hero__count {
align-items: center !important;
text-align: center !important;
border-left: 0 !important;
border-top: 1px solid var(--m-line) !important;
padding: 14px 0 0 !important;
margin-inline: auto !important;
}
body.is-modern .m-archive-chips { justify-content: safe center !important; }
body.is-modern .m-eyebrow,
body.is-modern .m-archive-hero .m-eyebrow {
display: inline-flex;
justify-content: center;
}
/* ---- Author hero (avatar centered above name) ---- */
body.is-modern .m-author-hero {
text-align: center !important;
justify-items: center !important;
}
body.is-modern .m-author-hero__avatar { margin-inline: auto !important; }
body.is-modern .m-author-hero__body { text-align: center !important; }
body.is-modern .m-author-hero__body .m-eyebrow { margin-inline: auto !important; }
/* ---- Section head (homepage editorial sections — Mosaic, Twin, Stars, Leagues, Finale) ---- */
body.is-modern .m-section-head { text-align: center !important; align-items: center !important; }
body.is-modern .m-section-head__block { text-align: center !important; max-width: 100% !important; }
body.is-modern .m-section-head__title { text-align: center !important; }
body.is-modern .m-section-head__more { align-self: center !important; margin-inline: auto !important; }
body.is-modern .m-section-head .m-eyebrow { margin-inline: auto !important; justify-content: center; }
/* ---- Mosaic lead (homepage "Today, in play.") ---- */
body.is-modern .m-mlead__panel { text-align: center !important; align-items: center !important; }
body.is-modern .m-mlead__panel * { text-align: center !important; }
body.is-modern .m-mlead__byline { justify-content: center !important; flex-wrap: wrap; }
body.is-modern .m-mlead__cta { margin-inline: auto !important; }
/* ---- Mosaic columns (Editor's Note + side stories) ---- */
body.is-modern .m-mcol__body { text-align: center !important; align-items: center; }
body.is-modern .m-mcol__chip { margin-inline: auto !important; }
body.is-modern .m-mcol__byline { justify-content: center !important; flex-wrap: wrap; }
body.is-modern .m-mnote { text-align: center !important; }
/* ---- Twin sport columns ---- */
body.is-modern .m-twin__head { text-align: center !important; flex-direction: column !important; gap: 6px !important; align-items: center !important; }
body.is-modern .m-twin__list-meta { justify-content: center !important; }
/* ---- Schedule (homepage + league fixtures) ---- */
body.is-modern .m-sched__head { text-align: center !important; align-items: center !important; }
body.is-modern .m-sched__title { text-align: center !important; }
body.is-modern .m-sched__count { margin-inline: auto !important; }
body.is-modern .m-sched__panel-head { justify-content: center !important; text-align: center !important; }
body.is-modern .m-sched__more-link { display: block !important; text-align: center !important; }
body.is-modern .m-sched__pill { text-align: center !important; }
/* ---- Watch promo ("Three ways to watch") ---- */
body.is-modern .m-watch__head,
body.is-modern .m-watch__eyebrow-row { text-align: center !important; justify-content: center !important; align-items: center !important; }
body.is-modern .m-watch__title { text-align: center !important; }
body.is-modern .m-watch__lead { text-align: center !important; margin-inline: auto !important; }
body.is-modern .m-way { text-align: center !important; }
body.is-modern .m-way__list li { justify-content: center !important; }
body.is-modern .m-way__cost { align-items: center !important; }
/* ---- Player cards & roster ---- */
body.is-modern .m-pcard__body { text-align: center !important; align-items: center !important; }
body.is-modern .m-pcard__kicker,
body.is-modern .m-pcard__name { text-align: center !important; }
body.is-modern .m-pcard__stats { justify-content: center !important; }
body.is-modern .m-pcard__stats li { align-items: center !important; }
body.is-modern .m-pcard__cta { justify-content: center !important; }
/* ---- Archive editorial cards (post grid in categories, search, author, related) ---- */
body.is-modern .m-acard__body { text-align: center !important; align-items: center !important; }
body.is-modern .m-acard__chip,
body.is-modern .m-acard__title,
body.is-modern .m-acard__dek { text-align: center !important; }
body.is-modern .m-acard__chip { margin-inline: auto !important; }
body.is-modern .m-acard__meta { justify-content: center !important; }
/* ---- League cards (archive) ---- */
body.is-modern .m-lgcard__body { text-align: center !important; align-items: center !important; }
body.is-modern .m-lgcard__name,
body.is-modern .m-lgcard__country,
body.is-modern .m-lgcard__bcast { text-align: center !important; justify-content: center !important; }
body.is-modern .m-lgcard__facts { justify-content: center !important; border-top-style: solid; }
body.is-modern .m-lgcard__facts li { align-items: center; text-align: center; }
body.is-modern .m-lgcard__champion { text-align: center !important; align-items: center !important; border-left: 0 !important; border-top: 3px solid var(--m-lgcard-color, var(--m-gold)) !important; padding-top: 14px !important; }
body.is-modern .m-lgcard__cta { justify-content: center !important; align-self: center !important; }
/* ---- Finale ("Don't miss kick-off.") ---- */
body.is-modern .m-finale { text-align: center !important; }
body.is-modern .m-finale__title,
body.is-modern .m-finale__lead { text-align: center !important; margin-inline: auto !important; }
body.is-modern .m-fdest__name,
body.is-modern .m-fdest__desc { text-align: center !important; }
body.is-modern .m-fdest__foot { justify-content: space-between !important; }
/* ---- Page hero (single league, single match, archive page-hero variants) ---- */
body.is-modern .m-page-hero { text-align: center; }
body.is-modern .m-page-hero__crumb { justify-content: center !important; flex-wrap: wrap; }
body.is-modern .m-page-hero__title { text-align: center !important; margin-inline: auto !important; }
body.is-modern .m-page-hero__lead { text-align: center !important; margin-inline: auto !important; }
body.is-modern .m-league-hero { text-align: center; justify-items: center !important; }
body.is-modern .m-league-hero__main { text-align: center; }
body.is-modern .m-league-hero__chips,
body.is-modern .m-league-hero__champion { justify-content: center !important; align-self: center; margin-inline: auto !important; }
body.is-modern .m-league-hero__crest { margin-inline: auto !important; }
body.is-modern .m-page-hero--league .m-page-hero__stats { justify-content: center !important; }
body.is-modern .m-page-hero--league .m-page-hero__stats li {
align-items: center !important;
text-align: center !important;
}
/* ---- Match centre hero ---- */
body.is-modern .m-mhero { text-align: center; }
body.is-modern .m-mhero__crumb { justify-content: center !important; flex-wrap: wrap; }
body.is-modern .m-mhero__chips { justify-content: center !important; }
body.is-modern .m-mhero__sub { justify-content: center !important; }
body.is-modern .m-mhero__sub-item { align-items: center !important; text-align: center !important; }
body.is-modern .m-mhero__sub strong { text-align: center !important; }
body.is-modern .m-mhero__sub-item span { text-align: center !important; }
body.is-modern .m-mhero__center { align-items: center !important; }
/* ---- Match-page tabs centered ---- */
body.is-modern .m-mtabs__bar { justify-content: center !important; }
body.is-modern .m-mtabs__bar [role="tab"] { text-align: center; }
/* ---- Match panel headings ---- */
body.is-modern .m-mpanel__h { text-align: center !important; }
body.is-modern .m-mpanel__main { text-align: center !important; }
body.is-modern .m-mpanel__main p { text-align: center !important; }
/* ---- Sidebar (League facts) ---- */
body.is-modern .m-mside { text-align: center !important; }
body.is-modern .m-mside h3,
body.is-modern .m-mside__title { text-align: center !important; }
body.is-modern .m-mside__list > div { justify-content: center !important; flex-direction: column; gap: 2px; align-items: center; }
body.is-modern .m-mside__list dt,
body.is-modern .m-mside__list dd { text-align: center !important; }
/* ---- Tops (Top Betting Sites footer block on every page) ---- */
body.is-modern .gsbd-tops__brand { flex-direction: column !important; align-items: center !important; text-align: center !important; }
body.is-modern .gsbd-tops__name { text-align: center !important; }
body.is-modern .gsbd-tops__rating { justify-content: center !important; }
body.is-modern .gsbd-tops__bonus { justify-content: center !important; }
body.is-modern .gsbd-tops__bonus-text { text-align: center !important; }
body.is-modern .gsbd-tops__actions { align-items: center !important; }
/* ---- Single article page hero & body ---- */
body.is-modern .m-hero--single .m-hero__main { text-align: center !important; }
body.is-modern .m-hero--single .m-hero__crumb { justify-content: center !important; flex-wrap: wrap; }
body.is-modern .m-hero--single .m-hero__kicker { display: inline-flex; justify-content: center; margin-inline: auto; }
body.is-modern .m-hero--single .m-hero__title { text-align: center !important; max-width: 100% !important; margin-inline: auto !important; }
body.is-modern .m-hero--single .m-hero__dek { text-align: center !important; margin-inline: auto !important; }
body.is-modern .m-hero--single .m-hero__byline { justify-content: center !important; flex-wrap: wrap; }
body.is-modern .m-hero--single .m-hero__cta { margin-inline: auto !important; align-self: center !important; }
body.is-modern .m-hero--single .m-hero__sidekicker { align-items: center !important; text-align: center; }
body.is-modern .m-hero__main { text-align: center; }
body.is-modern .m-hero__main .m-hero__kicker { justify-content: center; }
/* Article body — keep paragraphs left-aligned for readability,
but center the tags + author block + footer */
body.is-modern .gsbd-tags { justify-content: center !important; }
body.is-modern .gsbd-author-bio {
flex-direction: column !important;
text-align: center !important;
align-items: center !important;
}
body.is-modern .gsbd-author-bio__avatar { margin-inline: auto !important; }
body.is-modern .gsbd-author-bio__body { text-align: center !important; }
body.is-modern .gsbd-author-bio__name,
body.is-modern .gsbd-author-bio__desc { text-align: center !important; }
body.is-modern .gsbd-author-bio__links {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin-top: 12px !important;
}
body.is-modern .gsbd-author-bio__links a {
margin-inline: auto !important;
display: inline-flex !important;
justify-content: center !important;
}
/* ---- Single betting hero (already covered, ensure additional) ---- */
body.is-modern .gsbd-bet-single-hero__row { justify-items: center !important; }
body.is-modern .gsbd-bet-single-hero__brand { justify-content: center !important; align-items: center !important; text-align: center !important; }
body.is-modern .gsbd-bet-single-hero__brand-meta { text-align: center; }
body.is-modern .gsbd-bet-single-hero__rating { justify-content: center !important; }
body.is-modern .gsbd-bet-single-hero__cta { text-align: center; }
body.is-modern .gsbd-bet-single__h2 { text-align: center !important; }
body.is-modern .gsbd-bet-single__h2::before { margin-inline: auto !important; }
body.is-modern .gsbd-bet-single__facts-grid > div {
text-align: center !important;
align-items: center !important;
}
body.is-modern .gsbd-bet-single__pros,
body.is-modern .gsbd-bet-single__cons { text-align: center !important; }
body.is-modern .gsbd-bet-single__pros h3,
body.is-modern .gsbd-bet-single__cons h3 { text-align: center !important; }
body.is-modern .gsbd-bet-single__chips { text-align: center !important; }
body.is-modern .gsbd-bet-single__chips ul { justify-content: center !important; }
/* ---- Pagination (search, archive, single) ---- */
body.is-modern .m-archive-pagination,
body.is-modern .m-archive-pagination .nav-links,
body.is-modern .gsbd-pagelinks {
justify-content: center !important;
text-align: center !important;
}
/* ---- Footer columns: keep at 2-col but center each column header & links ---- */
body.is-modern .gsbd-footer__cols > div { text-align: center !important; }
body.is-modern .gsbd-footer__cols > div::before { left: 50% !important; transform: translateX(-50%); }
body.is-modern .gsbd-footer__cols a { justify-content: center !important; }
body.is-modern .gsbd-footer__bar-inner { text-align: center !important; }
/* ---- Homepage hero rail cards (.m-hcard) ---- */
body.is-modern .m-hcard { text-align: center !important; align-items: center !important; }
body.is-modern .m-hcard__chip { margin-inline: auto !important; }
body.is-modern .m-hcard__title { text-align: center !important; }
body.is-modern .m-hcard__meta { justify-content: center !important; }
/* ---- Live panel match-cards (homepage marquee + category strip) ---- */
body.is-modern .m-fcard { text-align: center; }
body.is-modern .m-fcard__top { justify-content: space-between; }
/* ---- Top-Site footer link "All Betting Sites" ---- */
body.is-modern .gsbd-tops__foot { justify-content: center !important; }
body.is-modern .gsbd-tops__all { margin-inline: auto !important; }
/* ---- Search results meta + comments form labels stay centered ---- */
body.is-modern .gsbd-search-panel__head { justify-content: center !important; }
body.is-modern .gsbd-search-panel__suggest { justify-content: center !important; }
body.is-modern .gsbd-search-panel__hint { text-align: center !important; }
/* ---- Comments form: center labels above each input ---- */
body.is-modern .comment-form label { text-align: center !important; }
body.is-modern .comment-form-cookies-consent { justify-content: center !important; }
/* ---- Newsletter signup if present ---- */
body.is-modern .m-newsletter,
body.is-modern .gsbd-newsletter { text-align: center !important; }
/* ---- Watch promo number labels centered ---- */
body.is-modern .m-way__num,
body.is-modern .m-fdest__num,
body.is-modern .m-pcard__num,
body.is-modern .m-mlead__stamp { text-align: center !important; }
/* ---- Homepage league chip cards ---- */
body.is-modern .m-lcard { text-align: center !important; align-items: center !important; }
body.is-modern .m-lcard__name,
body.is-modern .m-lcard__meta { text-align: center !important; }
body.is-modern .m-lcard__badge { margin-inline: auto !important; }
/* ---- Watch trust line + cost row + list items centered ---- */
body.is-modern .m-watch__foot-trust { text-align: center !important; justify-content: center !important; }
body.is-modern .m-way__cost { justify-content: center !important; flex-wrap: wrap; gap: 4px 8px; text-align: center; }
body.is-modern .m-way__list li { justify-content: center !important; flex-wrap: wrap; gap: 4px 12px; }
/* ---- Twin spotlight title overlaying photo ---- */
body.is-modern .m-twin__spotlight-body { text-align: center !important; }
body.is-modern .m-twin__spotlight-title { text-align: center !important; }
/* ---- Twin list rows: keep thumb left, but center text within text column ---- */
body.is-modern .m-twin__list a > span:last-child { text-align: center !important; align-items: center !important; }
body.is-modern .m-twin__list-title { text-align: center !important; }
body.is-modern .m-twin__list-meta { justify-content: center !important; }
/* ---- Comment form polish: center labels, inputs, submit ---- */
body.is-modern .comment-form,
body.is-modern .gsbd-comment-form { grid-template-columns: 1fr !important; }
body.is-modern .comment-form > p,
body.is-modern .gsbd-comment-form > p {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100%;
}
body.is-modern .comment-form label,
body.is-modern .gsbd-comment-form label {
display: block !important;
text-align: center !important;
width: 100% !important;
margin: 0 0 6px !important;
}
body.is-modern .comment-form input,
body.is-modern .comment-form textarea,
body.is-modern .gsbd-comment-form input,
body.is-modern .gsbd-comment-form textarea {
text-align: center !important;
}
body.is-modern .comment-form input::placeholder,
body.is-modern .comment-form textarea::placeholder,
body.is-modern .gsbd-comment-form input::placeholder,
body.is-modern .gsbd-comment-form textarea::placeholder {
text-align: center !important;
}
body.is-modern .comment-form-cookies-consent {
justify-content: center !important;
text-align: center;
}
body.is-modern .form-submit {
text-align: center !important;
display: flex !important;
justify-content: center !important;
}
body.is-modern .form-submit input[type="submit"],
body.is-modern .submit,
body.is-modern .gsbd-comment-form button[type="submit"] {
width: 100% !important;
text-align: center !important;
justify-content: center !important;
display: inline-flex !important;
}
/* ---- Comment heading area centered with eyebrow + bottom rule ---- */
body.is-modern .comments-area > *,
body.is-modern .comment-respond > *:first-child {
text-align: center !important;
}
body.is-modern .comment-notes {
text-align: center !important;
margin-inline: auto !important;
}
/* ---- Football fixtures strip section heading (single post + category) ---- */
body.is-modern .gsbd-strip__head {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 12px !important;
padding-block: 8px !important;
margin-bottom: 16px !important;
position: relative;
}
body.is-modern .gsbd-strip__title {
font-family: var(--m-font-serif) !important;
text-align: center !important;
padding: 0 0 12px !important;
margin: 0 !important;
font-size: clamp(20px, 2vw, 26px) !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: -0.018em !important;
color: var(--m-text) !important;
position: relative;
line-height: 1.15;
}
body.is-modern .gsbd-strip__title::before {
/* Convert the vertical red bar into a horizontal gold→red rule below the title */
content: "" !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
top: auto !important;
transform: translateX(-50%) !important;
width: 48px !important;
height: 2px !important;
background: linear-gradient(90deg, var(--m-gold) 0%, var(--m-red) 100%) !important;
border-radius: 2px !important;
}
body.is-modern .gsbd-strip__more {
align-self: center !important;
margin: 0 !important;
}
/* ---- Tags row & author bio paragraphs centered ---- */
body.is-modern .gsbd-article__foot { text-align: center !important; }
body.is-modern .gsbd-tags__label { text-align: center !important; width: 100%; }
body.is-modern .gsbd-tags { justify-content: center !important; }
}
/* ============================================================
22. COMMENTS FORM HEAD — premium editorial styling (all viewports)
============================================================ */
body.is-modern .gsbd-comments__form-head {
text-align: center !important;
padding: 8px 0 22px !important;
margin: 0 0 22px !important;
border-bottom: 1px solid var(--m-line);
position: relative;
}
body.is-modern .gsbd-comments__form-head::after {
content: "";
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 64px;
height: 2px;
background: linear-gradient(90deg, var(--m-gold) 0%, var(--m-red) 100%);
border-radius: 2px;
}
body.is-modern .gsbd-comments__icon {
display: inline-grid !important;
place-items: center;
width: 44px; height: 44px;
margin: 0 auto 12px !important;
background: linear-gradient(135deg, rgba(184,132,44,.16) 0%, rgba(184,132,44,.04) 100%);
border: 1px solid rgba(184,132,44,.22);
border-radius: 12px;
font-size: 22px;
line-height: 1;
}
body.is-modern .gsbd-comments__form-title {
font-family: var(--m-font-serif) !important;
font-weight: 500 !important;
font-size: clamp(22px, 2.6vw, 28px) !important;
letter-spacing: -0.018em !important;
color: var(--m-text) !important;
text-transform: none !important;
margin: 0 0 8px !important;
line-height: 1.15;
}
body.is-modern .gsbd-comments__form-lead {
font-family: var(--m-font-sans) !important;
font-size: 13.5px !important;
color: var(--m-text-3) !important;
line-height: 1.5 !important;
margin: 0 auto !important;
max-width: 32ch;
}
/* ============================================================
23. ARTICLE TABLE — mobile horizontal scroll wrapper
Wraps native elements inside the article body so they
scroll horizontally on phones instead of breaking the layout.
============================================================ */
body.is-modern .gsbd-article__content table,
body.is-modern .m-article__content table {
display: table;
}
@media (max-width: 720px) {
/* Wrap-style: make the table itself horizontally scrollable using overflow on a parent.
Since we don't control the markup, force display:block + overflow on the table itself. */
body.is-modern .gsbd-article__content,
body.is-modern .m-article__content {
max-width: 100%;
}
body.is-modern .gsbd-article__content table,
body.is-modern .m-article__content table {
display: block !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
font-size: 13px !important;
background: var(--m-bg) !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-radius-md) !important;
margin: 18px 0 !important;
scrollbar-width: thin;
}
body.is-modern .gsbd-article__content table thead,
body.is-modern .gsbd-article__content table tbody,
body.is-modern .m-article__content table thead,
body.is-modern .m-article__content table tbody {
display: table;
width: max-content;
min-width: 100%;
}
body.is-modern .gsbd-article__content table tr,
body.is-modern .m-article__content table tr {
display: table-row;
}
body.is-modern .gsbd-article__content table th,
body.is-modern .gsbd-article__content table td,
body.is-modern .m-article__content table th,
body.is-modern .m-article__content table td {
display: table-cell;
padding: 10px 14px !important;
font-size: 13px !important;
white-space: nowrap;
}
/* Optional scroll-hint shadow on right edge */
body.is-modern .gsbd-article__content table {
background-image:
linear-gradient(to right, var(--m-bg), var(--m-bg)),
linear-gradient(to right, var(--m-bg), var(--m-bg)),
linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0)),
linear-gradient(to left, rgba(0,0,0,.10), rgba(0,0,0,0));
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
background-attachment: local, local, scroll, scroll;
}
/* Comparison table inside betting archive — same horizontal scroll treatment */
body.is-modern .gsbd-bet-compare__wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
body.is-modern .gsbd-bet-compare__table {
min-width: 640px !important;
white-space: nowrap;
}
}