/* Front Line — all UI chrome. * * Three rules run through everything here: * * 1. THE HUD IS NOT DECORATION. Every element on screen during a match either * tells the player something they act on within the next second, or it is * off. * and the middle is empty on purpose — that is where you are looking. * 2. NOTHING IN THE HUD ACCEPTS POINTER EVENTS except the two buttons on the * end-of-match board. A stray hover target over a live canvas eats clicks * that were meant to be shots. * 3. NO ELEMENT WEARS AN ACCENT BAR. See the note below — this is the single * most expensive thing that was wrong with this file. * * --------------------------------------------------------------------------- * WHY THERE ARE NO `border-left` ACCENTS IN THIS FILE ANY MORE * --------------------------------------------------------------------------- * There used to be twelve. The same 3px accent bar was stamped on buttons, * lobby rows, panels, killfeed rows, scoreboard team headers and toasts — six * element types with nothing structurally in common, all wearing one * decoration, on top of `1px solid var(--line)` boxes, which is the same * instinct twice. * * The user's read was "AI slop", and the diagnosis behind that is exact: a bar * applied everywhere is a rule used INSTEAD OF a hierarchy. Nothing was * emphasised because everything was. Deleting the bars is only half the fix; * the other half is that emphasis now comes from things that carry meaning: * * - weight, scale and colour of TYPE (a scoreboard is almost entirely type) * - a filled SURFACE for the one row/column that is "you" or "selected" * - real column alignment with tabular figures, so digits line up * - space, and different amounts of it, to group things * * `--cta` is the contrast-safe field-cyan action plate. `--signal` / the legacy * `--gold` alias is selection, focus and brand edge. `--blue` / `--red` mean friendly / * hostile and nothing else. `--green` means ready/confirmed and nothing else. * * Rules (`--rule`) are permitted only where they are doing a TABLE's job: * separating columns of comparable data, or sitting under a column header. * Never as an outline around a panel, and never coloured. */ :root { /* --- surfaces: a real ramp, so a panel differs from the page and from a * raised header inside itself. One flat colour plus 1px outlines is what * forces you to reach for decorative borders in the first place. */ --s0: #0a0c0b; /* olive-black page floor */ --s1: #101412; /* opaque field panel */ --s2: #171c19; /* raised: header bands, selected column */ --s3: #202722; /* hover */ --s4: #29322d; /* pressed / active */ --ink: #e6ebe8; --ink-display: #f2efe6; --ink-2: #aab5b1; --ink-3: #77847f; --ink-4: #4d5a55; /* UI-only field signal. Never use this for teams or in the 3D combat space. */ --signal: #3dd6c6; --signal-d: #25a99d; --warn: #f0a202; /* One primary action per screen: cyan plate with contrast-safe dark ink. */ --cta: #3dd6c6; --cta-ink: #0a0e10; --gold: var(--signal); --gold-d: var(--signal-d); --blue: #6bc2ff; /* friendly only */ --red: #ff5a4e; /* hostile, damage, danger */ --green: #8fd98b; /* ready, confirmed */ --rule: rgba(230, 235, 232, 0.085); --rule-strong: rgba(230, 235, 232, 0.17); --hud-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.5); /* --- type. Two families on a real contrast axis: a condensed display face * for identity and actions, a technical sans for every label, value and * table cell. Tracking stays below 0.12em so small labels remain words. */ --display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif; --ui: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --num: 'IBM Plex Mono', ui-monospace, monospace; /* --- z-index scale. Semantic, so nobody has to invent a 9999. */ --z-bg: 0; --z-hud: 10; /* Full-screen damage effects, INSIDE #hud's stacking context. * * `#dmg-vignette` and `#screen-flash` were written as `z-index: var(--z-fx, 40)` * and `--z-fx` was never declared, so both resolved to the fallback 40 — the * same value as --z-modal. Contained by #hud's own context they could not reach * a menu, but 40 put them above every sibling in the HUD, including the live * scoreboard and the end-of-match board. A red wash over the final results is * not damage feedback. Low, so DOM order puts the boards on top. */ --z-fx: 12; --z-screen: 20; /* INSIDE a `.screen`'s own stacking context, not on the page scale. * * `--z-sheet-bar` is the sticky band that must stay above scrolling content — * `.sheet-foot` and `.sheet-foot`. `--z-screen-veil` is the transition sheet, and it * is written as a DERIVATION rather than as 3, because "above everything inside * a screen, including its sticky bars" is a relationship. A literal here is * exactly how `--z-fx` came to equal `--z-modal`. */ --z-sheet-bar: 2; --z-screen-veil: calc(var(--z-sheet-bar) + 1); --z-modal: 40; --z-loading: 60; --z-toast: 70; --z-gate: 200; /* the device gate outranks everything */ /* --- motion. Exponential ease-out; no bounce anywhere. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --fast: 120ms; --med: 200ms; /* --- how much of the ENTRANCE choreography plays. * * Two scales rather than one, because a stagger and a duration are different * things: shortening the stagger tightens the sequence, shortening the duration * makes each element arrive faster. Boot plays both at 1 — that ceremony is the * game starting up and it happens once. Coming BACK to a screen you already * saw replays it at a fraction, so BACK feels like a step rather than a reboot. * `js/ui-boot.js` puts `.booted` on at the first screen change; see the * choreography section for the override. */ --fl-stagger: 1; --fl-dur: 1; /* --- legacy aliases. Kept so any stray reference resolves rather than * silently computing to nothing. Do not use these in new rules. */ --bg: var(--s0); --bg-2: var(--s2); --ink-dim: var(--ink-2); --ink-faint: var(--ink-3); --accent: var(--signal); --accent-2: var(--blue); --danger: var(--red); --good: var(--green); --line: var(--rule); --font: var(--display); } @font-face { font-family: 'Saira Condensed'; src: url('assets/fonts/saira-condensed-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Saira Condensed'; src: url('assets/fonts/saira-condensed-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('assets/fonts/ibm-plex-sans-latin-400-600.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/ibm-plex-mono-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } * { box-sizing: border-box; } /* Saira ships real 600/700 weights; never ask the browser to synthesize one. */ h1, h2, h3, h4 { font-weight: 600; } .brand h1, .sheet-head h2, .modal-card h2, .panel-label, #scoreboard h3, #endboard h2, #load-label, .dg-mark, #device-gate h1 { font-weight: 700; } html, body { margin: 0; padding: 0; height: 100%; background: var(--s0); color: var(--ink); font-family: var(--ui); font-size: 16px; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hidden { display: none !important; } /* NO GENERIC `.vh` VISUALLY-HIDDEN UTILITY HERE. * * There was one, and nothing in the markup or in any module ever carried the * class — while `.comp-legacy` fifteen hundred lines below independently * reimplemented the identical four declarations for the one element that needs * them. An unused accessibility utility provides no accessibility; it provides a * second way to do a thing, which is how two spellings of one idea get shipped. * If a second element ever needs this, promote `.comp-legacy` into a shared rule * rather than adding a parallel one. */ #game-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; /* A transparent/cleared backbuffer must not turn into a pure-black world under the still-live HUD. This is a last visual safety net; the renderer's recovery owner paints the same blue-grey when even its direct world draw fails. */ background: #263342; } /* A lost WebGL context owns the canvas and presents black regardless of its CSS * background, so the context-loss fallback has to be DOM. It remains below the HUD: * score, feed and minimap staying live is useful evidence that the match is alive. * During an ordinary PostFX retry the backdrop is transparent and the retained, * completely composited frame remains visible underneath the small status plate. */ #render-recovery { position: fixed; inset: 0; z-index: calc(var(--z-hud) - 1); display: grid; place-items: end center; padding: 0 18px 8vh; pointer-events: none; background: transparent; } #render-recovery[hidden] { display: none; } #render-recovery[data-mode="context-lost"], #render-recovery[data-mode="restoring"], #render-recovery[data-mode="fallback-slate"] { place-items: center; padding: 18px; background: radial-gradient(circle at 50% 35%, rgba(92, 121, 144, 0.28), transparent 48%), #263342; } .render-recovery-card { display: grid; gap: 7px; width: min(430px, calc(100vw - 36px)); padding: 13px 16px; color: var(--ink); background: rgba(16, 20, 18, 0.92); border-top: 2px solid var(--signal); font-family: var(--ui); font-size: 13px; line-height: 1.4; text-align: left; text-shadow: none; } .render-recovery-card strong { font-family: var(--display); font-size: 15px; letter-spacing: 0.08em; } .render-recovery-card span { color: var(--ink-2); } #render-recovery-reload { justify-self: start; margin-top: 4px; padding: 8px 11px; border: 0; color: var(--cta-ink); background: var(--cta); font: 700 12px/1 var(--ui); letter-spacing: 0.06em; cursor: pointer; pointer-events: auto; } #render-recovery-reload[hidden] { display: none; } /* ============================== primitives ============================== */ /* A key cap. Real affordance for a real key, and it stops the controls legend * from being a wall of bolded words. */ kbd { font-family: var(--ui); font-size: 0.78em; line-height: 1; letter-spacing: 0.06em; display: inline-block; min-width: 1.55em; padding: 0.28em 0.42em; text-align: center; color: var(--ink); background: var(--s3); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06); border-radius: 2px; vertical-align: 0.06em; } /* A section heading. * * THE EYEBROW PROBLEM, and why this no longer looks like one. * * This started as 11px at 0.2em tracking in --ink-3 over a 1px hairline, and it * appeared nine-plus times across the front end: DEPLOYMENT, IDENTITY & AIM, * VIDEO, AUDIO, MATCH, INVITE, CALL SIGN, MATCH SETTINGS, SQUAD — and then every * field label used a near-identical 11px/0.16em/--ink-3 treatment underneath it. * * One module stamped on every block is the tiny-tracked-uppercase-eyebrow tell, * and worse, it made the section heading and the field label look like the SAME * THING, so the hierarchy it was supposed to create didn't exist. A critic * reading the build called it texture rather than structure, which is exactly * right. * * The fix is difference in KIND, not in degree: a section heading is now set in * the display face at a readable size in near-full ink, and a field label stays * in the technical sans, small and tight. You can tell them apart at a glance * without reading either, and neither needs a rule under it to be found. */ /* `.screen .panel-label`, not `.panel-label`. * * These are `

` inside a `.screen`, and `.screen h3` sets * `color: var(--ink-3)` at specificity (0,1,1) — which beats a bare `.panel-label` * at (0,1,0). So the whole point of this rule, that a section heading is in near * full ink and a field label is not, was being silently overridden and the * headings still rendered the same grey as the labels beneath them. The eyebrow * fix was in the file and not on the screen. */ .screen .panel-label, .panel-label { font-family: var(--display); font-size: 18px; font-weight: 400; letter-spacing: 0.045em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; } /* ============================== buttons ============================== * Three ranks and they look like three ranks: * .btn.primary — a filled gold slab. There is one per screen. * .btn — a filled neutral slab. * .btn.ghost — type only, no box at all, until you hover it. * No borders, no gradients, no left bars. */ .btn { appearance: none; font-family: var(--display); font-size: 17px; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); background: var(--s2); border: 0; padding: 14px 22px; cursor: pointer; text-align: left; text-decoration: none; position: relative; transition: background var(--fast) ease, color var(--fast) ease, transform 90ms var(--ease); } .btn:hover { background: var(--s3); } .btn:active { background: var(--s4); transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .btn:disabled { color: var(--ink-3); cursor: default; background: var(--s1); } .btn:disabled:hover { background: var(--s1); } /* THE primary action. Filled, dark ink on gold — unmistakable at a glance and * it needs no bar to say so. */ .btn.primary { background: var(--cta); color: var(--cta-ink); border-color: transparent; font-weight: 800; font-size: 22px; padding: 18px 28px; letter-spacing: 0.08em; } .btn.primary:hover { background: #ffffff; } .btn.primary:active { background: #c5ccd3; color: var(--cta-ink); } .menu-main .btn.primary { /* Kept as the one filled slab, but not a billboard — size matches the row list. */ font-size: clamp(16px, 1.55vw, 19px); padding: 12px 16px; letter-spacing: 0.09em; } .btn.ghost { background: transparent; color: var(--ink-2); padding-left: 0; padding-right: 14px; } .btn.ghost:hover { background: transparent; color: var(--ink); } .btn.ghost:active { background: transparent; transform: translateY(1px); } /* .big survives from the old markup; it now only means "a bit larger", because * rank is carried by .primary. */ .btn.big { font-size: 20px; padding: 16px 24px; } .btn.small { font-size: 13px; padding: 9px 14px; letter-spacing: 0.12em; } /* ============================== screens ============================== */ .screen { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; z-index: var(--z-screen); background: var(--s0); } /* Every screen except the menu (which owns its own plate) gets a quiet floor — * a single soft light from above, not a radial gradient pretending to be one. */ #classes, #lobby { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 22%), var(--s0); } /* The standard sub-screen shell: a title band pinned to the top-left of a * content column, content below it, actions at the bottom. LEFT-ALIGNED to a * grid — a centred column of boxes is the layout the user was reacting to. */ /* `align-content: start`, and no `1fr` row. * * With `grid-template-rows: auto 1fr auto` the body row absorbed all the spare * height, so on a 1000px-tall window the loadout table sat at the top, BACK sat * at the very bottom, and 450px of nothing separated them. Content flows from * the top and the actions follow it. */ .sheet { min-height: 100%; display: grid; grid-template-rows: auto auto auto; align-content: start; gap: clamp(18px, 3vh, 34px); width: min(1320px, 100%); margin: 0 auto; padding: clamp(22px, 4.5vh, 54px) clamp(20px, 4vw, 64px) clamp(28px, 5vh, 56px); } .sheet-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .sheet-head h2 { margin: 0; font-family: var(--display); font-size: clamp(30px, 3.6vw, 50px); line-height: 0.92; letter-spacing: 0.06em; text-transform: uppercase; } .sheet-head .sub { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.55; color: var(--ink-2); letter-spacing: 0.01em; } /* STICKY, for the same reason the attribution bar is. * * This is the THIRD time a band added to the loadout pushed its primary action off * screen: first the sheet's `1fr` body row put 450px between the table and BACK, then * the equipment row landed below the fold, and fixing that pushed BACK to 956px in a 900px * viewport. Shaving pixels each time is losing a race — the screen gains a band per * session, so the action row must be reachable BY CONSTRUCTION rather than by * arithmetic that has to be redone. * * Pinned to the bottom of the scrollport with a scrim so content reads as passing * underneath it. `.sheet-body` carries matching bottom padding so the last band can * still be scrolled fully clear of the bar. */ .sheet-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: var(--z-sheet-bar); margin: 0 calc(-1 * clamp(20px, 4vw, 64px)); padding: 14px clamp(20px, 4vw, 64px); background: linear-gradient(180deg, transparent, rgba(6, 8, 10, 0.92) 38%); backdrop-filter: blur(3px); } .sheet-body { padding-bottom: clamp(8px, 1.4vh, 18px); } .sheet-body { min-width: 0; } /* A destructive action pushed to the far end of the action row, away from the exit. `margin-left: auto` rather than a fixed offset, so it stays right-aligned whatever else the row gains — the loadout sheet has gained a band per session three times and arithmetic that has to be redone is how that race is lost. */ .sheet-foot .right { margin-left: auto; } /* ARMED — the confirm state of RESET TO DEFAULTS. Amber rather than red: this discards settings, it does not delete anything a player cannot get back by dragging a slider, and reserving red for genuinely irreversible acts keeps red meaning something. OUTLINE AND TEXT ONLY, NO FILL — and that is a constraint, not a preference. A first version added an accent background plus a hover fill, which took the accent-as-surface count from 13 to 16 against `validate-ui-slop`'s limit, which stood at 14 at the time. (The limit is 17 today and this rule is entry #2 in that file's census; the number is restated here rather than corrected in place, because the argument is about the bar not moving and quoting a stale one is how the argument stops being checkable.) That check exists because the user called this UI out for AI-slop tells, and the bar does not move to accommodate the change that broke it. Losing the fill is also the better design: a filled amber button sitting in the same action row as the gold primary would read as a second call to action rather than as a warning. No size or weight change either — a button that grows when it arms shifts the row under the cursor and invites the very misclick the confirm step exists to prevent. AND THE GOLD PRIMARY IN THAT SENTENCE IS NOW LITERAL ON THIS ROW. `#btn-classes-back` wears `.btn.primary` while the loadout sheet is the spawn overlay (`js/main.js`, `openLoadoutScreen`), so ARMED and CONFIRM — DEPLOY can appear in the same foot: amber outline against gold fill, which is the separation this comment already assumed. */ .sheet-foot .btn.armed { border-color: var(--accent); color: var(--accent); } .screen h3 { margin: 0 0 10px; font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-3); text-transform: uppercase; } .screen .sub { color: var(--ink-2); font-size: 13px; } /* ============================== main menu ============================== * A left-anchored editorial grid, not a centred stack. Identity top-left, * actions under it, the match you are about to start in a dense panel to the * right, attribution in a real footer bar. The eye lands on the title, then * the one gold slab, then the settings — which is the order you use them in. */ #menu { display: grid; grid-template-rows: auto 1fr auto; padding: 0; background: var(--s0); } .access-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px clamp(22px, 5vw, 78px); background: color-mix(in srgb, var(--signal) 16%, var(--s1)); border-bottom: 1px solid var(--line); font-size: 14px; letter-spacing: 0.02em; z-index: 5; } /* Author `display:flex` defeats UA [hidden] — same fault documented for .field. */ .access-banner[hidden] { display: none !important; } .access-banner .btn { flex: 0 0 auto; } .career-panel { padding: 14px clamp(22px, 5vw, 78px) 0; font-size: 12.5px; opacity: 0.92; letter-spacing: 0.03em; /* Sit tight under the top edge — was reading too low over the poster. */ margin: 0; } .career-panel[hidden] { display: none !important; } .career-panel .career-line { margin: 1px 0; } /* Campaign ops / briefing / debrief */ .ops-sheet { max-width: 920px; } .ops-board-body { display: grid; gap: 22px; margin: 18px 0 24px; max-height: min(62vh, 640px); overflow: auto; } .ops-note { opacity: 0.85; font-size: 13px; margin: 0 0 8px; } .ops-act-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; } .ops-act h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; margin: 0; } .ops-film-btn { border: 0; background: transparent; color: var(--gold); padding: 4px 0; font: 700 10px/1 var(--ui); letter-spacing: 0.08em; cursor: pointer; } .ops-film-btn:hover, .ops-film-btn:focus-visible { color: var(--ink); } .ops-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ops-card { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); background: rgb(8 12 16 / 0.55); } .ops-card.is-complete { border-color: rgb(120 180 140 / 0.45); } .ops-card.is-locked { opacity: 0.45; } .ops-card-title { font-weight: 600; letter-spacing: 0.04em; } .ops-card-map { font-size: 12px; opacity: 0.65; text-transform: uppercase; } .ops-card-progress { font-size: 12px; opacity: 0.8; } .op-stars { letter-spacing: 0.08em; color: rgb(255 210 90 / 0.35); } .op-star.lit { color: rgb(255 210 90 / 0.95); } .campaign-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: clamp(8px, 2dvh, 20px); background: rgb(4 8 12 / 0.82); backdrop-filter: blur(6px); } .campaign-overlay.hidden { display: none; } .campaign-cinematic { position: fixed; inset: 0; z-index: 48; display: grid; place-items: center; padding: clamp(10px, 2vw, 24px); background: #030506; } .campaign-cinematic.hidden { display: none; } .campaign-cinematic-frame { position: relative; width: min(1280px, 100%); max-height: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #030506; border: 1px solid rgb(255 255 255 / 0.15); box-shadow: 0 28px 100px rgb(0 0 0 / 0.7); } .campaign-cinematic video { width: 100%; height: 100%; display: block; object-fit: contain; background: #030506; } .campaign-cinematic-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 0.18) 38%, rgb(0 0 0 / 0.9) 100%); } .campaign-cinematic-copy { position: absolute; left: clamp(18px, 4vw, 58px); right: clamp(18px, 18vw, 220px); bottom: clamp(18px, 5vw, 60px); text-shadow: 0 2px 16px #000; } .campaign-cinematic-kicker { margin: 0 0 6px; color: var(--gold); font: 700 clamp(10px, 1.2vw, 13px)/1.2 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; } .campaign-cinematic-copy h2 { margin: 0; color: #fff; font-size: clamp(25px, 4vw, 52px); letter-spacing: 0.04em; text-transform: uppercase; } .campaign-cinematic-story { max-width: 760px; margin: 8px 0 0; color: rgb(255 255 255 / 0.9); font-size: clamp(12px, 1.5vw, 17px); line-height: 1.45; } .campaign-cinematic-skip { position: absolute; top: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); padding: 9px 14px; border: 1px solid rgb(255 255 255 / 0.42); background: rgb(3 5 6 / 0.62); color: #fff; font: 700 11px/1 var(--ui); letter-spacing: 0.08em; cursor: pointer; } .campaign-cinematic-skip:hover, .campaign-cinematic-skip:focus-visible { border-color: var(--gold); color: var(--gold); } @media (max-height: 520px) { .campaign-cinematic-copy { bottom: 12px; } .campaign-cinematic-story { max-width: 82%; font-size: 11px; } } .campaign-plate { width: min(720px, 92vw); padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); background: rgb(10 14 18 / 0.92); box-shadow: 0 24px 80px rgb(0 0 0 / 0.45); } #briefing .campaign-plate { box-sizing: border-box; width: min(720px, 100%); max-height: calc(100vh - clamp(16px, 4vh, 40px)); max-height: calc(100dvh - clamp(16px, 4dvh, 40px)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: clamp(5px, 1dvh, 10px); overflow: hidden; } #briefing .campaign-plate > * { min-width: 0; } #briefing .campaign-act, #briefing .campaign-blurb, #briefing .briefing-media, #briefing .briefing-missions, #briefing .campaign-difficulty, #briefing .campaign-difficulty-note, #briefing .campaign-actions { margin: 0; } #briefing .campaign-plate h2 { margin: 0; font-size: clamp(24px, 4dvh, 36px); line-height: 1; } .campaign-act { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin: 0 0 8px; } .campaign-blurb, .campaign-sub { opacity: 0.88; line-height: 1.45; margin: 8px 0 14px; } .briefing-media { margin: 0 0 12px; } .briefing-media-wrap { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); background: #0a0e12; } #briefing .briefing-media-wrap { width: 100%; height: clamp(86px, 24dvh, 220px); aspect-ratio: auto; } .briefing-media-wrap img, .briefing-media-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; } .briefing-missions { margin: 0 0 16px; padding-left: 1.1em; line-height: 1.5; } .briefing-missions li.done { color: rgb(140 210 160); } .campaign-difficulty { display: grid; gap: 6px; margin: 0 0 4px; color: var(--muted, #aeb3ba); font-size: 11px; letter-spacing: .12em; } .campaign-difficulty select { min-height: 40px; padding: 0 12px; color: #f4f1e8; background: #111820; border: 1px solid rgb(220 173 75 / 55%); font: inherit; letter-spacing: .08em; } .campaign-difficulty-note { min-height: 1.4em; margin: 0 0 16px; color: #c8c9c5; font-size: 12px; } .campaign-actions { display: flex; gap: 10px; flex-wrap: wrap; } #briefing .campaign-actions { flex-wrap: nowrap; } #briefing .campaign-actions .btn { min-height: 40px; padding-block: 8px; } @media (max-height: 620px), (max-width: 520px) { #briefing .campaign-plate { padding: clamp(10px, 2.2dvh, 16px); gap: 5px; } #briefing .campaign-act { font-size: 10px; line-height: 1.1; } #briefing .campaign-plate h2 { font-size: clamp(21px, 6dvh, 28px); } #briefing .briefing-media-wrap { height: clamp(58px, 17dvh, 104px); } #briefing .campaign-blurb { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11px; line-height: 1.25; } #briefing .briefing-missions { font-size: 11px; line-height: 1.25; } #briefing .campaign-difficulty { gap: 3px; font-size: 9px; } #briefing .campaign-difficulty select { min-height: 34px; padding-inline: 9px; } #briefing .campaign-difficulty-note { min-height: 0; font-size: 10px; line-height: 1.2; } #briefing .campaign-actions { gap: 7px; } #briefing .campaign-actions .btn { flex: 1 1 0; min-height: 36px; padding: 6px 10px; } } .debrief-xp { font-size: 18px; letter-spacing: 0.06em; margin: 6px 0 12px; color: rgb(140 210 160); } .intro-preview-plate { width: min(960px, 94vw); } .intro-preview-plate .briefing-media-wrap { max-height: min(56vh, 540px); } /* Front Line grade on Higgsfield clips — teal push + vignette */ .fl-video-grade { position: relative; } .fl-video-grade::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgb(0 0 0 / 0.45) 100%), linear-gradient(180deg, rgb(20 80 90 / 0.12), rgb(180 90 40 / 0.08)); mix-blend-mode: soft-light; } #menu-intro-video, .menu-intro-video { position: absolute; inset: 0; z-index: 0; opacity: 0.28; pointer-events: none; } #menu-intro-video video, .menu-intro-video video { width: 100%; height: 100%; object-fit: cover; } .join-lobby-row.is-locked { opacity: 0.45; cursor: not-allowed; } .menu-grid { display: grid; grid-template-columns: minmax(320px, 0.95fr) minmax(300px, 0.65fr); grid-template-areas: 'brand setup' 'nav setup'; align-content: start; align-items: start; gap: clamp(14px, 2.2vh, 28px) clamp(40px, 7vw, 130px); width: 100%; margin: 0; padding: clamp(22px, 3.2vh, 40px) clamp(22px, 5vw, 78px) clamp(16px, 3vh, 32px); /* NO `min-height: 0` here. * * `#menu` is `grid-template-rows: 1fr auto` (content, then the footer bar). * `min-height: 0` let this row shrink below its own content, so at 1024x700 — * where the layout has stacked and is taller than the viewport — the row * stayed viewport-height and the BOT SKILL select was clipped underneath the * attribution bar instead of the page scrolling. Left to `auto`, the row grows * past the viewport and `.screen`'s `overflow-y: auto` does its job. */ } .brand { grid-area: brand; text-align: left; } /* CoD-style wordmark — one line, type only. */ .brand-mark { margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 0.18em; font-family: var(--display); font-weight: 800; line-height: 0.86; text-transform: uppercase; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.65)); transform: skewX(-5deg); transform-origin: left center; white-space: nowrap; width: max-content; max-width: 100%; } .brand .brand-mark .bm-front, .brand .brand-mark .bm-line { display: inline-block !important; /* beat .brand h1 span { display:block } */ position: relative; letter-spacing: -0.02em; font-size: clamp(68px, 8.6vw, 148px); color: var(--ink); line-height: 0.86; } .brand-mark .bm-line { text-shadow: 0.045em 0 0 color-mix(in srgb, var(--signal) 60%, transparent), -0.03em 0 0 color-mix(in srgb, var(--ink) 20%, transparent); } .brand-mark .bm-line::after { content: none; } /* Two words, two weights of presence: the first is the surface, the second is * the subject. No glow — a text-shadow halo on a display face is the other * generated-looking move, and the plate behind it already gives separation. */ .brand h1 span { display: block; color: var(--ink); } .brand h1 em { display: block; font-style: normal; color: var(--gold); } .tagline { margin: 8px 0 0; font-family: var(--ui); font-size: 12px; letter-spacing: 0.08em; /* `--ink-3` is the quiet-meta step, 4.6:1 against `--s1`. Over the live backdrop * it is not against `--s1` at all, and on Rust's white sky the subtitle vanished * completely. Up one step, plus the same halo the action list carries. */ color: var(--ink-2); text-transform: uppercase; text-shadow: 0 1px 2px rgba(6, 8, 10, 0.92), 0 2px 12px rgba(6, 8, 10, 0.62); } /* --- links to /assets and /about, under the identity. * * Quieter than the action list on purpose: one step down in size, `--ink-3` * rather than `--ink`, and no surface on hover — just a rule that lights up. * They sit next to the wordmark, so anything with weight competes with the one * thing on this screen that is supposed to be loud. * * The same halo the tagline and the action list carry. These sit over a LIVE 3D * backdrop whose brightness is whatever the map is doing this second; on Rust's * white sky, quiet grey text against no shadow disappears entirely. * * `.brand` is in the selector because `.screen a` and `#menu p` rules elsewhere * in this file are more specific than a bare class would be, and a rule that * loses to an ancestor-and-tag selector is the exact failure * scripts/validate-ui-slop.mjs's specificity check exists to catch. */ .brand .menu-elsewhere { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; } .brand .menu-elsewhere a { color: var(--ink-3); font-family: var(--ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; text-shadow: 0 1px 2px rgba(6, 8, 10, 0.92), 0 2px 12px rgba(6, 8, 10, 0.62); transition: color var(--fast) ease, border-color var(--fast) ease; } .brand .menu-elsewhere a:hover, .brand .menu-elsewhere a:focus-visible { color: var(--ink); border-bottom-color: var(--gold); } /* --- the action list. * The primary is a slab. The rest are type on nothing, with a caret that slides * in on hover — a navigation affordance, which is what they are. */ .menu-main { grid-area: nav; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 420px; margin-top: 0; } .menu-main .btn.primary { width: auto; min-width: 11.5em; margin-bottom: 8px; } .menu-main .btn:not(.primary) { width: auto; min-width: 11.5em; background: transparent; /* FULL INK, NOT THE SECONDARY RAMP. * * The ink ramp is calibrated against `--s1`, a dark SURFACE — `--ink-2` is 7.4:1 * there and `--ink-3` is 4.6:1. But these five items do not sit on a surface. They * sit on a live 3D backdrop whose luminance is whatever the map is showing, and on * Rust that is a near-white sky. Against it, `--ink-2` measures close to nothing and * the user reported, correctly, that they could not read HOST A LOBBY / JOIN A LOBBY * / LOADOUT / OPTIONS / FEEDBACK at all. * * The scrim behind the column is real and strong, but a scrim cannot be the * guarantee: it is one fixed gradient over a scene that changes every frame and * every map. The requirement was "legible regardless of background", so the * legibility has to travel WITH the text — see the halo below. */ color: var(--ink); /* Match Campaign's horizontal pad so PRACTICE / QUICK PLAY line up under the C. */ padding: 10px 16px; font-size: 16px; letter-spacing: 0.1em; /* The halo, not a drop shadow. Two stops: a tight dark edge that keeps the letter * shapes crisp against a bright sky, and a wide soft one that lifts the whole word * off busy geometry. Both are near-black at the page's own background colour, so on * a dark frame they are invisible and cost nothing — this only shows up where it is * needed. Cheaper and more robust than a second plate behind the column, and it does * not add another card to a screen that already has the PLAY slab. */ text-shadow: 0 1px 2px rgba(6, 8, 10, 0.92), 0 2px 14px rgba(6, 8, 10, 0.68); } /* NO HOVER CARET. This is where the accent bar came back. * * The first pass replaced the 3px left border with a 7px amber triangle at * `left: -18px`, revealed on hover. An adversarial critic put it in the defect * list, correctly: same colour, same left edge, one per button — the tell with * an opacity transition on it. It also sat in the gutter at x=114 while every * other element on the screen aligned to x=132, so the one hover affordance was * the one thing off the grid. * * Hover is now carried by the two things that cost nothing and mark nothing: the * label goes to full ink, and the row takes a surface. */ .menu-main .btn:not(.primary):hover, .menu-main .btn:not(.primary):focus-visible { color: var(--ink); background: var(--s2); } .menu-main .btn:not(.primary) { margin-left: 0; transition: background var(--fast) ease, color var(--fast) ease; } .menu-main .btn:not(.primary):active { transform: none; background: var(--s3); } /* Console-style action hierarchy: the verb stays dominant at the left grid * line, while one restrained operational descriptor sits under it, right * justified, so Campaign / Practice / Quick Play share one right edge. * The whole row remains one native button. */ .menu-main .btn.menu-action { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "caret main" "caret meta"; align-items: baseline; column-gap: 8px; row-gap: 2px; width: min(100%, 390px); } .menu-action-main { grid-area: main; white-space: nowrap; justify-self: start; } .menu-action-meta { grid-area: meta; font-family: var(--ui); font-size: 11px; font-weight: 650; line-height: 1.2; letter-spacing: 0.08em; color: var(--ink-3); text-align: right; justify-self: stretch; white-space: nowrap; text-shadow: 0 1px 2px rgba(6, 8, 10, 0.92), 0 2px 10px rgba(6, 8, 10, 0.62); } .menu-main .btn.menu-action.primary .menu-action-meta { color: rgba(12, 15, 18, 0.68); text-shadow: none; } .menu-main .btn.menu-action:not(.primary):hover .menu-action-meta, .menu-main .btn.menu-action:not(.primary):focus-visible .menu-action-meta { color: var(--ink-2); } /* What PLAY is actually going to start. Mirrored from the four controls by * js/ui-boot.js, so the primary action states its own consequence. */ #menu-summary { margin: 0 0 16px; font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.08em; /* Same correction as `.tagline`: this states what PLAY is about to start, so it is * not decorative meta — it has to be readable over whatever the map is showing. */ color: var(--ink-2); text-transform: uppercase; text-shadow: 0 1px 2px rgba(6, 8, 10, 0.92), 0 2px 12px rgba(6, 8, 10, 0.62); } /* Practice-only — ui-boot sets [hidden] when #menu is not data-practice="1". */ #menu-summary[hidden] { display: none !important; margin: 0; } #menu-summary b { color: var(--ink); font-weight: 600; } /* --- practice setup rail: only when PRACTICE is armed. */ .menu-setup { grid-area: setup; background: rgba(11, 14, 16, 0.82); padding: clamp(14px, 1.8vw, 20px) clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 20px); display: flex; flex-direction: column; min-width: 0; backdrop-filter: blur(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055); /* Fit practice controls + Deploy without scrolling on typical desktop heights. */ /* 78dvh left a reproducible 57px inner scroll at 1280x720: the Deploy * action was present but clipped below the fold. The panel starts around * 10dvh on that layout, so 86dvh fills the honest remaining column while * preserving a bottom margin and still yielding to the touch override. */ max-height: min(86dvh, 920px); overflow-y: auto; overscroll-behavior: contain; } .menu-setup[hidden] { display: none !important; } #menu:not([data-practice="1"]) .menu-grid { grid-template-columns: minmax(320px, 28rem); grid-template-areas: 'brand' 'nav'; justify-content: start; } .menu-setup-lede { margin: 0 0 10px; font-size: 12.5px; line-height: 1.35; opacity: 0.78; } #btn-practice-deploy { margin-top: 12px; width: 100%; flex: 0 0 auto; } #btn-solo.is-armed { border-color: rgb(255 210 90 / 0.55); box-shadow: inset 0 0 0 1px rgb(255 210 90 / 0.25); } .menu-setup { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; } .menu-setup::-webkit-scrollbar { width: 9px; } .menu-setup::-webkit-scrollbar-track { background: transparent; } .menu-setup::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } .menu-setup:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); background-clip: content-box; } /* TWO COLUMNS, and the note that used to be here is now wrong, so it is gone * rather than reworded: *"two columns of 150px halved the room for 'Team * Deathmatch'"* was true when this rule ran at every width. It does not run at * every width any more — the sidebar is ~480px at the 1320px container, so a * column is ~215px and "Team Deathmatch" fits with room to spare. What actually * broke the old layout was that the 2x2 rule lived ONLY in the <=1040px * breakpoint, so the WIDE screen — the one with the most room — was the one * getting a single 10-row column. * * CALL SIGN spans, because it is a free-text field whose value is a name and * halving it to 215px is the one control here that genuinely suffers. */ .menu-setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(10px, 1.2vw, 16px); } .menu-setup-grid > .field-wide { grid-column: 1 / -1; } /* Below ~560px of panel there is no honest second column left. Container query * rather than a viewport one: what decides this is how wide the PANEL is, and * the panel is a sidebar at some widths and full-bleed at others. */ .menu-setup { container-type: inline-size; container-name: setup; } @container setup (max-width: 380px) { .menu-setup-grid { grid-template-columns: minmax(0, 1fr); } } .field-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-4); } .field-note:empty { display: none; } .controls-legend { font-size: 11.5px; line-height: 2.1; color: var(--ink-3); letter-spacing: 0.02em; text-align: right; max-width: none; margin: 0; } .controls-legend .k { color: var(--ink-2); white-space: nowrap; } /* ==================== menu choreography ==================== * THE BAR, in the user's words: "a menu screen that if you opened up an Xbox or * PS5 and you loaded the menu screen of the latest * * What actually separates a console front end from a web page is not effects. It is * TIMING AND RESTRAINT, in two layers: * * 1. A STAGGERED ENTRANCE. Elements arrive in the order you read them, 45 ms * apart, each decelerating rather than stopping. The stagger is what makes a * screen feel authored instead of painted — one simultaneous fade reads as a * web page, six sequenced ones read as a sequence somebody chose. * 2. A CONTINUOUS IDLE LAYER. A console menu is never completely still, and this * is the half that reads as expensive: the wordmark breathes a fraction of a * percent, a specular sweep crosses it every twelve seconds, the grain jitters. * All far below the threshold where you would call it animation — you notice * only when it stops. * * WHY THESE ARE `animation` AND NOT `transition`, AND WHY NOTHING HAS * `animation-fill-mode: backwards`: * * A reveal must enhance an already-visible default. If the entrance were a * class-triggered transition, or filled backwards from `opacity: 0`, then any * environment that does not run animations — a background tab, a headless * renderer, a reduced-motion user, a screenshot harness — would render the menu * BLANK. The keyframes here start at 0 and end at the element's natural state with * no fill, so if the animation never runs the menu is simply already there. That is * a correctness property, not a nicety; this project has shipped a black frame * before. */ @media (prefers-reduced-motion: no-preference) { /* --- the entrance. Read order: identity, tagline, summary, primary, nav, panel. * * Every duration and delay is multiplied by `--fl-dur` / `--fl-stagger`, which * are 1 at boot and much smaller once `.booted` is up. The numbers below are * therefore the BOOT timings and the only ones anybody has to reason about; * the return is one override rather than a second copy of this table that has * to be kept in step. */ .brand-mark .bm-front { animation: flRise calc(620ms * var(--fl-dur)) var(--ease) calc(40ms * var(--fl-stagger)) 1; } .brand-mark .bm-line { animation: flRise calc(620ms * var(--fl-dur)) var(--ease) calc(105ms * var(--fl-stagger)) 1; } .tagline { animation: flFade calc(520ms * var(--fl-dur)) var(--ease) calc(210ms * var(--fl-stagger)) 1; } #menu-summary { animation: flFade calc(520ms * var(--fl-dur)) var(--ease) calc(300ms * var(--fl-stagger)) 1; } .menu-main .btn.primary { animation: flSlab calc(560ms * var(--fl-dur)) var(--ease) calc(255ms * var(--fl-stagger)) 1; } /* The four secondary rows, 45 ms apart — the band that reads as deliberate * without becoming a queue you wait through. */ .menu-main .btn:not(.primary):nth-of-type(2) { animation: flRow calc(480ms * var(--fl-dur)) var(--ease) calc(345ms * var(--fl-stagger)) 1; } .menu-main .btn:not(.primary):nth-of-type(3) { animation: flRow calc(480ms * var(--fl-dur)) var(--ease) calc(390ms * var(--fl-stagger)) 1; } .menu-main .btn:not(.primary):nth-of-type(4) { animation: flRow calc(480ms * var(--fl-dur)) var(--ease) calc(435ms * var(--fl-stagger)) 1; } .menu-main .btn:not(.primary):nth-of-type(5) { animation: flRow calc(480ms * var(--fl-dur)) var(--ease) calc(480ms * var(--fl-stagger)) 1; } .menu-setup { animation: flPanel calc(640ms * var(--fl-dur)) var(--ease) calc(300ms * var(--fl-stagger)) 1; } /* --- the idle layer. Amplitudes are deliberately at the edge of perceptible. */ /* The wordmark breathes: 0.4% of scale over nine seconds. */ /* `flTitleJitter` is defined in title-fx.css and attached HERE because `animation` * is a shorthand: declaring it in that file to add one name would silently drop the * breath, and copying the breath's timings into a second stylesheet is the drift this * project keeps paying for. 7.3s against 9s is coprime, so the two never re-align. */ .brand h1 { animation: flBreath 9s ease-in-out 1.4s infinite, flTitleJitter 4.3s steps(1) 1.1s infinite; transform-origin: 0% 50%; } /* The slam rides the PARENT, so its `transform` cannot collide with the breath's * `scale` or the jitter's `translate` on the h1 — a parent transform composes with * a child's rather than replacing it. `.brand` carries no other animation, so this * is the one place in the wordmark where a whole-element transform is free. */ .brand { animation: flTitleSlam 6.1s steps(1) 3.4s infinite; transform-origin: 0% 50%; } /* A specular sweep across the gold word, as a light source passing a metal sign. * Masked to the text, so it lights the letters rather than drawing a band. */ .brand h1 em { background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%); background-size: 280% 100%; background-repeat: no-repeat; background-position: -60% 0; -webkit-background-clip: text; background-clip: text; /* The fill stays the gold; the gradient only ADDS light on top of it, which is * why this is not the banned gradient-text move — remove the animation and the * word is still solid --gold. */ -webkit-text-fill-color: var(--gold); /* This rule re-declares `animation`, so it OVERRIDES the entrance line above * for this element — the `flRise` half has to be repeated here or the gold * word simply would not arrive. Both copies read from the same two scales, so * they cannot drift. The sweep is idle-layer and is deliberately NOT scaled: * it is a light passing a metal sign, not part of the entrance. */ animation: flRise calc(620ms * var(--fl-dur)) var(--ease) calc(105ms * var(--fl-stagger)) 1, flSweep 12s linear 3s infinite; } /* The plate's grain jitters by a pixel, so the veil never looks like a static * overlay sitting on glass. */ .menu-bg > span:nth-child(3) { animation: flGrain 1.9s steps(3) infinite; } /* --- screen transitions. main.js toggles `.hidden` (display:none), and coming * back from display:none restarts a CSS animation — so a screen animates in * every time it is shown, with no JS and no state to keep. */ #classes .sheet, #options .sheet, #lobby .sheet { animation: flSheet 420ms var(--ease) 1; } .modal-card { animation: flModal 320ms var(--ease) 1; } /* ---- THE CUT: the screen-to-screen transition itself ------------------- * * The per-sheet entrance above animates the ARRIVING panel. What was missing is * the change of screen: `showScreen()` in js/main.js adds `.hidden` to one * section and removes it from another in the same tick, so a screen swap was a * hard cut with a panel sliding up inside it. * * WHY THIS IS ON THE INCOMING SCREEN AND NOT A CROSSFADE. Every `.screen` is * `position: fixed; inset: 0` with an opaque background and they all share * `--z-screen`, so paint order is DOM order and the arriving screen already * covers the leaving one completely — the leaving screen's exit is not visible * and animating it would be work nobody can see. What IS visible is the instant * at which the new screen appears, so that instant is what gets covered. It also * means this needs nothing from js/main.js, which is not ours: display:none -> * visible restarts these animations exactly as it does the sheets'. * * TWO LAYERS, MATCHED TO THE AUTHORED CUE. `assets/audio/ui_screen.mp3` is * 180 ms of band-limited noise sweeping DOWNWARD with no transient on the front * — the audio session's note is that a transition with a click on it sounds like * a click. So the motion carries no pop either, and it travels the same * direction the sound does: * * ::before a near-black veil over the whole frame, clearing in 300 ms. This * is the layer that actually hides the cut. * ::after a soft light band crossing top to bottom, low alpha — the * screen-scale version of the specular sweep on the wordmark. * * SAME DURATION AND SAME CURVE FOR BOTH, deliberately. They are not two effects * that happen to overlap: the frame darkens and a light passes down it as it * re-lights, which is one gesture in two materials. Giving the band its own * timing made it a second event arriving after the veil had already gone, which * is the definition of decoration. * * BOTH REST AT `opacity: 0` AND NEITHER FILLS BACKWARDS. If animations do not run * — reduced motion, a background tab, a headless capture — there is no veil and * no band, and the screen is simply already there. A transition that can leave a * sheet over the menu is worse than no transition; this project has shipped a * black frame before. `content` is declared only inside this media query, so a * reduced-motion user does not even get the boxes. */ /* `:not(.modal)`, and it is not tidiness. `#join-modal` and `#pause` are * `.screen.modal` — a TRANSLUCENT overlay with a backdrop blur, whose whole job * is to show the thing behind it. An opaque veil over the pause screen would * flash the live match black every time somebody pressed ESC. They already have * their own entrance (`.modal-card` / `flModal`), because a dialogue opening on * top of a screen is a different gesture from the screen changing. (There is a * mechanical reason too: `backdrop-filter` on `.modal` makes it a containing * block for `position: fixed` descendants, so these boxes would size to the * modal rather than to the viewport.) js/ui-boot.js skips the same set for the * cue, so the sound and the picture describe the same event. */ .screen:not(.modal)::before, .screen:not(.modal)::after { content: ''; position: fixed; pointer-events: none; z-index: var(--z-screen-veil); opacity: 0; } .screen:not(.modal)::before { inset: 0; background: var(--s0); animation: flCut 300ms var(--ease) 1; } .screen:not(.modal)::after { left: 0; right: 0; top: -42vh; height: 42vh; background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.075) 55%, transparent 100%); animation: flCutSweep 300ms var(--ease) 1; } /* --- the return is not the boot. * * Until the player leaves the menu for the first time, the entrance is the game * starting up and it gets the full 1.1 s. After that, `#menu` becoming visible * means somebody pressed BACK, and replaying a boot ceremony to answer a BACK * press is the single clearest tell that a front end is a web page — a console * re-enters a screen it has already shown. Same choreography, a third of the * stagger and half the travel time, so the whole thing lands inside the 300 ms * veil above and reads as one move. * * The class is on , from js/ui-boot.js, set on the FIRST screen change * rather than after a timer — the only way to see the menu twice is to change * screen twice, so there is nothing to race. */ .booted #menu { --fl-stagger: 0.28; --fl-dur: 0.55; } } /* --- INSIDE the sheets, not just the sheets themselves. * * The loadout, options and lobby animated in as a whole slab while their contents * appeared fully formed inside them — which reads as a panel sliding in rather * than as a screen assembling. The stagger has to reach the rows for the screen * to feel authored the way the menu does. * * WHAT IS DELIBERATELY *NOT* STAGGERED: `.lobby-row`. js/main.js rebuilds the * whole roster on every ready-toggle, and `display:none` -> visible restarts a * descendant's animations — so animating rows would re-run the entrance for four * players every time one of them pressed READY. A list that twitches whenever * somebody else acts is worse than a list that simply updates. */ /* THE FIVE `#class-cards` COLUMN STAGGERS ARE GONE WITH THE CARDS. They brought the * premade-class comparison table in one column at a time; there are no premade classes. * Nothing replaces them: the arsenal's rows are deliberately unstaggered for the same * reason `.lobby-row` is, because that band re-renders on every filter keystroke. */ /* The gunsmith arrives after the table it describes. It re-renders on a class * change, so this also marks the change — short, and a fade rather than travel. */ .gs-slots { animation: flFade 420ms var(--ease) 300ms 1; } .gs-optic { animation: flFade 420ms var(--ease) 360ms 1; } /* Options: the three groups, left to right, after the title. */ .opt-grid > .opt-group:nth-child(1) { animation: flCol 440ms var(--ease) 100ms 1; } .opt-grid > .opt-group:nth-child(2) { animation: flCol 440ms var(--ease) 150ms 1; } .opt-grid > .opt-group:nth-child(3) { animation: flCol 440ms var(--ease) 200ms 1; } /* Lobby: the three rails, left to right, then the two composition teams inside * the first of them. Deliberately NOT one identical entrance on every rail — * the map hero leads because it is the thing a player arriving in a lobby looks * at first, and the kit rail lands last because it is the thing they act on. */ .lobby-brief { animation: flCol 460ms var(--ease) 90ms 1; } .lobby-main { animation: flCol 460ms var(--ease) 145ms 1; } .lobby-kit { animation: flCol 460ms var(--ease) 200ms 1; } .lobby-map-name { animation: flRise 520ms var(--ease) 150ms 1; } .comp-team[data-side=friendly] { animation: flFade 400ms var(--ease) 240ms 1; } .comp-team[data-side=hostile] { animation: flFade 400ms var(--ease) 285ms 1; } /* --- the optic, when you fit it. * gunsmith.js replaces the buttons' markup, so a `transition` on the fitted state * has nothing to transition FROM — the element is new. An animation on the fresh * element is the shape that works, and it is added only on a click-driven * re-render so switching class does not flash a confirmation nobody asked for. */ .gs-sight.on.just-fitted { animation: flFit 420ms var(--ease) 1; } /* Keyframes are declared unconditionally: a rule that references a missing * animation name is simply inert, and keeping them outside the media query means * the two halves cannot drift apart. */ @keyframes flRise { from { opacity: 0; transform: translateY(0.22em); } } @keyframes flFade { from { opacity: 0; transform: translateY(6px); } } @keyframes flRow { from { opacity: 0; transform: translateX(-14px); } } @keyframes flSlab { from { opacity: 0; transform: translateY(10px) scaleX(0.985); } } @keyframes flPanel { from { opacity: 0; transform: translateY(14px); } } @keyframes flSheet { from { opacity: 0; transform: translateY(10px); } } @keyframes flModal { from { opacity: 0; transform: translateY(8px) scale(0.985); } } @keyframes flCol { from { opacity: 0; transform: translateY(12px); } } @keyframes flFit { /* A seat, not a bounce: it settles into place and the light passes across it once. */ 0% { transform: scale(0.985); box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); } 40% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); } 100% { transform: scale(1); box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); } } /* `scale:` and not `transform: scale()`. THREE animations run on `.brand h1` — * breath, jitter and slam — and CSS resolves same-property conflicts by taking the * LAST animation in the `animation` list, not by composing them. Every one of these * keyframe sets names its property at 0% and 100%, so while all three used * `transform` the last one won at every instant and the earlier ones rendered * nothing at all: the breath had been dead since the jitter was attached, silently, * because a 0.4% scale nobody can see missing looks exactly like a 0.4% scale. * `scale`, `translate` and `rotate` are INDEPENDENT properties that compose with * each other and with `transform`, so breath (scale) and jitter (translate) now * coexist, and the slam — which needs both axes at once — moved to `.brand`. */ @keyframes flBreath { 50% { scale: 1.004; } } /* The cut. `from` only, so the resting `opacity: 0` is the `to` — which is what * makes the veil disappear rather than persist if anything interrupts it. */ @keyframes flCut { from { opacity: 0.94; } } @keyframes flCutSweep { /* Opacity is pinned at both ends so the band is fully visible for the whole * crossing and invisible the instant the animation is over. 142vh clears a * 42vh band completely off the bottom of a 100vh frame. */ from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 1; transform: translate3d(0, 142vh, 0); } } @keyframes flSweep { /* Long dwell off-frame, so the sweep is an event rather than a loop. */ 0%, 62% { background-position: -60% 0; } 86%, 100% { background-position: 160% 0; } } @keyframes flGrain { 0% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(-1px, 1px, 0); } 66% { transform: translate3d(1px, -1px, 0); } } /* ============================== fields ============================== * Label above control, label in the technical sans at 11px, control at 15px. * A focus ring, not a colour change, because a gold outline on eight fields at * once is the accent doing decoration again. */ .field, .opt { display: grid; gap: 6px; min-width: 0; } /* AN AUTHOR `display` DEFEATS THE USER-AGENT `[hidden]` RULE, WHATEVER THE SPECIFICITY. * * The line above is that author declaration, so `field.hidden = true` on a `.field` draws * a fully visible control while every state in the DOM says it is hidden. That is the * exact fault AGENTS.md records against `.gsel-list { display: flex }` — a 282x139 map * picker painted over a live match with `list.hidden === true`, `ctl.open === false` and * every closer in the module firing correctly. The symptom of that class is *an audit that * finds nothing wrong*, because the JS is right and the display is right for an open panel. * * THE FIELD THIS WAS WRITTEN FOR IS GONE. js/net/lobby-ui.js used to hide * `#lobby-loadout-field` — the premade-class control — when a weapon preset was in force, * and both the control and the rule that hid it went with the classes. THE DECLARATION * STAYS, deliberately: it was already written for `.field` and `.opt` generally rather * than for the one id, so it is the thing that stops the NEXT `hidden` on either * inheriting the identical bug. Deleting it with its first caller would leave the next * author to rediscover the `.gsel-list` fault the hard way. */ .field[hidden], .opt[hidden] { display: none; } /* Tracking down from 0.16em. Wide tracking on a small grey uppercase label is * the eyebrow tell, and eight of these in a column read as one texture. Tight * and quiet reads as a form. */ .field > span, .opt > span { font-family: var(--ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-3); text-transform: uppercase; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .field input, .field select, .opt input[type=text], .opt select { font-family: var(--ui); font-size: 15px; letter-spacing: 0.02em; color: var(--ink); background: var(--s2); border: 0; border-bottom: 1px solid var(--rule-strong); padding: 10px 12px; width: 100%; min-width: 0; /* A 's open list is drawn by the OPERATING SYSTEM — OS font, OS * scrollbar, OS highlight — outside the page entirely, so styling the closed * control changes nothing about the part a player looks at. js/ui-select.js builds * a real listbox and keeps the native element as the store, visually hidden, so * every `sel.value` read and `change` listener in js/main.js keeps working. * * `.gsel-native` is NOT `display: none`. A `display: none` form control is * excluded from the accessibility tree and from label association, and it stops * being focusable — which would break the `