/* o!bwc base stylesheet. Theme colors come from per-contest CSS variables set inline in (--primary --accent --accent2 --bg --ink). Mobile-first; no framework. The signature light-grey blueprint grid is pure CSS. */ /* Non-theme design tokens (the per-contest colour vars stay in the inline theme block and are never redefined here). --mono drives the technical "blueprint label" treatment on small caps chips; --line is the thin ink rule. */ :root { --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace; --line: rgba(20,22,31,.14); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 16px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--ink, #14161F); background-color: var(--bg, #E9EAED); background-image: repeating-linear-gradient(0deg, transparent 0 23px, rgba(20,22,31,.05) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(20,22,31,.05) 23px 24px); } .wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; } a { color: var(--primary, #2B3FE0); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.2; } img { max-width: 100%; height: auto; } code { background: rgba(20,22,31,.08); padding: .1em .35em; border-radius: 3px; font-size: .92em; } .skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: .5rem; background: #fff; padding: .4rem .7rem; z-index: 10; } /* Header — tight blueprint bar: the logo, the site name, nav, and the user chip. */ .site-header { background: var(--primary); color: #fff; border-bottom: 3px solid var(--ink); } .header-row { display: flex; align-items: center; gap: .5rem 1rem; min-height: 52px; flex-wrap: wrap; padding: .35rem 0; } .brand { color: #fff; display: flex; align-items: center; gap: .55rem; font-weight: 800; flex: 0 0 auto; } .brand:hover { text-decoration: none; } .brand-logo { display: block; height: 36px; width: 36px; border-radius: 3px; background: #fff; } .brand-sub { font-size: .82rem; font-weight: 700; letter-spacing: .01em; opacity: .92; display: none; } /* Contest-year chip — compact lime/cyan mono tag next to the brand; renders on every page (visible even on mobile where .brand-sub is hidden). */ .brand-year { font-family: var(--mono); font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: var(--ink); background: var(--accent); padding: .06rem .38rem; border-radius: 3px; line-height: 1.3; box-shadow: inset 0 -2px 0 rgba(63,216,240,.6); } /* Desktop layout: brand (left) · nav + sign-in (right), all on one centered row. .mainnav flexes to fill and right-aligns its links; .header-actions never shrinks. On mobile the whole row wraps cleanly (flex-wrap on .header-row). */ .mainnav { display: flex; flex: 1 1 auto; min-width: 0; gap: .2rem .9rem; flex-wrap: wrap; justify-content: flex-end; } .mainnav a { color: #fff; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; padding: .1rem 0; opacity: .9; font-family: var(--mono); } .mainnav a:hover { opacity: 1; text-decoration: none; box-shadow: inset 0 -2px 0 var(--accent); } .header-actions { flex: 0 0 auto; } .userbox { color: var(--ink); background: var(--accent); padding: .3rem .7rem; border-radius: 3px; font-weight: 800; font-size: .82rem; font-family: var(--mono); letter-spacing: .02em; } .userbox:hover { text-decoration: none; filter: brightness(.96); } /* Announcements */ .annwrap { margin-top: .75rem; } .ann { border-left: 4px solid var(--primary); background: #fff; padding: .6rem .9rem; margin-bottom: .5rem; border-radius: 0 4px 4px 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); } .ann-warning { border-left-color: #d98a00; } .ann-event { border-left-color: var(--accent2); } /* Main */ main.wrap { padding-top: 1.5rem; padding-bottom: 3rem; min-height: 50vh; } .card { background: #fff; border: 1px solid var(--line); border-radius: 3px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; } /* Blueprint section heading: a thin blue rule under the title echoes the banner's solid blue bar without the heavy fill. Direct-child only, so nested heads and flex header rows (admin, bracket manager) are untouched. */ .card > h2 { margin: 0 0 .7rem; padding-bottom: .35rem; border-bottom: 2px solid var(--primary); } .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .btn { display: inline-block; background: var(--primary); color: #fff; border: 0; border-radius: 3px; padding: .55rem 1rem; font-weight: 700; cursor: pointer; } .btn:hover { text-decoration: none; filter: brightness(1.05); } .btn-accent { background: var(--accent); color: var(--ink); } .pill { display: inline-block; background: var(--accent2); color: var(--ink); border-radius: 3px; padding: .1rem .55rem; font-size: .76rem; font-weight: 800; font-family: var(--mono); letter-spacing: .02em; } .empty { color: #666; font-style: italic; } .scroll-x { overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid rgba(20,22,31,.1); } th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #555; font-family: var(--mono); } .hero { background: var(--primary); color: #fff; border: 2px solid var(--ink); border-radius: 3px; padding: 1.6rem 1.4rem; margin-bottom: 1.5rem; } .hero h1 { margin: 0 0 .3rem; font-size: 1.8rem; } .hero .sub { opacity: .9; } /* Footer */ .site-footer { border-top: 3px solid var(--ink); background: #fff; margin-top: 2rem; } .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; flex-wrap: wrap; font-size: .9rem; color: #555; } .footlinks { display: flex; gap: 1rem; } @media (min-width: 720px) { .brand-sub { display: inline; } } /* ========================================================================== Public pages (design 03 §3.1) + shared partial styles (flag, team card, matchup card, score table, countdown). Driven by the per-contest theme CSS variables; works without JS. ========================================================================== */ /* -- shared bits ---------------------------------------------------------- */ .muted { color: #666; } .small { font-size: .85rem; } .page-head { margin: 0 0 1rem; } .page-head h1 { margin: 0; } .page-sub { color: #555; margin: .3rem 0 0; } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose h2, .prose h3 { margin-top: 1.2rem; } .card.gated { text-align: center; } .formula { background: rgba(20,22,31,.05); border-left: 3px solid var(--primary); padding: .8rem 1rem; margin: .8rem 0; font-family: var(--mono); } .formula div { margin: .25rem 0; } /* Blueprint labels: small caps, seed/flag/status chips, phase + state pills, metric numbers, countdowns — the "technical annotation" layer of the design. Font only (each class keeps its own colours/box), so this can't break layout. */ .seed-badge, .q-badge, .team-status, .flag, .round-phase, .mc-seed, .mc-state, .mc-vs, .mh-seed, .mh-won, .j-chip, .j-progress-num, .tag, .lft-badge, .ql-head, .ql-num, .adm-tile-label, .adm-ribbon, .anon-dot, .ann-sev, .bp-atom, .sub-note, .countdown, .big-count, .adm-tile-num, .tally, .pct-num { font-family: var(--mono); } /* -- flag ------------------------------------------------------------------ */ /* Real country flags (osu! flag PNGs — Windows can't render flag emoji). */ .flag-img { display: inline-block; width: 24px; height: 16px; object-fit: cover; border-radius: 2px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(20,22,31,.18); background: rgba(20,22,31,.06); } /* Neutral text placeholder for unknown/empty codes (no image to load). */ .flag { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .04em; background: var(--ink); color: #fff; padding: .1rem .3rem; border-radius: 3px; vertical-align: middle; } .flag-unknown { background: #999; } /* -- team card ------------------------------------------------------------ */ .team-card { background: #fff; border: 1px solid rgba(20,22,31,.14); border-radius: 6px; padding: .8rem .9rem; } .team-card.is-dq { opacity: .6; } .team-card-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-weight: 700; } .team-country { font-weight: 800; } .team-card-name { margin-top: .25rem; font-size: .92rem; color: #555; } .team-name { color: var(--ink); font-weight: 600; } .team-name:hover { color: var(--primary); } .team-roster, .roster { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .9rem; font-weight: 400; color: #444; } .team-roster li, .roster li { padding: .1rem 0; } .cap-star { color: var(--primary); } .seed-badge { background: var(--accent); color: var(--ink); font-size: .72rem; font-weight: 800; padding: .05rem .4rem; border-radius: 3px; } .team-status { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; background: rgba(20,22,31,.1); padding: .05rem .35rem; border-radius: 3px; } .q-badge { background: var(--primary); color: #fff; font-size: .72rem; font-weight: 800; padding: .05rem .35rem; border-radius: 3px; } /* -- matchup card --------------------------------------------------------- */ .matchup-card { background: #fff; border: 1px solid rgba(20,22,31,.14); border-radius: 6px; overflow: hidden; } .mc-link { display: block; color: var(--ink); } .mc-link:hover { text-decoration: none; background: rgba(43,63,224,.04); } .mc-sides { padding: .5rem .7rem; } .mc-side { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; } .mc-side.is-winner { font-weight: 800; } .mc-side.is-tbd { color: #999; } .mc-seed { font-size: .72rem; color: #888; min-width: 1.6rem; } .mc-vs { font-size: .7rem; color: #aaa; text-align: center; } .mc-state { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #555; background: rgba(20,22,31,.05); padding: .2rem .7rem; } /* -- score table / countdown --------------------------------------------- */ .score-table caption { text-align: left; font-weight: 700; padding: 0 0 .4rem; } .sticky-first th:first-child, .sticky-first td:first-child { position: sticky; left: 0; background: #fff; } .countdown { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; } .countdown-label { font-weight: 400; color: #555; } /* -- home ----------------------------------------------------------------- */ /* Banner-as-hero: full content-width, sharp corners, thin ink frame to sit on the blueprint grid. aspect-ratio holds its box before the image loads so the page doesn't jump. */ .home-banner { margin: -.25rem 0 1rem; } .home-banner img { width: 100%; aspect-ratio: 1872 / 477; border: 2px solid var(--ink); border-radius: 3px; display: block; } .home-tagline { margin: -.25rem 0 1.25rem; color: #555; font-family: var(--mono); font-size: .82rem; letter-spacing: .02em; border-left: 3px solid var(--accent2); padding-left: .7rem; } /* Running-contest CTA band: replaces the thin tagline with a bold blue call-out (lime keyword + action buttons) pointing at the three live surfaces. Wraps to a stacked layout on narrow screens. */ .home-cta { margin: -.1rem 0 1.3rem; background: var(--primary); border: 2px solid var(--ink); border-radius: 3px; padding: .9rem 1.1rem; color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.1rem; } .home-cta-text { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.35; flex: 1 1 16rem; } .home-cta-text strong { color: var(--accent); font-weight: 800; } .home-cta-actions { display: flex; flex-wrap: wrap; gap: .5rem; } .home-cta-btn { display: inline-block; background: var(--accent); color: var(--ink); border-radius: 3px; padding: .55rem 1rem; font-family: var(--mono); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; } .home-cta-btn:hover { text-decoration: none; filter: brightness(1.05); } .home-cta-ghost { background: transparent; color: #fff; border: 2px solid var(--accent2); padding: calc(.55rem - 2px) calc(1rem - 2px); } .home-cta-ghost:hover { background: rgba(255,255,255,.12); filter: none; } /* Song titles clamp to a single line (ellipsis on overflow); full text in title. */ .song-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .home-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } /* Grid tracks default to min-width:auto, so an unbreakable single-line song title (.song-line, white-space:nowrap) would force a column to its min-content width and blow the layout wider than the viewport. min-width:0 lets the columns hold their fractional widths and the song titles clamp with an ellipsis instead. */ .home-main, .home-side { min-width: 0; } .now-card { border-left: 4px solid var(--accent); } .now-flag { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); background: var(--accent); padding: .1rem .5rem; border-radius: 3px; font-family: var(--mono); } .now-card h2 { margin: .5rem 0 .3rem; } .now-deadline { font-size: 1.05rem; margin: .3rem 0; } .now-songs { margin: .5rem 0 0; padding-left: 1.1rem; } .quick-links { display: grid; gap: .5rem; } .quick { display: block; background: #fff; border: 1px solid rgba(20,22,31,.14); border-radius: 6px; padding: .6rem .8rem; color: var(--ink); } .quick:hover { text-decoration: none; border-color: var(--primary); } .quick strong { display: block; } .quick span { font-size: .82rem; color: #666; } .schedule-table td, .schedule-table th { vertical-align: top; } .round-phase { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .4rem; border-radius: 3px; background: rgba(20,22,31,.08); white-space: nowrap; } .phase-judging, .phase-mapping, .phase-ban_pick { background: var(--accent); color: var(--ink); } .phase-results, .phase-closed { background: var(--accent2); color: var(--ink); } .counts-card { text-align: center; } .big-count { font-size: 1.2rem; } @media (min-width: 860px) { .home-grid { grid-template-columns: 2fr 1fr; } } /* -- schedule ------------------------------------------------------------- */ .sched-round-head { display: flex; align-items: center; gap: .7rem; } .sched-round-head h2 { margin: 0; } .sched-cols { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: .6rem; } .sched-cols h4 { margin: 0 0 .3rem; } .sched-songs { margin: 0; padding-left: 1.1rem; } .sched-dates th { text-transform: none; letter-spacing: 0; color: #555; font-weight: 600; width: 12rem; } .sched-banpick { margin-top: 1rem; } @media (min-width: 720px) { .sched-cols { grid-template-columns: 1fr 1fr; } } /* -- teams / filter ------------------------------------------------------- */ .filter-bar { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; background: #fff; border: 1px solid rgba(20,22,31,.14); border-radius: 6px; padding: .7rem .9rem; margin-bottom: 1rem; } .filter-bar label { display: flex; flex-direction: column; font-size: .8rem; font-weight: 700; gap: .2rem; } .filter-bar input, .filter-bar select { font: inherit; padding: .35rem .5rem; border: 1px solid rgba(20,22,31,.25); border-radius: 4px; } .team-grid { align-items: start; } /* -- team detail ---------------------------------------------------------- */ .team-head h1 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .kv th { text-transform: none; letter-spacing: 0; color: #555; font-weight: 600; width: 12rem; } .about-block { margin-top: 1rem; border-top: 1px solid rgba(20,22,31,.1); padding-top: .8rem; } .about-block h4 { margin: .8rem 0 .3rem; } /* -- free agents ---------------------------------------------------------- */ .fa-group h2 { display: flex; align-items: center; gap: .5rem; } .fa-card { background: #fff; border: 1px solid rgba(20,22,31,.14); border-radius: 6px; padding: .7rem .8rem; } .fa-head { display: flex; gap: .6rem; align-items: center; } .fa-avatar { border-radius: 6px; } .fa-avatar-none { width: 48px; height: 48px; background: rgba(20,22,31,.1); border-radius: 6px; display: inline-block; } .lft-badge { font-size: .72rem; font-weight: 700; color: var(--ink); background: var(--accent2); padding: .05rem .4rem; border-radius: 3px; } .fa-blurb { margin: .5rem 0 0; font-size: .9rem; color: #444; } /* -- qualifier standings -------------------------------------------------- */ .ql-card { padding-top: .8rem; } .ql-table { min-width: 100%; } .ql-head, .ql-row { display: grid; align-items: center; gap: .3rem; padding: .35rem .5rem; } .ql-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #555; border-bottom: 2px solid rgba(20,22,31,.2); } .ql-details { border-bottom: 1px solid rgba(20,22,31,.1); } .ql-row { cursor: pointer; list-style: none; } .ql-row::-webkit-details-marker { display: none; } .ql-details[open] .ql-row { background: rgba(43,63,224,.05); } .ql-row:hover { background: rgba(43,63,224,.04); } .ql-c { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ql-num { text-align: right; font-variant-numeric: tabular-nums; } .ql-team { font-weight: 700; } .ql-anon { color: #5f626f; font-size: .85rem; } .ql-total { font-weight: 800; } .ql-detail-body { padding: .6rem 1rem 1rem; background: rgba(20,22,31,.02); } .ql-raw th { text-transform: none; letter-spacing: 0; } .ql-comment td { color: #444; font-size: .9rem; } .passed { color: var(--primary); font-weight: 800; } .passdown-note { color: var(--primary); font-size: .85rem; margin: 0 0 .5rem; } .ql-legend { margin-top: .6rem; } /* -- formula -------------------------------------------------------------- */ .params-table th { text-transform: none; letter-spacing: 0; } .params-table tr.mismatch { background: rgba(217,138,0,.12); } /* -- bracket -------------------------------------------------------------- */ /* The SVG tree is a collapsed overview: the round cards below are the primary (and, closed, the only) rendering of each matchup. Pure
, no JS. */ .bracket-tree-card { padding: .7rem 1.2rem; } .bracket-tree summary { cursor: pointer; font-weight: 700; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .bracket-tree[open] summary { margin-bottom: .4rem; } .bracket-wrap { padding: .5rem 0; } .bracket-lists { margin-top: 1rem; } .bracket-round { margin-bottom: 1rem; } .bracket-round h3 { margin: 0 0 .5rem; } .matchup-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } /* -- matchup -------------------------------------------------------------- */ .matchup-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } .mh-side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; } .mh-side.is-winner { font-weight: 800; } .mh-side.is-winner .mh-team { color: var(--primary); } .mh-team { font-size: 1.15rem; } .mh-seed { font-size: .75rem; color: #888; } .mh-country { font-size: .8rem; } .mh-won { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; background: var(--accent); color: var(--ink); padding: .05rem .4rem; border-radius: 3px; } .mh-vs { color: #aaa; font-weight: 700; } .bp-steps { display: grid; gap: .8rem; grid-template-columns: 1fr; margin-top: .5rem; } .bp-step { border: 1px solid rgba(20,22,31,.14); border-radius: 6px; padding: .7rem .8rem; position: relative; } .bp-step.active { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); } .bp-step.done { border-color: var(--primary); } .bp-num { position: absolute; top: -.7rem; left: .7rem; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center; border-radius: 50%; background: var(--primary); color: #fff; font-size: .8rem; font-weight: 800; } .bp-step h4 { margin: .4rem 0 .3rem; } .bp-song.picked { color: var(--primary); font-weight: 700; } .bp-song.banned s { color: #b00; } .bp-deadline { font-size: 1rem; } .bp-songs { margin-top: 1rem; } .bp-songs ul { list-style: none; padding: 0; margin: .3rem 0 0; } .bp-songs li { padding: .25rem 0; border-bottom: 1px solid rgba(20,22,31,.08); } .bp-songs li.picked { font-weight: 700; } .pill-ban { background: #b00; color: #fff; } .pill-pick { background: var(--primary); color: #fff; } .walkover-card { border-left: 4px solid #d98a00; } .entries { display: grid; gap: 1rem; grid-template-columns: 1fr; } .entry-card { border: 1px solid rgba(20,22,31,.14); border-radius: 6px; padding: .8rem .9rem; } .entry-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .entry-dl { margin-left: auto; } .entry-card h4 { margin: .7rem 0 .3rem; } .votes-table th { text-transform: none; letter-spacing: 0; } .comment-cols { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1rem; } .comments { margin: .3rem 0 0; padding-left: 1.1rem; } .comments li { padding: .2rem 0; } @media (min-width: 720px) { .bp-steps { grid-template-columns: repeat(3, 1fr); } .entries, .comment-cols { grid-template-columns: 1fr 1fr; } } /* -- pickem --------------------------------------------------------------- */ .pickem-grid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .pk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; } .pk-versus { font-weight: 700; } .pickem-form { display: grid; gap: .5rem; } .pickem-choice { display: flex; align-items: center; gap: .4rem; font: inherit; font-weight: 700; text-align: left; background: #fff; border: 2px solid rgba(20,22,31,.2); border-radius: 6px; padding: .6rem .8rem; cursor: pointer; } .pickem-choice:hover { border-color: var(--primary); } .pickem-choice.chosen { border-color: var(--primary); background: rgba(43,63,224,.08); } .pickem-lock { font-size: .9rem; margin: .5rem 0 0; } .pct-row { margin: .4rem 0; } .pct-label { font-weight: 700; margin-bottom: .2rem; display: flex; align-items: center; gap: .4rem; } .pct-track { position: relative; background: rgba(20,22,31,.1); border-radius: 4px; height: 1.5rem; overflow: hidden; } .pct-fill { position: absolute; inset: 0 auto 0 0; background: var(--primary); border-radius: 4px; } .pct-num { position: absolute; right: .5rem; top: 0; line-height: 1.5rem; font-size: .82rem; font-weight: 700; color: var(--ink); } /* -- archive -------------------------------------------------------------- */ .archive-grid { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } .arch-card { display: block; background: #fff; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; color: var(--ink); } .arch-card:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.12); } .arch-banner img { width: 100%; display: block; aspect-ratio: 22 / 5; object-fit: cover; } .arch-banner-none { aspect-ratio: 22 / 5; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; } .arch-body { padding: .8rem .9rem; } .arch-body h2 { margin: 0 0 .4rem; font-size: 1.1rem; } .arch-winner { margin: .2rem 0; } /* --------------------------------------------------------------------------- Participant pages (register / team / submit / banpick / invites). Only classes NOT already defined above by the shared/public block live here, so nothing overrides the canonical .flag / .seed-badge / .cap-star / .team-status / .team-roster / .countdown rules. The ban/pick tracker uses its own .bpt-step scope so it can't clash with the public matchup page's .bp-step. --------------------------------------------------------------------------- */ .mt { margin-top: .6rem; } .plain { list-style: none; padding: 0; margin: .4rem 0; } .plain li { padding: .2rem 0; } hr { border: 0; border-top: 1px solid rgba(20,22,31,.12); margin: 1rem 0; } /* Team status colour variants (compose on top of the shared .team-status chip) */ .status-approved { background: #e6f7ea; color: #1a7f37; } .status-pending { background: #fff6e0; color: #9a6b00; } .status-rejected, .status-withdrawn, .status-disqualified { background: #fdeaea; color: #b42318; } /* Forms */ .field { display: block; margin: 0 0 .7rem; } .field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; } .field input[type=text], .field input[type=file], .field textarea, .field select, .stack input[type=text], .stack select { width: 100%; max-width: 32rem; font: inherit; padding: .45rem .55rem; border: 1px solid rgba(20,22,31,.28); border-radius: 4px; background: #fff; color: var(--ink); } .field textarea { max-width: 100%; resize: vertical; } .stack { margin-bottom: .4rem; } form.inline, .inline { display: inline; } .row-actions { display: inline-flex; gap: .6rem; margin-left: .4rem; } .linkbtn { background: none; border: 0; color: var(--primary); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; } .linkbtn.danger { color: #b42318; } .btn-danger { background: #b42318; color: #fff; } .btn-go { background: #1a7f37; color: #fff; } .btn[disabled], input[disabled], select[disabled], textarea[disabled], button[disabled] { opacity: .55; cursor: not-allowed; } .linkrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* Account / profile chip (also used by /me) */ .me-head { display: flex; gap: .8rem; align-items: center; margin: .6rem 0; } .me-avatar { border-radius: 6px; border: 1px solid rgba(20,22,31,.15); } .me-name { margin: 0 0 .1rem; font-size: 1.05rem; } .changes { margin: .4rem 0; padding-left: 1.1rem; } /* Larger roster rows on the team hub */ .roster-lg li { font-size: 1.02rem; padding: .3rem 0; } /* Deadline + big countdown chip */ .deadline-big { font-size: 1.05rem; font-weight: 700; } .countdown.big { background: var(--accent); color: var(--ink); border-radius: 4px; padding: .1em .5em; } /* Contribution table + bars */ .contrib-form input[type=text], .contrib-form select { width: 100%; min-width: 6rem; } .barcell { width: 30%; min-width: 6rem; } .bar { display: inline-block; height: .8rem; background: var(--primary); border-radius: 2px; vertical-align: middle; } /* Ban / pick — tracker (scoped, distinct from the public matchup .bp-step) */ .bp-tracker { display: flex; gap: .5rem; margin: .6rem 0; } .bpt-step { flex: 1; text-align: center; font-weight: 800; font-size: .82rem; letter-spacing: .05em; padding: .4rem; border: 2px solid rgba(20,22,31,.2); border-radius: 4px; color: #888; background: #fff; } .bpt-step.active { border-color: var(--primary); color: var(--primary); background: #fff; } .bpt-step.done { border-color: var(--ink); color: #fff; background: var(--ink); } .song-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .song-card { border: 2px solid rgba(20,22,31,.18); border-radius: 6px; padding: 1rem; background: #fff; } .song-card.is-banned { border-color: #b42318; opacity: .7; } .song-card.is-picked { border-color: #1a7f37; } .song-card h3 { margin: 0 0 .5rem; font-size: 1rem; } .tag { display: inline-block; font-weight: 800; font-size: .72rem; text-transform: uppercase; border-radius: 3px; padding: .1em .45em; } .tag-ban { background: #fdeaea; color: #b42318; } .tag-pick { background: #e6f7ea; color: #1a7f37; } /* ============================================================ */ /* Judge pages (design 03 §3.3) — minimal-chrome scoring sheets */ /* ============================================================ */ /* Assignment list */ .j-assignments { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } .j-assignment { display: block; text-decoration: none; color: inherit; border: 2px solid rgba(20,22,31,.14); transition: border-color .1s; } .j-assignment:hover { border-color: var(--primary); } .j-assignment.j-open { border-left: 4px solid var(--accent); } .j-assignment.j-closed { opacity: .8; } .j-assignment-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .j-assignment-head h2 { margin: 0; font-size: 1.1rem; } .j-deadline { margin: .4rem 0 0; font-size: .85rem; } .j-note { margin-top: 1rem; } /* Status chip */ .j-chip { font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; border-radius: 3px; padding: .12em .5em; white-space: nowrap; } .j-chip-open { background: var(--accent); color: var(--ink); } .j-chip-closed { background: rgba(20,22,31,.12); color: var(--ink); } .j-chip-pending { background: var(--accent2); color: var(--ink); } /* Progress bar */ .j-progress { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; } .j-progress-label { font-size: .8rem; font-weight: 700; color: #555; } .j-progress-track { flex: 1; height: .6rem; background: rgba(20,22,31,.1); border-radius: 3px; overflow: hidden; min-width: 4rem; } .j-progress-fill { display: block; height: 100%; background: var(--primary); } .j-progress-num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; } /* Scoring sheet layout: sidebar + main pane */ .j-sheet { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: 1rem; align-items: start; } @media (max-width: 640px) { .j-sheet { grid-template-columns: 1fr; } } .j-entrylist { position: sticky; top: 1rem; max-height: 80vh; overflow: auto; } .j-entries { list-style: none; margin: .3rem 0 0; padding: 0; } .j-entry { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; text-decoration: none; color: inherit; border-radius: 4px; } .j-entry:hover { background: rgba(20,22,31,.05); } .j-entry-cur { background: var(--primary); color: #fff; } .j-entry-cur:hover { background: var(--primary); } .j-entry-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* done/draft/todo dots */ .j-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(20,22,31,.3); } .j-done { background: #1a7f37; border-color: #1a7f37; } .j-draft { background: var(--accent); border-color: #b9a800; } .j-todo { background: #fff; } /* Pane */ .j-pane-head { border-bottom: 2px solid var(--primary); padding-bottom: .4rem; margin-bottom: .6rem; } .j-anon { margin: 0; font-size: 1.25rem; } .j-song { margin: .2rem 0 0; } .j-dl { margin: .6rem 0; } .j-about { margin: .4rem 0 .8rem; } .j-about summary { cursor: pointer; font-weight: 700; } .j-about p { margin: .4rem 0; } .j-criteria { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; } @media (max-width: 480px) { .j-criteria { grid-template-columns: 1fr; } } .j-criteria input { width: 100%; } .j-savehint { min-height: 1.1em; margin: .2rem 0; font-size: .85rem; } .j-formactions { display: flex; gap: .6rem; flex-wrap: wrap; } .j-prevnext { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1rem; } .j-prevnext .pill[aria-disabled="true"] { opacity: .4; } .j-mystats { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid rgba(20,22,31,.15); } .j-mystats h3 { margin: 0 0 .2rem; font-size: 1rem; } /* Clash voting cards */ .j-matchup-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .j-matchup-head h2 { margin: 0; font-size: 1.1rem; } .j-clash-entries { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .6rem 0; } @media (max-width: 640px) { .j-clash-entries { grid-template-columns: 1fr; } } .j-clash-entry { border: 2px solid rgba(20,22,31,.14); border-radius: 6px; padding: .8rem; } .j-clash-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .j-vote-pick { font-weight: 700; font-size: .85rem; display: inline-flex; gap: .3rem; align-items: center; } .j-abstain { display: inline-flex; gap: .3rem; align-items: center; margin: .3rem 0 .6rem; font-size: .9rem; } .j-comment-ro { white-space: pre-wrap; } /* ===================================================================== */ /* ADMIN (contest ops) — namespaced .adm-*; ORG VIEW ribbon + subnav. */ /* ===================================================================== */ .adm-ribbon { background: #9a6b00; color: #fff; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .74rem; padding: .35rem .8rem; border-radius: 4px; margin: 0 0 .8rem; } .adm-subnav { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; border-bottom: 2px solid rgba(20,22,31,.12); padding-bottom: .5rem; } .adm-subnav a { font-weight: 700; font-size: .88rem; padding: .3rem .7rem; border-radius: 4px; color: var(--ink); } .adm-subnav a:hover { background: rgba(20,22,31,.06); text-decoration: none; } .adm-subnav a.active { background: var(--primary); color: #fff; } .adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .7rem; margin: 0 0 1rem; } .adm-tile { display: flex; flex-direction: column; gap: .2rem; background: #fff; border: 2px solid rgba(20,22,31,.14); border-radius: 6px; padding: .8rem; color: var(--ink); } a.adm-tile:hover { border-color: var(--primary); text-decoration: none; } .adm-tile-num { font-size: 1.7rem; font-weight: 800; line-height: 1; } .adm-tile-num.warn { color: #b42318; } .adm-tile-label { font-size: .78rem; color: #555; text-transform: uppercase; letter-spacing: .03em; } .adm-list { list-style: none; margin: .4rem 0 0; padding: 0; } .adm-list li { padding: .35rem 0; border-bottom: 1px solid rgba(20,22,31,.08); } .adm-two-col { display: grid; grid-template-columns: minmax(0,2fr) minmax(14rem,1fr); gap: 1rem; align-items: start; } .adm-audit { position: sticky; top: 1rem; } .adm-round-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .adm-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; } .inline-form { display: inline-flex; gap: .35rem; align-items: center; margin: 0; } .adm-form { margin: .6rem 0 0; } .adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .6rem; margin: 0 0 .8rem; } .adm-form label { display: flex; flex-direction: column; font-size: .82rem; font-weight: 700; gap: .2rem; } .adm-form input, .adm-form select { font: inherit; padding: .35rem .45rem; border: 1px solid rgba(20,22,31,.3); border-radius: 4px; } .adm-check { flex-direction: row !important; align-items: center; gap: .4rem !important; font-weight: 600; } .adm-checks { display: flex; flex-wrap: wrap; gap: .8rem; margin: .3rem 0 .8rem; } .adm-songs { margin: .4rem 0 .8rem; } .adm-song { border: 1px solid rgba(20,22,31,.18); border-radius: 6px; padding: .5rem .7rem; } .adm-song legend { font-weight: 800; font-size: .8rem; } .adm-song label { display: flex; flex-direction: column; font-size: .76rem; font-weight: 600; gap: .15rem; margin: .25rem 0; } .adm-song input { font: inherit; padding: .3rem .4rem; border: 1px solid rgba(20,22,31,.3); border-radius: 4px; } .adm-reason { min-width: 8rem; } .adm-members { list-style: none; margin: .4rem 0; padding: 0; } .adm-member { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; padding: .4rem 0; border-bottom: 1px solid rgba(20,22,31,.08); } .adm-member.is-warn { background: #fff6e0; border-radius: 4px; padding: .4rem .5rem; } .adm-judge { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; } .adm-judge.is-removed { opacity: .6; } @media (max-width: 720px) { .adm-two-col { grid-template-columns: 1fr; } .adm-audit { position: static; } } /* ===================================================================== */ /* ADMIN-B — bracket manager, anonymization, publishing, announcements. */ /* ===================================================================== */ .adm-form.inline { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; margin: 0; } .adm-form.inline .inline-lbl { display: inline-flex; flex-direction: column; font-size: .76rem; font-weight: 700; gap: .15rem; } .inline-lbl { font-size: .8rem; font-weight: 700; } .btn.small { padding: .3rem .6rem; font-size: .8rem; } .btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(20,22,31,.3); } .btn:disabled { opacity: .45; cursor: not-allowed; } /* bracket manager */ .mm-card { padding: .8rem .9rem; } .mm-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; } .mm-controls { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; border-top: 1px solid rgba(20,22,31,.1); padding-top: .6rem; } .bp-atoms { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; } .bp-atom { font-size: .74rem; background: rgba(20,22,31,.06); padding: .12rem .5rem; border-radius: 999px; } .bp-atom.banned s { color: #b00; } .bp-atom.picked { background: var(--primary); color: #fff; } .sub-note { font-size: .68rem; color: var(--primary); font-weight: 700; } .decide-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; } .tally { font-weight: 800; font-variant-numeric: tabular-nums; align-self: center; } .dq-panel { border: 1px dashed rgba(20,22,31,.25); border-radius: 6px; padding: .4rem .6rem; } .dq-panel summary { font-weight: 700; font-size: .82rem; cursor: pointer; } .dq-panel form { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; } /* publishing */ .pub-list { display: flex; flex-direction: column; gap: .2rem; } .pub-gate { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 0; border-bottom: 1px solid rgba(20,22,31,.1); } .pub-gate:last-child { border-bottom: 0; } .pub-gate-head { display: flex; align-items: center; gap: .5rem; } .pill.pub-on { background: var(--primary); color: #fff; } .pill.pub-off { background: rgba(20,22,31,.12); color: var(--ink); } /* announcements */ .ann-sev { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: .05rem .4rem; border-radius: 3px; background: rgba(20,22,31,.1); } .ann-sev-warning { background: #d98a00; color: #fff; } .ann-sev-event { background: var(--accent2); color: var(--ink); } .ann-hist { padding: .7rem .9rem; } .ann-hist-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* anonymization */ .anon-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; } .anon-tabs a { font-weight: 700; font-size: .85rem; padding: .3rem .7rem; border-radius: 4px; border: 1px solid rgba(20,22,31,.18); color: var(--ink); } .anon-tabs a:hover { background: rgba(20,22,31,.06); text-decoration: none; } .anon-tabs a.active { background: var(--primary); color: #fff; border-color: var(--primary); } .anon-table td { vertical-align: top; } .anon-dot { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .45rem; border-radius: 3px; white-space: nowrap; } .anon-ok { background: var(--primary); color: #fff; } .anon-warn { background: #d98a00; color: #fff; } .anon-fail { background: #b42318; color: #fff; } .anon-pending { background: rgba(20,22,31,.12); color: var(--ink); } .anon-warnings { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .78rem; color: #8a5a00; } .anon-err { margin: .3rem 0 0; font-size: .78rem; color: #b42318; } .anon-actions { white-space: nowrap; } .anon-actions .adm-form.inline { margin-bottom: .2rem; } /* ===================================================================== */ /* Blueprint polish (trailing overrides) — sharpen the remaining sub-cards */ /* to the same minimal radius as .card so every panel reads as a crisp */ /* rectangle on the grid. Visual only; placed last so it wins on radius. */ /* ===================================================================== */ .quick, .team-card, .matchup-card, .fa-card, .entry-card, .song-card, .arch-card, .adm-tile, .j-assignment, .j-clash-entry, .bp-step { border-radius: 3px; } /* Quick-links get a cyan info tick that fills blue on hover (banner accents). */ .quick { border-left: 3px solid var(--accent2); } .quick:hover { border-left-color: var(--primary); } /* ===================================================================== */ /* Caster dashboard + OBS guide (app/routes/caster.js). Blueprint look: */ /* mono technical labels, sharp rectangles, blue/lime/cyan accents. */ /* ===================================================================== */ .mono { font-family: var(--mono); } .cst-url { margin: .55rem 0; } .cst-url-lbl { display: block; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #555; margin-bottom: .2rem; } .cst-url-row { display: flex; gap: .4rem; align-items: stretch; } .cst-url-in { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: .8rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 3px; background: #f7f8fa; color: var(--ink); } .cst-url-in:focus { outline: 2px solid var(--accent2); } .cst-url-group { border-left: 3px solid var(--accent2); padding: .3rem 0 .3rem .7rem; margin: .8rem 0; } .cst-url-h { margin: 0 0 .35rem; font-size: .9rem; font-family: var(--mono); } .cst-board { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); } .cst-tile { border: 1px solid var(--line); border-radius: 3px; padding: .6rem .7rem; background: #fff; border-top: 3px solid var(--primary); } .cst-tile-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; } .cst-versus { display: flex; align-items: center; gap: .5rem; justify-content: space-between; } .cst-team { display: flex; align-items: center; gap: .35rem; flex: 1 1 0; min-width: 0; } .cst-team-r { justify-content: flex-end; text-align: right; } .cst-team strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cst-score { font-size: 1.05rem; font-weight: 800; padding: 0 .3rem; white-space: nowrap; } .cst-song { font-size: .82rem; margin-top: .35rem; } .cst-k { display: inline-block; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--primary); padding: 0 .35rem; border-radius: 3px; margin-right: .3rem; } .cst-song .cst-k { background: var(--ink); } .cst-guide-list { list-style: none; padding: 0; margin: 0; } .cst-guide-list li { margin: .6rem 0; } .cst-guide-list code { display: inline-block; word-break: break-all; } .cst-guide-steps { margin: 0; padding-left: 1.2rem; } .cst-guide-steps li { margin: .45rem 0; } /* ===================================================================== */ /* CLASH / PICK'EM / TEAM (views agent — items 2, 4, 10, 11). */ /* Appended block: centered head-to-head matchup cards, the pick'em */ /* widget embedded under each clash card, and team/roster links. Placed */ /* last so these win on the properties they restate; everything else in */ /* the shared/public block above is left intact. */ /* ===================================================================== */ /* -- centered head-to-head sides (item 2) --------------------------------- */ /* Two country sides laid out symmetric around 'vs': side A hugs the centre */ /* from the left, side B from the right, 'vs' pinned in the middle column. */ /* A WORD IS NEVER BROKEN: the side columns are floored at min-content (the */ /* longest word) instead of being free to shrink to nothing, so "South Korea"*/ /* wraps between its words at worst and never splits as "Kor / ea". The card */ /* is its own inline-size container, so a side that still cannot fit stacks */ /* (see the @container rule below) rather than overflowing the page. */ .matchup-card { container-type: inline-size; } .mc-sides { display: grid; grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); align-items: center; gap: .3rem .55rem; padding: .6rem .7rem; } .mc-side { display: flex; align-items: center; gap: .35rem; padding: 0; } .mc-side-a { justify-content: flex-end; text-align: right; } .mc-side-b { justify-content: flex-start; text-align: left; } .mc-side .mc-team { overflow-wrap: normal; word-break: normal; word-wrap: normal; hyphens: none; } .mc-seed { min-width: 0; } /* drop the base 1.6rem spacer reservation */ .mc-vs { padding: 0 .1rem; } /* Narrow screens: two long country names cannot sit side by side, so stack */ /* them (A / vs / B) centered instead of letting anything overflow the card. */ @media (max-width: 520px) { .mc-sides { grid-template-columns: 1fr; justify-items: center; gap: .15rem; } .mc-side-a, .mc-side-b { justify-content: center; text-align: center; } .mc-vs { text-align: center; } } /* The clash "by round" grid gives each card room for two country names side */ /* by side (the widest realistic pair needs ~20rem) instead of packing four */ /* narrow columns that would force the sides to stack on every card. Scoped to */ /* .bracket-lists so the admin bracket manager's grid is untouched. */ .bracket-lists .matchup-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); } /* Same stack whenever the CARD itself is too narrow for both names — happens */ /* on wide screens too, where the clash grid packs several cards per row. */ @container (max-width: 21rem) { .mc-sides { grid-template-columns: 1fr; justify-items: center; gap: .15rem; } .mc-side-a, .mc-side-b { justify-content: center; text-align: center; } .mc-vs { text-align: center; } } .mc-team-link { color: inherit; } .mc-team-link:hover { color: var(--primary); text-decoration: underline; } /* When team names link out, the whole card can't be one anchor — the matchup */ /* link moves to this footer strip instead. */ .mc-more { display: block; padding: .35rem .7rem; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); border-top: 1px solid rgba(20,22,31,.08); } .mc-more:hover { background: rgba(43,63,224,.04); text-decoration: none; } /* -- embedded pick'em widget (items 4, 10) -------------------------------- */ /* Sits directly beneath a matchup card in the clash "by round" list; reuses */ /* the .pickem-form / .pickem-choice / .pct-* styles from the shared block. */ .mc-cell { display: flex; flex-direction: column; } .pickem-embed { border: 1px solid rgba(20,22,31,.14); border-radius: 3px; background: #fff; padding: .55rem .7rem; margin-top: .4rem; } .pickem-embed .pct-row:first-child { margin-top: 0; } /* -- team-name links on pick'em cards (item 11) --------------------------- */ .pk-team-link { color: inherit; } .pk-team-link:hover { color: var(--primary); text-decoration: underline; } .pk-tags { display: inline-flex; gap: .35rem; align-items: center; } /* ===================================================================== */ /* TEAM STATE WITHOUT STRIKETHROUGH. */ /* No team name is ever struck through. Disqualified teams read as a */ /* quiet, muted variant of the same row; qualifier standings shade the */ /* rows of teams that QUALIFIED and mute the ones passed down by the */ /* same-country rule (the ↧ marker + its note carry the reason). */ /* ===================================================================== */ /* Disqualified: muted ink + a slightly greyed flag, never a line-through. */ .mc-side.is-dq { color: #5f626f; opacity: .85; } .mc-side.is-dq .mc-team-link { color: inherit; } .mc-side.is-dq .flag-img, .team-card.is-dq .flag-img { filter: grayscale(1); } .team-card.is-dq .team-name { color: #5f626f; } /* Matchup header side (public /matchups/:id) — muted, flag greyed, not struck. */ .mh-side.is-dq { color: #5f626f; opacity: .85; } .mh-side.is-dq .flag-img { filter: grayscale(1); } .mh-side.is-dq .mh-team { color: #5f626f; } .bk-team.is-dq { opacity: .6; } /* Admin seeding: a passed-down team is muted, never struck (the note explains). */ .adm-list li.is-passed { color: #6b6e7a; } /* Qualifier standings: a qualified row is tinted with the theme primary and */ /* ticked in the gutter; the open/hover states keep the tint (they would */ /* otherwise be overridden by the generic .ql-row backgrounds above). */ .ql-row.is-qualified { background: rgba(43,63,224,.10); box-shadow: inset 3px 0 0 var(--primary); } .ql-details[open] .ql-row.is-qualified { background: rgba(43,63,224,.16); } .ql-row.is-qualified:hover { background: rgba(43,63,224,.16); } .ql-row.is-qualified .ql-team { color: var(--ink); } /* EVERY team that did not qualify is greyed — muted ink on a faint neutral */ /* wash, never a line-through. #5f626f on the wash measures ~5.3:1, so the */ /* names stay readable. The two background rules below re-state the open and */ /* hover states because `.ql-details[open] .ql-row` (0,3,0) outranks a bare */ /* `.ql-row.is-notqualified` (0,2,0) and would otherwise repaint the row. */ .ql-row.is-notqualified, .ql-row.is-notqualified .ql-c, .ql-row.is-notqualified .ql-anon, .ql-row.is-notqualified .muted { color: #5f626f; } .ql-row.is-notqualified { background: rgba(20,22,31,.035); } .ql-details[open] .ql-row.is-notqualified { background: rgba(20,22,31,.06); } .ql-row.is-notqualified:hover { background: rgba(20,22,31,.06); } /* Passed down (country slot already taken) refines the greyed row: same muted */ /* ink as every other non-qualified team (so it is not oddly lighter), lighter */ /* weight, and the ↧ marker + its note (both from the view) carry the reason. */ .ql-row.is-passed .ql-team { font-weight: 600; }