/* =========================================================================== css/lines.css — PHASE 46.13: THEIR LINES, OUR CONTENT AND OUR COLOUR. =========================================================================== THE PLAYER: "the GUI is really modern — I think it's the CSS style that's mainly responsible; keep all the content and colour of the GUI you already have but have the actual lines and styling from the CSS." That diagnosis is correct and it is specific. Read against ours, the reference's "modern" look reduces to SIX RULES, none of which is a colour: 1. a custom-property TOKEN LAYER, so a line weight is decided once 2. 1 px HAIRLINE borders in a LOW-ALPHA accent — never full saturation, never multi-px. 33 of the 34 width-bearing borders in its hud.css are 1 px, and the one exception is an accent RAIL, not a frame 3. wide LETTER-SPACING with uppercase on labels 4. a small-label / large-value hierarchy 5. a semi-opaque dark panel plus a LAYERED shadow — a tight spread ring and a soft ambient lift — instead of a hard offset block. There is not one `Npx Npx 0` offset anywhere in the reference's UI 6. no border-radius anywhere Rule 6 is ALREADY TRUE here and needs nothing: style.css:43 carries `border-radius: 0 !important` on `*`, and the eight other radius declarations in the project are redundant restatements of `0`. (That `!important` also means this file could not introduce a radius even if a ported rule wanted one.) --------------------------------------------------------------------------- WHAT THIS FILE MAY AND MAY NOT DO --------------------------------------------------------------------------- css/style.css is marked "Shared file: agents must NOT edit" on its first line. This file is linked LAST and holds the token layer plus overrides ONLY. No markup changes, no class renames, no colour changes — every hairline below is the SAME hue the rule already used, at a lower alpha. ⚠️ BEING LAST ONLY BREAKS TIES. A later stylesheet wins at EQUAL specificity; it does not beat a higher one. Every rule here therefore carries at least the specificity of the rule it overrides — which is why the id-carrying selectors below are written with their ids rather than as classes. ⚠️ AND TWO THINGS HERE CAN NEVER BE OVERRIDDEN FROM THIS FILE AT ALL: style.css:43 `* { border-radius: 0 !important }` and style.css:74 `.gp-focus { outline: … !important; background: … !important }`. Both are deliberate and neither is fought. =========================================================================== */ :root { /* ---- RULE 1 + 2: THE LINE TOKENS -------------------------------------- The reference declares seven tokens on its UI root, of which ONE does all the work: `--dim: rgba(201,162,39,0.42)`, a 42%-alpha accent used as a border colour and nothing else. These are the same idea in OUR hues — the red and the gold this game already uses, at the alpha that turns a frame into a line. Sub-alphas exist because the reference has them too: a rule that must be quieter than the main hairline gets 0.22, not a different colour. */ --line: rgba(192, 32, 32, 0.45); /* --red at hairline alpha */ --line-quiet: rgba(192, 32, 32, 0.26); --line-gold: rgba(232, 184, 58, 0.45); /* --gold at hairline alpha */ --line-gold-quiet: rgba(232, 184, 58, 0.24); /* ---- RULE 5: THE SHADOW LANGUAGE -------------------------------------- A tight spread RING that separates the panel from the scene, plus a soft ambient LIFT that puts it in front of one. The project's hard offset blocks (`6px 6px 0`) are a different idiom: they read as a printed card, which is exactly the constructivist look the game wants ELSEWHERE — the inset accent bars and `.ql-item.selected` keep theirs, deliberately. */ --ring: 0 0 0 4px rgba(8, 6, 4, 0.35); --ring-tight: 0 0 0 3px rgba(8, 6, 4, 0.28); --lift: 0 12px 40px rgba(0, 0, 0, 0.55); --lift-sm: 0 8px 24px rgba(0, 0, 0, 0.45); /* ---- RULE 3 + 4: THE TRACKING LADDER ---------------------------------- There were SEVENTEEN distinct letter-spacing values across the eight stylesheets (107 declarations). Five steps, and the two that matter are the LABEL and HEAD tiers: the reference sits at 0.3-0.6em on a section head, where our heads sat at 0.20-0.25em and our labels at 0.14em — below the 0.1-0.5em the player's own diagnosis names. ⚠️ --tr-prose EXISTS SO THE LADDER CANNOT REACH RUNNING TEXT. Nine rules in this project carry `text-transform: none` because they hold sentences, not labels. Pushing those to a label tracking makes prose unreadable, and on `.dlg-text` it would change the WRAP POINT, which changes the dialogue band's row budget. */ --tr-prose: 0.02em; --tr-body: 0.08em; --tr-value: 0.12em; --tr-label: 0.22em; --tr-head: 0.32em; } /* =========================================================================== RULE 2 — BORDER DEMOTION. The single highest-leverage change. =========================================================================== ⚠️ FOUR CLASSES OF BORDER ARE DELIBERATELY NOT TOUCHED, and each one would break something specific: (a) LAYOUT RESERVES. `.hud-horde` (hud.css:81) and `.ql-item` (menus.css:343) both declare `border: 2px solid transparent` purely so a state class can COLOUR it without reflowing — menus.css:444 says so in the file: "Hover feedback that does not shift layout (a border change would reflow)". `.hud-horde.hot` is toggled on a live timer, so demoting it makes the panel jump 2 px every time the horde goes hot. (b) THE COMPASS CARET IS GEOMETRY MADE OF BORDERS. hud.css:46-47 is the classic zero-box CSS triangle: `width:0; height:0;` with 6 px transparent sides and an 8 px coloured top. A width sweep turns the caret into a dot. (c) ACCENT RAILS ARE SEMANTIC, NOT FRAMES. The 4 px border-left on `#hud-topbar`, `#hud-subtitle`, `.dlg-main`, `.hud-toast`, `.pda-quest` and friends marks WHAT A THING IS. The reference keeps its own 3 px rail on `.readable` for exactly this reason while every frame in the same file is 1 px. (d) BORDERS A TEST READS. test/playtest-phase15i.js:81-89 reads `getComputedStyle('.hud-horde-bar').borderColor`, asserts it CHANGES between colourblind off and on, and regex-matches `/42,\s*127,\s*255/`. Wrapping that colour in a low-alpha rgba() changes the string shape the assertion parses. `.hud-hp-bar.hazard` (hud.css:110) is the same class of problem in reverse: its border-colour is chosen to VANISH against the panel, so retokenising it would make the bar edge reappear in the one state where it must not. */ /* -- the shared panel frame, and everything that inherits it -------------- */ .soviet-panel { border-width: 1px; border-color: var(--line); } /* -- controls -------------------------------------------------------------- */ .soviet-btn { border-width: 1px; border-color: var(--line); } .diff-card, .slot-row, .pause-tab, .ql-list, .ql-detail, .stl-preview, .stl-zone, .stl-chip, .stl-note { border-width: 1px; border-color: var(--line); } .perk-card, .map-tip, .ql-thumb, #build-tier { border-width: 1px; border-color: var(--line-gold); } .slot-thumb, #build-help, .bs-track { border-width: 1px; border-color: var(--line); } .opt-check { border-width: 1px; border-color: var(--line); } /* -- the PDA. Id-carrying rules need id selectors to win. ----------------- */ #pda { border-width: 1px; border-color: var(--line); } #pda .pda-header, #pda .pda-tabs { border-bottom-width: 1px; border-bottom-color: var(--line); } #pda .pda-grid, #pda .pda-item, #pda .pda-row, #pda .pda-quest { border-width: 1px; border-color: var(--line); } #pda .pda-col h3, #pda .pda-act { border-bottom-width: 1px; border-bottom-color: var(--line); } #pda .pda-close { border-width: 1px; border-color: var(--line-gold); } #pda-tooltip { border-width: 1px; border-color: var(--line-gold); } /* ⚠️ `.pda-tab` IS NOT IN THAT LIST. inventory.css:42 sets `border: none` followed by a single `border-right` — it is a DIVIDED BAR, not a row of boxes. Writing a four-sided border on it re-frames every tab and puts an edge on the last one, which inventory.css:48 explicitly removes. */ #pda .pda-tab { border-right-width: 1px; border-right-color: var(--line); } /* -- menus ---------------------------------------------------------------- */ #menus-root .menu-head { border-bottom-width: 1px; border-bottom-color: var(--line); } #screen-pause .map-canvas { border-width: 1px; border-color: var(--line); } .stl-header { border-bottom-width: 1px; border-bottom-color: var(--line); } .stl-cost-h, .stl-foot { border-color: var(--line-quiet); } .menu-panel, .pause-panel, .wide-panel, .stl-panel { border-width: 1px; border-color: var(--line); } /* -- the loud 3 px frames -------------------------------------------------- */ #build-radial-hub { border-width: 1px; border-color: var(--line-gold); } .build-slot { border-width: 1px; border-color: var(--line); } .br-frame { border-width: 1px; border-color: var(--line-gold-quiet); } /* -- the full-saturation 1 px lines, recoloured only ---------------------- */ .hud-qhead { border-bottom-color: var(--line); } .hud-zone { border-top-color: var(--line); } .hud-xp-bar, .hud-bike-bar { border-color: var(--line-gold); } .dlg-choice .dlg-tag { border-color: var(--line-gold-quiet); } /* =========================================================================== RULE 5 — THE SHADOW LANGUAGE. =========================================================================== ⚠️ THE SEVEN INSET ACCENT BARS ARE NOT SHADOWS AND ARE NOT TOUCHED. They are the selected/active markers — `.menu-btn:hover`, `.diff-card.selected`, `.opt-tab.active`, `.pause-tab.active`, `.menu-btn.tab-focus`, `.radio-track.active`, `.stl-tab.active` — and every one is an `inset` bar drawn with box-shadow. Replacing their shadow removes the only thing that says which row is selected. ⚠️ `.ql-item.selected` KEEPS ITS HARD OFFSET BLOCK, deliberately. That block is what makes the selected quest read as a constructivist card, and it is the one place in the project where the offset idiom is doing a job. */ .soviet-panel { box-shadow: var(--ring), var(--lift); } #pda { box-shadow: var(--ring), var(--lift); } #pda-tooltip { box-shadow: var(--ring-tight), var(--lift-sm); } .hud-toast { box-shadow: var(--ring-tight), var(--lift-sm); } #hud-bike { box-shadow: var(--ring-tight), var(--lift-sm); } #build-radial-hub { box-shadow: var(--ring), var(--lift-sm); } .build-slot { box-shadow: var(--ring-tight); } /* The reference's detached second frame, on the two biggest panels only. It is drawn with `outline` + `outline-offset` so it costs no layout at all. */ .menu-panel, .pause-panel { outline: 1px solid var(--line-quiet); outline-offset: 5px; } /* ⚠️ THE DIALOGUE BAND'S BLOCK POINTS UPWARD BECAUSE THE BAND IS BOTTOM ANCHORED (dialogue.css:24, `0 -6px 0`). Its replacement has to point the same way or the band loses its separation from the scene above it. */ #dialogue-overlay { box-shadow: var(--ring), 0 -14px 34px rgba(0, 0, 0, 0.5); } #dialogue-overlay { border-top-width: 1px; border-top-color: var(--line); } #dialogue-overlay .dlg-speaker { border-bottom: 1px solid var(--line-gold-quiet); padding-bottom: 4px; } #dialogue-overlay .dlg-choice { border-width: 1px; border-color: var(--line); } /* ⚠️ NOTHING BELOW THE SPEAKER LINE MAY GROW. dialogue.css:5-16 and test/probe-phase424.js:106-127 both exist because the band's height is shrink-to-fit and a skill-check row can be pushed below the fold by any padding, gap or border change in this subtree. The border demotion above SHRINKS the rows by 2 px; the 4 px on the speaker rule is the only thing added, and it is above the scrolling list rather than inside it. */ /* =========================================================================== RULE 3 + 4 — THE TRACKING LADDER, applied. =========================================================================== Seventeen written values existed across 107 declarations. Only TWO TIERS are restated here, and the omissions are deliberate on two separate grounds. ⚠️ MEASURED COST, AND IT IS WHY THIS SECTION IS SHORT. The first cut mapped all five tiers explicitly — about 120 comma-separated selectors in four rules. playtest-phase27's build budget caught it: the pause menu's MAP tab went 35.9 ms without this file to 43.7 ms with it, against a 40 ms budget. Every element inserted while a panel builds is matched against every selector in every rule, and a hundred-way selector list is paid for on each one. Controlled by running the same suite twice with the file moved aside, so the cost is attributed rather than assumed. So: the VALUE and PROSE tiers are dropped. They were the two that changed almost nothing — 0.10em/0.15em to 0.12em and 0.03em/0.04em to 0.02em are differences of hundredths of an em on text that is already correct. What delivers the player's "wide letter-spacing" reading is the LABEL and HEAD tiers rising from 0.14-0.18em and 0.20-0.25em, and those are kept. */ body { letter-spacing: var(--tr-body); } /* ⚠️ RAISING `body` FROM 0.06em TO 0.08em REACHES PROSE TOO, so the nine rules that carry `text-transform: none` because they hold SENTENCES are pinned back. `.dlg-text` is the one that matters most: widening it changes the WRAP POINT, which changes how many rows the dialogue band needs, which is the failure probe-phase424 exists to catch. */ .hud-sub-text, .dlg-text, .diff-desc, .perk-desc, .standing-detail, .ql-objective, .ql-check-text, .stl-note, .stl-pdesc { letter-spacing: var(--tr-prose); } /* the small uppercase label tier — THIS is the step that delivers rule 3 */ .menu-head, .diff-name, .opt-label, .death-title, .pause-tab, .dlg-tag, #build-tier, .diff-stats, .slot-name, .stl-title, .hud-lu-title, .hud-sub-speaker, .pda-legend, .map-hint, .ql-kind { letter-spacing: var(--tr-label); } /* the head tier — panel titles and section heads */ .menu-sub, .menu-foot, .hud-zone, .hud-qhead, .hud-horde-label, .dlg-speaker, .pda-title, .pda-col h3, .stl-sub { letter-spacing: var(--tr-head); } /* ⚠️ `.hud-horde-pips` IS EXEMPT AND STAYS IN PIXELS. hud.css:88 is `letter-spacing: 2px` on a run of ▮ glyphs — it is a glyph GAP, not typography, and an em value would scale it with the font size. */ /* =========================================================================== OPTICAL CENTRING. =========================================================================== A centred string with wide tracking is NOT centred: the trailing letter-space after the last glyph is real width, so the text sits half a tracking-unit to the left of true centre. The reference compensates with a padding-left equal to the tracking, at five separate sites. At 0.32em on a 24 px head that is nearly 8 px of visible error. ⚠️ ON A BOX WITH A min-width THE PADDING MUST GO ON THE INNER LABEL, not the panel — `#hud-levelup` (min-width 260px) and `#hud-bike` (min-width 230px) do not re-centre until their content exceeds that width, so padding the panel moves nothing. Both are handled by their inner elements here. Kept to the widest-tracked centred strings only, for the cost reason above. */ .hud-lu-title, .hud-sub-speaker, .map-hint, .menu-sub, .menu-foot { padding-left: 0.22em; }