/* BBSFL Rosters — read-only. System font stack: a web font would cost as much as the entire data payload for a table-heavy page where legibility wins. */ /* Dark is the base; the OS preference switches to light; an explicit data-theme on overrides BOTH, so the toggle always wins. */ :root { --bg: #0f1115; --panel: #171a21; --line: #262b36; --ink: #e8eaee; --muted: #9aa3b2; --dim: #6b7484; --ok: #3fb950; --warn: #d29922; --bad: #f85149; --link: #58a6ff; /* --link is tuned to be read AS TEXT on --bg, which makes it far too light to sit under white. A filled control needs its own value. */ --accent-fill: #1f6feb; --radius: 10px; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f6f7f9; --panel: #ffffff; --line: #e3e6ea; --ink: #1b1f27; --muted: #5b6472; --dim: #8a929f; --ok: #1a7f37; --warn: #9a6700; --bad: #cf222e; --link: #0969da; --accent-fill: #0969da; } } :root[data-theme="light"] { --bg: #f6f7f9; --panel: #ffffff; --line: #e3e6ea; --ink: #1b1f27; --muted: #5b6472; --dim: #8a929f; --ok: #1a7f37; --warn: #9a6700; --bad: #cf222e; --link: #0969da; --accent-fill: #0969da; } :root[data-theme="dark"] { --bg: #0f1115; --panel: #171a21; --line: #262b36; --ink: #e8eaee; --muted: #9aa3b2; --dim: #6b7484; --ok: #3fb950; --warn: #d29922; --bad: #f85149; --link: #58a6ff; --accent-fill: #1f6feb; } /* Theme toggle */ .theme { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; min-height: 32px; } .theme:hover { color: var(--ink); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } /* ---- header ------------------------------------------------------------- */ .hdr { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; } /* Three rows, in the order a reader needs them: context, sections, sub-section. One wrapping flex line put the team switcher below two rows of tabs on a phone and clipped its label. */ .hdr-in { max-width: 1120px; margin: 0 auto; padding: 8px 16px 0; } .hdr-top { display: flex; align-items: center; gap: 12px; min-height: 40px; } .brand { display: flex; align-items: baseline; gap: 7px; color: var(--ink); flex: none; } .brand:hover { text-decoration: none; } .brand-mark { font-weight: 700; letter-spacing: .04em; } .brand-sub { color: var(--muted); font-size: 13px; } /* WRAPS. With six tabs and a team switcher this bar outgrew the header and silently clipped whatever sat on the right — the Practice Squads tab existed, shipped, and could not be seen. A nav that hides its own items is worse than one that takes two lines. */ /* Its own row, reading left to right from the wordmark above it rather than pushed to the right edge by whatever shares the line. */ .tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-start; padding: 4px 0 8px; } .tab { padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; } .tab.is-on { background: var(--bg); color: var(--ink); border: 1px solid var(--line); } .fresh { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); } .dot.is-fresh { background: var(--ok); } .dot.is-aging { background: var(--warn); } .dot.is-stale { background: var(--bad); } /* ---- banner ------------------------------------------------------------- */ .banner { padding: 10px 16px; font-size: 14px; text-align: center; } .banner.is-warn { background: rgba(210,153,34,.15); color: var(--warn); border-bottom: 1px solid var(--line); } .banner.is-stale { background: rgba(248,81,73,.15); color: var(--bad); border-bottom: 1px solid var(--line); } /* ---- page --------------------------------------------------------------- */ main { padding: 22px 0 60px; } .page-h { font-size: 22px; margin: 0 0 2px; } .page-sub { color: var(--muted); margin: 0 0 18px; font-size: 14px; } .crumb { margin: 0 0 12px; font-size: 14px; } .conf { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); margin: 26px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 5px; } .div { font-size: 14px; margin: 16px 0 7px; color: var(--muted); font-weight: 600; } /* ---- tables ------------------------------------------------------------- */ /* Wide content scrolls inside its own container; the body never scrolls sideways on a phone. */ .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .tbl th, .tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; background: var(--panel); position: sticky; top: 0; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl tbody tr:hover { background: rgba(127,127,127,.06); } .num { text-align: right; } .neg { color: var(--bad); } /* Inactive rows are NOT dimmed. Colour already marks every one of them (323 of 323 in the live snapshot), and a 55% opacity on top turned the rookie blue into a grey smear — muting the one signal that was supposed to carry. */ .team-cell a { display: flex; align-items: center; gap: 9px; min-height: 32px; color: var(--ink); } /* 22px was too small to identify a crest at a glance, and worse on a phone where it competed with 14px text. These are the one image on the page — they should be the thing the eye lands on. */ .logo { width: 54px; height: 54px; object-fit: contain; flex: none; } .logo.lg { width: 104px; height: 104px; } .tname { font-weight: 600; } .tcode { color: var(--dim); font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; } .cap-col { width: 130px; } .bar { height: 7px; background: rgba(127,127,127,.22); border-radius: 999px; overflow: hidden; min-width: 90px; } .bar i { display: block; height: 100%; border-radius: 999px; } .bar i.is-ok { background: var(--ok); } .bar i.is-warn { background: var(--warn); } .bar i.is-bad { background: var(--bad); } .pname { display: flex; flex-direction: column; gap: 1px; } .pid { color: var(--dim); font-size: 11px; font-family: ui-monospace, Menlo, Consolas, monospace; } .note { font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 1px 7px; border-radius: 999px; } /* ---- chips / pills ------------------------------------------------------ */ .chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; font-weight: 600; } .chip.is-ok { color: var(--ok); } .chip.is-warn { color: var(--warn); } .chip.is-bad { color: var(--bad); } .team-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; } .pill { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 13px; min-width: 116px; } .pill .pl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); } .pill .pv { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .pill.is-bad .pv { color: var(--bad); } .pill.is-warn .pv { color: var(--warn); } .issues { margin: 0 0 16px; padding: 10px 14px 10px 30px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--radius); } .issues li { font-size: 14px; } .toolbar { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; } .toolbar input { flex: 1 1 260px; max-width: 340px; padding: 8px 12px; min-height: 38px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; } /* ---- states ------------------------------------------------------------- */ .loading { text-align: center; padding: 60px 0; color: var(--muted); } .spinner { width: 26px; height: 26px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--link); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } } .empty { text-align: center; padding: 50px 16px; color: var(--muted); } .empty h2 { color: var(--ink); } .ftr { border-top: 1px solid var(--line); padding: 16px 0 30px; color: var(--dim); font-size: 13px; } /* ---- mobile ------------------------------------------------------------- */ @media (max-width: 640px) { body { font-size: 14px; } .hdr-in { flex-wrap: wrap; gap: 8px; } .fresh { width: 100%; order: 3; } .tbl th, .tbl td { padding: 8px 9px; } .cap-col { display: none; } /* the bar is decorative; the numbers are not */ /* Age goes; the three ratings and durability stay. Durability sits beside Sim $ and is read with it. */ .tbl-team .c-age { display: none; } .pill { flex: 1 1 44%; min-width: 0; } .toolbar input { max-width: none; } } /* Status filter — sits beside the search box, wraps on narrow screens. */ .toolbar { flex-wrap: wrap; } .toolbar select { padding: 8px 12px; min-height: 38px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; max-width: 100%; } .toolbar select option[disabled] { color: var(--dim); } @media (max-width: 640px) { .toolbar input { flex: 1 1 100%; } .toolbar select { flex: 1 1 100%; } } /* ---- position-grouped roster ------------------------------------------- */ /* The side of the ball is the OUTER heading — it was set smaller and dimmer than the position groups nested under it, which read as an inverted hierarchy: QB looked more important than OFFENSE. */ .side { font-size: 18px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); margin: 34px 0 10px; border-bottom: 2px solid var(--line); padding-bottom: 8px; display: flex; align-items: center; gap: 10px; } .side::before { content: ""; width: 4px; height: 19px; border-radius: 2px; background: var(--link); flex: none; } .side:first-of-type { margin-top: 22px; } .grp { font-size: 14px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; display: flex; align-items: baseline; gap: 8px; } .grp-n { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; } /* inline rating chips */ .rt { max-width: 260px; white-space: normal; } .rchip { display: inline-flex; align-items: baseline; gap: 4px; margin: 1px 4px 1px 0; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; } .rchip i { font-style: normal; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; } /* clickable row + detail panel */ .prow { cursor: pointer; } .prow:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; } .prow.is-open { background: rgba(88,166,255,.10); } .prow.is-open td { border-bottom-color: transparent; } .pdetail td { background: rgba(127,127,127,.05); padding: 0 12px 14px; } .pd { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; padding-top: 4px; } .pd-sec h4 { margin: 6px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 600; } .rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px 14px; } .rgrid div { display: flex; flex-direction: column; gap: 1px; } .rgrid i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); } .rgrid b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { /* The out-year salaries go instead of a rating. This rule used to hide nth-child(5), which was the FIRST STAT — a phone showed two of three ratings on the page people open specifically to compare ratings. */ .tbl-team .c-y2, .tbl-team .c-y3 { display: none; } .pd { grid-template-columns: 1fr; gap: 14px; } } /* ---- results: week picker + winner emphasis ----------------------------- */ .weeks { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; } .wk { min-width: 34px; min-height: 34px; padding: 4px 9px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; } .wk:hover { color: var(--ink); } .wk.is-on { background: var(--link); border-color: var(--link); color: #fff; font-weight: 600; } .tbl td.won { font-weight: 700; color: var(--ink); } /* ------------------------------------------------------- free agents ----- */ /* Borrows the week-picker's shape so the pool reads as the same application, not a bolted-on page. */ .fa-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 10px; } .fa-search { flex: 1 1 260px; min-width: 200px; min-height: 38px; padding: 7px 12px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; } .fa-search::placeholder { color: var(--muted); } .fa-search:focus-visible, .fa-sort select:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; } .fa-sort { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; } .fa-sort select { min-height: 38px; padding: 6px 10px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; } .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } /* .fchip, not .chip — .chip is the compliance badge and shares no behaviour. */ .fchip { min-height: 34px; padding: 5px 11px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; } .fchip:hover { color: var(--ink); } .fchip.is-on { background: var(--link); border-color: var(--link); color: #fff; font-weight: 600; } .fchip.is-on .fchip-n { color: #fff; opacity: .85; } .fchip-n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; } .fa-count { color: var(--muted); font-size: 13px; margin: 0 0 8px; } .fa-more { text-align: center; margin: 14px 0 4px; } .btn { min-height: 40px; padding: 9px 20px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; } .btn:hover { border-color: var(--link); color: var(--link); } .btn:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; } /* ----------------------------------------------------------- my team ----- */ .mt-attn { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; margin: 14px 0 18px; } .mt-attn > header { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .mt-attn > header .n { background: var(--bad); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 11px; letter-spacing: 0; font-weight: 700; } /* Severity is a stripe as well as a word, so it survives a grayscale print and does not depend on colour alone. */ .mt-task { padding: 11px 14px; border-top: 1px solid var(--line); border-left: 3px solid transparent; } .mt-task:first-of-type { border-top: 0; } .mt-task.is-bad { border-left-color: var(--bad); } .mt-task.is-warn { border-left-color: var(--warn); } .mt-task .t { font-weight: 600; } .mt-task .d { color: var(--muted); font-size: 13px; margin-top: 1px; } .mt-clear { margin: 14px 0 18px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); color: var(--muted); } .mt-meter { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; } .mt-meter i { display: block; height: 100%; background: var(--warn); } .mt-none { color: var(--muted); } .mt-note { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; } .mt-note b { color: var(--ink); } .mt-year { border-top: 1px solid var(--line); background: var(--bg); font-size: 13px; color: var(--muted); } .mt-year b { color: var(--ink); } .mt-slack { margin: 18px 0 8px; padding: 14px; border-radius: var(--radius); border: 1px dashed var(--line); color: var(--muted); font-size: 13.5px; } .mt-slack b { color: var(--ink); } .mt-links { margin: 10px 0 0; } .mt-links a { color: var(--link); } /* Specificity: ".row .sp b" is (0,2,1) and was silently beating a bare "b.is-warn" at (0,1,1), so the tone never showed. Match the depth. */ .row .sp b.is-warn, b.is-warn { color: var(--warn); } .row .sp b.is-bad, b.is-bad { color: var(--bad); } .row .sp b.is-ok, b.is-ok { color: var(--ok); } .card .in.flush + .in { border-top: 1px solid var(--line); } /* Card, and the label/value rows inside it. These were written for My Team and were MISSING from this stylesheet entirely — the markup shipped referencing classes that only ever existed in a mockup, so the Cap block rendered as run together plain text. The render tests assert on HTML, not on CSS, and so could not see it. */ .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; margin: 0 0 16px; } .card > header { padding: 11px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 9px; } .card h2 { margin: 0; font-size: 14px; font-weight: 650; } .card .count { margin-left: auto; font-size: 12px; color: var(--muted); } .card .in { padding: 11px 14px; } .card .in.flush { padding: 0; } .row { display: flex; gap: 10px; align-items: baseline; padding: 9px 14px; border-top: 1px solid var(--line); } .row:first-child { border-top: 0; } .row .nm { font-weight: 550; } .row .po { color: var(--dim); font-size: 12px; } .row .sp { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .row .sp b { color: var(--ink); font-weight: 600; } /* A row that goes somewhere. Same shape as a plain row so a list does not comb into linked and unlinked halves — the chevron and the hover carry it. */ a.row.rowlink { color: inherit; text-decoration: none; cursor: pointer; } a.row.rowlink:hover { background: rgba(127,127,127,.07); text-decoration: none; } a.row.rowlink:hover .nm { color: var(--link); } a.row.rowlink:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; } .rowgo { color: var(--dim); font-size: 15px; line-height: 1; margin-left: 4px; } a.row.rowlink:hover .rowgo { color: var(--link); } /* The way back out of a deep link. */ /* The one control a reader arriving from a link actually needs, so it stops sharing a palette with every inert chip on the page. */ .backlink { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 14px; padding: 8px 18px; font-size: 15px; font-weight: 650; letter-spacing: .01em; color: #fff; background: var(--accent-fill); border: 1px solid var(--accent-fill); border-radius: 999px; text-decoration: none; box-shadow: 0 2px 10px rgba(31, 111, 235, .35); } .backlink:hover { color: #fff; text-decoration: none; filter: brightness(1.1); } .backlink:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } /* Three pulses on arrival, then it settles. A permanent pulse beside the deal you came to read fights the thing it points away from — the job is to be found on arrival, not to keep flashing while you read. It stays the loudest control on the block either way. */ .trade-focus .backlink { animation: backlink-flash 0.75s ease-in-out 3; } @keyframes backlink-flash { 0%, 100% { transform: scale(1); box-shadow: 0 2px 10px rgba(31,111,235,.35); } 50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(31,111,235,.38); } } @media (prefers-reduced-motion: reduce) { .trade-focus .backlink { animation: none; } } @media (max-width: 640px) { /* Full width on a phone: it is the primary action on this screen. */ .trade-focus .backlink { display: flex; justify-content: center; width: 100%; } } /* A small status badge. NOT .pill — that is the wide stat card above, and reusing it turned every badge into a 116px panel. */ .tag { font-size: 10.5px; letter-spacing: .04em; font-weight: 650; padding: 2px 7px; border-radius: 999px; white-space: nowrap; border: 1px solid currentColor; } .tag.is-bad { color: var(--bad); } .tag.is-warn { color: var(--warn); } .tag.is-info { color: var(--link); } .tag.is-ok { color: var(--ok); } /* Special-teams tags cut across the position groups, so they sit on their own row with a label rather than extending the same list. */ .chips-st { align-items: center; margin-top: -4px; } .chips-lbl { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); margin-right: 2px; } /* The id lives in the detail panel now, not under every name. */ .pid-val { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); font-weight: 500; } /* A penalty row names the player whose exit caused the charge — the row is not that player, and the label says so. */ .pname .cause { display: block; font-size: 11px; color: var(--dim); letter-spacing: .02em; margin-top: 1px; } /* Team sub-navigation: Roster / Front office. */ .subtabs { display: flex; gap: 4px; margin: 14px 0 4px; border-bottom: 1px solid var(--line); } .subtab { padding: 8px 14px; font-size: 14px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .subtab:hover { color: var(--ink); } .subtab.is-on { color: var(--ink); border-bottom-color: var(--link); font-weight: 600; } /* The team chip in the header is a switcher, not a label. */ /* The team being looked at: first thing after the wordmark, and given room for the longest name in the league rather than a fixed 190px that cut "Seoul Eclipse" to "Seoul Eclip". */ .teamsel { display: inline-flex; margin-right: auto; min-width: 0; } .teamsel select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; padding: 7px 30px 7px 14px; cursor: pointer; min-height: 34px; max-width: min(320px, 60vw); text-overflow: ellipsis; } .teamsel select:hover { border-color: var(--muted); } .teamsel select:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; } /* ---------------------------------------------------------- draft board -- */ .tbl-draft td { vertical-align: top; } .tbl-draft .rnd td { background: var(--bg); color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 12px 6px; border-top: 1px solid var(--line); } /* Draft rows are clickable like player rows, but a touch tighter. */ .dpick td { padding-top: 10px; padding-bottom: 10px; } .dnum { width: 78px; font-variant-numeric: tabular-nums; white-space: nowrap; } .dnum small { display: block; font-size: 11px; color: var(--dim); } .dteam { width: 108px; } .dteam a { color: var(--link); text-decoration: none; font-weight: 600; } .dteam a:hover { text-decoration: underline; } .dteam .via { display: block; font-size: 11px; color: var(--dim); } .dsel b { font-weight: 600; } .dsel small { display: block; font-size: 12px; color: var(--muted); } .dpending { color: var(--dim); } .dmoves { text-align: right; color: var(--dim); font-size: 12px; white-space: nowrap; } /* A pick's trail. Ordered because the sequence is the information. */ .chain { list-style: none; margin: 0; padding: 0; } .chain li { position: relative; padding: 0 0 10px 18px; border-left: 2px solid var(--line); margin-left: 4px; } .chain li:last-child { border-left-color: transparent; padding-bottom: 0; } .chain li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--panel); border: 2px solid var(--link); } .chain li:first-child::before { border-color: var(--dim); } .chain i { font-style: normal; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); } .chain b { font-weight: 600; } .chain small { color: var(--muted); font-size: 12px; margin-left: 6px; } .warn-note { color: var(--warn); font-size: 13px; margin: 10px 0 0; } .warn-note b { color: var(--ink); } /* A step the trade log never recorded. Dashed, because it is an inference about what must have happened, not a thing that was written down. */ .chain li.gap { border-left-style: dashed; border-left-color: var(--warn); } .chain li.gap::before { border-color: var(--warn); background: var(--bg); } .chain li.gap b { color: var(--warn); } /* Crests are LARGER on a phone, not smaller: the screen is small, so the one thing that identifies a row at a glance has to work harder. */ @media (max-width: 640px) { .logo { width: 58px; height: 58px; } .logo.lg { width: 88px; height: 88px; } } /* Standings: rank column and the sub-row used for a pick's trade chain. */ .tbl-standings .rk { width: 34px; color: var(--dim); } .row.rowsub { padding-top: 0; border-top: 0; } .row.rowsub .po { font-size: 11.5px; } /* Conference identity, in the conferences' OWN colours: AFC red #D50A0A, NFC navy #013369. As a FILLED BAND, not coloured text. The navy is the point — and as a text colour on the dark ground it measures about 1.3:1, which is invisible. On a band it is the background, white sits on it at better than 12:1, and the same true colour works in both themes instead of two washed-out substitutes. Named --conf so the division rows below can inherit the same hue. */ .conf { font-size: 20px; letter-spacing: .06em; font-weight: 800; margin: 32px 0 0; padding: 9px 16px; border-radius: 8px 8px 0 0; background: var(--conf-fill); color: #fff; border-bottom: 0; display: flex; align-items: center; gap: 10px; } /* TWO tokens, because a conference colour has two jobs with opposite requirements. --conf-fill is the true colour and is only ever a background, with white on it. --conf-ink is the same identity adjusted to stay legible AS TEXT on whichever ground the theme is using — navy on near-black measures about 1.3:1, so text cannot use the fill value. */ .is-afc { --conf-fill: #d50a0a; --conf-ink: #f2666b; } .is-nfc { --conf-fill: #013369; --conf-ink: #6b9fe0; } @media (prefers-color-scheme: light) { /* On white the true colours are legible as text, so identity wins. */ :root:not([data-theme="dark"]) .is-afc { --conf-ink: #b00808; } :root:not([data-theme="dark"]) .is-nfc { --conf-ink: #013369; } } :root[data-theme="light"] .is-afc { --conf-ink: #b00808; } :root[data-theme="light"] .is-nfc { --conf-ink: #013369; } /* The table tucks under its own band. */ .conf + .tbl-wrap { border-top-left-radius: 0; border-top-right-radius: 0; } /* Divisions are the structure of the table, so they read as headings rather than as another row — and they carry their conference's colour, which is what makes a division scannable inside a twelve-row table. */ .tbl-league .divrow td { font-size: 15px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--conf-ink, var(--ink)); padding: 18px 12px 8px; border-bottom: 2px solid var(--conf-ink, var(--line)); } /* Standings shows divisions as headings above their own tables. */ .divhead.is-afc, .divhead.is-nfc { color: var(--conf-ink); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; border-bottom: 2px solid var(--conf-ink); padding-bottom: 6px; } /* Sim salary is a different KIND of money from the cap figures beside it — what the sim thinks a roster is worth, not what it costs. Coloured so the two are not read as one another. */ /* Green, not blue: sim salary is a value figure and reads apart from the cap numbers beside it. */ .tbl-league .sim-col { color: #3fb950; font-weight: 600; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .tbl-league .sim-col { color: #1a7f37; } } :root[data-theme="light"] .tbl-league .sim-col { color: #1a7f37; } /* Which of the twelve steps in Rule 15.2 settled a position. */ .tbnote td { padding: 2px 12px 8px 12px; font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--line); font-style: italic; } /* Standings share the league page's conference identity, and divisions read as headings there too rather than as faint labels above a table. */ .divhead { font-size: 17px; font-weight: 700; color: var(--ink); margin: 20px 0 8px; letter-spacing: -.01em; } /* The FA continuation round dwarfs the others, so it says why. */ .rnd-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--dim); font-size: 11px; } .dnum-none { color: var(--dim); font-weight: 400; } /* On a phone the tabs take the full width under the wordmark rather than competing with it for a few pixels. */ @media (max-width: 720px) { .tabs { margin-left: 0; width: 100%; justify-content: flex-start; } .tab-team select { max-width: 150px; } } /* The GM's Desk section nav. Sits under the roster/GM sub-tabs, so it is visually one step quieter than them. */ .subtabs.gmnav { border-bottom: 0; margin: 10px 0 12px; gap: 6px; flex-wrap: wrap; } .subtabs.gmnav .subtab { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px; border-bottom-width: 1px; margin-bottom: 0; } .subtabs.gmnav .subtab.is-on { background: var(--link); border-color: var(--link); color: #fff; } /* ---------------------------------------------------------------- trades -- */ .trade { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 8px; cursor: pointer; overflow: hidden; } .trade:hover { border-color: var(--muted); } .trade:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; } .trade.is-open { border-color: var(--link); } .trade-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .trade-teams { color: var(--ink); font-size: 14px; } .trade-date { font-variant-numeric: tabular-nums; white-space: nowrap; } .trade-id { margin-left: auto; font-size: 11px; color: var(--dim); } .trade-body { display: grid; gap: 10px; padding: 11px 14px; } @media (min-width: 620px) { .trade-body { grid-template-columns: 1fr 1fr; } } .tside i { font-style: normal; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin-bottom: 5px; } /* Players and picks are different KINDS of asset, so they do not look alike. */ .titem { display: inline-block; margin: 0 5px 5px 0; padding: 3px 9px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); } .titem.is-player { color: var(--ink); } a.titem.is-player { color: var(--link); border-color: color-mix(in srgb, var(--link) 40%, var(--line)); } a.titem.is-player:hover { text-decoration: none; border-color: var(--link); } .titem.is-pick { color: var(--muted); background: var(--bg); font-variant-numeric: tabular-nums; } .tside-none { color: var(--dim); font-size: 13px; font-style: italic; } .trade-detail { border-top: 1px solid var(--line); background: rgba(127,127,127,.05); padding: 12px 14px; } .tlist { list-style: none; margin: 0; padding: 0; } .tlist li { padding: 4px 0; font-size: 13.5px; border-bottom: 1px solid var(--line); } .tlist li:last-child { border-bottom: 0; } .tlist i { font-style: normal; display: inline-block; min-width: 52px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); } .tlist small { color: var(--muted); } /* -------------------------------------------------------------- rankings -- */ .tbl-rank .rk { width: 38px; color: var(--dim); } .tbl-rank .is-first { color: var(--ok); font-weight: 700; } .tbl-rank .sub { color: var(--dim); font-weight: 400; } .gval { font-variant-numeric: tabular-nums; } /* Leader badges. Three only — overall, offense, defense — so they stay meaningful. A badge on every team for every metric is wallpaper. */ .lead { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; vertical-align: middle; } .lead-all { background: #b8860b; color: #fff; } .lead-off { background: rgba(88,166,255,.18); color: #58a6ff; border: 1px solid rgba(88,166,255,.4); } .lead-def { background: rgba(63,185,80,.16); color: #3fb950; border: 1px solid rgba(63,185,80,.4); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lead-off { color: #0969da; border-color: rgba(9,105,218,.4); } :root:not([data-theme="dark"]) .lead-def { color: #1a7f37; border-color: rgba(26,127,55,.4); } } /* Sub-tabs read as SELECTABLE. An underline on a line of plain text is a weak signal next to the pill-shaped chips elsewhere on the same page — these are the same kind of control, so they get the same shape. */ .subtabs { border-bottom: 0; gap: 6px; margin: 16px 0 12px; flex-wrap: wrap; } .subtab { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); margin-bottom: 0; } .subtab:hover { color: var(--ink); border-color: var(--muted); text-decoration: none; } .subtab.is-on { background: var(--link); border-color: var(--link); color: #fff; font-weight: 600; } .subtab.is-on .fchip-n { color: #fff; opacity: .85; } /* ---- Live Auctions ------------------------------------------------------ */ /* A count on the tab: an auction has a deadline, so a reader has to be able to tell there is something here without opening the page. */ .tab-n { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px; border-radius: 999px; background: var(--warn); color: #14161b; font-size: 11px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .auc-grid { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } .auc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 8px; } .auc-hd { display: flex; align-items: center; gap: 10px; } .auc-hd .logo { width: 46px; height: 46px; } .auc-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .auc-who b { color: var(--ink); font-size: 14px; } .auc-who span { color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; } .auc-kind { margin-left: auto; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .auc-asset { margin: 2px 0 0; font-size: 19px; font-weight: 650; color: var(--ink); text-wrap: balance; } .auc-meta { margin: 0; color: var(--muted); font-size: 13px; } .auc-note { margin: 0; color: var(--muted); font-size: 13px; font-style: italic; border-left: 2px solid var(--line); padding-left: 9px; } /* The clock is the point of the card, so it is the largest thing on it. */ .auc-clock { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; } .auc-clock i { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .auc-t { font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* Urgency is stated by the clock, not by shouting the whole card. */ .auc.is-soon { border-color: rgba(210,153,34,.45); } .auc.is-soon .auc-t { color: var(--warn); } .auc.is-urgent { border-color: rgba(248,81,73,.55); } .auc.is-urgent .auc-t { color: var(--bad); } .auc.is-over .auc-t { font-size: 16px; color: var(--muted); font-weight: 600; } .auc-ft { display: flex; align-items: center; gap: 8px; font-size: 12px; } .auc-bids { color: var(--muted); font-variant-numeric: tabular-nums; } .auc-blind { margin-left: auto; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; cursor: help; } .mt-lg { margin-top: 28px; } /* ---- second-level nav --------------------------------------------------- */ /* Sits under the header as its own band so the two levels read as a hierarchy rather than as two rows of chips that happen to be near each other. */ .subnav { background: var(--panel); border-bottom: 1px solid var(--line); } .subnav .subtabs { margin: 0; padding: 9px 0; } /* ---- conditional picks -------------------------------------------------- */ /* The row itself stays plain — the tag carries the signal. A tinted row for every conditional pick would compete with the note colours on the roster, which already own "this row is different". */ .row.has-cond[data-cond] { cursor: pointer; } .row.has-cond[data-cond]:hover { background: rgba(127,127,127,.07); } .row.has-cond[data-cond]:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; } .condrow { display: block; padding-left: 14px; padding-right: 14px; padding-bottom: 10px; } /* The agreed wording, verbatim, so it wraps rather than truncating — a half-shown condition is worse than none. */ .cond-t { display: block; color: var(--ink); font-size: 13px; line-height: 1.45; white-space: normal; border-left: 2px solid var(--warn); padding-left: 10px; } .cond-f { display: inline-block; margin-top: 5px; margin-left: 12px; font-size: 12px; color: var(--muted); } .cond-f b { color: var(--ink); } .cond-n { display: inline-block; margin-top: 5px; margin-left: 12px; font-size: 12px; color: var(--dim); font-style: italic; } /* On a phone the two header rows are what keeps the switcher readable: the wordmark and the team share row one, and the sections wrap freely below. */ @media (max-width: 640px) { .hdr-in { padding: 6px 12px 0; } .hdr-top { gap: 8px; flex-wrap: wrap; } .teamsel { order: 3; flex-basis: 100%; margin-right: 0; } .teamsel select { max-width: 100%; width: 100%; } .tabs { gap: 3px; } .tab { padding: 6px 10px; font-size: 13.5px; } } /* ---- league-wide search ------------------------------------------------- */ .lsearch { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; } .lsearch .fa-search { flex: 1 1 auto; min-width: 0; } .lq-clear { flex: none; } /* A crest in a result row is an identifier, not the subject of the page. */ .logo-sm { width: 26px; height: 26px; } .tbl-search .team-cell a { gap: 7px; } /* ---- trade block -------------------------------------------------------- */ /* The stat triple is position-specific, so it reads as an aside on the row rather than as columns that would mean different things line to line. */ .tb-stats { color: var(--muted); font-size: 12px; white-space: nowrap; } .tb-note { color: var(--muted); font-size: 12.5px; font-style: italic; border-left: 2px solid var(--line); padding-left: 9px; white-space: normal; } .tb-needs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .tb-needs i { font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-right: 3px; } .card header .logo-sm { margin-right: 2px; } /* ---- home venue --------------------------------------------------------- */ .venue-name { font-size: 19px; font-weight: 650; margin: 0 0 2px; color: var(--ink); } .venue-sub { margin: 0; color: var(--muted); font-size: 13.5px; } .venue-key { display: grid; gap: 12px; border-top: 1px solid var(--line); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* A bare "4" means nothing, so every rating carries its scale. */ .vstat { display: flex; flex-direction: column; gap: 1px; } .vstat i { font-style: normal; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); } .vstat b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .vstat small { color: var(--dim); font-size: 11px; } .venue-temps { display: grid; gap: 8px; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); } .vtemp { text-align: center; } .vtemp i { display: block; font-style: normal; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); } .vtemp b { font-size: 17px; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .venue-temps { grid-template-columns: repeat(3, 1fr); } } /* How a player got here. */ .prov { margin: 0; color: var(--muted); font-size: 13.5px; } .prov b { color: var(--ink); } /* A deep link lands on ONE deal, so it gets its own block above the list rather than being buried in it. */ .trade-focus { margin: 0 0 6px; } .trade-focus .trade { border-color: var(--link); } /* ---- the Live tab ------------------------------------------------------- */ /* It can afford to flash: the tab only exists when something IS live, so this is never decoration competing for attention with nothing behind it. */ .tab.is-live { color: var(--ink); font-weight: 600; } .tab-bolt { display: inline-block; margin-right: 5px; font-size: 13px; line-height: 1; animation: bolt-flash 1.5s ease-in-out infinite; } @keyframes bolt-flash { 0%, 100% { opacity: 1; transform: scale(1); } 45% { opacity: .25; transform: scale(.9); } } /* The bolt pulses, not the whole label — a flashing block of text beside four static ones is hard to read past, and the job is to catch the eye, not to keep the label unreadable once it has. */ @media (prefers-reduced-motion: reduce) { .tab-bolt { animation: none; } } /* The back link belongs to the focused deal, so it sits on it — not above the page furniture where a phone's wrapped filter chips push it off screen. */ .trade-focus .backlink { margin-bottom: 10px; } /* ============================================================ Game Zone === The whip-around. Structure inherits the page's neutral tokens so it themes for free; only the accents (red zone, live green, amber ball, star) and the turf are fixed, because a football field is green in any UI theme. */ .gamezone { --gz-panel: var(--panel); --gz-panel2: var(--bg); --gz-line: var(--line); --gz-ink: var(--ink); --gz-mute: var(--muted); --gz-dim: var(--dim); --gz-rz: #ff2b3d; --gz-live: #2ee06a; --gz-live-ink: #2ee06a; --gz-warn: #ffb020; --gz-star: #ffd257; --gz-turf: #12331e; --gz-turf-line: #1d4a2c; --gz-accent: var(--accent-fill); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .gamezone { --gz-live-ink: #1a7f37; --gz-panel2: #eef1f5; } } :root[data-theme="light"] .gamezone { --gz-live-ink: #1a7f37; --gz-panel2: #eef1f5; } :root[data-theme="dark"] .gamezone { --gz-live-ink: #2ee06a; --gz-panel2: #12161d; } .gamezone { padding-bottom: 56px; } .gz-drilled { display: block; } /* Open Team Activity — counts-only strip on the team page (silent when none). */ .open-activity { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin: 10px 0 2px; padding: 9px 13px; border: 1px solid var(--line); border-left: 3px solid var(--accent-fill); border-radius: 9px; background: var(--panel); font-size: 13.5px; color: var(--muted); } .open-activity .oa-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 600; } .open-activity b { color: var(--ink); } .open-activity .oa-items { display: inline; } .open-activity .oa-sep { color: var(--dim); } .gz-head { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 14px; } .gz-title { font-size: 22px; font-weight: 800; letter-spacing: .01em; margin: 0; } .gz-count { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gz-mute); font-variant-numeric: tabular-nums; } .gz-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--gz-live); box-shadow: 0 0 0 0 rgba(46,224,106,.7); animation: gz-pulse 2s infinite; flex: none; } @keyframes gz-pulse { 70% { box-shadow: 0 0 0 9px rgba(46,224,106,0); } 100% { box-shadow: 0 0 0 0 rgba(46,224,106,0); } } .gz-sec { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--gz-dim); margin: 26px 0 10px; } .gz-rzstrip { background: linear-gradient(90deg, var(--gz-rz), #c4121f); color: #fff; border-radius: 8px; padding: 9px 14px; margin-bottom: 14px; font-size: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .gz-rzstrip b { letter-spacing: .14em; font-size: 11.5px; text-transform: uppercase; background: rgba(0,0,0,.28); padding: 3px 9px; border-radius: 4px; } .gz-watch { color: #fff; text-decoration: underline; font-weight: 650; } .gz-main { display: grid; gap: 20px; grid-template-columns: 1fr 360px; align-items: start; } @media (max-width: 1040px) { .gz-main { grid-template-columns: 1fr; } } .gz-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .gz-card { background: var(--gz-panel); border: 1px solid var(--gz-line); border-radius: 12px; overflow: hidden; position: relative; transition: border-color .15s, transform .15s; } .gz-card:hover { border-color: var(--gz-mute); transform: translateY(-1px); } .gz-card.rz { border-color: var(--gz-rz); box-shadow: 0 0 0 1px var(--gz-rz), 0 0 26px rgba(255,43,61,.22); } .gz-card.followed { border-color: var(--gz-star); box-shadow: 0 0 0 1px var(--gz-star); } .gz-card-open { display: block; text-decoration: none; color: inherit; } .gz-card-open:focus-visible { outline: 3px solid var(--gz-live); outline-offset: 2px; } .gz-star { position: absolute; top: 6px; right: 8px; font-size: 15px; color: var(--gz-dim); line-height: 1; padding: 4px 6px; border-radius: 6px; z-index: 2; background: none; border: 0; cursor: pointer; } .gz-star:hover { color: var(--gz-star); background: rgba(127,127,127,.12); } .gz-star.on { color: var(--gz-star); } .gz-chead { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px; border-bottom: 1px solid var(--gz-line); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gz-dim); padding-right: 38px; } .gz-st { display: flex; align-items: center; gap: 6px; color: var(--gz-live-ink); font-weight: 700; } .gz-flag { margin-left: auto; font-weight: 800; padding: 2px 8px; border-radius: 4px; letter-spacing: .09em; } .gz-flag.rzf { background: var(--gz-rz); color: #fff; } .gz-flag.top { background: var(--gz-live); color: #06210f; } .gz-flag.yours { background: var(--gz-star); color: #2a1d00; } .gz-row { display: flex; align-items: center; gap: 11px; padding: 11px 12px; } .gz-row + .gz-row { border-top: 1px solid var(--gz-line); } .gz-mono { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; flex: none; } .gz-mono-lg { width: 54px; height: 54px; font-size: 16px; border-radius: 12px; } .gz-tn { display: flex; flex-direction: column; min-width: 0; } .gz-tn b { font-size: 15px; font-weight: 700; } .gz-tn i { font-style: normal; font-size: 11.5px; color: var(--gz-dim); } .gz-sc { margin-left: auto; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .gz-poss { width: 8px; height: 8px; border-radius: 50%; background: var(--gz-warn); flex: none; } .gz-poss.off { background: transparent; } .gz-sit { display: flex; gap: 9px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--gz-line); background: var(--gz-panel2); font-size: 12.5px; color: var(--gz-mute); } .gz-sit b { color: var(--gz-ink); font-weight: 650; } .gz-dd { background: rgba(127,127,127,.14); padding: 2px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; } .gz-last { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gz-card.rz .gz-sit { background: rgba(255,43,61,.13); } .gz-finals { display: grid; gap: 6px; margin-top: 8px; } .gz-fin { display: flex; align-items: center; gap: 12px; background: var(--gz-panel); border: 1px solid var(--gz-line); border-radius: 9px; padding: 9px 13px; font-size: 14px; text-decoration: none; color: var(--gz-mute); } .gz-fin:hover { border-color: var(--gz-mute); } .gz-fin .gz-fl { color: var(--gz-dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } .gz-fs { font-variant-numeric: tabular-nums; font-weight: 700; } .gz-fs.w { color: var(--gz-ink); } .gz-dash { color: var(--gz-dim); } .gz-mv { margin-left: auto; color: var(--gz-mute); font-size: 12.5px; } .gz-rail { background: var(--gz-panel); border: 1px solid var(--gz-line); border-radius: 12px; position: sticky; top: 12px; } .gz-rail h2 { margin: 0; padding: 13px 15px; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--gz-dim); border-bottom: 1px solid var(--gz-line); display: flex; align-items: center; gap: 8px; } .gz-feed { max-height: 70vh; overflow-y: auto; } .gz-feed-item { display: flex; gap: 11px; padding: 11px 15px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--gz-line); } .gz-feed-item:hover { background: rgba(127,127,127,.06); } .gz-stripe { width: 3px; border-radius: 2px; flex: none; } .gz-fk { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 3px; align-self: flex-start; white-space: nowrap; height: fit-content; } .gz-fk.TD { background: var(--gz-rz); color: #fff; } .gz-fk.FG { background: rgba(255,176,32,.18); color: var(--gz-warn); } .gz-fk.BIG { background: rgba(46,224,106,.15); color: var(--gz-live-ink); } .gz-fk.SAF, .gz-fk.INT { background: rgba(127,127,127,.16); color: var(--gz-ink); } .gz-fbody { min-width: 0; } .gz-fbody p { margin: 0; font-size: 13.5px; } .gz-fbody small { color: var(--gz-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; } /* ---- the drilled-in game ---- */ .gz-back { display: inline-flex; align-items: center; min-height: 44px; margin: 6px 0 14px; padding: 8px 18px; background: var(--gz-accent); color: #fff; font-weight: 650; font-size: 15px; border-radius: 999px; text-decoration: none; box-shadow: 0 2px 12px rgba(31,111,235,.4); } .gz-hero { background: var(--gz-panel); border: 1px solid var(--gz-line); border-radius: 14px; padding: 18px; } .gz-hero-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .gz-hero .gz-sc { font-size: 46px; } .gz-vs { color: var(--gz-dim); font-size: 13px; letter-spacing: .1em; } .gz-hero-meta { margin-left: auto; text-align: right; } .gz-hero-status { font-weight: 700; } .gz-hero-stadium { color: var(--gz-dim); font-size: 12.5px; } .gz-cond { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; color: var(--gz-mute); font-size: 13px; } .gz-cond b { color: var(--gz-ink); } .gz-lines { margin-top: 16px; overflow-x: auto; } .gamezone table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } .gamezone th, .gamezone td { padding: 7px 11px; text-align: right; border-bottom: 1px solid var(--gz-line); font-size: 13.5px; white-space: nowrap; } .gamezone th:first-child, .gamezone td:first-child { text-align: left; } .gamezone thead th { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--gz-dim); } .gz-field { margin-top: 18px; } .gz-field-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gz-dim); margin-bottom: 7px; flex-wrap: wrap; gap: 8px; } .gz-field-top b { color: var(--gz-ink); letter-spacing: 0; text-transform: none; font-size: 13.5px; } .gz-rz-txt { color: var(--gz-rz); } .gz-turf { position: relative; height: 62px; border-radius: 8px; overflow: hidden; background: var(--gz-turf); border: 1px solid var(--gz-turf-line); } .gz-ez { position: absolute; top: 0; bottom: 0; width: 9%; display: grid; place-items: center; font-size: 10px; font-weight: 800; } .gz-ez.l { left: 0; } .gz-ez.r { right: 0; } .gz-rzband { position: absolute; top: 0; bottom: 0; background: rgba(255,43,61,.26); border-left: 1px dashed rgba(255,43,61,.7); } .gz-yard { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.13); } .gz-yard.major { background: rgba(255,255,255,.28); } .gz-ynum { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 10px; color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; } .gz-ball { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--gz-warn); box-shadow: 0 0 10px rgba(255,176,32,.9); } .gz-ball::after { content: ""; position: absolute; top: -5px; left: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--gz-warn); } .gz-fdline { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffe27a; opacity: .85; } .gz-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--gz-dim); flex-wrap: wrap; } .gz-legend span { display: flex; align-items: center; gap: 6px; } .gz-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .gz-swatch.ball { background: var(--gz-warn); } .gz-swatch.fd { background: #ffe27a; } .gz-swatch.rz { background: rgba(255,43,61,.5); } .gz-flowbox { background: var(--gz-panel); border: 1px solid var(--gz-line); border-radius: 11px; padding: 14px; } .gz-flowbox svg { display: block; width: 100%; height: 150px; } .gz-flow-grid, .gz-flow-axis { stroke: var(--gz-line); } .gz-flow-label { fill: var(--gz-dim); font-size: 10px; } .gz-flow-max { fill: var(--gz-mute); font-size: 11px; } .gz-two { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } @media (max-width: 760px) { .gz-two { grid-template-columns: 1fr; } } .gz-box { background: var(--gz-panel); border: 1px solid var(--gz-line); border-radius: 11px; overflow: hidden; } .gz-box h4 { margin: 0; padding: 11px 14px; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--gz-dim); border-bottom: 1px solid var(--gz-line); } .gz-box table { font-size: 13px; } .gz-ldr { display: flex; align-items: baseline; gap: 9px; padding: 8px 14px; border-top: 1px solid var(--gz-line); } .gz-ldr:first-of-type { border-top: 0; } .gz-nm { font-weight: 650; } .gz-tag { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 800; } .gz-val { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--gz-mute); } .gz-drives { display: grid; gap: 7px; } .gz-drive { display: flex; gap: 11px; align-items: center; background: var(--gz-panel); border: 1px solid var(--gz-line); border-left-width: 3px; border-radius: 9px; padding: 9px 13px; font-size: 13.5px; } .gz-drive-d { color: var(--gz-mute); } .gz-res { margin-left: auto; color: var(--gz-mute); font-size: 12.5px; } .gz-res.score { color: var(--gz-live-ink); font-weight: 650; } .gz-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; } .gz-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--gz-line); background: var(--gz-panel); color: var(--gz-mute); font-size: 13px; cursor: pointer; } .gz-chip.on { background: var(--gz-accent); border-color: var(--gz-accent); color: #fff; font-weight: 650; } .gz-pbp { background: var(--gz-panel); border: 1px solid var(--gz-line); border-radius: 11px; overflow: hidden; } .gz-play { display: grid; grid-template-columns: 62px 52px 1fr auto; gap: 11px; align-items: baseline; padding: 9px 13px; border-top: 1px solid var(--gz-line); font-size: 13.5px; } .gz-play:first-child { border-top: 0; } .gz-play.td { background: rgba(255,43,61,.12); } .gz-play.to { background: rgba(255,176,32,.10); } .gz-clk, .gz-after { color: var(--gz-dim); font-size: 12px; font-variant-numeric: tabular-nums; } .gz-play .gz-dd { background: none; padding: 0; color: var(--gz-mute); font-size: 12px; } .gz-empty { color: var(--gz-dim); } .gz-qbreak { padding: 8px 13px; background: var(--gz-panel2); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--gz-dim); border-top: 1px solid var(--gz-line); } .gz-note { color: var(--gz-dim); font-size: 12.5px; margin: 22px 0 0; } @media (prefers-reduced-motion: reduce) { .gz-pulse { animation: none; } }