/* --- the shell typeface, self-hosted -------------------------------------- Loaded from THIS origin, not fonts.googleapis.com. The two free schedule sites ship a strict Content-Security-Policy (default-src 'self'), and the browser refused the Google Fonts stylesheet outright -- "Loading the stylesheet ... violates the following Content Security Policy". Rewriting their CSP to allow a third party would trade real security for a typeface. Serving it from the router's own origin satisfies 'self', removes a third-party DNS + TLS round trip, and works identically on all 24 properties. Archivo is a VARIABLE font, so one 34KB file covers the whole 500-700 range the shell uses -- the three "weights" Google serves are the same bytes, verified by hash. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; /* variable range */ font-display: swap; /* paint immediately in the fallback */ src: url("/fonts/archivo.woff2") format("woff2"); } /* ============================================================================ * The Sports King — shell.css * The three-bar chrome: slate strip / global bar / sport nav. * * ONE copy. Served from the root project and loaded by every sport prefix. * This file exists specifically so the fleet never again grows 19 divergent * copies of its own navigation. If you find yourself copying it, stop. * * Token vocabulary is deliberately the SAME as the fleet's theme.css * (--bg, --panel, --border, --text, --muted, --accent) so a sport page and the * shell resolve against one palette rather than two. * ==========================================================================*/ #tsk-shell { --bg: #080a0e; --bg-2: #0d0f14; --panel: #14161d; --panel-2: #1b1e27; --border: #232733; --border-2: #313644; --text: #f4f5f8; --text-2: #cbcfd9; --muted: #9aa0ad; --muted-2: #8a919e; /* was #6f7682: 4.19:1 on the slate, 3.64:1 in search results */ --pos: #5fd2a0; --neg: #ff7d8c; --brand: #F5C542; --accent: var(--sport-optic, var(--brand)); --bar-h: 46px; --font-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } #tsk-shell, #tsk-shell *, #tsk-shell *::before, #tsk-shell *::after { box-sizing: border-box; } /* display:contents removes #tsk-shell from the box tree, so the sticky bars inside it resolve their containing block against the VIEWPORT instead of a 148px-tall wrapper. Without this the global bar could travel 44px and then scrolled away with the page -- measured top:-798 at scrollY:900, i.e. no navigation at all on any page once the reader scrolled. Custom properties still inherit through a display:contents element, so the token block above keeps working. */ /* display:contents removes the box, so the SPACE for the fixed global bar is reserved on instead (see html.tsk-shelled body padding-top). The scroll-away bars still need their height reserved before shell.js runs, or the whole page jumps down when they appear -- measured +91px at t=2.3-8.4s, a deterministic +0.168 mobile CLS on every page. shell.css is render-blocking, so this lands before first paint. */ #tsk-shell { display: contents; } html.tsk-shelled body { min-height: 100vh; } html.tsk-shelled #tsk-shell-space { display: block; height: 94px; } @media (max-width: 900px) { html.tsk-shelled #tsk-shell-space { height: 92px; } } /* Deliberately NOT styling . The shell is injected into 24 sites that each own their own page styling; a body rule here would silently restyle them. The landing page carries its own body rule instead. */ #tsk-shell { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; color: var(--text); } /* Origin chrome suppression. The sites keep their own headers in the DOM -- removing them would break the 256 hardcoded a[href="/app/..."] selectors and the scripts that query .topbar -- so they are hidden, not deleted. Hidden is also correct for screen readers, which skip display:none rather than announcing two navigations. */ html.tsk-shelled header.topbar, html.tsk-shelled header.hrk-header, html.tsk-shelled #hrk-mobile-drawer, html.tsk-shelled .topbar-scrim, html.tsk-shelled nav#sitenav, html.tsk-shelled header.site-header, html.tsk-shelled header.lp-head, html.tsk-shelled nav.drawer-nav { display: none !important; } /* --- shared ---------------------------------------------------------------*/ .tsk-inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; height: 100%; gap: 4px; } /* ========================================================================= BAR 1 — the slate strip ESPN puts scores here. This product is a dated card, not a news site, so this strip answers "which sports have a card today, and how big is it". It must never claim a sport is quiet when the truth is that no feed arrived. ========================================================================= */ .tsk-slate { position: relative; z-index: 2147481800; background: var(--bg-2); border-bottom: 1px solid var(--border); height: 58px; font-size: 13px; } .tsk-slate .tsk-inner { gap: 10px; } .tsk-slate-label { font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; padding-right: 12px; border-right: 1px solid var(--border); margin-right: 4px; } .tsk-slate-rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; align-items: center; height: 100%; } .tsk-slate-rail::-webkit-scrollbar { display: none; } .tsk-slate-card { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 104px; padding: 5px 12px 5px 10px; border-right: 1px solid var(--border); color: inherit; text-decoration: none; white-space: nowrap; } .tsk-slate-card:hover .tsk-slate-name { color: var(--brand); } .tsk-slate-name { font-size: 12px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 5px; } .tsk-slate-meta { font-size: 11px; color: var(--muted-2); font-family: var(--font-num); } /* The honest empty state. Not a blank strip — a sentence that says why. */ .tsk-slate-unknown { font-size: 12px; color: var(--muted-2); font-style: italic; } /* ========================================================================= BAR 2 — the global bar. Fixed on every page of every sport. ========================================================================= */ /* FIXED, not sticky. MLB's body computes overflow:hidden and NFL's hidden auto, which makes BODY the sticky element's scrolling ancestor -- so the bar was confined to the body scroll box and scrolled away regardless of display:contents on the mount. Measured top:-850 at scrollY:900 on both. position:fixed is immune to scrolling ancestors (only a transformed/filtered ancestor would break it, and there are none), so it holds on all 24 origins whatever their CSS does. The DOM order is global -> slate -> sport, so the two scroll-away bars sit below the pinned one and the spacer only has to cover the global bar. */ .tsk-global { background: #0b0d12; border-bottom: 1px solid #000; height: var(--bar-h); position: fixed; top: 0; left: 0; right: 0; z-index: 2147482000; } /* The spacer. Set on so it cannot be clobbered by an origin body rule, and it doubles as the CLS reservation -- content was jumping 142px when the shell injected (measured CLS 0.17-0.31, "poor" is >0.25). --bar-h MUST be defined on :root, not only on #tsk-shell. body is not a descendant of #tsk-shell, so var(--bar-h) did not resolve here and the padding fell to 0 -- the fixed top bar then painted straight over the slate strip ("TODAY | MLB 126 plays"), hiding it on every DESKTOP page. Phones were fine only by accident: the <=900px media query happens to set --bar-h on :root as well, which is what made this look like a mobile-only success. */ :root { --bar-h: 46px; } html.tsk-shelled body { padding-top: var(--bar-h, 46px); } .tsk-burger { display: none; background: none; border: 0; color: var(--text); font-size: 19px; cursor: pointer; padding: 6px 10px 6px 0; line-height: 1; } .tsk-wordmark { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; letter-spacing: -.015em; color: var(--text); text-decoration: none; padding-right: 18px; white-space: nowrap; } /* Namespaced, and defensively reset. The fleet's shared stylesheet defines a bare .crown as a 34x34 gradient chip in the sport's colour with a lime glow, and a bare .name as Bricolage Grotesque 18px/800 -- both of which were landing on the shell's own wordmark and sport chip, so the unified masthead rendered as a different coloured object on 17 of 21 sports. Never use an unnamespaced class inside #tsk-shell. */ .tsk-wordmark .tsk-crown { all: unset; color: var(--brand); font-size: 16px; line-height: 1; font-family: var(--font-ui); } .tsk-chip .tsk-chip-name { all: unset; color: var(--accent); font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: -.01em; } /* the 7-slot rail */ .tsk-rail { display: flex; align-items: center; height: 100%; gap: 1px; flex: 1; min-width: 0; } .tsk-rail a, .tsk-more-btn { display: flex; align-items: center; height: 100%; padding: 0 11px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; font-family: inherit; white-space: nowrap; } .tsk-rail a:hover, .tsk-more-btn:hover { color: #fff; } /* Tools lead the rail and must not read as a 22nd sport: gold, with its glyph kept, so the eye separates "cross-sport tool" from "pick a sport". */ .tsk-rail a.tsk-rail-tool { color: var(--accent); gap: 6px; font-weight: 700; } .tsk-rail a.tsk-rail-tool:hover { color: #ffd970; background: rgba(245,197,66,.08); } .tsk-rail a.tsk-rail-tool[aria-current="true"] { color: #fff; border-bottom-color: var(--accent); } .tsk-rail a.tsk-rail-tool .glyph { font-size: 13px; } .tsk-rail-sep { width: 1px; height: 20px; background: var(--line); margin: 0 7px; flex: none; } .tsk-drawer a.tsk-drawer-tool { color: var(--accent); font-weight: 700; } .tsk-drawer a.tsk-drawer-tool .tsk-tag { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-3); background: rgba(245,197,66,.10); border: 1px solid rgba(245,197,66,.22); border-radius: 999px; padding: 2px 7px; } .tsk-rail a[aria-current="true"] { color: #fff; border-bottom-color: var(--accent); } .tsk-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; padding-left: 12px; } .tsk-tool { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; } .tsk-tool:hover { background: #171a22; color: #fff; } .tsk-tool.primary { background: var(--brand); color: #10121a; } .tsk-tool.primary:hover { background: #ffd75e; color: #10121a; } /* the date control — this product is a dated card; ESPN buries date, we do not */ .tsk-date { display: flex; align-items: center; gap: 2px; background: #12151c; border: 1px solid var(--border); border-radius: 4px; height: 30px; padding: 0 3px; margin-right: 6px; } .tsk-date button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 6px; font-size: 13px; line-height: 1; } .tsk-date button:hover { color: #fff; } .tsk-date-val { font-family: var(--font-num); font-size: 12px; font-weight: 600; color: var(--text-2); padding: 0 4px; min-width: 62px; text-align: center; } .tsk-slip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #10121a; font-size: 10.5px; font-weight: 700; font-family: var(--font-num); } /* ========================================================================= BAR 3 — the sport nav. The only bar that swaps between sports. ========================================================================= */ /* Scrolls away with the page, by design: it is useful on arrival and dead weight once the reader is deep in a board. The pinned global bar keeps the rail, search and account reachable at all times. */ .tsk-sport { background: var(--panel); border-bottom: 1px solid var(--border); height: 44px; position: relative; z-index: 2147481900; } .tsk-sport .tsk-inner { gap: 0; } /* the sport identity chip — with sub-brands retired this is the ONLY "where am I" signal left, so it is load-bearing, not decoration. */ .tsk-chip { display: flex; align-items: center; gap: 8px; padding-right: 15px; margin-right: 13px; border-right: 1px solid var(--border); font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--text); text-decoration: none; white-space: nowrap; height: 26px; } .tsk-chip .glyph { font-size: 17px; line-height: 1; filter: saturate(1.1); } .tsk-chip .name { color: var(--accent); } .tsk-spine { display: flex; align-items: center; height: 100%; gap: 0; overflow-x: auto; scrollbar-width: none; flex: 1; } .tsk-spine::-webkit-scrollbar { display: none; } .tsk-spine a { display: flex; align-items: center; height: 100%; padding: 0 13px; font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; } .tsk-spine a:hover { color: #fff; } .tsk-spine a[aria-current="page"] { color: #fff; font-weight: 600; border-bottom-color: var(--accent); } /* ========================================================================= More Sports panel — flat, alphabetical, multi-column. ESPN does not group its long tail and neither do we; ESPN hand-maintains theirs and it has visibly drifted out of order. Ours is generated. ========================================================================= */ .tsk-more-wrap { position: relative; height: 100%; display: flex; align-items: center; } .tsk-more-panel { display: none; position: absolute; top: 100%; left: 0; background: var(--panel); border: 1px solid var(--border-2); border-top: 0; border-radius: 0 0 6px 6px; padding: 14px 8px; columns: 3; column-gap: 4px; min-width: 430px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.9); z-index: 2147482100; } .tsk-more-wrap.open .tsk-more-panel { display: block; } .tsk-more-panel a { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; color: var(--text-2); text-decoration: none; border-radius: 4px; break-inside: avoid; } .tsk-more-panel a:hover { background: var(--panel-2); color: #fff; } .tsk-more-panel .glyph { font-size: 14px; width: 17px; text-align: center; } /* ========================================================================= Mobile drawer ========================================================================= */ .tsk-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 2147482200; } /* display:none when closed. Hiding it with transform alone left 23 controls focusable at x=-310 on every viewport -- 22 of the 55 tab stops before page content on desktop, where the burger that opens it is display:none. The transform stays for the slide. */ .tsk-drawer { display: none; } .tsk-drawer.open { display: block; } .tsk-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(310px, 84vw); background: var(--panel); border-right: 1px solid var(--border-2); z-index: 2147482300; transform: translateX(-100%); transition: transform .18s ease; overflow-y: auto; padding: 14px 0 28px; } .tsk-drawer.open { transform: translateX(0); } .tsk-scrim.open { display: block; } .tsk-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .tsk-drawer-head .tsk-wordmark { padding: 0; } .tsk-drawer-close { background: none; border: 0; color: var(--muted); font-size: 21px; cursor: pointer; line-height: 1; padding: 2px 4px; } .tsk-drawer-sec { font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); padding: 14px 16px 6px; } .tsk-drawer a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; } .tsk-drawer a:hover { background: var(--panel-2); color: #fff; } .tsk-drawer .glyph { font-size: 15px; width: 20px; text-align: center; } /* Native select for the mobile sport picker. ESPN ships a bare