/* =========================================================================== SAPPHIRESPORTZ — THE BROADCAST CONTROL ROOM --------------------------------------------------------------------------- One visual thesis, and every choice below answers to it: This is the instrument panel of a franchise league. Measured, precise, built to be READ. Data carries scoreboard authority. Sapphire light is a SIGNAL — live, yours, hot — never decoration. Franchise players read box scores, cap sheets and dev traits for fun. So the craft budget goes into legibility and hierarchy, not chrome: tabular numerals everywhere digits stack, one honest depth model, container guides that reveal structure, and motion only where it explains something. Depth is three levels and no more: ground the page itself surface panels and cards sit on it raised things that float above the page (chat, slip, dropdowns) On a near-black ground a big soft drop shadow does nothing — elevation is read from a top highlight, a hairline ring and a tight lift. That is the dark-UI translation of layered elevation, not a copy of the light-UI one. =========================================================================== */ :root { /* --- ground & surfaces --- */ --ground: #05080F; --ground-2: #070C18; --surface: rgba(10, 18, 38, 0.72); --surface-solid: #0B1222; --surface-hi: rgba(16, 28, 58, 0.85); --raised: rgba(8, 13, 28, 0.98); /* --- ink --- */ --ink: #E8EEFC; --ink-strong: #FFFFFF; --ink-muted: #93A0BE; --ink-dim: #5E6C8E; /* --- sapphire: the signal colour --- */ --sap: #2F6BFF; --sap-lift: #5B8BFF; --sap-soft: #8FB0FF; --sap-pale: #C3D4FF; /* The same four as channels, for the alphas (build 587). A league's look (app/look.py) overrides these with its own primary, so every hairline, tint and glow on the site follows the colour the league chose. */ --sap-rgb: 47, 107, 255; --lift-rgb: 91, 139, 255; --soft-rgb: 143, 176, 255; --line-rgb: 97, 138, 255; --glow-rgb: 30, 62, 140; --glow-a: 0.28; /* BUILD 597: the keys' own colours. These ARE the hand-tuned sapphire the button layer used to write as literals, so a default league is unchanged to the digit; app/look.py tokens() overrides them for a league that has changed its colours (derived from its primary and ground) and sets --on-sap to dark ink when the primary is too light for white text. */ --key-face-top: #5486FF; --key-face-bot: #2A62F0; --key-ring-rgb: 20, 50, 140; --sap-deep: #1B3FA8; --deep-rgb: 20, 45, 120; --hi-rgb: 120, 160, 255; --key-top-hi: #1C2C55; --key-bot-hi: #111C3A; --sap-night: #12224A; --on-sap: #FFFFFF; --ground-rgb: 5, 8, 15; --ground-top: #060A16; /* --- meaning colours (never used as "series 4") --- */ --gold: #FFD98A; /* money, markets, fantasy */ --gold-2:#C8A552; --good: #6BDB8F; --bad: #FF8E8E; --hot: #FF5A5A; /* live */ --pink: #FF8EC8; /* the social wire */ --violet:#B983FF; /* 2K, the court, the member guide */ --sport-2k:#FF9B4A; /* the 2K identity accent, formalized (build 200) — was 19 scattered #FF9B4A literals across 6 templates */ /* --- lines: one ladder, used consistently --- */ /* THE FEW THE TEMPLATES NEEDED AND THE SYSTEM DID NOT HAVE. Found while token-ising the instrument pages for the machined skin: 438 hard-coded colours across twelve templates, and all but these five already had a token waiting for them. The system was complete; nothing used it. */ --ink-soft: #C6D2EE; /* between --ink and --ink-muted */ --amber: #FFB86B; /* trading, the block, the desk */ --wash: rgba(15, 27, 62, 0.5);/* the header gradient on a page top */ --surface-deep: rgba(10, 18, 38, 0.9); --ground-0: rgba(5, 8, 15, 0); /* the transparent end of a gradient */ --line: rgba(var(--line-rgb), 0.14); --line-2: rgba(var(--line-rgb), 0.22); --line-3: rgba(var(--line-rgb), 0.34); --guide: rgba(var(--line-rgb), 0.10); --guide-mark: rgba(var(--line-rgb), 0.42); /* the sport identity accent — Madden's default is just the site's own blue; [data-sport="nba2k"] below overrides all four for the 2K side. */ --sport-accent: var(--sap); --sport-accent-2: var(--sap-lift); --sport-line: var(--line-2); --sport-line-3: var(--line-3); /* --- elevation, dark-UI style --- */ --lift-1: 0 1px 0 0 rgba(255,255,255,0.045) inset, 0 0 0 1px rgba(var(--line-rgb), 0.14), 0 2px 6px rgba(2,5,14,0.5); --lift-2: 0 1px 0 0 rgba(255,255,255,0.07) inset, 0 0 0 1px rgba(var(--line-rgb), 0.20), 0 10px 24px -8px rgba(2,5,14,0.75), 0 28px 60px -28px rgba(2,5,14,0.9); --lift-3: 0 1px 0 0 rgba(255,255,255,0.09) inset, 0 0 0 1px rgba(var(--line-rgb), 0.28), 0 18px 40px -12px rgba(2,5,14,0.8), 0 48px 90px -40px rgba(0,0,0,0.95); --glow-sap: 0 0 0 1px rgba(var(--sap-rgb), 0.55), 0 6px 22px -4px rgba(var(--sap-rgb), 0.35); --glow-gold: 0 0 0 1px rgba(255,217,138,0.6), 0 6px 20px -4px rgba(200,165,82,0.3); /* --- shape --- */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; /* --- layout --- */ --container: 1440px; --pad: clamp(14px, 4vw, 48px); /* --- motion: human easing, no bounce on serious UI --- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* --t-slow (420ms) lived here and had no users left after the two dead width transitions went. Two overlapping scales — fast/normal/slow and the semantic one below — is one scale too many, and the semantic one is the one that says WHY. */ --t-fast: 120ms; --t: 220ms; /* THE MOTION LADDER, named so a new rule picks a rung instead of a number. Four durations and two curves, and everything on the site uses one of them. The ceiling is deliberate: past ~500ms a UI stops feeling responsive and starts feeling like it is thinking. --t-press is separate and the shortest of all, because a control somebody hits fifty times a session must never look like lag. */ --t-press: 110ms; /* the depress under a finger */ --t-control: 180ms; /* a toggle, a tab, a hover state */ --t-panel: 260ms; /* a popover, a sheet, a dropdown */ --t-section: 520ms; /* a block of the page arriving */ /* --- type --- */ --f-body: 'Archivo', 'Segoe UI', system-ui, sans-serif; --f-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif; } /* =========================================================================== THE SPORT'S OWN COLOUR — build 200. --------------------------------------------------------------------------- data-sport has sat on since build 119 with nothing reading it. The 2K side of the site already had its own identity colour — orange, #FF9B4A — scattered as a literal across 19 places because every 2K-only template just hardcoded it. This turns that into two real tokens so the two games stay visually distinct on the shared chrome (the league crest ring, every section rule) without a parallel design system: Madden pages are simply the site's own sapphire blue, unmarked, because blue is already what SapphireSportz is; the 2K side gets the hardwood-orange accent it already used everywhere else. =========================================================================== */ [data-sport="nba2k"] { --sport-accent: var(--sport-2k); --sport-accent-2: #FFB37A; --sport-line: rgba(255, 155, 74, 0.22); --sport-line-3: rgba(255, 155, 74, 0.34); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--f-body); background: var(--ground); color: var(--ink); /* A single cool wash from the top-left, so the page has a light source and panels have something to sit against. Fixed so it never scroll-jitters. */ background-image: radial-gradient(120% 80% at 8% -8%, rgba(var(--glow-rgb), var(--glow-a)) 0%, rgba(var(--glow-rgb), 0) 58%), radial-gradient(90% 60% at 100% 0%, rgba(var(--sap-rgb), 0.10) 0%, rgba(var(--sap-rgb), 0) 55%); background-attachment: fixed; background-repeat: no-repeat; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--sap-soft); text-decoration: none; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--sap-pale); } .cond { font-family: var(--f-cond); } /* Every digit that stacks in a column lines up. On a stats site this is not a nicety — a scoreboard whose numbers wobble reads as amateur. */ .tbl, .tile .v, .scorecard .s, .rankn, .num, .stat-v, .wire-item b, input[type="number"], .odds-btn .ob-line, td, th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Highlighting a stat to paste into Discord is something people do here every day. Left at the browser default it is a flat blue slab that belongs to nobody; in the signal colour it belongs to this site. */ ::selection { background: rgba(var(--sap-rgb), 0.32); color: var(--ink-strong); } ::-moz-selection { background: rgba(var(--sap-rgb), 0.32); color: var(--ink-strong); } /* Keyboard users get a real, visible ring everywhere. */ :focus-visible { outline: 2px solid var(--sap-lift); outline-offset: 2px; border-radius: 3px; } /* =========================================================================== CONTAINER GUIDES Two hairlines at the exact edges of the content container, with small marks where major sections meet them. They reveal the page's structure and give the whole thing a measured, instrument-panel feel. Behind everything, never clickable. Off on phones, where there is no room to spare. =========================================================================== */ body::before, body::after { content: ""; position: fixed; top: 0; bottom: 0; width: 1px; background: var(--guide); pointer-events: none; z-index: 0; } /* WHERE EXACTLY. Two things were wrong with the first version and both are the kind you only see once you measure: on a 1920 monitor the guides sat 240px from each edge while the content started at 281, so the lines ran 41px outside every panel and read as stray rules rather than as the edge of anything. 1. They marked the container's BORDER box. .wrap is 1440 wide with 48px of its own padding, so the content edge — which is what a person sees, and the only edge worth drawing — is 48px further in. + var(--pad). 2. 100vw INCLUDES THE SCROLLBAR. A percentage on a fixed element resolves against the viewport WITHOUT it, which is the same box .wrap centres itself in, so 100% and .wrap now agree by construction rather than by being off by fifteen pixels on every desktop with a visible scrollbar. max(0px, …) rather than max(var(--pad), …): below the container width the centring term goes negative, and the padding is added once at the end. */ body::before { left: calc(max(0px, (100% - var(--container)) / 2) + var(--pad)); } body::after { right: calc(max(0px, (100% - var(--container)) / 2) + var(--pad)); } @media (max-width: 900px) { body::before, body::after { display: none; } } /* Section corner marks — opt in with class="marked" on a panel or section. */ .marked { position: relative; } .marked::before, .marked::after { content: ""; position: absolute; width: 5px; height: 5px; background: var(--guide-mark); pointer-events: none; } .marked::before { top: -1px; left: -1px; } .marked::after { top: -1px; right: -1px; } /* ---------------------------------------------------------------- masthead */ .masthead { display: flex; align-items: stretch; gap: 24px; padding: 0 var(--pad); background: rgba(6, 10, 20, 0.86); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } /* =========================================================================== THE EDGE UNDER THE HEADER — a graded blur, not a hard cut --------------------------------------------------------------------------- The masthead is translucent, so content slid under it and stopped dead at a 1px line. That line is the tell: it says "two rectangles", where an app says "one surface with depth". The fix is the oldest trick in iOS — the blur does not switch on, it RAMPS: four strips stacked under the bar, each blurring harder and masked to its own band, so a row of numbers scrolling up softens through four stages before it reaches the edge. FOUR STEPS, NOT EIGHT. The canonical recipe uses eight stacked backdrop-filters. Eight composited blur layers pinned to the viewport is a real cost on the mid-range Androids half this league is holding, and past four the ramp is indistinguishable. Four buys the effect at half the price. It is `fixed` and `pointer-events: none`, and it sits BELOW the masthead's z-index and ABOVE the page, so it blurs the page and never the bar, and nothing in it can ever swallow a tap. =========================================================================== */ .edge-blur { /* IT HAS TO SIT BELOW THE STICKY STACK, and the stack is not a number I can write here. The masthead is one height on a desktop, another on a phone, and a third when the wordmark wraps; on a phone the scroller sits under it as a second bar. Pinned at top:0 the strip is simply BEHIND the masthead, which is exactly where the first version of this put it — invisible, and the softening I thought I was looking at was the bar's own flat blur. --stack-h is measured once on load and on resize, never per frame. */ position: fixed; inset: var(--stack-h, 64px) 0 auto 0; height: 42px; z-index: 54; pointer-events: none; } .edge-blur > i { position: absolute; inset: 0; display: block; } .edge-blur > i:nth-child(1) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%, #000 55%, transparent 80%); mask-image: linear-gradient(to top, transparent 0%, #000 30%, #000 55%, transparent 80%); } .edge-blur > i:nth-child(2) { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to top, transparent 25%, #000 55%, #000 75%, transparent 92%); mask-image: linear-gradient(to top, transparent 25%, #000 55%, #000 75%, transparent 92%); } .edge-blur > i:nth-child(3) { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(to top, transparent 50%, #000 78%, #000 100%); mask-image: linear-gradient(to top, transparent 50%, #000 78%, #000 100%); } .edge-blur > i:nth-child(4) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to top, transparent 72%, #000 100%); mask-image: linear-gradient(to top, transparent 72%, #000 100%); } /* The strip only exists to soften what passes UNDER the bar. At the top of the page there is nothing under it, so it fades out — otherwise the first 34px of every page is blurred for no reason. `.scrolled` is set once, by one passive listener, and never measures layout. */ .edge-blur { opacity: 0; transition: opacity var(--t-control) linear; } html.scrolled .edge-blur { opacity: 1; } /* On a phone the header stack is masthead + scroller, so the strip sits under both rather than in the middle of them. */ @media (max-width: 900px) { .edge-blur { height: 32px; } } /* backdrop-filter on a strip pinned to the viewport is the one thing here that costs battery. Somebody who has asked for less motion is usually asking for less of everything, so this goes with it. */ @media (prefers-reduced-motion: reduce) { .edge-blur { display: none; } } html[data-motion="off"] .edge-blur { display: none; } /* THE HEADER EARNS ITS LINE. At the very top of a page there is nothing above the content, so a border under the bar is drawing a division that isn't there. It appears once you are actually scrolled past something — the cue every native title bar gives and this one didn't. */ .masthead { transition: background var(--t-control) linear, border-color var(--t-control) linear; } html:not(.scrolled) .masthead { border-bottom-color: transparent; } html.scrolled .masthead { background: rgba(6, 10, 20, 0.94); } .brand { display: flex; align-items: center; gap: 11px; padding: 12px 0; } .brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(var(--sap-rgb), 0.45)); transition: filter var(--t) var(--ease); } .brand:hover img { filter: drop-shadow(0 0 20px rgba(var(--lift-rgb), 0.7)); } /* A league's own crest, beside the site's (build 119). Bounded and clipped: the file is a 512px square PNG the server wrote, but the box is what keeps a page's layout the same whatever is in it. */ .league-crest { display: flex; align-items: center; padding: 8px 0 8px 4px; flex: 0 0 auto; /* the sport's own accent (build 200) — a Madden league gets the site's usual blue border here; a 2K league gets the hardwood-orange one */ border-left: 1px solid var(--sport-line-3, var(--line)); margin-left: 2px; padding-left: 12px; } .league-crest img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.04); } @media (max-width: 720px) { .league-crest img { width: 28px; height: 28px; } } .wordmark { font-family: var(--f-cond); font-weight: 700; font-size: 20px; letter-spacing: 0.24em; color: var(--ink-strong); white-space: nowrap; } .wordmark b { color: var(--sap-lift); font-weight: 700; } .nav { display: flex; align-items: stretch; flex-grow: 1; } .navlink { position: relative; } .navlink > a { display: flex; align-items: center; gap: 6px; padding: 22px 12px; color: #C7D2EA; font-weight: 600; font-size: 13px; letter-spacing: 0.12em; position: relative; /* A two-word tab ("THE BOOK", "MY TEAM") must never fold onto two lines and push the whole masthead taller — nine tabs is the most this bar carries. */ white-space: nowrap; } /* The active rule grows from the centre instead of blinking on — the one place a nav needs to feel mechanical rather than instant. */ .navlink > a::after { /* Grows from the centre — the one place a nav should feel mechanical rather than instant. It used to do that by animating LEFT and RIGHT, which is two layout properties on the most-hovered element on the site. scaleX from a centre origin is the identical movement, on the compositor, and cannot make the header re-lay-out under a hover. */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sap); transform: scaleX(0); transform-origin: 50% 50%; transition: transform var(--t) var(--ease); } .navlink:hover > a, .navlink.active > a { color: var(--ink-strong); } .navlink:hover > a::after, .navlink.active > a::after { transform: scaleX(1); } .dd { display: none; position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--surface-solid); z-index: 90; border: 1px solid var(--line-2); border-top: 2px solid var(--sap); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--lift-3); padding: 8px 0; animation: dd-in var(--t) var(--ease-out); /* A MENU MUST NEVER BE TALLER THAN THE SCREEN. A dropdown closes when the pointer leaves it, so a link below the fold is a link nobody can reach — which is exactly what a 24-item ADMIN menu was on a laptop. Cap it at the viewport and let it scroll; the columns below keep it from needing to. */ max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain; } @keyframes dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* A MENU MUST NEVER RUN OFF THE SCREEN either — navmenu.js measures the open menu against the viewport and sets --dd-shift when a wide, multi-column menu (LEAGUE's five columns) opens under a tab with less room to its right than the menu needs. left, not transform: the entrance animation above already owns transform, and a static transform here would be overwritten the instant that animation finishes. */ .dd.dd-shifted { left: var(--dd-shift, 0); } .navlink:hover .dd { display: block; } /* SIDE-BY-SIDE GROUPS. A section flagged `cols` lays its groups out as columns, so a menu is as tall as its LONGEST group rather than the sum of all of them. Each column keeps its own label at the top. */ .dd.cols { padding: 8px 6px; } .navlink:hover .dd.cols { display: flex; align-items: flex-start; gap: 2px; } /* BUILD 431: PLAY carries five groups. On a 1280 laptop five columns are wider than the glass, and no amount of sliding left (navmenu.js) can fit a menu wider than the window. So the columns wrap: the menu is capped at the viewport and a fifth column drops under the first, still in reach. */ .dd.cols { width: max-content; max-width: calc(100vw - 24px); flex-wrap: wrap; row-gap: 6px; } .dd.cols .ddg { min-width: 215px; max-width: 290px; } .dd.cols .ddg + .ddg { border-left: 1px solid var(--line-2); } .dd.cols .ddg .lbl { white-space: nowrap; } .dd a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 290px; } .dd a { display: block; padding: 10px 18px; color: #AAB8D8; font-size: 13px; font-weight: 500; border-left: 2px solid transparent; /* padding-left used to be in here, and it fired on every hover of every row of every dropdown — a layout property, animated, on the most-used interaction in the header. transform does the same 4px nudge on the compositor and cannot reflow the menu around it. */ transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .dd a:hover { background: rgba(var(--sap-rgb), 0.12); color: var(--ink-strong); border-left-color: var(--sap); transform: translateX(4px); } .dd .lbl { padding: 10px 18px 4px; font-size: 10px; letter-spacing: 0.22em; color: var(--ink-dim); font-weight: 700; } .mast-cta { display: flex; align-items: center; gap: 14px; } /* ----------------------------------------------------------- shared pieces */ .btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--sap), var(--sap-deep)); padding: 13px 24px; border-radius: var(--r-sm); box-shadow: 0 8px 22px -6px rgba(var(--sap-rgb), 0.55), 0 0 0 1px rgba(var(--hi-rgb), 0.28) inset; color: var(--on-sap) !important; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; font-family: inherit; transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), filter var(--t-fast) var(--ease); } .btn:hover { filter: brightness(1.08); box-shadow: 0 12px 30px -6px rgba(var(--sap-rgb), 0.65), 0 0 0 1px rgba(var(--hi-rgb), 0.4) inset; } .btn:active { transform: translateY(1px); } .btn.ghost { background: none; border: 1px solid var(--line-3); box-shadow: none; color: var(--sap-pale) !important; } .btn.ghost:hover { background: rgba(var(--sap-rgb), 0.1); border-color: var(--sap); filter: none; } /* The panel. A gradient edge and an inner top highlight give it a real light source; both stay under 0.4 opacity so it reads as material, not shine. */ .panel { position: relative; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(150deg, rgba(255,255,255,0.16), rgba(var(--sap-rgb), 0.22) 46%, rgba(255,255,255,0.04)) border-box; border: 1px solid transparent; border-radius: var(--r-lg); box-shadow: var(--lift-1); transition: box-shadow var(--t) var(--ease); } .panel-hd { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); font-family: var(--f-cond); font-weight: 800; font-style: italic; font-size: 17px; letter-spacing: 0.06em; color: var(--ink-strong); text-transform: uppercase; } .kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--sap-pale); text-transform: uppercase; } .dim { color: var(--ink-dim); } .muted { color: var(--ink-muted); } .h-italic { font-family: var(--f-cond); font-style: italic; font-weight: 800; text-transform: uppercase; color: var(--ink-strong); letter-spacing: -0.005em; line-height: 1.02; } .grad-text { background: linear-gradient(100deg, var(--sap-lift) 0%, var(--sap) 55%, var(--sap-bright, #7FA5FF) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 13px; font-size: 12px; color: var(--ink-muted); background: rgba(10, 18, 38, 0.5); transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } a.chip:hover, button.chip:hover { border-color: var(--line-3); color: var(--ink); } .chip.on, .chip[aria-pressed="true"] { border-color: rgba(var(--sap-rgb), 0.7); color: var(--ink-strong); background: rgba(var(--sap-rgb), 0.18); } .dev-badge-icon { width: 14px; height: 14px; display: block; flex-shrink: 0; } .tile { background: var(--surface-hi); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px 16px; box-shadow: 0 1px 0 0 rgba(255,255,255,0.04) inset; } /* The number IS the content on a stat tile — give it broadcast weight. */ .tile .v { font-family: var(--f-cond); font-weight: 800; font-style: italic; font-size: 32px; line-height: 0.98; color: var(--ink-strong); letter-spacing: -0.01em; } .tile .l { font-size: 10.5px; letter-spacing: 0.16em; font-weight: 700; color: var(--ink-dim); text-transform: uppercase; margin-top: 4px; } .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; } /* ------------------------------------------------------------------ tables */ .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: left; padding: 9px 10px; font-size: 10.5px; letter-spacing: 0.16em; color: var(--ink-dim); border-bottom: 1px solid var(--line-2); font-weight: 700; text-transform: uppercase; white-space: nowrap; } .tbl td { padding: 11px 10px; border-bottom: 1px solid rgba(var(--line-rgb), 0.07); color: #C7D2EA; } .tbl .num { text-align: right; } .tbl tbody tr, .tbl tr { transition: background var(--t-fast) linear; } .tbl tr:hover td { background: rgba(var(--sap-rgb), 0.07); color: var(--ink); } .tbl tr:last-child td { border-bottom: none; } /* Rank numerals read as architecture — quiet, mono-ish, never louder than the name beside them. */ .rankn { font-family: var(--f-cond); font-style: italic; font-weight: 800; font-size: 16px; color: #8FA6D8; letter-spacing: 0.02em; } .win { color: var(--good); font-weight: 700; } .loss { color: var(--bad); font-weight: 700; } .bar-track { flex-grow: 1; height: 8px; border-radius: 4px; background: rgba(var(--line-rgb), 0.12); overflow: hidden; } /* NO TRANSITION. The width here is rendered once by the server and never changes again — nothing in any template or script writes to it — so the transition could not fire, and the one thing it could do was name a layout property in a stylesheet that promises not to animate layout. Deleted rather than converted to a transform: a bar that never moves does not need a technique for moving cheaply. */ .bar-fill { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--sap), var(--sap-lift)); } .footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 26px var(--pad); border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; position: relative; z-index: 1; } .footer a { color: #6B7A9C; margin-left: 24px; } .scorecard { display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .scorecard .row { display: flex; justify-content: space-between; align-items: center; } .scorecard .s { font-family: var(--f-cond); font-weight: 800; font-size: 18px; color: var(--ink-strong); letter-spacing: 0.01em; } .avatar { border-radius: 50%; background: linear-gradient(135deg, var(--sap), var(--sap-night)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-cond); font-weight: 700; color: #FFF; box-shadow: 0 0 0 1px rgba(var(--line-rgb), 0.35); } /* -------------------------------------------------------------- mobile nav */ .mobile-nav { display: none; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 10px; background: rgba(8, 13, 26, 0.95); border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 55; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); justify-content: safe center; } html { scroll-padding-top: 84px; } [id] { scroll-margin-top: 84px; } @media (max-width: 900px) { html { scroll-padding-top: 120px; } [id] { scroll-margin-top: 120px; } } .mobile-nav::-webkit-scrollbar { display: none; } .mobile-nav a { flex-shrink: 0; padding: 12px 11px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: #AAB8D8; white-space: nowrap; border-bottom: 2px solid transparent; } .mobile-nav a.on { color: var(--ink-strong); border-bottom-color: var(--sap); } /* ------------------------------------------------- the phone's full menu */ /* MENU sits first in the scroller and is styled as a control, not a link, so a thumb reads it as "there is more here" rather than as another destination that happens to be at the start of a list. */ .mn-more { flex-shrink: 0; padding: 12px 12px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: #FFF; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; } .mn-more[aria-expanded="true"] { border-bottom-color: var(--sap); } /* `hidden` MUST WIN HERE. The attribute's default is display:none from the UA stylesheet, and a class rule setting display:flex beats it on specificity — so the first version of this sheet rendered OPEN, full screen, over every page on every phone, swallowing taps meant for the page underneath. It was caught by driving a real browser, not by reading the CSS. */ .mn-sheet[hidden] { display: none !important; } /* THE FINDER (build 83) — same trap, same fix. The layout lives on the class so that `hidden` actually hides it; the inline display:flex the first version carried beat the hidden attribute and the overlay sat over every page from load. */ .finder { position: fixed; inset: 0; z-index: 9000; background: rgba(3,6,14,0.72); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 14px 0; } .finder[hidden] { display: none !important; } /* The hint row tells the truth about the device: keyboard words on a keyboard, "tap ✕" where there is no Escape key to press. */ .finder-touch { display: none; } @media (hover: none), (max-width: 720px) { .finder-kb { display: none; } .finder-touch { display: inline; } .finder { padding-top: 6vh; } } .mn-sheet { position: fixed; inset: 0; z-index: 1400; background: rgba(3, 6, 14, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; } .mn-panel { animation: mn-in var(--t-control) var(--ease-out); width: 100%; max-width: 560px; max-height: 100dvh; display: flex; flex-direction: column; background: #070C18; border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 14px 14px; } .mn-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: #070C18; z-index: 1; } .mn-head .kicker { flex-grow: 1; } .mn-close { background: none; border: 0; color: #AAB8D8; font-size: 20px; line-height: 1; padding: 6px 10px; cursor: pointer; font: inherit; } /* The body scrolls, the head does not. -webkit-overflow-scrolling keeps the momentum flick on older iOS, where without it a long menu feels stuck. */ /* flex:none on both fixed rows. Without it the flex column hands all the height to .mn-body and squashes these two, which clipped the jump chips to half a line of text. */ .mn-head, .mn-jump { flex: none; } .mn-jump { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; border-bottom: 1px solid rgba(var(--line-rgb), 0.1); background: #070C18; } .mn-jump::-webkit-scrollbar { display: none; } .mn-jump a { flex-shrink: 0; padding: 8px 11px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: #AAB8D8; white-space: nowrap; border: 1px solid var(--line-2); border-radius: 999px; } .mn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 24px; scroll-padding-top: 8px; } .mn-sec { scroll-margin-top: 8px; } .mn-sec { padding: 6px 0 10px; border-bottom: 1px solid rgba(var(--line-rgb), 0.08); } .mn-sec:last-child { border-bottom: 0; } .mn-sec-t { display: block; padding: 10px 16px 6px; font-family: var(--f-cond); font-size: 15px; font-weight: 800; letter-spacing: 0.1em; color: #FFF; } .mn-lbl { padding: 8px 16px 2px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; color: #6B7BA0; } /* 44px of thumb, which is the whole reason this is a sheet and not a longer scroller of 12px chips. */ .mn-i { display: block; padding: 12px 16px; font-size: 14px; font-weight: 600; color: #C3D0E8; min-height: 44px; box-sizing: border-box; } .mn-i:active { background: rgba(var(--sap-rgb), 0.14); } /* MENU BELONGS WHEREVER THE DROPDOWNS DO NOT. This used to read 901px, on the reasoning that a desktop already has the dropdowns and MENU would be a second way to say the same thing. True — but the handover to the scrolling bar moved to 1000 (see THE MASTHEAD MUST FIT THE SCREEN below), and for the fifty minutes this was wrong, 901-1250px had no dropdowns AND no MENU: the only route to Admin, Settings and half the site was gone on exactly the laptop widths most people use. The two numbers are the same decision and have to be the same number. */ @media (min-width: 1001px) { .mn-more, .mn-sheet { display: none !important; } } .mobile-nav a:hover { color: var(--ink-strong); } /* The account menu is the one dropdown that must work on a phone: it is the only route to Team Center, Settings and Sign out. Tap toggles .open; hover still opens it where there is a pointer. */ .usermenu.open .usermenu-dd { display: block; } /* A z-index on the dropdown alone CANNOT do this. `.masthead` is position:sticky with a z-index, which makes it a stacking context — every child is sealed inside it and can never rise above one of the masthead's own siblings, however large a number you write. The tour prompt and the chat bubble are exactly those siblings, at 999 and 900. So the MASTHEAD is what lifts, and only while the menu is open. */ .usermenu-dd { z-index: 1200; } .masthead.menu-open { z-index: 1300; } .umtrig { color: inherit; } .usermenu.open .umtrig, .usermenu:hover .umtrig { color: var(--ink-strong); } @media (max-width: 900px) { /* Everything EXCEPT the account menu — see above. It used to be caught by this blanket rule, which is why tapping your own avatar did nothing. */ .nav, .dd:not(.usermenu-dd) { display: none !important; } .usermenu-dd { display: none; } .usermenu.open .usermenu-dd { display: block !important; } /* Bigger targets and a wider sheet — this is a thumb, not a mouse. */ .usermenu-dd { min-width: 230px; max-width: calc(100vw - 24px); } .usermenu-dd a { padding: 14px 18px; font-size: 14px; } .u-name { display: none; } .mobile-nav { display: flex; } .masthead { gap: 12px; padding: 0 14px; } .mast-cta .btn { padding: 9px 14px; font-size: 12px; } .wordmark { font-size: 16px; letter-spacing: 0.16em; } .brand img { width: 32px; height: 32px; } .mobile-nav { top: 64px; justify-content: flex-start; } .wrap { padding-left: 14px; padding-right: 14px; } .panel { border-radius: var(--r); } .tbl { font-size: 12px; } .tbl th { padding: 7px 6px; font-size: 9.5px; letter-spacing: 0.1em; } .tbl td { padding: 9px 6px; } .tile .v { font-size: 26px; } .h-italic { letter-spacing: 0.01em; } .footer { padding: 20px 16px; font-size: 11px; } .footer a { margin-left: 14px; } } /* Horizontal scroller utility — score rails, results strips, chip rows. */ .hscroll { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px; scroll-snap-type: x proximity; } .hscroll::-webkit-scrollbar { display: none; } .hscroll > * { scroll-snap-align: start; } @media (max-width: 900px) { .grid-to-rail { display: flex !important; grid-template-columns: none !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; } .grid-to-rail::-webkit-scrollbar { display: none; } .grid-to-rail > * { flex: 0 0 210px; scroll-snap-align: start; } } /* =========================================================================== THE BOOK — sportsbook markets Gold is money here and nowhere else, so a selected pick is unmistakable. =========================================================================== */ .odds-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; padding: 10px 8px; border-radius: var(--r); cursor: pointer; font-family: inherit; background: rgba(14, 24, 52, 0.85); border: 1px solid var(--line-3); color: var(--ink); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform 60ms var(--ease); } .odds-btn:hover { border-color: rgba(255,217,138,0.55); background: rgba(24,38,78,0.9); } .odds-btn:active { transform: scale(0.98); } .odds-btn .ob-side { font-size: 11px; font-weight: 700; color: #AEBBDD; letter-spacing: 0.03em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .odds-btn .ob-line { font-family: var(--f-cond); font-weight: 800; font-style: italic; font-size: 20px; color: var(--gold); line-height: 1; } .odds-btn.on { border-color: var(--gold); background: linear-gradient(160deg, rgba(74,58,16,0.55), rgba(30,40,74,0.9)); box-shadow: var(--glow-gold); } .odds-btn.on::after { content: '✓'; position: absolute; top: 4px; right: 7px; font-size: 10px; color: var(--gold); } .odds-btn.off { opacity: 0.45; } /* build 491: each side's own price, and a game being played live */ .odds-btn .ob-odds { font-size: 11px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; } .odds-btn .ob-live { font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; color: #FF6B6B; } .odds-btn.ob-livegame { border-color: rgba(255,90,90,0.45); } .odds-btn.won { border-color: rgba(107,219,143,0.7); box-shadow: inset 0 0 0 1px rgba(107,219,143,0.4); } .odds-btn.lost { opacity: 0.35; } /* Build 365: signed out. The line keeps its shape and its place -- it is what the reader was already reaching for -- and says what it wants. */ /* Build 365: the quick stakes on the bet slip. Nobody should have to type a number to place a bet. */ .ps-quick-btn { font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--sap-pale); background: rgba(var(--sap-rgb), 0.10); border: 1px solid var(--line-3); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .ps-quick-btn:hover { border-color: rgba(255,217,138,0.55); background: rgba(var(--sap-rgb), 0.20); } .ps-quick-btn:active { transform: scale(0.96); } a.odds-btn.odds-in { text-decoration: none; } a.odds-btn.odds-in::after { content: 'SIGN IN'; position: absolute; top: 3px; right: 6px; font-size: 8.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--sap-soft); } a.odds-btn.odds-in .ob-line { color: var(--sap-pale); } a.odds-btn.odds-in:hover { border-color: rgba(var(--line-rgb), 0.6); } .odds-btn[disabled] { cursor: default; } .odds-btn[disabled]:hover { border-color: var(--line-3); background: rgba(14,24,52,0.85); } .mkt-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; color: #7E8BAD; margin-bottom: 6px; text-transform: uppercase; } .game-card { padding: 0; overflow: hidden; } .game-hd { display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: linear-gradient(90deg, rgba(20,39,92,0.6), rgba(10,18,38,0.15)); border-bottom: 1px solid var(--line); } .game-hd img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); } .game-hd .gh-team { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; } .game-hd .gh-name { font-family: var(--f-cond); font-weight: 800; font-style: italic; font-size: 20px; color: var(--ink-strong); line-height: 1.05; } .game-hd .gh-rec { font-size: 10px; color: var(--ink-muted); } .split-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(18,34,74,0.7); } /* Same as .bar-fill: server-rendered once, so this transition never ran. */ .split-bar > * { } .pp-card { /* Top-aligned, not centred: cards now carry a last-five plot of varying height, and centring made a card with no history render as a name floating in the middle of an empty box. */ display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; background: rgba(10,18,38,0.55); border: 1px solid var(--line); border-radius: var(--r); transition: border-color var(--t-fast) var(--ease); } .pp-card:hover { border-color: var(--line-2); } .pp-card img.face { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: top; background: #14275C; border: 1px solid var(--line-3); flex-shrink: 0; } .slip-leg { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 12px; } .slip-x { background: none; border: none; color: var(--bad); cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1; font-family: inherit; } /* --------------------------------------------------------- team page tabs */ .tabbar { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-2); } .tabbar::-webkit-scrollbar { display: none; } .tabbtn { background: none; border: none; cursor: pointer; font-family: var(--f-cond); font-style: italic; font-weight: 800; font-size: 17px; letter-spacing: 0.06em; padding: 12px 16px; color: #7E8BAD; white-space: nowrap; border-bottom: 3px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t) var(--ease); } .tabbtn:hover { color: #C6D2EE; } .tabbtn.on { color: var(--ink-strong); border-bottom-color: var(--sap); } .team-tab[hidden] { display: none !important; } /* ------------------------------------------------------- walkthrough mode */ .gd-hi { position: relative !important; z-index: 1001 !important; box-shadow: 0 0 0 4px rgba(255,217,138,0.85), 0 0 34px rgba(255,217,138,0.35) !important; border-radius: var(--r); } /* =========================================================================== THE LIVE WIRE A seamless marquee with NO JavaScript: the track holds the item list twice and slides exactly -50%, so the loop point is invisible and there is no timer to drift, leak, or double up on a re-render. It stops for anyone who asks: hover, focus, reduced-motion, or the member's own Motion setting. =========================================================================== */ .wire { position: relative; display: flex; align-items: stretch; overflow: hidden; background: rgba(6, 10, 20, 0.95); border-bottom: 1px solid var(--line); } /* The edges fade instead of cutting, so items enter and leave the strip rather than popping at a hard boundary. */ .wire-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); } /* THE MARQUEE STARTS WHEN THE PAGE HAS SETTLED, AND ONLY WHILE IT IS ON SCREEN. It used to run from the first frame, forever. Two costs: Lighthouse never saw the page finish painting (Speed Index 19.8s on a page that was readable at 1.4s), and on a phone the compositor kept working on a strip the reader had scrolled past. `.wire-live` is added by a small script once the page has loaded and settled, and removed when the wire leaves the viewport or the tab goes to the background. Nothing changes visually except that the ticker begins a beat after the page does — which reads as intentional. */ .wire-track { display: flex; width: max-content; align-items: stretch; animation: wire-slide var(--wire-time, 60s) linear infinite; animation-play-state: paused; } .wire.wire-live .wire-track { animation-play-state: running; } .wire .pulse { animation-play-state: paused; } .wire.wire-live .pulse { animation-play-state: running; } .wire:hover .wire-track, .wire:focus-within .wire-track { animation-play-state: paused; } @keyframes wire-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } .wire-item { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-right: 1px solid rgba(var(--line-rgb), 0.1); font-size: 12px; white-space: nowrap; color: #C6D2EE; transition: background var(--t-fast) linear, color var(--t-fast) linear; } .wire-item:hover { background: rgba(var(--sap-rgb), 0.1); color: var(--ink-strong); } .wire-item b { color: var(--ink-strong); font-weight: 700; } .wire-item img { width: 16px; height: 16px; object-fit: contain; } .wire-tag { font-family: var(--f-cond); font-weight: 800; font-style: italic; font-size: 11px; letter-spacing: 0.1em; padding: 2px 7px; border-radius: 3px; } .wire-tag.final { color: var(--sap-soft); background: rgba(var(--line-rgb), 0.14); } .wire-tag.next { color: var(--gold); background: rgba(255,217,138,0.12); } .wire-tag.move { color: var(--good); background: rgba(107,219,143,0.12); } .wire-tag.post { color: var(--pink); background: rgba(255,142,200,0.12); } .wire-tag.block { color: #FFB86B; background: rgba(255,184,107,0.14); } /* The booth arguing. Its own colour because it is its own kind of thing — not a result, not a move, somebody's opinion about one. */ .wire-tag.take { color: #C9A7FF; background: rgba(185,131,255,0.14); } .wire-tag.leader { color: #C8A552; background: rgba(200,165,82,0.16); } .wire-lead { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: rgba(var(--sap-rgb), 0.16); border-right: 1px solid var(--line-2); font-family: var(--f-cond); font-weight: 800; font-style: italic; letter-spacing: 0.1em; font-size: 13px; color: var(--ink-strong); z-index: 2; } .wire-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 8px rgba(255,90,90,0.8); } @keyframes wire-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* =========================================================================== ONE PULSE, ONE MEANING, ONE OFF SWITCH --------------------------------------------------------------------------- Four separate elements used to declare `animation: wire-pulse ... infinite` for themselves. Four copies meant four places to remember the reduced-motion override and four chances to forget one — and one had been forgotten (the chat badge blinked forever even with motion turned off). Same choke-point rule as everywhere else in this codebase: one definition, one place to be right. The pulse now bottoms out at 0.35 instead of 0.25. A live marker that nearly disappears reads as a fault; one that dips and returns reads as a heartbeat. =========================================================================== */ .pulse { animation: wire-pulse 2s ease-in-out infinite; } .pulse-slow { animation-duration: 2.6s; } /* MOTION STOPS WHEN IT LEAVES THE SCREEN. Set by motion.js on anything that animates forever — the news ticker and the live markers. Paused rather than removed, so scrolling back finds it mid-beat instead of snapped to the start. */ .is-offscreen, .is-offscreen .wire-track { animation-play-state: paused !important; } html[data-motion="off"] .pulse, html[data-motion="off"] .wire-track { animation: none; } /* =========================================================================== ENTRANCE MOTION One primitive, used everywhere: fade + a short rise, with a small stagger so a group of panels reads in order instead of arriving as a slab. It only ever runs once per element, it never moves layout, and anything that hasn't been revealed yet is still fully in the document for search and screen readers. If JS never runs, `.reveal` elements simply show — the visible state is the default and the hidden state is opt-in via .is-armed. =========================================================================== */ .reveal { opacity: 1; } .reveal.is-armed { opacity: 0; transform: translate3d(0, 14px, 0); } .reveal.is-in { opacity: 1; transform: none; /* --t-section is the token that was DEFINED for this and never used. Three of the four motion durations at the top of this file were dead: the scale was documented and the rules below it picked their own numbers, which is the same as not having a scale. */ transition: opacity var(--t-section) var(--ease-out), transform var(--t-section) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } html[data-motion="off"] .wire-track { animation: none !important; } html[data-motion="off"] .wire-marquee { overflow-x: auto; } html[data-motion="off"] .wire-dot { animation: none; } html[data-motion="off"] .ssc-badge { animation: none !important; } html[data-motion="off"] .reveal, html[data-motion="off"] .reveal.is-armed { opacity: 1 !important; transform: none !important; } html[data-motion="off"] .dd { animation: none; } @media (prefers-reduced-motion: reduce) { .wire-track { animation: none !important; } .wire-marquee { overflow-x: auto; } .wire-dot { animation: none; } .reveal, .reveal.is-armed { opacity: 1 !important; transform: none !important; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --------------------------------------------------------- compact density */ html[data-density="compact"] .tbl th, html[data-density="compact"] .tbl td { padding-top: 5px; padding-bottom: 5px; font-size: 12.5px; } html[data-density="compact"] .panel { padding: 14px 16px; } html[data-density="compact"] .tile { padding: 10px 12px; } html[data-density="compact"] .tile .v { font-size: 26px; } /* =========================================================================== THE CHAT DOCK =========================================================================== */ #sschat { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; font-size: 13px; } #sschat.floating { right: 18px; bottom: 18px; } .ssc-bubble { display: flex; align-items: center; gap: 9px; cursor: pointer; background: linear-gradient(135deg, var(--sap), var(--sap-deep)); color: var(--on-sap); border: 0; border-radius: 999px; padding: 11px 18px; font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; box-shadow: 0 12px 30px -8px rgba(var(--deep-rgb), 0.8), 0 0 0 1px rgba(var(--hi-rgb), 0.3) inset; transition: transform var(--t) var(--ease), filter var(--t-fast) var(--ease); } .ssc-bubble:hover { filter: brightness(1.1); transform: translateY(-2px); } /* NO PULSE ON THIS ONE, DELIBERATELY. The unread badge sits in a fixed corner, which means it is on screen on every page for as long as the tab is open. A red badge carrying a number is already an unmissable signal; blinking it forever is the most nagging thing the interface could do, and it is the one piece of motion a reader cannot scroll away from. It arrives, it is red, it waits. */ .ssc-badge { background: var(--hot); color: #FFF; border-radius: 999px; min-width: 19px; padding: 1px 6px; font-size: 11px; font-weight: 800; text-align: center; box-shadow: 0 0 0 2px rgba(255,90,90,0.22); } .ssc-panel { display: none; width: min(360px, calc(100vw - 28px)); height: min(460px, 62vh); flex-direction: column; background: var(--raised); border: 1px solid var(--line-3); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #sschat.open .ssc-panel { display: flex; animation: dd-in var(--t) var(--ease-out); } #sschat.open .ssc-bubble { display: none; } #sschat.floating .ssc-panel { resize: both; } #sschat.floating .ssc-head { cursor: move; } /* BUILD 598: THE STRIP NEVER GIVES WAY. .ssc-panel is a flex column and the log is the one part that should grow and shrink; the header, the room strip and the composer are `flex: none`, and the log has `min-height: 0` (a flex child's automatic minimum is its content, which is what let a busy Locker Room squash the room tabs to nothing). Holds at the floating panel's smallest dragged size too. */ .ssc-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; flex: none; background: rgba(20,36,80,0.7); border-bottom: 1px solid var(--line-2); } .ssc-head b { font-family: var(--f-cond); font-size: 15px; letter-spacing: 0.14em; color: var(--ink-strong); font-weight: 700; } .ssc-talking { font-size: 11px; color: var(--good); } .ssc-close { margin-left: auto; color: var(--sap-soft); font-size: 20px; line-height: 1; background: none; border: 0; cursor: pointer; padding: 0 4px; font-family: inherit; } .ssc-close:hover { color: var(--ink-strong); } /* Build 312 — the room strip. Scrolls sideways rather than wrapping onto a second line, because the panel is short and a two-line tab strip eats the conversation it is there to organise. */ .ssc-rooms { display: flex; gap: 4px; padding: 7px 10px; overflow-x: auto; flex: none; background: rgba(14,26,58,0.6); border-bottom: 1px solid var(--line-3); scrollbar-width: none; } .ssc-rooms::-webkit-scrollbar { display: none; } .ssc-room { flex: none; background: none; border: 1px solid transparent; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 11.5px; color: var(--sap-soft); cursor: pointer; white-space: nowrap; position: relative; } .ssc-room:hover { color: var(--ink-strong); } .ssc-room.on { background: rgba(var(--lift-rgb), 0.2); border-color: rgba(var(--lift-rgb), 0.5); color: #FFF; font-weight: 700; } .ssc-room .nu { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--good); vertical-align: middle; } .ssc-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain; } .ssc-msg { background: rgba(14,24,50,0.7); border-radius: 9px; padding: 7px 10px; border-left: 2px solid var(--line-3); max-width: 100%; } .ssc-msg.mine { border-left-color: var(--sap); background: rgba(24,44,96,0.6); } .ssc-who { display: flex; align-items: baseline; gap: 7px; font-size: 10.5px; } .ssc-who b { color: #C6D2EE; font-size: 11.5px; } .ssc-who span { color: #6E7C9C; } .ssc-del { margin-left: auto; color: var(--bad); font-size: 14px; line-height: 1; text-decoration: none; } .ssc-body { font-size: 12.5px; color: var(--ink); margin-top: 3px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; } .ssc-gif { max-width: 100%; max-height: 170px; border-radius: 7px; margin-top: 5px; display: block; } .ssc-vid { max-width: 100%; max-height: 200px; border-radius: 7px; margin-top: 5px; display: block; background: var(--ground-2); } /* A clip that plays in the room. 16:9, sized to the panel, so a chat window dragged narrow does not letterbox the video into a stripe. */ .ssc-embed { position: relative; padding-top: 56.25%; margin-top: 5px; border-radius: 7px; overflow: hidden; background: #060A16; max-width: 100%; } .ssc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ssc-link { display: inline-block; margin-top: 4px; font-size: 11.5px; word-break: break-all; } .ssc-foot { border-top: 1px solid var(--line-2); padding: 9px 11px; flex: none; background: rgba(10,17,35,0.8); } /* BUILD 598: a player card in a message, drawn from his data now. */ .ssc-card { display: flex; gap: 10px; align-items: center; margin-top: 6px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-3); background: rgba(var(--sap-rgb), 0.08); color: var(--ink); text-decoration: none; max-width: 100%; } .ssc-card:hover { border-color: var(--sap-lift); } .ssc-card img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--ground-2); } .ssc-card .cd-main { min-width: 0; flex: 1 1 auto; } .ssc-card .cd-name { font-weight: 800; color: var(--ink-strong); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ssc-card .cd-sub { font-size: 11px; color: var(--ink-muted); } .ssc-card .cd-rt { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; } .ssc-card .cd-rt span { font-size: 10.5px; color: var(--sap-pale); background: rgba(var(--line-rgb), 0.12); border-radius: 5px; padding: 1px 5px; } .ssc-card .cd-ovr { font-family: var(--f-cond); font-weight: 800; font-size: 22px; color: var(--ink-strong); line-height: 1; text-align: center; flex: none; } .ssc-card .cd-ovr small { display: block; font-size: 9px; letter-spacing: 0.14em; color: var(--ink-dim); } .ssc-card.gone { color: var(--ink-dim); font-size: 12px; font-style: italic; background: none; } .ssc-attach { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--sap-pale); margin-bottom: 6px; } .ssc-attach button { background: none; border: 0; color: var(--ink-dim); cursor: pointer; font: inherit; font-size: 14px; line-height: 1; padding: 0 3px; } .ssc-pc button { display: flex; width: 100%; gap: 8px; align-items: baseline; text-align: left; } .ssc-pc button small { color: var(--ink-dim); margin-left: auto; } .ssc-row { display: flex; gap: 7px; } .ssc-input { flex: 1 1 auto; background: rgba(10,18,38,0.9); border: 1px solid var(--line-3); color: var(--ink); border-radius: var(--r-sm); padding: 8px 11px; font-size: 12.5px; font-family: inherit; min-width: 0; } .ssc-input:focus { outline: none; border-color: var(--sap); box-shadow: 0 0 0 3px rgba(var(--sap-rgb), 0.18); } .ssc-send { background: var(--sap); color: #FFF; border: 0; border-radius: var(--r-sm); padding: 8px 15px; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; transition: filter var(--t-fast) var(--ease); } .ssc-send:hover { filter: brightness(1.12); } .ssc-send:disabled { opacity: 0.5; cursor: default; } .ssc-note { font-size: 11px; color: var(--sap-soft); min-height: 14px; margin-top: 5px; } .ssc-hint { font-size: 10.5px; color: #6E7C9C; margin-top: 5px; } /* --- @mentions --------------------------------------------------------- Somebody saying your name is not the same event as the room being busy, so it doesn't wear the same colour. The blue @ is any member; the red one is you, and it's the only thing in the dock that turns red. */ .ssc-at { color: var(--sap-soft); font-weight: 700; } .ssc-at.me { color: #FFD9D9; background: rgba(255,90,90,0.18); font-weight: 800; border-radius: 4px; padding: 0 4px; } .ssc-msg.at-me { border-left-color: var(--hot); background: rgba(60,18,26,0.55); box-shadow: inset 0 0 0 1px rgba(255,90,90,0.18); } .ssc-badge.at { background: var(--hot); box-shadow: 0 0 0 3px rgba(255,90,90,0.22); } #sschat.called .ssc-bubble { box-shadow: 0 12px 30px -8px rgba(120, 20, 40, 0.8), 0 0 0 1px rgba(255,140,140,0.45) inset; } /* The autocomplete: a short list above the input, keyboard-first. */ .ssc-ac { display: flex; flex-direction: column; margin-bottom: 8px; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: rgba(8,14,32,0.98); overflow: hidden; box-shadow: var(--lift-2); } .ssc-ac button { background: none; border: 0; text-align: left; cursor: pointer; font-family: inherit; font-size: 12.5px; color: #C6D2EE; padding: 7px 11px; } .ssc-ac button.on, .ssc-ac button:hover { background: rgba(var(--sap-rgb), 0.22); color: var(--ink-strong); } @media (max-width: 620px) { #sschat { right: 12px; bottom: 68px; } .ssc-panel { height: min(420px, 58vh); } } @media print { #sschat, .wire { display: none; } } /* ------------------------------------------------------ reputation pills */ .rep-pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.04em; } .rep-pill.good { color: var(--good); background: rgba(107,219,143,0.14); } .rep-pill.bad { color: #FF9A9A; background: rgba(255,90,90,0.14); } .rep-pill.neutral { color: var(--sap-soft); background: rgba(var(--line-rgb), 0.14); } .rep-pill.expired { color: #6E7C9C; background: rgba(110,124,156,0.14); text-decoration: line-through; } /* =========================================================================== NEW PRIMITIVES — earned their place, each does a job nothing else did =========================================================================== */ /* A live marker. Used wherever something is genuinely happening now, so the pulse always means the same thing. */ .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 8px rgba(255,90,90,0.8); } /* .live-dot carries `pulse` in the markup now — see ONE PULSE above. This selector stays as a belt-and-braces off switch for any older template that still declares its own. */ html[data-motion="off"] .live-dot { animation: none; } /* Section rule with a label riding on it — replaces a bare heading floating above content, and shows where one block of the page ends and the next begins without wrapping everything in another card. */ .srule { display: flex; align-items: center; gap: 14px; margin: 26px 0 14px; } .srule::after { content: ""; flex: 1 1 auto; height: 1px; /* sport-tinted on a league page (build 200); the generic blue line-2 everywhere else, since --sport-line defaults to it */ background: linear-gradient(90deg, var(--sport-line, var(--line-2)), transparent); } .srule .t { font-family: var(--f-cond); font-weight: 800; font-style: italic; font-size: 19px; letter-spacing: 0.06em; color: var(--ink-strong); text-transform: uppercase; } .srule .n { font-family: var(--f-cond); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--ink-dim); } /* A big readout — the score, the balance, the level. Broadcast weight. */ .stat-v { font-family: var(--f-cond); font-weight: 800; font-style: italic; font-size: clamp(30px, 5vw, 46px); line-height: 0.94; color: var(--ink-strong); letter-spacing: -0.015em; } .stat-l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--ink-dim); text-transform: uppercase; } /* Panel that carries a signal colour on its leading edge. */ .panel.sig-gold { border-left: 2px solid var(--gold); } .panel.sig-good { border-left: 2px solid var(--good); } .panel.sig-live { border-left: 2px solid var(--hot); } .panel.sig-sap { border-left: 2px solid var(--sap); } /* Empty states should look intentional, not broken. */ .empty { padding: 26px 20px; text-align: center; color: var(--ink-muted); font-size: 13.5px; line-height: 1.6; } .empty b { display: block; color: #C6D2EE; font-size: 15px; margin-bottom: 5px; font-weight: 700; } /* =========================================================================== THE MASTHEAD MUST FIT THE SCREEN --------------------------------------------------------------------------- It did not. Measured on 8 September: a league page was 1703px wide at EVERY viewport — 423px of horizontal scroll on a 1280 laptop, 103px on a 1600 monitor, 209px on a phone — and the marketing pages overflowed by 16px on a phone. One cause, and it was not a page: the masthead is a flex row of three groups (brand · nav · chips) and every one of them had been told never to shrink. So each chip added to that bar since — Find, Players, the three-way odds switcher, Tour — was paid for by the PAGE, in scroll, on every screen. Nobody had done anything wrong; the bar had simply outgrown the room and had no way to say so. WHAT YIELDS, AND IN WHICH ORDER. This is the part worth writing down, because "make it responsive" without an order is just hiding things until it fits. Nothing here is lost — every control that leaves the bar is somewhere else on the same screen: 1. THE WORDS ON THE CHIPS go first. 🔎 Find, 👥 Players, 🧭 Tour and the odds switcher keep their icons and drop their labels. That is 180px for no function at all, and an icon with a title attribute is still a control somebody can find. 2. FIND AND PLAYERS leave the bar. Find is the `/` key and the first item in ☰ MENU; Players is a tab in the nav and a link in the menu. 3. THE TAB BAR TIGHTENS — less padding, less letter-spacing — before any tab is taken away, because a missing tab is a missing page. 4. THE WHOLE DESKTOP NAV hands over to the phone bar, which SCROLLS and therefore cannot overflow anything. It carries every tab, plus Tour, plus the odds switcher. The brand, the account menu and the sign-in button never yield. They are how somebody knows where they are and how they get in. =========================================================================== */ .masthead { min-width: 0; } /* flex-shrink: 0 was the bug. It is the line that turned "the header is a bit tight" into "every league page scrolls sideways". */ .mast-cta { min-width: 0; flex: 0 1 auto; } .nav { min-width: 0; } /* The chips' words, and the odds switcher's two dialects. Exactly one of .cw and .cn is ever on screen. */ .mast-cta .cn { display: none; } .mn-odds { display: none; } /* =========================================================================== HOW THE MASTHEAD GIVES WAY Marquis: "the window fits my 1440p monitor perfectly, but I notice on regular monitors that are 1080p ... the tabs up top being so jumbled that they can't even see the admin section. it gets jumbled up with following buttons (find, players, exchange, sportsbook, decimal)." Two separate faults, and the second is the one that actually hurt. THE BREAKPOINTS WERE SET FROM THE WRONG DESK. The first step down used to be 1600px. A 1920-wide monitor is a ~1905px viewport, which is ABOVE that, so a 1080p screen got the full-size bar with no compaction at all -- ten tabs, five chips and the account menu, laid out for a 2560px desk. Everything between 1600 and 2560 was a blind spot, and 1920 is the single most common monitor width there is. THE NAV OVERFLOWED INSTEAD OF YIELDING. Tabs are `white-space: nowrap` (a two-word tab must never fold and make the header taller) and `.nav` has `min-width: 0` with no overflow rule. So once the intrinsic width passed the container, the tabs did not shrink and did not clip -- they ran straight over `.mast-cta`. ADMIN is the LAST tab, so ADMIN is what lands under the chips. That is the jumble, and it is why the thing that disappears is always the one a commissioner needs. So the breakpoints below are raised, and a measuring guard (static/masthead.js) escalates past them when the guess is still wrong -- a long league name, a browser zoomed to 125%, a wider font. Guessed pixel widths cannot cover every desk on the platform; measurement can, and the two are wired so the CSS handles the common case before the script has even run and the script only ever tightens further, never loosens. THE ORDER THINGS GO IS DELIBERATE. Chip words, then the chips themselves, then tab padding, and only then the whole bar hands over to the scrolling mobile nav. Navigation outlives decoration at every step, and the handover is a bar that physically cannot overflow however much goes in it. =========================================================================== */ /* LEVEL 1 — the chips say less. BUILD 431: the bar went from twelve tabs to four doors (PLAY / SCOUT / MY STUFF / LEAGUE, plus staff), so every step below moved down; the script still tightens further wherever the guess is short. The handover number and the MENU number above are one decision. */ @media (max-width: 1500px) { .mast-cta .cw { display: none; } .mast-cta .cn { display: inline; } .mast-cta { gap: 10px; } } html.mast-1 .mast-cta .cw { display: none; } html.mast-1 .mast-cta .cn { display: inline; } html.mast-1 .mast-cta { gap: 10px; } /* LEVEL 2 — the optional chips leave. Find keeps its keyboard shortcut and lives in the mobile bar; Players is a tab away. Neither is navigation. */ @media (max-width: 1300px) { .mast-cta .mc-find, .mast-cta .mc-players, .mast-cta .mc-tour { display: none; } .masthead { gap: 16px; } } html.mast-2 .mast-cta .mc-find, html.mast-2 .mast-cta .mc-players, html.mast-2 .mast-cta .mc-tour { display: none; } html.mast-2 .masthead { gap: 16px; } /* LEVEL 3 — the tabs themselves tighten, which is the last thing that can be done without taking a tab away. */ @media (max-width: 1150px) { .navlink > a { padding-left: 8px; padding-right: 8px; letter-spacing: 0.05em; } .masthead { gap: 12px; } .wordmark { font-size: 17px; letter-spacing: 0.16em; } } html.mast-3 .navlink > a { padding-left: 8px; padding-right: 8px; letter-spacing: 0.05em; } html.mast-3 .masthead { gap: 12px; } html.mast-3 .wordmark { font-size: 17px; letter-spacing: 0.16em; } /* LEVEL 4 — the handover. Below this the tab bar is the scrolling one, which is the only version of a nav that cannot push the page sideways however much goes in it. Nothing is lost here: the mobile bar carries every tab, ADMIN included, and the menu sheet carries every item under them. */ @media (max-width: 1000px) { .nav, .dd:not(.usermenu-dd) { display: none !important; } .mobile-nav { display: flex; top: 64px; justify-content: flex-start; } .mn-odds { display: inline-flex; } .mast-cta .odds-pick:not(.mn-odds), .mast-cta .mc-tour { display: none; } html { scroll-padding-top: 120px; } [id] { scroll-margin-top: 120px; } } html.mast-4 .nav, html.mast-4 .dd:not(.usermenu-dd) { display: none !important; } html.mast-4 .mobile-nav { display: flex; top: 64px; justify-content: flex-start; } html.mast-4 .mn-odds { display: inline-flex; } html.mast-4 .mast-cta .odds-pick:not(.mn-odds), html.mast-4 .mast-cta .mc-tour { display: none; } html.mast-4 { scroll-padding-top: 120px; } html.mast-4 [id] { scroll-margin-top: 120px; } /* WHY THERE IS NO `overflow: hidden` BACKSTOP HERE, though it is the obvious thing to reach for. Both flex children of the masthead host absolutely-positioned dropdowns -- every tab menu inside `.nav`, the account menu inside `.mast-cta` -- and an ancestor with a clipping overflow clips those too, whatever the dropdown's own overflow says. Adding it would trade a jumbled bar for menus that open into a two-pixel slot, which is worse and much harder to notice in testing. The escalation above is the mechanism; it is allowed to be the only one. `overflow-x: clip` with `overflow-y: visible` is the one spelling that would not break the menus, and it is deliberately NOT used either: it is unsupported on older Safari, and a rule that silently does nothing on one browser is a backstop you believe in without having. The guard measures instead. */ /* The brand only yields when space is actually tight — on a wide screen the wordmark must never truncate, which it did when this was unconditional. */ .brand { flex-shrink: 0; } @media (max-width: 900px) { .brand { min-width: 0; flex-shrink: 1; } .wordmark { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 640px) { .mast-cta .u-name { display: none; } .mast-cta { gap: 8px; } .brand { gap: 8px; } } @media (max-width: 420px) { .wordmark { font-size: 14px; letter-spacing: 0.1em; } } /* --------------------------------------------------------------------------- Form controls never widen the page. A