/* Sports Data — league page blocks. Mobile-first, modern cards, skeleton loaders. */ /* ===== Design tokens (light + dark) and keyboard focus-visibility now live in the shared assets/sdc-base.css, which SDC_Assets registers as a DEPENDENCY of this stylesheet (so it always loads first). league.css consumes the tokens via var(--sdc-*). Do not redefine :root here — edit sdc-base.css. (WS-2) ===== */ .sdc-lb{--sdc-line:#e5e7eb;--sdc-muted:#64748b;--sdc-brand:#2563eb;margin:18px 0;} .sdc-lb__card{background:#fff;border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-sm);overflow:hidden;} .sdc-lb__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--sdc-line);} .sdc-lb__title{margin:0;font-size:16px;font-weight:700;} .sdc-lb__body{padding:8px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;}/* WS-6: lets a wide standings table scroll instead of clipping inside the overflow-hidden card */ .sdc-lb__empty,.sdc-lb__error{padding:20px 16px;color:var(--sdc-muted);font-size:14px;text-align:center;} .sdc-lb__error{color:var(--sdc-danger);}/* WS-5: error = danger token; empty above stays neutral/muted */ .sdc-lb__retry{margin-left:8px;background:none;border:1px solid var(--sdc-line);border-radius:6px;padding:8px 12px;cursor:pointer;font-size:13px;}/* WS-7: hit area ~27px→~34px */ .sdc-lb__retry:hover{border-color:var(--sdc-brand);}/* WS-7 (B9): small token-based hover affordance */ /* Hero */ /* WS-4: generic compact section hero — gradient aligned to the family token; stays small (sm radius, tight padding). */ .sdc-hero{display:flex;align-items:center;gap:14px;padding:18px 16px;background:linear-gradient(120deg,var(--sdc-hero-grad-from),var(--sdc-hero-grad-to));color:#fff;border-radius:var(--sdc-radius-sm);} .sdc-hero img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:10px;padding:6px;flex:0 0 auto;} .sdc-hero__meta{min-width:0;} .sdc-hero__name{margin:0;font-size:22px;line-height:1.2;} .sdc-hero__sub{margin:4px 0 0;color:#cbd5e1;font-size:14px;} /* Tables / rows */ .sdc-tbl{width:100%;min-width:440px;border-collapse:collapse;font-size:14px;}/* WS-6: keep the 7 standings columns readable; the body scrolls below this width (no columns dropped) */ .sdc-tbl th,.sdc-tbl td{padding:9px 12px;border-bottom:1px solid var(--sdc-line);text-align:left;vertical-align:middle;} .sdc-tbl th{color:var(--sdc-muted);font-size:var(--sdc-fs-label);text-transform:uppercase;letter-spacing:.4px;}/* WS-8: shared table-TH language (reference) */ .sdc-tbl td.num,.sdc-tbl th.num{text-align:center;width:38px;} .sdc-team{display:flex;align-items:center;gap:8px;min-width:0;} .sdc-team img{width:22px;height:22px;object-fit:contain;flex:0 0 auto;} .sdc-team a{color:inherit;text-decoration:none;} .sdc-team a:hover{color:var(--sdc-link);}/* WS-7: link role (dark 3.62→7.36) */ /* Fixtures list */ .sdc-fx{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--sdc-line);font-size:14px;} .sdc-fx__side{display:flex;align-items:center;gap:8px;flex:1;min-width:0;} .sdc-fx__side.away{justify-content:flex-end;text-align:right;} .sdc-fx img{width:22px;height:22px;object-fit:contain;flex:0 0 auto;} /* Match Center discovery: whole-row anchor keeps the row layout; reset link chrome + clear focus/hover affordance. */ .sdc-fx--link,.sdc-h2h__meet--link{color:inherit;text-decoration:none;cursor:pointer;transition:background-color .12s ease;} .sdc-fx--link:hover,.sdc-fx--link:focus-visible,.sdc-h2h__meet--link:hover,.sdc-h2h__meet--link:focus-visible{background:var(--sdc-line-3);} .sdc-fx--link:focus-visible,.sdc-h2h__meet--link:focus-visible{outline:2px solid var(--sdc-brand);outline-offset:-2px;} .sdc-fx__score{font-weight:700;min-width:56px;text-align:center;} .sdc-fx__time{min-width:56px;text-align:center;color:var(--sdc-muted);font-size:12px;} .sdc-fx__live{color:var(--sdc-live);font-weight:700;} /* Teams grid */ .sdc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;} .sdc-grid__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--sdc-line);border-radius:10px;background:#fff;} .sdc-grid__item img{width:30px;height:30px;object-fit:contain;flex:0 0 auto;} .sdc-grid__item a{color:inherit;text-decoration:none;} /* Skeleton loader */ .sdc-lb__skeleton{padding:16px;} .sdc-sk{position:relative;overflow:hidden;background:var(--sdc-line-3);border-radius:var(--sdc-radius-xs);height:14px;margin:10px 0;} .sdc-sk.row{height:40px;} .sdc-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:sdc-shimmer 1.3s infinite;} @keyframes sdc-shimmer{100%{transform:translateX(100%);}} @media (min-width:600px){ .sdc-grid{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (min-width:900px){ .sdc-grid{grid-template-columns:repeat(4,minmax(0,1fr));} } @media (prefers-color-scheme:dark){ .sdc-lb{--sdc-line:#334155;} .sdc-lb__card,.sdc-grid__item{background:#0b1220;color:#e2e8f0;} .sdc-sk{background:#1e293b;} } /* ===== Modern competition page (.sdc-lp) ===== */ .sdc-lp{max-width:1180px;margin:0 auto;padding:0 16px;} .sdc-lp-hero{position:relative;border-radius:var(--sdc-radius-lg);overflow:hidden;padding:var(--sdc-hero-pad);margin:8px 0 22px;background:linear-gradient(120deg,var(--sdc-hero-grad-from),var(--sdc-hero-grad-to));background-size:cover;background-position:center;color:#fff;} .sdc-lp-hero__in{display:flex;align-items:center;gap:22px;flex-wrap:wrap;} .sdc-lp-hero__logo{width:var(--sdc-hero-media);height:var(--sdc-hero-media);flex:0 0 auto;background:rgba(255,255,255,.95);border-radius:var(--sdc-radius);display:flex;align-items:center;justify-content:center;padding:12px;box-shadow:var(--sdc-shadow-hero);} .sdc-lp-hero__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} .sdc-lp-hero__txt{flex:1;min-width:240px;} .sdc-lp-hero__badges{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;} .sdc-lp-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:4px 11px;border-radius:var(--sdc-radius-pill);background:var(--sdc-brand);color:#fff;} .sdc-lp-badge.is-cup{background:var(--sdc-warn-2);}/* cup = warning/amber (intentional) */ .sdc-lp-badge.ghost{background:rgba(255,255,255,.16);color:#fff;} .sdc-lp-hero__name{font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:0 0 10px;} .sdc-lp-hero__country{display:flex;align-items:center;gap:9px;font-size:15px;opacity:.95;} .sdc-lp-hero__country img{width:26px;height:auto;border-radius:4px;} .sdc-lp-hero__desc{margin:12px 0 0;font-size:15px;line-height:1.55;max-width:640px;opacity:.92;} .sdc-lp-overview{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 26px;} @media(max-width:900px){.sdc-lp-overview{grid-template-columns:repeat(3,1fr);}} @media(max-width:560px){.sdc-lp-overview{grid-template-columns:repeat(2,1fr);}} .sdc-lp-ov{background:var(--sdc-surface);border:1px solid var(--sdc-line-2);border-radius:var(--sdc-radius-sm);padding:12px 14px;box-shadow:0 2px 8px rgba(15,23,42,.05);}/* residual-fix: token surface/border → dark-coherent (was literal-white island) */ .sdc-lp-ov .k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--sdc-muted);margin-bottom:4px;}/* residual-fix: muted token (light 4.76 / dark 7.30) */ .sdc-lp-ov .v{display:block;font-size:15px;font-weight:700;color:var(--sdc-ink);}/* residual-fix: ink token (adapts dark) */ .sdc-lp-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid #eef0f4;margin:0 0 20px;} /* WS-7: tab colours tokenized (were literal #64748b/#0f172a/#1d4ed8 that never adapted → on a dark surface the hover #0f172a was 1.05 = invisible). Now inactive=muted, hover=ink, active=link; underline stays brand. */ .sdc-lp-tab{appearance:none;background:transparent;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 16px;font-size:14.5px;font-weight:600;color:var(--sdc-muted);cursor:pointer;transition:color .15s,border-color .15s;} .sdc-lp-tab:hover{color:var(--sdc-ink);} .sdc-lp-tab.is-active{color:var(--sdc-link);border-bottom-color:var(--sdc-brand);} .sdc-lp-panel{display:none;} .sdc-lp-panel.is-active{display:block;animation:sdc-lp-fade .2s ease;} @keyframes sdc-lp-fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}} .sdc-lp-about{background:var(--sdc-surface);border:1px solid var(--sdc-line-2);border-radius:var(--sdc-radius);padding:22px 24px;box-shadow:var(--sdc-shadow);line-height:1.7;color:var(--sdc-ink-soft);}/* residual-fix: token surface/border/text → dark-coherent (was literal-white island) */ .sdc-lp-about h3,.sdc-lp-about h4,.sdc-lp-about h5{color:var(--sdc-ink);margin:18px 0 8px;}/* residual-fix: ink token */ .sdc-lp-empty{color:var(--sdc-muted);background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius);padding:22px;text-align:center;} .sdc-lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;} @media(max-width:640px){.sdc-lp-stats{grid-template-columns:repeat(2,1fr);}} .sdc-lp-stat{background:var(--sdc-surface);border:1px solid var(--sdc-line-2);border-radius:14px;padding:20px 14px;text-align:center;box-shadow:var(--sdc-shadow);}/* residual-fix: token surface/border → dark-coherent (was literal-white island) */ .sdc-lp-stat .n{display:block;font-size:var(--sdc-fs-stat);font-weight:var(--sdc-fw-heavy);color:var(--sdc-ink);line-height:1;}/* WS-8 stat number; residual-fix: ink token */ .sdc-lp-stat .l{display:block;margin-top:6px;font-size:var(--sdc-fs-label);text-transform:uppercase;letter-spacing:.5px;color:var(--sdc-muted);}/* WS-8 stat label; residual-fix: muted token */ /* Team Statistics card (enriched: subtitle, progress, splits, form, biggest results) */ .sdc-stats .sdc-lb__body{padding:16px;} .sdc-stats__sub{font-size:12.5px;font-weight:600;color:var(--sdc-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/* micro-fix: token muted → dark 3.93→7.30 (light #64748b unchanged) */ .sdc-stats__progress{font-size:13.5px;font-weight:600;color:var(--sdc-ink-soft);margin:0 0 12px;}/* micro-fix: token ink-soft → dark 1.81→12.61 (light #334155 unchanged) */ .sdc-stats__note{background:var(--sdc-info-tint);border:1px solid var(--sdc-line-2);color:var(--sdc-ink-soft);border-radius:var(--sdc-radius-sm);padding:10px 13px;font-size:13px;line-height:1.5;margin:0 0 14px;} .sdc-stats__avg{grid-template-columns:repeat(3,1fr);margin-top:14px;} .sdc-stats .sdc-stats__avg .sdc-lp-stat{padding:14px 12px;} .sdc-stats__split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;} @media(max-width:560px){.sdc-stats__split{grid-template-columns:1fr;}} .sdc-stats__col{background:var(--sdc-surface);border:1px solid var(--sdc-line-2);border-radius:14px;padding:14px 16px;box-shadow:var(--sdc-shadow);}/* residual-fix: token surface/border → dark-coherent (was literal-white island) */ .sdc-stats__col h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--sdc-link);}/* residual-fix: link token accent (light #2563eb / dark #60a5fa) */ .sdc-stats__srow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--sdc-line-3);font-size:13.5px;}/* residual-fix: token divider */ .sdc-stats__srow:first-of-type{border-top:0;} .sdc-stats__srow .k{color:var(--sdc-muted);}/* residual-fix: muted token */ .sdc-stats__srow .v{font-weight:700;color:var(--sdc-ink);}/* residual-fix: ink token */ .sdc-stats__form{margin-top:16px;} .sdc-stats__form h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:#64748b;} .sdc-form-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} /* WS-5: W/D/L status pills — ONE semantic mapping (win=success, draw=draw, loss=danger); shared xs radius. */ .sdc-form{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--sdc-radius-xs);font-size:12.5px;font-weight:800;color:#fff;} .sdc-form--W{background:var(--sdc-success);} .sdc-form--D{background:var(--sdc-draw);} .sdc-form--L{background:var(--sdc-danger);} .sdc-form__streak{margin-left:8px;font-size:13px;font-weight:600;color:#475569;} .sdc-stats__big{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;} @media(max-width:560px){.sdc-stats__big{grid-template-columns:1fr;}} .sdc-stats__bigcard{text-align:left;padding:14px 16px;} .sdc-stats__bigcard .l{margin:0 0 6px;font-size:11px;color:var(--sdc-muted);}/* micro-fix: token muted → dark 3.93→7.30 (bigcard darkened via .sdc-lp-stat; light #64748b unchanged) */ .sdc-stats__bigcard .n{font-size:17px;font-weight:700;} .sdc-lp-related{margin:30px 0 40px;} .sdc-lp-h{font-size:var(--sdc-fs-h-section);font-weight:var(--sdc-fw-heavy);line-height:var(--sdc-lh-heading);color:#0f172a;margin:0 0 14px;}/* WS-8: section header role (was 20/750 → 20/800) */ /* WS-6: content-driven — columns follow the compact nav-card min width (shared with .sdc-cp-rgrid); no jumps. */ .sdc-lp-rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;} /* WS-3: shared COMPACT NAV/RELATED card — one tokenized definition for both .sdc-lp-rcard (league/team related) and .sdc-cp-rcard (country related), replacing two near-identical rules. Compact (sm radius), small hover-lift. */ .sdc-lp-rcard,.sdc-cp-rcard{display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:44px;background:var(--sdc-surface);border:1px solid var(--sdc-line-2);border-radius:var(--sdc-radius-sm);text-decoration:none;color:var(--sdc-ink);font-size:14px;font-weight:600;box-shadow:var(--sdc-shadow-sm);transition:border-color var(--sdc-transition),box-shadow var(--sdc-transition),transform var(--sdc-transition);} .sdc-lp-rcard:hover,.sdc-cp-rcard:hover{border-color:var(--sdc-brand);box-shadow:var(--sdc-shadow-hover);transform:translateY(var(--sdc-hover-lift-sm));} @media (hover:none){.sdc-lp-rcard:hover,.sdc-cp-rcard:hover{transform:none;}} .sdc-lp-rcard__logo{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#f7f9fc;border-radius:var(--sdc-radius-xs);padding:5px;} .sdc-lp-rcard__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} /* Season selector + archive badge (competition hero) */ .sdc-lp-badge.arch{background:#7c3aed;} .sdc-lp-season{display:inline-flex;align-items:center;} .sdc-lp-season__sel{appearance:none;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:var(--sdc-radius-pill);padding:8px 26px 8px 12px;font-size:12px;font-weight:700;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}/* WS-7: hit area ~23px→~31px (padding only, pill look kept) */ .sdc-lp-season__sel option{color:#0f172a;} /* ===== Teams tab: modern clickable team cards ===== */ /* WS-6: content-driven team grid (min 200px keeps logo+name+CTA readable); smooth ladder, no 4→2 jump. */ .sdc-tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:16px;} .sdc-tc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;height:100%;padding:18px 16px 16px;background:#fff;border:1px solid #eef0f4;border-radius:var(--sdc-radius);box-shadow:var(--sdc-shadow);text-decoration:none;color:#0f172a;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;} a.sdc-tc:hover{border-color:#2563eb;box-shadow:0 8px 22px rgba(37,99,235,.16);transform:translateY(-3px);} .sdc-tc--nolink{cursor:default;} .sdc-tc__logo{width:100%;height:76px;display:flex;align-items:center;justify-content:center;background:#f7f9fc;border-radius:var(--sdc-radius-sm);padding:10px;} .sdc-tc__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} .sdc-tc__name{font-size:15px;font-weight:var(--sdc-fw-bold);line-height:1.3;color:#0f172a;}/* WS-8: 750→700 (size kept — compact grid name) */ .sdc-tc__meta{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:2px;} .sdc-tc__row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#64748b;} .sdc-tc__row .k{text-transform:uppercase;letter-spacing:.4px;font-size:11px;} .sdc-tc__row .v{color:#334155;font-weight:600;text-align:right;} .sdc-tc__cta{margin-top:auto;display:inline-block;padding:7px 14px;border-radius:var(--sdc-radius-pill);background:#eff4ff;color:#1d4ed8;font-size:12.5px;font-weight:700;transition:background .18s ease,color .18s ease;} a.sdc-tc:hover .sdc-tc__cta{background:#2563eb;color:#fff;} /* ===== Team detail page (shortcode body) ===== */ .sdc-team{max-width:820px;} .sdc-team__hero{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #eef0f4;border-radius:var(--sdc-radius);padding:20px 22px;box-shadow:var(--sdc-shadow);} .sdc-team__logo{width:84px;height:84px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#f7f9fc;border-radius:14px;padding:12px;} .sdc-team__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} .sdc-team__name{margin:0;font-size:24px;font-weight:800;color:#0f172a;line-height:1.2;} .sdc-team__country{margin-top:4px;color:#64748b;font-size:14px;} .sdc-team__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;} @media(max-width:560px){.sdc-team__facts{grid-template-columns:1fr;}} .sdc-team__fact{display:flex;justify-content:space-between;gap:12px;background:#fff;border:1px solid #eef0f4;border-radius:var(--sdc-radius-sm);padding:12px 16px;box-shadow:0 2px 10px rgba(15,23,42,.04);} .sdc-team__fact .k{color:#64748b;font-size:12px;text-transform:uppercase;letter-spacing:.4px;} .sdc-team__fact .v{color:#0f172a;font-weight:700;text-align:right;} .sdc-team-empty{color:var(--sdc-muted);background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius);padding:22px;text-align:center;} @media (prefers-color-scheme:dark){ .sdc-tc,.sdc-team__hero,.sdc-team__fact{background:#0f172a;border-color:#1e293b;box-shadow:none;} .sdc-tc__name,.sdc-team__name,.sdc-tc__row .v,.sdc-team__fact .v{color:#e2e8f0;} .sdc-tc__logo,.sdc-team__logo{background:#111a2e;} .sdc-tc__cta{background:#1e293b;color:#93c5fd;} .sdc-team-empty{background:#0f172a;border-color:#1e293b;} } /* ===== Team detail page (full tabbed layout) ===== */ .sdc-tp{--sdc-line:#e5e7eb;margin:0 0 8px;} /* WS-4: Team FLAGSHIP hero — family padding/radius, but keeps its distinctive layered gradient + radial highlight (__bg below). */ .sdc-tp-hero{position:relative;border-radius:var(--sdc-radius-lg);overflow:hidden;margin:0 0 22px;padding:var(--sdc-hero-pad);color:#fff;} .sdc-tp-hero__bg{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#0b1220 0%,#152a4e 45%,#1d4ed8 100%);} .sdc-tp-hero__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 300px at 90% -20%,rgba(255,255,255,.14),transparent 60%);} .sdc-tp-hero__in{position:relative;z-index:1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;} .sdc-tp-hero__logo{width:var(--sdc-hero-media);height:var(--sdc-hero-media);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.95);border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.2);} .sdc-tp-hero__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} .sdc-tp-hero__name{margin:0;font-size:30px;font-weight:800;line-height:1.15;color:#fff;} .sdc-tp-hero__sub{margin-top:8px;font-size:14.5px;color:rgba(255,255,255,.82);} .sdc-tp-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:start;} @media(max-width:820px){.sdc-tp-grid{grid-template-columns:1fr;}} .sdc-tp-facts .sdc-team__facts,.sdc-tp-stadium{margin-top:0;} .sdc-tp-stadium__card{background:#fff;border:1px solid #eef0f4;border-radius:var(--sdc-radius);overflow:hidden;box-shadow:var(--sdc-shadow);} .sdc-tp-stadium__img{width:100%;aspect-ratio:16/9;background:#f1f5f9;} .sdc-tp-stadium__img img{width:100%;height:100%;object-fit:cover;display:block;} .sdc-tp-stadium__body{padding:14px 16px;} .sdc-tp-stadium__name{font-size:16px;font-weight:var(--sdc-fw-bold);color:#0f172a;}/* WS-8: 750→700 */ .sdc-tp-stadium__meta{margin-top:4px;color:#64748b;font-size:13px;} @media (prefers-color-scheme:dark){ .sdc-tp-stadium__card{background:#0f172a;border-color:#1e293b;box-shadow:none;} .sdc-tp-stadium__name{color:#e2e8f0;} .sdc-tp-hero__logo{background:#e2e8f0;} } /* Standings group heading (multi-group competitions) */ .sdc-tbl-group{padding:12px 16px 6px;font-size:13px;font-weight:var(--sdc-fw-bold);color:#0f172a;}/* WS-8: 750→700 (table group label) */ @media (prefers-color-scheme:dark){ .sdc-tbl-group{color:#e2e8f0;} } /* Rounds tab: round-jump nav + current-round badge (data-driven, no hardcoded round names). */ .sdc-round-nav{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0;} .sdc-round-nav__item{padding:4px 10px;border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-pill);font-size:12px;color:var(--sdc-ink-soft);text-decoration:none;} .sdc-round-nav__item:hover{border-color:var(--sdc-brand);color:var(--sdc-brand);} .sdc-round-nav__item.is-current{background:var(--sdc-brand-tint);border-color:var(--sdc-brand);color:var(--sdc-brand-dark);font-weight:var(--sdc-fw-bold);} .sdc-round-current-badge{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:var(--sdc-radius-pill);background:var(--sdc-success-tint);color:var(--sdc-success);font-size:11px;font-weight:var(--sdc-fw-bold);vertical-align:middle;} /* Tournament progress strip (Rounds tab): compact stage markers, current stage emphasized. */ .sdc-progress{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:12px 16px 4px;} .sdc-progress__step{padding:4px 10px;border-radius:var(--sdc-radius-pill);background:var(--sdc-line-3);color:var(--sdc-muted);font-size:12px;white-space:nowrap;} .sdc-progress__step.is-current{background:var(--sdc-brand);color:#fff;font-weight:var(--sdc-fw-bold);} .sdc-progress__step:not(:last-child)::after{content:'\2192';margin-inline-start:6px;color:var(--sdc-muted-2);} /* Knockout Bracket (Output Enhancement #1 completion). Desktop: horizontally arranged stage columns, each a vertical stack of tie cards — NOT a static image, pure semantic HTML/CSS. A connector is drawn ONLY on a PROVEN progression edge (an arrow glyph + accessible text next to the advancing team — see render_bracket() in class-sdc-league-snapshot.php); an unproven edge is simply absent, never a guessed line. Mobile: the same column layout becomes a deliberate horizontal-scroll-with-snap strip (Part 14) rather than shrinking text. */ .sdc-bracket{display:flex;gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 18px;scroll-snap-type:x proximity;} .sdc-bracket__col{flex:0 0 260px;min-width:260px;scroll-snap-align:start;} .sdc-bracket__col-h{margin:0 0 8px;font-size:13px;font-weight:var(--sdc-fw-bold);color:var(--sdc-muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sdc-bracket__tie-wrap{margin-bottom:14px;} .sdc-bracket__tie{border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-sm);background:var(--sdc-surface);overflow:hidden;} .sdc-bracket__tie--ambiguous{border-style:dashed;} .sdc-bracket__row,.sdc-bracket__leg-label + .sdc-bracket__side,.sdc-bracket__tie > .sdc-fx,.sdc-bracket__tie > a.sdc-fx{display:flex;align-items:center;gap:8px;} .sdc-bracket__tie .sdc-fx,.sdc-bracket__tie a.sdc-fx{padding:8px 10px;border-bottom:1px solid var(--sdc-line-3);} .sdc-bracket__tie .sdc-fx:last-child,.sdc-bracket__tie a.sdc-fx:last-child{border-bottom:none;} .sdc-bracket__side{display:flex;align-items:center;gap:6px;flex:1;min-width:0;font-size:13px;} .sdc-bracket__side img{width:18px;height:18px;object-fit:contain;flex:0 0 auto;} .sdc-bracket__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .sdc-bracket__side.is-winner .sdc-bracket__name{font-weight:var(--sdc-fw-bold);color:var(--sdc-ink);} .sdc-bracket__score{font-weight:700;min-width:20px;text-align:center;flex:0 0 auto;} .sdc-bracket__time{display:block;padding:2px 10px 8px;color:var(--sdc-muted);font-size:11px;} .sdc-bracket__leg-label{display:block;padding:6px 10px 0;color:var(--sdc-muted);font-size:10px;text-transform:uppercase;letter-spacing:.03em;} .sdc-bracket__agg{padding:8px 10px;border-top:1px solid var(--sdc-line);background:var(--sdc-line-3);display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sdc-muted);} .sdc-bracket__agg .sdc-bracket__side{font-size:13px;} .sdc-bracket__adv{color:var(--sdc-success);font-weight:700;margin-inline-start:4px;} .sdc-bracket__tie-wrap--advances .sdc-bracket__tie{border-color:var(--sdc-success);} @media (max-width:559px){ .sdc-bracket__col{flex-basis:220px;min-width:220px;} } @media (prefers-color-scheme:dark){ .sdc-bracket__side.is-winner .sdc-bracket__name{color:#e2e8f0;} .sdc-bracket__agg{background:var(--sdc-line-3);} } /* ===== Squad tab: player cards ===== */ /* Desktop: 5 cards per row · Tablet: 2 · Mobile: 1 */ /* WS-6: content-driven squad grid — min 170px (avatar+name+meta stay usable); FIXES the abrupt 5→2→1 jump. */ .sdc-pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;padding:16px;} .sdc-pl{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;height:100%;padding:16px 12px;background:#fff;border:1px solid #eef0f4;border-radius:var(--sdc-radius);box-shadow:var(--sdc-shadow);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;} .sdc-pl:hover{border-color:#2563eb;box-shadow:0 8px 22px rgba(37,99,235,.14);transform:translateY(-3px);} .sdc-pl__photo{position:relative;width:84px;height:84px;border-radius:50%;overflow:hidden;background:#f1f5f9;} .sdc-pl__photo img{width:100%;height:100%;object-fit:cover;display:block;} .sdc-pl__num{position:absolute;right:-2px;bottom:-2px;min-width:24px;height:24px;padding:0 5px;display:flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;font-size:12px;font-weight:800;border-radius:var(--sdc-radius-pill);border:2px solid #fff;} /* Nationality flag: small circle overlapping the photo (opposite the shirt number) */ .sdc-pl__flag{position:absolute;left:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.25);} .sdc-pl__flag img{width:100%;height:100%;object-fit:cover;display:block;} .sdc-pl__name{font-size:14.5px;font-weight:var(--sdc-fw-bold);color:#0f172a;line-height:1.25;}/* WS-8: 750→700 (size kept — compact squad name) */ .sdc-pl__meta{display:flex;flex-direction:column;gap:3px;width:100%;} @media (prefers-color-scheme:dark){ .sdc-pl{background:#0f172a;border-color:#1e293b;box-shadow:none;} .sdc-pl__name{color:#e2e8f0;} .sdc-pl__photo{background:#111a2e;} .sdc-pl__num{border-color:#0f172a;} .sdc-pl__flag{background:#0f172a;border-color:#0f172a;} } /* ===== Player cards (Players Index + Team → Squad) ===== */ /* WS-6: content-driven player-index grid — min 220px (gradient top + photo + CTA need the width); no 4→2 jump. */ .sdc-pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding:4px 0;} .sdc-pc{display:flex;flex-direction:column;background:#fff;border:1px solid #eef0f4;border-radius:18px;overflow:hidden;box-shadow:0 2px 12px rgba(15,23,42,.06);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;} .sdc-pc:hover{border-color:#2563eb;box-shadow:var(--sdc-shadow-hover);transform:translateY(-4px);} .sdc-pc__top{background:linear-gradient(160deg,#0b1220,#1e3a8a);padding:20px 0 14px;display:flex;justify-content:center;} .sdc-pc__photo{position:relative;width:96px;height:96px;border-radius:50%;overflow:hidden;background:#f1f5f9;border:3px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.25);} .sdc-pc__photo img{width:100%;height:100%;object-fit:cover;display:block;} .sdc-pc__ph{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:#94a3b8;} .sdc-pc__num{position:absolute;right:-3px;bottom:-3px;min-width:26px;height:26px;padding:0 6px;display:flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;font-size:12px;font-weight:800;border-radius:var(--sdc-radius-pill);border:2px solid #fff;} .sdc-pc__flag{position:absolute;left:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.3);} .sdc-pc__flag img{width:100%;height:100%;object-fit:cover;display:block;} .sdc-pc__body{padding:14px 16px 4px;text-align:center;flex:1;} .sdc-pc__name{display:block;font-size:16px;font-weight:800;color:#0f172a;text-decoration:none;line-height:1.25;} a.sdc-pc__name:hover{color:#1d4ed8;} .sdc-pc__team{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:600;color:#475569;text-decoration:none;} .sdc-pc__team img{width:18px;height:18px;object-fit:contain;} .sdc-pc__meta{display:flex;flex-direction:column;gap:4px;margin-top:12px;text-align:left;} .sdc-pc__row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;border-top:1px solid #f1f5f9;padding:5px 0;} .sdc-pc__row .k{color:#64748b;} .sdc-pc__row .v{font-weight:700;color:#0f172a;} .sdc-pc__foot{padding:14px 16px 18px;} .sdc-pc__btn{display:block;text-align:center;background:#2563eb;color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;padding:10px 12px;border-radius:10px;transition:background .15s ease;} .sdc-pc__btn:hover{background:#1d4ed8;color:#fff;} /* ===== Player detail page (.sdc-pp) ===== */ .sdc-pp-hero .sdc-lp-hero__in{align-items:center;} .sdc-pp-hero__photo{width:120px;height:120px;flex:0 0 auto;border-radius:var(--sdc-radius-lg);overflow:hidden;background:rgba(255,255,255,.12);box-shadow:0 6px 18px rgba(0,0,0,.3);} .sdc-pp-hero__photo img{width:100%;height:100%;object-fit:cover;display:block;} .sdc-pp-hero__num{display:inline-block;font-size:13px;font-weight:800;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:var(--sdc-radius-pill);padding:2px 12px;margin-bottom:8px;} .sdc-pp-hero__name{font-size:clamp(24px,4vw,38px);font-weight:800;line-height:1.12;letter-spacing:-.02em;} .sdc-pp-hero__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:14.5px;opacity:.95;} .sdc-pp-hero__meta span{opacity:.6;} .sdc-pp-hero__flag{display:inline-flex;width:22px;height:22px;border-radius:50%;overflow:hidden;} .sdc-pp-hero__flag img{width:100%;height:100%;object-fit:cover;} .sdc-pp-hero__team{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;background:rgba(255,255,255,.12);border-radius:var(--sdc-radius-pill);padding:6px 14px;} .sdc-pp-hero__team img{width:22px;height:22px;object-fit:contain;background:#fff;border-radius:4px;padding:2px;} .sdc-tp-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;} @media(max-width:820px){.sdc-tp-grid{grid-template-columns:1fr;}} .sdc-pp-team{display:flex;align-items:center;gap:12px;margin-bottom:14px;} .sdc-pp-team__logo img{width:52px;height:52px;object-fit:contain;background:#f7f9fc;border-radius:10px;padding:6px;} .sdc-pp-team__info{display:flex;flex-direction:column;gap:2px;} .sdc-pp-team__info strong{font-size:16px;color:#0f172a;} .sdc-pp-team__info span{font-size:13px;color:#64748b;} .sdc-pp-tablewrap{overflow-x:auto;padding:8px 16px 16px;} .sdc-pp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px;} .sdc-pp-table th{text-align:left;font-size:var(--sdc-fs-label);text-transform:uppercase;letter-spacing:.4px;color:var(--sdc-muted);padding:8px 10px;border-bottom:1px solid var(--sdc-line);}/* WS-8: shared table-TH language; muted token improves dark (3.93→~6.5) since .sdc-pc darkens */ .sdc-pp-table td{padding:9px 10px;border-bottom:1px solid var(--sdc-line-3);color:var(--sdc-ink);}/* WS-8: token divider + ink (dark-aware) */ .sdc-pp-table td a{color:#1d4ed8;text-decoration:none;font-weight:600;} .sdc-pp-table tbody tr:hover{background:var(--sdc-bg-subtle);}/* WS-8: token hover */ /* ===== Current Team card (.sdc-ct) — matches Teams/Players/Competitions cards ===== */ /* WS-3: current-team featured card — tokenized to the family (radius md, token shadow, family hover) so it inherits dark mode; layout, facts and CTA unchanged. A featured (non-link) card that keeps a gentle lift on hover. */ .sdc-ct{display:flex;flex-direction:column;gap:14px;height:100%;background:var(--sdc-surface);border:1px solid var(--sdc-line-2);border-radius:var(--sdc-radius);padding:20px;box-shadow:var(--sdc-shadow);transition:transform var(--sdc-transition),box-shadow var(--sdc-transition),border-color var(--sdc-transition);} .sdc-ct:hover{transform:translateY(var(--sdc-hover-lift));box-shadow:var(--sdc-shadow-hover);border-color:var(--sdc-brand);} @media (hover:none){.sdc-ct:hover{transform:none;}} .sdc-ct__eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--sdc-brand);} .sdc-ct__top{display:flex;align-items:center;gap:14px;min-width:0;} .sdc-ct__logo{width:72px;height:72px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line-2);border-radius:14px;padding:10px;} .sdc-ct__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} .sdc-ct__head{min-width:0;} .sdc-ct__name{font-size:18px;font-weight:800;line-height:1.25;color:var(--sdc-ink);margin:0;word-break:break-word;} .sdc-ct__sub{font-size:13px;color:var(--sdc-muted);margin-top:3px;} .sdc-ct__tags{display:flex;flex-wrap:wrap;gap:6px;} .sdc-ct__tag{font-size:11.5px;font-weight:600;color:var(--sdc-ink-soft);background:var(--sdc-brand-tint);border:1px solid var(--sdc-line-2);border-radius:var(--sdc-radius-pill);padding:3px 10px;} .sdc-ct__facts{display:flex;flex-direction:column;} .sdc-ct__fact{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--sdc-line-3);font-size:13.5px;} .sdc-ct__fact:first-child{border-top:0;} .sdc-ct__fact .k{color:var(--sdc-muted);} .sdc-ct__fact .v{color:var(--sdc-ink);font-weight:600;text-align:right;} .sdc-ct__btn{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--sdc-brand);color:#fff;text-decoration:none;font-weight:700;font-size:14px;border-radius:var(--sdc-radius-sm);padding:11px 16px;transition:background var(--sdc-transition),transform var(--sdc-transition);} .sdc-ct__btn:hover{background:var(--sdc-brand-dark);transform:translateY(-1px);} .sdc-ct__btn svg{width:16px;height:16px;flex:0 0 auto;} @media(max-width:560px){.sdc-ct{padding:16px;}.sdc-ct__logo{width:60px;height:60px;}.sdc-ct__name{font-size:16px;}} /* ===== Team Leaders widget (.sdc-tl) + Player badges (.sdc-badge) ===== */ .sdc-tl{background:#fff;border:1px solid #eef0f4;border-radius:var(--sdc-radius);box-shadow:var(--sdc-shadow);padding:16px 18px;margin:18px 0;} .sdc-tl .sdc-lp-h{margin:0 0 10px;} .sdc-tl__row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:8px 0;border-top:1px solid #f1f5f9;font-size:14px;} .sdc-tl__row:first-of-type{border-top:0;} .sdc-tl__stat{display:flex;align-items:center;gap:6px;color:#64748b;} .sdc-tl__who a{color:#0f172a;font-weight:700;text-decoration:none;} .sdc-tl__who a:hover{color:var(--sdc-link);}/* WS-7: link role */ .sdc-tl__val{font-weight:800;color:#0f172a;text-align:right;min-width:36px;} .sdc-badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;} /* WS-5: trophy/honour badge — amber identity kept, mapped to the warn family (tint + accent) for dark mode. */ .sdc-badge{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--sdc-warn-2);background:var(--sdc-warn-tint);border:1px solid #fed7aa;border-radius:var(--sdc-radius-pill);padding:5px 12px;text-decoration:none;} .sdc-badge:hover{border-color:#f59e0b;} @media (prefers-color-scheme:dark){ .sdc-tl{background:#0b1220;border-color:#334155;box-shadow:none;} .sdc-tl__row{border-color:#1e293b;} .sdc-tl__who a,.sdc-tl__val{color:#e2e8f0;} .sdc-badge{color:#fcd34d;background:#1c1508;border-color:#7c5e10;} } /* ===== Stats Hub (.sdc-hub) — discovery: featured stats + competitions ===== */ .sdc-hub{margin:8px 0 30px;} .sdc-hub__hero{padding:var(--sdc-hero-pad-sm);border-radius:var(--sdc-radius-lg);background:linear-gradient(120deg,var(--sdc-hero-grad-from),var(--sdc-hero-grad-to));color:#fff;margin:0 0 26px;} .sdc-hub__title{font-size:clamp(24px,4vw,38px);font-weight:800;line-height:1.12;margin:0;} .sdc-hub__intro{margin:10px 0 0;font-size:15px;opacity:.92;max-width:640px;} .sdc-hub__stat{margin:0 0 24px;} .sdc-hub__h{display:flex;align-items:center;gap:8px;font-size:var(--sdc-fs-card-title);font-weight:var(--sdc-fw-heavy);line-height:var(--sdc-lh-heading);color:#0f172a;margin:0 0 12px;}/* WS-8: subsection header role (18→16) */ .sdc-hub__ic{font-size:.95em;} .sdc-hub__comps,.sdc-hub__leagues{display:flex;flex-wrap:wrap;gap:8px;} .sdc-hub__comp,.sdc-hub__league{display:inline-block;font-size:13.5px;font-weight:600;color:#0f172a;background:#fff;border:1px solid #eef0f4;border-radius:var(--sdc-radius-pill);padding:7px 14px;text-decoration:none;box-shadow:0 1px 4px rgba(15,23,42,.04);transition:border-color .15s,color .15s,transform .15s;} .sdc-hub__comp:hover,.sdc-hub__league:hover{border-color:#2563eb;color:#2563eb;transform:translateY(-1px);} .sdc-hub__browse{margin-top:8px;} .sdc-hub__search{margin:0 0 14px;max-width:420px;} .sdc-hub__input{width:100%;border:1px solid #e2e8f0;border-radius:var(--sdc-radius-sm);padding:11px 14px;font-size:15px;} .sdc-hub__note{color:var(--sdc-muted);background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius);padding:22px;text-align:center;} @media (prefers-color-scheme:dark){ .sdc-hub__h{color:#e2e8f0;} .sdc-hub__comp,.sdc-hub__league{background:#0b1220;border-color:#334155;color:#e2e8f0;box-shadow:none;} .sdc-hub__comp:hover,.sdc-hub__league:hover{border-color:#3b82f6;color:#93c5fd;} .sdc-hub__input{background:#0b1220;border-color:#334155;color:#e2e8f0;} } /* ===== Dedicated leaderboard page (.sdc-lbp) — full, canonical version ===== */ .sdc-lbp{margin:8px 0 26px;} .sdc-lbp__head{margin:0 0 18px;} .sdc-lbp__back{display:inline-block;font-size:13px;font-weight:600;color:var(--sdc-link);text-decoration:none;margin:0 0 8px;padding:6px 2px;}/* WS-7: link token (dark 3.62→7.36) + hit area ~17px→~29px */ .sdc-lbp__back:hover{text-decoration:underline;} .sdc-lbp__title{display:flex;align-items:center;gap:10px;font-size:clamp(22px,3.4vw,32px);font-weight:800;color:#0f172a;line-height:1.15;margin:0;} .sdc-lbp__ic{font-size:.9em;} .sdc-lbp__meta{margin-top:6px;font-size:14px;color:#64748b;} @media (prefers-color-scheme:dark){.sdc-lbp__title{color:#e2e8f0;}} /* ===== Statistics tab (.sdc-stab) — registry-driven grid of leaderboards ===== */ .sdc-stab__more{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--sdc-link);text-decoration:none;padding:6px 2px;}/* WS-7: link token + hit area */ .sdc-stab__more:hover{text-decoration:underline;} .sdc-stab__group{margin:0 0 26px;} .sdc-stab__group .sdc-lp-h{margin:0 0 14px;} .sdc-stab__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;} @media(max-width:820px){.sdc-stab__grid{grid-template-columns:1fr;}} .sdc-stab__card{min-width:0;} .sdc-stab__h{display:flex;align-items:center;gap:8px;font-size:var(--sdc-fs-card-title);font-weight:var(--sdc-fw-heavy);line-height:var(--sdc-lh-heading);color:#0f172a;margin:0 0 10px;}/* WS-8: subsection header role (15→16) */ .sdc-stab__ic{font-size:16px;line-height:1;} @media (prefers-color-scheme:dark){.sdc-stab__h{color:#e2e8f0;}} /* ===== Leaderboard (.sdc-lbd) — reusable for EVERY stat type (player & team) ===== */ .sdc-lbd-block{margin:0 0 22px;} .sdc-lbd__title{font-size:var(--sdc-fs-card-title);font-weight:var(--sdc-fw-heavy);line-height:var(--sdc-lh-heading);color:#0f172a;margin:0 0 12px;}/* WS-8: subsection header role (16, tokenized) */ .sdc-lbd{background:#fff;border:1px solid #eef0f4;border-radius:var(--sdc-radius);box-shadow:var(--sdc-shadow);overflow:hidden;} .sdc-lbd__scroll{overflow-x:auto;} .sdc-lbd__table{width:100%;border-collapse:collapse;font-size:14px;min-width:440px;} .sdc-lbd__table th{text-align:left;font-size:var(--sdc-fs-label);text-transform:uppercase;letter-spacing:.4px;color:var(--sdc-muted);padding:11px 12px;border-bottom:1px solid var(--sdc-line);white-space:nowrap;}/* WS-8: shared table-TH language (WS-7 muted kept: light 4.76 / dark 7.30) */ .sdc-lbd__table th.r,.sdc-lbd__table td.r{width:40px;text-align:center;color:#64748b;} .sdc-lbd__table th.v,.sdc-lbd__table td.v{text-align:right;font-weight:800;color:#0f172a;white-space:nowrap;} .sdc-lbd__table th.x,.sdc-lbd__table td.x{text-align:right;color:#64748b;white-space:nowrap;} .sdc-lbd__table td{padding:10px 12px;border-bottom:1px solid var(--sdc-line-3);vertical-align:middle;}/* WS-8: token divider */ .sdc-lbd__table tbody tr:last-child td{border-bottom:0;} .sdc-lbd__table tbody tr:hover{background:var(--sdc-bg-subtle);}/* WS-8: token hover */ .sdc-lbd__table td.e{min-width:190px;} .sdc-lbd__logo{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:#f7f9fc;border-radius:var(--sdc-radius-xs);padding:4px;margin-right:10px;vertical-align:middle;} .sdc-lbd__logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;} .sdc-lbd__meta{display:inline-flex;flex-direction:column;gap:1px;vertical-align:middle;} .sdc-lbd__name a{color:#0f172a;text-decoration:none;font-weight:700;} .sdc-lbd__name a:hover{color:var(--sdc-link);}/* WS-7: link role */ .sdc-lbd__sub{font-size:12px;color:#64748b;} .sdc-lbd__crest{width:16px;height:16px;object-fit:contain;vertical-align:middle;margin-right:5px;} .sdc-lbd--pending{padding:22px;text-align:center;} .sdc-lbd__note{color:#64748b;font-size:14px;margin:0;} @media(max-width:560px){.sdc-lbd__table td.x,.sdc-lbd__table th.x{display:none;}} @media (prefers-color-scheme:dark){ .sdc-lbd{background:#0b1220;border-color:#334155;box-shadow:none;} .sdc-lbd__title{color:#e2e8f0;} .sdc-lbd__name a{color:#e2e8f0;}/* WS-7: default was literal #0f172a → 1.05 (invisible) on the dark card; mirror the .sdc-tl pattern */ .sdc-lbd__table th{color:#94a3b8;border-color:#334155;} .sdc-lbd__table td{border-color:#1e293b;} .sdc-lbd__table td.v{color:#e2e8f0;} .sdc-lbd__table tbody tr:hover{background:#111c33;} .sdc-lbd__logo{background:#0f172a;} .sdc-lbd__name a{color:#e2e8f0;} } /* ===== Players Index (.sdc-pi) ===== */ .sdc-pi-hero__count{margin-top:10px;font-size:15px;opacity:.95;} .sdc-pi-search{display:flex;gap:8px;margin-top:16px;max-width:460px;} .sdc-pi-search input{flex:1;border:0;border-radius:10px;padding:11px 14px;font-size:15px;} .sdc-pi-search button{border:0;border-radius:10px;padding:11px 18px;background:#2563eb;color:#fff;font-weight:700;cursor:pointer;} .sdc-pi-search button:hover{background:var(--sdc-brand-dark);}/* WS-7 (B9): matches the CTA hover language */ .sdc-pi-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;} .sdc-pi-filters select{appearance:auto;border:1px solid #e2e8f0;border-radius:10px;padding:9px 12px;font-size:14px;background:#fff;color:#0f172a;cursor:pointer;} .sdc-pi-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:26px 0 10px;} .sdc-pi-pager__btn{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:9px 16px;font-weight:700;color:#1d4ed8;text-decoration:none;} .sdc-pi-pager__btn:hover{border-color:#2563eb;} .sdc-pi-pager__info{font-size:14px;color:#64748b;} @media (prefers-color-scheme:dark){ .sdc-pc{background:#0f172a;border-color:#1e293b;box-shadow:none;} .sdc-pc__name{color:#e2e8f0;} .sdc-pc__row .v{color:#e2e8f0;} .sdc-pp-team__info strong{color:#e2e8f0;} .sdc-pp-table td{color:#e2e8f0;} .sdc-ct{background:#0b1220;border-color:#334155;box-shadow:none;} .sdc-ct:hover{border-color:#3b4b6b;box-shadow:0 12px 28px rgba(0,0,0,.35);} .sdc-ct__name{color:#e2e8f0;} .sdc-ct__logo{background:#0f172a;border-color:#334155;} .sdc-ct__tag{background:#111c33;border-color:#334155;color:#cbd5e1;} .sdc-ct__fact{border-color:#1e293b;} .sdc-ct__fact .v{color:#e2e8f0;} } /* ===== Team Statistics Dashboard (.sdc-tsd) — schema-driven; ONE component for tab, page & widgets ===== */ .sdc-tsd{display:grid;gap:22px;} .sdc-tsd--tab{gap:18px;} .sdc-tsd__sec{background:#fff;border:1px solid var(--sdc-line);border-radius:14px;padding:16px 18px;} .sdc-tsd__h{display:flex;align-items:center;gap:8px;font-size:var(--sdc-fs-card-title);font-weight:var(--sdc-fw-heavy);line-height:var(--sdc-lh-heading);color:#0f172a;margin:0 0 14px;}/* WS-8: subsection header role (15→16) */ .sdc-tsd__ic{font-size:17px;line-height:1;} /* stat grid: responsive auto-fit cells */ .sdc-tsd__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;} .sdc-tsd__cell{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:#f8fafc;border:1px solid var(--sdc-line);border-radius:11px;text-align:center;min-width:0;} .sdc-tsd__cell--wide{grid-column:span 2;} .sdc-tsd__val{font-size:22px;font-weight:800;color:#0f172a;line-height:1.1;word-break:break-word;} .sdc-tsd__lbl{font-size:12px;color:var(--sdc-muted);text-transform:uppercase;letter-spacing:.4px;} /* goal-timing chart: paired scored/conceded bars per minute bucket */ .sdc-tsd__chart{display:grid;gap:10px;} .sdc-tsd__clegend{display:flex;gap:16px;font-size:12px;color:var(--sdc-muted);margin-bottom:2px;} .sdc-tsd__lg{display:inline-flex;align-items:center;gap:6px;} .sdc-tsd__lg::before{content:"";width:10px;height:10px;border-radius:3px;} .sdc-tsd__lg--for::before{background:#2563eb;} .sdc-tsd__lg--against::before{background:#f97316;} .sdc-tsd__crow{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px;} .sdc-tsd__crange{font-size:12px;color:var(--sdc-muted);text-align:right;} .sdc-tsd__cbars{display:grid;gap:5px;min-width:0;} .sdc-tsd__cbar{position:relative;display:block;height:14px;background:#eef2f7;border-radius:7px;overflow:hidden;} .sdc-tsd__cbar>span{position:absolute;left:0;top:0;bottom:0;border-radius:7px;min-width:2px;} .sdc-tsd__cbar--for>span{background:#2563eb;} .sdc-tsd__cbar--against>span{background:#f97316;} .sdc-tsd__cbar>em{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-style:normal;font-size:11px;font-weight:700;color:#0f172a;} /* formations used */ .sdc-tsd__forms{display:grid;gap:10px;} .sdc-tsd__frow{display:grid;grid-template-columns:80px 1fr 34px;align-items:center;gap:12px;} .sdc-tsd__fname{font-weight:700;color:#0f172a;font-size:14px;} .sdc-tsd__fbar{display:block;height:12px;background:#eef2f7;border-radius:6px;overflow:hidden;} .sdc-tsd__fbar>span{display:block;height:100%;background:var(--sdc-success);border-radius:6px;min-width:2px;} .sdc-tsd__fcount{font-weight:800;color:#0f172a;text-align:right;font-size:14px;} /* "View Full Team Statistics" */ .sdc-tsd__more{margin:4px 0 0;} .sdc-tsd__morebtn{display:inline-block;padding:10px 16px;background:#2563eb;color:#fff;font-weight:700;font-size:14px;border-radius:10px;text-decoration:none;} .sdc-tsd__morebtn:hover{background:#1d4ed8;color:#fff;} @media(max-width:600px){ .sdc-tsd__cell--wide{grid-column:span 1;} .sdc-tsd__frow{grid-template-columns:64px 1fr 30px;} } @media (prefers-color-scheme:dark){ .sdc-tsd__sec{background:#0b1220;border-color:#334155;} .sdc-tsd__h{color:#e2e8f0;} .sdc-tsd__cell{background:#111c33;border-color:#334155;} .sdc-tsd__val,.sdc-tsd__fname,.sdc-tsd__fcount,.sdc-tsd__cbar>em{color:#e2e8f0;} .sdc-tsd__cbar,.sdc-tsd__fbar{background:#1e293b;} } /* ===== Team Statistics dedicated page (.sdc-tsp) — /sports/football/team/{slug}/statistics/ ===== */ .sdc-tsp{max-width:1040px;margin:0 auto;padding:8px 0 40px;} .sdc-tsp__head{margin:0 0 22px;} .sdc-tsp__back{display:inline-block;font-size:13px;font-weight:700;color:var(--sdc-link);text-decoration:none;margin-bottom:8px;padding:6px 2px;}/* WS-7: link token + hit area */ .sdc-tsp__back:hover{text-decoration:underline;} .sdc-tsp__title{font-size:clamp(22px,3.4vw,32px);line-height:1.15;font-weight:800;color:var(--sdc-ink);margin:0 0 4px;} .sdc-tsp__meta{font-size:14px;color:var(--sdc-muted);} .sdc-tsp__note{padding:22px 16px;color:var(--sdc-muted);font-size:15px;text-align:center;background:#f8fafc;border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-sm);} .sdc-tsp__related{margin-top:26px;padding-top:18px;border-top:1px solid var(--sdc-line);} .sdc-tsp__rh{font-size:var(--sdc-fs-card-title);font-weight:var(--sdc-fw-heavy);line-height:var(--sdc-lh-heading);color:#0f172a;margin:0 0 12px;}/* WS-8: subsection header role (16, tokenized) */ .sdc-tsp__rlinks{display:flex;flex-wrap:wrap;gap:10px;} .sdc-tsp__rlinks a{display:inline-block;padding:8px 14px;background:#f1f5f9;border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-pill);font-size:14px;font-weight:600;color:#0f172a;text-decoration:none;} .sdc-tsp__rlinks a:hover{background:#e2e8f0;} @media (prefers-color-scheme:dark){ .sdc-tsp__title,.sdc-tsp__rh{color:#e2e8f0;} .sdc-tsp__note{background:#0b1220;border-color:#334155;} .sdc-tsp__rlinks a{background:#111c33;border-color:#334155;color:#e2e8f0;} .sdc-tsp__rlinks a:hover{background:#1e293b;} } /* ===== Team Stats widget wrapper (.sdc-tsw) + form pills — reusable anywhere via [sdc_team_stats_widget] ===== */ .sdc-tsw{display:grid;gap:16px;} .sdc-tsw__title{font-size:var(--sdc-fs-card-title);font-weight:var(--sdc-fw-heavy);line-height:var(--sdc-lh-heading);color:#0f172a;margin:0 0 2px;}/* WS-8: subsection header role (16, tokenized) */ /* current-form pills (type "form") */ .sdc-tsd__form{display:flex;flex-wrap:wrap;gap:6px;} /* WS-5: same W/D/L semantic mapping as .sdc-form (was a divergent green/red) — one status language. */ .sdc-tsd__pill{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--sdc-radius-xs);font-size:13px;font-weight:800;color:#fff;} .sdc-tsd__pill--w{background:var(--sdc-success);} .sdc-tsd__pill--d{background:var(--sdc-draw);} .sdc-tsd__pill--l{background:var(--sdc-danger);} @media (prefers-color-scheme:dark){ .sdc-tsw__title{color:#e2e8f0;} /* WS-5: draw pill now uses --sdc-draw (mode-invariant), matching .sdc-form; the dark-only override was removed. */ } /* ===== Team stats page AI intro ===== */ .sdc-tsp__intro{font-size:16px;line-height:1.6;color:#334155;margin:0 0 22px;} .sdc-tsp__intro p{margin:0;} @media (prefers-color-scheme:dark){ .sdc-tsp__intro{color:#cbd5e1;} } /* ===== Global Card component (.sdc-card) — ONE component for every entity; media preset is the only diff ===== */ .sdc-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sdc-gap);align-items:stretch;} .sdc-card{display:flex;flex-direction:column;height:100%;background:var(--sdc-surface);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius);box-shadow:var(--sdc-shadow);overflow:hidden;transition:transform var(--sdc-transition),box-shadow var(--sdc-transition),border-color var(--sdc-transition);} .sdc-card--link{text-decoration:none;color:inherit;} /* WS-3: ONE hover rule for the canonical card — only clickable (link) cards lift; token shadow; no touch sticky-hover. */ .sdc-card--link:hover{transform:translateY(var(--sdc-hover-lift));box-shadow:var(--sdc-shadow-hover);border-color:var(--sdc-brand);} @media (hover:none){.sdc-card--link:hover{transform:none;}} /* media area */ .sdc-card__media{position:relative;width:100%;background:var(--sdc-bg-subtle);display:flex;align-items:center;justify-content:center;overflow:hidden;} /* Never upscale a raster logo past its own resolution: cap at native size, keep aspect, center it (the media box is a centering flexbox). Photo presets (sport/stadium/player/coach/h2h) re-assert fill/cover below. Fixes blurry/upscaled league, cup & team logos across every card. */ .sdc-card__media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;} /* Player / coach: circular avatar on a gradient. Shown at native size inside a fixed 112px circle (never scaled beyond the source ~150px photo → crisp, no blur). The image sits in the SAME place (top of the card); only the shape changed from a stretched full-bleed box to a centered avatar. */ .sdc-card__media--player,.sdc-card__media--coach{aspect-ratio:auto;min-height:164px;background:linear-gradient(160deg,#0b1220,#1e3a8a);padding:18px 0;} .sdc-card__frame{position:relative;width:112px;height:112px;flex:0 0 auto;} .sdc-card__media--player img,.sdc-card__media--coach img{width:112px;height:112px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,0,0,.28);background:#f1f5f9;} .sdc-card__media--player .sdc-card__ph,.sdc-card__media--coach .sdc-card__ph{width:112px;height:112px;border-radius:50%;border:3px solid rgba(255,255,255,.9);background:#e2e8f0;color:#334155;font-size:30px;} .sdc-card__media--sport,.sdc-card__media--stadium{aspect-ratio:16/9;} .sdc-card__media--sport img,.sdc-card__media--stadium img{width:100%;height:100%;object-fit:cover;} .sdc-card__media--country{aspect-ratio:4/3;padding:14px;} .sdc-card__media--country img{object-fit:contain;} .sdc-card__media--team,.sdc-card__media--competition,.sdc-card__media--default{aspect-ratio:1/1;padding:18px;} .sdc-card__media--team img,.sdc-card__media--competition img,.sdc-card__media--default img{object-fit:contain;} .sdc-card__media--h2h,.sdc-card__media--match{aspect-ratio:16/9;padding:16px;} .sdc-card__duo{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;} .sdc-card__duo img{width:auto;max-width:40%;max-height:82%;object-fit:contain;} .sdc-card__vs{font-size:13px;font-weight:800;color:var(--sdc-muted);text-transform:uppercase;letter-spacing:.5px;} .sdc-card__ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:28px;font-weight:800;color:var(--sdc-muted);background:var(--sdc-bg-subtle);} /* media badges (shirt number / nationality flag / small text) */ .sdc-card__badge{position:absolute;font-weight:800;line-height:1;} .sdc-card__badge--num{top:8px;left:8px;background:var(--sdc-brand);color:#fff;font-size:12px;padding:4px 8px;border-radius:var(--sdc-radius-pill);} .sdc-card__badge--flag{bottom:8px;right:8px;width:24px;height:18px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08);} .sdc-card__badge--flag img{width:100%;height:100%;object-fit:cover;} /* On the circular player/coach avatar: shirt number = clear chip at the bottom-right; flag = bottom-left. */ .sdc-card__frame .sdc-card__badge--num{top:auto;left:auto;bottom:-2px;right:-2px;font-size:12px;font-weight:800;padding:3px 9px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);} .sdc-card__frame .sdc-card__badge--flag{top:auto;right:auto;bottom:-2px;left:-2px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);} .sdc-card__badge--text{top:8px;right:8px;background:rgba(15,23,42,.72);color:#fff;font-size:11px;padding:3px 7px;border-radius:var(--sdc-radius-pill);} /* body */ .sdc-card__body{display:flex;flex-direction:column;gap:6px;padding:14px 16px;flex:1 1 auto;} .sdc-card__eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--sdc-brand);} .sdc-card__h{margin:0;font-size:16px;font-weight:800;line-height:1.25;} .sdc-card__title{color:var(--sdc-ink);text-decoration:none;} a.sdc-card__title:hover{color:var(--sdc-link);}/* WS-7: link role (card on token surface → dark 3.62→7.36) */ .sdc-card__meta{display:flex;flex-direction:column;gap:3px;margin-top:2px;} .sdc-card__row{display:flex;justify-content:space-between;gap:10px;font-size:13px;min-width:0;} .sdc-card__row .k{color:var(--sdc-muted);white-space:nowrap;} .sdc-card__row .v{color:var(--sdc-ink-soft);font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;} .sdc-card__line{font-size:13px;color:var(--sdc-muted);} .sdc-card__desc{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--sdc-muted);} /* foot — button always pinned to the bottom for equal alignment across cards */ .sdc-card__foot{padding:0 16px 16px;margin-top:auto;} .sdc-card__btn{display:block;text-align:center;padding:9px 14px;background:var(--sdc-brand);color:#fff;font-weight:700;font-size:13px;border-radius:var(--sdc-radius-sm);text-decoration:none;transition:background var(--sdc-transition);} .sdc-card__btn:hover{background:var(--sdc-brand-dark);color:#fff;} /* WS-3: the card hover-lift is defined once above (.sdc-card--link:hover, token shadow). This duplicate rule (which hardcoded a different shadow and applied to non-clickable cards too) was removed. */ /* WS-6: the forced 2-col override was removed (it fought the auto-fill). The auto-fill base handles the ladder; only a ≤380px single-column safety guard remains so ultra-narrow phones never get two very-narrow cards. */ @media(max-width:380px){.sdc-card-grid{grid-template-columns:1fr;}} /* League/Cup grid: EXACTLY 4 (desktop) / 2 (tablet) / 1 (mobile) — overrides the auto-fill base above via the double-class specificity, so the messy variable-column layout becomes a clean, uniform competition grid. */ /* WS-6: .sdc-card-grid--comp no longer forces an explicit 4→2→1 ladder — competition cards now use the same content-driven auto-fill as every other entity grid (the base .sdc-card-grid above). */ /* ===== Directory pages (.sdc-dir) — reusable hero + filters + pager (H2H, future directories) ===== */ .sdc-dir{max-width:1180px;margin:0 auto;padding:8px 0 40px;} /* WS-4: directory (index) gets a COMPACT LIGHT hero — a subtle rounded panel (not a dark flagship band): low height, title + intro + count, consistent radius/tokens, lightweight so it never over-weights the index. */ .sdc-dir__hero{text-align:center;margin:0 0 22px;padding:24px 20px;background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-lg);} .sdc-dir__title{font-size:clamp(26px,4vw,38px);font-weight:800;color:var(--sdc-ink);margin:0 0 8px;} .sdc-dir__intro{font-size:16px;line-height:1.55;color:var(--sdc-muted);max-width:640px;margin:0 auto;} .sdc-dir__count{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--sdc-brand);background:var(--sdc-brand-tint);padding:4px 12px;border-radius:var(--sdc-radius-pill);} .sdc-dir__filters{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin:0 0 22px;} .sdc-dir__search{display:flex;gap:8px;flex:1;min-width:240px;} .sdc-dir__input{flex:1;padding:10px 14px;border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-sm);background:var(--sdc-surface);color:var(--sdc-ink);font-size:14px;} .sdc-dir__go{padding:10px 16px;background:var(--sdc-brand);color:#fff;border:0;border-radius:var(--sdc-radius-sm);font-weight:700;font-size:14px;cursor:pointer;} .sdc-dir__go:hover{background:var(--sdc-brand-dark);} .sdc-dir__selects{display:flex;flex-wrap:wrap;gap:10px;} .sdc-dir__select{padding:10px 12px;border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-sm);background:var(--sdc-surface);color:var(--sdc-ink);font-size:14px;cursor:pointer;} .sdc-dir__empty{padding:26px 16px;text-align:center;color:var(--sdc-muted);background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius);} .sdc-dir__pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px;} .sdc-dir__pg{font-weight:700;font-size:14px;color:var(--sdc-link);text-decoration:none;padding:8px 14px;border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-sm);}/* WS-7: pager text = link role (transparent → token surface, dark 3.62→7.36) */ .sdc-dir__pg:hover{background:var(--sdc-brand-tint);} .sdc-dir__pgnum{font-size:14px;color:var(--sdc-muted);} /* H2H cards: two logos read better slightly larger */ .sdc-h2h-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));} /* ===== Head-to-Head dashboard + page (.sdc-h2h) ===== */ .sdc-h2h-page{max-width:1040px;margin:0 auto;padding:8px 0 40px;} .sdc-h2h__title{font-size:clamp(22px,3.4vw,32px);font-weight:800;color:var(--sdc-ink);text-align:center;margin:0 0 16px;} .sdc-h2h__hero{display:flex;align-items:center;justify-content:center;gap:clamp(16px,5vw,48px);padding:22px 16px;background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius);margin:0 0 22px;} .sdc-h2h__heroteam{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0;} .sdc-h2h__herologo{width:84px;height:84px;object-fit:contain;} .sdc-h2h__herologo--ph{background:var(--sdc-line);border-radius:var(--sdc-radius-sm);} .sdc-h2h__heroname{font-size:16px;font-weight:800;color:var(--sdc-ink);} .sdc-h2h__herovs{font-size:20px;font-weight:800;color:var(--sdc-muted);text-transform:uppercase;} .sdc-h2h__intro{font-size:16px;line-height:1.6;color:var(--sdc-ink-soft);margin:0 0 22px;} .sdc-h2h__intro p{margin:0;} .sdc-h2h__note{padding:22px 16px;text-align:center;color:var(--sdc-muted);background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius);} .sdc-h2h{display:grid;gap:22px;} .sdc-h2h__sec{background:var(--sdc-surface);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius);padding:16px 18px;} .sdc-h2h__h{display:flex;align-items:center;gap:8px;font-size:var(--sdc-fs-card-title);font-weight:var(--sdc-fw-heavy);line-height:var(--sdc-lh-heading);color:var(--sdc-ink);margin:0 0 14px;}/* WS-8: subsection header role (15→16) */ .sdc-h2h__ic{font-size:17px;} /* shared totals grid */ .sdc-h2h__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;} .sdc-h2h__cell{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-sm);text-align:center;} .sdc-h2h__val{font-size:22px;font-weight:800;color:var(--sdc-ink);} .sdc-h2h__lbl{font-size:12px;color:var(--sdc-muted);text-transform:uppercase;letter-spacing:.4px;} /* A vs B comparison */ .sdc-h2h__cmphead{display:flex;justify-content:space-between;font-size:13px;font-weight:800;color:var(--sdc-ink);margin-bottom:10px;} .sdc-h2h__cmp{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:12px;margin-bottom:12px;} .sdc-h2h__cval{font-size:18px;font-weight:800;color:var(--sdc-ink);text-align:center;} .sdc-h2h__cval--b{color:var(--sdc-muted);} .sdc-h2h__cmid{display:flex;flex-direction:column;gap:5px;min-width:0;} .sdc-h2h__clbl{font-size:12px;color:var(--sdc-muted);text-align:center;text-transform:uppercase;letter-spacing:.4px;} .sdc-h2h__cbar{position:relative;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;} .sdc-h2h__cbar-a{position:absolute;left:0;top:0;bottom:0;background:var(--sdc-brand);border-radius:4px;} /* recent meetings */ .sdc-h2h__meets{display:grid;gap:8px;} .sdc-h2h__meet{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-sm);font-size:14px;} .sdc-h2h__mdate{color:var(--sdc-muted);font-size:12px;} .sdc-h2h__mteams{display:flex;align-items:center;gap:10px;justify-content:center;min-width:0;} .sdc-h2h__mh,.sdc-h2h__ma{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;} .sdc-h2h__ma{text-align:left;}.sdc-h2h__mh{text-align:right;} .sdc-h2h__mscore{font-weight:800;color:var(--sdc-ink);white-space:nowrap;} .sdc-h2h__mcomp{color:var(--sdc-muted);font-size:12px;text-align:right;} /* form comparison */ .sdc-h2h__form{display:grid;gap:12px;} .sdc-h2h__formrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .sdc-h2h__formname{font-weight:700;color:var(--sdc-ink);min-width:120px;} /* key players two columns */ .sdc-h2h__leaders,.sdc-h2h-teams{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .sdc-h2h__leadname{font-size:14px;font-weight:800;color:var(--sdc-ink);margin:0 0 8px;} .sdc-h2h__rlinks{display:flex;flex-wrap:wrap;gap:10px;} .sdc-h2h__rlinks a{display:inline-block;padding:8px 14px;background:var(--sdc-bg-subtle);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius-pill);font-size:14px;font-weight:600;color:var(--sdc-ink);text-decoration:none;} .sdc-h2h__rlinks a:hover{background:var(--sdc-brand-tint);} @media(max-width:600px){ .sdc-h2h__leaders,.sdc-h2h-teams{grid-template-columns:1fr;} .sdc-h2h__meet{grid-template-columns:1fr;text-align:center;gap:4px;} .sdc-h2h__mcomp{text-align:center;} } /* ===== Reusable H2H widget (.sdc-h2h-w) — Match widget & anywhere via [sdc_h2h_widget] ===== */ .sdc-h2h-w{background:var(--sdc-surface);border:1px solid var(--sdc-line);border-radius:var(--sdc-radius);padding:16px 18px;} .sdc-h2h-w__title{display:flex;align-items:center;gap:8px;font-size:var(--sdc-fs-card-title);font-weight:var(--sdc-fw-heavy);line-height:var(--sdc-lh-heading);color:var(--sdc-ink);margin:0 0 14px;}/* WS-8: subsection header role (15→16) */ .sdc-h2h-w .sdc-h2h{gap:16px;} .sdc-h2h-w .sdc-h2h__sec{border:0;padding:0;background:transparent;} .sdc-h2h-w__more{margin:14px 0 0;} .sdc-h2h-w__btn{display:inline-block;padding:10px 16px;background:var(--sdc-brand);color:#fff;font-weight:700;font-size:14px;border-radius:var(--sdc-radius-sm);text-decoration:none;} .sdc-h2h-w__btn:hover{background:var(--sdc-brand-dark);color:#fff;} /* ===== Keyboard focus visibility now lives in the shared assets/sdc-base.css (SDC-scoped :focus-visible for all interactive elements inside any sdc- subtree — covers league + match + livescore + generated surfaces uniformly, replacing the old per-selector allowlist). Edit it there. (WS-2) ===== */ /* ============================================================================================================ WS-2 — directory/landing styles moved here from per-render inline