/* KickoffDNA — app.css (Round 2 handoff, Instrument direction) Tokens: light by default, dark via prefers-color-scheme, [data-theme] on overrides. Sections 1–2 are redesigned (tokens, chrome, livescores index). Section 3 is the as-built component CSS remapped onto the new tokens; it is replaced page by page in later rounds. */ :root, [data-theme="light"] { --bg: #F4F3EE; --surface: #FFFFFF; --surface-raised: #E9E7DF; --rule: #DEDCD3; --ink: #14181F; --ink-2: #66707D; --ink-3: #A3A9B1; --brand: #1F8FFF; --brand-2: #7FD7FF; --on-brand: #0B1220; --live: #DA2E24; --positive: #1E7F48; --caution: #B8860B; --negative: #C0392B; --series-away: #D97A1E; --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --series-home: var(--ink); --series-expected: var(--ink-2); /* legacy aliases so not-yet-redesigned pages render on the new tokens */ --meta: var(--ink-2); --clock: var(--positive); --paused: var(--caution); --surface-2: var(--surface-raised); --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 12px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --shadow-1: 0 1px 2px rgba(20,24,31,.06); --shadow-2: 0 6px 20px rgba(20,24,31,.12); color-scheme: light; } [data-theme="dark"] { --bg: #0B1220; --surface: #131C2B; --surface-raised: #1B2637; --rule: #26324A; --ink: #EEF2F7; --ink-2: #9AA8BC; --ink-3: #5E6C82; --brand: #3AA9FF; --brand-2: #7FD7FF; --on-brand: #0B1220; --live: #FF5A4F; --positive: #3FD37A; --caution: #E8C33A; --negative: #FF7B6E; --series-away: #FFA24A; --series-home: var(--ink); --series-expected: var(--ink-2); --meta: var(--ink-2); --clock: var(--positive); --paused: var(--caution); --surface-2: var(--surface-raised); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 24px rgba(0,0,0,.5); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B1220; --surface: #131C2B; --surface-raised: #1B2637; --rule: #26324A; --ink: #EEF2F7; --ink-2: #9AA8BC; --ink-3: #5E6C82; --brand: #3AA9FF; --brand-2: #7FD7FF; --on-brand: #0B1220; --live: #FF5A4F; --positive: #3FD37A; --caution: #E8C33A; --negative: #FF7B6E; --series-away: #FFA24A; --series-home: var(--ink); --series-expected: var(--ink-2); --meta: var(--ink-2); --clock: var(--positive); --paused: var(--caution); --surface-2: var(--surface-raised); --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 24px rgba(0,0,0,.5); color-scheme: dark; } } * { box-sizing: border-box; } html { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.45; -webkit-text-size-adjust: 100%; font-feature-settings: "tnum" 1, "cv05" 1; } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } a:hover { color: inherit; } img, svg { display: block; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; } /* ── Masthead ── */ .masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; width: 100%; max-width: 1180px; margin: 0 auto; padding: 12px 16px 10px; border-bottom: 1px solid var(--rule); } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; line-height: 1; } .brand .mark { height: 28px; width: auto; } .brand span { color: var(--brand); } /* mark colours: two-tone in dark, solid brand in light (D1) */ .m-wave, .m-strand-a { stroke: var(--brand); } .m-strand-b { stroke: var(--brand); stroke-width: 2.2; } .m-ball { fill: var(--brand); } .m-ball-in { fill: var(--bg); } [data-theme="dark"] .m-strand-b { stroke: var(--brand-2); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-strand-b { stroke: var(--brand-2); } } .masthead-nav { display: none; gap: 2px; } .masthead-nav a { padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; letter-spacing: .01em; } .masthead-nav a:hover { color: var(--ink); } .masthead-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); } /* nav targets with no page yet (leagues teams players search): visible, inactive, no hover — see nav_live in base.html */ .masthead-nav a[aria-disabled="true"], .masthead-nav a[aria-disabled="true"]:hover { color: var(--ink-3); cursor: default; } .masthead-right { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; } .live-ind { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; } /* the Instrument signature: the mark's pulse-line fragment is the live indicator */ .live-dot { width: 26px; height: 14px; } .live-dot path { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 54; stroke-dashoffset: 0; } #live-indicator[data-count]:not([data-count="0"]) .live-dot path { stroke: var(--live); animation: pulse 1.6s cubic-bezier(.4,0,.2,1) infinite; } #live-indicator[data-count]:not([data-count="0"]) .live-ind { color: var(--ink); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; cursor: pointer; color: var(--ink-2); padding: 0; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .i-sun, .theme-toggle .i-moon, .theme-toggle .i-sys { display: none; } :root[data-theme="light"] .theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: block; } :root:not([data-theme]) .theme-toggle .i-sys { display: block; } .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ── Page ── */ .page { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px 88px; } .foot { display: flex; gap: 10px; justify-content: center; padding: 18px 16px 90px; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--rule); } .pill { border: 1px solid var(--rule); border-radius: 2px; padding: 1px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .pill-replay { border-color: var(--caution); color: var(--caution); } /* ── Date strip: 7 whole tiles per viewport, snap, no arrows on small screens ── */ .datestrip-wrap { position: relative; margin: 0 -16px; border-bottom: 1px solid var(--rule); } .datestrip-month { display: none; } .datestrip { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; } .datestrip::-webkit-scrollbar { display: none; } .date { flex: 0 0 calc(100% / 7); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 56px; color: var(--ink-2); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; border-right: 1px solid var(--rule); } .date:last-child { border-right: 0; } .date .dom { font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; line-height: 1.1; margin-top: 2px; } .date.is-today .dow { color: var(--live); } .date.is-selected { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } /* the one brand-blue signature */ .date.is-selected .dom, .date.is-selected.is-today .dow { color: var(--on-brand); } .date.is-selected .dom { font-weight: 700; } .datestrip-wrap::before, .datestrip-wrap::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 20px; pointer-events: none; z-index: 1; transition: opacity .15s; } .datestrip-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .datestrip-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); } .datestrip-wrap[data-at-start]::before, .datestrip-wrap[data-at-start] .strip-prev { opacity: 0; pointer-events: none; } .datestrip-wrap[data-at-end]::after, .datestrip-wrap[data-at-end] .strip-next { opacity: 0; pointer-events: none; } .strip-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); font-size: 18px; line-height: 1; padding: 0 0 2px; cursor: pointer; } .strip-prev { left: 6px; } .strip-next { right: 6px; } .strip-arrow:hover { border-color: var(--ink); } /* ── Day line ── */ .dayline { font-family: var(--display); font-weight: 500; font-size: 22px; letter-spacing: -.015em; line-height: 1.1; margin: 18px 0 10px; } .dayline small { display: block; margin-top: 5px; font-family: var(--body); font-weight: 500; font-size: 11px; color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; } /* ── League groups: rules, not cards ── */ .league { margin: 0 0 20px; } .league-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0 6px; white-space: nowrap; background: var(--bg); border-bottom: 1px solid var(--ink); font-family: var(--body); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } .league-head .comp-link { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .league-head .comp-link:hover { text-decoration: underline; text-underline-offset: 3px; } .league-head .stage { margin-left: auto; flex: none; font-weight: 500; color: var(--ink-2); letter-spacing: .06em; } .badge { width: 20px; height: 20px; object-fit: contain; } .badge-league { width: 16px; height: 16px; } /* D6 fallback: rounded square on surface-raised, one initial, ink-2 type */ .badge-ph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: color-mix(in oklab, var(--ink) 7%, transparent); color: var(--ink-2); font-size: 8.5px; font-weight: 700; letter-spacing: .02em; flex: none; font-family: var(--display); text-transform: uppercase; } .badge-ph.badge-league { width: 16px; height: 16px; font-size: 7.5px; border-radius: 4px; } /* ── Fixture rows ── */ .fixtures { list-style: none; margin: 0; padding: 0; } .fixture { border-bottom: 1px solid var(--rule); } .fixture-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 6px 0; } .fixture-link:hover { background: var(--surface); } /* the when-cell: one 44px square; state blocks are tinted or outlined, scheduled rows are plain text in the same column */ .when { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .kickoff { color: var(--ink); } .clock { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1; } .clock:empty { display: none; } .teams { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .team { display: flex; align-items: center; gap: 8px; min-width: 0; height: 20px; font-size: 14px; font-weight: 400; } .team .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thru { color: var(--positive); font-size: 10px; line-height: 1; } .thru:empty { display: none; } .reds:not(:empty) { display: inline-block; width: 8px; height: 11px; border-radius: 1px; background: var(--live); color: transparent; font-size: 0; margin-left: 2px; } .reds:not(:empty)[data-n]:not([data-n="1"]) { width: auto; min-width: 8px; padding: 0 3px; color: #fff; font-size: 9px; font-weight: 700; line-height: 11px; text-align: center; } .ctx { display: none; } .score { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; min-width: 20px; } .num { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 20px; font-variant-numeric: tabular-nums; min-width: 1ch; text-align: right; letter-spacing: -.02em; } .num.flip { animation: flip .45s ease-out; } /* state buckets */ .bucket-scheduled .num { color: var(--ink-3); } .bucket-scheduled .kickoff { color: var(--ink); } .bucket-live .kickoff { display: none; } .bucket-live .when { background: color-mix(in oklab, var(--positive) 14%, transparent); } .bucket-live .clock { color: var(--positive); text-transform: none; letter-spacing: 0; font-family: var(--display); font-size: 15px; font-weight: 700; } .bucket-live[data-ticking="1"] .clock::after { content: "′"; } .bucket-live .when:has(.clock.is-break) { background: color-mix(in oklab, var(--live) 14%, transparent); } .bucket-live .clock.is-break { color: var(--live); font-size: 12px; letter-spacing: .06em; } .bucket-live .num { color: var(--ink); } .bucket-paused .kickoff { display: none; } .bucket-paused .when { background: color-mix(in oklab, var(--caution) 16%, transparent); } .bucket-paused .clock { color: var(--caution); font-size: 11px; letter-spacing: .04em; } .bucket-terminal .kickoff { display: none; } .bucket-terminal .when { box-shadow: inset 0 0 0 1px var(--rule); } .bucket-terminal .clock { color: var(--ink-2); } .bucket-terminal .team .name { color: var(--ink-2); } .bucket-terminal .team.winner .name { font-weight: 600; color: var(--ink); } .bucket-terminal .num { color: var(--ink-2); } .empty { text-align: center; padding: 40px 12px; color: var(--ink-2); } .empty a { text-decoration: underline; text-underline-offset: 3px; } /* ── Rail (≥900px) : date picker + live now ── */ .rail { display: none; } .rail-h { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .rail-live { list-style: none; margin: 0 0 22px; padding: 0; } .rail-live li { display: grid; grid-template-columns: 40px 1fr auto; gap: 0 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13px; } .rail-live .rl-clock { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 4px; background: color-mix(in oklab, var(--positive) 14%, transparent); font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--positive); } .rail-live .rl-clock.is-break { background: color-mix(in oklab, var(--live) 14%, transparent); color: var(--live); font-size: 12px; letter-spacing: .06em; font-family: var(--body); font-weight: 600; } .rail-live .rl-teams { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rail-live .rl-teams span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-live .rl-score { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; font-family: var(--display); font-weight: 700; font-size: 14px; } .rail-note { font-size: 12px; color: var(--ink-2); margin: 0; } .rail-live:empty + .rail-note::before { content: "Nothing live right now. "; } .rail-live li.bucket-paused .rl-clock { background: color-mix(in oklab, var(--caution) 16%, transparent); color: var(--caution); font-size: 11px; font-family: var(--body); font-weight: 600; } /* ── Bottom nav (mobile) ── */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(6, 1fr); background: var(--bg); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); } .bottomnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 56px; font-size: 10px; font-weight: 500; letter-spacing: .04em; color: var(--ink-2); } .bottomnav a[aria-current="page"] { color: var(--ink); } .bottomnav a[aria-current="page"]::before { content: ""; position: absolute; top: -1px; width: 32px; height: 2px; background: var(--ink); } .bottomnav a[aria-disabled="true"] { color: var(--ink-3); cursor: default; } /* ── Motion ── */ @keyframes pulse { 0% { stroke-dashoffset: 54; } 45%, 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -54; } } @keyframes flip { 0% { transform: translateY(-40%); opacity: 0; } 100% { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .live-dot path, .num.flip { animation: none !important; } } /* ── ≥560: wider grid, quiet context column (round / leg) ── */ @media (min-width: 560px) { .fixture-link { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0 14px; } .team { font-size: 15px; } .ctx { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; font-size: 11px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .ctx b { font-weight: 500; color: var(--ink-2); } } /* ── ≥900: two columns — fixtures + sticky rail; nav moves into the masthead ── */ @media (min-width: 900px) { .masthead { padding: 16px 24px 0; } .brand { padding-bottom: 14px; } .brand .mark { height: 30px; } .masthead-nav { display: flex; align-self: end; } .masthead-nav a { padding: 10px 12px 14px; margin-bottom: -1px; } .masthead-right { padding-bottom: 14px; } .bottomnav { display: none; } .page { display: grid; grid-template-columns: minmax(0, 680px) 320px; justify-content: space-between; column-gap: 56px; padding: 0 24px 40px; align-items: start; } .datestrip-wrap { grid-column: 2; grid-row: 1; margin: 28px 0 0; border: 0; } .datestrip-month { display: block; padding: 0 0 6px; border-bottom: 1px solid var(--ink); margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); } .date:first-child { grid-column: var(--col, auto); } /* Monday-start week; --col set by the template */ .datestrip-wrap::before, .datestrip-wrap::after, .strip-arrow { display: none; } .datestrip { display: grid; grid-template-columns: repeat(7, 1fr); overflow: visible; gap: 2px; } .date { height: 44px; border: 0; border-radius: 4px; } .date .dow { display: none; } .date.is-today:not(.is-selected) .dom { color: var(--live); } .date:last-child { border: 0; } .dayline { grid-column: 1; grid-row: 1; margin: 30px 0 12px; font-size: clamp(22px, 2.6vw, 28px); align-self: end; } .league { grid-column: 1; } .rail { display: block; grid-column: 2; grid-row: 2 / span 12; position: sticky; top: 24px; margin-top: 22px; } .fixture-link { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 0 14px; padding: 7px 0; } .num { font-size: 19px; } .foot { padding-bottom: 24px; } } /* ═══ 3. As-built components on the new tokens (to be redesigned page by page) ═══ */ /* ── Match hub ─────────────────────────────────────────────────────────────── */ .tabbar { display: flex; align-items: center; gap: 4px; position: sticky; top: 0; background: var(--bg); z-index: 2; } .tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 10px; flex: 1; min-width: 0; scroll-behavior: smooth; } .tabarrow { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; } .tabarrow:hover { color: var(--ink); } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font: 500 13px var(--body); cursor: pointer; } .tab.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); } .panel { display: none; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px; } .panel.is-active { display: block; } .ph { font-family: var(--display); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 8px; color: var(--ink-2); } .muted { color: var(--ink-2); font-size: 13px; margin: 6px 0; } .chart { width: 100%; min-height: 160px; } .chart svg { width: 100%; height: auto; display: block; } .chart .axis { stroke: var(--rule); stroke-width: 1; } .chart .tick { font: 10px var(--body); fill: var(--ink-2); } .chart .home { stroke: var(--positive); fill: none; stroke-width: 2; } .chart .away { stroke: var(--series-away); fill: none; stroke-width: 2; } .chart .fill-home { fill: var(--positive); opacity: .12; } .chart .fill-away { fill: var(--series-away); opacity: .12; } .chart .goal { fill: var(--live); } .chart .goal-label { font: 600 10px var(--display); fill: var(--ink); } .chart .ghost-home { stroke: var(--positive); fill: none; stroke-width: 1.5; stroke-dasharray: 5 3; opacity: .6; } .chart .ghost-away { stroke: var(--series-away); fill: none; stroke-width: 1.5; stroke-dasharray: 5 3; opacity: .6; } .chart .strip-all { stroke: var(--ink); fill: none; stroke-width: 2; } .chart .strip-home { stroke: var(--positive); fill: none; stroke-width: 1.5; opacity: .7; } .chart .strip-away { stroke: var(--series-away); fill: none; stroke-width: 1.5; opacity: .7; } .pz-k { display: inline-block; padding-left: 14px; position: relative; } .pz-k::before { content: ""; position: absolute; left: 0; top: 55%; width: 10px; height: 2px; background: var(--ink); } .pz-k-home::before { background: var(--positive); } .pz-k-away::before { background: var(--series-away); } .pz-note { margin: 4px 0 8px; } .pz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 12px; } .pz-grid.pz-one { grid-template-columns: 1fr; } .pz-grid h4 { margin: 0 0 4px; font-size: 13px; } .pz-t { margin: 8px 0 2px; font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); } .pz { display: grid; grid-template-columns: minmax(120px, 1.2fr) 1fr 44px 28px; align-items: center; gap: 6px; margin: 2px 0; } .pz-thin { opacity: .45; } .pz-l { color: var(--ink); } .pz-v { text-align: right; font-variant-numeric: tabular-nums; } .pz-n { text-align: right; color: var(--ink-2); } .pz-b { position: relative; height: 8px; background: var(--rule); border-radius: 2px; overflow: hidden; } .pz-b i { position: absolute; top: 0; bottom: 0; width: 0; max-width: 50%; } .pz-b .pz-pos { left: 50%; background: var(--positive); border-radius: 0 2px 2px 0; } .pz-b .pz-neg { right: 50%; background: var(--negative); border-radius: 2px 0 0 2px; } .pz-b::after { content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px; background: var(--ink-2); } .evlist, .comlist { list-style: none; margin: 0; padding: 0; } .evlist li, .comlist li { display: grid; grid-template-columns: 44px 22px 1fr; gap: 8px; align-items: center; padding: 8px 2px; border-top: 1px solid var(--rule); font-size: 14px; } .evlist li:first-child, .comlist li:first-child { border-top: 0; } .comlist li { grid-template-columns: 44px 1fr; } .ev-min { font-family: var(--display); font-weight: 600; color: var(--positive); font-variant-numeric: tabular-nums; } .ev-ico { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 11px; font-weight: 700; } .ev-goal .ev-ico { background: var(--ink); color: var(--surface); border-radius: 50%; } .ev-own_goal .ev-ico { background: var(--live); color: var(--surface); border-radius: 50%; } .ev-yellow_card .ev-ico { background: var(--caution); } .ev-red_card .ev-ico, .ev-yellow_red_card .ev-ico { background: var(--live); } .ev-substitution .ev-ico { background: var(--surface-raised); color: var(--ink); } .ev-txt b { font-weight: 600; } .ev-txt .sub-off { color: var(--live); } .ev-txt .sub-on { color: var(--positive); } .ev-txt small { color: var(--ink-2); margin-left: 6px; } .evlist li.away { text-align: right; grid-template-columns: 1fr 22px 44px; } .evlist li.away .ev-min { order: 3; } .evlist li.away .ev-ico { order: 2; } .evlist li.away .ev-txt { order: 1; } .comlist li.is-goal { background: color-mix(in oklab, var(--positive) 10%, transparent); } .comlist li.is-important .com-txt { font-weight: 600; } .com-txt { font-size: 13.5px; } .seg { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .seg button { border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); border-radius: 6px; padding: 4px 10px; font: 500 12px var(--body); cursor: pointer; } .seg button.is-active { border-color: var(--positive); color: var(--positive); } .statgrid { display: flex; flex-direction: column; gap: 8px; } .statrow { display: grid; grid-template-columns: 36px 1fr 110px 1fr 36px; align-items: center; gap: 8px; font-size: 13px; } .statrow .v { font-family: var(--display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; } .statrow .v.home { text-align: right; } .statrow .v.away { text-align: left; } .statrow .lbl { text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); } .bar { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; } .bar i { display: block; height: 100%; width: 0; transition: width .5s ease; } .bar.home { transform: scaleX(-1); } .bar.home i { background: var(--positive); } .bar.away i { background: var(--series-away); } .pitch-wrap { position: relative; } .pitch { position: relative; width: 100%; aspect-ratio: 3 / 4; background: linear-gradient(180deg,var(--positive) 0 12.5%,#2A7340 12.5% 25%,var(--positive) 25% 37.5%,#2A7340 37.5% 50%,var(--positive) 50% 62.5%,#2A7340 62.5% 75%,var(--positive) 75% 87.5%,#2A7340 87.5%); border-radius: 8px; overflow: hidden; } .pitch::before { content: ""; position: absolute; inset: 4%; border: 2px solid rgba(255,255,255,.55); border-radius: 4px; } .pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.55); border-radius: 50%; } .pitch .prow { position: absolute; left: 0; right: 0; display: flex; justify-content: space-evenly; align-items: center; } .pl { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; } .pl .shirt { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; font: 700 13px var(--display); border: 2px solid var(--ink); position: relative; } .pl .rt { position: absolute; top: -8px; right: -12px; background: var(--caution); color: #1a1a1a; font: 700 10px var(--display); padding: 1px 4px; border-radius: 4px; } .pl .rt.hi { background: var(--positive); color: var(--surface); } .pl .rt.lo { background: var(--live); color: var(--surface); } .pl .nm { font-size: 10px; color: var(--surface); text-shadow: 0 1px 2px rgba(0,0,0,.6); max-width: 64px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bench { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .bench span { font-size: 12px; background: var(--bg); border-radius: 999px; padding: 3px 9px; color: var(--ink); } .bench span b { font-family: var(--display); color: var(--ink-2); margin-right: 4px; } /* lineups v2: pictures, confirmed/predicted badge, player sheet */ button.pl { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; } .pl .pl-pic { position: relative; display: inline-block; } .pl .pl-img { width: 38px; height: 38px; border: 2px solid #fff; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45); } .pl .nm b { font-family: var(--display); font-weight: 700; color: var(--surface); margin-right: 2px; } .pl .rt { top: -6px; right: -10px; } .psheet { position: fixed; inset: 0; z-index: 30; } .psheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.45); } .psheet-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; background: var(--surface); border-radius: 14px 14px 0 0; padding: 16px 16px 20px; box-shadow: 0 -4px 20px rgba(0,0,0,.25); } @media (min-width: 640px) { .psheet-card { left: 50%; right: auto; bottom: 50%; width: 420px; transform: translate(-50%, 50%); border-radius: 14px; } } .psheet-x { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink-2); font-size: 20px; cursor: pointer; } .psheet-card { padding: 0; display: flex; flex-direction: column; } .psheet-card [data-role="psheet-body"] { display: flex; flex-direction: column; min-height: 0; max-height: inherit; } .pk-head { display: flex; align-items: center; gap: 12px; padding: 16px 52px 12px 16px; } .pk-head .pimg { width: 56px; height: 56px; } .pk-who { display: flex; flex-direction: column; min-width: 0; } .pk-name { font-size: 16px; font-weight: 700; } .pk-sub { font-size: 12px; color: var(--ink-2); } .pk-strip { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; margin: 0 16px; padding: 10px 8px; background: var(--bg); border-radius: 10px; text-align: center; } .pk-strip > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; } .pk-strip small { font-size: 11px; color: var(--ink-2); } .pk-strip b { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2; } .pk-min { color: var(--live); } .pk-dash { color: var(--ink-2); } .pk-rt { background: var(--caution); color: #1a1a1a; border-radius: 6px; padding: 2px 8px; font-size: 14px !important; } .pk-rt.hi { background: var(--positive); color: var(--surface); } .pk-rt.lo { background: var(--live); color: var(--surface); } .pk-evs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 20px; align-items: center; } .pk-ev { display: inline-flex; align-items: baseline; gap: 2px; font-size: 14px; } .pk-ev small { font-size: 10px; color: var(--ink-2); } .pk-body { overflow-y: auto; padding: 4px 16px 8px; flex: 1 1 auto; min-height: 0; } .pk-g { margin: 12px 0 4px; font: 700 13px var(--display); color: var(--ink); } .pk-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 13px; } .pk-row span { color: var(--ink); } .pk-row b { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; } .pk-note { padding: 10px 16px; } .pk-foot { padding: 10px 16px 16px; border-top: 1px solid var(--rule); background: var(--surface); } .pk-btn { display: block; text-align: center; background: var(--ink); color: var(--surface); text-decoration: none; font: 700 12px var(--display); letter-spacing: .06em; text-transform: uppercase; border-radius: 8px; padding: 11px 12px; } .pk-btn:hover { opacity: .9; } .odds .mkt { margin-bottom: 12px; } .odds .mkt h4 { margin: 0 0 6px; font: 600 12px var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); } .odds .sel { display: flex; gap: 6px; flex-wrap: wrap; } .odds .sel span { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 8px; background: var(--bg); border-radius: 8px; font-size: 12px; color: var(--ink-2); } .odds .sel span b { font-family: var(--display); font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; } .odds .sel span.susp { opacity: .45; } .odds .upd { font-size: 11px; color: var(--ink-2); } /* Overview (silver) */ .kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 6px; font-size: 13px; } .kv dt { color: var(--ink-2); } .kv dd { margin: 0; } .tvlist { list-style: none; margin: 0; padding: 0; font-size: 13px; } .tvlist li { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--rule); } .tv-country { flex: 0 0 140px; color: var(--ink-2); } .tv-stations { flex: 1; } /* Standings / Form (silver) */ .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th, .tbl td { padding: 4px 6px; border-bottom: 1px solid var(--rule); text-align: right; white-space: nowrap; } .tbl th.team, .tbl td.team { text-align: left; width: 100%; white-space: normal; } .tbl th { color: var(--ink-2); font-weight: 500; } .tbl tr.is-us td { background: var(--surface-2, rgba(0,0,0,.04)); font-weight: 600; } .tbl td.pts { font-weight: 600; } .formltrs i { display: inline-block; width: 16px; text-align: center; font-style: normal; font-size: 11px; border-radius: 3px; margin-right: 2px; color: var(--surface); } .f-W { background: var(--positive); } .f-D { background: #999; } .f-L { background: var(--negative); } .f-\? { background: #ccc; } .formsum { font-size: 13px; margin: 0 0 6px; } .formlist { list-style: none; margin: 0; padding: 0; font-size: 13px; } .formlist li { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--rule); } .formlist .opp { flex: 1; } .formlist .side { color: var(--ink-2); width: 12px; } /* Stats context / absences (silver) */ .tbl.ctx th.l, .tbl.ctx td.l { text-align: left; } .tbl.ctx td.lbl, .tbl.ctx th:nth-child(3) { text-align: center; color: var(--ink-2); } .tbl.ctx td small { color: var(--ink-2); font-size: 10px; } .absences { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; } .absences h4 { margin: 0 0 4px; font-size: 13px; } .abslist { list-style: none; margin: 0; padding: 0; } .abslist li { padding: 3px 0; border-bottom: 1px solid var(--rule); } .abs-cat { font-size: 10px; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; color: var(--surface); background: #999; } .abs-injury { background: var(--negative); } .abs-suspension { background: var(--caution); } /* Pre-match odds / referee (silver) */ .sel .line { font-size: 11px; color: var(--ink-2); margin-right: 6px; } .sel span.incomplete { opacity: .55; } .sel small.pin { color: var(--positive); } .tbl td.z.hi { color: var(--negative); } .tbl td.z.lo { color: var(--positive); } /* H2H / TeamDNA (silver) */ .h2hbar { display: flex; font-size: 13px; font-weight: 600; margin: 4px 0; } .h2hbar span { padding: 4px 8px; } .h2hbar .home { flex: 1; } .h2hbar .draw { color: var(--ink-2); font-weight: 500; } .h2hbar .away { flex: 1; text-align: right; } .tbl.dna tr.grp td { padding-top: 10px; font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); border-bottom: 0; } .timing { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 12px; } .timing h4, .dnafoot h4 { margin: 0 0 4px; font-size: 13px; } .tm { display: grid; grid-template-columns: 44px 1fr 22px 1fr 22px; align-items: center; gap: 4px; margin: 2px 0; } .tm-b { color: var(--ink-2); } .tm-n { text-align: right; } .tm i { display: block; height: 8px; border-radius: 2px; } .tm-gf { background: var(--positive); } .tm-ga { background: var(--negative); } .dnafoot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } .tm1 { grid-template-columns: 44px 1fr 22px; } .fdna-head { font-size: 13px; margin: 0 0 6px; } .fdna-head .pill { margin-right: 6px; } .fdna-streaks { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; } .fdna-streaks li { margin: 2px 0; } .fdna-goals { list-style: none; padding: 0; margin: 4px 0 6px; font-size: 13px; } .fdna-goals .tm-b { display: inline-block; width: 40px; color: var(--ink-2); } .d-up { color: var(--positive); } .d-down { color: var(--negative); } /* ── standings: qualification buckets, live arrows, score chips, legend ── */ .tbl.standings td:first-child { position: relative; } .tbl.standings tr[class*="q-"] td:first-child::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--qc, transparent); } .q-top_continental { --qc: var(--brand); } .q-top_continental_qual { --qc: #64b5f6; } .q-secondary_continental { --qc: #e65100; } .q-secondary_continental_qual { --qc: #ffb74d; } .q-knockout_advance { --qc: var(--positive); } .q-title_playoff { --qc: #6a1b9a; } .q-promotion { --qc: var(--positive); } .q-promotion_playoff { --qc: #81c784; } .q-relegation_warning { --qc: #ef9a9a; } .q-relegation { --qc: var(--negative); } .pos-arrow { font-size: 9px; margin-left: 4px; vertical-align: 1px; } .pos-arrow.up { color: var(--positive); } .pos-arrow.down { color: var(--negative); } .scorechip { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--surface); } .scorechip.win { background: var(--positive); } .scorechip.lose { background: var(--negative); } .scorechip.draw { background: #757575; } .scorechip.is-us { outline: 2px solid var(--accent, var(--brand)); outline-offset: 1px; } .qlegend { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--ink-2); } .qlegend li { display: flex; align-items: center; gap: 6px; padding: 1px 0; } .qdot { width: 10px; height: 10px; border-radius: 3px; background: var(--qc, transparent); flex: none; } /* ── team page ── */ .team-link { display: contents; color: inherit; text-decoration: none; } .team-link:hover .mh-name { text-decoration: underline; } .th-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; } .badge-xl { width: 64px; height: 64px; object-fit: contain; } .th-name { font-family: var(--display); font-weight: 700; font-size: 28px; margin: 0; line-height: 1.05; } .th-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; color: var(--ink-2); margin-top: 4px; } .th-pos { color: var(--ink); } .th-next { font-size: 13px; margin: 6px 0 0; } .kp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; } .kp-card { background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; padding: 10px; } .kp-top { display: flex; align-items: center; gap: 10px; } .kp-rank { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink-2); min-width: 34px; } .pimg { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface); border: 1px solid var(--rule); flex: 0 0 auto; } .pimg-lg { width: 48px; height: 48px; } .pimg-empty { display: inline-flex; align-items: center; justify-content: center; font: 600 13px var(--body); color: var(--ink-2); } .kp-who { display: flex; flex-direction: column; min-width: 0; flex: 1; } .kp-name { font-weight: 600; font-size: 15px; } .kp-sub { font-size: 12px; color: var(--ink-2); } .kp-form { text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .kp-form small { font-size: 10px; } .tr { font-family: var(--display); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; } .tr-up { color: var(--positive); } .tr-down { color: var(--negative); } .kp-ranks { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px; } .rk { border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--ink-2); } .rk b { color: var(--ink); } .rk-1 { border-color: var(--caution); background: rgba(212,160,23,.12); } .rk-3 { border-color: var(--positive); } .kp-kv { font-size: 12px; } .kp-kv small { color: var(--ink-2); } .kp-recent { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; } .kp-recent li { display: grid; grid-template-columns: 18px 1fr 14px 44px 30px; gap: 6px; align-items: center; padding: 2px 0; border-top: 1px solid var(--rule); } .kp-recent i { display: inline-block; width: 16px; text-align: center; font-style: normal; font-size: 11px; border-radius: 3px; color: var(--surface); } .kp-ga { color: var(--ink-2); } .num-sm { font-variant-numeric: tabular-nums; text-align: right; } .pill-arrival { border-color: var(--brand); color: var(--brand); } .tbl.players th[data-sort] { cursor: pointer; user-select: none; } .tbl.players th.is-sorted { color: var(--ink); } .tbl.players tr.grp td { padding-top: 10px; font-family: var(--display); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); border-bottom: 0; } .tbl.players tr.tier-0 td, .tbl.players tr.tier-1 td { color: var(--ink-2); } .pl-cell { display: inline-flex; align-items: center; gap: 8px; } .squadlist { list-style: none; margin: 0; padding: 0; font-size: 13px; } .squadlist li { display: grid; grid-template-columns: 32px 28px 1fr 48px 52px 44px 36px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--rule); } .sq-no { font-family: var(--display); font-weight: 700; color: var(--ink-2); text-align: right; } .sq-who { display: flex; flex-direction: column; min-width: 0; } .sq-name { font-weight: 600; } .sq-sub { font-size: 11px; color: var(--ink-2); } .sq-stat { text-align: right; font-variant-numeric: tabular-nums; } .sq-stat small { color: var(--ink-2); } .flag { width: 14px; height: 10px; object-fit: cover; vertical-align: -1px; margin-right: 3px; } @media (max-width: 560px) { .squadlist li { grid-template-columns: 32px 24px 1fr 44px 40px; } .squadlist .sq-stat:nth-of-type(3), .squadlist .sq-stat:nth-of-type(4) { display: none; } } /* match page: Key players (Match Hub, above Absences) */ .kpm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .kpm h4 { margin: 0 0 6px; font-size: 13px; } .kpm-card { padding: 8px; margin-bottom: 6px; } .kpm-card.is-out { opacity: .78; } .kpm-card .kp-rank { font-size: 18px; min-width: 28px; } .kp-nw, .kp-kv b { white-space: nowrap; } .kpm-avail { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; align-self: flex-start; } .kpm-out { color: var(--surface); background: var(--negative); border-color: var(--negative); } .kpm-starts { color: var(--positive); border-color: var(--positive); } .kpm-bench { color: var(--caution); border-color: var(--caution); } .kpm-omitted { color: var(--ink-2); } .kpm-ww { margin-top: 2px; } .kpm-more { margin: 2px 0 0; font-size: 12px; } .kpm-tag { font-size: 10px; border: 1px solid var(--rule); border-radius: 999px; padding: 0 6px; color: var(--ink-2); margin-left: 4px; } @media (max-width: 560px) { .kpm { grid-template-columns: 1fr; } } /* Odds tab — pre-match movement (odds_movement.py) */ .om { margin-bottom: 14px; } .om .om-sum { margin: 2px 0 8px; } .om .sel span small.om-d { font-weight: 600; } .om .sel span small.om-open { font-size: 10px; opacity: .8; } .om-shortened small.om-d, td.om-shortened small { color: var(--live); } .om-drifted small.om-d, td.om-drifted small { color: var(--series-away); } .om-chart { margin-top: 6px; } .chart .om-line { fill: none; stroke-width: 2; } .chart .om-cons { fill: none; stroke-width: 1.5; stroke-dasharray: 5 3; opacity: .55; } .chart .om-l-p { stroke: var(--positive); } .chart .om-l-d { stroke: var(--ink-2); } .chart .om-l-q { stroke: var(--series-away); } .om-legend { margin: 4px 0 8px; } .om-k-p::before { background: var(--positive); } .om-k-d::before { background: var(--ink-2); } .om-k-q::before { background: var(--series-away); } .om-k-cons::before { background: var(--ink-2); opacity: .6; } .om-tbl { font-size: 12px; } .om-tbl td, .om-tbl th { padding: 3px 8px; text-align: left; font-variant-numeric: tabular-nums; } .om-tbl tr.ref td { font-weight: 600; } /* League page */ .comp-link { color: inherit; } .comp-link:hover { text-decoration: underline; } .mh-meta .comp-link { font-weight: 600; color: var(--ink); } .lh-where b { color: var(--ink); font-weight: 600; } .rstrip { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; } .rstrip::-webkit-scrollbar { display: none; } .rs { flex: 0 0 auto; min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--rule); background: var(--surface); font: 600 12px var(--display); color: var(--ink-2); font-variant-numeric: tabular-nums; } .rs-complete { background: var(--rule); color: var(--ink); } .rs-in_progress { border-color: var(--caution); color: var(--caution); } .rs.is-current { border-color: var(--positive); color: var(--positive); background: var(--surface); box-shadow: inset 0 0 0 1px var(--positive); } .rs.is-last { border-color: var(--ink); } .rnav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 13px; } .rnav-btn { color: var(--ink-2); } .rnav-btn:hover { color: var(--ink); text-decoration: underline; } .rnav a:last-child { text-align: right; } .rnav-cur { font-family: var(--display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; } .lpanel { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 12px; margin-bottom: 10px; } .lpanel .ph { margin-top: 0; } .lday { font-family: var(--display); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 10px 0 4px; } .lday.is-today { color: var(--positive); } .lpanel .fixtures { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; } .tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .tiles li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); } .tiles b { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; color: var(--ink); } .tiles span { font-size: 13px; color: var(--ink); } .tiles small { font-size: 11px; color: var(--ink-2); } .lines { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; display: grid; gap: 4px; } .lines li::before { content: "·"; color: var(--ink-2); margin-right: 6px; } .lines a:hover { text-decoration: underline; } .leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .leaders-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .leaders-list li { display: grid; grid-template-columns: 20px 28px 1fr auto; align-items: center; gap: 8px; font-size: 13px; } .leaders-list .num { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; } .leaders-list .lname small { color: var(--ink-2); margin-left: 4px; } .leaders-list .lname small a:hover { text-decoration: underline; } .leaders-list b { font-family: var(--display); font-size: 18px; font-weight: 700; } .pimg-sm { width: 28px; height: 28px; font-size: 12px; } .tbl.standings .tlink { display: inline-flex; align-items: center; gap: 6px; } .tbl.standings .tlink:hover { text-decoration: underline; } .mc .mc-mkt { margin-bottom: 12px; } .mc .mc-mkt h4 { margin: 8px 0 4px; } .mc-tbl td:nth-child(n+2), .mc-tbl th:nth-child(n+2) { text-align: right; } .mc-tbl td.mc-up { color: var(--live); } .mc-tbl td.mc-down { color: var(--series-away); } .mc-story { margin: 4px 0 0; } /* team page: Results / Fixtures */ .rs-group { margin: 0 0 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); overflow: hidden; } .rs-strip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--rule); font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .01em; } .rs-strip .badge { width: 20px; height: 20px; } .rs-strip a { color: inherit; text-decoration: none; } .rs-strip a:hover { text-decoration: underline; } .rs-strip .rs-rec { margin-left: auto; font: 500 12px var(--body); color: var(--ink-2); } .rs-row { display: block; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; } .rs-row:first-of-type { border-top: 0; } .rs-main, a.rs-row { display: grid; grid-template-columns: 84px 1fr 96px; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; } a.rs-row:hover, .rs-main:hover { background: var(--surface-raised); } .rs-when { font-size: 12px; color: var(--ink-2); line-height: 1.25; } .rs-when small { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-when .badge-xs { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; } .rs-line { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; min-width: 0; } .rs-t { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs-t:last-child { justify-content: flex-end; } .rs-t .badge { width: 18px; height: 18px; flex: none; } .rs-t.rs-us { font-weight: 600; } .rs-score { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; } .rs-score b.live { color: var(--live); } .rs-score small { font: 500 11px var(--body); color: var(--ink-2); } .rs-score i { display: inline-block; width: 16px; text-align: center; font-style: normal; font-size: 11px; border-radius: 3px; color: var(--surface); font-family: var(--body); } .rs-note { font-size: 11px; color: var(--ink-2); text-align: right; } .rs-void .rs-line { opacity: .55; } .rs-row.is-open .rs-main { background: var(--surface-raised); } .rs-detail { padding: 6px 12px 14px; border-top: 1px dashed var(--rule); } .rs-subtabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .rs-subtabs button { border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); border-radius: 6px; padding: 4px 10px; font: 500 12px var(--body); cursor: pointer; } .rs-subtabs button.is-active { border-color: var(--positive); color: var(--positive); } .rs-subtabs .rs-full { margin-left: auto; font-size: 12px; } .rs-more { text-align: center; margin: 4px 0 8px; } .rs-more .btn { border: 1px solid var(--rule); background: var(--surface); border-radius: 8px; padding: 8px 16px; font: 500 13px var(--body); cursor: pointer; } .rs-season { margin-top: 18px; } .rsum-score { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 4px 0; } .rsum-score b { font-size: 26px; margin: 0 8px; } .rsum-xg { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); } .rsum-facts { list-style: none; margin: 0 0 8px; padding: 0; font-size: 13px; color: var(--ink-2); } .rsum-model { font-size: 13px; margin: 0; } .rsum-model b.hit, .hit { color: var(--positive); } .miss { color: var(--negative); } .rodds h4 { margin: 8px 0 6px; } .rodds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } .rodds-cell { border: 1px solid var(--rule); border-radius: 8px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; } .rodds-cell .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); } .rodds-cell b { font-family: var(--display); font-size: 20px; } .rodds-cell small { font-size: 11px; color: var(--ink-2); } .rodds-cell.hit { border-color: var(--positive); background: color-mix(in oklab, var(--positive) 10%, transparent); } .rodds-cell.fav b { text-decoration: underline; } .pst-wrap { overflow-x: auto; } .pst td, .pst th { white-space: nowrap; font-variant-numeric: tabular-nums; } .pst td:not(.l), .pst th:not(.l) { text-align: right; } .pst tr.bench td { color: var(--ink-2); } .pst td.rt-hi { color: var(--positive); font-weight: 600; } .pst td.rt-lo { color: var(--negative); } /* ── player page (/player, /compare) ─────────────────────────────────────────── */ .player-link:hover { text-decoration: underline; text-underline-offset: 2px; } .pp-head { align-items: flex-start; } .pimg-xl { width: 88px; height: 88px; font-size: 28px; } .pp-no { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--ink-2); margin-left: 6px; } .pp-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } .pp-club { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .pp-pos { font-weight: 500; color: var(--ink); } .pp-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; } .pill-avail { text-transform: none; letter-spacing: 0; } .pill-injury { border-color: var(--live); color: var(--live); } .pill-suspension { border-color: var(--caution); color: var(--caution); } .pill-doubtful { border-color: var(--ink-2); color: var(--ink-2); } .pill-release { border-color: var(--ink-2); color: var(--ink-2); } .pp-deployed { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); } .pp-deployed b { color: var(--ink); } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 12px; } .tile { border: 1px solid var(--rule); border-left-width: 4px; border-radius: 8px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; } .tile-hi { border-left-color: var(--positive); } .tile-mid { border-left-color: var(--caution); } .tile-lo { border-left-color: var(--live); } .tile-big { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; } .tile-text { font-size: 12px; color: var(--ink-2); } .tile-pct { font-size: 11px; font-weight: 600; color: var(--ink); } .tile-open { align-self: flex-start; margin-top: 4px; } .tile-wide { grid-column: 1 / -1; } .tile-line { font-size: 14px; } .tile-big small { font-size: 14px; font-weight: 500; color: var(--ink-2); } .tw-legs .tm-b { width: 48px; } .timing.timing-1 { grid-template-columns: 1fr; max-width: 520px; } .traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .trait { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--rule); } .trait-hi { border-color: var(--positive); color: var(--positive); } .trait-lo { border-color: var(--live); color: var(--live); } .strands { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 8px 22px; } .strand-block { min-width: 0; max-width: 460px; } .strand-title { margin: 8px 0 0; font-family: var(--display); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); } .strand { width: 100%; height: auto; display: block; } .strand .spine { stroke: var(--ink); stroke-width: 2; } .strand .track { stroke: var(--rule); stroke-width: 2; } .strand .fill { stroke-width: 6; stroke-linecap: round; opacity: .35; } .strand .dot { stroke: var(--surface); stroke-width: 1.5; } .strand .tick { stroke: var(--ink-2); stroke-width: 1.5; } .strand .rl { font: 500 10.5px var(--body); fill: var(--ink); } .strand .rv { font: 600 10.5px var(--body); fill: var(--ink); font-variant-numeric: tabular-nums; } .strand .rp { font-weight: 500; fill: var(--ink-2); } .strand .is-gated .rl, .strand .is-gated .rv { fill: var(--ink-2); } .rung-hi .fill, .rung-hi .dot { stroke: var(--positive); fill: var(--positive); } .rung-mid .fill, .rung-mid .dot { stroke: var(--caution); fill: var(--caution); } .rung-lo .fill, .rung-lo .dot { stroke: var(--live); fill: var(--live); } .strand .fill { fill: none; } .sr { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; background: var(--surface); } .sr-chips { display: flex; flex-direction: column; gap: 6px; } .sr-seg { margin: 0; } .sr-line { margin: 10px 0 2px; font-size: 14px; } .sr-ww { margin: 0; font-size: 12px; } .spark svg { width: 100%; height: auto; display: block; } .spark-line { fill: none; stroke: var(--ink); stroke-width: 1.5; } .spark-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; } .spark-dot.hi { fill: var(--positive); stroke: var(--positive); } .spark-dot.lo { fill: var(--live); stroke: var(--live); } .form-tbl .rt.hi, .cmp .rt.hi { color: var(--positive); font-weight: 600; } .form-tbl .rt.lo, .cmp .rt.lo { color: var(--live); } .cardyel, .cardred { display: inline-block; width: 8px; height: 11px; border-radius: 2px; vertical-align: middle; } .cardyel { background: var(--caution); } .cardred { background: var(--live); } .career { list-style: none; margin: 0 0 16px; padding: 0 0 0 14px; border-left: 2px solid var(--rule); } .cm { position: relative; display: grid; grid-template-columns: 110px auto 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 0 8px 12px; border-bottom: 1px solid var(--rule); font-size: 13px; } .cm::before { content: ""; position: absolute; left: -20px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-2); } .cm.is-latest::before { background: var(--ink); border-color: var(--ink); } .cm-loan::before { border-color: var(--caution); } .cm-release::before { border-color: var(--live); } .cm-future::before { border-style: dashed; } .cm-date { color: var(--ink-2); font-variant-numeric: tabular-nums; } .cm-clubs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .cm-fee { font-family: var(--display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; } .cm-pos { grid-column: 3; font-size: 12px; } @media (max-width: 640px) { .cm { grid-template-columns: 1fr auto; } .cm-clubs { grid-column: 1 / -1; } .cm-pos { grid-column: 1; } } .spells { list-style: none; margin: 0; padding: 0; } .spell { display: grid; grid-template-columns: auto 1fr auto auto; gap: 4px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 13px; } .spell.is-open { background: color-mix(in oklab, var(--live) 8%, transparent); } .spell-when, .spell-n { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 12px; } @media (max-width: 640px) { .spell { grid-template-columns: auto 1fr; } .spell-when, .spell-n { grid-column: 2; } } .psearch { position: relative; flex: 1 1 260px; } .psearch-in { width: 100%; box-sizing: border-box; padding: 9px 12px; font: 500 15px var(--body); border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); } .psearch-list { position: absolute; z-index: 5; left: 0; right: 0; margin: 4px 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-2); overflow: hidden; } .psearch-list li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; padding: 6px 10px; cursor: pointer; } .psearch-list li.is-cur, .psearch-list li:hover { background: var(--bg); } .ps-name { font-weight: 600; font-size: 14px; } .ps-sub { grid-column: 2; font-size: 12px; color: var(--ink-2); } .cmp-pick { display: flex; gap: 10px; align-items: center; margin: 6px 0 14px; flex-wrap: wrap; } .cmp-vs { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink-2); } .cmp-heads { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 10px; } .cmp-who { display: flex; gap: 10px; align-items: center; } .cmp-b { text-align: right; } .cmp-who.cmp-b { flex-direction: row-reverse; } .cmp-tbl td { vertical-align: middle; } .cmp-tbl .cmp-v { width: 18%; white-space: nowrap; font-variant-numeric: tabular-nums; } .cmp-tbl .cmp-v.is-edge b { color: var(--positive); } .cmp-tbl .cmp-l { text-align: center; font-size: 12px; color: var(--ink-2); } .cmp-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; } .cmp-bar-a, .cmp-bar-b { display: block; height: 8px; background: var(--rule); border-radius: 4px; overflow: hidden; position: relative; } .cmp-bar-a i, .cmp-bar-b i { position: absolute; top: 0; bottom: 0; } .cmp-bar-a i { right: 0; } .cmp-bar-b i { left: 0; } .b-hi { background: var(--positive); } .b-mid { background: var(--caution); } .b-lo { background: var(--live); } .b-none { background: transparent; } .rp-hi { color: var(--positive); } .rp-mid { color: var(--caution); } .rp-lo { color: var(--live); } .cmp-sum .cmp-l { font-size: 13px; } .cmp-strands { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 24px; } .radar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 8px; } .radar { width: 100%; max-width: 420px; height: auto; } .radar .ring { fill: none; stroke: var(--rule); stroke-width: 1; } .radar .ray { stroke: var(--rule); stroke-width: 1; } .radar .poly { stroke-width: 2; fill-opacity: .18; } .radar .poly-a { stroke: var(--ink); fill: var(--ink); } .radar .poly-b { stroke: var(--live); fill: var(--live); } .radar .rdot-a { fill: var(--ink); } .radar .rdot-b { fill: var(--live); } .radar .rlab { font: 500 10px var(--body); fill: var(--ink); } .radar .rlab.muted { fill: var(--ink-2); } .radar-key { display: flex; gap: 16px; font-size: 12px; } .radar-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; } .key-a::before { background: var(--ink); } .key-b::before { background: var(--live); } /* LeagueDNA */ .ldna .ldna-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; } .ldna-chips { display: flex; gap: 6px; } .ldna-chips .chip { font-size: 12px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); text-decoration: none; } .ldna-chips .chip.is-selected { color: var(--ink); border-color: var(--ink); } .ldna-sig { margin: 0 0 8px; } .ldna-banner { font-size: 12px; margin: 0 0 8px; } .ldna-panel { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; margin-top: 8px; background: var(--surface); } .ldna-pt { margin: 0 0 8px; font-size: 13px; font-weight: 600; } .ldna-pt small { font-weight: 400; } .ldna-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; } .ldna-bar { display: block; height: 5px; border-radius: 3px; background: var(--rule); margin-top: 6px; position: relative; overflow: hidden; } .ldna-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); opacity: .6; border-radius: 3px; } .ldna-seg { display: flex; height: 22px; border-radius: 6px; overflow: hidden; font-size: 12px; font-weight: 600; margin-bottom: 8px; } .ldna-seg div { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; } .ldna-seg .seg-h { background: var(--ink); color: var(--bg); } .ldna-seg .seg-d { background: var(--rule); color: var(--ink); } .ldna-seg .seg-a { background: var(--ink-2); color: var(--bg); } .ldna-rows { list-style: none; margin: 0; padding: 0; } .ldna-rows li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--rule); } .ldna-rows li:first-child { border-top: 0; } .ldna-prev { color: var(--ink-2); } .ldna-buckets { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-bottom: 6px; } .ldna-buckets .bk { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; } .ldna-buckets .bk i { display: block; width: 100%; background: var(--ink-2); opacity: .5; border-radius: 3px 3px 0 0; } .ldna-buckets .bk.is-peak i { background: var(--ink); opacity: .8; } .ldna-buckets small { font-size: 10px; color: var(--ink-2); } .ldna-trend { width: 100%; border-collapse: collapse; font-size: 13px; } .ldna-trend th, .ldna-trend td { text-align: right; padding: 4px 6px; border-top: 1px solid var(--rule); } .ldna-trend th:first-child, .ldna-trend td:first-child { text-align: left; } .ldna-trend thead th { border-top: 0; color: var(--ink-2); font-weight: 500; } /* Market DNA (/market, 2026-09-16) */ .mdna .ph { font-size: 22px; } .mdna-scopes { flex-wrap: wrap; margin: 4px 0 8px; } .mdna-verdicts { margin: 0 0 10px; } .mdna-verdicts li { font-size: 14px; } .mdna .tiles li.is-verdict { border-color: var(--ink); } .mdna-curve { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; } .mdna-bars { display: flex; align-items: flex-end; gap: 4px; height: 70px; border-bottom: 1px solid var(--rule); margin-top: 4px; } .mdna-bars .mb { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 2px; } .mdna-bars .mb i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--ink-2); opacity: .45; } .mdna-bars .mb.is-up i { background: var(--ink); opacity: .75; } .mdna-bars .mb small { font-size: 10px; color: var(--ink-2); } .mdna-market { min-width: 0; } .mdna-mt { margin: 0 0 6px; font-size: 13px; font-weight: 600; } .mdna-mt small { font-weight: 400; } .mdna-margin li { flex-wrap: wrap; } .mdna-margin .ldna-bar { width: 100%; } .mdna-note { font-size: 12px; margin: 8px 0 0; } /* ═══ 2b. Match page — header, compact bar, tab strip, Match Hub (R2, 2026-09-17) ═══ Scoped to .mh and placed AFTER section 3 on purpose: .panel .ph .muted .seg .tab* .chart .evlist .statrow .pitch .pl .rt .bench .odds .sel .tile(s) are still used by the team / league / player / coach / market pages and by the team-results partials, so their section-3 rules stay until those pages are redesigned. The match-only section-3 rules (.mh-*, .pi*, .sit*, .lu-banner*, .bench-pl*, .num-lg, .dash, .badge-lg) are retired. Chart language is scoped to .hub so the Odds-tab movement chart keeps its as-built look until match page part b. */ /* ── Match header ── */ .mh { max-width: 1180px; margin: 0 auto; } .mh .mh-meta { display: block; padding: 14px 0 4px; font-size: 12px; color: var(--ink-2); } .mh .mh-meta-line { display: block; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 18px; } .mh .mh-meta-line:empty { display: none; } .mh .mh-comp a:first-of-type { color: var(--ink); font-weight: 500; } .mh .mh-comp .badge-league { display: inline-flex; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; } .mh .mh-tie b { color: var(--ink); font-weight: 600; } .mh .mh-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; padding: 14px 0 6px; } .mh .mh-team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; } .mh .mh-team .badge-lg { width: 44px; height: 44px; border-radius: 6px; } .mh .badge-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--ink-2); font-family: var(--display); font-weight: 700; letter-spacing: .02em; } .mh .badge-ph.badge-lg { font-size: 15px; } .mh .badge-ph.badge-sm { width: 22px; height: 22px; border-radius: 4px; font-size: 9px; } .mh .badge-ph.badge-league { font-size: 7.5px; border-radius: 4px; } .mh .mh-name { font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap; } .mh .mh-name-full { display: none; } .mh .mh-name-short { display: inline; } /* short names <560, full from 560 */ .mh .mh-cards { display: none; width: 8px; height: 11px; border-radius: 1.5px; background: var(--live); margin-left: 6px; vertical-align: -1px; } .mh .mh-cards[data-count]:not([data-count="0"]):not([data-count=""]) { display: inline-block; } .mh .mh-cards[data-count="2"]::after, .mh .mh-cards[data-count="3"]::after { content: attr(data-count); position: relative; left: 10px; top: -3px; font: 600 10px var(--body); color: var(--live); } .mh .mh-xg { font-size: 11px; color: var(--ink-2); min-height: 16px; white-space: nowrap; } .mh .mh-score { text-align: center; padding-top: 4px; min-width: 112px; } .mh .mh-nums { display: flex; align-items: baseline; justify-content: center; gap: 6px; height: 44px; } .mh .num-lg { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; min-width: 1ch; } .mh .num-lg.flip { animation: flip .45s ease-out; } .mh .dash { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--ink-3); } .mh .mh-ko { display: none; font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 44px; color: var(--ink-2); } .mh .mh-score.is-scheduled .mh-nums { display: none; } .mh .mh-score.is-scheduled .mh-ko { display: block; } /* scheduled: kick-off time in the score slot */ .mh .mh-clock { display: flex; align-items: center; justify-content: center; gap: 6px; height: 20px; margin-top: 4px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .02em; color: var(--ink); } .mh .mh-clock.is-terminal, .mh .mh-clock.is-break { color: var(--ink-2); } .mh .mh-clock.is-scheduled { display: none; } .mh .mh-score.is-live .num-lg, .mh .mh-score.is-live .mh-clock { color: var(--live); } /* live: digits + clock red, same size/weight as FT */ .mh .mh-clock .live-dot { width: 20px; height: 11px; } .mh .mh-score.is-live .mh-clock .live-dot path { stroke: var(--live); animation: pulse 1.6s cubic-bezier(.4,0,.2,1) infinite; } .mh .mh-weather { text-align: center; padding: 6px 0 12px; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mh .mh-weather:empty { display: none; } .mh .mh-weather b { color: var(--ink); font-weight: 600; } /* ── Sticky group: compact bar (<900, shown once the header is scrolled) + tab strip ── */ .mh .mh-sticky { position: sticky; top: 0; z-index: 4; background: var(--bg); } .mh .mh-compact { display: none; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; height: 44px; padding: 0 16px; margin: 0 -16px; border-bottom: 1px solid var(--rule); } .mh .mh-sticky.is-compact .mh-compact { display: grid; } .mh .mhc-team { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; } .mh .mhc-team.away { justify-content: flex-end; } .mh .mhc-team .badge-sm { width: 22px; height: 22px; border-radius: 4px; } .mh .mhc-score { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 700; color: var(--ink); } .mh .mhc-score > :first-child { font-size: 20px; line-height: 1; } .mh .mhc-score > :last-child { font-size: 13px; letter-spacing: .02em; } .mh .mh-compact.is-live .mhc-score { color: var(--live); } .mh .mh-compact.is-terminal .mhc-score > :last-child { color: var(--ink-2); } .mh .tabbar { display: flex; align-items: stretch; margin: 0 -16px; padding: 0 8px; border-bottom: 1px solid var(--rule); } .mh .tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; scroll-behavior: smooth; } .mh .tabs::-webkit-scrollbar { display: none; } .mh .tab { flex: 0 0 auto; border: 0; background: transparent; padding: 0 10px; height: 44px; font: 500 13px var(--body); color: var(--ink-2); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color .15s; } .mh .tab:hover { color: var(--ink); } .mh .tab.is-active { color: var(--ink); border-bottom-color: var(--brand); } /* the page's one brand-blue signature */ .mh .tabarrow { display: none; } /* <900: cut edge, swipe only */ /* ── Panels: no card — rules do the work ── */ .mh .panel { display: none; padding: 12px 0 16px; } .mh .panel.is-active { display: block; } .mh .ph { margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); font: 600 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; white-space: nowrap; } .mh .ph small { font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; } .mh .muted { color: var(--ink-2); font-size: 13px; margin: 6px 0; } .mh .seg { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); margin-bottom: 12px; } .mh .seg::-webkit-scrollbar { display: none; } .mh .seg > button, .mh .seg > a { flex: 0 0 auto; border: 0; background: transparent; padding: 0 10px; height: 36px; font: 500 13px var(--body); color: var(--ink-2); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; } .mh .seg > .is-active { color: var(--ink); border-bottom-color: var(--ink); } /* ── Match Hub: view switcher sticks to the bottom (<900) for one-thumb reach ── */ .mh .hub-h { margin: 0 0 10px; font: 600 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; align-items: baseline; } .mh .pro-tag { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .mh .hub-seg { position: sticky; bottom: 56px; z-index: 5; order: 99; margin: 0 -16px; padding: 6px 12px; height: 44px; align-items: center; background: var(--bg); border-top: 1px solid var(--rule); border-bottom: 0; } .mh .hub-seg > button, .mh .hub-seg > a { height: 32px; padding: 0 12px; border-radius: 2px; border-bottom: 0; } .mh .hub-seg > .is-active { background: var(--ink); color: var(--bg); font-weight: 600; } .mh .panel.hub { display: none; flex-direction: column; } .mh .panel.hub.is-active { display: flex; } .mh .hub-stacked .hub-view { padding: 28px 0 4px; scroll-margin-top: 96px; } .mh .hub-stacked .hub-view:first-of-type { padding-top: 12px; } .mh .hub-stacked .hub-h { font: 500 22px var(--display); letter-spacing: -.015em; line-height: 1.1; text-transform: none; color: var(--ink); } /* ── Situation box ── */ .mh .sit { border: 1px solid var(--rule); border-radius: 2px; padding: 12px 12px 4px; font-size: 13px; color: var(--ink-2); line-height: 1.5; } .mh .sit p { margin: 0 0 8px; } .mh .sit b { color: var(--ink); font-weight: 600; } .mh .sit .pill { vertical-align: 1px; } .mh .pill.sit-shock { border-color: var(--live); color: var(--live); } .mh .pill.sit-surprise { border-color: var(--caution); color: var(--caution); } .mh .sit-turn { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 10px; } .mh .sit-head { color: var(--ink); font-weight: 600; } .mh .sit-src { font-size: 12px; } /* ── Balance bar (replaces the two pressure tiles) ── */ .mh .balance { margin-top: 14px; } .mh .bal-side { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; } .mh .bal-side.home { float: left; } .mh .bal-side.away { float: right; } .mh .bal-side .pi-num { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0; color: var(--ink); } .mh .bal-side.away .pi-num { color: var(--series-away); } .mh .bal-bar { clear: both; position: relative; display: flex; height: 8px; margin: 8px 0 24px; } .mh .bal-bar .pi-bar { display: block; position: static; height: 8px; transition: width .6s ease; } .mh .bal-bar .pi-bar.home { background: var(--series-home); } .mh .bal-bar .pi-bar.away { flex: 1; background: var(--series-away); } .mh .bal-now { position: absolute; left: var(--share, 50%); top: 16px; transform: translateX(-50%); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .mh .bal-now::before { content: ""; position: absolute; left: 50%; top: -19px; width: 2px; height: 14px; background: var(--bg); transform: translateX(-1px); } /* ── Chart language (D5, R2): mirrored bars, home up in ink, away down in amber ── */ .mh .hub .chart { width: 100%; min-height: 160px; } .mh .hub .chart svg { width: 100%; height: auto; display: block; } .mh .hub .chart .axis { stroke: var(--ink-2); stroke-width: 1; } .mh .hub .chart .tick { font: 11px var(--body); fill: var(--ink-2); } .mh .hub .chart .tickmark { stroke: var(--ink-2); } .mh .hub .chart .bar-home { fill: var(--series-home); } .mh .hub .chart .bar-away { fill: var(--series-away); } .mh .hub .chart .bar-dim { opacity: .85; } .mh .hub .chart .bar-cur { fill: var(--surface-raised); } .mh .hub .chart .bin-empty { stroke: var(--ink-3); } .mh .hub .chart .env { fill: none; stroke: var(--series-expected); stroke-width: 1; opacity: .35; } .mh .hub .chart .now { stroke: var(--live); stroke-width: 1; stroke-dasharray: 3 3; } .mh .hub .chart .now-label { font: 600 11px var(--body); fill: var(--live); } .mh .hub .chart .goal { fill: none; stroke: var(--ink); stroke-width: 1.75; } .mh .hub .chart .goal-bg { fill: var(--bg); } .mh .hub .chart .goal-label { font: 600 11px var(--display); fill: var(--ink); } .mh .hub .chart .side-label { font: 11px var(--body); fill: var(--ink-2); } .mh .hub .chart .side-label.away { fill: var(--series-away); } .mh .hub .chart .side-badge { fill: var(--surface-raised); } .mh .hub .chart .side-badge-t { font: 700 7.5px var(--display); fill: var(--ink-2); letter-spacing: .02em; } .mh .hub .chart .cur-val { font: 600 11px var(--display); fill: var(--ink); } .mh .hub .chart .cur-val.away { fill: var(--series-away); } .mh .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .mh .tile { border: 1px solid var(--rule); border-radius: 2px; padding: 12px 10px 14px; text-align: center; } .mh .tile .pi-num { display: block; font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--ink); } .mh .tile.away .pi-num { color: var(--series-away); } .mh .tile .pi-label { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; } .mh .tile .badge-sm { width: 20px; height: 20px; border-radius: 5px; font-size: 8px; } /* ── Events ── */ .mh .evlist { list-style: none; margin: 0; padding: 0; } .mh .evlist li { display: grid; grid-template-columns: 40px 22px 1fr; gap: 8px; align-items: start; padding: 10px 0 10px 10px; border-bottom: 1px solid var(--rule); border-left: 2px solid var(--series-home); font-size: 13px; color: var(--ink-2); line-height: 1.4; } .mh .evlist li.away { border-left-color: var(--series-away); } .mh .evlist .ev-min { font-family: var(--display); font-weight: 700; color: var(--ink); } .mh .evlist b { color: var(--ink); font-weight: 600; } .mh .evlist .ev-ico { display: inline-flex; padding-top: 1px; } .mh .evlist .ev-ico .ico { width: 18px; height: 18px; } .mh .ev-yellow_card .ev-ico .ico, .mh .ev-yellow_red_card .ev-ico .ico:first-child { color: var(--caution); } .mh .ev-red_card .ev-ico .ico, .mh .ev-yellow_red_card .ev-ico .ico:last-child { color: var(--live); } .mh .sub-on { color: var(--ink); } .mh .sub-off { color: var(--ink-2); } .mh .sub-on .ico, .mh .sub-off .ico { width: 14px; height: 14px; vertical-align: -2px; } .mh .sub-on .ico { color: var(--positive); } /* ── Stats ── */ .mh .statrow { display: grid; grid-template-columns: 44px 1fr 1fr 44px; align-items: center; gap: 0 8px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13px; } .mh .statrow .v { font-family: var(--display); font-weight: 700; color: var(--ink); } .mh .statrow .v.away { text-align: right; } .mh .statrow .bar { height: 16px; display: flex; align-items: center; } .mh .statrow .bar.home { justify-content: flex-end; } .mh .statrow .bar i { height: 6px; background: var(--series-home); } .mh .statrow .bar.away i { background: var(--series-away); } .mh .statrow .lbl { grid-column: 2 / 4; text-align: center; font-size: 11px; color: var(--ink-2); margin-top: -2px; text-transform: uppercase; letter-spacing: .06em; } /* ── Lineups: one pitch, both sides; rows placed by the formation string (match.js R2) ── */ .mh .lu-banner { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; margin-bottom: 12px; border: 1px solid var(--rule); border-radius: 2px; font-size: 13px; line-height: 1.4; } .mh .lu-banner b { font-weight: 600; color: var(--ink); } .mh .lu-banner span { display: block; color: var(--ink-2); font-size: 12px; } .mh .lu-banner .ico { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--ink-2); } .mh .lu-banner.is-confirmed { border-color: var(--positive); } .mh .lu-banner.is-confirmed .ico { color: var(--positive); } .mh .lu-banner.is-predicted { border-color: var(--caution); } .mh .lu-banner.is-predicted .ico { color: var(--caution); } .mh .lu-caption { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); white-space: nowrap; margin: 12px 0 0; } .mh .lu-caption.home { margin: 8px 0 0; } .mh .lu-caption b { color: var(--ink); font-weight: 600; } .mh .lu-caption:empty { display: none; } .mh .pitch { position: relative; margin-top: 12px; border: 1px solid var(--rule); border-radius: 2px; background: var(--surface); padding: 8px 6px; } .mh .pitch-half { position: relative; } .mh .pitch-line { position: absolute; left: 6px; right: 6px; top: 50%; border-top: 1px solid var(--rule); pointer-events: none; } .mh .pitch-circle { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border: 1px solid var(--rule); border-radius: 50%; pointer-events: none; } .mh .pitch-box { position: absolute; left: 25%; right: 25%; height: 11%; border: 1px solid var(--rule); pointer-events: none; } .mh .pitch-box.top { top: 0; border-top: 0; } .mh .pitch-box.bottom { bottom: 0; border-bottom: 0; } .mh .pl { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--ink); font-family: var(--body); } .mh .pl-pic { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-raised); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font: 600 13px var(--body); flex: 0 0 auto; overflow: visible; } .mh .pl-pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: saturate(.85); } .mh .pl-pic.is-captain { box-shadow: 0 0 0 2px var(--caution); } .mh .rt { position: absolute; right: -9px; top: -5px; min-width: 22px; padding: 0 3px; height: 14px; border-radius: 2px; background: var(--surface-raised); color: var(--ink); font: 600 10px var(--body); line-height: 14px; text-align: center; font-style: normal; letter-spacing: 0; } .mh .rt.hi { background: var(--positive); color: var(--bg); } .mh .rt.lo { background: var(--live); color: var(--bg); } .mh .pl .nm { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 3px; max-width: 100%; font-size: 11px; line-height: 1.2; letter-spacing: -.01em; text-align: center; } .mh .pl .nm b { color: var(--ink-2); font-weight: 600; } .mh .pl .nm span { white-space: nowrap; } .mh .pl.is-tight .nm { letter-spacing: -.03em; } .mh .pl-marks { display: flex; align-items: center; justify-content: center; gap: 5px; height: 14px; font-size: 11px; line-height: 1; white-space: nowrap; } .mh .pl-marks .ico { width: 14px; height: 14px; } .mh .pl-marks b { font-weight: 600; } .mh .mk-goal { display: inline-flex; align-items: center; gap: 2px; color: var(--ink); } .mh .mk-card { display: inline-block; width: 8px; height: 11px; border-radius: 1.5px; } .mh .mk-card.yellow { background: var(--caution); } .mh .mk-card.red { background: var(--live); } .mh .mk-card.second { display: inline-flex; gap: 1px; width: auto; background: none; } .mh .mk-card.second i { display: inline-block; width: 6px; height: 11px; } .mh .mk-card.second i:first-child { background: var(--caution); border-radius: 1.5px 0 0 1.5px; } .mh .mk-card.second i:last-child { background: var(--live); border-radius: 0 1.5px 1.5px 0; } .mh .mk-off { display: inline-flex; align-items: center; gap: 1px; color: var(--negative); } .mh .mk-on { display: inline-flex; align-items: center; gap: 1px; color: var(--positive); } .mh .bench-side { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; font-size: 12px; color: var(--ink-2); } .mh .bench-side b { color: var(--ink); font-weight: 600; } .mh .bench-side .badge-league { width: 16px; height: 16px; } .mh .bench-list { display: flex; flex-wrap: wrap; gap: 6px; } .mh .bench-pl { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 4px; border: 1px solid var(--rule); border-radius: 2px; background: transparent; color: var(--ink); font: 500 12px var(--body); cursor: pointer; white-space: nowrap; } .mh .bench-pl .pl-pic { width: 26px; height: 26px; font-size: 10px; } .mh .bench-pl b { color: var(--ink-2); font-weight: 600; } .mh .bench-pl .pl-marks { margin-left: 2px; } /* ── Commentary ── */ .mh .comlist { list-style: none; margin: 0; padding: 0; } .mh .comlist li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.45; color: var(--ink-2); } .mh .comlist .ev-min { font-family: var(--display); font-weight: 700; } .mh .comlist li.is-goal, .mh .comlist li.is-important { color: var(--ink); } /* ── In-play odds market cards ── */ .mh .odds { display: flex; flex-direction: column; gap: 10px; } .mh .mkt { border: 1px solid var(--rule); border-radius: 2px; padding: 10px 12px 12px; } .mh .mkt h4 { margin: 0 0 8px; font: 600 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .mh .sel { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; } .mh .sel > span { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 6px; border-top: 2px solid var(--ink); color: var(--ink); font-size: 11px; } .mh .sel > span b { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1; } .mh .sel > span small { color: var(--ink-2); } .mh .sel > span.susp { border-top-color: var(--rule); color: var(--ink-3); } .mh .sel > span.susp b { text-decoration: line-through; text-decoration-color: var(--ink-3); } .mh .sel > span.susp small::after { content: " · suspended"; color: var(--ink-2); } .mh .odds .upd { font-size: 12px; color: var(--ink-2); margin: 0; } /* ── Pro blur-lock: panel and tile share one treatment; one quiet affordance ── */ .mh .lock { position: relative; } .mh .lock.is-locked > :not(.lock-veil):not(.lock-cta) { filter: blur(6px); pointer-events: none; user-select: none; } .mh .lock-veil { position: absolute; inset: 0; background: color-mix(in oklab, var(--bg) 55%, transparent); } .mh .lock-cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 2px; background: var(--bg); color: var(--ink); font: 600 13px var(--body); white-space: nowrap; } .mh .lock.is-tile .lock-cta { height: 28px; padding: 0 10px; font-size: 12px; } /* ── ≥560: full team names ── */ @media (min-width: 560px) { .mh .mh-name-full { display: inline; } .mh .mh-name-short { display: none; } } /* ── ≥900: no compact bar, arrows return, switcher under the tabs, landscape pitch ── */ @media (min-width: 900px) { .mh .mh-sticky.is-compact .mh-compact { display: none; } .mh .tabbar, .mh .mh-compact { margin: 0; } .mh .tabarrow { display: flex; align-items: center; justify-content: center; width: 32px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; } .mh .tabarrow[hidden] { display: none; } .mh .hub-seg { position: static; order: 0; margin: 0 0 12px; padding: 0; height: auto; border-top: 0; border-bottom: 1px solid var(--rule); } .mh .hub-seg > button, .mh .hub-seg > a { height: 36px; border-radius: 0; border-bottom: 2px solid transparent; padding: 0 10px; } .mh .hub-seg > .is-active { background: transparent; color: var(--ink); border-bottom-color: var(--ink); } .mh .pitch.is-landscape { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 0; } .mh .pitch.is-landscape .pitch-line { left: 50%; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 1px solid var(--rule); } .mh .pitch.is-landscape .pitch-circle { width: 96px; height: 96px; margin: -48px 0 0 -48px; } .mh .pitch.is-landscape .pitch-box { top: 25%; bottom: 25%; height: auto; width: 80px; left: auto; right: auto; } .mh .pitch.is-landscape .pitch-box.top { left: 0; border-top: 1px solid var(--rule); border-left: 0; } .mh .pitch.is-landscape .pitch-box.bottom { right: 0; border-bottom: 1px solid var(--rule); border-right: 0; } .mh .pitch.is-landscape .pl { width: 84px; } .mh .bench { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } } @media (prefers-reduced-motion: reduce) { .mh .tab, .mh .bal-bar .pi-bar { transition: none; } .mh .mh-clock .live-dot path { animation: none !important; } } /* ── 2b resets: section-3 properties that would otherwise leak through the shared selectors above ── */ .mh .panel { background: transparent; border: 0; border-radius: 0; } .mh .tabbar { position: static; gap: 0; background: transparent; z-index: auto; } .mh .tabs { padding: 0; } .mh .tab { border-radius: 0; } .mh .tab.is-active { background: transparent; border-color: transparent; border-bottom-color: var(--brand); } .mh .tabarrow { height: auto; border-radius: 0; font-size: 18px; } .mh .seg { flex-wrap: nowrap; } .mh .seg > button, .mh .seg > a { border-radius: 0; text-decoration: none; display: inline-flex; align-items: center; } .mh .seg > button.is-active { border-color: transparent; border-bottom-color: var(--ink); } .mh .hub-seg > button, .mh .hub-seg > a { border-radius: 2px; } .mh .hub-seg > button.is-active { border-bottom-color: transparent; } .mh .hub-view[hidden] { display: none; } .mh .evlist li { border-top: 0; } .mh .evlist li.away { text-align: left; grid-template-columns: 40px 22px 1fr; } .mh .evlist li.away .ev-min, .mh .evlist li.away .ev-ico, .mh .evlist li.away .ev-txt { order: 0; } .mh .evlist li.muted { display: block; border-left: 0; padding-left: 0; } .mh .evlist li.is-rescinded .ev-txt { text-decoration: line-through; text-decoration-color: var(--ink-3); } .mh .evlist .ev-ico { width: auto; height: auto; background: none; border-radius: 0; color: var(--ink); } .mh .evlist .ev-txt small { margin-left: 0; } .mh .evlist .ev-txt .sub-on { color: var(--ink); } .mh .evlist .ev-txt .sub-off { color: var(--ink-2); } .mh .comlist li { border-top: 0; align-items: start; padding: 10px 0; } .mh .comlist li.muted { display: block; } .mh .comlist .ev-min { color: var(--ink); } .mh .comlist li.is-goal { background: none; } .mh .comlist li.is-goal .com-txt, .mh .comlist li.is-important .com-txt { font-weight: 600; } .mh .statgrid { gap: 0; } /* stat row: explicit placement — the DOM order is value · bar · label · bar · value, the label sits on its own second line */ .mh .statrow .v { font-size: 14px; grid-row: 1; } .mh .statrow .v.home { grid-column: 1; text-align: left; } .mh .statrow .v.away { grid-column: 4; text-align: right; } .mh .statrow .bar.home { grid-column: 2; grid-row: 1; } .mh .statrow .bar.away { grid-column: 3; grid-row: 1; } .mh .statrow .lbl { grid-row: 2; } .mh .pitch { width: auto; aspect-ratio: auto; overflow: visible; } .mh .pitch::before, .mh .pitch::after { content: none; } .mh .pitch-wait { position: absolute; left: 0; right: 0; top: 45%; text-align: center; } .mh .pl .pl-img { width: 100%; height: 100%; border: 0; box-shadow: none; background: transparent; } .mh .pl .rt { position: absolute; right: -9px; top: -5px; padding: 0 3px; border-radius: 2px; background: var(--surface-raised); color: var(--ink); font: 600 10px/14px var(--body); } .mh .pl .rt.hi { background: var(--positive); color: var(--bg); } .mh .pl .rt.lo { background: var(--live); color: var(--bg); } .mh .pl .nm { color: var(--ink); text-shadow: none; overflow: visible; white-space: normal; max-width: 100%; font-size: 11px; } .mh .pl .nm b { font-family: var(--body); color: var(--ink-2); margin-right: 0; } .mh .bench { display: block; margin-top: 0; } .mh .bench span { background: none; border-radius: 0; padding: 0; font-size: inherit; } .mh .bench-pl .pl-pic .pimg { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .mh .lu-banner.is-pending { border-color: var(--rule); } .mh .odds .mkt { margin-bottom: 0; } .mh .odds .sel { display: grid; flex-wrap: nowrap; } .mh .odds .sel span { align-items: flex-start; min-width: 0; background: none; border-radius: 0; padding: 8px 0 6px; color: var(--ink); font-size: 11px; } .mh .odds .sel span b { font-size: 20px; } .mh .odds .sel span.susp { opacity: 1; color: var(--ink-3); } .mh .lock-cta { cursor: default; } .mh .lock-cta .ico { width: 14px; height: 14px; } .mh .kickoff-short { font-variant-numeric: tabular-nums; } @media (min-width: 900px) { .mh .bench { display: grid; } } .mh .mh-weather span + span::before { content: " · "; color: var(--ink-3); } .mh .hub .chart text { stroke: none; } .mh .hub .chart .side-label.home { fill: var(--ink-2); } .mh .sit > .sit-turn:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .mh .bal-now { left: clamp(14px, var(--share, 50%), calc(100% - 14px)); } .mh .evlist .sub-off, .mh .evlist .sub-on { display: inline; } .mh .evlist .ev-txt .ico { display: inline-block; } .mh .statrow .bar { background: none; border-radius: 0; overflow: visible; } .mh .statrow .bar i { display: block; border-radius: 0; } .mh .mhc-team > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .mh .mhc-score { white-space: nowrap; } .mh [hidden] { display: none !important; } .mh .pk-ev .ico { width: 16px; height: 16px; vertical-align: -3px; } .mh .pk-ev-yellow_card .ico { color: var(--caution); } .mh .pk-ev-red_card .ico, .mh .pk-ev-yellow_red_card .ico { color: var(--live); } .mh .pk-ev-sub_on .ico { color: var(--positive); } .mh .pk-ev-sub_off .ico { color: var(--negative); }