/* ============================================================ MustDraft — shared design system Light editorial by default ("sports publication"), with a dark broadcast mode behind the header toggle. EVERY color flows through the tokens below — pages must never hard-code colors, so both themes stay correct for free. The of every page sets html[data-theme] before CSS loads (see PAGE snippet in CLAUDE.md); site.js runs the toggle. ============================================================ */ /* ---------- self-hosted fonts ---------- Barlow & Barlow Condensed (Jeremy Tribby), SIL Open Font License — see assets/fonts/OFL.txt. Latin subsets only, five weights total, served from our own origin: two third-party connections gone from every page load. font-display:swap keeps text visible on first paint. */ @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/barlow-400.woff2') format('woff2')} @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/barlow-500.woff2') format('woff2')} @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/barlow-600.woff2') format('woff2')} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/barlow-cond-600.woff2') format('woff2')} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap; src:url('fonts/barlow-cond-700.woff2') format('woff2')} /* ---------- THE CHALKBOARD ---------- One idea, two lightings. Light is the coach's PAPER playbook — warm stock, graphite ink. Dark is the BOARD itself — slate, chalk, and the same orange. The orange earns its keep by being the only saturated colour on the page. The scheme it replaced ran a single corporate blue through the logo, the links, the buttons, the section labels, the accent word in the headline and the bar charts all at once, which is most of why every page read as one template with different words in it. Here colour is spent on one job: actions and live state. Section labels are graphite. Bars are ink. Green and red stay reserved for results — won, lost, up, down — never decoration. ---------- */ :root{ --bg0:#f2efe8; /* page — paper stock, not white */ --bg1:#f8f6f1; /* panel */ --bg2:#fffefb; /* raised surface */ --bg3:#e7e2d7; /* hover */ --line:#d7d0c2; /* hairline borders */ --line2:#b8ae9b; /* stronger rule */ --chalk:#14181b; /* primary ink — headings */ --ink:#333a3f; /* body */ --muted:#5e666d; /* secondary */ /* meta. Darkened from #8a9198 (2.8:1 on the page — an AA failure at exactly the small sizes this token is used for: kickers, column headers, timestamps). #5b636b measures 5.3:1 on the page, 6.0 on cards and 4.7 on the hover surface, so the smallest text on the site now clears WCAG AA everywhere it appears. UX review #3. */ --faint:#5b636b; --navy:#1c2629; /* slate block — masthead, draft header */ --navy-ink:#f0efe8; /* text on slate */ --accent:#b04408; /* yard-marker orange, dark enough to read as a link */ --accent-hi:#d1560d; /* hover, on-the-clock */ --accent-deep:#853305; --accent-pale:#f7ece2; /* selected rows, chips */ /* Section labels are GRAPHITE, not a second brand colour. A kicker is an annotation in the margin; it must not compete with the heading beneath it. */ --accent2:#6b645a; --win:#1f6b4d; /* positive results ONLY */ --loss:#a5301c; /* errors, negatives */ --btn-ink:#fffdf8; /* text on accent buttons */ /* Drawn on the surface, not floating above it. */ --shadow:0 1px 0 rgba(20,24,27,.05); --card-bg:#fffefb; --fieldline:rgba(20,24,27,.055); /* hash marks */ --fieldglow:rgba(176,68,8,.05); /* hero wash */ /* tint pairs (badges, labels). green pair = positive results only. */ --tint-green-bg:#dceadd; --tint-green-fg:#1c5c40; --tint-blue-bg:#dde5ea; --tint-blue-fg:#2b5568; --tint-purple-bg:#e5e0ea; --tint-purple-fg:#544166; --tint-gold-bg:#f2e6cd; --tint-gold-fg:#7a5510; --tint-red-bg:#f3ded8; --tint-red-fg:#8e3223; --tint-lime-bg:#e3e8d0; --tint-lime-fg:#4b5c1c; --tint-pink-bg:#f0dfe3; --tint-pink-fg:#793d4c; /* type */ --disp:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Barlow","Segoe UI",system-ui,sans-serif; --rad:4px; /* drafted corners, not app corners */ --pagew:1120px; } :root[data-theme="dark"]{ /* ---------- DARK: the board itself ---------- Slate is warm and slightly green, the way a real chalkboard is; a neutral grey reads as a dimmed screen instead. Chalk is never pure white — it is dusty, and the small amount of green in it is what stops the dark theme looking like the light one with the lamps off. */ --bg0:#12181a; --bg1:#171e20; --bg2:#1c2427; --bg3:#26302f; --line:#2e3a39; --line2:#42504e; --chalk:#eef2ea; --ink:#c4ccc4; --muted:#8c968d; /* Lightened from #68726a (3.6:1 on the board) for the same AA reason as the light theme's token: 6.2:1 on the board, 4.7 on the hover surface. */ --faint:#8f9b93; --navy:#0e1315; --navy-ink:#eef2ea; --accent:#f0863f; --accent-hi:#ff9d5c; --accent-deep:#bf661f; --accent-pale:#2b211a; --accent2:#8c968d; /* graphite here too — see the light block */ --win:#5cbf94; --loss:#e8796a; --btn-ink:#12181a; --shadow:none; --card-bg:var(--bg2); --fieldline:rgba(238,242,234,.045); --fieldglow:rgba(240,134,63,.07); --tint-green-bg:#1a352b; --tint-green-fg:#79d3ac; --tint-blue-bg:#1e3038; --tint-blue-fg:#9dc2d2; --tint-purple-bg:#302a3e; --tint-purple-fg:#bda9d8; --tint-gold-bg:#3b3320; --tint-gold-fg:#e3c07c; --tint-red-bg:#3f2a28; --tint-red-fg:#e2a49b; --tint-lime-bg:#2c381e; --tint-lime-fg:#bdd47d; --tint-pink-bg:#33272e; --tint-pink-fg:#d8a0c4; } *{margin:0;padding:0;box-sizing:border-box} /* Any explicit `display` in this sheet (flex/grid/inline-flex/block) outranks the browser's built-in [hidden] rule, so hidden elements would stay visible. This one line makes the attribute authoritative everywhere — it has already caught the search overlay, the mobile menu, and "Show more" buttons. */ [hidden]{display:none !important} html{scroll-behavior:smooth} body{ font-family:var(--body);font-size:16.5px;line-height:1.6; background:var(--bg0);color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:clip; /* wide content must scroll inside .tablewrap, never the page */ } /* ---------- typography ---------- One display voice, used deliberately: h1 keeps the uppercase masthead treatment; everything below it reads in sentence case. Not every heading is a headline. */ h1,h2,.disp{ font-family:var(--disp);color:var(--chalk);line-height:1.08;font-weight:700; } h1{font-size:clamp(2.3rem,5.5vw,3.6rem);text-transform:uppercase;letter-spacing:.015em} h2{font-size:clamp(1.45rem,3vw,1.95rem);letter-spacing:.005em} h3{font-family:var(--body);font-weight:650;font-size:1.05rem;color:var(--chalk);line-height:1.25} p{margin:.65em 0} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px} strong{color:var(--chalk);font-weight:600} ::selection{background:var(--accent-deep);color:#fff} /* A kicker is a note pencilled in the margin, not a second headline. It was set in the brand colour with a coloured bar in front, which made it shout as loudly as the heading it introduces — and on several pages it only restates that heading, so the page said everything twice, in colour. Now it is graphite, smaller, and marked with a scrimmage tick rather than a rule. */ .kicker{ font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.16em;font-size:.72rem;color:var(--accent2); display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem; } .kicker::before{ content:"";width:9px;height:9px;flex:0 0 auto; border-left:2px solid var(--line2);border-bottom:2px solid var(--line2); } /* ---------- layout ---------- */ .wrap{max-width:var(--pagew);margin:0 auto;padding:0 20px} main.wrap{padding-top:34px;padding-bottom:60px} section{margin:46px 0} /* ---------- header ---------- */ .site-head{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--bg1) 92%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .site-head .wrap{ display:flex;align-items:center;gap:26px;height:60px; } /* The wordmark used to colour one word of the name in the brand accent. That device is the most generated-looking thing a wordmark can do; it is what a logo generator reaches for when it has no idea. One ink, wider tracking, and the mark beside it carries the idea instead. */ .wordmark{ font-family:var(--disp);font-weight:700;font-size:1.42rem; letter-spacing:.11em;color:var(--chalk);text-transform:uppercase; display:flex;align-items:center;white-space:nowrap; } .wordmark:hover{text-decoration:none} .wordmark b{color:inherit;font-weight:700} .wordmark svg{flex:0 0 auto;margin-right:10px} /* The mark is a play diagram: the line of scrimmage, one man on it, one man across it. Chalk for the formation, orange for the defender — the same two colours the whole site runs on, doing the same two jobs. */ .wordmark svg .ps-line,.wordmark svg .ps-o{stroke:var(--chalk)} .wordmark svg .ps-x{stroke:var(--accent)} /* NOTE: must NOT be a scroll container — the grouped dropdown panels are absolutely positioned inside it, and overflow:auto would clip them and squeeze the nav's own items out of view. The nav is hidden below 900px, and the grouped labels fit comfortably above that. */ nav.site-nav{ display:flex;gap:2px;margin-left:auto;overflow:visible;flex-wrap:nowrap; } nav.site-nav a{ font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.09em;font-size:.95rem;color:var(--muted); padding:8px 13px;border-radius:7px;white-space:nowrap; } nav.site-nav a:hover{color:var(--chalk);background:var(--bg3);text-decoration:none} nav.site-nav a[aria-current="page"]{color:var(--accent);background:var(--bg3)} /* grouped dropdown nav (built by site.js) */ .navgrp{position:relative;display:inline-flex} .navgrp-btn{ display:inline-flex;align-items:center;gap:4px;cursor:pointer; font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.09em;font-size:.95rem;color:var(--muted); background:none;border:none;padding:8px 12px;border-radius:7px;white-space:nowrap; } .navgrp-btn:hover{color:var(--chalk);background:var(--bg3)} .navgrp-btn.on{color:var(--accent)} .navgrp-btn[aria-expanded="true"]{color:var(--chalk);background:var(--bg3)} .navgrp-btn .caret{font-size:.7rem;opacity:.7} .navpanel{ position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:210px; background:var(--bg2);border:1px solid var(--line2);border-radius:9px; box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px; } .navpanel a{display:block;padding:9px 12px;font-size:.9rem;letter-spacing:.06em} /* Section divider inside a dropdown: separates the primary tools from the rest without hiding anything. Presentational only — never focusable. */ .navpanel .navsec{ display:block;margin:6px 4px 2px;padding:8px 8px 4px; border-top:1px solid var(--line); font-family:var(--disp);font-size:.68rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--faint); } nav.site-nav .nav-home{padding:8px 12px} .theme-toggle{ flex:0 0 auto;width:34px;height:34px;cursor:pointer; background:none;border:1px solid var(--line2);border-radius:7px; color:var(--muted);font-size:1.05rem;line-height:1; } .theme-toggle:hover{color:var(--accent);border-color:var(--accent)} /* global search */ .gsearch-btn{ flex:0 0 auto;width:34px;height:34px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; background:none;border:1px solid var(--line2);border-radius:7px;color:var(--muted); } .gsearch-btn:hover{color:var(--accent);border-color:var(--accent)} /* header layout: wordmark | nav (pushed right) | search | theme. Single set of rules — earlier duplicates were fighting each other. */ .site-head nav.site-nav{margin-left:auto} .gsearch-btn{margin-left:8px} .gsearch{ position:fixed;inset:0;z-index:70;background:rgba(10,13,11,.45); display:flex;justify-content:center;align-items:flex-start;padding:80px 16px 16px; } .gsearch[hidden],.mobile-menu[hidden]{display:none} /* [hidden] must beat display:flex */ .gsearch-panel{ width:100%;max-width:560px;background:var(--bg2);border:1px solid var(--line2); border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.3);overflow:hidden; } .gsearch-panel input{border:none;border-bottom:1px solid var(--line);border-radius:0;padding:15px 16px;font-size:1.05rem} .gsearch-panel input:focus{outline:none} #gsearchList{max-height:min(400px,60vh);overflow-y:auto} #gsearchList a{ display:flex;align-items:center;gap:10px;padding:11px 14px; color:var(--ink);border-bottom:1px solid var(--line);min-height:44px; } #gsearchList a:last-child{border-bottom:none} #gsearchList a b{color:var(--chalk);font-weight:500} #gsearchList a:hover,#gsearchList a.hl{background:var(--bg3);text-decoration:none} #gsearchList .meta{margin-left:auto;white-space:nowrap} .gs-swatch{width:14px;height:14px;border-radius:4px;flex:0 0 auto} /* mobile menu button — hidden on desktop, 44px target on mobile */ .menu-btn{ display:none;flex:0 0 auto;width:44px;height:44px; align-items:center;justify-content:center;cursor:pointer; background:none;border:1px solid var(--line2);border-radius:7px; color:var(--chalk);font-size:1.25rem;line-height:1; } .menu-btn:hover{color:var(--accent);border-color:var(--accent)} .mobile-menu{ position:fixed;top:60px;left:0;right:0;bottom:0;z-index:60; overflow-y:auto;padding:10px 20px 40px; background:var(--bg0);border-top:1px solid var(--line); } .mobile-menu .mm-group{ font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.18em;font-size:.75rem;color:var(--accent2); margin:18px 0 4px; } /* "More tools" sub-heading inside a mobile group — quieter than .mm-group so the primary/secondary split reads at a glance on a phone. */ .mobile-menu .mm-sub{ font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.16em;font-size:.68rem;color:var(--faint); margin:14px 0 2px;padding-top:10px;border-top:1px solid var(--line2); } .mobile-menu a{ display:flex;align-items:center;min-height:48px;padding:4px 10px; font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.09em;font-size:1.15rem;color:var(--chalk); border-bottom:1px solid var(--line);border-radius:6px; } .mobile-menu a:hover{background:var(--bg2);text-decoration:none} .mobile-menu a[aria-current="page"]{color:var(--accent)} /* 900, not 720. Measured at a real 768px tablet viewport, the full desktop nav plus the four header controls rendered 886px wide and scrolled every page sideways. The nav needs roughly 900px before it fits alongside them. */ @media(max-width:900px){ nav.site-nav{display:none} .menu-btn{display:inline-flex;margin-left:0} .gsearch-btn{margin-left:auto !important;width:44px;height:44px} .theme-toggle{margin-left:0;width:44px;height:44px} } /* Touch targets. A browser's default checkbox is about 13px square, which is a poor thumb target on any phone — and these carry real consequences (alert opt-ins, league mutes). The control grows and the whole label row becomes the hit area, which is the part that actually helps. */ @media(pointer:coarse),(max-width:600px){ input[type=checkbox],input[type=radio]{width:20px;height:20px;flex:0 0 auto} label:has(> input[type=checkbox]),label:has(> input[type=radio]){ min-height:40px;align-items:center; } .btn,button.btn,.acct-actions .btn{min-height:38px} } /* Narrow phones. Measured at a real 320px viewport, the header rendered 490px wide and scrolled the WHOLE PAGE sideways on every screen: the wordmark (170px) plus four 44px controls plus four 26px gaps cannot fit, and nothing was allowed to shrink. The controls stay 44px — they are touch targets — so the gap tightens and the wordmark gives way instead. */ @media(max-width:600px){ .site-head .wrap{gap:8px;padding-left:12px;padding-right:12px;min-width:0} .wordmark{font-size:1.15rem;min-width:0;flex:0 1 auto;overflow:hidden} .wordmark svg{margin-right:6px} .acct-nav{margin-left:0;gap:6px} } @media(max-width:380px){ .site-head .wrap{gap:5px;padding-left:9px;padding-right:9px} .wordmark{font-size:.98rem} .wordmark svg{width:18px;height:18px;margin-right:4px} /* Four 44px controls plus the mark still will not fit at 320. Search moves into the menu rather than pushing the page sideways. */ .gsearch-btn{display:none !important} } /* ---------- header account entry (built by site.js) ---------- Signed out: "Log in" text link + "Sign up" pill on desktop, a single person-icon chip on mobile (the header is too tight for two buttons). Signed in: one round initial chip linking to the account page, all widths. */ .acct-nav{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:8px} .acct-login{ font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--muted); padding:8px 10px;border-radius:7px;white-space:nowrap; } .acct-login:hover{color:var(--chalk);background:var(--bg3);text-decoration:none} .acct-signup{ font-family:var(--body);font-weight:600;font-size:.9rem; color:var(--btn-ink);background:var(--accent); padding:8px 14px;border-radius:8px;white-space:nowrap; } .acct-signup:hover{background:var(--accent-hi);text-decoration:none} .acct-chip{ display:none;width:34px;height:34px;border-radius:50%;flex:0 0 auto; align-items:center;justify-content:center; border:1px solid var(--line2);color:var(--muted); font-family:var(--disp);font-weight:700;font-size:1rem;line-height:1; } .acct-chip:hover{color:var(--accent);border-color:var(--accent);text-decoration:none} .acct-chip.on{ display:inline-flex;background:var(--accent);border-color:var(--accent);color:var(--btn-ink); } .acct-chip.on:hover{background:var(--accent-hi);color:var(--btn-ink)} @media(max-width:720px){ .acct-login,.acct-signup{display:none} .acct-chip{display:inline-flex;width:44px;height:44px} } /* ---------- field texture (hero backdrop) ---------- */ /* The hero used to be evenly spaced vertical yard lines with a coloured glow behind them, which read as a gradient background with stripes rather than as a field. A real field is mostly empty with hash marks in two rows, so that is what this draws — and the heavy rule at the foot is the line of scrimmage, the same mark as the logo. */ .field-bg{ position:relative;overflow:hidden; background:linear-gradient(180deg,var(--bg1) 0%,var(--bg0) 92%); border-bottom:2px solid var(--line2); } .field-bg::before{ content:"";position:absolute;inset:0;pointer-events:none; background: repeating-linear-gradient(90deg,var(--fieldline) 0 2px,transparent 2px 44px); /* Two bands of hashes, top and bottom, not a full-height stripe field. */ -webkit-mask-image:linear-gradient(180deg,#000 0 14px,transparent 14px calc(100% - 14px),#000 calc(100% - 14px)); mask-image:linear-gradient(180deg,#000 0 14px,transparent 14px calc(100% - 14px),#000 calc(100% - 14px)); } .field-bg::after{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 90% at 18% -20%,var(--fieldglow),transparent 68%); } .field-bg>.wrap{position:relative;z-index:1} /* ---------- cards ---------- */ .card{ background:var(--card-bg); border:1px solid var(--line);border-radius:var(--rad); box-shadow:var(--shadow); padding:22px; } /* Cards no longer lift on hover. Everything on the page was a white rounded box with the same border and the same shadow, so a featured story, a headline and a stat block all claimed equal importance and the layout carried no hierarchy at all. They sit flat now; weight comes from the rule on the left, which thickens on hover instead of the whole card moving. */ a.card{ display:block;color:inherit; border-left:3px solid transparent; transition:border-left-color .15s,background .15s; } a.card:hover{border-left-color:var(--accent);background:var(--bg1);text-decoration:none} .card h3 a{color:var(--chalk)} .grid{display:grid;gap:16px} /* A grid item defaults to min-width:auto, so one long headline makes the whole column wider than the viewport. Measured at 320px this pushed the homepage 29px sideways. */ .grid > *{min-width:0} .grid.cols3{grid-template-columns:repeat(3,1fr)} .grid.cols2{grid-template-columns:repeat(2,1fr)} @media(max-width:860px){.grid.cols3{grid-template-columns:1fr 1fr}} @media(max-width:600px){.grid.cols3,.grid.cols2{grid-template-columns:1fr}} /* module — a side-rail data box (rankings, trending, headlines) */ .module{background:var(--bg2);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow)} .module>header{ display:flex;align-items:baseline;justify-content:space-between;gap:10px; padding:13px 16px;border-bottom:1px solid var(--line); } /* data-module labels keep the small-caps voice on purpose: they are wayfinding for data boxes, not editorial headings */ .module>header h3{ font-family:var(--disp);font-weight:600;text-transform:uppercase; font-size:.95rem;letter-spacing:.1em; } .module>header .meta,.meta{font-size:.78rem;color:var(--faint)} .module ul{list-style:none} .module li{ display:flex;align-items:center;gap:11px; padding:9px 16px;border-bottom:1px solid var(--line); } .module li:last-child{border-bottom:none} .rankchip{ flex:0 0 auto;width:26px;height:26px;border-radius:6px; background:var(--bg3);border:1px solid var(--line2); font-family:var(--disp);font-weight:700;font-size:.92rem;color:var(--muted); display:flex;align-items:center;justify-content:center; } li:nth-child(-n+3) .rankchip{ color:var(--accent2); border-color:color-mix(in srgb,var(--accent2) 45%,var(--bg2)); } /* movement/result colors: teal means good, red means bad — blue never does */ .up{color:var(--win);font-weight:600;font-size:.85rem;white-space:nowrap} .down{color:var(--loss);font-weight:600;font-size:.85rem;white-space:nowrap} /* ---------- player imagery ---------- */ .ps-shot{ position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;overflow:hidden;background:var(--bg3);border:1px solid var(--line); vertical-align:middle; } .ps-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center} .ps-shot-fb{ font-family:var(--disp);font-weight:700;font-size:.72rem;color:var(--faint); letter-spacing:.02em;user-select:none; } .ps-logo{flex:0 0 auto;object-fit:contain;vertical-align:middle;margin-right:4px} /* Our own neutral club chip, used while team marks are unlicensed. Carries the same information as the logo did — see docs/DATA-RIGHTS.md. */ .ps-logo-tx{ display:inline-flex;align-items:center;justify-content:center; background:var(--bg3);color:var(--muted);border-radius:5px; font-family:var(--disp);font-weight:700;letter-spacing:.02em; font-size:.62em;line-height:1;text-transform:uppercase;overflow:hidden; } .ps-pcell{display:flex;align-items:center;gap:10px;min-width:0} .ps-pmeta{display:flex;flex-direction:column;min-width:0;line-height:1.25} .ps-pmeta b{font-weight:600;color:var(--chalk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ps-pmeta a{color:var(--chalk)} .ps-pmeta a:hover b{color:var(--accent)} .ps-psub{display:flex;align-items:center;font-size:.76rem;color:var(--faint);white-space:nowrap} /* player-profile hero: big headshot beside the name, team mark tucked in */ .phero{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .phero #playerShot{position:relative;display:inline-flex;align-items:flex-end} .phero #playerShot .ps-logo{ position:absolute;right:-6px;bottom:-2px;background:var(--bg2); border-radius:50%;padding:3px;border:1px solid var(--line);margin:0; } .phero .ps-shot{border-width:2px} .phero .ps-shot-fb{font-size:1.6rem} @media(max-width:600px){ .phero{gap:12px} .phero .ps-shot{width:64px !important;height:64px !important} } /* ---------- featured story + news rail (content-first homepage) ---------- */ .feature{ display:block;position:relative;overflow:hidden;border-radius:var(--rad); border:1px solid var(--line);background:var(--card-bg);box-shadow:var(--shadow); } .feature:hover{text-decoration:none;border-color:var(--accent)} /* image band: headshot anchored right on a field-gradient, team mark left. Reads as a designed card instead of a stretched portrait. */ /* these are elements inside an , so they MUST be blockified — height/padding do nothing on an inline box */ .feature .fimg,.feature .fbody,.feature .fmeta{display:block} .feature .fimg{ position:relative;height:150px;overflow:hidden; background: repeating-linear-gradient(90deg,var(--fieldline) 0 1px,transparent 1px 9%), radial-gradient(90% 140% at 88% 100%,var(--fieldglow),transparent 65%), linear-gradient(100deg,var(--bg3),var(--bg1)); border-bottom:1px solid var(--line); } .feature .fimg.small{height:104px} .feature .fimg.tagonly{height:52px} .feature .fimg .fshot{ position:absolute;right:14px;bottom:0;height:100%;width:auto; object-fit:contain;object-position:bottom right; } .feature .fimg.small .fshot{right:10px} .feature .fimg .ps-logo{ position:absolute;left:14px;bottom:12px;margin:0;opacity:.9; } .feature .ftag{ position:absolute;top:12px;left:12px;z-index:2; font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.14em; font-size:.7rem;padding:3px 9px;border-radius:4px;background:var(--accent);color:var(--btn-ink); } .feature .fbody{padding:14px 16px 16px} .feature .fbody h3{font-size:1.3rem;line-height:1.12;margin-bottom:6px} .feature:hover .fbody h3{color:var(--accent)} .feature .fbody p{color:var(--muted);font-size:.9rem;margin:0} .feature .fmeta{ font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px; } /* news rail: small headshot + headline + outlet/time */ /* Divider inside the news rail: separates confidently-matched player stories from league-level headlines. */ .rail-sub{ margin:4px 0 0;padding:12px 16px 6px;border-top:1px solid var(--line); font-family:var(--disp);font-size:.68rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--faint); } .railitem{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:flex-start} .railitem:last-child{border-bottom:none} .railitem:hover{background:var(--bg3);text-decoration:none} .railitem .rtext{min-width:0} .railitem b{display:block;color:var(--chalk);font-weight:500;font-size:.9rem;line-height:1.3} .railitem:hover b{color:var(--accent)} .railitem .meta{display:block;font-size:.72rem;color:var(--faint);margin-top:2px} /* two-column content layout (main + rail) */ .split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start} @media(max-width:900px){.split{grid-template-columns:1fr}} /* compact stat strip (denser than the old .proof block) */ .strip{ display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--rad); background:var(--card-bg);box-shadow:var(--shadow);overflow:hidden; } .strip > div{ flex:1 1 130px;padding:10px 14px;border-right:1px solid var(--line); } .strip > div:last-child{border-right:none} .strip .n{font-family:var(--disp);font-weight:700;font-size:1.35rem;color:var(--chalk);line-height:1.1;font-variant-numeric:tabular-nums} .strip .l{font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.1em} .strip .l a{color:inherit;text-decoration:underline dotted;text-underline-offset:2px} .strip .l a:hover{color:var(--accent)} /* tier band inside data tables (draft/rankings) */ table.data tr.tier td{ background:var(--bg1);font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.12em;font-size:.75rem;color:var(--accent2);padding:6px 14px; } /* ---------- position badges ---------- */ .pos{ display:inline-block;min-width:2.5em;text-align:center; font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.06em; padding:2px 7px;border-radius:5px;text-transform:uppercase; } .pos.QB{background:var(--tint-purple-bg);color:var(--tint-purple-fg)} .pos.RB{background:var(--tint-green-bg);color:var(--tint-green-fg)} .pos.WR{background:var(--tint-blue-bg);color:var(--tint-blue-fg)} .pos.TE{background:var(--tint-gold-bg);color:var(--tint-gold-fg)} .pos.K{background:var(--tint-lime-bg);color:var(--tint-lime-fg)} .pos.PICK{background:var(--tint-red-bg);color:var(--tint-red-fg)} .pos.DEF{background:var(--tint-pink-bg);color:var(--tint-pink-fg)} /* generic badges (Live / Coming soon / etc.) */ .badge{ display:inline-block;font-family:var(--disp);font-weight:600;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;padding:2px 9px;border-radius:5px; } .badge.live{background:var(--tint-green-bg);color:var(--tint-green-fg)} .badge.soon{background:var(--tint-gold-bg);color:var(--tint-gold-fg)} .badge.paused{background:var(--tint-gold-bg);color:var(--tint-gold-fg)} /* nav marker for a tool that loads but cannot produce its main number */ .navtag{ display:inline-block;margin-left:6px;font-family:var(--disp);font-weight:600; font-size:.62rem;letter-spacing:.12em;text-transform:uppercase; padding:1px 6px;border-radius:4px; background:var(--tint-gold-bg);color:var(--tint-gold-fg); } /* page-level notice: the tool is reachable, its numbers are not trustworthy */ .tool-paused{ border:1px solid var(--tint-gold-fg);border-left-width:4px; background:var(--tint-gold-bg);border-radius:var(--rad); padding:14px 16px;margin:0 0 18px; } .tool-paused strong{display:block;margin-bottom:4px;color:var(--tint-gold-fg); font-family:var(--disp);letter-spacing:.02em} .tool-paused p{margin:0} /* ---------- tables ---------- */ .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad);background:var(--bg2);box-shadow:var(--shadow)} /* injected by site.js under any table that actually scrolls sideways */ .scrollhint{font-size:.78rem;color:var(--faint);margin:6px 2px 0; display:flex;align-items:center;gap:6px} .scrollhint::after{content:"→"} /* on phones, pin the identity column so rank/name stay readable mid-scroll */ @media(max-width:720px){ table.data th:first-child,table.data td:first-child{ position:sticky;left:0;z-index:2;background:var(--bg2); box-shadow:2px 0 0 var(--line); } table.data tr:hover td:first-child{background:var(--bg3)} table.data tr.total td:first-child{background:var(--bg1)} table.data th,table.data td{padding:9px 10px} } table.data{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px} table.data th{ font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.09em;font-size:.8rem;color:var(--faint);text-align:left; padding:11px 14px;border-bottom:1px solid var(--line2); position:sticky;top:0;background:var(--bg2); } table.data td{padding:10px 14px;border-bottom:1px solid var(--line)} table.data tr:last-child td{border-bottom:none} table.data tr:hover td{background:var(--bg3)} table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums} table.data tr.total td{font-weight:600;color:var(--chalk);background:var(--bg1)} /* ---------- buttons & inputs ---------- Buttons read as controls, not headlines: body face, sentence case. */ .btn{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; font-family:var(--body);font-weight:600;font-size:.95rem; background:var(--accent);color:var(--btn-ink);border:none;border-radius:8px; padding:10px 20px; } .btn:hover{background:var(--accent-hi);text-decoration:none} .btn.ghost{background:transparent;color:var(--chalk);border:1px solid var(--line2)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent} input[type=text],input[type=search],input[type=number],select,textarea{ font-family:var(--body);font-size:1rem;color:var(--chalk); background:var(--bg2);border:1px solid var(--line2);border-radius:8px; padding:10px 13px;width:100%; } input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible,button:focus-visible{ outline:2px solid var(--accent);outline-offset:2px; } .status{font-size:.85rem;color:var(--faint);margin:8px 0 0} .status.err{color:var(--loss)} /* ---------- ad slots ---------- Hidden entirely until assets/ads.js decides this page may serve. Reserved height keeps layout stable when a unit does load; an unfilled or blocked unit collapses instead of leaving a hole. Deliberately NOT styled as a card, so an ad can never read as editorial content. */ .ad-slot{display:none} body[data-ads="on"] .ad-slot{ display:block;margin:26px 0;padding-top:10px; border-top:1px solid var(--line); min-height:120px; /* reserved — prevents layout shift */ text-align:center; } @media(min-width:900px){ body[data-ads="on"] .ad-slot{min-height:140px} } body[data-ads="on"] .ad-slot>span{ display:block;margin-bottom:6px; font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint); } /* blocked, unfilled, or errored: stop reserving the space */ body[data-ads="on"] .ad-slot.ad-unavailable{min-height:0;border-top:none;padding-top:0;margin:0} body[data-ads="on"] .ad-slot.ad-unavailable>span{display:none} /* Google reports "no ad to show" by stamping data-ad-status="unfilled" on the , which otherwise keeps its reserved height and leaves a visible band. This is Google's supported way to collapse an unfilled unit. It applies only AFTER the request has been made, so it never suppresses the ad request itself — hiding the up front would. assets/ads.js additionally adds .ad-unavailable to the wrapper; this rule handles the in CSS alone so the gap never paints, even for a frame. */ ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important} body[data-ads="on"] .ad-slot:has(>ins[data-ad-status="unfilled"]){ min-height:0;border-top:none;padding-top:0;margin:0; } body[data-ads="on"] .ad-slot:has(>ins[data-ad-status="unfilled"])>span{display:none} /* local development outline — never requests a real ad */ .ad-slot.ad-devbox{ display:block;margin:26px 0;min-height:120px; border:1px dashed var(--line2);border-radius:var(--rad); background:var(--bg1);color:var(--faint); } .ad-slot.ad-devbox>span{display:block;padding:10px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase} .ad-slot.ad-devbox::after{content:"reserved ad space (dev)";font-size:.7rem;opacity:.7} /* never in print output, on any page */ @media print{ .ad-slot{display:none !important} } /* ---------- folded prose (keeps content for search/ad review, saves space) ---------- */ details.fold{border-top:1px solid var(--line)} details.fold>summary{ cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px; padding:14px 0; } details.fold>summary::-webkit-details-marker{display:none} details.fold>summary h2{font-size:1.2rem;margin:0} details.fold>summary .fold-hint{ margin-left:auto;white-space:nowrap; font-family:var(--disp);font-weight:600;text-transform:uppercase; letter-spacing:.12em;font-size:.8rem;color:var(--accent); } details.fold>summary .fold-hint::before{content:"+ more"} details.fold[open]>summary .fold-hint::before{content:"− less"} details.fold>summary:hover h2{color:var(--accent)} /* ---------- prose ---------- */ .prose{max-width:760px} .prose h2{margin:1.6em 0 .4em} .prose h3{margin:1.3em 0 .35em} .prose ul,.prose ol{margin:.6em 0 .6em 1.3em} .prose li{margin:.3em 0} /* ---------- footer ---------- */ /* No field-line motif here, deliberately. The vertical hash marks read beautifully behind a hero and read as an UNFINISHED TABLE behind a sparse row of footer links — a reviewer walking the site cold logged them as "empty grid cells", which is exactly how a first-time visitor parses them (UX review #5). The motif stays where content sits on top of it. */ .site-foot{ margin-top:70px;border-top:1px solid var(--line); background:var(--bg1); } .site-foot .wrap{ padding:30px 20px;display:flex;flex-wrap:wrap;gap:18px 34px; align-items:center;justify-content:space-between; font-size:.85rem;color:var(--faint); } .site-foot nav{display:flex;flex-wrap:wrap;gap:4px 18px} .site-foot a{color:var(--muted)} .site-foot a:hover{color:var(--accent)} /* utility */ .center{text-align:center} .mt0{margin-top:0}.mb0{margin-bottom:0} .small{font-size:.85rem;color:var(--muted)} /* headshot missing (e.g. an undrafted rookie): collapse the band instead of leaving a tall empty gradient */ .feature .fimg.noimg{height:56px} .feature .fimg.noimg.small{height:48px} /* =========================================================================== Account: save prompts, account dashboard, sign-in form. Every colour here is a token so dark mode follows automatically. ======================================================================== */ /* --- the inline "save this" bar shown inside tools ---------------------- */ /* Deliberately inline and dismissible: it must never sit over a tool or interrupt someone who is mid-task and does not want an account. */ .ps-save{ display:flex;flex-wrap:wrap;align-items:center;gap:10px; margin:18px 0;padding:12px 14px; background:var(--tint-green-bg); border:1px solid var(--line2);border-radius:var(--rad); } .ps-save-txt{flex:1 1 260px;min-width:0;font-size:.92rem;color:var(--ink)} .ps-save .btn{flex:0 0 auto;padding:7px 14px;font-size:.88rem} .ps-save-note{flex:1 1 100%;font-size:.84rem;color:var(--muted)} /* --- dashboard --------------------------------------------------------- */ .acct-head{ display:flex;flex-wrap:wrap;align-items:baseline;gap:12px; justify-content:space-between;margin-bottom:6px; } .acct-mail{color:var(--muted);font-size:.9rem;overflow-wrap:anywhere} .acct-empty{ padding:26px 20px;text-align:center; border:1px dashed var(--line2);border-radius:var(--rad); background:var(--card-bg); } .acct-empty p{color:var(--muted);max-width:52ch;margin:0 auto 16px} .acct-empty .acct-starts{ display:flex;flex-wrap:wrap;gap:10px;justify-content:center; } .acct-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .acct-item{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:12px 14px;background:var(--card-bg); border:1px solid var(--line);border-radius:var(--rad); } .acct-item h3{margin:0;font-size:1rem;flex:1 1 180px;min-width:0} .acct-item h3 a{color:var(--chalk)} .acct-item h3 a:hover{color:var(--accent)} .acct-meta{color:var(--faint);font-size:.84rem;flex:0 1 auto;min-width:0} .acct-actions{display:flex;gap:8px;flex:0 0 auto} .acct-actions .btn{padding:5px 11px;font-size:.82rem} /* Danger actions are visually distinct but never the easiest thing to hit. */ .acct-danger{ margin-top:14px;padding:16px;border-radius:var(--rad); border:1px solid var(--line2);background:var(--tint-red-bg); } .acct-danger h3{margin:0 0 6px} .acct-danger p{color:var(--muted);font-size:.9rem;margin:0 0 12px;max-width:60ch} /* --- sign-in / register form ------------------------------------------- */ .auth-card{ max-width:420px;margin:0 auto;padding:22px; background:var(--card-bg);border:1px solid var(--line);border-radius:var(--rad); } .auth-card label{display:block;font-size:.86rem;color:var(--muted);margin:12px 0 5px} .auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text]{ width:100%;padding:10px 12px;font:inherit;font-size:.95rem; color:var(--ink);background:var(--bg2); border:1px solid var(--line2);border-radius:10px; } .auth-card input:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .auth-card .btn{width:100%;margin-top:16px;justify-content:center} .auth-hint{font-size:.82rem;color:var(--faint);margin-top:6px} .auth-msg{ margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.9rem; background:var(--tint-gold-bg);border:1px solid var(--line2);color:var(--ink); } .auth-msg.err{background:var(--tint-red-bg)} .auth-msg.ok{background:var(--tint-green-bg)} .auth-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center} .auth-alt button, .auth-alt a{font-size:.9rem} .auth-sep{ display:flex;align-items:center;gap:12px;margin:18px 0 4px; color:var(--faint);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase; } .auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--line)} /* Small screens: the save bar stacks rather than squeezing its buttons. */ @media (max-width:520px){ .ps-save{align-items:stretch} .ps-save .btn{flex:1 1 auto;text-align:center} .acct-item{align-items:flex-start} .acct-actions{width:100%} .acct-actions .btn{flex:1 1 auto;text-align:center} } /* ---------------- live score ticker ---------------- Injected by assets/ticker.js on every page, and only when there are actually games — there is no empty state, because a blank strip in June is worse than no strip at all. */ .ps-ticker{display:flex;align-items:center;gap:10px;padding:6px 12px; background:var(--bg2);border-bottom:1px solid var(--line2);overflow:hidden} .ps-tk-strip{display:flex;gap:8px;overflow-x:auto;flex:1;scrollbar-width:none; -webkit-overflow-scrolling:touch} .ps-tk-strip::-webkit-scrollbar{display:none} .ps-tk-game{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:5px 11px; border:1px solid var(--line);border-radius:9px;text-decoration:none;color:var(--ink); font-size:.82rem;white-space:nowrap;min-height:38px} .ps-tk-game:hover{border-color:var(--line2);background:var(--bg3)} .ps-tk-game.live{border-color:var(--accent2)} .ps-tk-side{display:flex;gap:6px;align-items:baseline} .ps-tk-team{font-family:var(--disp);font-weight:700;letter-spacing:.04em;font-size:.78rem} .ps-tk-score{font-variant-numeric:tabular-nums;font-weight:700;min-width:1.1em} /* The loser of a settled game recedes; the winner stays at full weight. */ .ps-tk-game:not(.live) .ps-tk-side:not(.won) .ps-tk-score{color:var(--muted)} .ps-tk-status{color:var(--muted);font-size:.72rem;padding-left:3px} .ps-tk-status.live{color:var(--accent2);font-weight:700} .ps-tk-all{flex:0 0 auto;font-size:.76rem;color:var(--muted);text-decoration:none; white-space:nowrap;padding:4px 2px} .ps-tk-all:hover{color:var(--ink)} .ps-tk-warn{flex:0 0 100%;margin:4px 0 0;font-size:.72rem;color:var(--tint-gold-fg)} @media(max-width:600px){ .ps-ticker{padding:5px 8px;gap:6px;flex-wrap:wrap} .ps-tk-game{font-size:.78rem;padding:4px 9px;gap:7px} .ps-tk-all{font-size:.72rem} } /* Featured-card monogram. Stands in for the player photograph, which is a licensed right we do not hold (docs/DATA-RIGHTS.md). Without it the card is an empty 150px gradient band that reads as a broken image rather than a deliberate treatment. */ .feature .fmono{ position:absolute;right:20px;bottom:6px; font-family:var(--disp);font-weight:700;line-height:1; font-size:4.4rem;letter-spacing:.02em; color:var(--chalk);opacity:.16; user-select:none;pointer-events:none; } .feature .fimg.small .fmono{font-size:3rem;right:14px} @media(max-width:600px){ .feature .fmono{font-size:3.2rem;right:14px} } /* ============================================================ PHASE 2 — the Draft Card identity system The mark is a draft card: a clipped ticket corner with the MD monogram drawn in one continuous stroke (the M runs into the D — one player, one card). The Verdict Stamp is its partner and appears ONLY where the site actually renders a verdict: a grade, a recommendation, a confidence call, or an honest "wait". It is never decoration. ============================================================ */ /* ---------- the mark ---------- */ .brand-mark .bm-tile{fill:var(--accent)} .brand-mark .bm-fold{fill:var(--accent-deep)} .brand-mark .bm-glyph{stroke:var(--btn-ink);stroke-width:7;fill:none; stroke-linejoin:miter;stroke-miterlimit:3} .wordmark .brand-mark{margin-right:9px} @media(max-width:520px){ .wordmark .brand-mark{width:22px;height:22px;margin-right:5px} } /* ---------- League HQ: first-class destination ---------- */ nav.site-nav a.nav-hq{ color:var(--accent);border:1.5px solid var(--accent);border-radius:999px; padding:6px 13px;margin-right:2px;font-weight:700 } nav.site-nav a.nav-hq:hover{background:var(--accent-pale);color:var(--accent-hi)} nav.site-nav a.nav-hq[aria-current="page"]{background:var(--accent);color:var(--btn-ink)} /* small screens keep a compact HQ pill in the header even with the nav hidden */ .hq-pill{ display:none;align-items:center;min-height:36px;padding:0 11px; border:1.5px solid var(--accent);border-radius:999px;color:var(--accent); font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.08em; text-transform:uppercase;text-decoration:none;white-space:nowrap } .hq-pill:hover{text-decoration:none;background:var(--accent-pale)} @media(max-width:720px){ .hq-pill{display:inline-flex} } @media(max-width:400px){ .hq-pill{font-size:.72rem;padding:0 8px;min-height:32px} } /* ---------- mobile menu: primary block + collapsible groups ---------- */ .mobile-menu .mm-primary{display:grid;gap:8px;padding:10px 12px 14px;border-bottom:1px solid var(--line)} .mobile-menu .mm-primary a{ display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 14px; border:1px solid var(--line);border-radius:8px;background:var(--bg2); font-weight:600;font-size:1rem;color:var(--chalk) } .mobile-menu .mm-primary a.hq{border:1.5px solid var(--accent)} .mobile-menu .mm-primary a small{display:block;font-weight:400;font-size:.76rem;color:var(--muted)} .mobile-menu .mm-primary svg{width:21px;height:21px;stroke:var(--accent);fill:none; stroke-width:1.8;flex:0 0 auto} .mobile-menu details{border-bottom:1px solid var(--line)} .mobile-menu details summary{ list-style:none;display:flex;align-items:center;justify-content:space-between; min-height:48px;padding:0 16px;cursor:pointer; font-family:var(--disp);font-weight:700;font-size:.82rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted) } .mobile-menu details summary::-webkit-details-marker{display:none} .mobile-menu details summary::after{content:"▾";font-size:.8em;opacity:.6} .mobile-menu details[open] summary::after{transform:rotate(180deg)} .mobile-menu details a{min-height:46px;display:flex;align-items:center} /* ---------- the Verdict Stamp ---------- A stamp says something happened: a scout looked and ruled. Rotated a touch, double border, condensed caps. Colour carries the ruling: win = confident yes, gold = close/careful, loss = no, ink = neutral. */ .stamp{ display:inline-flex;align-items:center;justify-content:center; padding:.24em .6em;transform:rotate(-4deg); border:2.5px solid currentColor;border-radius:5px;position:relative; font-family:var(--disp);font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);line-height:1.05;white-space:nowrap } .stamp::after{content:"";position:absolute;inset:2.5px;border:1px solid currentColor; border-radius:2.5px;opacity:.55;pointer-events:none} .stamp.win{color:var(--win)} .stamp.gold{color:var(--tint-gold-fg)} .stamp.loss{color:var(--loss)} .stamp.ink{color:var(--muted)} .stamp.grade{font-size:2.6rem;padding:.1em .34em;border-width:3.5px} .stamp.grade::after{inset:4px;border-radius:3px} .stamp.sm{font-size:.66rem;border-width:2px;transform:rotate(-3deg)} .stamp.sm::after{inset:1.5px;opacity:.45} /* ---------- grade + highlight system (League HQ) ---------- */ .hq-glance{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start} .hq-grade-card{ background:var(--card-bg);border:1px solid var(--line);border-radius:var(--rad); box-shadow:var(--shadow);padding:20px 22px;text-align:center;min-width:150px } .hq-grade-card .rank{margin-top:12px;font-size:.88rem;color:var(--muted)} .hq-grade-card .rank b{display:block;color:var(--chalk);font-size:1rem} .hl-rows{display:grid} .hl-row{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line)} .hl-row:first-child{border-top:0} .hl-row .lab{flex:0 0 92px;padding-top:2px; font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.12em; text-transform:uppercase;color:var(--faint)} .hl-row svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px; stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:square} @media(max-width:640px){ .hq-glance{grid-template-columns:1fr} .hq-grade-card{display:flex;align-items:center;justify-content:space-between; text-align:left;padding:14px 16px} .hq-grade-card .rank{margin:0} .hl-row .lab{flex-basis:74px} } /* ---------- workspace header ---------- Functional pages (Rankings, Injuries, player profiles, tools) open with the page identity and every control above the fold: title row, then a sticky controls row. No hero, no banner. */ .ws-head{padding:14px 0 0;border-bottom:1px solid var(--line);margin-bottom:16px} .ws-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px} .ws-title h1{font-size:clamp(1.45rem,3vw,1.9rem)} .ws-title .meta{color:var(--faint);font-size:.78rem} .ws-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-bottom:12px} .ws-controls .spacer{flex:1} .ws-controls select,.ws-controls input[type="search"],.ws-controls input[type="text"]{min-height:40px} @media(max-width:720px){ .ws-controls{overflow-x:auto;flex-wrap:nowrap;padding-bottom:10px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .ws-controls::-webkit-scrollbar{display:none} } /* ---------- mobile card rows (rankings) ---------- Below 720px a ranking table becomes card rows: rank, player, the one number that matters; everything else expands on tap. */ @media(max-width:720px){ .cardrows-mobile table,.cardrows-mobile thead,.cardrows-mobile tbody{display:block} .cardrows-mobile table,.cardrows-mobile tbody,.cardrows-mobile tr{width:100%;max-width:100%;min-width:0} .cardrows-mobile thead{display:none} .cardrows-mobile tr{ display:grid;grid-template-columns:34px minmax(0,1fr) auto 30px;align-items:center; gap:2px 10px;padding:9px 12px;margin:0 0 8px; background:var(--card-bg);border:1px solid var(--line);border-radius:8px } .cardrows-mobile td{display:block;padding:0;border:0} .cardrows-mobile td.cr-rank{font-family:var(--disp);font-weight:700;color:var(--faint)} .cardrows-mobile td.cr-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cardrows-mobile td.cr-key{font-weight:700;font-variant-numeric:tabular-nums;text-align:right} .cardrows-mobile td.cr-more{text-align:right} .cardrows-mobile .cr-x{display:none;grid-column:1 / -1; border-top:1px solid var(--line);margin-top:7px;padding-top:8px; font-size:.82rem;color:var(--muted)} .cardrows-mobile tr.open .cr-x{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .cardrows-mobile .cr-x b{display:block;color:var(--ink);font-size:.95rem} .cardrows-mobile .cr-x span{display:block;font-size:.64rem;letter-spacing:.08em; text-transform:uppercase;color:var(--faint)} /* 44px, not 30: this is a thumb target on the page where thumbs do all the work, and it was the smallest control on the site (UX review #4). */ .cardrows-mobile .cr-btn{ width:44px;height:44px;border:1px solid var(--line);border-radius:6px; background:none;color:var(--muted);cursor:pointer;font-size:.8rem;line-height:1} .cardrows-mobile tr.open .cr-btn{transform:rotate(180deg)} } /* ---------- pinned first column for wide statistical tables ---------- */ .tablewrap.pinfirst{position:relative} .tablewrap.pinfirst table th:first-child,.tablewrap.pinfirst table td:first-child{ position:sticky;left:0;z-index:2;background:var(--bg2); box-shadow:2px 0 0 var(--line)} .tablewrap.pinfirst table thead th:first-child{z-index:3} .tablewrap.pinfirst::after{ /* unmistakable "there is more" cue */ content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none; background:linear-gradient(to left,var(--bg0),transparent); opacity:0;transition:opacity .15s} .tablewrap.pinfirst.has-more::after{opacity:1} .tablewrap.pinfirst .scroll-cue{ position:absolute;top:50%;right:6px;transform:translateY(-50%); width:26px;height:26px;border-radius:50%;pointer-events:none; background:var(--accent);color:var(--btn-ink);display:none; align-items:center;justify-content:center;font-size:.8rem;z-index:4} .tablewrap.pinfirst.has-more .scroll-cue{display:flex} /* ---------- skeleton loading states ---------- The skeleton is the final layout with the ink drained out of it: same boxes, same heights, so nothing jumps when data lands. */ @keyframes skel-pulse{0%,100%{opacity:.55}50%{opacity:.95}} .skel{position:relative;color:transparent !important;pointer-events:none;user-select:none} .skel,.skel-bar{background:var(--bg3);border-radius:4px;animation:skel-pulse 1.3s ease-in-out infinite} .skel-bar{display:block;height:.9em;margin:.45em 0} .skel-bar.w40{width:40%}.skel-bar.w60{width:60%}.skel-bar.w80{width:80%} @media(prefers-reduced-motion:reduce){.skel,.skel-bar{animation:none}} /* ---------- accessibility floor ---------- */ .btn,.chip-btn,.menu-btn,.theme-toggle{min-height:44px} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* card-row support cells: invisible on desktop, structural on mobile */ .cardrows-mobile .cr-more,.cardrows-mobile .cr-x,.cardrows-mobile .cr-sub{display:none} @media(max-width:720px){ .cardrows-mobile .cr-hide{display:none} .cardrows-mobile td.cr-more{display:block} .cardrows-mobile .cr-sub{display:block;font-size:.72rem;color:var(--faint)} .cardrows-mobile td.cr-name a{font-weight:600} } /* Tightest screens: the wordmark text would truncate mid-word next to the HQ pill, and a wordmark either spells MUSTDRAFT exactly or does not appear — so below 430px the mark carries the identity alone. */ @media(max-width:430px){ .wordmark{font-size:0;gap:0} .wordmark .brand-mark{width:26px;height:26px;margin-right:0} } /* ---------- League HQ sample report card ---------- One component, shared by the homepage hero and the signed-out League HQ page (UX review #1): the page that asks for an account must show what the account buys. Moved here from index.html's inline styles the day League HQ needed it too — a third copy would have been the one that drifted. */ .hq-preview{flex:0 1 24em;position:relative;padding:18px 18px 14px} .sample-tag{position:absolute;top:-10px;right:14px;background:var(--tint-gold-bg); color:var(--tint-gold-fg);font-size:.64rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;padding:4px 8px;border-radius:4px} .hqp-top{display:flex;align-items:center;gap:18px;margin-bottom:12px} .hqp-rank b{display:block;font-size:1.05rem;color:var(--chalk)} .hqp-rank span{font-size:.8rem;color:var(--muted)} .hqp-pos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:11px} .hqp-pos>span{border:1px solid var(--line);border-radius:6px;padding:5px 9px; text-align:center;min-width:52px} .hqp-pos b{display:block;font-family:var(--disp);font-size:1.02rem;color:var(--chalk)} .hqp-pos small{font-size:.62rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase} .hqp-line{font-size:.85rem;color:var(--muted);margin:4px 0 0} .hqp-line b{color:var(--ink)} @media(max-width:860px){ .hq-preview{flex-basis:100%} }