/* ═══════════════════════════════════════════════════════════════ SPORTS PANEL — the landing page's results widget, as a page ═══════════════════════════════════════════════════════════════ Lifted from css/landingb.css (SportsWidget) so the three reference pages — schedule.html, standings.html, brackets.html — render their fixtures, tables and knockout tree with exactly the design the Fan Zone landing shows in its results panel. js/sports-panel.js emits the markup. The pages that use this sheet load main.min.css + landing.min.css, which the widget never shared, so every rule here is self-contained and scoped to .sports-widget / .sw-* / .cd-cell. THEME TOKENS --primary-color, --background-color, --secondary-font-family and the rest are set on by core.js from the per-game JSON, exactly as on every other page. The three tokens landingb.css derives rather than reads — --ink, --muted, --accent/--on-accent — are set on by sports-panel.js applyTheme() from the same `intro` block, by background luminance, so a light client palette stays legible. The values below are only the pre-render fallback. ═══════════════════════════════════════════════════════════════ */ :root{ --ink:#f4f7fc; --muted:rgba(244,247,252,.58); --accent:var(--primary-color,#00d4ff); --on-accent:#fff; --panel-r:14px; } @keyframes sw-blink{0%,100%{opacity:1}50%{opacity:.28}} @keyframes sw-spin{to{transform:rotate(360deg)}} @keyframes sw-nowSweep{0%{transform:translateX(-160%) skewX(-14deg)} 60%,100%{transform:translateX(320%) skewX(-14deg)}} @keyframes sw-nowBreathe{0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-accent) 16%,transparent)} 50%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--on-accent) 46%,transparent)}} @keyframes sw-nowRadar{0%{transform:scale(1);opacity:.55}100%{transform:scale(3.4);opacity:0}} @keyframes sw-scorePop{0%{transform:scale(1)}38%{transform:scale(1.22)}100%{transform:scale(1)}} /* A light translucent card floating on the page background, not an opaque slab — colour carried by the theme rather than by chrome. */ .sports-widget{ width:100%;max-width:640px;margin:16px auto 32px; border-radius:var(--panel-r);overflow:hidden; background:color-mix(in srgb,var(--secondary-color) 7%,transparent); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid color-mix(in srgb,var(--secondary-color) 11%,transparent); font-family:var(--secondary-font-family),system-ui,sans-serif; /* the widget does not inherit the client's type scale — intro.font_size can be 2.5rem, which blew every label and score up with it */ font-size:1rem;line-height:1.25;color:var(--secondary-color);text-align:left; } .sports-widget *,.sports-widget *::before,.sports-widget *::after{box-sizing:border-box} .sports-widget img{max-width:100%;display:block} .sports-widget[hidden]{display:none} /* ── NOW / NEXT ── A filled accent band: everything inside inverts to --on-accent, which is derived from the accent's luminance, so it holds on a lime, navy or white client accent alike. */ .sw-now{position:relative;padding:14px 14px 15px; background:linear-gradient(135deg,var(--accent), color-mix(in srgb,var(--accent) 82%,var(--background-color))); color:var(--on-accent); box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--on-accent) 18%,transparent)} .sw-now[hidden]{display:none} .sw-now-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px} .sw-now-label{font-family:var(--secondary-font-family),sans-serif;font-weight:800; font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-accent)} .sw-now-label.live::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%; background:currentColor;margin-right:7px;vertical-align:middle; animation:sw-blink 1.1s ease-in-out infinite} .sw-now-meta{font-size:1rem;letter-spacing:.1em;text-transform:uppercase; color:color-mix(in srgb,var(--on-accent) 68%,transparent); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sw-now-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px} /* Both sides stack the same way — flag over name, centred — so the two teams read as a symmetric pair instead of mirroring each other. */ .sw-now-side{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px;min-width:0;text-align:center} .sw-now-side.away{flex-direction:column;text-align:center} .sw-now-side img{width:42px;height:31px;object-fit:cover;flex-shrink:0;border-radius:4px} .sw-now-side span{max-width:100%;font-family:var(--secondary-font-family),sans-serif;font-weight:800; font-size:1rem;line-height:1.02;text-transform:uppercase;color:var(--on-accent); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sw-now-mid{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0} .sw-now-time,.sw-now-score{font-family:var(--secondary-font-family),sans-serif;font-weight:900; font-variant-numeric:tabular-nums;line-height:1;color:var(--on-accent)} .sw-now-time{font-size:1rem} .sw-now-score{font-size:1rem;display:flex;align-items:center;gap:6px} .sw-now-score i{font-style:normal;font-weight:300;font-size:1rem; color:color-mix(in srgb,var(--on-accent) 45%,transparent)} .sw-now-cd{display:flex;align-items:center;gap:5px;font-size:1rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase; color:color-mix(in srgb,var(--on-accent) 72%,transparent)} .sw-now-cd > [data-i18n]:empty{display:none} /* countdown cells — small, flat, tabular. Deliberately not a flip clock: the digits change once a minute. */ .cd-cell{display:inline-flex;align-items:baseline;gap:2px;padding:2px 6px;border-radius:6px; background:color-mix(in srgb,var(--on-accent) 12%,transparent)} .cd-cell b{font-family:var(--secondary-font-family),sans-serif;font-weight:900; font-size:1rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--on-accent)} .cd-cell i{font-style:normal;font-size:1rem;font-weight:700;opacity:.7} /* ── THE BAND WHEN IT IS LIVE ── Up next is a quiet card; live is the thing the fan is standing in front of. Nothing moves fast — it should read as "on air". */ .sw-now.is-live{position:relative;overflow:hidden;animation:sw-nowBreathe 3.2s ease-in-out infinite} .sw-now.is-live::after{content:"";position:absolute;z-index:1;pointer-events:none; top:-40%;bottom:-40%;left:0;width:22%; background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--on-accent) 22%,transparent),transparent); filter:blur(4px);animation:sw-nowSweep 5.5s ease-in-out infinite} .sw-now.is-live > *{position:relative;z-index:2} .sw-now.is-live .sw-now-label.live{position:relative} .sw-now.is-live .sw-now-label.live::after{content:"";position:absolute;left:0;top:50%; width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:currentColor; pointer-events:none;animation:sw-nowRadar 2.4s ease-out infinite} /* the score reacts the moment it changes, not on a loop */ .sw-now-score.bumped{animation:sw-scorePop .5s cubic-bezier(.2,.9,.3,1)} @media(prefers-reduced-motion:reduce){ .sw-now.is-live,.sw-now.is-live::after, .sw-now.is-live .sw-now-label.live::after,.sw-now-score.bumped{animation:none} } /* ── DAY + CATEGORY FILTERS ── One scrolling row, nothing wraps to a second line, so the band is a fixed ~34px whatever a config switches on. */ .sw-filters{display:flex;align-items:center;gap:6px;padding:5px 8px; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; border-bottom:1px solid color-mix(in srgb,var(--secondary-color) 8%,transparent)} .sw-filters::-webkit-scrollbar{display:none} .sw-filters[hidden]{display:none} .sw-chips{display:flex;gap:4px;flex:0 0 auto} /* category (Men/Women) chips are hidden — the split already shows in the pool headers. Delete this rule to bring them back. */ .sw-chips--cat{display:none} .sw-chips+.sw-chips{padding-left:6px; border-left:1px solid color-mix(in srgb,var(--secondary-color) 12%,transparent)} .sw-chip{flex:0 0 auto;padding:4px 9px;border-radius:999px;cursor:pointer; border:1px solid color-mix(in srgb,var(--secondary-color) 12%,transparent);background:transparent; font-family:inherit;font-weight:600;font-size:1rem;letter-spacing:.04em;text-transform:uppercase; color:var(--muted);white-space:nowrap;transition:all .2s} .sw-chip:hover{color:var(--secondary-color)} .sw-chip.active{background:color-mix(in srgb,var(--primary-color) 88%,transparent); border-color:transparent;color:var(--background-color)} .sw-content{padding:6px;min-height:64px} .sw-loading{display:flex;align-items:center;justify-content:center;gap:8px; padding:20px 0;color:var(--muted)} .sw-loading::after{content:'';width:14px;height:14px;border-radius:50%; border:2px solid color-mix(in srgb,var(--secondary-color) 15%,transparent); border-top-color:var(--primary-color);animation:sw-spin .7s linear infinite} .sw-empty{text-align:center;padding:16px 8px;color:var(--muted);font-size:1rem} /* ── GAME ROWS ── */ /* Each fixture sits on its own faint surface so the list reads as stacked rows rather than free-floating text — the same treatment the landing page's results widget uses. Tinted from --ink, so it stays a light veil on a dark theme and a soft shade on a pale one. */ .sw-game{display:grid;grid-template-columns:1fr 62px 1fr;align-items:center;gap:6px; padding:7px 8px;border-radius:8px;transition:background .15s;font-variant-numeric:tabular-nums; background:color-mix(in srgb,var(--secondary-color) 6%,transparent)} .sw-game+.sw-game{margin-top:4px} .sw-game:hover{background:color-mix(in srgb,var(--secondary-color) 11%,transparent)} /* the fixture pinned in the Now strip, marked where it sits in the list */ .sw-game--now{background:color-mix(in srgb,var(--primary-color) 12%,transparent); box-shadow:inset 2px 0 0 var(--primary-color)} .sw-game--now .sw-team .name{color:var(--secondary-color);font-weight:700} .sw-game--upcoming .sw-team .name{color:color-mix(in srgb,var(--secondary-color) 78%,transparent)} .sw-team{display:flex;align-items:center;gap:7px;min-width:0} .sw-team.away{flex-direction:row-reverse;text-align:right} .sw-team img{width:26px;height:19px;object-fit:cover;flex-shrink:0;border-radius:2px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--secondary-color) 14%,transparent)} .sw-team .name{font-weight:600;font-size:1rem;color:var(--secondary-color); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sw-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0} .sw-vs{font-size:1rem;color:var(--muted);white-space:nowrap} .sw-status{font-weight:700;font-size:1rem;letter-spacing:.04em;text-transform:uppercase; line-height:1;text-align:center} .sw-status.live{color:#22c55e} .sw-status.finished{color:var(--muted)} .sw-status.scheduled{color:var(--primary-color)} .sw-scores{display:flex;align-items:center;gap:4px;font-weight:700;font-size:1rem; font-variant-numeric:tabular-nums;color:var(--primary-color)} .sw-scores .sep{color:color-mix(in srgb,var(--secondary-color) 25%,transparent);font-weight:300;font-size:1rem} .sw-pool-header{font-weight:700;font-size:1rem;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);padding:10px 8px 4px; border-bottom:1px solid color-mix(in srgb,var(--secondary-color) 11%,transparent);margin-bottom:2px} .sw-pool-header:not(:first-child){margin-top:10px} /* ── EXT-SLIDER DOCK INSIDE THE DESKTOP FRAME ── ext-slider.css gates the dock on @media(max-width:768px) — the page being framed is the same statement as "this is a phone", so the gate is lifted for .mobile-frame here rather than in the shared sheet, which the unframed pages still rely on. ext-slider.js already builds it: it only refuses on a .desktop-page body, and this page never sets that class. The room the dock needs is reserved the same way ext-slider.css does it at mobile widths. The short-landscape kill switch in ext-slider.css carries !important and still wins over both rules. */ body.mobile-frame .ext-dock{display:flex} body.mobile-frame:has(.ext-dock){padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))} /* ── STANDINGS TABLES ── The widget ships a with table-layout:fixed (rank 24px, then 28/28/28/36), so the table is inset with a margin rather than per-cell padding — padding inside a 24px rank column would crush the number. */ .sw-standings{width:calc(100% - 12px);margin:0 6px;border-collapse:collapse; font-variant-numeric:tabular-nums} .sw-standings th{padding:6px 4px;font-weight:700;font-size:1rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);text-align:center; border-bottom:1px solid color-mix(in srgb,var(--secondary-color) 8%,transparent)} .sw-standings th:nth-child(2){text-align:left;padding-left:8px} .sw-standings td{padding:6px 4px;text-align:center;font-size:1rem; color:color-mix(in srgb,var(--secondary-color) 80%,transparent)} .sw-standings td:nth-child(2){text-align:left;padding-left:8px} .sw-standings tbody tr+tr td{border-top:1px solid color-mix(in srgb,var(--secondary-color) 6%,transparent)} .sw-standings .sw-rank{font-weight:700;color:color-mix(in srgb,var(--secondary-color) 42%,transparent); padding-left:0;padding-right:0} .sw-standings tbody tr:nth-child(-n+3) .sw-rank{color:var(--primary-color)} .sw-standings .sw-team-cell{display:flex;align-items:center;gap:6px} .sw-standings .sw-team-cell img{width:22px;height:16px;object-fit:cover;flex-shrink:0;border-radius:2px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--secondary-color) 12%,transparent)} .sw-standings .sw-team-cell .name{font-weight:600;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:120px} .sw-standings .sw-pts{font-weight:700;color:var(--secondary-color)} /* ── KNOCKOUT TREE ── Rounds are flex columns; space-around puts each later round's cards on the midpoints of the pair that feeds them. Connectors are an SVG overlay measured after paint (drawBracketLines), so they hold at any width. */ .sw-bracket-wrap{overflow-x:auto;overflow-y:hidden;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding:10px 10px 12px; -webkit-mask:linear-gradient(90deg,#000 0,#000 calc(100% - 16px),transparent 100%)} .sw-bracket-wrap::-webkit-scrollbar{display:none} .sw-bracket{position:relative;display:flex;gap:26px;min-width:min-content} .sw-br-lines{position:absolute;inset:0;pointer-events:none;overflow:visible} .sw-br-lines path{fill:none;stroke:color-mix(in srgb,var(--secondary-color) 20%,transparent);stroke-width:1.5} .sw-br-round{display:flex;flex-direction:column;flex:0 0 112px} .sw-br-head{font-weight:700;font-size:1rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);text-align:center;padding-bottom:8px;margin-bottom:2px; border-bottom:1px solid color-mix(in srgb,var(--secondary-color) 10%,transparent)} /* the column that holds the cards — space-around is what makes the rounds line up, so nothing else may set its distribution */ .sw-br-col{flex:1;display:flex;flex-direction:column;justify-content:space-around} .sw-br-match{position:relative;border-radius:8px;overflow:hidden; border:1px solid color-mix(in srgb,var(--secondary-color) 10%,transparent); background:color-mix(in srgb,var(--secondary-color) 5%,transparent);transition:all .2s} .sw-br-match:hover{border-color:color-mix(in srgb,var(--primary-color) 50%,transparent)} .sw-br-match.pending{background:transparent} .sw-br-when{font-weight:700;font-size:1rem;letter-spacing:.06em;color:var(--primary-color); text-align:center;padding:4px 0 3px; border-bottom:1px solid color-mix(in srgb,var(--secondary-color) 8%,transparent)} .sw-br-side{display:flex;align-items:center;gap:6px;padding:5px 7px;font-variant-numeric:tabular-nums} .sw-br-side+.sw-br-side{border-top:1px solid color-mix(in srgb,var(--secondary-color) 6%,transparent)} .sw-br-side img{width:20px;height:15px;object-fit:cover;flex-shrink:0;border-radius:2px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--secondary-color) 14%,transparent)} .sw-br-noflag{width:20px;height:15px;flex-shrink:0;border-radius:2px; background:color-mix(in srgb,var(--secondary-color) 9%,transparent)} .sw-br-code{flex:1;font-weight:700;font-size:1rem;letter-spacing:.03em;color:var(--muted)} .sw-br-pts{font-weight:700;font-size:1rem;color:var(--muted)} /* the winner is the only thing in the tree that gets full ink */ .sw-br-side.won .sw-br-code{color:var(--secondary-color)} .sw-br-side.won .sw-br-pts{color:var(--primary-color)} .sw-br-side.won{background:color-mix(in srgb,var(--primary-color) 12%,transparent)} /* ── PER-PAGE OPT-INS ── The category chips are hidden on the landing widget because the pool headers already carry the Men/Women split. The bracket draws ONE category at a time, so there the chips are the only way to reach the other tree: a page turns them back on with .sw-show-cats on the panel. */ .sports-widget.sw-show-cats .sw-chips--cat{display:flex} /* Keep the last row clear of the fixed ext-slider dock. The clearance is PADDING ON THE PARENT, not a margin on the panel: these pages scroll inside main (landing.css sets main{overflow:auto} over main.css's height:100%), and a scroll container does not honour the bottom margin of its last child — which is exactly why the pages this replaced put their spacer on #modules rather than on #main. The panel's own margin-bottom was silently dropped and the last fixtures sat under the dock. */ .game:has(.sports-widget){padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))} /* Side gutter. A real phone gets neither page-frame class (js/page-frame.js only labels >=768px viewports), so main keeps main.css's zero side padding and the panel ran edge to edge. Same 16px the landing gives its sections. */ @media(max-width:768px){ .game:has(.sports-widget){padding-left:16px;padding-right:16px} } @media(orientation:landscape) and (max-height:500px){ /* the dock hides itself on a short landscape viewport */ .game:has(.sports-widget){padding-bottom:24px} } /* ── ?desktop=1 (js/page-frame.js) ── The page is full width there, so the panel is allowed to be — a bracket especially wants the room, and the round columns can breathe. The dock is removed on a .desktop-page body, so the clearance above goes back to a plain margin. */ body.desktop-page .sports-widget{max-width:1100px} body.desktop-page .game:has(.sports-widget){padding-bottom:32px} body.desktop-page .sw-br-round{flex:0 0 150px}