/* ============================================================ Legacy Manager — SATURDAY NIGHT LIGHTS design system (College football is played on Saturdays.) Ported verbatim from the approved v4 prototype (02_friday_night_broadcast_v4.html). Page sections are scoped under #page-; each Django template's root is
. Django-integration primitives appended at the end. ============================================================ */ /* ======================== SHELL / DESIGN SYSTEM ======================== */ /* ============================================================ SATURDAY NIGHT LIGHTS — Legacy Manager design system All tokens, components, and the animation engine live here. Page authors reuse these classes (see CATALOG.md). ============================================================ */ /* ---- TOKENS : dark (default) ---- */ :root{ --bg:#0A0E14; --panel:#121821; --panel-2:#161E2B; --line:#26324A; --line-bright:#34456A; --accent:#1E6FFF; --accent-bright:#4A8BFF; --live:#FFB02E; --win:#37D67A; --loss:#FF5C5C; --gold:#E6C15A; --ink:#FFFFFF; --ink-2:#C4D0E4; --dim:#8294B4; --mute:#5A6B8C; /* per-team accent (drives chips, your-rows, GOTW glow). @CTROB = Alabama crimson */ --me:#9E1B32; /* surfaces tuned per theme */ --header-bg:rgba(10,14,20,.72); --glass:rgba(18,24,33,.66); --shadow-card:0 1px 0 rgba(255,255,255,.02), 0 12px 28px -18px rgba(0,0,0,.8); --shadow-lift:0 1px 0 rgba(255,255,255,.04), 0 22px 44px -20px rgba(0,0,0,.85); --zebra:rgba(255,255,255,.018); --hover-row:rgba(30,111,255,.07); --scrim:rgba(8,11,16,.66); /* radii / spacing rhythm */ --r-sm:7px; --r:11px; --r-lg:16px; --r-xl:22px; --pad:clamp(16px,3.5vw,28px); --maxw:1320px; /* type */ --disp:"Saira Condensed",ui-sans-serif,system-ui,sans-serif; --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; /* easing + motion */ --ease-out-quint:cubic-bezier(.22,1,.36,1); --ease-out-expo:cubic-bezier(.16,1,.3,1); /* z-scale (semantic, never arbitrary) */ --z-base:1; --z-raised:5; --z-dropdown:40; --z-sticky:60; --z-scrim:80; --z-drawer:90; --z-toast:120; /* docked scores ticker height (fixed bottom on desktop, fixed top on mobile) */ --ticker-h:42px; } /* ---- TOKENS : light ("studio day") ---- */ :root[data-theme="light"]{ --bg:#EEF2F8; --panel:#FFFFFF; --panel-2:#F4F7FC; --line:#D3DCEC; --line-bright:#BBC8E0; --accent:#1E6FFF; --accent-bright:#0F58E0; --live:#C97A00; --win:#16965A; --loss:#D43B3B; --gold:#A9802A; --ink:#0B1424; --ink-2:#33425C; --dim:#5E6E8C; --mute:#8595B0; --me:#9E1B32; --header-bg:rgba(238,242,248,.74); --glass:rgba(255,255,255,.7); --shadow-card:0 1px 0 rgba(255,255,255,.6), 0 10px 24px -18px rgba(20,40,80,.32); --shadow-lift:0 1px 0 rgba(255,255,255,.7), 0 22px 40px -20px rgba(20,40,80,.34); --zebra:rgba(13,30,60,.022); --hover-row:rgba(30,111,255,.06); --scrim:rgba(20,32,56,.34); } /* ---- SKIN : CFB27 (EA College Football 27 broadcast chrome) ---- Activated by (set from settings.THEME_PRESET via the current_tenant context processor). The original look = data-skin "fnb"/absent. This block ONLY adds rules under [data-skin="cfb27"], so FNB v4 is untouched. Final hexes from docs/cfb27_alignment.html; tune during the render check. */ :root[data-skin="cfb27"]{ --bg:#090b10; --panel:#161b24; --panel-2:#1b2230; --line:#222b3a; --line-bright:#33415c; --accent:#46b8ea; --accent-bright:#6fcef5; /* cyan — the ◆ diamond accent */ --ink:#FFFFFF; --ink-2:#c2cede; --dim:#8493a8; --mute:#6a7a96; --header-bg:rgba(9,11,16,.84); --glass:rgba(22,27,36,.7); --scrim:rgba(5,7,11,.7); /* CFB27 currency + economy category palette (additive; FNB ignores these) */ --ds-points:#46b8ea; /* ◆ Legacy/Dynasty points */ --cat-staff:#3f73e6; --cat-fac:#cf2f97; --cat-recruit:#f0892a; --cat-roster:#f6b81f; /* fallback team-band colors when no coach/team is bound */ --team-1:#11233f; --team-2:#46b8ea; } /* CFB27 skin — LIGHT mode ("studio day"). MUST out-specify the cfb27 dark token block above (0,2,1 > 0,1,1), otherwise the day/night toggle does nothing under the active skin — the equal-specificity dark skin tokens were winning by source order, which is why "there was no light mode". Generic --win/--loss/--gold/--me come from :root[data-theme="light"]; only the skin-owned tokens are redeclared here. */ :root[data-skin="cfb27"][data-theme="light"]{ --bg:#EEF3F9; --panel:#FFFFFF; --panel-2:#F1F6FC; --line:#D2DCEC; --line-bright:#BAC8E0; --accent:#0E7AAE; --accent-bright:#0A5E87; /* deeper cyan: readable on white */ --ink:#0B1424; --ink-2:#33425C; --dim:#566683; --mute:#8090AC; --header-bg:rgba(238,243,249,.82); --glass:rgba(255,255,255,.72); --scrim:rgba(20,32,56,.34); --ds-points:#0E7AAE; /* ◆ diamond, deeper for contrast */ --cat-staff:#2f5fd0; --cat-fac:#b81f83; --cat-recruit:#cf6f12; --cat-roster:#b8860b; --team-1:#cdd9ea; --team-2:#0E7AAE; } /* CFB27 type tell: condensed all-caps on eyebrow/kicker labels and table headers only. NOTE: This codebase uses page-scoped eyebrow/kicker classes (no bare .eyebrow/.kicker). Body copy stays Inter sentence-case (NOT applied to paragraphs or td cells). */ :root[data-skin="cfb27"] .sb-eyebrow, :root[data-skin="cfb27"] .bk-eyebrow, :root[data-skin="cfb27"] .pwr-eyebrow, :root[data-skin="cfb27"] .mc-kicker, :root[data-skin="cfb27"] .hist-kicker, :root[data-skin="cfb27"] .rh-kicker, :root[data-skin="cfb27"] .rc-kicker, :root[data-skin="cfb27"] .cd-kicker, :root[data-skin="cfb27"] .cn-kicker, :root[data-skin="cfb27"] .ep-kicker, :root[data-skin="cfb27"] .gh-kicker, :root[data-skin="cfb27"] thead th{ font-family:var(--disp); text-transform:uppercase; letter-spacing:.04em; } /* ◆ currency utility — used by the band now, by economy chips later. */ :root[data-skin="cfb27"] .ds-pts::before{ content:"\25C6"; /* ◆ */ color:var(--ds-points); margin-right:.28em; font-size:.82em; } /* Header band — hidden everywhere except the CFB27 skin. */ .cfb27-band{display:none} :root[data-skin="cfb27"] .cfb27-band{ display:flex; align-items:center; gap:12px; padding:10px clamp(16px,3.5vw,28px); font-family:var(--disp); text-transform:uppercase; letter-spacing:.03em; color:#fff; background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.16) 42%, transparent 46%), linear-gradient(90deg, var(--team-1,#11233f), color-mix(in oklab, var(--team-1,#11233f) 55%, var(--team-2,#46b8ea))); border-bottom:2px solid var(--team-2,#46b8ea); } :root[data-skin="cfb27"] .cfb27-band__logo{height:26px;width:26px;object-fit:contain} :root[data-skin="cfb27"] .cfb27-band__name{font-weight:900;font-size:1.05rem} :root[data-skin="cfb27"] .cfb27-band__sub{font-weight:600;opacity:.82;font-size:.82rem} *{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.5; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition:background-color .5s var(--ease-out-quint), color .5s var(--ease-out-quint); } /* ambient broadcast wash */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 520px at 82% -8%, color-mix(in oklab,var(--accent) 16%, transparent), transparent 60%), radial-gradient(760px 480px at 6% 2%, color-mix(in oklab,var(--me) 12%, transparent), transparent 62%); opacity:.9; transition:opacity .5s var(--ease-out-quint); } :root[data-theme="light"] body::before{ opacity:.45; } a{color:inherit; text-decoration:none} button{font-family:inherit} img{max-width:100%} :focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; border-radius:4px; } ::selection{ background:color-mix(in oklab,var(--accent) 40%, transparent); color:#fff; } /* tabular numerals everywhere numbers appear */ .num,.score,.count,td .v,.lp,.rating{ font-variant-numeric:tabular-nums; } /* ============================================================ HEADER / NAV ============================================================ */ .hdr{ position:sticky; top:0; z-index:var(--z-sticky); background:var(--header-bg); -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--line); } .hdr::after{ /* hairline of accent light */ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent) 55%,transparent),transparent); opacity:.5; } .hdr-in{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); height:62px; display:flex; align-items:center; gap:8px; } .brand{ display:flex; align-items:center; gap:11px; cursor:pointer; margin-right:6px; flex:0 0 auto; } .brand-mark{ width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; } .brand-mark svg{ width:34px; height:34px; display:block; } .brand-txt{ display:flex; flex-direction:column; line-height:1; } .brand-txt b{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.04em; text-transform:uppercase; } .brand-txt span{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.34em; color:var(--accent-bright); margin-top:3px; } .nav{ display:flex; align-items:center; gap:2px; margin-left:4px; } .nav-link, .nav-trigger{ position:relative; display:inline-flex; align-items:center; gap:7px; height:62px; padding:0 13px; background:none; border:0; cursor:pointer; font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; transition:color .2s var(--ease-out-quint); } .nav-link:hover,.nav-trigger:hover{ color:var(--ink); } .nav-link::after,.nav-trigger::after{ /* animated underline */ content:""; position:absolute; left:13px; right:13px; bottom:14px; height:2px; border-radius:2px; background:var(--accent-bright); transform:scaleX(0); transform-origin:left; transition:transform .26s var(--ease-out-expo); } .nav-link:hover::after,.nav-trigger:hover::after, .nav-link[aria-current="page"]::after,.nav-group.open .nav-trigger::after, .nav-trigger.is-active::after{ transform:scaleX(1); } .nav-link[aria-current="page"],.nav-trigger.is-active{ color:var(--ink); } .nav-trigger .caret{ width:9px; height:9px; transition:transform .26s var(--ease-out-expo); opacity:.7; } .nav-group.open .nav-trigger .caret{ transform:rotate(180deg); } /* dropdown — fixed-positioned so it never clips inside the header */ .nav-group{ position:relative; } .menu{ position:fixed; z-index:var(--z-dropdown); min-width:230px; background:var(--panel); border:1px solid var(--line-bright); border-radius:var(--r); box-shadow:var(--shadow-lift); padding:7px; opacity:0; transform:translateY(-8px) scale(.97); transform-origin:top left; pointer-events:none; transition:opacity .18s var(--ease-out-quint), transform .22s var(--ease-out-expo); } .menu.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .menu a{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; font-family:var(--body); font-weight:600; font-size:14px; color:var(--ink-2); letter-spacing:0; text-transform:none; transition:background-color .15s, color .15s; } .menu a:hover{ background:var(--hover-row); color:var(--ink); } .menu a .mi{ width:7px; height:7px; border-radius:50%; background:var(--mute); flex:0 0 auto; } .menu a:hover .mi{ background:var(--accent-bright); } .menu a small{ margin-left:auto; color:var(--dim); font-size:11.5px; font-weight:600; } /* small live ● indicator (USDA-TV menu item / nav) */ .live-dot{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live); flex:0 0 auto; animation:pulse 1.5s ease-in-out infinite; } .menu a .live-dot{ margin-left:auto; } @media (prefers-reduced-motion: reduce){ .live-dot{ animation:none; } } .hdr-right{ margin-left:auto; display:flex; align-items:center; gap:10px; } /* theme toggle */ .theme-toggle{ position:relative; width:38px; height:38px; border-radius:10px; cursor:pointer; background:var(--panel-2); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2); transition:border-color .2s, color .2s, background-color .2s; } .theme-toggle:hover{ border-color:var(--line-bright); color:var(--ink); } .theme-toggle svg{ width:18px; height:18px; position:absolute; transition:opacity .3s var(--ease-out-quint), transform .4s var(--ease-out-expo); } .theme-toggle .i-sun{ opacity:0; transform:rotate(-90deg) scale(.6); } .theme-toggle .i-moon{ opacity:1; transform:rotate(0) scale(1); } :root[data-theme="light"] .theme-toggle .i-sun{ opacity:1; transform:rotate(0) scale(1); } :root[data-theme="light"] .theme-toggle .i-moon{ opacity:0; transform:rotate(90deg) scale(.6); } /* user chip — crimson tinted (per-team --me) */ .user-chip{ display:flex; align-items:center; gap:9px; height:38px; padding:0 12px 0 7px; border-radius:10px; cursor:pointer; background:color-mix(in oklab,var(--me) 16%, var(--panel-2)); border:1px solid color-mix(in oklab,var(--me) 42%, var(--line)); transition:border-color .2s, background-color .2s, transform .15s var(--ease-out-quint); } .user-chip:hover{ border-color:color-mix(in oklab,var(--me) 64%, var(--line)); transform:translateY(-1px); } .user-chip .ava{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; flex:0 0 auto; background:var(--me); color:#fff; font-family:var(--disp); font-weight:800; font-size:14px; } .user-chip .uc-txt{ display:flex; flex-direction:column; line-height:1.05; } .user-chip .uc-txt b{ font-size:12.5px; font-weight:700; letter-spacing:.02em; } .user-chip .uc-txt span{ font-size:10.5px; color:color-mix(in oklab,var(--me) 30%, var(--ink-2)); font-weight:600; } /* hamburger (mobile) */ .burger{ display:none; width:38px; height:38px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); cursor:pointer; place-items:center; } .burger svg{ width:20px; height:20px; } /* ============================================================ LAYOUT : page sections + transitions ============================================================ */ #app{ position:relative; z-index:var(--z-base); } .page{ max-width:var(--maxw); margin:0 auto; padding:clamp(20px,3vw,34px) var(--pad) 90px; } .page[hidden]{ display:none; } /* Defensive: the `hidden` attribute is our universal JS toggle (modals, edit rows, collapsible forms). Element-scoped display rules (e.g. #page-myclass .mc-modal-scrim {display:grid}) beat the UA `[hidden]{display:none}` on specificity, which left the Edit-Recruit modal stuck open and dimming the page. Force it so `hidden` always wins. */ [hidden]{ display:none !important; } /* page transition: incoming slides up + fades */ .page.active{ animation:pageIn .34s var(--ease-out-expo) both; } @keyframes pageIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } /* outgoing handled by JS via .leaving (down + out, faster) */ .page.leaving{ animation:pageOut .18s var(--ease-out-quint) both; } @keyframes pageOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(10px); } } /* ============================================================ REVEAL / COUNT / BAR animation helpers ============================================================ */ .reveal{ opacity:0; transform:translateY(14px); } .reveal.in{ opacity:1; transform:none; transition:opacity .5s var(--ease-out-quint), transform .58s var(--ease-out-expo); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } } /* ============================================================ LOWER-THIRD section header ============================================================ */ .lower-third{ display:flex; align-items:flex-end; gap:13px; margin:clamp(26px,4vw,42px) 0 16px; } .lower-third:first-child{ margin-top:4px; } .lower-third .lt-bar{ width:5px; align-self:stretch; min-height:30px; border-radius:3px; background:var(--accent); box-shadow:0 0 16px -2px color-mix(in oklab,var(--accent) 80%,transparent); } .lower-third.is-me .lt-bar{ background:var(--me); box-shadow:0 0 16px -2px color-mix(in oklab,var(--me) 80%,transparent); } .lower-third h2{ margin:0; font-family:var(--disp); font-weight:800; font-size:clamp(22px,3.2vw,30px); letter-spacing:.02em; text-transform:uppercase; line-height:1; } .lower-third .lt-sub{ color:var(--dim); font-size:13px; font-weight:600; padding-bottom:2px; } .lower-third .lt-action{ margin-left:auto; padding-bottom:2px; } /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:10px; border:1px solid var(--line-bright); background:var(--panel-2); color:var(--ink); font-family:var(--disp); font-weight:700; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:transform .12s var(--ease-out-quint), border-color .2s, background-color .2s, box-shadow .2s; } .btn:hover{ border-color:var(--accent); transform:translateY(-1px); } .btn:active{ transform:translateY(0) scale(.98); } .btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 10px 24px -12px color-mix(in oklab,var(--accent) 90%,#000); } .btn.primary:hover{ background:var(--accent-bright); border-color:var(--accent-bright); } .btn.me{ background:var(--me); border-color:var(--me); color:#fff; box-shadow:0 10px 24px -12px color-mix(in oklab,var(--me) 90%,#000); } .btn.me:hover{ filter:brightness(1.08); } .btn.ghost{ background:transparent; } .btn.sm{ height:31px; padding:0 12px; font-size:12px; } /* ============================================================ PANELS / CARDS ============================================================ */ .panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); position:relative; } .panel.pad{ padding:clamp(15px,2vw,20px); } .panel-h{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); } .panel-h h3{ margin:0; font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:.05em; text-transform:uppercase; } .panel-h .ph-r{ margin-left:auto; color:var(--dim); font-size:12.5px; font-weight:600; } .panel-b{ padding:6px 8px; } /* generic grid helpers */ .grid{ display:grid; gap:clamp(12px,1.6vw,18px); } .cols-2{ grid-template-columns:repeat(2,1fr); } .cols-3{ grid-template-columns:repeat(3,1fr); } .auto{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .stack{ display:flex; flex-direction:column; gap:clamp(12px,1.6vw,18px); } /* ============================================================ SCORE-BUG game card (signature component) ============================================================ */ .bug{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 16px 14px; overflow:hidden; box-shadow:var(--shadow-card); transition:transform .2s var(--ease-out-expo), border-color .2s, box-shadow .2s; } .bug::before{ /* 2px colored top edge that lights up on hover */ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); opacity:.7; transition:opacity .2s, box-shadow .2s; } .bug:hover{ transform:translateY(-3px); border-color:var(--line-bright); box-shadow:var(--shadow-lift); } .bug:hover::before{ opacity:1; box-shadow:0 0 16px 1px color-mix(in oklab,var(--accent) 75%,transparent); } .bug.is-live::before{ background:var(--live); } .bug.is-live:hover::before{ box-shadow:0 0 16px 1px color-mix(in oklab,var(--live) 75%,transparent); } .bug.is-gotw::before{ background:var(--me); } .bug.is-gotw:hover{ border-color:color-mix(in oklab,var(--me) 50%,var(--line)); } .bug.is-gotw:hover::before{ box-shadow:0 0 18px 2px color-mix(in oklab,var(--me) 80%,transparent); } .bug-top{ display:flex; align-items:center; gap:8px; margin-bottom:11px; } .bug-meta{ margin-left:auto; color:var(--dim); font-size:11.5px; font-weight:600; letter-spacing:.03em; } .bug-row{ display:flex; align-items:center; gap:11px; padding:5px 0; } .bug-row + .bug-row{ border-top:1px solid var(--line); } .bug-row.winner .team-name{ color:var(--ink); } .bug-row .poss{ width:7px; height:7px; border-radius:50%; background:transparent; flex:0 0 auto; } .bug-row.has-poss .poss{ background:var(--live); box-shadow:0 0 8px var(--live); animation:pulse 1.6s ease-in-out infinite; } .team-name{ font-family:var(--disp); font-weight:700; font-size:17px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .team-name .seed{ color:var(--dim); font-size:12px; margin-right:5px; font-weight:600; } .bug-row .score{ font-family:var(--disp); font-weight:800; font-size:25px; letter-spacing:.01em; color:var(--ink-2); min-width:34px; text-align:right; } .bug-row.winner .score{ color:var(--ink); } /* team monogram chip — accent driven by --c (set inline per team) */ .mono{ width:30px; height:30px; border-radius:8px; flex:0 0 auto; display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:14px; color:#fff; letter-spacing:.01em; background:var(--c,var(--accent)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 10px -6px var(--c,var(--accent)); } .mono.lg{ width:42px; height:42px; border-radius:10px; font-size:20px; } .mono.xl{ width:64px; height:64px; border-radius:14px; font-size:30px; } /* The operator/admin pages (.admin-tools / .lp-audit-page / .sched-preview) reuse the class name `.mono` to mean MONOSPACE TEXT, not the team monogram chip above. Without this reset the chip geometry leaks in and every eyebrow / help paragraph / table cell collapses into a 30px accent-blue grid square with the text overflowing — the admin Tools "text collision" bug. Neutralize the chip geometry so it's plain mono text. */ .admin-tools .mono, .lp-audit-page .mono, .sched-preview .mono{ display:revert; width:auto; height:auto; min-width:0; border-radius:0; flex:initial; place-items:normal; background:none; box-shadow:none; color:inherit; font-weight:inherit; font-size:inherit; letter-spacing:inherit; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; } /* ============================================================ TEAM LOGO — real with monogram fallback ALA Sizes: --logo-sz (default 28) or .logo-sm 22 / .logo-md 36 / .logo-lg 44. ============================================================ */ .logo-wrap{ --logo-sz:28px; position:relative; display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:var(--logo-sz); height:var(--logo-sz); border-radius:7px; overflow:hidden; background:var(--panel-2); } .logo-wrap.logo-sm{ --logo-sz:22px; border-radius:6px; } .logo-wrap.logo-md{ --logo-sz:36px; border-radius:8px; } .logo-wrap.logo-lg{ --logo-sz:44px; border-radius:9px; } .logo{ width:100%; height:100%; object-fit:contain; display:block; border-radius:inherit; background:transparent; } /* monogram fallback — hidden until the errors out (add .is-broken via onerror) */ .logo-ph{ position:absolute; inset:0; display:none; place-items:center; background:var(--lc,var(--accent)); color:#fff; font-family:var(--disp); font-weight:800; font-size:calc(var(--logo-sz) * .42); letter-spacing:.01em; line-height:1; text-transform:uppercase; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } .logo.is-broken{ display:none; } .logo.is-broken + .logo-ph{ display:grid; } /* if the is omitted entirely, still show the monogram chip */ .logo-wrap > .logo-ph:first-child{ display:grid; } /* ============================================================ PILLS / BADGES ============================================================ */ .pill{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:999px; font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; } .pill.live{ color:var(--live); border-color:color-mix(in oklab,var(--live) 45%,var(--line)); background:color-mix(in oklab,var(--live) 14%,var(--panel-2)); } .pill.live .dot{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 8px var(--live); animation:pulse 1.5s ease-in-out infinite; } .pill.final{ color:var(--dim); } .pill.gotw{ color:var(--me); border-color:color-mix(in oklab,var(--me) 50%,var(--line)); background:color-mix(in oklab,var(--me) 15%,var(--panel-2)); } .pill.win{ color:var(--win); border-color:color-mix(in oklab,var(--win) 40%,var(--line)); background:color-mix(in oklab,var(--win) 12%,var(--panel-2)); } .pill.loss{ color:var(--loss); border-color:color-mix(in oklab,var(--loss) 40%,var(--line)); background:color-mix(in oklab,var(--loss) 12%,var(--panel-2)); } .pill.rank{ color:var(--gold); border-color:color-mix(in oklab,var(--gold) 42%,var(--line)); background:color-mix(in oklab,var(--gold) 12%,var(--panel-2)); } .pill.ai{ color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 45%,var(--line)); background:color-mix(in oklab,var(--accent) 13%,var(--panel-2)); } .pill.bye{ color:var(--mute); } @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.78); } } @media (prefers-reduced-motion: reduce){ .pill.live .dot,.bug-row.has-poss .poss{ animation:none; } } /* movement arrows */ .mv{ display:inline-flex; align-items:center; gap:2px; font-weight:700; font-size:12.5px; font-variant-numeric:tabular-nums; } .mv.up{ color:var(--win); } .mv.down{ color:var(--loss); } .mv.flat{ color:var(--mute); } .mv svg{ width:11px; height:11px; } .mv.up svg,.mv.down svg{ animation:nudge .5s var(--ease-out-expo) both; } @keyframes nudge{ from{ transform:translateY(var(--ny,3px)); opacity:0; } to{ transform:none; opacity:1; } } .mv.down svg{ --ny:-3px; } @media (prefers-reduced-motion: reduce){ .mv svg{ animation:none; } } /* ============================================================ STAT CHIPS ============================================================ */ .chip{ display:flex; flex-direction:column; gap:5px; padding:13px 15px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); min-width:0; } .chip .k{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } .chip .v{ font-family:var(--disp); font-weight:800; font-size:clamp(22px,3vw,30px); line-height:1; letter-spacing:.01em; } .chip .sub{ font-size:12px; color:var(--ink-2); font-weight:500; } /* progress bar (.bar grows on page show) */ .track{ height:7px; border-radius:999px; background:var(--panel-2); overflow:hidden; border:1px solid var(--line); } .bar{ height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-bright)); } .bar.in{ width:var(--w); transition:width .9s var(--ease-out-expo); } .bar.me{ background:linear-gradient(90deg,var(--me),color-mix(in oklab,var(--me) 55%,#ff7a90)); } .bar.gold{ background:linear-gradient(90deg,color-mix(in oklab,var(--gold) 70%,#000),var(--gold)); } @media (prefers-reduced-motion: reduce){ .bar{ width:var(--w); } } /* ============================================================ TABLES (standings / LP / power) ============================================================ */ .tbl-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); } table.tbl{ width:100%; border-collapse:collapse; min-width:540px; } .tbl thead th{ position:sticky; top:0; background:var(--panel-2); z-index:1; font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; } .tbl thead th.r,.tbl td.r{ text-align:right; } .tbl thead th.c,.tbl td.c{ text-align:center; } .tbl tbody td{ padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-2); } .tbl tbody tr:last-child td{ border-bottom:0; } .tbl tbody tr:nth-child(even){ background:var(--zebra); } .tbl tbody tr{ transition:background-color .15s; } .tbl tbody tr:hover{ background:var(--hover-row); } .tbl tbody tr.is-me{ background:color-mix(in oklab,var(--me) 11%, transparent); box-shadow:inset 3px 0 0 var(--me); } .tbl tbody tr.is-me:hover{ background:color-mix(in oklab,var(--me) 16%, transparent); } .tbl .rk{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--ink); width:34px; } .tbl .team-cell{ display:flex; align-items:center; gap:10px; } .tbl .team-cell b{ font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); } .tbl .v{ font-family:var(--disp); font-weight:700; color:var(--ink); } .tbl .psn{ color:var(--dim); font-weight:600; font-size:12.5px; } /* ============================================================ TICKER footer (seamless loop, pause on hover, edge fades) ============================================================ */ .ticker{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky); /* docked to viewport bottom (desktop) */ border-top:1px solid var(--line); background:var(--panel); height:var(--ticker-h); display:flex; align-items:center; overflow:hidden; } .ticker::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:90px; z-index:2; background:linear-gradient(90deg,var(--panel),transparent); pointer-events:none; } .ticker::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:90px; z-index:2; background:linear-gradient(270deg,var(--panel),transparent); pointer-events:none; } .ticker .tag{ position:absolute; left:0; top:0; bottom:0; z-index:3; display:flex; align-items:center; gap:.34em; padding:0 16px; background:var(--accent); color:#fff; font-family:var(--disp); font-weight:800; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; } .ticker-track{ display:flex; align-items:center; white-space:nowrap; padding-left:120px; animation:ticker 42s linear infinite; } /* Mobile: stack the "USDA / Wire" label flush-left + tighten items so more words scroll into view. */ @media (max-width:760px){ .ticker .tag{ flex-direction:column; align-items:flex-start; justify-content:center; gap:0; padding:0 8px; font-size:10px; letter-spacing:.05em; line-height:1.05; } .ticker-track{ padding-left:52px; } .ticker::before{ width:48px; } .ticker::after{ width:48px; } .ticker-item{ padding:0 13px; } } .ticker:hover .ticker-track{ animation-play-state:paused; } .ticker-item{ display:inline-flex; align-items:center; gap:8px; padding:0 22px; font-size:13px; color:var(--ink-2); font-weight:500; } .ticker-item b{ font-family:var(--disp); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); } .ticker-item .sep{ color:var(--mute); } .ticker-item .up{ color:var(--win); font-weight:700; } .ticker-item .dn{ color:var(--loss); font-weight:700; } .ticker-item .ti-logo{ width:17px; height:17px; object-fit:contain; border-radius:3px; flex:0 0 auto; background:var(--panel-2); } .ticker-item .ti-team{ color:var(--ink-2); } .ticker-item .ti-team.ti-win{ color:var(--ink); font-weight:700; } .ticker-item .ti-at{ color:var(--mute); margin:0 -2px; } @keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } } /* desktop: keep page content clear of the fixed bottom ticker (only when it renders) */ @media (min-width:761px){ body:has(.ticker){ padding-bottom:var(--ticker-h); } } /* ============================================================ MOBILE DRAWER ============================================================ */ .scrim{ position:fixed; inset:0; z-index:var(--z-scrim); background:var(--scrim); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s; } .scrim.open{ opacity:1; pointer-events:auto; } .drawer{ position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px); z-index:var(--z-drawer); background:var(--panel); border-left:1px solid var(--line-bright); box-shadow:var(--shadow-lift); transform:translateX(102%); transition:transform .34s var(--ease-out-expo); display:flex; flex-direction:column; overflow-y:auto; } .drawer.open{ transform:none; } .drawer-h{ display:flex; align-items:center; padding:16px var(--pad); border-bottom:1px solid var(--line); } .drawer-h .close{ margin-left:auto; width:36px; height:36px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); display:grid; place-items:center; cursor:pointer; } .drawer-nav{ padding:10px var(--pad) 30px; display:flex; flex-direction:column; gap:2px; } .drawer-nav > a, .acc-head{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:13px 8px; border:0; background:none; font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); cursor:pointer; border-bottom:1px solid var(--line); } .drawer-nav > a:hover,.acc-head:hover{ color:var(--ink); } .acc-head .caret{ margin-left:auto; width:12px; height:12px; transition:transform .25s var(--ease-out-expo); } .acc.open .acc-head .caret{ transform:rotate(180deg); } .acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease-out-expo); } .acc.open .acc-body{ grid-template-rows:1fr; } .acc-body > div{ overflow:hidden; } .acc-body a{ display:flex; align-items:center; gap:9px; padding:11px 8px 11px 18px; font-weight:600; font-size:14px; color:var(--dim); } .acc-body a:hover{ color:var(--ink); } .acc-body a .mi{ width:6px; height:6px; border-radius:50%; background:var(--mute); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1100px){ .cols-3{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ .nav{ display:none; } .burger{ display:none; } /* replaced by the bottom dock */ .user-chip .uc-txt{ display:none; } .user-chip{ padding:0 6px; } .cols-2,.cols-3{ grid-template-columns:1fr; } .hdr-in{ height:56px; } .brand-txt span{ letter-spacing:.28em; } /* mobile: ticker rides at the TOP (bottom is the dock); content scrolls behind it. The sticky header drops below the ticker; body padding clears both ends. Top spacing only applies when the ticker actually renders (games exist). */ .ticker{ top:0; bottom:auto; z-index:65; } body:has(.ticker) .hdr{ top:var(--ticker-h); } body:has(.ticker){ padding-top:var(--ticker-h); } body{ padding-bottom:calc(62px + env(safe-area-inset-bottom)); } } @media (min-width:761px){ .drawer,.scrim{ display:none; } } /* ---------- mobile bottom dock ---------- */ .dock{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; height:calc(62px + env(safe-area-inset-bottom)); padding:0 4px env(safe-area-inset-bottom); /* Solid background, NO backdrop-filter. iOS Safari mis-positions a position:fixed element that also carries backdrop-filter — it detaches from the viewport and drifts/"undocks" on scroll (same WebKit bug fixed earlier on .busy-overlay). A docked bar must stay docked. */ background:var(--panel); border-top:1px solid var(--line); align-items:stretch; justify-content:space-around; } @media (max-width:760px){ .dock{ display:flex; } } .dock-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:0; cursor:pointer; color:var(--mute); font-family:var(--body); padding:8px 2px 6px; -webkit-tap-highlight-color:transparent; position:relative; } .dock-ic{ width:23px; height:23px; display:flex; align-items:center; justify-content:center; } .dock-ic svg{ width:23px; height:23px; display:block; } .dock-ic .ic-fill{ display:none; } .dock-lb{ font-size:9px; font-weight:700; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap; } .dock-item[aria-current="page"]{ color:var(--accent-bright); } .dock-item[aria-current="page"] .ic-line{ display:none; } .dock-item[aria-current="page"] .ic-fill{ display:block; } .dock-item[aria-current="page"]::before{ content:""; position:absolute; top:0; left:24%; right:24%; height:2px; border-radius:0 0 3px 3px; background:var(--accent); } .dock-item{ transition:transform .09s ease, color .15s; } .dock-item:active{ transform:scale(.9); } .dock-item:active .dock-ic{ transform:scale(.86); transition:transform .09s ease; } @media (max-width:420px){ .brand-txt b{ font-size:16px; } .page{ padding-bottom:70px; } } /* ============================================================ TACTILE PRESS FEEDBACK — every interactive surface visibly confirms the tap (the bottom dock, drawer/menu links, the user chip, ticker rows, header buttons). Dark theme swallows the default tap-highlight, so we add an explicit press scale. ============================================================ */ .nav-link, .nav-trigger, .menu a, .acc-head, .acc-body a, .drawer-nav > a, .user-chip, .burger, .theme-toggle, .ticker-item, .close{ transition:transform .08s ease, color .15s, background-color .15s, border-color .15s; } .nav-link:active, .nav-trigger:active, .menu a:active, .acc-head:active, .acc-body a:active, .drawer-nav > a:active, .ticker-item:active{ transform:scale(.97); } .user-chip:active, .burger:active, .theme-toggle:active, .close:active{ transform:scale(.92); } /* touch devices: give any remaining block/flex link or button a press too */ @media (hover:none){ .btn:active, a.card:active, .card-link:active, [role="button"]:active, summary:active, .chip:active, .pill:active{ transform:scale(.97); } } /* JS-driven press (static/js/click-feedback.js) — fires on iOS Safari too, where :active is unreliable on links/divs. Mirrors the :active scales above so the tuned press feel is reliable on every device, and gives drawer + dropdown rows a clear accent highlight so hamburger-menu taps confirm instantly (they have no resting background to depress). */ .is-pressed{ transition:transform .06s ease, background-color .06s ease, filter .06s ease; } .nav-link.is-pressed, .nav-trigger.is-pressed, .menu a.is-pressed, .acc-head.is-pressed, .acc-body a.is-pressed, .drawer-nav > a.is-pressed, .ticker-item.is-pressed, .btn.is-pressed, a.card.is-pressed, .card-link.is-pressed, [role="button"].is-pressed, summary.is-pressed, .chip.is-pressed{ transform:scale(.96); } .user-chip.is-pressed, .burger.is-pressed, .theme-toggle.is-pressed, .close.is-pressed{ transform:scale(.92); } .dock-item.is-pressed{ transform:scale(.9); } .dock-item.is-pressed .dock-ic{ transform:scale(.86); } .menu a.is-pressed, .acc-body a.is-pressed, .drawer-nav > a.is-pressed, .acc-head.is-pressed{ background:color-mix(in oklab, var(--accent) 18%, transparent); border-radius:9px; filter:brightness(1.06); } @media (prefers-reduced-motion: reduce){ .is-pressed{ transform:none !important; } } /* Mobile: stronger, more obvious tap feedback (touch devices only — desktop hover keeps the subtle press). A bigger depress + a brightness pop + ring so a tap clearly registers, especially on iOS where the Vibration API is blocked. */ @media (hover: none) and (pointer: coarse){ .is-pressed{ transition:transform .05s ease, filter .05s ease, background-color .05s ease; } .nav-link.is-pressed, .nav-trigger.is-pressed, .menu a.is-pressed, .acc-head.is-pressed, .acc-body a.is-pressed, .drawer-nav > a.is-pressed, .ticker-item.is-pressed, .btn.is-pressed, a.card.is-pressed, .card-link.is-pressed, [role="button"].is-pressed, summary.is-pressed, .chip.is-pressed{ transform:scale(.93); filter:brightness(1.22); } .btn.is-pressed{ box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 55%,transparent); } .user-chip.is-pressed, .burger.is-pressed, .theme-toggle.is-pressed, .close.is-pressed{ transform:scale(.88); filter:brightness(1.25); } .dock-item.is-pressed{ transform:scale(.84); } .dock-item.is-pressed .dock-ic{ transform:scale(.8); filter:drop-shadow(0 0 7px var(--accent-bright)); } } /* utility */ .muted{ color:var(--dim); } .dim{ color:var(--mute); } .row{ display:flex; align-items:center; gap:10px; } .wrap{ flex-wrap:wrap; } .spread{ justify-content:space-between; } .center{ align-items:center; } .mt{ margin-top:14px; } .mt-lg{ margin-top:22px; } .divider{ height:1px; background:var(--line); margin:14px 0; } /* ============================================================ MOBILE-OVERFLOW SAFEGUARD (keep — prevents horizontal scroll) ============================================================ */ .grid>*,.stack,.tbl-wrap,.panel,.panel-b,.bug,.pwr-row{min-width:0} .tbl-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} img{max-width:100%} @media(max-width:760px){html,body{overflow-x:hidden}} /* mobile overflow safeguard (assembly) */ .grid>*,.stack,.tbl-wrap,.panel,.panel-b,.bug,.pwr-row{min-width:0} .tbl-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} img{max-width:100%} @media(max-width:760px){html,body{overflow-x:hidden}} /* ======================== PAGE: home ======================== */ #page-home .home-hero{ position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--line); background: linear-gradient(180deg, color-mix(in oklab,var(--accent) 9%,var(--panel)) 0%, var(--panel) 58%); padding:clamp(20px,3.4vw,34px); margin-bottom:6px; } #page-home .home-hero::after{ content:""; position:absolute; right:-60px; top:-80px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, color-mix(in oklab,var(--accent) 30%,transparent), transparent 68%); pointer-events:none; } #page-home .hh-status{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; position:relative; z-index:1; } #page-home .hh-status span{ font-family:var(--disp); font-weight:800; letter-spacing:.06em; text-transform:uppercase; } #page-home .hh-game{ font-size:13px; color:var(--accent-bright); } #page-home .hh-szn{ font-size:13px; color:var(--ink); } #page-home .hh-div{ width:4px; height:4px; border-radius:50%; background:var(--mute); } #page-home .hh-title{ font-family:var(--disp); font-weight:900; font-size:clamp(38px,6.4vw,68px); line-height:.92; letter-spacing:-.01em; text-transform:uppercase; margin:14px 0 0; text-wrap:balance; position:relative; z-index:1; } #page-home .hh-tag{ max-width:64ch; color:var(--ink-2); font-size:15px; margin:10px 0 0; position:relative; z-index:1; } #page-home .hh-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; position:relative; z-index:1; } #page-home .hh-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px; position:relative; z-index:1; } #page-home .hh-stats .chip{ background:color-mix(in oklab,var(--bg) 30%, var(--panel)); } /* USDA-TV cards */ #page-home .tv-card{ display:block; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s; } #page-home .tv-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); } #page-home .tv-thumb{ position:relative; aspect-ratio:16/9; display:grid; place-items:center; background:linear-gradient(135deg, color-mix(in oklab,var(--tc) 40%,var(--panel-2)), var(--panel-2)); } #page-home .tv-play{ font-size:30px; color:rgba(255,255,255,.9); filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); } #page-home .tv-badge{ position:absolute; top:10px; left:10px; } #page-home .tv-meta{ display:flex; align-items:center; gap:10px; padding:11px 13px; } #page-home .tv-psn{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.03em; color:var(--ink); } #page-home .tv-sub{ font-size:12.5px; color:var(--dim); font-weight:500; margin-top:1px; } /* pulse tiles : keep equal-height feel */ #page-home .pulse-tile{ height:100%; } /* Latest Results rows */ #page-home .res-row{ display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:var(--r-sm); cursor:pointer; transition:background-color .15s; } #page-home .res-row + .res-row{ border-top:1px solid var(--line); } #page-home .res-row:hover{ background:var(--hover-row); } #page-home .res-row .wk{ font-family:var(--disp); font-weight:800; font-size:12.5px; color:var(--dim); width:28px; flex:0 0 auto; letter-spacing:.04em; } #page-home .res-side{ display:flex; align-items:center; gap:7px; flex:1; min-width:0; } #page-home .res-side:last-of-type{ justify-content:flex-end; } #page-home .res-name{ font-weight:600; font-size:13.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-home .res-side.winner .res-name{ color:var(--ink); font-weight:700; } #page-home .res-sc{ font-family:var(--disp); font-weight:800; font-size:17px; color:var(--ink-2); font-variant-numeric:tabular-nums; flex:0 0 auto; } #page-home .res-side.winner .res-sc{ color:var(--ink); } #page-home .res-dash{ color:var(--mute); font-weight:700; flex:0 0 auto; } /* Champion block */ #page-home .champ-block{ display:flex; align-items:center; gap:14px; } #page-home .champ-label{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); } #page-home .champ-psn{ display:inline-block; font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:.02em; color:var(--ink); cursor:pointer; line-height:1.05; } #page-home .champ-psn:hover{ color:var(--accent-bright); } #page-home .champ-team{ font-size:13px; color:var(--ink-2); font-weight:600; margin-top:2px; } #page-home .champ-score{ font-size:12.5px; color:var(--dim); font-weight:500; margin-top:1px; } #page-home .dyn-label{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:11px; } #page-home .dyn-row{ display:flex; align-items:center; gap:10px; } #page-home .dyn-rk{ font-family:var(--disp); font-weight:800; font-size:14px; color:var(--mute); width:14px; flex:0 0 auto; } #page-home .dyn-psn{ font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--ink); cursor:pointer; } #page-home .dyn-psn:hover{ color:var(--accent-bright); } #page-home .dyn-titles{ margin-left:auto; font-family:var(--disp); font-weight:800; font-size:15px; color:var(--gold); font-variant-numeric:tabular-nums; } /* News rows */ #page-home .news-item{ display:flex; gap:12px; align-items:flex-start; padding:13px 12px; border-radius:var(--r); cursor:pointer; transition:background-color .16s; } #page-home .news-item + .news-item{ border-top:1px solid var(--line); } #page-home .news-item:hover{ background:var(--hover-row); } #page-home .news-item.pinned{ box-shadow:inset 3px 0 0 var(--gold); } #page-home .ni-tag{ flex:0 0 auto; margin-top:1px; } #page-home .ni-h{ font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35; } #page-home .ni-meta{ font-size:12px; color:var(--dim); margin-top:3px; font-weight:500; } /* Explore cards */ #page-home .explore-card{ display:flex; flex-direction:column; gap:6px; padding:18px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s; } #page-home .explore-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); } #page-home .ex-ic{ font-size:26px; line-height:1; } #page-home .ex-t{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin-top:4px; } #page-home .ex-d{ font-size:13px; color:var(--ink-2); line-height:1.4; } #page-home .ex-go{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-bright); margin-top:auto; padding-top:8px; } /* Footer */ #page-home .home-footer{ text-align:center; font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:26px 0 8px; } @media (max-width:760px){ #page-home .hh-stats{ grid-template-columns:1fr 1fr; } #page-home .hh-cta .btn{ flex:1; justify-content:center; } } @media (max-width:420px){ #page-home .hh-stats{ grid-template-columns:1fr; } } /* ======================== PAGE: myhub ======================== */ /* ---- 1a Hero ---- */ #page-myhub .hub-hero{ position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--line); padding:clamp(20px,3.2vw,32px); margin-bottom:6px; background:linear-gradient(135deg, color-mix(in oklab,var(--me) 36%,var(--panel)) 0%, color-mix(in oklab,var(--me) 8%,var(--panel)) 55%, var(--panel) 100%); } #page-myhub .hub-hero-art{ position:absolute; right:-70px; top:-90px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, color-mix(in oklab,var(--me) 40%,transparent), transparent 68%); pointer-events:none; } #page-myhub .hub-hero-main{ display:flex; align-items:center; gap:clamp(14px,2.4vw,26px); position:relative; z-index:1; } #page-myhub .hub-logo{ --logo-sz:84px; flex:0 0 auto; box-shadow:var(--shadow-card); } #page-myhub .hub-hero-id{ min-width:0; } #page-myhub .hub-conf{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); } #page-myhub .hub-team-line{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px; } #page-myhub .hub-team{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.4vw,56px); line-height:.94; letter-spacing:-.01em; text-transform:uppercase; } #page-myhub .hub-rank{ font-size:14px; } #page-myhub .hub-tier{ font-size:18px; color:var(--gold); letter-spacing:.04em; } #page-myhub .hub-coach-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; } #page-myhub .hub-avatar{ width:30px; height:30px; border-radius:50%; background:var(--ac); display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:12px; color:#fff; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); } /* uploaded profile photo — the hero's identity anchor, sits left of the team logo (hero-lead). object-fit:cover fills the round frame; size is a CSS var (one number to retune) and eases down on phones so the hero row doesn't crowd the team name. */ #page-myhub .hub-hero-main{ --hub-ava:136px; } #page-myhub .hub-avatar-img{ width:var(--hub-ava); height:var(--hub-ava); border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--panel-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 24px -10px rgba(0,0,0,.75); display:block; } /* phones: avatar + team logo share the top row, the name/record block wraps to its own full-width row below — otherwise the big avatar squeezes the team name off the edge. */ @media (max-width:600px){ #page-myhub .hub-hero-main{ flex-wrap:wrap; --hub-ava:104px; } #page-myhub .hub-hero-id{ flex:1 1 100%; } } #page-myhub .hub-psn{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.03em; color:var(--ink); } #page-myhub .admin-badge{ background:var(--me); color:#fff; border-color:transparent; } #page-myhub .hub-achievements{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; } #page-myhub .pill.ach{ cursor:default; } #page-myhub .pill.ach.gold{ background:color-mix(in oklab,var(--gold) 22%,var(--panel)); color:var(--gold); border-color:color-mix(in oklab,var(--gold) 40%,transparent); } #page-myhub .pill.ach.unicorn{ background:color-mix(in oklab,#C97BFF 20%,var(--panel)); color:#D9A8FF; border-color:color-mix(in oklab,#C97BFF 40%,transparent); } #page-myhub .pill.ach.silver{ background:var(--panel-2); color:var(--ink-2); border-color:var(--line-bright); } #page-myhub .pill.ach.primary{ background:color-mix(in oklab,var(--accent) 20%,var(--panel)); color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 40%,transparent); } #page-myhub .pill.ach.accent{ background:color-mix(in oklab,var(--live) 18%,var(--panel)); color:var(--live); border-color:color-mix(in oklab,var(--live) 38%,transparent); } /* ---- FIX(b) action bar — three visually distinct actions ---- */ #page-myhub .hub-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; } #page-myhub .hub-act{ font-size:16px; padding:13px 22px; border:1px solid transparent; font-weight:800; } #page-myhub .hub-act.act-log{ background:var(--accent); color:#fff; } #page-myhub .hub-act.act-log:hover{ background:var(--accent-bright); } #page-myhub .hub-act.act-class{ background:var(--gold); color:#1a1205; } #page-myhub .hub-act.act-class:hover{ filter:brightness(1.08); } #page-myhub .hub-act.act-live{ background:#E5484D; color:#fff; } #page-myhub .hub-act.act-live:hover{ background:#F25D62; } /* ---- Coach Info ---- */ #page-myhub .info-list{ display:flex; flex-direction:column; gap:0; margin:0; } #page-myhub .info-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--line); align-items:baseline; } #page-myhub .info-row:first-child{ border-top:0; } #page-myhub .info-row dt{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); flex:0 0 auto; } #page-myhub .info-row dd{ margin:0; font-size:13.5px; color:var(--ink); font-weight:600; text-align:right; min-width:0; } #page-myhub .mono-psn{ font-family:var(--disp); letter-spacing:.03em; } #page-myhub .info-link{ display:inline-flex; align-items:center; gap:5px; color:var(--accent-bright); font-weight:600; text-decoration:none; } #page-myhub .info-link:hover{ text-decoration:underline; } #page-myhub .info-bio{ font-size:13px; color:var(--ink-2); line-height:1.5; margin:12px 0 0; } #page-myhub .btn.full{ width:100%; justify-content:center; } /* ---- USDATV ---- */ #page-myhub .usdatv-live-head{ display:flex; align-items:center; gap:9px; } #page-myhub .usdatv-live-txt{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:var(--live); } #page-myhub .usdatv-title{ font-size:13px; color:var(--ink-2); font-style:italic; margin-top:6px; } #page-myhub .usdatv-explain{ font-size:12.5px; color:var(--dim); line-height:1.45; margin:0 0 12px; } /* ---- shared form fields ---- */ #page-myhub .field{ display:flex; flex-direction:column; gap:5px; } #page-myhub .field-l{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } #page-myhub .field-hint{ font-size:11.5px; color:var(--mute); } #page-myhub .inp{ width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); font-family:var(--body); font-size:14px; padding:9px 11px; transition:border-color .15s, box-shadow .15s; } #page-myhub textarea.inp{ resize:vertical; font-family:var(--body); } #page-myhub .inp:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 25%,transparent); } #page-myhub select.inp{ appearance:none; cursor:pointer; } /* ---- Career LP ---- */ #page-myhub .clp-total{ font-family:var(--disp); font-weight:900; font-size:44px; line-height:1; color:var(--accent-bright); font-variant-numeric:tabular-nums; } #page-myhub .clp-sub{ font-size:12.5px; color:var(--dim); margin-top:3px; } #page-myhub .clp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; } #page-myhub .clp-plat{ display:flex; flex-direction:column; gap:1px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 10px; } #page-myhub .clp-plat-name{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); } #page-myhub .clp-plat-lp{ font-family:var(--disp); font-weight:800; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; } #page-myhub .clp-plat-sub{ font-size:11px; color:var(--mute); } #page-myhub .clp-note{ font-size:11px; color:var(--mute); margin-top:10px; line-height:1.4; } #page-myhub .season-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; } #page-myhub .szn-pill{ display:inline-flex; align-items:center; gap:5px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 9px; font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.04em; color:var(--dim); } #page-myhub .szn-pill b{ color:var(--win); font-variant-numeric:tabular-nums; } #page-myhub .szn-pill.neg b{ color:var(--loss); } /* ---- Log Score ---- */ #page-myhub .hub-logscore{ margin-bottom:6px; } #page-myhub .ls-summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; user-select:none; } #page-myhub .ls-summary::-webkit-details-marker{ display:none; } #page-myhub .ls-summary-t{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); } #page-myhub .ls-summary-x{ font-family:var(--disp); font-weight:800; font-size:20px; color:var(--me); transition:transform .2s var(--ease-out-quint); } #page-myhub details[open] .ls-summary-x{ transform:rotate(45deg); } #page-myhub .ls-fieldset{ border:1px solid var(--line); border-radius:var(--r); padding:14px; margin:0 0 16px; } #page-myhub .ls-legend{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:0 6px; } #page-myhub .ls-picks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; } #page-myhub .ls-pick input{ position:absolute; opacity:0; pointer-events:none; } #page-myhub .ls-pick-card{ display:flex; flex-direction:column; gap:6px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); cursor:pointer; transition:border-color .15s, background-color .15s; } #page-myhub .ls-pick input:checked + .ls-pick-card{ border-color:var(--me); background:color-mix(in oklab,var(--me) 12%,var(--panel-2)); } #page-myhub .ls-pick-card:hover{ border-color:var(--line-bright); } #page-myhub .ls-pick-wk{ display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.04em; color:var(--ink); } #page-myhub .ls-pick-opp{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); font-weight:600; } #page-myhub .ls-loc{ font-family:var(--disp); font-weight:800; font-size:9.5px; letter-spacing:.08em; padding:2px 6px; border-radius:5px; flex:0 0 auto; } #page-myhub .ls-loc.home{ background:color-mix(in oklab,var(--win) 18%,var(--panel)); color:var(--win); } #page-myhub .ls-loc.away{ background:var(--panel-2); color:var(--dim); border:1px solid var(--line); } #page-myhub #manualFields{ display:none; } #page-myhub #manualFields.show{ display:block; } #page-myhub .ls-homeaway{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; } #page-myhub .ls-ha{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); cursor:pointer; } #page-myhub .ls-ha input{ accent-color:var(--me); } #page-myhub .ls-preview{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,4vw,40px); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin:16px 0; } #page-myhub .ls-prev-side{ display:flex; flex-direction:column; align-items:center; gap:7px; } #page-myhub .ls-prev-name{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); } #page-myhub .ls-prev-vs{ font-family:var(--disp); font-weight:900; font-size:18px; color:var(--mute); } #page-myhub .ls-sim{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); cursor:pointer; margin-top:14px; } #page-myhub .ls-sim input{ accent-color:var(--me); } #page-myhub .ls-foot{ font-size:11.5px; color:var(--mute); line-height:1.45; margin:12px 0 0; } /* ---- Class Composition ---- */ #page-myhub .star-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; } #page-myhub .star-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 6px; } #page-myhub .star-glyphs{ font-size:13px; letter-spacing:.02em; line-height:1; } #page-myhub .star-count{ font-family:var(--disp); font-weight:900; font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums; } #page-myhub .star-lbl{ font-family:var(--disp); font-weight:700; font-size:9.5px; letter-spacing:.06em; color:var(--dim); } #page-myhub .star-rank-5 .star-glyphs{ color:var(--gold); } #page-myhub .star-rank-4 .star-glyphs{ color:#7FC8FF; } #page-myhub .star-rank-3 .star-glyphs{ color:var(--win); } #page-myhub .star-rank-2 .star-glyphs{ color:var(--dim); } #page-myhub .star-rank-1 .star-glyphs{ color:var(--mute); } #page-myhub .comp-h{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:4px 0 12px; } #page-myhub .headliner{ position:relative; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 14px 13px 16px; overflow:hidden; } #page-myhub .headliner::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--hc); } #page-myhub .hl-pos{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.06em; color:var(--dim); display:flex; align-items:center; gap:7px; } #page-myhub .portal-tag{ font-size:8.5px; background:color-mix(in oklab,var(--accent) 24%,var(--panel)); color:var(--accent-bright); padding:1px 5px; border-radius:4px; letter-spacing:.06em; } #page-myhub .hl-name{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.01em; color:var(--ink); margin-top:3px; } #page-myhub .hl-meta{ margin-top:5px; } #page-myhub .hl-nil{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--gold); margin-top:7px; font-variant-numeric:tabular-nums; } #page-myhub .commit-row{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid var(--line); } #page-myhub .commit-row:first-child{ border-top:0; } #page-myhub .cr-pos{ font-family:var(--disp); font-weight:800; font-size:12px; color:var(--dim); width:42px; flex:0 0 auto; letter-spacing:.04em; } #page-myhub .cr-name{ font-weight:600; font-size:14px; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-myhub .portal-mark{ color:var(--accent-bright); font-weight:800; } #page-myhub .cr-nil{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--gold); flex:0 0 auto; font-variant-numeric:tabular-nums; } /* tier + status + pipeline pills (shared) */ #page-myhub .tier-pill{ font-family:var(--disp); font-weight:700; font-size:10px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:6px; flex:0 0 auto; white-space:nowrap; } #page-myhub .tier-pill.tr-5{ background:color-mix(in oklab,var(--gold) 20%,var(--panel)); color:var(--gold); } #page-myhub .tier-pill.tr-4{ background:color-mix(in oklab,#7FC8FF 18%,var(--panel)); color:#9FD4FF; } #page-myhub .tier-pill.tr-3{ background:color-mix(in oklab,var(--win) 16%,var(--panel)); color:var(--win); } #page-myhub .tier-pill.tr-2{ background:var(--panel-2); color:var(--dim); } #page-myhub .tier-pill.tr-1{ background:var(--panel-2); color:var(--mute); } #page-myhub .pill.st-signed{ background:color-mix(in oklab,var(--win) 18%,var(--panel)); color:var(--win); border-color:transparent; } #page-myhub .pill.st-committed{ background:color-mix(in oklab,var(--accent) 18%,var(--panel)); color:var(--accent-bright); border-color:transparent; } #page-myhub .pill.st-target{ background:var(--panel-2); color:var(--dim); border-color:var(--line); } #page-myhub .pipe-pill{ font-family:var(--disp); font-weight:700; font-size:10px; letter-spacing:.05em; padding:2px 7px; border-radius:5px; background:var(--panel-2); color:var(--dim); border:1px solid var(--line); } #page-myhub .pipe-pill.out{ background:color-mix(in oklab,var(--live) 16%,var(--panel)); color:var(--live); border-color:transparent; } /* ---- Current Recruiting Class ---- */ #page-myhub .rc-top{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; } #page-myhub .rc-cap{ display:flex; flex-direction:column; gap:2px; } #page-myhub .rc-cap-k{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } #page-myhub .rc-cap-v{ font-family:var(--disp); font-weight:900; font-size:52px; line-height:1; color:var(--accent-bright); font-variant-numeric:tabular-nums; } #page-myhub .rc-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; } #page-myhub .rc-tier-stars{ color:var(--gold); font-size:13px; } #page-myhub .rc-bar-block{ margin-top:16px; } #page-myhub .rc-bar-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; } #page-myhub .rc-bar-rem{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); } #page-myhub .rc-bar-rem b{ color:var(--ink); font-size:14px; } #page-myhub .rc-bar-pct{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.06em; color:var(--dim); } #page-myhub .rc-carry{ font-size:12px; color:var(--ink-2); margin-top:9px; } #page-myhub .rc-carry.pending{ color:var(--live); } /* ---- Schedule ---- */ #page-myhub .sched-grouplbl{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:11px 8px 5px; } #page-myhub .sched-row{ display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:var(--r-sm); transition:background-color .15s; } #page-myhub .sched-row:hover{ background:var(--hover-row); } #page-myhub .sched-wk{ font-family:var(--disp); font-weight:800; font-size:13px; color:var(--dim); width:30px; flex:0 0 auto; letter-spacing:.03em; } #page-myhub .sched-vs{ color:var(--mute); font-weight:700; font-size:12px; } #page-myhub .sched-opp{ font-weight:600; font-size:13.5px; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-myhub .sched-state{ font-size:11.5px; color:var(--mute); font-weight:500; margin-left:auto; flex:0 0 auto; } #page-myhub .sched-dash{ color:var(--mute); } #page-myhub .sched-score{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--ink); margin-left:auto; flex:0 0 auto; font-variant-numeric:tabular-nums; } #page-myhub .sched-edit{ background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:6px; width:26px; height:26px; cursor:pointer; flex:0 0 auto; transition:border-color .15s, color .15s; font-size:13px; } #page-myhub .sched-edit:hover{ border-color:var(--accent); color:var(--accent-bright); } #page-myhub .sched-lock{ color:var(--mute); flex:0 0 auto; cursor:help; font-size:13px; } #page-myhub .pill.win{ background:color-mix(in oklab,var(--win) 22%,var(--panel)); color:var(--win); border-color:transparent; } #page-myhub .pill.loss{ background:color-mix(in oklab,var(--loss) 22%,var(--panel)); color:var(--loss); border-color:transparent; } #page-myhub .pill.fine{ background:color-mix(in oklab,var(--loss) 14%,var(--panel)); color:var(--loss); border-color:transparent; cursor:help; } /* ---- Fines ---- */ #page-myhub .fines-impact{ font-family:var(--disp); font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; } #page-myhub .fines-impact.danger{ color:var(--loss); } #page-myhub .fines-sub{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; } #page-myhub .fine-item{ display:flex; align-items:flex-start; gap:10px; padding:11px 4px; border-top:1px solid var(--line); } #page-myhub .fine-item:first-of-type{ border-top:0; } #page-myhub .fine-body{ flex:1; min-width:0; } #page-myhub .fine-title{ font-weight:600; font-size:13.5px; color:var(--ink); line-height:1.35; } #page-myhub .fine-meta{ font-size:11.5px; color:var(--dim); margin-top:3px; } #page-myhub .fine-amt{ font-family:var(--disp); font-weight:800; font-size:15px; flex:0 0 auto; font-variant-numeric:tabular-nums; } #page-myhub .fine-amt.danger{ color:var(--loss); } #page-myhub .fine-amt.win{ color:var(--win); } #page-myhub .pill.fine-pill-penalty{ background:color-mix(in oklab,var(--loss) 16%,var(--panel)); color:var(--loss); border-color:transparent; flex:0 0 auto; } #page-myhub .pill.fine-pill-bonus{ background:color-mix(in oklab,var(--win) 16%,var(--panel)); color:var(--win); border-color:transparent; flex:0 0 auto; } #page-myhub .fine-del button{ background:transparent; border:1px solid var(--line); color:var(--mute); border-radius:6px; width:22px; height:22px; cursor:pointer; flex:0 0 auto; } #page-myhub .fine-del button:hover{ border-color:var(--loss); color:var(--loss); } #page-myhub .fine-item.ro{ opacity:.92; } #page-myhub .fines-past{ margin-top:12px; border-top:1px solid var(--line); padding-top:10px; } #page-myhub .fines-past summary{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); cursor:pointer; } #page-myhub .fines-past-head{ display:flex; justify-content:space-between; font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin:12px 0 4px; } #page-myhub .fines-past-head .num{ color:var(--loss); } /* ---- Retained / Notes / Complaints ---- */ #page-myhub .card-sub{ font-size:12px; color:var(--dim); margin-bottom:12px; line-height:1.4; } #page-myhub .retain-note{ font-size:12px; color:var(--ink-2); font-weight:600; margin-top:9px; } #page-myhub .retain-carry{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin:14px 0 8px; } #page-myhub .note-item{ padding:11px 0; border-top:1px solid var(--line); } #page-myhub .note-item:first-child{ border-top:0; padding-top:0; } #page-myhub .note-name{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.02em; color:var(--ink); } #page-myhub .note-meta{ font-size:11px; color:var(--dim); font-weight:600; margin-top:2px; } #page-myhub .note-txt{ font-size:13px; color:var(--ink-2); line-height:1.45; margin-top:5px; } #page-myhub .cmp-item{ padding:11px 0; border-top:1px solid var(--line); } #page-myhub .cmp-item:first-of-type{ border-top:0; padding-top:0; } #page-myhub .cmp-item.pending{ box-shadow:inset 3px 0 0 var(--live); padding-left:11px; border-radius:2px; } #page-myhub .cmp-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; } #page-myhub .cmp-id{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.04em; color:var(--dim); } #page-myhub .cmp-title{ font-weight:600; font-size:13.5px; color:var(--ink); margin-top:5px; } #page-myhub .cmp-target{ font-size:12px; color:var(--dim); margin-top:2px; } #page-myhub .cmp-fee{ font-size:11.5px; color:var(--mute); line-height:1.4; margin-top:12px; border-top:1px solid var(--line); padding-top:10px; } /* ---- Past Classes ---- */ #page-myhub .pc-row{ display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:var(--r-sm); cursor:pointer; transition:background-color .15s; } #page-myhub .pc-row + .pc-row{ border-top:1px solid var(--line); } #page-myhub .pc-row:hover{ background:var(--hover-row); } #page-myhub .pc-szn{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.03em; color:var(--ink); width:120px; flex:0 0 auto; } #page-myhub .pc-team{ font-weight:600; font-size:13.5px; color:var(--ink-2); flex:1; min-width:0; } #page-myhub .pc-stat{ font-size:12px; color:var(--dim); font-weight:500; flex:0 0 auto; } #page-myhub .pc-pager{ display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 6px 4px; } #page-myhub .pc-info{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--dim); } #page-myhub .home-footer-mh{ text-align:center; font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:26px 0 8px; } /* ============ current-platform headline — twin glowing Rank + LP ============ */ #page-myhub .hub-stat-hero{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:14px 0 4px; padding:clamp(16px,2.4vw,26px) clamp(18px,2.6vw,30px); border:1px solid var(--line-bright); border-radius:var(--r-lg); text-decoration:none; background: radial-gradient(120% 160% at 85% 0%, color-mix(in oklab,var(--accent) 16%,transparent), transparent 60%), linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -26px color-mix(in oklab,var(--accent) 80%,transparent); transition:transform .16s var(--ease-out-quint), border-color .2s, box-shadow .2s; } #page-myhub .hub-stat-hero:hover{ transform:translateY(-2px); border-color:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 26px 54px -24px color-mix(in oklab,var(--accent) 90%,transparent); } #page-myhub .hsh-stats{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); flex-wrap:wrap; } #page-myhub .hsh-stat{ display:flex; flex-direction:column; gap:2px; } #page-myhub .hsh-num{ font-family:var(--disp); font-weight:900; font-size:clamp(40px,7vw,66px); line-height:.92; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; text-shadow:0 0 26px color-mix(in oklab,var(--accent) 55%,transparent); } #page-myhub .hsh-rank .hsh-num{ color:var(--gold); text-shadow:0 0 26px color-mix(in oklab,var(--gold) 50%,transparent); } #page-myhub .hsh-lp .hsh-num{ color:var(--accent-bright); text-shadow:0 0 28px color-mix(in oklab,var(--accent) 60%,transparent); } #page-myhub .hsh-hash{ font-size:.6em; vertical-align:.12em; opacity:.85; margin-right:.02em; } #page-myhub .hsh-lbl{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } #page-myhub .hsh-div{ width:1px; align-self:stretch; min-height:46px; background:linear-gradient(180deg,transparent,var(--line-bright),transparent); } #page-myhub .hsh-cta{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-bright); display:inline-flex; align-items:center; gap:7px; } #page-myhub .hsh-arrow{ transition:transform .2s var(--ease-out-expo); } #page-myhub .hub-stat-hero:hover .hsh-arrow{ transform:translateX(4px); } /* ============ attention strip — warning + Fines/Complaints counter-nodes ============ */ #page-myhub .attn-strip{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:9px; margin:10px 0 2px; } #page-myhub .attn-node{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--line-bright); border-radius:999px; background:var(--panel-2); font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.03em; color:var(--ink-2); cursor:pointer; list-style:none; user-select:none; white-space:nowrap; text-decoration:none; transition:border-color .16s, color .16s, background-color .16s, transform .12s var(--ease-out-quint); } #page-myhub .attn-node::-webkit-details-marker{ display:none; } #page-myhub .attn-node:hover{ border-color:var(--accent); color:var(--ink); } #page-myhub .attn-node:active{ transform:scale(.97); } #page-myhub .attn-ic{ font-size:14px; line-height:1; } #page-myhub .attn-x{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--dim); margin-left:2px; transition:transform .2s var(--ease-out-quint); } #page-myhub .cnode[open] > .attn-node .attn-x{ transform:rotate(45deg); } #page-myhub .attn-impact{ font-variant-numeric:tabular-nums; font-size:12px; } #page-myhub .attn-impact.danger{ color:var(--loss); } #page-myhub .attn-impact.win{ color:var(--win); } /* needs-a-score warning — lights up amber */ #page-myhub .attn-warn{ color:var(--live); border-color:color-mix(in oklab,var(--live) 50%,var(--line)); background:color-mix(in oklab,var(--live) 14%,var(--panel)); box-shadow:0 0 18px -6px color-mix(in oklab,var(--live) 70%,transparent); } #page-myhub .attn-warn:hover{ border-color:var(--live); color:var(--live); } /* zero-state node — quiet/muted, no glow; non-zero lights up toward accent */ #page-myhub .cnode.is-quiet > .attn-node{ color:var(--mute); border-color:var(--line); background:transparent; } #page-myhub .cnode:not(.is-quiet) > .attn-node{ color:var(--ink); border-color:color-mix(in oklab,var(--accent) 40%,var(--line)); } /* drawer: the open node spans the full row; its body drops below full-width */ #page-myhub .cnode{ flex:0 0 auto; } #page-myhub .cnode[open]{ flex:1 1 100%; } #page-myhub .cnode-body{ margin-top:9px; } #page-myhub .cnode-body.panel{ animation:cnodeIn .22s var(--ease-out-quint) both; } @keyframes cnodeIn{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } } /* ============ schedule (under Log Score) — warning + full-schedule drawer ============ */ #page-myhub .sched-warn{ display:flex; align-items:center; gap:10px; margin:6px 6px 10px; padding:11px 13px; border-radius:var(--r-sm); text-decoration:none; border:1px solid color-mix(in oklab,var(--live) 50%,var(--line)); background:color-mix(in oklab,var(--live) 13%,var(--panel)); box-shadow:0 0 20px -8px color-mix(in oklab,var(--live) 70%,transparent); transition:border-color .16s, transform .12s var(--ease-out-quint); } #page-myhub .sched-warn:hover{ border-color:var(--live); transform:translateY(-1px); } #page-myhub .sched-warn-ic{ font-size:17px; line-height:1; } #page-myhub .sched-warn-tx{ flex:1; min-width:0; font-size:13.5px; color:var(--ink-2); } #page-myhub .sched-warn-tx b{ color:var(--live); font-family:var(--disp); font-weight:800; } #page-myhub .sched-warn-cta{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--live); flex:0 0 auto; } #page-myhub .sched-full{ margin-top:8px; border-top:1px solid var(--line); } #page-myhub .sched-full-sum{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; padding:11px 8px 6px; font-family:var(--disp); font-weight:800; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } #page-myhub .sched-full-sum::-webkit-details-marker{ display:none; } #page-myhub .sched-full-sum:hover{ color:var(--ink-2); } #page-myhub .sched-full-x{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--dim); transition:transform .2s var(--ease-out-quint); } #page-myhub .sched-full[open] .sched-full-x{ transform:rotate(45deg); } @media (prefers-reduced-motion: reduce){ #page-myhub .hub-stat-hero, #page-myhub .hsh-arrow, #page-myhub .attn-x, #page-myhub .sched-full-x, #page-myhub .sched-warn{ transition:none; } #page-myhub .hub-stat-hero:hover, #page-myhub .sched-warn:hover{ transform:none; } #page-myhub .cnode-body.panel{ animation:none; } } /* ---- responsive ---- */ @media (max-width:1100px){ #page-myhub .hub-top{ grid-template-columns:1fr 1fr; } #page-myhub .rc-stats{ grid-template-columns:repeat(3,1fr); } } @media (max-width:920px){ #page-myhub .rc-top{ grid-template-columns:1fr; gap:12px; } } @media (max-width:760px){ #page-myhub .hub-top{ grid-template-columns:1fr; } #page-myhub .hub-logo{ --logo-sz:62px; } #page-myhub .clp-grid{ grid-template-columns:1fr; } #page-myhub .star-strip{ grid-template-columns:repeat(2,1fr); } #page-myhub .rc-stats{ grid-template-columns:repeat(2,1fr); } #page-myhub .hub-act-primary{ flex:1 0 100%; } #page-myhub .pc-szn{ width:auto; } #page-myhub .pc-stat{ display:none; } } @media (max-width:420px){ #page-myhub .rc-cap-v{ font-size:42px; } #page-myhub .rc-stats{ grid-template-columns:1fr; } #page-myhub .star-strip{ grid-template-columns:1fr; } } /* ======================== PAGE: usdatv ======================== */ /* pulsing red header dot */ #page-usdatv .tv-dot{ display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--loss); box-shadow:0 0 10px var(--loss); margin-right:9px; vertical-align:middle; animation:pulse 1.6s ease-in-out infinite; } #page-usdatv .tv-lede{ color:var(--ink-2); font-size:14.5px; margin:2px 0 8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; } #page-usdatv .tv-count{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--loss); background:color-mix(in oklab,var(--loss) 12%,var(--panel-2)); border:1px solid color-mix(in oklab,var(--loss) 40%,var(--line)); padding:4px 10px; border-radius:999px; font-variant-numeric:tabular-nums; } /* HERO */ #page-usdatv .tv-hero{ border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; background:var(--panel); box-shadow:var(--shadow-card); margin-top:4px; } #page-usdatv .tv-player{ position:relative; display:block; aspect-ratio:16/9; background:#000; overflow:hidden; text-decoration:none; } #page-usdatv .tv-thumb-img{ width:100%; height:100%; object-fit:cover; display:block; } #page-usdatv .tv-thumb-fallback{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:clamp(34px,7vw,60px); color:var(--dim); background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab,var(--me) 18%,#0b0f16) 0%, #0b0f16 70%); } #page-usdatv .tv-live-badge{ position:absolute; top:13px; left:13px; z-index:2; font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--loss); padding:5px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:6px; box-shadow:0 4px 14px -4px var(--loss); } #page-usdatv .tv-live-badge .dot{ width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.6s ease-in-out infinite; } #page-usdatv .tv-live-badge.sm{ top:9px; left:9px; font-size:10px; padding:4px 8px; } #page-usdatv .tv-viewers{ position:absolute; top:13px; right:13px; z-index:2; font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); background:var(--scrim); border:1px solid var(--line); padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; backdrop-filter:blur(6px); } #page-usdatv .tv-play{ position:absolute; inset:0; z-index:1; margin:auto; width:clamp(56px,9vw,76px); height:clamp(56px,9vw,76px); border-radius:50%; border:1px solid color-mix(in oklab,var(--me) 60%,var(--line)); background:color-mix(in oklab,var(--me) 80%,#000); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 40px -10px var(--me); transition:transform .16s var(--ease-out-quint),filter .16s; } #page-usdatv .tv-player:hover .tv-play{ transform:scale(1.07); filter:brightness(1.12); } #page-usdatv .tv-play-tri{ font-size:clamp(20px,3vw,26px); margin-left:4px; } #page-usdatv .tv-hero-meta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:clamp(14px,2vw,20px); border-top:1px solid var(--line); } #page-usdatv .tv-hero-info{ flex:1; min-width:240px; } #page-usdatv .tv-hero-host{ display:flex; align-items:center; gap:9px; margin-bottom:10px; } #page-usdatv .tv-host-n{ font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.03em; color:var(--ink); } #page-usdatv .tv-host-s{ font-size:12px; color:var(--dim); font-weight:500; } #page-usdatv .tv-hero-title{ font-family:var(--disp); font-weight:900; font-size:clamp(24px,3.4vw,34px); line-height:1; letter-spacing:.005em; text-transform:uppercase; margin:0; } #page-usdatv .tv-hero-sub{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); margin-top:7px; } #page-usdatv .tv-hero-desc{ font-size:13.5px; color:var(--ink-2); margin-top:8px; max-width:48ch; } #page-usdatv .tv-hero-cta{ display:flex; flex-direction:column; gap:7px; align-items:stretch; min-width:170px; } #page-usdatv .tv-cta-sub{ font-size:11.5px; color:var(--dim); font-weight:600; text-align:center; font-variant-numeric:tabular-nums; } /* LIVE / SCHEDULED CARDS */ #page-usdatv .tv-card{ display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .15s var(--ease-out-quint),border-color .15s,box-shadow .15s; } #page-usdatv a.tv-card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-lift); } #page-usdatv .tv-card.sched{ border-style:dashed; } #page-usdatv .tv-thumb{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; display:block; } #page-usdatv .tv-thumb .tv-thumb-img{ width:100%; height:100%; object-fit:cover; } #page-usdatv .tv-thumb .tv-thumb-fallback{ background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab,var(--accent) 12%,#0b0f16), #0b0f16 72%); } #page-usdatv .tv-when{ position:absolute; top:9px; right:9px; z-index:2; font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); background:var(--scrim); border:1px solid var(--line); padding:4px 8px; border-radius:999px; backdrop-filter:blur(6px); } #page-usdatv .tv-card-b{ padding:12px 14px; } #page-usdatv .tv-card-host{ display:flex; align-items:center; gap:8px; } #page-usdatv .tv-psn{ font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.02em; color:var(--ink); } #page-usdatv .tv-card-matchup{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin-top:8px; } #page-usdatv .tv-card-title{ font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.35; } /* logo sizing : 22px on USDA-TV per spec (logo-sm default 22) */ #page-usdatv .logo-wrap.logo-sm{ --logo-sz:22px; } /* COACHES STRIP */ #page-usdatv .coach-rail{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } #page-usdatv .coach{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r); background:var(--panel-2); border:1px solid var(--line); text-decoration:none; transition:border-color .15s,background-color .15s; } #page-usdatv a.coach:hover{ border-color:var(--line-bright); background:var(--hover-row); } #page-usdatv .coach .cn{ font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #page-usdatv .coach .ch-resolve{ margin-left:auto; flex:0 0 auto; font-size:11px; } #page-usdatv .coach .ch-resolve.ok{ color:var(--win); } #page-usdatv .coach .ch-resolve.no{ color:var(--mute); } #page-usdatv .coach .cs{ flex:0 0 auto; font-family:var(--disp); font-weight:700; font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:3px 7px; border-radius:999px; border:1px solid var(--line); } #page-usdatv .coach .cs.off{ color:var(--mute); } #page-usdatv .tv-resolve-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); } /* HOW IT WORKS */ #page-usdatv .tv-how{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:clamp(16px,2.2vw,22px); display:flex; flex-direction:column; } #page-usdatv .how-step{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; } #page-usdatv .how-step + .how-step{ border-top:1px solid var(--line); } #page-usdatv .how-ic{ flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; } #page-usdatv .how-ic.me{ background:color-mix(in oklab,var(--me) 16%,var(--panel-2)); border:1px solid color-mix(in oklab,var(--me) 40%,var(--line)); } #page-usdatv .how-ic.accent{ background:color-mix(in oklab,var(--accent) 14%,var(--panel-2)); border:1px solid color-mix(in oklab,var(--accent) 40%,var(--line)); color:var(--accent-bright); } #page-usdatv .how-h{ font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); } #page-usdatv .how-p{ font-size:12.5px; color:var(--ink-2); margin:4px 0 0; line-height:1.45; } #page-usdatv .how-foot{ font-size:12px; color:var(--dim); margin:0; line-height:1.45; } /* EMPTY STATE */ #page-usdatv .tv-empty{ border:1px dashed var(--line-bright); border-radius:var(--r-lg); background:var(--panel); padding:clamp(28px,5vw,48px); text-align:center; margin-top:8px; } #page-usdatv .tv-empty-ic{ font-size:42px; line-height:1; } #page-usdatv .tv-empty-h{ font-family:var(--disp); font-weight:900; font-size:22px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin-top:12px; } #page-usdatv .tv-empty-p{ font-size:14px; color:var(--dim); max-width:44ch; margin:8px auto 0; } @media (prefers-reduced-motion:reduce){ #page-usdatv .tv-dot,#page-usdatv .tv-live-badge .dot{ animation:none; } } @media (max-width:920px){ #page-usdatv .grid[style*="1.55fr"]{ grid-template-columns:1fr !important; } } @media (max-width:760px){ #page-usdatv .tv-hero-meta{ flex-direction:column; align-items:stretch; } #page-usdatv .coach-rail{ grid-template-columns:1fr; } } /* ======================== PAGE: scoreboard ======================== */ /* header */ #page-scoreboard .sb-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:14px; } #page-scoreboard .sb-head-l{ min-width:0; } #page-scoreboard .sb-eyebrow{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); } #page-scoreboard .sb-title-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:5px; } #page-scoreboard .sb-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5vw,54px); line-height:.95; letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); margin:0; } #page-scoreboard .sb-wkstatus{ position:relative; top:2px; } #page-scoreboard .sb-wkstatus.played{ background:color-mix(in oklab,var(--mute) 20%,transparent); color:var(--dim); border-color:var(--line); } #page-scoreboard .sb-wkstatus.upcoming{ background:color-mix(in oklab,var(--accent) 16%,transparent); color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 40%,var(--line)); } #page-scoreboard .sb-wkstatus.mixed{ background:color-mix(in oklab,var(--live) 18%,transparent); color:var(--live); border-color:color-mix(in oklab,var(--live) 45%,var(--line)); } #page-scoreboard .sb-lede{ color:var(--ink-2); font-size:14.5px; margin:9px 0 0; max-width:60ch; } /* week picker */ #page-scoreboard .sb-picker{ display:flex; align-items:center; gap:10px; flex:0 0 auto; } #page-scoreboard .sb-picker-k{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); } #page-scoreboard .sb-select-wrap{ position:relative; } #page-scoreboard .sb-select{ appearance:none; -webkit-appearance:none; font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); background:var(--panel-2); border:1px solid var(--line-bright); border-radius:var(--r-sm); padding:9px 34px 9px 13px; cursor:pointer; transition:border-color .15s, box-shadow .15s; } #page-scoreboard .sb-select:hover{ border-color:var(--accent); } #page-scoreboard .sb-select:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 35%,transparent); } #page-scoreboard .sb-select-caret{ position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--dim); font-size:12px; } /* card wiring */ #page-scoreboard .sb-grid{ align-items:start; } #page-scoreboard .sb-card{ scroll-margin-top:80px; display:flex; flex-direction:column; } #page-scoreboard .sb-card:target{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 28px color-mix(in oklab,var(--accent) 40%,transparent); } #page-scoreboard .sb-upcoming{ opacity:.92; } #page-scoreboard .sb-past-unplayed{ border-color:var(--loss); box-shadow:inset 4px 0 0 var(--loss); } #page-scoreboard .sb-bug-top{ align-items:center; gap:8px; } #page-scoreboard .sb-top-pills{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-left:auto; } #page-scoreboard .pill.sb-not-logged{ background:color-mix(in oklab,var(--loss) 18%,transparent); color:var(--loss); border-color:color-mix(in oklab,var(--loss) 50%,var(--line)); } /* rivalry banner */ #page-scoreboard .sb-rivalry{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; cursor:pointer; margin:10px 0 2px; padding:8px 11px; border-radius:var(--r-sm); background:color-mix(in oklab,var(--live) 10%,var(--panel-2)); border:1px solid color-mix(in oklab,var(--live) 30%,var(--line)); transition:border-color .15s, background-color .15s; } #page-scoreboard .sb-rivalry:hover{ border-color:color-mix(in oklab,var(--live) 55%,var(--line)); background:color-mix(in oklab,var(--live) 16%,var(--panel-2)); } #page-scoreboard .sb-riv-x{ color:var(--live); font-size:15px; flex:0 0 auto; } #page-scoreboard .sb-riv-txt{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); } #page-scoreboard .sb-riv-txt b{ color:var(--ink); font-weight:800; } #page-scoreboard .sb-riv-rec{ margin-left:auto; font-size:12px; color:var(--dim); font-weight:600; font-variant-numeric:tabular-nums; } /* auto-flags */ #page-scoreboard .sb-flags{ display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 2px; } #page-scoreboard .sb-flag{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid var(--line); } #page-scoreboard .sb-flag.blowout{ color:var(--loss); background:color-mix(in oklab,var(--loss) 14%,transparent); border-color:color-mix(in oklab,var(--loss) 40%,var(--line)); } #page-scoreboard .sb-flag.nailbiter{ color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 14%,transparent); border-color:color-mix(in oklab,var(--accent) 40%,var(--line)); } #page-scoreboard .sb-flag.shutout{ color:var(--ink); background:color-mix(in oklab,var(--mute) 22%,transparent); border-color:var(--line-bright); } /* team rows */ #page-scoreboard .sb-row{ text-decoration:none; } #page-scoreboard a.sb-row{ cursor:pointer; transition:background-color .14s, transform .14s; } #page-scoreboard a.sb-row:hover{ transform:translateX(2px); } #page-scoreboard .sb-team{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; } #page-scoreboard .sb-team .team-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-scoreboard .sb-ha{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } #page-scoreboard .score.num{ font-variant-numeric:tabular-nums; } #page-scoreboard .score.num.dim{ color:var(--mute); } /* recap */ #page-scoreboard .sb-recap{ margin:11px 0 2px; padding:9px 12px; font-size:13px; font-style:italic; line-height:1.45; color:var(--ink-2); border-left:3px solid var(--accent); background:color-mix(in oklab,var(--accent) 7%,var(--panel-2)); border-radius:0 var(--r-sm) var(--r-sm) 0; } #page-scoreboard .sb-recap .pill{ font-style:normal; vertical-align:middle; margin-left:4px; } /* reactions */ #page-scoreboard .sb-react{ margin-top:auto; padding-top:11px; } #page-scoreboard .sb-react-counts{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; } #page-scoreboard .sb-rc{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px 9px; font-variant-numeric:tabular-nums; } #page-scoreboard .sb-rc .num{ color:var(--ink); } #page-scoreboard .sb-rc.mine{ border-color:var(--me); color:var(--ink); background:color-mix(in oklab,var(--me) 18%,var(--panel-2)); } #page-scoreboard .sb-react-pick{ display:flex; flex-wrap:wrap; gap:6px; } #page-scoreboard .sb-rb{ font-size:15px; line-height:1; padding:6px 8px; border-radius:var(--r-sm); background:transparent; border:1px solid var(--line); cursor:pointer; transition:border-color .14s, transform .14s, background-color .14s; } #page-scoreboard .sb-rb:hover{ transform:translateY(-2px); border-color:var(--line-bright); background:var(--panel-2); } #page-scoreboard .sb-rb:active{ transform:translateY(0); } #page-scoreboard .sb-rb:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 30%,transparent); } #page-scoreboard .sb-rb.mine{ border-color:var(--me); background:color-mix(in oklab,var(--me) 16%,transparent); } /* footer */ #page-scoreboard .sb-foot{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); padding-top:9px; margin-top:9px; border-top:1px solid var(--line); } /* empty state */ #page-scoreboard .sb-empty{ text-align:center; padding:46px 22px; border:1px dashed var(--line-bright); border-radius:var(--r-lg); background:var(--panel); } #page-scoreboard .sb-empty-ic{ font-size:36px; } #page-scoreboard .sb-empty-h{ font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin-top:10px; } #page-scoreboard .sb-empty-d{ color:var(--ink-2); font-size:14px; margin:8px auto 0; max-width:44ch; } @media (max-width:760px){ #page-scoreboard .sb-head{ align-items:stretch; } #page-scoreboard .sb-picker{ width:100%; justify-content:space-between; } #page-scoreboard .sb-select{ flex:1; } #page-scoreboard .sb-riv-rec{ margin-left:0; width:100%; } } /* ======================== PAGE: bracket ======================== */ #page-bracket.bk-head, #page-bracket .bk-head{ margin-bottom:14px; } #page-bracket .bk-eyebrow{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); } #page-bracket .bk-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.4vw,56px); line-height:.94; letter-spacing:-.01em; text-transform:uppercase; margin:6px 0 0; color:var(--ink); } #page-bracket .bk-sub{ max-width:60ch; color:var(--ink-2); font-size:14.5px; margin:9px 0 0; } #page-bracket .bk-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; } #page-bracket .bk-lg{ display:inline-flex; align-items:center; gap:7px; font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); } #page-bracket .bk-lg-final{ color:var(--gold); } #page-bracket .bk-sw{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; } #page-bracket .bk-sw-win{ background:var(--win); } #page-bracket .bk-sw-loss{ background:var(--loss); opacity:.55; } #page-bracket .bk-sw-tbd{ background:transparent; border:1px dashed var(--mute); } /* round grids */ #page-bracket .bk-grid{ grid-template-columns:repeat(auto-fill,minmax(264px,1fr)); align-items:start; margin-bottom:6px; } #page-bracket .bk-grid-tight{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } #page-bracket .bk-grid-semi{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); margin-bottom:6px; } #page-bracket .bk-grid-final{ display:grid; grid-template-columns:minmax(0,440px); justify-content:center; margin-bottom:6px; } /* bracket card */ #page-bracket .bk-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden; transition:border-color .16s, transform .16s, box-shadow .16s; min-width:0; } #page-bracket .bk-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); } #page-bracket .bk-card-h{ display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--panel-2); border-bottom:1px solid var(--line); } #page-bracket .bk-rd{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-bracket .bk-conf{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-bright); padding:1px 7px; border:1px solid var(--line-bright); border-radius:999px; flex:0 0 auto; } #page-bracket .bk-card-h .pill{ margin-left:auto; flex:0 0 auto; } /* team row */ #page-bracket .bk-team{ display:flex; align-items:center; gap:10px; padding:11px 12px; text-decoration:none; transition:background-color .15s, transform .15s; } #page-bracket a.bk-team{ cursor:pointer; } #page-bracket a.bk-team:hover{ background:var(--hover-row); transform:translateX(2px); } #page-bracket .bk-team + .bk-team{ border-top:1px solid var(--line); } #page-bracket .bk-seed{ font-family:var(--disp); font-weight:800; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; flex:0 0 auto; } #page-bracket .bk-name{ font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:.02em; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; } #page-bracket .bk-sc{ font-family:var(--disp); font-weight:900; font-size:21px; color:var(--ink-2); font-variant-numeric:tabular-nums; flex:0 0 auto; } #page-bracket .bk-sc-pending{ color:var(--mute); } /* winner / loser / tbd states (applied only when the game is played) */ #page-bracket .bk-win{ background:color-mix(in oklab,var(--accent) 12%,transparent); box-shadow:inset 3px 0 0 var(--accent); } #page-bracket .bk-win .bk-name{ color:var(--ink); font-weight:800; } #page-bracket .bk-win .bk-sc{ color:var(--ink); } #page-bracket a.bk-win.bk-team:hover{ background:color-mix(in oklab,var(--accent) 18%,transparent); } #page-bracket .bk-loss{ opacity:.55; } #page-bracket .bk-team-tbd .bk-name{ font-style:italic; font-weight:600; font-size:14px; text-transform:none; letter-spacing:0; color:var(--mute); font-family:var(--body); } #page-bracket .bk-team-tbd .logo-ph{ opacity:.6; } /* national championship card : bright accent border + glow + crown on winner */ #page-bracket .bk-card-final{ border:2px solid var(--gold); box-shadow:0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent), 0 0 34px color-mix(in oklab,var(--gold) 20%,transparent); background:linear-gradient(180deg, color-mix(in oklab,var(--gold) 8%,var(--panel)), var(--panel) 60%); } #page-bracket .bk-card-final:hover{ border-color:var(--gold); box-shadow:0 0 0 1px color-mix(in oklab,var(--gold) 40%,transparent), 0 0 44px color-mix(in oklab,var(--gold) 30%,transparent); } #page-bracket .bk-card-final .bk-card-h{ background:color-mix(in oklab,var(--gold) 10%,var(--panel-2)); } #page-bracket .bk-card-final .bk-win .bk-name::before{ content:"👑 "; } #page-bracket .bk-card-final .bk-win{ background:color-mix(in oklab,var(--gold) 16%,transparent); box-shadow:inset 3px 0 0 var(--gold); } #page-bracket .bk-card-final .bk-win .bk-sc{ color:var(--gold); } #page-bracket .bk-final-note{ padding:11px 13px; font-size:12.5px; color:var(--dim); font-weight:500; line-height:1.4; border-top:1px solid var(--line); background:var(--panel-2); } #page-bracket .bk-lt-final h2{ color:var(--gold); } /* pre-bracket empty state */ #page-bracket .bk-empty{ text-align:center; border:1px dashed var(--line-bright); border-radius:var(--r-lg); background:var(--panel); padding:34px 22px; margin-top:6px; } #page-bracket .bk-empty-ic{ font-size:38px; line-height:1; display:block; } #page-bracket .bk-empty-h{ font-family:var(--disp); font-weight:800; font-size:22px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin-top:10px; } #page-bracket .bk-empty-b{ max-width:52ch; margin:9px auto 0; color:var(--ink-2); font-size:14px; line-height:1.5; } #page-bracket .bk-empty-b code{ font-family:var(--body); font-size:13px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:1px 6px; color:var(--ink); } #page-bracket .bk-empty-cta{ margin-top:16px; } @media (max-width:760px){ #page-bracket .bk-grid, #page-bracket .bk-grid-tight, #page-bracket .bk-grid-semi{ grid-template-columns:1fr; } #page-bracket .bk-grid-final{ grid-template-columns:1fr; } } /* ======================== PAGE: standings ======================== */ /* banner with flanking rules */ #page-standings .std-banner{ display:flex; align-items:center; gap:clamp(12px,2.4vw,22px); margin:2px 0 2px; } #page-standings .std-rule{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-bright)); } #page-standings .std-rule:last-child{ background:linear-gradient(90deg,var(--line-bright),transparent); } #page-standings .std-head{ font-family:var(--disp); font-weight:900; font-size:clamp(26px,4.6vw,46px); line-height:1; letter-spacing:.01em; text-transform:uppercase; color:var(--ink); margin:0; white-space:nowrap; text-shadow:0 2px 18px color-mix(in oklab,var(--accent) 22%,transparent); } #page-standings .std-lede{ color:var(--ink-2); font-size:14px; max-width:74ch; margin:2px 0 8px; } /* conference filter chips */ #page-standings .std-filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 10px; } #page-standings .std-tab{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; height:32px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); cursor:pointer; transition:border-color .15s, color .15s, background-color .15s, transform .12s; } #page-standings .std-tab:hover{ border-color:var(--line-bright); color:var(--ink); transform:translateY(-1px); } #page-standings .std-tab:active{ transform:translateY(0) scale(.98); } #page-standings .std-tab.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; } #page-standings .std-tab:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; } #page-standings .std-key{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } #page-standings .std-key .key-me{ width:11px; height:11px; border-radius:3px; background:var(--me); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); } /* conference summary grid */ #page-standings .conf-grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:0 0 12px; } #page-standings .conf-card{ display:flex; align-items:center; gap:13px; text-align:left; padding:14px 15px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow-card); cursor:pointer; transition:border-color .15s, transform .12s, background-color .15s; min-width:0; } #page-standings .conf-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); } #page-standings .conf-card:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; } #page-standings .conf-mk{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-family:var(--disp); font-weight:900; font-size:15px; letter-spacing:.02em; color:#fff; background:linear-gradient(160deg, color-mix(in oklab,var(--cc) 92%,#000) 0%, color-mix(in oklab,var(--cc) 70%,#000) 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 20px -10px var(--cc); } #page-standings .conf-card-body{ display:flex; flex-direction:column; gap:2px; min-width:0; } #page-standings .conf-card-name{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-standings .conf-card-count{ font-size:12px; font-weight:600; color:var(--dim); } #page-standings .conf-card-count b{ font-family:var(--disp); font-weight:800; color:var(--ink-2); font-size:13px; } #page-standings .conf-card-lead{ margin-left:auto; text-align:right; font-family:var(--disp); font-weight:800; font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; flex:0 0 auto; } #page-standings .conf-card-lead .muted{ font-family:var(--body); font-weight:600; font-size:12px; } /* standings table */ #page-standings .std-tbl .rkh{ width:46px; text-align:center; } #page-standings .std-tbl td.rk{ text-align:center; font-size:19px; } #page-standings .std-row{ cursor:pointer; } #page-standings .team-cell{ gap:11px; } #page-standings .tc-body{ display:flex; flex-direction:column; gap:1px; min-width:0; } #page-standings .tc-name{ display:flex; align-items:center; gap:7px; min-width:0; } #page-standings .tc-name b{ font-family:var(--disp); font-weight:700; font-size:15.5px; letter-spacing:.02em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-standings .std-row:hover .tc-name b{ color:var(--accent-bright); } #page-standings .is-me .tc-name b{ color:var(--ink); } #page-standings .tc-psn{ font-size:12px; font-weight:600; color:var(--dim); } #page-standings .seed{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.02em; color:var(--gold); flex:0 0 auto; padding:1px 5px; border-radius:5px; border:1px solid color-mix(in oklab,var(--gold) 38%,var(--line)); background:color-mix(in oklab,var(--gold) 12%,var(--panel-2)); } /* W–L record cell */ #page-standings .rec{ font-variant-numeric:tabular-nums; white-space:nowrap; } #page-standings .rec .w{ color:var(--ink); } #page-standings .rec .sep{ color:var(--mute); margin:0 1px; } #page-standings .rec .l{ color:var(--loss); } /* streak chips */ #page-standings .strk{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.03em; padding:3px 9px; border-radius:7px; border:1px solid var(--line); font-variant-numeric:tabular-nums; white-space:nowrap; } #page-standings .strk.win{ color:var(--win); border-color:color-mix(in oklab,var(--win) 38%,var(--line)); background:color-mix(in oklab,var(--win) 11%,var(--panel-2)); } #page-standings .strk.loss{ color:var(--loss); border-color:color-mix(in oklab,var(--loss) 38%,var(--line)); background:color-mix(in oklab,var(--loss) 11%,var(--panel-2)); } /* conference filter hiding */ #page-standings.flt-sec [data-conf]:not([data-conf="sec"]), #page-standings.flt-big-ten [data-conf]:not([data-conf="big-ten"]), #page-standings.flt-big-12 [data-conf]:not([data-conf="big-12"]), #page-standings.flt-acc [data-conf]:not([data-conf="acc"]){ display:none; } /* keep the conf-card grid visible in any filter (it is the index) */ #page-standings.flt-sec .conf-grid, #page-standings.flt-big-ten .conf-grid, #page-standings.flt-big-12 .conf-grid, #page-standings.flt-acc .conf-grid{ display:grid; } @media (max-width:760px){ #page-standings .std-key{ width:100%; margin-left:0; justify-content:flex-start; order:9; } #page-standings .conf-card-lead{ display:none; } #page-standings .tc-name b{ font-size:14.5px; } } /* ======================== PAGE: power ======================== */ /* Centered header */ #page-power .pwr-head{ text-align:center; padding:6px 0 18px; } #page-power .pwr-eyebrow{ font-family:var(--disp); font-weight:800; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright); } #page-power .pwr-eyebrow-szn{ color:var(--dim); margin-left:8px; } #page-power .pwr-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.4vw,56px); line-height:.94; letter-spacing:-.01em; text-transform:uppercase; margin:8px 0 0; color:var(--ink); } #page-power .pwr-lede{ max-width:62ch; margin:11px auto 0; color:var(--ink-2); font-size:14.5px; line-height:1.5; } /* Table tuning */ #page-power .pwr-table thead th{ white-space:nowrap; } #page-power .pwr-table .team-cell{ display:flex; align-items:center; gap:11px; min-width:0; } #page-power .pwr-table .tc-text{ display:flex; flex-direction:column; gap:1px; min-width:0; } #page-power .pwr-table .tc-text b{ font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-power .pwr-table .psn{ font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.03em; color:var(--dim); white-space:nowrap; } #page-power .pwr-table .psn-cpu{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); } /* Rank cell coloring : #1 gold+bold, top-5 primary */ #page-power .pwr-rank{ font-variant-numeric:tabular-nums; } #page-power .pwr-rank.gold{ color:var(--gold); font-weight:900; } #page-power .pwr-rank.top5{ color:var(--accent-bright); font-weight:800; } /* Rating cell : value + grow bar */ #page-power .pwr-rating{ min-width:120px; } #page-power .pwr-rating .rt{ display:block; color:var(--accent-bright); font-weight:800; font-variant-numeric:tabular-nums; } #page-power .pwr-rating .track{ display:block; height:4px; width:100%; margin-top:5px; border-radius:99px; background:var(--panel-2); overflow:hidden; } #page-power .pwr-rating .track .bar{ display:block; height:100%; border-radius:99px; } /* Avg diff coloring */ #page-power .pwr-diff{ font-variant-numeric:tabular-nums; } #page-power .pwr-diff.pos{ color:var(--win); } #page-power .pwr-diff.neg{ color:var(--loss); } /* SOS dimmed */ #page-power .sos{ color:var(--dim); font-variant-numeric:tabular-nums; } /* AP none */ #page-power .pwr-ap-none{ color:var(--mute); font-family:var(--disp); font-weight:700; } /* Click-through rows */ #page-power .pwr-tr-link{ cursor:pointer; } #page-power .pwr-tr-link:hover{ background:var(--hover-row); } /* Sortable headers */ #page-power .sortable{ cursor:pointer; user-select:none; transition:color .14s; } #page-power .sortable:hover{ color:var(--accent-bright); } #page-power .srt{ display:inline-block; width:9px; margin-left:3px; color:var(--mute); font-size:10px; } #page-power th.sorted-asc{ color:var(--accent-bright); } #page-power th.sorted-desc{ color:var(--accent-bright); } #page-power th.sorted-asc .srt::after{ content:"▲"; color:var(--accent-bright); } #page-power th.sorted-desc .srt::after{ content:"▼"; color:var(--accent-bright); } /* Empty state */ #page-power .pwr-empty{ text-align:center; } #page-power .pwr-empty-ic{ font-size:34px; line-height:1; } #page-power .pwr-empty-h{ font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin-top:10px; } #page-power .pwr-empty-b{ max-width:52ch; margin:8px auto 0; color:var(--ink-2); font-size:14px; line-height:1.5; } #page-power .pwr-empty-cta{ margin-top:14px; } /* Footnote */ #page-power .pwr-foot{ margin:14px 0 8px; color:var(--dim); font-size:12.5px; line-height:1.5; max-width:90ch; } /* Responsive : tighten dense columns under 600px */ @media (max-width:600px){ #page-power .pwr-title{ font-size:34px; } #page-power .pwr-table thead th, #page-power .pwr-table tbody td{ padding-left:7px; padding-right:7px; } #page-power .pwr-rating{ min-width:96px; } #page-power .pwr-table .psn, #page-power .pwr-table .psn-cpu{ font-size:10.5px; } } /* ======================== PAGE: lpboard ======================== */ #page-lpboard .lp-lede{ max-width:70ch; color:var(--ink-2); font-size:14.5px; margin:2px 0 14px; } #page-lpboard .lp-szn-badge{ font-size:11px; } /* platform tabs */ #page-lpboard .lp-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; } #page-lpboard .lp-tab{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:10px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2); cursor:pointer; transition:border-color .16s, transform .16s, background-color .16s; } #page-lpboard .lp-tab:hover{ border-color:var(--line-bright); transform:translateY(-1px); } #page-lpboard .lp-tab.active{ border-color:var(--accent); background:color-mix(in oklab,var(--accent) 12%,var(--panel)); box-shadow:inset 0 -2px 0 var(--accent); } #page-lpboard .lp-tab-k{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); } #page-lpboard .lp-tab.active .lp-tab-k{ color:var(--accent-bright); } #page-lpboard .lp-tab-sub{ font-size:11.5px; color:var(--dim); font-weight:500; } /* YOUR card */ #page-lpboard .my-lp-card{ background: linear-gradient(180deg, color-mix(in oklab,var(--me) 10%,var(--panel)) 0%, var(--panel) 64%); border-color:color-mix(in oklab,var(--me) 30%,var(--line)); margin-bottom:16px; } #page-lpboard .mylp-top{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; } #page-lpboard .mylp-id{ display:flex; align-items:center; gap:14px; min-width:0; } #page-lpboard .mylp-label{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--me); } #page-lpboard .mylp-psn{ display:inline-block; font-family:var(--disp); font-weight:900; font-size:24px; letter-spacing:.02em; color:var(--ink); cursor:pointer; line-height:1.05; } #page-lpboard .mylp-psn:hover{ color:var(--accent-bright); } #page-lpboard .mylp-team{ font-size:13px; color:var(--ink-2); font-weight:600; margin-top:2px; } #page-lpboard .mylp-figs{ display:flex; gap:26px; } #page-lpboard .mylp-fig{ display:flex; flex-direction:column; } #page-lpboard .mylp-k{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } #page-lpboard .mylp-v{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5vw,46px); line-height:1; color:var(--accent-bright); font-variant-numeric:tabular-nums; margin-top:2px; } #page-lpboard .mylp-v.rank-v{ color:var(--gold); } #page-lpboard .mylp-sub{ font-size:11.5px; color:var(--dim); font-weight:500; margin-top:4px; } #page-lpboard .mylp-strip-label{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; } #page-lpboard .mylp-strip{ display:flex; gap:8px; flex-wrap:wrap; } #page-lpboard .szn-chip{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:46px; padding:7px 8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); } #page-lpboard .szn-chip.empty{ opacity:.5; } #page-lpboard .szn-k{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); } #page-lpboard .szn-v{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; } /* LP table */ #page-lpboard .lp-table th.c, #page-lpboard .lp-table td.c{ text-align:center; } #page-lpboard .lp-table .lp-total{ color:var(--accent-bright); font-size:16px; } #page-lpboard .lp-table td.hot{ color:var(--accent-bright); font-weight:800; } #page-lpboard .lp-table td.dim{ color:var(--mute); } #page-lpboard .lp-table .psn a{ color:var(--ink-2); font-weight:600; cursor:pointer; } #page-lpboard .lp-table .psn a:hover{ color:var(--accent-bright); } #page-lpboard .lp-table tr.is-me .psn a{ color:var(--ink); } #page-lpboard .rk.gold{ color:var(--gold); } #page-lpboard .you-pill{ background:var(--me); color:#fff; border-color:transparent; font-size:9.5px; padding:2px 6px; vertical-align:middle; } /* mobile cards */ #page-lpboard .lp-cards{ display:none; flex-direction:column; gap:10px; margin-bottom:16px; } #page-lpboard .lp-card{ display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); cursor:pointer; transition:border-color .16s, transform .16s; } #page-lpboard .lp-card:hover{ border-color:var(--line-bright); transform:translateY(-1px); } #page-lpboard .lp-card.is-me{ border-color:color-mix(in oklab,var(--me) 45%,var(--line)); background:color-mix(in oklab,var(--me) 9%,var(--panel)); } #page-lpboard .lp-card.medal{ box-shadow:inset 3px 0 0 var(--gold); } #page-lpboard .lp-card.medal.is-me{ box-shadow:inset 3px 0 0 var(--me); } #page-lpboard .lp-rk{ font-family:var(--disp); font-weight:900; font-size:22px; color:var(--mute); width:24px; flex:0 0 auto; text-align:center; font-variant-numeric:tabular-nums; } #page-lpboard .lp-rk.gold{ color:var(--gold); } #page-lpboard .lp-card-id{ flex:1; min-width:0; } #page-lpboard .lp-card-psn{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.02em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-lpboard .lp-card-sub{ font-size:12px; color:var(--dim); font-weight:500; margin-top:1px; } #page-lpboard .lp-card-total{ font-family:var(--disp); font-weight:900; font-size:24px; color:var(--accent-bright); font-variant-numeric:tabular-nums; flex:0 0 auto; } /* notice */ #page-lpboard .notice{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:18px 20px; margin-bottom:6px; } #page-lpboard .notice-gold{ border-color:color-mix(in oklab,var(--gold) 40%,var(--line)); background:color-mix(in oklab,var(--gold) 7%,var(--panel)); } #page-lpboard .notice-h{ display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; } #page-lpboard .notice-ic{ font-size:18px; } #page-lpboard .notice-b p{ color:var(--ink-2); font-size:14px; line-height:1.55; margin:0 0 12px; } #page-lpboard .notice-b b{ color:var(--ink); } #page-lpboard .notice-list{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-direction:column; gap:8px; } #page-lpboard .notice-list li{ display:flex; align-items:flex-start; gap:10px; color:var(--ink-2); font-size:13.5px; line-height:1.45; } #page-lpboard .nl-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; margin-top:5px; } #page-lpboard .nl-dot.earn{ background:var(--win); } #page-lpboard .nl-dot.zero{ background:var(--mute); } #page-lpboard .nl-dot.bonus{ background:var(--gold); } #page-lpboard .nl-dot.adj{ background:var(--accent); } #page-lpboard .notice-foot{ font-size:12.5px; color:var(--dim) !important; margin-bottom:0 !important; } #page-lpboard .notice-foot a{ color:var(--accent-bright); cursor:pointer; } @media (max-width:760px){ #page-lpboard .desktop-only{ display:none !important; } #page-lpboard .lp-cards{ display:flex; } #page-lpboard .mylp-top{ flex-direction:column; align-items:flex-start; gap:14px; } #page-lpboard .mylp-figs{ gap:22px; } } /* ======================== PAGE: myclass ======================== */ /* 4a header */ #page-myclass .mc-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(16px,2.6vw,24px); background:linear-gradient(135deg, color-mix(in oklab,var(--me) 16%,var(--panel)) 0%, var(--panel) 60%); margin-bottom:6px; } #page-myclass .mc-head-id{ min-width:0; flex:1 1 240px; } #page-myclass .mc-kicker{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); } #page-myclass .mc-team{ font-family:var(--disp); font-weight:900; font-size:clamp(28px,4.4vw,44px); line-height:1; text-transform:uppercase; letter-spacing:-.01em; margin:4px 0 0; color:var(--ink); } #page-myclass .mc-stars{ color:var(--gold); font-size:.62em; letter-spacing:.04em; vertical-align:middle; margin-left:6px; } #page-myclass .mc-psn{ font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.03em; color:var(--dim); margin-top:5px; } #page-myclass .mc-tier{ flex:0 0 auto; min-width:200px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2); } #page-myclass .mc-tier-k{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); } #page-myclass .mc-tier-v{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin-top:4px; } #page-myclass .mc-tier-stars{ color:var(--gold); margin-left:4px; } #page-myclass .mc-tier-note{ display:block; font-size:11.5px; color:var(--mute); font-weight:500; margin-top:5px; } /* 4b bars */ #page-myclass .mc-stat-grid{ grid-template-columns:repeat(4,1fr); gap:12px; } #page-myclass .mc-bars{ margin-top:18px; display:flex; flex-direction:column; gap:13px; } #page-myclass .mc-bar-label{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); margin-bottom:6px; } #page-myclass .mc-track{ position:relative; } #page-myclass .bar.mc-proj{ opacity:.7; background:linear-gradient(90deg,var(--accent),var(--accent-bright)); } #page-myclass .mc-floor{ position:absolute; top:50%; left:80%; transform:translate(-50%,-50%); font-family:var(--disp); font-weight:800; font-size:8.5px; letter-spacing:.06em; color:var(--bg); background:var(--gold); padding:1px 4px; border-radius:3px; pointer-events:none; white-space:nowrap; } #page-myclass .mc-notes{ margin-top:16px; display:flex; flex-direction:column; gap:8px; } #page-myclass .mc-note{ font-size:13px; color:var(--ink-2); font-weight:500; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px; } #page-myclass .mc-note b{ color:var(--ink); font-variant-numeric:tabular-nums; } #page-myclass .mc-note-ic{ color:var(--accent-bright); font-weight:800; margin-right:6px; } /* 4c composition */ #page-myclass .mc-stars-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:18px; } #page-myclass .mc-star-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 6px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); } #page-myclass .mc-star-glyph{ font-size:12px; line-height:1.1; letter-spacing:1px; } #page-myclass .star-rank-5 .mc-star-glyph{ color:var(--gold); } #page-myclass .star-rank-4 .mc-star-glyph{ color:var(--accent-bright); } #page-myclass .star-rank-3 .mc-star-glyph{ color:var(--win); } #page-myclass .star-rank-2 .mc-star-glyph{ color:var(--ink-2); } #page-myclass .star-rank-1 .mc-star-glyph{ color:var(--mute); } #page-myclass .mc-star-n{ font-family:var(--disp); font-weight:900; font-size:24px; color:var(--ink); line-height:1; } #page-myclass .mc-star-lab{ font-family:var(--disp); font-weight:700; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } #page-myclass .mc-headliners-head{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; } #page-myclass .mc-hl-grid{ grid-template-columns:1fr 1fr; gap:10px; } #page-myclass .mc-headliner{ display:flex; align-items:center; gap:11px; position:relative; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:11px 13px 11px 16px; overflow:hidden; } #page-myclass .mc-hl-rail{ position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--lc); } #page-myclass .mc-hl-body{ min-width:0; flex:1; } #page-myclass .mc-hl-pos{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.06em; color:var(--dim); } #page-myclass .mc-hl-portal{ color:var(--accent-bright); margin-left:3px; } #page-myclass .mc-hl-name{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.01em; color:var(--ink); line-height:1.05; margin-top:1px; } #page-myclass .mc-hl-tier{ font-size:12px; color:var(--gold); font-weight:600; margin-top:2px; } #page-myclass .mc-hl-nil{ font-family:var(--disp); font-weight:800; font-size:17px; color:var(--ink); flex:0 0 auto; } #page-myclass .mc-commits-head{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:4px; } #page-myclass .mc-commits{ gap:0; } #page-myclass .mc-commit{ display:flex; align-items:center; gap:10px; padding:9px 4px; } #page-myclass .mc-commit + .mc-commit{ border-top:1px solid var(--line); } #page-myclass .mc-c-pos{ font-family:var(--disp); font-weight:800; font-size:12px; color:var(--dim); width:42px; flex:0 0 auto; letter-spacing:.04em; } #page-myclass .mc-c-name{ font-weight:600; font-size:14px; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-myclass .mc-portal-glyph{ color:var(--accent-bright); font-weight:700; } #page-myclass .mc-c-tier{ flex:0 0 auto; } #page-myclass .mc-c-status{ flex:0 0 auto; } #page-myclass .mc-c-nil{ font-family:var(--disp); font-weight:800; font-size:14.5px; color:var(--ink-2); flex:0 0 auto; width:62px; text-align:right; font-variant-numeric:tabular-nums; } /* tier pills (color by rank) */ #page-myclass .pill.tier-5{ color:var(--gold); border-color:color-mix(in oklab,var(--gold) 45%,transparent); background:color-mix(in oklab,var(--gold) 14%,transparent); } #page-myclass .pill.tier-4{ color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 45%,transparent); background:color-mix(in oklab,var(--accent) 14%,transparent); } #page-myclass .pill.tier-3{ color:var(--win); border-color:color-mix(in oklab,var(--win) 42%,transparent); background:color-mix(in oklab,var(--win) 12%,transparent); } #page-myclass .pill.tier-2{ color:var(--ink-2); border-color:var(--line-bright); background:var(--panel-2); } #page-myclass .pill.tier-1{ color:var(--mute); border-color:var(--line); background:var(--panel-2); } /* status pills */ #page-myclass .pill.st-signed{ color:var(--win); border-color:color-mix(in oklab,var(--win) 45%,transparent); background:color-mix(in oklab,var(--win) 13%,transparent); } #page-myclass .pill.st-committed{ color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 45%,transparent); background:color-mix(in oklab,var(--accent) 13%,transparent); } #page-myclass .pill.st-target{ color:var(--live); border-color:color-mix(in oklab,var(--live) 45%,transparent); background:color-mix(in oklab,var(--live) 13%,transparent); } #page-myclass .pill.mc-pipe-pill{ color:var(--dim); border-color:var(--line); background:var(--panel-2); } #page-myclass .pill.mc-pipe-pill.out{ color:var(--live); border-color:color-mix(in oklab,var(--live) 45%,transparent); background:color-mix(in oklab,var(--live) 12%,transparent); } /* add-recruit disclosure (collapsed by default — opens in place, no dim) */ #page-myclass .mc-add{ margin-bottom:6px; } #page-myclass .mc-add-sum{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; } #page-myclass .mc-add-sum::-webkit-details-marker{ display:none; } #page-myclass .mc-add-sum-t{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:9px; } #page-myclass .mc-add-plus{ color:var(--accent-bright); font-size:19px; line-height:1; } #page-myclass .mc-add-x{ font-family:var(--disp); font-weight:800; font-size:22px; color:var(--accent-bright); line-height:1; transition:transform .2s var(--ease-out-quint); } #page-myclass details.mc-add[open] .mc-add-x{ transform:rotate(45deg); } #page-myclass details.mc-add[open] .mc-add-sum{ border-bottom:1px solid var(--line); } #page-myclass .mc-add-sum:hover{ background:color-mix(in oklab,var(--accent) 7%,transparent); } #page-myclass .mc-add-hint{ font-size:12px; margin-bottom:8px; } /* forms */ #page-myclass .mc-form{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px 12px; align-items:end; } #page-myclass .mc-field{ display:flex; flex-direction:column; gap:5px; min-width:0; } #page-myclass .mc-field-wide{ grid-column:span 2; } #page-myclass .mc-field-submit{ grid-column:1 / -1; flex-direction:row; gap:8px; justify-content:flex-end; padding-top:2px; } #page-myclass .mc-flab{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } #page-myclass .mc-input{ font-family:var(--body); font-size:13.5px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; width:100%; transition:border-color .14s, box-shadow .14s; } #page-myclass .mc-input:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 28%,transparent); } #page-myclass .mc-input:disabled{ color:var(--mute); } #page-myclass .mc-inline-form{ background:var(--panel-2); border:1px solid var(--line-bright); border-radius:var(--r); padding:13px 14px; margin:2px 0; } /* recruit table extras */ #page-myclass .mc-status-sel{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:3px 9px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); cursor:pointer; transition:border-color .14s, color .14s, background-color .14s; } #page-myclass .mc-status-sel:focus-visible{ outline:none; box-shadow:0 0 0 2px color-mix(in oklab,var(--accent) 28%,transparent); } #page-myclass .st-sel-signed{ color:var(--win); border-color:color-mix(in oklab,var(--win) 45%,transparent); background:color-mix(in oklab,var(--win) 12%,transparent); } #page-myclass .st-sel-committed{ color:var(--accent-bright); border-color:color-mix(in oklab,var(--accent) 45%,transparent); background:color-mix(in oklab,var(--accent) 12%,transparent); } #page-myclass .st-sel-target{ color:var(--live); border-color:color-mix(in oklab,var(--live) 45%,transparent); background:color-mix(in oklab,var(--live) 12%,transparent); } #page-myclass .mc-icon-btn{ font-size:13px; line-height:1; width:26px; height:26px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); cursor:pointer; transition:border-color .14s, color .14s, transform .14s; } #page-myclass .mc-icon-btn + .mc-icon-btn{ margin-left:5px; } #page-myclass .mc-icon-btn:hover{ border-color:var(--line-bright); color:var(--ink); transform:translateY(-1px); } #page-myclass .mc-icon-btn.danger:hover{ color:var(--loss); border-color:color-mix(in oklab,var(--loss) 50%,transparent); } #page-myclass .mc-note-cell{ font-size:12.5px; color:var(--dim); font-style:italic; padding-top:2px !important; padding-bottom:9px !important; } #page-myclass .mc-recruit-tbl th[data-sortable]{ cursor:pointer; user-select:none; } #page-myclass .mc-recruit-tbl th[data-sortable]:hover{ color:var(--ink); } /* mobile recruit cards */ #page-myclass .mc-card-hint{ font-size:12px; color:var(--mute); font-weight:500; margin-bottom:10px; text-align:center; } #page-myclass .mc-recruit-card, #page-myclass .mc-ret-card{ border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:13px 14px; margin-bottom:10px; } #page-myclass .mc-rc-top{ display:flex; align-items:baseline; gap:9px; } #page-myclass .mc-rc-rk{ font-family:var(--disp); font-weight:800; font-size:13px; color:var(--mute); flex:0 0 auto; } #page-myclass .mc-rc-name{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.01em; color:var(--ink); flex:1; min-width:0; } #page-myclass .mc-rc-nil{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--ink); flex:0 0 auto; font-variant-numeric:tabular-nums; } #page-myclass .mc-rc-meta{ font-size:12.5px; color:var(--dim); font-weight:500; margin-top:3px; } #page-myclass .mc-rc-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } #page-myclass .mc-rc-note{ font-size:12.5px; color:var(--dim); font-style:italic; margin-top:9px; border-top:1px solid var(--line); padding-top:8px; } /* retained */ #page-myclass .mc-explain{ font-size:13px; color:var(--ink-2); line-height:1.45; margin:0 0 14px; } #page-myclass .mc-ret-actions{ display:flex; gap:8px; margin-top:11px; } #page-myclass .mc-del:hover{ color:var(--loss); } #page-myclass .mc-pending-note{ font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent-bright); } #page-myclass .mc-pending-note b{ color:var(--ink); font-variant-numeric:tabular-nums; } #page-myclass .mc-carryover{ margin-top:13px; border:1px dashed var(--line-bright); border-radius:var(--r); background:var(--panel-2); padding:11px 13px; } #page-myclass .mc-carryover-head{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-bottom:9px; } #page-myclass .mc-carry-row{ display:flex; align-items:center; gap:10px; padding:6px 0; } #page-myclass .mc-carry-row + .mc-carry-row{ border-top:1px solid var(--line); } #page-myclass .mc-cy-pos{ font-family:var(--disp); font-weight:800; font-size:12px; color:var(--dim); width:42px; flex:0 0 auto; } #page-myclass .mc-cy-name{ font-weight:600; font-size:13.5px; color:var(--ink); flex:1; min-width:0; } #page-myclass .mc-cy-reason{ font-size:12px; color:var(--dim); flex:0 0 auto; } #page-myclass .mc-cy-cost{ font-family:var(--disp); font-weight:800; font-size:13.5px; color:var(--ink-2); flex:0 0 auto; width:56px; text-align:right; font-variant-numeric:tabular-nums; } #page-myclass .mc-foot{ display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; margin:8px 0 6px; } /* modal */ #page-myclass .mc-modal-scrim{ position:fixed; inset:0; background:var(--scrim); display:grid; place-items:end center; z-index:var(--z-scrim); padding:0; } #page-myclass .mc-modal{ width:100%; max-width:520px; background:var(--panel); border:1px solid var(--line-bright); border-radius:var(--r-lg) var(--r-lg) 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lift); animation:mcSheetUp .26s var(--ease-out-quint); } @keyframes mcSheetUp{ from{ transform:translateY(18px); opacity:0; } to{ transform:none; opacity:1; } } #page-myclass .mc-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; } #page-myclass .mc-modal-head h3{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin:0; } #page-myclass .mc-modal-actions{ justify-content:space-between; } /* desktop/mobile gating */ #page-myclass .mobile-only{ display:none; } @media (max-width:900px){ #page-myclass .mc-form{ grid-template-columns:repeat(2,1fr); } #page-myclass .mc-field-wide{ grid-column:span 2; } #page-myclass .mc-stat-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ #page-myclass .desktop-only{ display:none !important; } #page-myclass .mobile-only{ display:block; } #page-myclass .mc-tier{ flex:1 1 100%; } #page-myclass .mc-hl-grid{ grid-template-columns:1fr; } #page-myclass .mc-stars-strip{ grid-template-columns:repeat(5,1fr); gap:5px; } #page-myclass .mc-star-n{ font-size:19px; } #page-myclass .mc-star-lab{ font-size:8.5px; } #page-myclass .mc-foot .btn{ flex:1; justify-content:center; } } @media (max-width:480px){ #page-myclass .mc-stat-grid{ grid-template-columns:1fr 1fr; } #page-myclass .mc-form{ grid-template-columns:1fr; } #page-myclass .mc-field-wide{ grid-column:span 1; } } /* ======================== PAGE: nilboard ======================== */ #page-nilboard .nb-chips{ grid-template-columns:repeat(4,1fr); } #page-nilboard .chip-me .k{ color:var(--me); } /* conference filter row */ #page-nilboard .nb-filter{ display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 4px; } #page-nilboard .nb-chip{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); cursor:pointer; transition:border-color .15s, color .15s, background-color .15s, transform .12s; } #page-nilboard .nb-chip:hover{ border-color:var(--line-bright); color:var(--ink); transform:translateY(-1px); } #page-nilboard .nb-chip:active{ transform:translateY(0) scale(.97); } #page-nilboard .nb-chip.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; } #page-nilboard .nb-chip:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; } /* conference pill */ #page-nilboard .nb-conf{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); white-space:nowrap; } /* YOU pill on own team */ #page-nilboard .nb-you{ margin-left:8px; font-family:var(--disp); font-weight:800; font-size:10px; letter-spacing:.08em; color:#fff; background:var(--me); padding:2px 7px; border-radius:999px; vertical-align:middle; } /* % used mini-bar cell */ #page-nilboard .nb-use{ min-width:128px; } #page-nilboard .nb-bar-cell{ display:flex; align-items:center; gap:9px; } #page-nilboard .nb-bar-cell .track{ flex:1; min-width:54px; } #page-nilboard .nb-pct{ font-family:var(--disp); font-weight:800; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; flex:0 0 auto; width:38px; text-align:right; } #page-nilboard .bar.over-cap{ background:var(--loss); } /* gold top row */ #page-nilboard .nb-tbl .gold-rk{ color:var(--gold); } #page-nilboard .nb-tbl tbody tr:first-child{ background:color-mix(in oklab,var(--gold) 7%,transparent); } #page-nilboard .nb-tbl tbody tr:first-child:hover{ background:color-mix(in oklab,var(--gold) 11%,transparent); } /* mobile cards (hidden on desktop) */ #page-nilboard .nb-cards{ display:none; } #page-nilboard .nb-card{ display:block; padding:14px 15px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); cursor:pointer; transition:border-color .16s, transform .14s; } #page-nilboard .nb-card + .nb-card{ margin-top:10px; } #page-nilboard .nb-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); } #page-nilboard .nb-card.is-me{ border-color:color-mix(in oklab,var(--me) 45%,var(--line)); box-shadow:inset 3px 0 0 var(--me); } #page-nilboard .nb-card-h{ display:flex; align-items:center; gap:11px; } #page-nilboard .nb-rank{ font-family:var(--disp); font-weight:900; font-size:20px; color:var(--dim); width:24px; flex:0 0 auto; font-variant-numeric:tabular-nums; } #page-nilboard .nb-rank.gold-rk{ color:var(--gold); } #page-nilboard .nb-card-id{ min-width:0; } #page-nilboard .nb-card-team{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); line-height:1.05; } #page-nilboard .nb-card-sub{ font-size:12.5px; color:var(--dim); font-weight:600; margin-top:2px; } #page-nilboard .nb-card-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; } #page-nilboard .nb-stat{ display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line); } #page-nilboard .nb-stat-k{ font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); } #page-nilboard .nb-stat-v{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--ink); font-variant-numeric:tabular-nums; } #page-nilboard .nb-card-bar{ display:flex; align-items:center; gap:10px; margin-top:11px; } #page-nilboard .nb-card-bar .track{ flex:1; } #page-nilboard .nb-foot{ font-size:12.5px; margin-top:14px; max-width:74ch; } @media (max-width:920px){ #page-nilboard .nb-chips{ grid-template-columns:1fr 1fr !important; } } /* swap table for cards on phones */ @media (max-width:760px){ #page-nilboard .nb-desk{ display:none; } #page-nilboard .nb-cards{ display:block; } } /* ======================== PAGE: champions ======================== */ /* banner */ #page-champions .champ-banner{ position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid color-mix(in oklab,var(--gold) 38%,var(--line)); display:flex; align-items:center; gap:clamp(14px,2.4vw,26px); flex-wrap:wrap; padding:clamp(20px,3.2vw,34px); margin-top:4px; background:linear-gradient(110deg, color-mix(in oklab,var(--gold) 18%,var(--panel)) 0%, color-mix(in oklab,var(--gold) 6%,var(--panel)) 48%, var(--panel) 100%); } #page-champions .cb-bg{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(440px 340px at 88% -30%, color-mix(in oklab,var(--gold) 32%,transparent), transparent 64%); } #page-champions .cb-trophy{ position:relative; z-index:1; font-size:clamp(44px,7vw,68px); line-height:1; flex:0 0 auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); } #page-champions .cb-body{ position:relative; z-index:1; min-width:0; flex:1; } #page-champions .cb-title{ font-family:var(--disp); font-weight:900; font-size:clamp(30px,5.4vw,54px); line-height:.92; letter-spacing:-.005em; text-transform:uppercase; margin:0; text-wrap:balance; } #page-champions .cb-lede{ max-width:62ch; color:var(--ink-2); font-size:14.5px; margin:9px 0 0; line-height:1.5; } #page-champions .cb-count{ font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); margin-top:13px; display:inline-flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; } #page-champions .cb-count .count{ font-size:22px; color:var(--ink); } #page-champions .cb-dot{ width:4px; height:4px; border-radius:50%; background:var(--mute); } /* reigning hero (banner washed in --champ-primary) */ #page-champions .champ-hero{ position:relative; overflow:hidden; border-radius:var(--r-xl); border:1px solid color-mix(in oklab,var(--champ-primary) 38%,var(--line)); display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); flex-wrap:wrap; padding:clamp(20px,3.2vw,34px); margin-bottom:6px; background:linear-gradient(110deg, color-mix(in oklab,var(--champ-primary) 26%,var(--panel)) 0%, color-mix(in oklab,var(--champ-primary) 9%,var(--panel)) 48%, var(--panel) 100%); } #page-champions .champ-hero-bg{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(440px 340px at 86% -28%, color-mix(in oklab,var(--champ-primary) 36%,transparent), transparent 64%); } #page-champions .champ-hero-logo{ position:relative; z-index:1; flex:0 0 auto; } #page-champions .champ-hero-logo .logo-wrap{ border-radius:20px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 16px 38px -16px var(--champ-primary); } #page-champions .champ-hero-body{ position:relative; z-index:1; min-width:0; flex:1; } #page-champions .champ-title{ font-family:var(--disp); font-weight:900; font-size:clamp(30px,5.6vw,56px); line-height:.9; letter-spacing:-.005em; text-transform:uppercase; margin:0; text-wrap:balance; } #page-champions .champ-sub{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:10px; } #page-champions .champ-psn{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.04em; color:color-mix(in oklab,var(--champ-primary) 35%,var(--ink)); } #page-champions .champ-line{ font-size:14.5px; color:var(--ink-2); font-weight:500; } #page-champions .champ-line b{ font-family:var(--disp); font-weight:800; font-size:17px; color:var(--ink); } #page-champions .champ-stat-row{ display:flex; gap:clamp(18px,3vw,40px); flex-wrap:wrap; margin-top:18px; } #page-champions .cs{ display:flex; flex-direction:column; gap:3px; } #page-champions .cs-k{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } #page-champions .cs-v{ font-family:var(--disp); font-weight:800; font-size:24px; letter-spacing:.02em; color:var(--ink); font-variant-numeric:tabular-nums; } /* title-card grid */ #page-champions .champ-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; } #page-champions .title-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid color-mix(in oklab,var(--champ-primary) 30%,var(--line)); background:var(--panel); transition:border-color .16s, transform .16s, box-shadow .16s; } #page-champions .title-card-link{ cursor:pointer; } #page-champions .title-card-link:hover{ border-color:color-mix(in oklab,var(--champ-primary) 55%,var(--line)); transform:translateY(-2px); box-shadow:var(--shadow-lift); } #page-champions .tc-banner{ display:flex; align-items:center; justify-content:space-between; padding:11px 15px; background:linear-gradient(100deg, var(--champ-primary) 0%, var(--champ-secondary) 100%); } #page-champions .tc-szn{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4); } #page-champions .tc-trophy{ font-size:18px; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); } #page-champions .tc-body{ display:flex; align-items:center; gap:13px; padding:15px 15px 4px; } #page-champions .tc-id{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; } #page-champions .tc-label{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); } #page-champions .tc-psn{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em; color:var(--ink); line-height:1.05; } #page-champions .tc-team{ font-size:12.5px; color:var(--dim); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-champions .tc-score{ display:flex; flex-direction:column; align-items:flex-end; flex:0 0 auto; } #page-champions .tc-line{ font-family:var(--disp); font-weight:900; font-size:22px; letter-spacing:.01em; color:var(--ink); font-variant-numeric:tabular-nums; } #page-champions .tc-recap{ margin:8px 15px 16px; padding:10px 13px; border-left:2px solid color-mix(in oklab,var(--champ-primary) 50%,var(--line)); background:var(--panel-2); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:12.5px; line-height:1.5; color:var(--ink-2); } /* dynasty rankings rail */ #page-champions #champ-rail{ position:sticky; top:84px; } #page-champions .dyn-row{ display:flex; align-items:center; gap:12px; padding:12px 11px; border-radius:var(--r-sm); transition:background-color .15s; } #page-champions .dyn-row + .dyn-row{ border-top:1px solid var(--line); } #page-champions .dyn-row:hover{ background:var(--hover-row); } #page-champions .dyn-row.is-me{ background:color-mix(in oklab,var(--me) 9%,transparent); box-shadow:inset 3px 0 0 var(--me); } #page-champions .dyn-rk{ font-family:var(--disp); font-weight:800; font-size:20px; color:var(--dim); width:24px; flex:0 0 auto; text-align:center; font-variant-numeric:tabular-nums; } #page-champions .dyn-rk.gold{ color:var(--gold); } #page-champions .dynasty-logo--placeholder{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; flex:0 0 auto; background:var(--panel-2); border:1px solid var(--line); color:var(--gold); font-family:var(--disp); font-weight:800; font-size:13px; } #page-champions .dyn-id{ display:flex; flex-direction:column; gap:1px; min-width:0; } #page-champions .dyn-id b{ font-weight:700; font-size:14.5px; color:var(--ink); } #page-champions .dyn-team{ font-size:12px; color:var(--dim); font-weight:600; } #page-champions .dyn-stars{ margin-left:auto; font-size:12px; letter-spacing:.5px; white-space:nowrap; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); } #page-champions .dyn-n{ font-family:var(--disp); font-weight:800; font-size:16px; color:var(--gold); width:30px; text-align:right; flex:0 0 auto; font-variant-numeric:tabular-nums; } #page-champions .dyn-note{ font-size:12px; color:var(--dim); line-height:1.5; margin:0; padding:0 4px; } /* conference strip */ #page-champions .conf-row{ display:flex; align-items:center; gap:11px; padding:12px 11px; border-radius:var(--r-sm); transition:background-color .15s; } #page-champions .conf-row + .conf-row{ border-top:1px solid var(--line); } #page-champions .conf-row:hover{ background:var(--hover-row); } #page-champions .conf-tag{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line); padding:4px 8px; border-radius:7px; width:62px; text-align:center; flex:0 0 auto; } #page-champions .conf-id{ display:flex; flex-direction:column; gap:1px; min-width:0; } #page-champions .conf-id b{ font-weight:700; font-size:14.5px; color:var(--ink); } #page-champions .conf-coach{ font-size:12px; color:var(--dim); font-weight:600; } /* timeline */ #page-champions .champ-timeline{ position:relative; display:flex; flex-direction:column; gap:0; padding-left:6px; } #page-champions .ct-item{ position:relative; display:grid; grid-template-columns:44px 22px 1fr; align-items:center; gap:10px; padding:7px 0; } #page-champions .ct-item::before{ content:""; position:absolute; left:55px; top:0; bottom:0; width:2px; background:var(--line); } #page-champions .ct-item:first-child::before{ top:50%; } #page-champions .ct-item:last-child::before{ bottom:50%; } #page-champions .ct-szn{ font-family:var(--disp); font-weight:800; font-size:15px; color:var(--dim); letter-spacing:.04em; text-align:right; font-variant-numeric:tabular-nums; } #page-champions .ct-dot{ position:relative; z-index:1; width:13px; height:13px; border-radius:50%; background:var(--panel-2); border:2px solid var(--line-bright); justify-self:center; } #page-champions .ct-current .ct-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in oklab,var(--gold) 22%,transparent); } #page-champions .ct-current .ct-szn{ color:var(--gold); } #page-champions .ct-card{ display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); transition:border-color .15s, transform .15s; } #page-champions .ct-card:hover{ border-color:var(--line-bright); transform:translateX(2px); } #page-champions .ct-current .ct-card{ border-color:color-mix(in oklab,var(--gold) 40%,var(--line)); background:color-mix(in oklab,var(--gold) 7%,var(--panel)); } #page-champions .ct-body{ display:flex; flex-direction:column; gap:1px; min-width:0; } #page-champions .ct-body b{ font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.02em; color:var(--ink); } #page-champions .ct-coach{ font-size:12px; color:var(--dim); font-weight:600; } #page-champions .ct-score{ margin-left:auto; font-family:var(--disp); font-weight:700; font-size:13.5px; color:var(--ink-2); letter-spacing:.02em; white-space:nowrap; font-variant-numeric:tabular-nums; } /* empty state */ #page-champions .champ-empty{ text-align:center; padding:clamp(34px,6vw,64px) 20px; border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--panel); } #page-champions .ce-icon{ font-size:42px; opacity:.6; margin-bottom:10px; } #page-champions .ce-h{ font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.02em; color:var(--ink); margin:0 0 6px; } #page-champions .ce-p{ color:var(--dim); font-size:14px; margin:0; max-width:46ch; margin-inline:auto; } @media (max-width:920px){ #page-champions #champ-body{ grid-template-columns:1fr !important; } #page-champions #champ-rail{ position:static; } } @media (max-width:760px){ #page-champions .champ-banner, #page-champions .champ-hero{ flex-direction:column; align-items:flex-start; } #page-champions .champ-grid{ grid-template-columns:1fr; } #page-champions .ct-score{ display:none; } #page-champions .ct-item{ grid-template-columns:38px 20px 1fr; } #page-champions .ct-item::before{ left:47px; } } /* ======================== PAGE: history ======================== */ /* Header */ #page-history .hist-head{ text-align:center; padding:6px 0 4px; } #page-history .hist-kicker{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright); } #page-history .hist-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.6vw,58px); line-height:.94; letter-spacing:-.01em; text-transform:uppercase; color:var(--ink); margin:8px 0 0; } #page-history .hist-lede{ max-width:62ch; margin:10px auto 0; color:var(--ink-2); font-size:14.5px; line-height:1.5; } #page-history .hist-count{ display:inline-block; margin-top:10px; font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); } #page-history .hist-count b{ color:var(--ink); } /* H2H selector */ #page-history .h2h-card{ margin-bottom:8px; } #page-history .h2h-form{ display:grid; grid-template-columns:1fr auto 1fr auto; gap:14px; align-items:end; } #page-history .h2h-field{ display:flex; flex-direction:column; gap:6px; min-width:0; } #page-history .h2h-flabel{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } #page-history .sel-wrap{ position:relative; } #page-history .sel-wrap::after{ content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--dim); pointer-events:none; font-size:12px; } #page-history .h2h-sel{ width:100%; appearance:none; -webkit-appearance:none; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); font-family:var(--body); font-weight:600; font-size:14px; padding:11px 32px 11px 13px; cursor:pointer; transition:border-color .15s; } #page-history .h2h-sel:hover{ border-color:var(--line-bright); } #page-history .h2h-sel:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 30%,transparent); } #page-history .h2h-vs{ font-family:var(--disp); font-weight:900; font-size:18px; letter-spacing:.04em; color:var(--dim); padding-bottom:11px; align-self:end; } #page-history .h2h-go{ align-self:end; } #page-history .h2h-err{ color:var(--loss); font-size:12.5px; font-weight:600; margin:12px 0 0; } #page-history .h2h-hint{ font-size:12px; margin:12px 0 0; } /* H2H result card */ #page-history .h2h-result{ margin-bottom:6px; overflow:hidden; } #page-history .h2h-headline{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; padding:20px clamp(14px,2.4vw,22px); border-bottom:1px solid var(--line); background:linear-gradient(180deg, color-mix(in oklab,var(--accent) 7%,var(--panel)), var(--panel)); } #page-history .h2h-side{ display:flex; align-items:center; gap:13px; min-width:0; } #page-history .h2h-side-r{ justify-content:flex-end; text-align:right; } #page-history .h2h-side-id{ display:flex; flex-direction:column; min-width:0; } #page-history .h2h-psn{ font-family:var(--disp); font-weight:800; font-size:clamp(18px,2.4vw,24px); letter-spacing:.02em; color:var(--ink); cursor:pointer; line-height:1.05; white-space:nowrap; } #page-history .h2h-psn:hover{ color:var(--accent-bright); } #page-history .h2h-side-team{ font-size:12.5px; color:var(--dim); font-weight:600; margin-top:2px; } #page-history .h2h-center{ text-align:center; flex:0 0 auto; } #page-history .h2h-record{ font-family:var(--disp); font-weight:900; font-size:clamp(26px,3.6vw,38px); line-height:1; letter-spacing:.02em; font-variant-numeric:tabular-nums; white-space:nowrap; } #page-history .h2h-w{ color:var(--win); } #page-history .h2h-l{ color:var(--loss); } #page-history .h2h-t{ color:var(--dim); } #page-history .h2h-rdash{ color:var(--mute); margin:0 2px; } #page-history .h2h-games{ display:block; font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-top:5px; } #page-history .h2h-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px clamp(14px,2.4vw,22px); } #page-history .h2h-tiles .chip{ background:color-mix(in oklab,var(--bg) 26%,var(--panel)); } #page-history .h2h-tile-me{ box-shadow:inset 3px 0 0 var(--me); } #page-history .h2h-margin{ color:var(--win); font-family:var(--disp); font-weight:900; } #page-history .h2h-margin.loss{ color:var(--loss); } /* H2H matchups table block */ #page-history .h2h-matchups{ border-top:1px solid var(--line); } #page-history .h2h-matchups .panel-h{ padding:14px clamp(14px,2.4vw,22px) 10px; } #page-history .mu-cell{ white-space:nowrap; } #page-history .mu-cell b{ font-weight:700; font-size:12.5px; color:var(--ink-2); margin:0 2px 0 5px; vertical-align:middle; } #page-history .mu-at{ color:var(--mute); font-weight:700; margin:0 4px; } #page-history .mu-cell .logo-wrap{ vertical-align:middle; } #page-history .mu-sim{ font-size:9px; padding:1px 4px; border-radius:4px; background:var(--panel-2); color:var(--dim); margin-left:5px; letter-spacing:.04em; vertical-align:middle; } #page-history .h2h-empty{ padding:26px 22px; text-align:center; color:var(--dim); font-size:13.5px; } /* All-time stats table */ #page-history .hist-panel{ margin-bottom:6px; } #page-history .hist-row{ cursor:pointer; } #page-history .hist-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; } #page-history .tc-team{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.06em; color:var(--dim); margin-left:7px; } #page-history .hist-table .psn{ font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:.02em; color:var(--ink); cursor:pointer; } #page-history .hist-table .psn:hover{ color:var(--accent-bright); } #page-history .t-app{ color:var(--dim); font-weight:700; } #page-history .diff{ font-family:var(--disp); font-weight:800; font-variant-numeric:tabular-nums; } #page-history .diff.up{ color:var(--win); } #page-history .diff.down{ color:var(--loss); } #page-history .hist-foot{ font-size:11.5px; line-height:1.5; padding:12px clamp(12px,2vw,16px) 4px; } /* Responsive */ @media (max-width:920px){ #page-history .h2h-tiles{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ #page-history .h2h-form{ grid-template-columns:1fr; gap:10px; } #page-history .h2h-vs{ text-align:center; padding:2px 0; align-self:center; } #page-history .h2h-go{ width:100%; justify-content:center; } #page-history .h2h-headline{ grid-template-columns:1fr; gap:16px; text-align:center; } #page-history .h2h-side, #page-history .h2h-side-r{ justify-content:center; text-align:center; } #page-history .h2h-side-r{ flex-direction:row-reverse; } #page-history .h2h-side-id{ align-items:center; } } @media (max-width:480px){ #page-history .h2h-tiles{ grid-template-columns:1fr; } } /* ======================== PAGE: news ======================== */ #page-news .news-feed{ display:flex; flex-direction:column; gap:14px; } /* AI banner */ #page-news .news-ai-banner{ display:flex; align-items:center; gap:16px; margin-bottom:14px; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg, color-mix(in oklab,var(--accent) 11%,var(--panel)) 0%, var(--panel) 64%); padding:16px 18px; position:relative; overflow:hidden; } #page-news .news-ai-banner::after{ content:""; position:absolute; right:-50px; top:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, color-mix(in oklab,var(--accent) 26%,transparent), transparent 68%); pointer-events:none; } #page-news .ai-mark{ flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r); background:color-mix(in oklab,var(--accent) 24%,var(--panel-2)); color:var(--accent-bright); font-size:24px; position:relative; z-index:1; } #page-news .ai-copy{ position:relative; z-index:1; min-width:0; } #page-news .ai-title{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); } #page-news .ai-sub{ font-size:13px; color:var(--ink-2); line-height:1.45; margin:3px 0 0; max-width:78ch; } #page-news .ai-banner-pill{ margin-left:auto; flex:0 0 auto; position:relative; z-index:1; } /* Filter chips */ #page-news .news-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } #page-news .nf-chip{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--dim); background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px; cursor:pointer; transition:color .15s, border-color .15s, background-color .15s, transform .12s; } #page-news .nf-chip:hover{ color:var(--ink-2); border-color:var(--line-bright); } #page-news .nf-chip:active{ transform:translateY(1px); } #page-news .nf-chip.is-on{ color:var(--bg); background:var(--accent); border-color:var(--accent); } #page-news .nf-chip:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; } /* Post card */ #page-news .news-post{ padding:18px 20px; position:relative; } #page-news .news-post.pinned{ box-shadow:inset 4px 0 0 var(--gold); border-color:var(--line-bright); } /* Meta line */ #page-news .np-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-bottom:10px; } #page-news .np-date{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums; } #page-news .np-author{ font-size:12.5px; color:var(--ink-2); font-weight:600; } #page-news .np-dot{ width:3px; height:3px; border-radius:50%; background:var(--mute); flex:0 0 auto; } #page-news .np-source{ font-size:12px; color:var(--accent-bright); font-weight:600; cursor:pointer; text-decoration:none; } #page-news .np-source:hover{ text-decoration:underline; } /* Category pills (tint the base .pill per category) */ #page-news .np-cat{ border:1px solid transparent; } #page-news .cat-matchup{ color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 16%,var(--panel-2)); border-color:color-mix(in oklab,var(--accent) 34%,transparent); } #page-news .cat-upset{ color:var(--loss); background:color-mix(in oklab,var(--loss) 15%,var(--panel-2)); border-color:color-mix(in oklab,var(--loss) 34%,transparent); } #page-news .cat-signing{ color:var(--win); background:color-mix(in oklab,var(--win) 15%,var(--panel-2)); border-color:color-mix(in oklab,var(--win) 32%,transparent); } #page-news .cat-lp{ color:var(--gold); background:color-mix(in oklab,var(--gold) 16%,var(--panel-2)); border-color:color-mix(in oklab,var(--gold) 34%,transparent); } #page-news .cat-power{ color:var(--live); background:color-mix(in oklab,var(--live) 16%,var(--panel-2)); border-color:color-mix(in oklab,var(--live) 34%,transparent); } #page-news .cat-recap{ color:var(--ink-2); background:var(--panel-2); border-color:var(--line); } /* Title */ #page-news .news-title{ font-family:var(--disp); font-weight:800; font-size:clamp(20px,2.4vw,26px); line-height:1.08; letter-spacing:.005em; text-transform:uppercase; color:var(--ink); margin:0 0 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; text-wrap:balance; } #page-news .news-title .np-tl{ flex:0 0 auto; } /* Body */ #page-news .news-body{ font-size:14.5px; line-height:1.6; color:var(--ink-2); white-space:pre-line; margin:0 0 12px; max-width:74ch; } #page-news .news-body:last-of-type{ margin-bottom:0; } /* "image" panel : crest matchup banner stand-in */ #page-news .news-image{ position:relative; border-radius:var(--r); margin:0 0 14px; min-height:140px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg, color-mix(in oklab,var(--ic1) 40%,var(--panel-2)) 0%, var(--panel-2) 48%, color-mix(in oklab,var(--ic2) 40%,var(--panel-2)) 100%); } #page-news .ni-vs{ display:flex; align-items:center; gap:18px; } #page-news .ni-vs-sc{ font-family:var(--disp); font-weight:900; font-size:38px; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); } #page-news .ni-vs-x{ color:var(--dim); margin:0 6px; } #page-news .ni-tag-final{ position:absolute; top:10px; right:10px; } /* Matchup-preview inline banner (no score yet) */ #page-news .np-preview{ display:flex; align-items:center; gap:14px; margin:0 0 14px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2); } #page-news .npp-side{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; } #page-news .npp-side.npp-right{ justify-content:flex-end; text-align:right; } #page-news .npp-info{ display:flex; flex-direction:column; min-width:0; } #page-news .npp-team{ font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); } #page-news .npp-rec{ font-size:12px; color:var(--dim); font-weight:600; margin-top:1px; } #page-news .npp-vs{ font-family:var(--disp); font-weight:900; font-size:13px; letter-spacing:.1em; color:var(--mute); flex:0 0 auto; } /* In-card tables */ #page-news .np-table{ margin:0 0 12px; } #page-news .np-up{ color:var(--win); } /* Admin actions */ #page-news .np-actions{ display:flex; gap:8px; margin-top:14px; padding-top:13px; border-top:1px solid var(--line); } #page-news .np-del:hover{ color:var(--loss); border-color:var(--loss); } /* Empty state */ #page-news .news-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:48px 20px; border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--panel); } #page-news .ne-ic{ font-size:36px; line-height:1; } #page-news .ne-h{ font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); } #page-news .ne-d{ font-size:13.5px; color:var(--ink-2); line-height:1.5; max-width:50ch; margin:0 0 6px; } /* Footer */ #page-news .news-footer{ text-align:center; font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:26px 0 8px; } @media (max-width:760px){ #page-news .news-ai-banner{ flex-wrap:wrap; gap:12px; } #page-news .ai-banner-pill{ margin-left:0; } #page-news .news-post{ padding:16px 15px; } #page-news .np-preview{ gap:10px; padding:12px; } #page-news .npp-team{ font-size:14px; } #page-news .ni-vs{ gap:12px; } #page-news .ni-vs-sc{ font-size:30px; } #page-news .np-actions .btn{ flex:1; justify-content:center; } } /* ======================== PAGE: rules ======================== */ /* Header */ #page-rules .rules-head{ margin-bottom:6px; } #page-rules .rh-kicker{ display:inline-block; font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-bright); } #page-rules .rh-title{ font-family:var(--disp); font-weight:900; font-size:clamp(34px,5.4vw,58px); line-height:.94; letter-spacing:-.01em; text-transform:uppercase; margin:8px 0 0; color:var(--ink); } #page-rules .rh-lede{ max-width:66ch; color:var(--ink-2); font-size:15px; margin:10px 0 0; line-height:1.5; } /* Search form */ #page-rules .rules-search{ margin-bottom:14px; } #page-rules .rs-form{ display:flex; align-items:center; gap:10px; } #page-rules .rs-ic{ font-size:18px; flex:0 0 auto; line-height:1; } #page-rules .rs-input{ flex:1; min-width:0; height:46px; padding:0 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel-2); color:var(--ink); font-family:var(--body); font-size:15px; font-weight:500; transition:border-color .16s, box-shadow .16s; } #page-rules .rs-input::placeholder{ color:var(--mute); } #page-rules .rs-input:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 28%,transparent); } #page-rules .rs-submit{ flex:0 0 auto; height:46px; } #page-rules .rs-hint{ font-size:12.5px; color:var(--dim); font-weight:500; margin-top:10px; } /* Two-column layout : results + sidebar */ #page-rules .rules-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; margin-bottom:8px; } #page-rules .rules-main{ min-width:0; } /* Result cards */ #page-rules .rs-results{ margin-top:4px; } #page-rules .rule-result{ display:block; position:relative; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); cursor:pointer; overflow:hidden; transition:border-color .16s, transform .16s, box-shadow .16s; } #page-rules .rule-result::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:0; transition:opacity .16s; } #page-rules .rule-result:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); } #page-rules .rule-result:hover::before{ opacity:1; } #page-rules .rr-cat{ display:inline-flex; align-items:center; gap:7px; padding:4px 9px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); } #page-rules .rr-cat-ic{ font-size:13px; line-height:1; } #page-rules .rr-cat-name{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } #page-rules .rr-title{ font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:.01em; text-transform:uppercase; color:var(--ink); margin:11px 0 0; line-height:1.05; } #page-rules .rr-body{ font-size:13.5px; color:var(--ink-2); line-height:1.5; margin:7px 0 0; font-variant-numeric:tabular-nums; } #page-rules .rr-link{ display:inline-block; font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-bright); margin-top:11px; } /* Most Searched sidebar */ #page-rules .rules-side{ position:sticky; top:80px; } #page-rules .ms-row{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-sm); cursor:pointer; transition:background-color .15s; } #page-rules .ms-row + .ms-row{ border-top:1px solid var(--line); } #page-rules .ms-row:hover{ background:var(--hover-row); } #page-rules .ms-rk{ font-family:var(--disp); font-weight:800; font-size:13px; color:var(--mute); width:18px; flex:0 0 auto; text-align:right; font-variant-numeric:tabular-nums; } #page-rules .ms-term{ flex:1; min-width:0; font-weight:600; font-size:14px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #page-rules .ms-row:hover .ms-term{ color:var(--ink); } #page-rules .ms-hits{ flex:0 0 auto; font-family:var(--disp); font-weight:800; font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums; } /* Category cards */ #page-rules .cat-card{ display:flex; flex-direction:column; gap:6px; padding:18px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); cursor:pointer; transition:border-color .16s, transform .16s, box-shadow .16s; } #page-rules .cat-card:hover{ border-color:var(--line-bright); transform:translateY(-2px); box-shadow:var(--shadow-lift); } #page-rules .cc-ic{ font-size:26px; line-height:1; } #page-rules .cc-name{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin-top:4px; } #page-rules .cc-desc{ font-size:13px; color:var(--ink-2); line-height:1.45; flex:1; } #page-rules .cc-count{ font-family:var(--disp); font-weight:800; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-bright); margin-top:6px; padding-top:8px; border-top:1px solid var(--line); } #page-rules .cc-count .num{ font-size:14px; } /* Footer */ #page-rules .rules-footer{ text-align:center; font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); padding:26px 0 8px; } @media (max-width:920px){ #page-rules .rules-layout{ grid-template-columns:1fr; } #page-rules .rules-side{ position:static; top:auto; } } @media (max-width:760px){ #page-rules .rs-form{ flex-wrap:wrap; } #page-rules .rs-input{ flex:1 1 100%; order:2; } #page-rules .rs-ic{ order:1; } #page-rules .rs-submit{ order:3; flex:1; justify-content:center; } } /* ======================== PAGE: tools ======================== */ #page-tools .t-lede{ color:var(--ink-2); font-size:14.5px; max-width:74ch; margin:0 0 6px; } #page-tools code{ font-family:var(--body); font-size:.92em; background:var(--panel-2); padding:1px 5px; border-radius:5px; color:var(--ink-2); } /* commish / premium tags */ #page-tools .t-tag{ font-family:var(--disp); font-weight:800; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); background:color-mix(in oklab,var(--gold) 16%,transparent); border:1px solid color-mix(in oklab,var(--gold) 38%,transparent); padding:1px 5px; border-radius:5px; vertical-align:middle; margin-left:4px; } #page-tools .t-tag--prem{ color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 16%,transparent); border-color:color-mix(in oklab,var(--accent) 40%,transparent); } #page-tools .t-tag--super{ margin-left:6px; } /* SUPER-TAB strip */ #page-tools .t-supers{ display:flex; flex-wrap:wrap; gap:6px; padding:6px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:14px; } #page-tools .t-super{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); background:transparent; border:1px solid transparent; border-radius:var(--r); padding:9px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:color .15s, background-color .15s, border-color .15s; } #page-tools .t-super:hover{ color:var(--ink-2); background:var(--hover-row); } #page-tools .t-super.is-active{ color:var(--ink); background:var(--panel); border-color:var(--line-bright); box-shadow:var(--shadow-card); } #page-tools .tools-tab-count{ font-family:var(--disp); font-weight:800; font-size:11px; min-width:18px; text-align:center; padding:1px 5px; border-radius:20px; background:var(--panel); border:1px solid var(--line); color:var(--ink-2); font-variant-numeric:tabular-nums; } #page-tools .t-super.is-active .tools-tab-count{ background:var(--panel-2); } #page-tools .tools-tab-count--alert{ background:color-mix(in oklab,var(--loss) 22%,transparent); border-color:color-mix(in oklab,var(--loss) 50%,transparent); color:var(--loss); } /* SUB-TAB strip */ #page-tools .t-subs{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; } #page-tools .t-sub{ font-family:var(--disp); font-weight:700; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); background:transparent; border:none; border-bottom:2px solid transparent; padding:9px 12px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; margin-bottom:-1px; transition:color .15s, border-color .15s; } #page-tools .t-sub:hover{ color:var(--ink-2); } #page-tools .t-sub.is-active{ color:var(--ink); border-bottom-color:var(--accent); } /* panes */ #page-tools .t-super-pane{ display:none; } #page-tools .t-super-pane.is-active{ display:block; } #page-tools .t-pane{ display:none; } #page-tools .t-pane.is-active{ display:block; } /* generic small card inside a pane */ #page-tools .t-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:16px; } #page-tools .t-card-h{ font-family:var(--disp); font-weight:800; font-size:14.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } /* form controls */ #page-tools .t-sel, #page-tools .t-in{ font-family:var(--body); font-size:13.5px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; width:100%; transition:border-color .15s; } #page-tools .t-sel:focus, #page-tools .t-in:focus{ outline:none; border-color:var(--accent); } #page-tools .t-ta{ font-family:var(--body); font-size:13px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px; width:100%; resize:vertical; line-height:1.5; transition:border-color .15s; } #page-tools .t-ta:focus{ outline:none; border-color:var(--accent); } #page-tools .t-fld{ display:flex; flex-direction:column; gap:5px; min-width:0; } #page-tools .t-fld>span{ font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); } #page-tools .t-chk{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); cursor:pointer; } #page-tools .t-color{ width:46px; height:30px; padding:0; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2); cursor:pointer; } #page-tools .t-link{ color:var(--accent-bright); font-weight:600; cursor:pointer; text-decoration:none; } #page-tools .t-link:hover{ text-decoration:underline; } #page-tools .t-btns{ display:flex; flex-wrap:wrap; gap:8px; } /* bespoke grids (own collapse below) */ #page-tools .t-grid5{ grid-template-columns:repeat(5,1fr); } #page-tools .t-grid4{ grid-template-columns:repeat(4,1fr); } #page-tools .t-grid-cat{ grid-template-columns:80px 1fr 80px 1.5fr auto; } /* file dropzone */ #page-tools .t-file{ display:block; cursor:pointer; } #page-tools .t-file input{ position:absolute; width:1px; height:1px; opacity:0; } #page-tools .t-file-face{ display:flex; align-items:center; gap:12px; border:1.5px dashed var(--line-bright); border-radius:var(--r); background:var(--panel-2); padding:14px 16px; transition:border-color .15s, background-color .15s; } #page-tools .t-file:hover .t-file-face{ border-color:var(--accent); background:color-mix(in oklab,var(--accent) 7%,var(--panel-2)); } #page-tools .t-file-ic{ font-size:24px; } #page-tools .t-file-txt{ font-size:13px; color:var(--ink-2); line-height:1.4; } #page-tools .t-file-txt small{ color:var(--dim); } /* status pills (Discord + system) */ #page-tools .t-pills{ display:flex; flex-wrap:wrap; gap:7px; } #page-tools .t-statuspill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:4px 10px; text-decoration:none; } #page-tools .t-statuspill.is-on{ color:var(--ink-2); border-color:color-mix(in oklab,var(--win) 40%,var(--line)); } #page-tools .t-pill-dot{ width:7px; height:7px; border-radius:50%; background:var(--mute); flex:0 0 auto; } #page-tools .t-pill-dot--on{ background:var(--win); box-shadow:0 0 0 3px color-mix(in oklab,var(--win) 22%,transparent); } /* role pills */ #page-tools .t-role{ font-family:var(--disp); font-weight:800; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:6px; } #page-tools .t-role-comm{ color:var(--gold); background:color-mix(in oklab,var(--gold) 16%,transparent); } #page-tools .t-role-admin{ color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 16%,transparent); } #page-tools .t-role-inspector{ color:var(--win); background:color-mix(in oklab,var(--win) 16%,transparent); } /* status + fine pills reused from app vocabulary */ #page-tools .status{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:6px; display:inline-block; } #page-tools .status-active, #page-tools .status-approved{ color:var(--win); background:color-mix(in oklab,var(--win) 15%,transparent); } #page-tools .status-pending{ color:var(--live); background:color-mix(in oklab,var(--live) 16%,transparent); } #page-tools .status-denied{ color:var(--loss); background:color-mix(in oklab,var(--loss) 15%,transparent); } #page-tools .fine-pill{ font-family:var(--disp); font-weight:800; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:6px; } #page-tools .fine-pill-scheduling{ color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 15%,transparent); } #page-tools .fine-pill-conduct{ color:var(--loss); background:color-mix(in oklab,var(--loss) 15%,transparent); } #page-tools .fine-pill-general{ color:var(--dim); background:var(--panel-2); } #page-tools .t-icon{ color:var(--live); font-size:13px; } #page-tools .wkpill{ font-family:var(--disp); font-weight:800; letter-spacing:.04em; font-size:11px; color:var(--dim); background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:2px 7px; } /* danger card */ #page-tools .t-danger{ border-color:color-mix(in oklab,var(--loss) 45%,var(--line)); background:color-mix(in oklab,var(--loss) 6%,var(--panel)); } #page-tools .t-conf-pair{ font-family:var(--disp); font-weight:800; letter-spacing:.04em; font-size:14px; color:var(--ink); margin:10px 0 8px; text-transform:uppercase; } #page-tools .t-conf-rows{ display:flex; flex-direction:column; gap:8px; } #page-tools .t-conf-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } #page-tools .t-conf-match{ font-size:13.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; } #page-tools .t-conf-match b{ color:var(--ink); } /* week filter bar */ #page-tools .t-weekbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; } #page-tools .t-weekbar-lbl{ font-family:var(--disp); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-right:4px; } #page-tools .t-wk{ font-family:var(--disp); font-weight:800; font-size:12px; letter-spacing:.03em; color:var(--dim); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 11px; cursor:pointer; transition:color .15s, border-color .15s, background-color .15s; } #page-tools .t-wk:hover{ color:var(--ink-2); border-color:var(--line-bright); } #page-tools .t-wk.is-active{ color:var(--ink); background:var(--accent); border-color:var(--accent); } /* games table tabular nums + matchup spacing */ #page-tools .tbl td.v, #page-tools .tbl td.c.v, #page-tools .tbl td.r.v{ font-variant-numeric:tabular-nums; } #page-tools .t-games-table .team-cell{ gap:6px; } #page-tools .aw-at{ color:var(--mute); font-weight:700; } /* inline edit / move rows */ #page-tools .t-inline{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin:2px 0; } /* details */ #page-tools .t-det summary{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--accent-bright); cursor:pointer; list-style:none; } #page-tools .t-det summary::-webkit-details-marker{ display:none; } #page-tools .t-det summary::before{ content:"▸ "; } #page-tools .t-det[open] summary::before{ content:"▾ "; } /* match row (bracket/conf) */ #page-tools .t-match{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:13.5px; color:var(--ink-2); } #page-tools .t-match b{ color:var(--ink); } /* complaint rows */ #page-tools .t-complaint{ display:block; position:relative; padding:11px 12px; border-radius:var(--r); cursor:pointer; text-decoration:none; transition:background-color .15s; } #page-tools .t-complaint + .t-complaint{ border-top:1px solid var(--line); } #page-tools .t-complaint:hover{ background:var(--hover-row); } #page-tools .t-complaint--pending{ box-shadow:inset 3px 0 0 var(--live); } #page-tools .t-cmp-h{ font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.04em; color:var(--dim); text-transform:uppercase; } #page-tools .t-cmp-t{ font-weight:600; font-size:14px; color:var(--ink); margin-top:2px; } #page-tools .t-cmp-m{ font-size:12.5px; color:var(--dim); margin-top:2px; } #page-tools .t-cmp-pill{ position:absolute; top:11px; right:12px; } #page-tools .t-detail{ max-width:480px; } /* ===== ADVANCE WEEK ===== */ #page-tools .t-advance{ border-color:color-mix(in oklab,var(--gold) 32%,var(--line)); } #page-tools .aw-steps{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:18px; } #page-tools .aw-step{ display:flex; align-items:center; gap:8px; } #page-tools .aw-num{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:13px; color:var(--dim); background:var(--panel-2); border:1px solid var(--line); flex:0 0 auto; } #page-tools .aw-lbl{ font-family:var(--disp); font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); } #page-tools .aw-step.is-active .aw-num{ color:#0A0E14; background:var(--gold); border-color:var(--gold); } #page-tools .aw-step.is-active .aw-lbl{ color:var(--ink); } #page-tools .aw-step.is-done .aw-num{ color:var(--win); background:color-mix(in oklab,var(--win) 18%,transparent); border-color:color-mix(in oklab,var(--win) 45%,transparent); } #page-tools .aw-step.is-done .aw-lbl{ color:var(--ink-2); } #page-tools .aw-conn{ flex:1; min-width:18px; height:2px; background:var(--line); } #page-tools .aw-weeks{ display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; } #page-tools .aw-week{ flex:1; min-width:160px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel-2); padding:16px 18px; } #page-tools .aw-week--next{ border-color:color-mix(in oklab,var(--gold) 45%,var(--line)); background:color-mix(in oklab,var(--gold) 8%,var(--panel-2)); } #page-tools .aw-week-k{ display:block; font-family:var(--disp); font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } #page-tools .aw-week-v{ display:block; font-family:var(--disp); font-weight:900; font-size:30px; line-height:1; color:var(--ink); margin-top:4px; } #page-tools .aw-week--next .aw-week-v{ color:var(--gold); } #page-tools .aw-arrow{ align-self:center; font-family:var(--disp); font-weight:900; font-size:28px; color:var(--gold); } #page-tools .aw-channel-tag{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); font-weight:600; margin-bottom:10px; } #page-tools .aw-channel-tag b{ color:var(--ink); } #page-tools .aw-preview{ border:1px solid var(--line-bright); border-radius:var(--r-lg); background:var(--panel-2); overflow:hidden; } #page-tools .aw-prev-h{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); } #page-tools .aw-prev-title{ font-family:var(--disp); font-weight:800; font-size:14px; color:var(--ink); } #page-tools .aw-prev-sub{ font-size:11.5px; color:var(--dim); } #page-tools .aw-prev-body{ padding:14px 16px; } #page-tools .aw-prev-headline{ font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.02em; color:var(--ink); } #page-tools .aw-prev-text{ font-size:13.5px; color:var(--ink-2); margin:8px 0 12px; line-height:1.5; } #page-tools .aw-prev-text b{ color:var(--accent-bright); } #page-tools .aw-sched{ display:flex; flex-direction:column; gap:7px; } #page-tools .aw-sched-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); padding:7px 10px; background:var(--panel); border-radius:var(--r-sm); } #page-tools .aw-sched-row b{ color:var(--ink); } /* advance preview ping line */ #page-tools .aw-prev-ping{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:8px 10px; border-radius:var(--r-sm); background:color-mix(in oklab,var(--accent) 9%,var(--panel)); border:1px solid color-mix(in oklab,var(--accent) 32%,var(--line)); } #page-tools .aw-ping-pill{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.02em; color:var(--accent-bright); background:color-mix(in oklab,var(--accent) 16%,transparent); border:1px solid color-mix(in oklab,var(--accent) 40%,transparent); border-radius:6px; padding:3px 9px; } #page-tools .aw-ping-note{ font-size:12px; color:var(--dim); } #page-tools .aw-ping-note b{ color:var(--ink-2); } /* mention tags table */ #page-tools .t-mentions th, #page-tools .t-mentions td{ vertical-align:middle; } #page-tools .t-mentions .t-sel{ width:100%; min-width:130px; } #page-tools .t-mentions .t-in{ width:100%; min-width:150px; } /* responsive */ @media (max-width:920px){ #page-tools .t-grid5, #page-tools .t-grid4{ grid-template-columns:1fr 1fr; } #page-tools .t-grid-cat{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ #page-tools .t-supers{ overflow-x:auto; flex-wrap:nowrap; } #page-tools .t-super{ flex:0 0 auto; } #page-tools .t-grid5, #page-tools .t-grid4, #page-tools .t-grid-cat{ grid-template-columns:1fr; } #page-tools .aw-conn{ display:none; } #page-tools .aw-arrow{ transform:rotate(90deg); } } /* ============================================================ DJANGO INTEGRATION — shared primitives the prototype omits. Tokenized to the Friday Night Broadcast system above. (flash messages · busy/navigation feedback · form controls) ============================================================ */ /* ---- flash / Django messages ---- */ .flash-wrap{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; } .flash{ display:flex; align-items:center; gap:10px; padding:12px 15px; border-radius:var(--r); font-size:14px; font-weight:500; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); } .flash::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--dim); flex:0 0 auto; } .flash.success,.flash.info{ color:var(--win); border-color:color-mix(in oklab,var(--win) 40%,var(--line)); background:color-mix(in oklab,var(--win) 12%,var(--panel-2)); } .flash.success::before,.flash.info::before{ background:var(--win); box-shadow:0 0 8px var(--win); } .flash.error,.flash.danger{ color:var(--loss); border-color:color-mix(in oklab,var(--loss) 40%,var(--line)); background:color-mix(in oklab,var(--loss) 12%,var(--panel-2)); } .flash.error::before,.flash.danger::before{ background:var(--loss); box-shadow:0 0 8px var(--loss); } .flash.warning{ color:var(--live); border-color:color-mix(in oklab,var(--live) 40%,var(--line)); background:color-mix(in oklab,var(--live) 12%,var(--panel-2)); } .flash.warning::before{ background:var(--live); box-shadow:0 0 8px var(--live); } /* ---- form controls ---- */ .field{ width:100%; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; font-family:var(--body); font-size:15px; line-height:1.35; -webkit-appearance:none; appearance:none; transition:border-color .18s var(--ease-out-quint), box-shadow .18s var(--ease-out-quint), background-color .18s; } textarea.field{ resize:vertical; min-height:64px; } select.field{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%238294B4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; padding-right:34px; } .field:hover{ border-color:var(--line-bright); } .field:focus,.field:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 26%, transparent); } .field::placeholder{ color:var(--mute); } .field:disabled{ opacity:.5; cursor:not-allowed; } input[type="checkbox"],input[type="radio"]{ accent-color:var(--accent); width:16px; height:16px; cursor:pointer; } /* labels + field layout */ .fld{ display:flex; flex-direction:column; gap:6px; min-width:0; } .fld > .lbl, label.lbl, .form-label{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); } .fld-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; } .fld-grid{ display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } .fld-hint{ font-size:12px; color:var(--dim); } .fld-error{ font-size:12.5px; color:var(--loss); font-weight:600; } /* button extensions on top of .btn (.primary/.me/.ghost/.sm already exist) */ .btn.full,.btn.block{ width:100%; justify-content:center; } .btn.lg{ height:46px; padding:0 22px; font-size:15px; } .btn.gold{ background:var(--gold); border-color:var(--gold); color:#1a1406; } .btn.danger{ background:var(--loss); border-color:var(--loss); color:#fff; } .btn.danger.ghost{ background:transparent; color:var(--loss); border-color:color-mix(in oklab,var(--loss) 45%,var(--line)); } .btn.danger.ghost:hover{ border-color:var(--loss); } .btn.win{ background:var(--win); border-color:var(--win); color:#04240f; } .btn:disabled,.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; } /* small icon button (row actions) */ .icon-btn{ width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-2); cursor:pointer; transition:border-color .18s, color .18s, background-color .18s; } .icon-btn:hover{ border-color:var(--line-bright); color:var(--ink); } .icon-btn.danger:hover{ border-color:var(--loss); color:var(--loss); } /* ---- busy / navigation feedback (drives static/js/click-feedback.js) ---- */ button.busy,input.busy{ pointer-events:none; opacity:.65; cursor:progress; position:relative; } button.busy::after{ content:""; display:inline-block; width:12px; height:12px; margin-left:8px; vertical-align:middle; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:btn-spin .6s linear infinite; } @keyframes btn-spin{ to{ transform:rotate(360deg); } } /* top-of-page progress bar while a link/POST is in flight */ body.is-navigating::before{ content:""; position:fixed; top:0; left:0; width:0; height:3px; z-index:99999; background:linear-gradient(90deg,var(--accent),var(--accent-bright)); box-shadow:0 0 8px var(--accent); animation:nav-progress 1.2s ease-out forwards, nav-pulse 1.5s 1.2s ease-in-out infinite; } @keyframes nav-progress{ from{ width:0; } to{ width:90%; } } @keyframes nav-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } } /* full-screen loading screen — a solid dark veil + glowing spinner + label, shown the instant a tap navigates. No backdrop-filter (iOS Safari renders a fixed + backdrop-filter overlay blank when it's toggled on — that was why the spinner showed on desktop but not on mobile) and no color-mix in the spinner, so it paints on every browser. */ .busy-overlay{ position:fixed; inset:0; z-index:99998; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:rgba(8,11,16,.84); opacity:0; visibility:hidden; -webkit-tap-highlight-color:transparent; } body.is-navigating .busy-overlay{ visibility:visible; opacity:1; } .busy-spinner{ width:56px; height:56px; border:4px solid rgba(255,255,255,.26); border-top-color:var(--accent-bright); border-radius:50%; box-shadow:0 0 22px rgba(30,111,255,.5); animation:busy-spin .7s linear infinite; will-change:transform; } .busy-label{ font-family:var(--disp); font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); } @keyframes busy-spin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .busy-spinner{ animation-duration:1.4s; } } /* ---- generic empty state ---- */ .empty-state{ text-align:center; padding:clamp(34px,7vw,72px) 20px; color:var(--dim); } .empty-state .es-icon{ font-size:34px; margin-bottom:10px; opacity:.7; } .empty-state h3{ font-family:var(--disp); font-weight:800; font-size:20px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px; } /* keep the rendered page visible even without the JS router (no [hidden] applied) */ #app .page{ display:block; } /* ---- header/drawer Django helpers ---- */ .desktop-logout{ display:flex; } .desktop-only-inline{ display:inline-flex; } @media(max-width:760px){ .desktop-logout{ display:none; } .desktop-only-inline{ display:none; } } .drawer-user{ display:flex; align-items:center; gap:11px; padding:4px 8px 16px; border-bottom:1px solid var(--line); margin-bottom:4px; } .drawer-user .ava{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; background:var(--me); color:#fff; font-family:var(--disp); font-weight:800; font-size:18px; } .drawer-user > div{ display:flex; flex-direction:column; line-height:1.25; min-width:0; } .drawer-user b{ font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:.02em; } .drawer-user span{ font-size:12px; color:var(--dim); } /* ============================================================ ROTATING SIDE BANNERS (nil/side_banners.py + _side_banner.html) Additive: rails only render when an active league has them on, and only show >= 1180px. The center column keeps the existing centered .page. ============================================================ */ #app.has-rails .app-center{ min-width:0; } .side-rail{ display:none; } @media (min-width:1180px){ #app.has-rails{ display:grid; grid-template-columns:200px minmax(0,1fr) 200px; gap:20px; align-items:start; max-width:1880px; margin:0 auto; } .side-rail{ display:block; } } @media (min-width:1400px){ #app.has-rails{ grid-template-columns:240px minmax(0,1fr) 240px; gap:24px; } } .side-banner{ position:sticky; top:88px; align-self:start; height:calc(100vh - 130px); min-height:560px; border-radius:14px; overflow:hidden; border:1px solid var(--line-2,var(--line)); background:#000; display:flex; flex-direction:column; justify-content:space-between; color:#fff; } .side-banner .sb-scrim{ position:absolute; inset:0; z-index:1; } .side-banner .sb-img{ width:100%; height:100%; object-fit:cover; } .side-banner .top-mark{ padding:14px 16px; background:linear-gradient(180deg,rgba(0,0,0,.6),transparent); position:relative; z-index:2; display:flex; align-items:center; gap:8px; } .side-banner .top-mark .ea{ font-family:var(--disp,sans-serif); font-size:11px; letter-spacing:.18em; color:#fff; font-weight:700; text-transform:uppercase; opacity:.8; } .side-banner .bottom-mark{ padding:18px 16px; background:linear-gradient(0deg,rgba(0,0,0,.85),transparent); position:relative; z-index:2; } .side-banner .bottom-mark .title{ font-family:var(--disp,sans-serif); font-size:21px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; line-height:1; color:#fff; margin-bottom:6px; } .side-banner .bottom-mark .sub{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.7); text-transform:uppercase; } /* Built-in CSS art variants (pure-CSS placeholders; real images override via .sb-img) */ .v-portrait .sb-scrim{ background: radial-gradient(ellipse 80% 40% at 50% 75%,rgba(0,0,0,.7),transparent 80%), radial-gradient(ellipse 60% 35% at 50% 35%,rgba(154,232,255,.18),transparent 60%), linear-gradient(180deg,#0a1a2e 0%,#13283f 30%,#1b2b3a 60%,#0a0e15 100%); } .v-action .sb-scrim{ background: linear-gradient(180deg,rgba(0,0,0,.5),transparent 30%,transparent 70%,rgba(0,0,0,.85)), repeating-linear-gradient(105deg,rgba(255,255,255,.04) 0 2px,transparent 2px 16px), linear-gradient(135deg,#1a2440 0%,#3b1a40 35%,#5a1f2e 65%,#1a0e10 100%); } .v-action .field-lines{ position:absolute; inset:0; z-index:1; opacity:.6; background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,255,255,.06) 30px 31px); } .v-action .ball{ position:absolute; top:42%; left:50%; transform:translate(-50%,-50%) rotate(-15deg); width:48px; height:32px; background:radial-gradient(ellipse,#6b3f1d,#3d2410); border-radius:50%; box-shadow:0 4px 24px rgba(0,0,0,.6),inset 0 -4px 8px rgba(0,0,0,.4); z-index:2; } .v-action .ball::before{ content:''; position:absolute; left:18px; right:18px; top:50%; height:2px; background:#fff; border-radius:2px; transform:translateY(-50%); } .v-stadium .sb-scrim{ background: radial-gradient(ellipse 100% 30% at 50% 70%,rgba(255,200,80,.18),transparent 70%), radial-gradient(ellipse 60% 40% at 50% 15%,rgba(84,224,255,.18),transparent 70%), linear-gradient(180deg,#0a0e1a 0%,#162236 35%,#1d2944 60%,#080a12 100%); } .v-stadium .lights{ position:absolute; top:0; left:0; right:0; height:30%; z-index:1; opacity:.85; background: radial-gradient(circle 4px at 15% 25%,#fff,transparent 60%), radial-gradient(circle 4px at 35% 18%,#fff,transparent 60%), radial-gradient(circle 5px at 55% 22%,#fff,transparent 60%), radial-gradient(circle 4px at 75% 30%,#fff,transparent 60%), radial-gradient(circle 3px at 90% 24%,#fff,transparent 60%); } .v-stadium .crowd{ position:absolute; bottom:18%; left:0; right:0; height:42%; z-index:1; opacity:.5; background: repeating-radial-gradient(circle 2px at 10% 20%,rgba(255,255,255,.18),transparent 3px), repeating-radial-gradient(circle 2px at 30% 50%,rgba(255,255,255,.15),transparent 3px), repeating-radial-gradient(circle 2px at 60% 30%,rgba(255,255,255,.18),transparent 3px), repeating-radial-gradient(circle 2px at 85% 60%,rgba(255,255,255,.14),transparent 3px); } .v-team .sb-scrim{ background: radial-gradient(ellipse 100% 50% at 50% 50%,rgba(0,0,0,.4),transparent 80%), linear-gradient(165deg,var(--team-1,var(--accent)) 0%, color-mix(in oklab,var(--team-1,var(--accent)),#000 40%) 60%,#000 100%); } .v-wall .sb-scrim{ background: radial-gradient(ellipse 80% 40% at 50% 50%,rgba(84,224,255,.12),transparent 70%), linear-gradient(170deg,#0a1a2e 0%,#16334f 30%,#3b1a40 55%,#5a1f2e 75%,#0c0a10 100%); } .v-wall .grain{ position:absolute; inset:0; z-index:1; background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px); } /* ============================================================ CFB27 DP CHIP (nil/_dp_chip.html — slice 2) ◆ Dynasty Points lead, compact dollars trail (dimmed). Full-precision dollars live in the title tooltip. ============================================================ */ .dp-chip{ display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; } .dp-chip .dp-dollars{ font-family:var(--mono,ui-monospace,"JetBrains Mono",monospace); font-weight:700; } .dp-chip .dp-points{ font-family:var(--mono,ui-monospace,"JetBrains Mono",monospace); font-size:.82em; opacity:.6; } .dp-chip .dp-glyph{ color:var(--ds-points,var(--accent)); font-size:.9em; line-height:1; }