/* ========================================================== The Draft Room — stylesheet Colours are defined once here, at the top, and reused everywhere below by name. Change one line, change the whole site. There are two sets of them. The dark set lives on :root and is therefore what you get by default, including on a page that never runs a line of JavaScript. The light set overrides it only when the reader has asked for light and the toggle has written data-theme="light" onto . The rule that keeps this honest: no rule below may name a colour that changes between the two themes. If a literal hex appears past this block it is either brand navy, which is dark in both themes, or a position colour, which is a mid tone that works on either. ========================================================== */ :root { /* ---- dark: the default ---- */ /* Brand navy. The app icon sits on #16283C, and so does the header, so the mark needs no plate of its own. These do not change with the theme — the header is dark either way. */ --navy-deep: #0E1D2E; /* header gradient, dark end */ --navy: #16283C; /* the icon's own navy */ --navy-soft: #24384F; --navy-mid: #1B3A6B; /* the lift in a live header */ --navy-lift: #10456F; /* the blue end of a gradient */ --navy-glow: #0E5A93; /* The header changes colour with the state of the draft, not with the theme, so it keeps its own blues and reds. The ones below named --blue and --danger do move, which is why these are separate. */ --hdr-blue-deep: #0A548A; --hdr-blue: #0E6BB0; --hdr-cyan: #12A3DC; --hdr-red-deep: #7A1F1A; --hdr-red: #B43026; --hdr-red-lift: #D0453A; /* Blue as a filled button always carries white text, so it can only go so light before that text stops being readable. It brightens a little from the light theme's blue, to lift off a dark card, and no further. Blue as *text* has the opposite problem and needs --link instead. */ --blue: #1776BE; --blue-dark: #125F9C; /* hover: deeper, the same way round as in light */ --blue-pale: #16334C; --blue-line: #2C567D; --cyan: #35BDEE; --link: #62B8F2; /* blue on a surface, rather than under white text */ --ink: #E6ECF3; --ink-mid: #A2B0BE; --ink-light: #76838F; --page: #0E151E; --card: #18212D; --line: #2A3441; --hairline: #222C38; /* the rules between rows inside a card */ --sunken: #131C26; /* a panel set into a card: stat boxes, table heads */ --well: #1E2836; /* slot chips, round numbers */ --fill: #232E3C; /* empty board cells, small buttons */ --fill-hi: #2D3948; /* those buttons, hovered */ --track: #242F3D; /* the unfilled part of a bar or meter */ --board-hd: #212B38; --danger: #F0837A; --good: #4FBF7F; --row-bad: #2A171B; /* a whole row tinted with bad news */ --row-blue: #16222F; /* a whole row tinted as yours */ /* Tints: a soft background with a legible foreground on it. Used by the injury chips, the tier chips, the bye bars and the callouts. */ --t-good-bg:#12301F; --t-good-fg:#6FD79E; --t-bad-bg:#3A1D22; --t-bad-fg:#F2909A; --t-ir-bg:#431A20; --t-ir-fg:#EE8590; --t-warn-bg:#33270F; --t-warn-fg:#E3B268; --t-bye-bg:#33240F; --t-bye-fg:#E4AC63; --t-info-bg:#16293C; --t-info-fg:#75BAE8; --t-purple-bg:#251E3C; --t-purple-fg:#B7A4EE; --t-orange-bg:#38230F; --t-orange-fg:#E79A62; --t-neutral-bg:#232D38; --t-neutral-fg:#A5B3BF; /* Position colours. The -bg / -fg pair is a chip or an avatar; the bare name is a solid block on the draft board, which always carries white text and so is the same in both themes. */ --qb-bg:#3A1D22; --qb-fg:#F0929B; --qb:#D9534F; --rb-bg:#12293A; --rb-fg:#74B9E6; --rb:#2E86C1; --wr-bg:#12301F; --wr-fg:#6ED79C; --wr:#28A667; --te-bg:#33240F; --te-fg:#E9AE63; --te:#E08A2C; --k-bg:#251E3C; --k-fg:#B4A0EC; --k:#8064CF; --dst-bg:#232B33; --dst-fg:#A8B7C2; --dst:#607483; /* Tells the browser to draw the parts we don't control — select popups, checkboxes, scrollbars — to match. Without it a dark page gets white dropdowns. */ color-scheme: dark; } :root[data-theme="light"] { /* ---- light: only when it is asked for ---- */ --blue: #0E6BB0; --blue-dark: #0A548A; --blue-pale: #E8F2FA; --blue-line: #C9DCF9; --cyan: #12A3DC; --link: #0E6BB0; --ink: #16202C; --ink-mid: #5A6875; --ink-light: #94A1AC; --page: #F5F7FA; --card: #FFFFFF; --line: #E4E9EF; --hairline: #F1F4F7; --sunken: #F7F9FB; --well: #F0F3F6; --fill: #EDF0F3; --fill-hi: #E6EBF1; --track: #EDF1F5; --board-hd: #E9EDF1; --danger: #C0392F; --good: #1B7343; --row-bad: #FEF6F7; --row-blue: #F7FAFF; --t-good-bg:#E6F5EC; --t-good-fg:#1B7343; --t-bad-bg:#FBE1E5; --t-bad-fg:#A32530; --t-ir-bg:#F6D5D8; --t-ir-fg:#86202A; --t-warn-bg:#FCF0DC; --t-warn-fg:#8A5A11; --t-bye-bg:#FCEBD5; --t-bye-fg:#95580F; --t-info-bg:#DCE9F7; --t-info-fg:#15618F; --t-purple-bg:#EDE7FB; --t-purple-fg:#5B41A8; --t-orange-bg:#FBE4D3; --t-orange-fg:#9A4B14; --t-neutral-bg:#E4E8EC; --t-neutral-fg:#46555F; --qb-bg:#FBE1E5; --qb-fg:#B02A37; --rb-bg:#D7EBF8; --rb-fg:#15618F; --wr-bg:#D9F2E1; --wr-fg:#1B7343; --te-bg:#FCEBD5; --te-fg:#95580F; --k-bg:#E9E2F8; --k-fg:#59409F; --dst-bg:#E2E8ED; --dst-fg:#46555F; color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font-family: Inter, system-ui, sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; } [hidden] { display: none !important; } /* ---------- sticky header ---------- The header, tabs and action bar are wrapped in one sticky container so they pin together and nothing has to guess the height of the thing above it. */ .sticky-top { position: sticky; top: 0; z-index: 30; } .appbar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 52%, var(--navy-lift) 100%); color: #fff; transition: background .35s ease; } .appbar.live { background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy-mid) 55%, var(--navy-glow) 100%); } .appbar.my-turn { background: linear-gradient(120deg, var(--hdr-blue-deep) 0%, var(--hdr-blue) 50%, var(--hdr-cyan) 130%); } .appbar.urgent { background: linear-gradient(120deg, var(--hdr-red-deep) 0%, var(--hdr-red) 60%, var(--hdr-red-lift) 100%); } /* Mountain ridges live in CSS rather than the markup, so a missing stylesheet leaves a plain bar instead of a giant graphic. */ .appbar::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L150 38 L285 92 L420 22 L590 120 Z' fill='%23fff' opacity='.20'/%3E%3Cpath d='M360 120 L545 48 L690 98 L855 28 L1035 120 Z' fill='%23fff' opacity='.15'/%3E%3Cpath d='M740 120 L930 60 L1075 104 L1200 50 L1200 120 Z' fill='%23fff' opacity='.11'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } /* the app icon's peak, on the navy it was drawn for */ /* The mark is a button now, so it needs to carry the flex sizing the SVG used to, and to look pressable without becoming a box in the header. */ .home { position: relative; z-index: 1; flex: none; display: flex; align-items: center; border: 0; background: none; color: inherit; cursor: pointer; transition: opacity .15s ease; /* The mark stays 34px, but a 34px tap target is under the 44px a thumb needs. The padding grows the hit area and the negative margin takes the space back, so nothing moves. */ padding: 5px; margin: -5px; } .home:hover { opacity: .78; } .home:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; } /* The peak carries its own colours, so this only sizes it and lifts it off the ridge texture behind. */ .mark { position: relative; z-index: 1; width: 34px; height: 34px; min-width: 34px; flex: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.32)); } .appbar-text { position: relative; z-index: 1; min-width: 0; } /* Team names run to "Bone-Thugs-N-Montgomery", and on a narrow phone the header cannot hold that next to the counter and the toggle. It has to end in an ellipsis rather than be sliced through a letter by the bar's own overflow, which is what happens if only nowrap is set. */ .appbar-text h1 { margin: 0; font-family: Poppins, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar-text p { margin: 0; font-size: 12px; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar-right { position: relative; z-index: 1; margin-left: auto; display: flex; align-items: center; gap: 12px; padding-left: 10px; } .count { text-align: right; } .count-label { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.60); font-weight: 600; } .count-value { display: block; font-family: Poppins, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } /* ---------- theme toggle ---------- It lives on the header, which is dark under both themes, so it is styled once against navy rather than switching with everything else. */ .theme-toggle { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .theme-toggle:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.38); } .theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* One icon each way round: the sun offers the light theme, so it shows while the page is dark, and the moon shows while it is light. */ .theme-toggle .i-moon { display: none; } :root[data-theme="light"] .theme-toggle .i-sun { display: none; } :root[data-theme="light"] .theme-toggle .i-moon { display: block; } /* ---------- tabs ---------- */ .tabs { display: flex; gap: 6px; padding: 10px 12px; background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; } .tabs button { flex: none; font-family: Inter, sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ink-mid); background: none; border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: nowrap; } .tabs button.on { background: var(--blue); color: #fff; } /* ---------- action bar ---------- */ .actionbar { display: flex; gap: 8px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; } .mini { flex: none; font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; color: var(--ink-mid); background: var(--fill); border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; } .mini:hover { background: var(--fill-hi); } .mini.danger { color: var(--danger); } /* The way on to the next mock. Reads as an invitation, next to a Discard that reads as a warning, so the two are not mistaken for each other. */ .mini.go { background: var(--blue); color: #fff; } .mini.go:hover { background: var(--blue-dark); } .mini:disabled { opacity: .45; cursor: default; } .mini.active { background: var(--navy); color: #fff; } .mini.active:hover { background: var(--navy-soft); } /* ---------- live pick ticker ---------- */ .ticker { display: flex; align-items: center; gap: 11px; padding: 8px 13px; background: linear-gradient(90deg, var(--navy) 0%, var(--navy-mid) 100%); color: #fff; animation: tickIn .28s ease; } @keyframes tickIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } .tick-pick { flex: none; font-family: Poppins, sans-serif; font-weight: 700; font-size: 12px; color: var(--cyan); width: 34px; font-variant-numeric: tabular-nums; } .tick-body { min-width: 0; flex: 1; } .tick-team { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); font-weight: 700; } .tick-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tick-tm { font-size: 11.5px; color: rgba(255,255,255,.72); font-weight: 400; } .ticker .mini { background: rgba(255,255,255,.16); color: #fff; } .ticker .mini:hover { background: rgba(255,255,255,.28); } /* ---------- panels ---------- */ .panel { display: none; padding: 14px 12px 48px; } .panel.on { display: block; } /* ---------- setup screen ---------- */ .setup { max-width: 460px; margin: 18px auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px 22px 22px; } .setup { border-top: 3px solid var(--cyan); } .setup h2 { margin: 0 0 20px; font-family: Poppins, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .field { margin-bottom: 20px; } .field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mid); } .field-row { display: flex; gap: 8px; } select { flex: 1; width: 100%; font-family: Inter, sans-serif; font-size: 14.5px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; } .hint { margin: 7px 0 0; font-size: 12px; color: var(--ink-light); } /* A roster that does not add up to the round count, or a league too big for the player pool. The draft cannot start until it is fixed. */ .hint.bad { color: var(--danger); font-weight: 600; } .ghost { flex: none; font-family: Inter, sans-serif; font-size: 13.5px; font-weight: 600; color: var(--link); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; cursor: pointer; } .ghost:hover { background: var(--blue-pale); border-color: var(--blue-line); } /* ---------- the scoring editor ---------- A native
, so open and closed cost no JavaScript and keyboard and screen reader behaviour come for free. */ .scoring { background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 20px; } .scoring > summary { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 12px 15px; cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mid); } .scoring > summary:hover { color: var(--ink); } .scoring-sum { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-light); } .scoring > div, .scoring > .hint, .scoring > button { margin-left: 15px; margin-right: 15px; } .scoring .section-label { margin: 14px 15px 6px; } .scoring > button { margin-bottom: 15px; } .scoring .hint { margin-bottom: 14px; } .rulegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; } @media (max-width: 420px) { .rulegrid { grid-template-columns: 1fr; } } .rule { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .rule span { font-size: 12.5px; color: var(--ink-mid); } .rule input { flex: none; width: 66px; text-align: right; font-family: Inter, sans-serif; font-size: 13px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; } .rule input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); } /* iOS Safari zooms the whole page when it focuses an input smaller than 16px. With thirty-eight of them that would make the editor unusable on a phone, so they grow rather than the page jumping. */ @media (max-width: 640px) { .rule input { font-size: 16px; width: 74px; } } .primary { font-family: Inter, sans-serif; font-weight: 600; color: #fff; background: var(--blue); border: 0; border-radius: 8px; padding: 9px 18px; font-size: 14px; cursor: pointer; } .primary:hover { background: var(--blue-dark); } .primary:disabled { background: var(--ink-light); cursor: not-allowed; } .primary.big { width: 100%; padding: 14px; font-size: 15.5px; } /* ---------- position filter ---------- */ .pos-filter { display: flex; gap: 4px; margin-bottom: 12px; overflow-x: auto; } .pos-filter button { flex: none; font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-mid); background: none; border: 0; padding: 7px 12px; cursor: pointer; border-bottom: 2px solid transparent; } .pos-filter button.on { color: var(--link); border-bottom-color: var(--link); } /* ---------- injury designations ---------- */ .inj { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 2px 5px; border-radius: 3px; background: var(--fill); color: var(--ink-mid); } .inj.Q { background: var(--t-warn-bg); color: var(--t-warn-fg); } .inj.D { background: var(--t-orange-bg); color: var(--t-orange-fg); } .inj.O { background: var(--t-bad-bg); color: var(--t-bad-fg); } .inj.IR { background: var(--t-ir-bg); color: var(--t-ir-fg); } .inj.PUP { background: var(--t-purple-bg); color: var(--t-purple-fg); } .inj.NFI { background: var(--t-purple-bg); color: var(--t-purple-fg); } .inj.SUS { background: var(--t-neutral-bg); color: var(--t-neutral-fg); } /* a top-150 player who has already been ruled out — the ADP feed always lags the injury feed by a few days */ tr.conflict { background: var(--row-bad); } tr.conflict .nm { color: var(--t-bad-fg); } /* ---------- avatars ---------- */ .avatar { position: relative; overflow: hidden; width: 46px; height: 46px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: Poppins, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; } .avatar.QB { background: var(--qb-bg); color: var(--qb-fg); } .avatar.RB { background: var(--rb-bg); color: var(--rb-fg); } .avatar.WR { background: var(--wr-bg); color: var(--wr-fg); } .avatar.TE { background: var(--te-bg); color: var(--te-fg); } .avatar.K { background: var(--k-bg); color: var(--k-fg); } .avatar.DST { background: var(--dst-bg); color: var(--dst-fg); } .avatar.sm { width: 34px; height: 34px; font-size: 12px; } /* The headshot sits on top of the initials. If it fails to load it removes itself and the initials show through, so a missing photo is never a broken image icon. */ .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .avatar img.logo { object-fit: contain; padding: 5px; } .freshness { margin: 14px 0 0; text-align: center; font-size: 11.5px; color: var(--ink-light); } .freshness a { color: var(--link); text-decoration: none; } .freshness a:hover { text-decoration: underline; } /* ---------- tier and warning chips ---------- */ .chip { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; background: var(--track); color: var(--ink-mid); } .chip.tier { background: var(--t-neutral-bg); color: var(--t-neutral-fg); } .chip.thin { background: var(--t-warn-bg); color: var(--t-warn-fg); } .chip.last { background: var(--t-bad-bg); color: var(--t-bad-fg); } .chip.bye { background: var(--t-bye-bg); color: var(--t-bye-fg); } /* ---------- suggestion cards ---------- */ .sug { display: flex; align-items: center; gap: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 9px; } .sug.top { border-color: var(--blue-line); box-shadow: 0 2px 10px rgba(44,107,237,.09); } .sug-body { flex: 1; min-width: 0; } .sug-name { font-family: Poppins, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .sug-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--ink-mid); } .sug-stats { margin-top: 3px; font-size: 11.5px; color: var(--ink-light); } .value-up { color: var(--good); font-weight: 600; } .value-down { color: var(--ink-light); } /* ---------- player table ---------- */ table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } th { text-align: left; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; padding: 10px 12px; background: var(--sunken); border-bottom: 1px solid var(--line); } td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } tr:last-child td { border-bottom: 0; } .num { text-align: right; font-variant-numeric: tabular-nums; } th.num { text-align: right; } .nm { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.25; } .meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--ink-mid); } .badge { display: inline-block; min-width: 30px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 2px 6px; border-radius: 4px; } .badge.QB { background: var(--qb-bg); color: var(--qb-fg); } .badge.RB { background: var(--rb-bg); color: var(--rb-fg); } .badge.WR { background: var(--wr-bg); color: var(--wr-fg); } .badge.TE { background: var(--te-bg); color: var(--te-fg); } .badge.K { background: var(--k-bg); color: var(--k-fg); } .badge.DST { background: var(--dst-bg); color: var(--dst-fg); } .draft-btn { font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 600; color: #fff; background: var(--blue); border: 0; border-radius: 6px; padding: 7px 14px; cursor: pointer; white-space: nowrap; } .draft-btn:hover { background: var(--blue-dark); } .draft-btn:disabled { background: var(--fill); color: var(--ink-light); cursor: default; } tr.drafted { background: var(--sunken); } tr.drafted .nm { color: var(--ink-light); text-decoration: line-through; } tr.drafted .meta, tr.drafted .num { opacity: .45; } /* ---------- draft board ---------- */ .board-scroll { overflow-x: auto; padding-bottom: 6px; } /* Ten teams is only the default here. renderBoard() overwrites the column count and the minimum width to match the league that is actually set. */ .board { display: grid; grid-template-columns: 30px repeat(10, minmax(74px, 1fr)); gap: 3px; min-width: 780px; } .board .hd { background: var(--board-hd); color: var(--ink-mid); font-size: 8.5px; font-weight: 700; text-align: center; padding: 5px 2px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board .hd.me { background: var(--navy); color: #fff; } .board .rd { background: var(--well); color: var(--ink-light); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .board .cell { background: var(--fill); border-radius: 4px; padding: 5px 6px; min-height: 42px; font-size: 10px; line-height: 1.25; color: #fff; } .board .cell.empty { color: var(--ink-light); font-variant-numeric: tabular-nums; } /* Blue text on a card, not blue under white, so it takes the lighter --link. */ .board .cell.now { background: var(--card); border: 2px dashed var(--blue); color: var(--link); font-weight: 700; } .board .cell.mine { outline: 2px solid var(--blue); outline-offset: -2px; } .board .cell.QB { background: var(--qb); } .board .cell.RB { background: var(--rb); } .board .cell.WR { background: var(--wr); } .board .cell.TE { background: var(--te); } .board .cell.K { background: var(--k); } .board .cell.DST { background: var(--dst); } .board .cell b { display: block; font-weight: 700; } .board .cell s { display: block; text-decoration: none; opacity: .85; font-size: 9px; } .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--ink-mid); } .sw { width: 11px; height: 11px; display: inline-block; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .sw.QB { background: var(--qb); } .sw.RB { background: var(--rb); } .sw.WR { background: var(--wr); } .sw.TE { background: var(--te); } .sw.K { background: var(--k); } .sw.DST { background: var(--dst); } /* ---------- roster ---------- */ .section-label { margin: 4px 0 8px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; } .roster { list-style: none; margin: 0 0 22px; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .roster li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--hairline); } .roster li:last-child { border-bottom: 0; } .slot { flex: none; width: 46px; text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ink-mid); background: var(--well); border-radius: 5px; padding: 5px 0; } .slot.bn { color: var(--ink-light); } .skeleton { flex: 1; height: 9px; max-width: 190px; border-radius: 5px; background: var(--track); } .rname { font-weight: 600; font-size: 14px; line-height: 1.25; } .rmeta { font-size: 11.5px; color: var(--ink-mid); margin-top: 2px; } .rpick { margin-left: auto; font-size: 11.5px; color: var(--ink-light); font-variant-numeric: tabular-nums; } /* ---------- picks feed ---------- */ .round-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light); } .round-divider:before, .round-divider:after { content: ""; flex: 1; height: 1px; background: var(--line); } .pick-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .pick-card.mine { border-color: var(--blue); background: var(--row-blue); } .pick-no { flex: none; width: 38px; font-family: Poppins, sans-serif; font-weight: 700; font-size: 13px; color: var(--ink-mid); } .pick-team { font-size: 11px; color: var(--ink-light); margin-bottom: 2px; } .pick-name { font-weight: 600; font-size: 14px; line-height: 1.2; } .pick-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--ink-mid); } /* ---------- draft analysis ---------- */ .grade-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, var(--navy-lift)); color: #fff; border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; } .grade-letter { flex: none; width: 78px; height: 78px; border-radius: 14px; background: rgba(255,255,255,.13); display: flex; align-items: center; justify-content: center; font-family: Poppins, sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -0.03em; } .grade-hero h3 { margin: 0 0 3px; font-family: Poppins, sans-serif; font-size: 19px; font-weight: 700; } .grade-hero p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.5; } .bars { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; } .bar-row { margin-bottom: 12px; } .bar-row:last-child { margin-bottom: 0; } .bar-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; margin-bottom: 5px; } .bar-head b { font-weight: 600; } .bar-head span { color: var(--ink-light); font-size: 11.5px; font-variant-numeric: tabular-nums; } .bar-track { height: 8px; background: var(--track); border-radius: 5px; overflow: hidden; } /* No radius on the fill. The track already rounds it by clipping, and giving the fill its own curve as well means it gets anti-aliased against the grey track and then clipped again — which leaves a full bar looking washed out at the right end instead of solid. */ .bar-fill { height: 100%; background: var(--blue); } .bar-fill.good { background: var(--good); } .bar-fill.warn { background: var(--te); } .bar-fill.bad { background: var(--danger); } .callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } @media (max-width: 620px) { .callouts { grid-template-columns: 1fr; } } .callout { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px; padding: 11px 13px; } .callout.good { border-left-color: var(--good); } .callout.bad { border-left-color: var(--danger); } .callout .lbl { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; } .callout .val { font-weight: 600; font-size: 14px; margin-top: 3px; } .callout .sub { font-size: 11.5px; color: var(--ink-mid); margin-top: 2px; } .standings { width: 100%; } .standings td.rk { width: 26px; color: var(--ink-light); font-variant-numeric: tabular-nums; } .standings tr.me { background: var(--blue-pale); } .standings tr.me td { font-weight: 600; } .standings td.gr { text-align: right; font-family: Poppins, sans-serif; font-weight: 700; } .byebar { display: flex; gap: 3px; margin-top: 4px; } .byebar i { flex: 1; height: 22px; border-radius: 3px; background: var(--track); font-style: normal; font-size: 9px; color: var(--ink-light); display: flex; align-items: center; justify-content: center; } .byebar i.w2 { background: var(--t-info-bg); color: var(--t-info-fg); } .byebar i.w3 { background: var(--t-bye-bg); color: var(--t-bye-fg); font-weight: 700; } .byebar i.w4 { background: var(--t-bad-bg); color: var(--t-bad-fg); font-weight: 700; } .method { font-size: 11.5px; color: var(--ink-light); line-height: 1.6; margin-top: 14px; } /* ---------- player detail sheet ---------- */ .sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(6,12,22,.62); } .sheet { position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 60px); display: flex; flex-direction: column; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(6,12,22,.45); } @media (max-width: 620px) { .sheet { width: 100vw; height: 100vh; max-height: none; border-radius: 0; left: 0; top: 0; transform: none; } } .sheet-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: linear-gradient(120deg, var(--navy-deep), var(--navy) 65%, var(--navy-lift)); color: #fff; } .sheet-head .avatar { width: 62px; height: 62px; font-size: 19px; } .sheet-head h3 { margin: 0; font-family: Poppins, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.02em; } .sheet-head .sub { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,.80); } .sheet-head .facts { margin-top: 5px; font-size: 11.5px; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; } .sheet-close { margin-left: auto; align-self: flex-start; width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; } .sheet-tabs { display: flex; gap: 4px; padding: 9px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; } .sheet-tabs button { flex: none; font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ink-mid); background: none; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap; } .sheet-tabs button.on { background: var(--blue-pale); color: var(--link); } .sheet-body { overflow-y: auto; padding: 16px 18px 26px; } .sheet-view { display: none; } .sheet-view.on { display: block; } /* signal meters */ .sig { margin-bottom: 16px; } .sig-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .sig-head b { font-size: 13px; font-weight: 600; } .sig-head span { font-size: 12px; font-weight: 700; } .sig-seg { display: flex; gap: 3px; } .sig-seg i { flex: 1; height: 7px; border-radius: 4px; background: var(--track); } .sig-seg i.on { background: var(--blue); } .sig.good .sig-seg i.on { background: var(--good); } .sig.good .sig-head span { color: var(--good); } .sig.warn .sig-seg i.on { background: var(--te); } .sig.warn .sig-head span { color: var(--t-warn-fg); } .sig.bad .sig-seg i.on { background: var(--danger); } .sig.bad .sig-head span { color: var(--danger); } .sig-why { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-light); line-height: 1.55; } .statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 18px; } @media (max-width: 520px) { .statgrid { grid-template-columns: repeat(2, 1fr); } } .statbox { background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; text-align: center; } .statbox .k { font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; } .statbox .v { font-family: Poppins, sans-serif; font-weight: 700; font-size: 17px; margin-top: 2px; } /* Stat tables can outgrow a phone once receiving, rushing and returns are all present, so they scroll sideways inside the sheet. */ .tblscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tblscroll table { min-width: 100%; width: max-content; } .logtbl { font-size: 12px; } .logtbl th { padding: 7px 6px; font-size: 9px; } .logtbl td { padding: 6px; text-align: right; font-variant-numeric: tabular-nums; } .logtbl td:first-child, .logtbl th:first-child { text-align: left; } .logtbl tr.bye td { color: var(--ink-light); font-style: italic; } .logtbl td.hi { background: var(--t-good-bg); font-weight: 600; } .logtbl td.lo { background: var(--row-bad); } .depthcol { margin-bottom: 16px; } .depthcol h5 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-light); font-weight: 700; } .depthrow { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; } .depthrow:last-child { border-bottom: 0; } .depthrow .ord { width: 20px; font-family: Poppins, sans-serif; font-weight: 700; color: var(--ink-light); font-size: 11px; } .depthrow.self { font-weight: 600; color: var(--link); } .name-link { cursor: pointer; } .name-link:hover { color: var(--link); text-decoration: underline; } .nodata { padding: 30px 10px; text-align: center; font-size: 13px; color: var(--ink-light); } /* ---------- empty states ---------- */ .empty { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 48px 24px; text-align: center; } .empty-title { margin: 0 0 4px; font-weight: 600; font-size: 15px; } .empty-sub { margin: 0 auto; max-width: 34ch; font-size: 13px; color: var(--ink-mid); line-height: 1.5; } .empty .primary { margin-top: 18px; }