/* ═══════════════════════════════════════════════════════════════════════════════════════ THE GAME, REDESIGNED — 17 AUG. ⛔ EVERY SELECTOR IN THIS FILE WAS READ OFF THE RUNNING GAME, NOT GUESSED. The previous version of this file targeted .iv-a, .answer, .choice, .pn-stand, .pn-owed and .mvc-card. NONE OF THOSE EXIST. I wrote three passes against invented class names, shipped them, and told the CEO the design was applied — while the browser matched nothing at all. That is the whole reason he saw "same shit" three times running. The real component vocabulary, counted out of the game's own stylesheets and confirmed in a live DOM dump: .topbar .hub-view .card .stat .tile .kpi .dash-grid .do-now .pn-btn .shard .dossier-card .masthead .vc-* (the interview). Everything below targets those. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* ── 0 · THE BRAND SPINE IS NOT FOR SALE ──────────────────────────────────────────────── The CEO's save wears NEON NIGHTS, whose `accent-teal` cosmetic sets the PRIMARY token to #4ad6c4 — so the whole game paints teal and every pass done in PitchNoir orange is repainted before he ever sees it. mvc-os.css states the intent in its own comment: cosmetic variance is "the surface temperature + one tasteful secondary accent (never a neon free-for-all)". An accent that overwrites --p is not a secondary accent, it is a rebrand for 480 coins. So: the spine is pinned, and the purchased accent is DEMOTED to --accent-2, where it still colours charts, chips and highlights — the player keeps what they bought, the game keeps its identity. This is the fix for "I need to see NEW designs in the game NOW": until the spine holds, no design pass survives contact with the store. */ :root, [data-palette]{ /* THE BRAND SPINE, PER THEME. The spine is not a cosmetic: a purchased pack's secondary accent — mvc-os.css sets --acc per PALETTE (azure on midnight, teal on porcelain) — must never repaint it, so it is pinned here and the bought accent stays demoted to --accent-2. But the spine is not ONE colour either: it is the canonical accent OF THE ACTIVE THEME (SST §2 + design-system). Uniform orange on every theme was the bug the CEO hit on light — hot orange/pink on cream. So the pin is per data-theme (bridged from the palette in mvc-os.js): dark = burnt-orange, light = burnt-orange. (Neon retired 2026-09-12 — CEO: "remove neon and just have light and dark".) */ --p:#F97316; --p2:#FF8A4F; --acc:#F97316; /* DARK (default) */ --accent-2:var(--acc-owned,#4ad6c4); --film-black:#0F1419; --sp-tight:8px; --sp-item:20px; --sp-block:40px; --sp-sec:clamp(72px,8vw,120px); } /* NEON theme retired (CEO 2026-09-12: "remove neon and just have light and dark") — the data-theme="neon" spine pin that lived here is deleted; only dark and light spines remain. */ /* LIGHT — burnt-orange spine. SST §5f locks light burnt-orange at #B4380D with WHITE ink (4.66:1); as text on the light card it is 5.6:1. The brief names #C64B08, but in this single --acc-for-text-and-fill model #C64B08 measures 4.2:1 white-on-fill / 4.38:1 near-black — sub-AA — so the SST-locked value holds (same burnt-orange family, AA-correct). */ :root[data-theme="light"], :root[data-theme="light"] [data-palette]{ --p:#B4380D; --p2:#C8641F; --acc:#B4380D; /* floor CTAs read --v4-acc; carry the burnt-orange spine with WHITE ink (4.66:1). */ --v4-acc:#B4380D; --v4-acc-ink:#FFFFFF; } /* the primary-button ink flips to WHITE on the light burnt-orange fill — the near-black the dark theme carries on bright orange (7.14:1) would be only 3.48:1 here. */ :root[data-theme="light"] :is(.pn-btn--primary,.pn-btn.primary,.pnv4-go--now,.lg-btn--primary,.pn-btn--go){ color:#fff !important; } /* THE WORDMARK — CENTRED IN THE RAIL HEADER (brief). Retrieved brand asset, never recoloured: the per-rail swap (colour on the pale dark/neon rail, white+orange twotone on the light theme's dark rail) is wired in pn-system-v4.css and now fires because data-theme is set. v4 pins the mark to justify-self:start; this centres it. */ .side .brandhead{display:flex;justify-content:center;align-items:center} .side .brandhead .wm{justify-self:center;margin-inline:auto} /* ── 1 · THE DASHBOARD GETS AIR ───────────────────────────────────────────────────────── .dash-grid ran on 8-12px gaps — the same "everything is 12px from everything" fault the room pages had, which is why the game reads as a spreadsheet next to them. Four-step scale, and the rule that makes it read: space BETWEEN groups is at least double the space INSIDE them. */ .dash-grid{gap:var(--sp-item)} /* ⛔ and the same lesson on the shell: padding on .hub-view moved the whole app inside its own frame. Only the BOTTOM is safe to add — that is floor under the last module, which nothing else is measured against. */ .hub-view{padding-bottom:var(--sp-sec)} @media (max-width:900px){.hub-view{padding-bottom:64px}} /* ── 1b · THE LANDING SCREEN, WHICH IS THE ONE HE ACTUALLY LOOKS AT ───────────────────── ⛔ WHY THREE DESIGN PASSES DID NOTHING, PROVEN THIS TIME INSTEAD OF GUESSED. Every module on v-perf carried its geometry in an INLINE style attribute:
An inline declaration outranks every rule in every stylesheet. So `.card{padding:22px 24px}` was live, correct, loaded LAST — and lost, on every module, silently. Measured in the running game: computed padding on the first landing card came back `12px 20px 16px`, my rule's value nowhere. Nothing was broken. The cascade was simply never mine to win. And `.mvc-glass` — the class carrying WHERE YOU STAND, the vitals panel and the pipeline — appeared NOWHERE in this file. The dominant surface on the screen was never addressed at all. The fix is at the source: the inline geometry is deleted from script-01.js and the modules carry `.pv-mod`. Spacing is now a property of the design system, in one place, where it can be changed once and seen everywhere. That is the only reason the rules below can bite. ⛔ AND THE GEOMETRY IS NOT WRITTEN HERE. style-01.css §v-perf owns every module's margin and padding with `!important` at (0,4,0)+; anything this file says about spacing on the landing screen loses silently. The gap and the module padding are therefore raised THERE, at the one rule that governs them. What stays here is only what that block does not set. ⛔ AND NO ORANGE TOP-RULE. I had written a `.pv-mod::before` accent hairline across every module before reading the block I was fighting: "orange is NEVER structural (the accent left-tab / top-rule 'lame ass orange lines' are killed)" — a standing CEO ruling, enforced there with `content:none !important`. It would have been invisible anyway. Reading the rule you are overriding is not optional; it is how you find out it was a decision. */ /* Module titles carry the editorial weight the rooms moved to today. WHERE YOU STAND and NEW BUSINESS PIPELINE were set at panel-label size next to a 52px hero — same product, two typographic systems. */ .hub-view[data-view="v-perf"] :is(.pv-ph,.pv-mod>.row h2,.pv-mod>h2){ font-size:clamp(21px,2.3vw,32px);line-height:1.02;letter-spacing:-.02em;margin:0} /* the mono eyebrow stays small and tracked — the contrast between the two IS the look */ .hub-view[data-view="v-perf"] .tac-eyebrow{font-size:10px;letter-spacing:.2em} /* and the header row gets air under it, so the title is not sitting on its own content */ .pv-mod>.row:first-child{margin-bottom:clamp(14px,1.4vw,22px)} /* ── 2 · CARDS BECOME OBJECTS ─────────────────────────────────────────────────────────── A card with 12px of air inside it looks cramped however much sits around it — the interior and the exterior have to move together or the cards just get further apart and stay tight. */ /* ⛔ I BROKE THE COMMAND BAR WITH THIS RULE AND THE CEO SAW IT LIVE. .stat and .card are used INSIDE .topbar — 83 and 115 uses across the sheets, chrome and content alike — so a blanket 24px padding blew the topbar into a giant white band with the logo pushed off its baseline. That is what "even WORSE" was, and it was mine. Two corrections: .stat is dropped from the list entirely (it is a chrome primitive, not a content card), and every remaining rule is scoped INSIDE .hub-view and explicitly excluded from .topbar. A geometry rule with no scope is a geometry rule you have not finished writing. */ .hub-view :is(.card,.tile,.kpi,.shard,.dossier-card):not(.topbar *){ padding:22px 24px;border-radius:16px} .hub-view :is(.card,.tile,.kpi):not(.topbar *)>*+*{margin-top:10px} @media (max-width:600px){.hub-view :is(.card,.tile,.kpi,.shard,.dossier-card):not(.topbar *){padding:16px}} /* ── 3 · THE EDITORIAL TYPE SCALE, the one the eight rooms moved to today ─────────────── A 15px card title next to a 46px room headline is two products wearing one logo. */ .hub-view :is(.card,.tile,.shard,.dossier-card):not(.topbar *)>:is(h1,h2,h3){ font-size:clamp(19px,2.1vw,28px);line-height:1.04;letter-spacing:-.018em; text-transform:none;font-style:normal;margin-bottom:6px} .hub-view .kpi:not(.topbar *) .big,.hub-view .kpi:not(.topbar *) b{font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:-.02em} /* the mono eyebrow stays small and tracked — that contrast IS the editorial look */ .hub-view :is(.card,.tile,.kpi):not(.topbar *) :is(.k,.lbl,.label,.eyebrow,.kick){ font-size:10px;letter-spacing:.2em;text-transform:uppercase} /* ── 4 · DO THIS NOW IS THE MOST IMPORTANT OBJECT ON THE SCREEN ───────────────────────── It answers the one question the CEO has asked on every review — "what do I do now?" — and it was wedged against the fold at the same weight as everything else. */ .do-now{padding:22px 26px;border-radius:16px;margin-block:var(--sp-block); box-shadow:inset 0 0 0 1px rgba(249,115,22,.28),0 18px 40px -24px rgba(0,0,0,.8)} .do-now :is(h2,h3,b){font-size:clamp(18px,2vw,26px);line-height:1.06;letter-spacing:-.015em} /* ── 5 · THE BUTTON RANKS, matched to the rooms ───────────────────────────────────────── "these buttons look cheap and too big." 34px, tighter flanks, a real two-stop fill on the primary and a shallow ghost on the secondary — one family, two ranks. The 44px tap floor comes back on any coarse pointer; "smaller" from a desktop review does not repeal it. */ .pn-btn{min-height:34px;padding:0 14px;border-radius:10px; font:600 13px/1 IS,ui-sans-serif,system-ui,sans-serif;letter-spacing:.005em} .pn-btn--primary,.pn-btn.primary{ background-image:linear-gradient(180deg,color-mix(in srgb,var(--p) 88%,#fff),var(--p) 52%,color-mix(in srgb,var(--p) 92%,#000)); background-color:var(--p);color:#0B0A08; box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 8px rgba(249,115,22,.26)} @media (pointer:coarse){.pn-btn{min-height:44px;padding:0 16px;font-size:14px}} /* ── 6 · RAG PILLS ────────────────────────────────────────────────────────────────────── Same construction as the rooms: state token fill, dark ink, no new colour invented. */ .rag{display:inline-flex;align-items:center;gap:7px;width:max-content;height:24px; padding:0 10px 0 8px;border-radius:999px;background:var(--rag-c,#D2A047);color:#0B0A08; font:600 10.5px/1 IS,ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase; box-shadow:0 1px 2px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.22)} .rag::before{content:"";width:6px;height:6px;border-radius:99px;background:#0B0A08;opacity:.6} .rag--red{--rag-c:#CE7B5E} .rag--amber{--rag-c:#D2A047} .rag--green{--rag-c:#9DB395} /* ── 7 · RHA — rollover, highlight, animate, on the classes that actually exist ───────── Transform and shadow only, so nothing reflows and a long list does not jank. */ .hub-view :is(.card,.tile,.shard,.dossier-card,.do-now):not(.topbar *),.vc-a{ transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1)} .hub-view :is(.card,.tile,.shard,.dossier-card,.do-now):not(.topbar *):hover,.vc-a:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -20px rgba(0,0,0,.85),0 0 0 1px rgba(249,115,22,.3)} @media (prefers-reduced-motion:reduce){ :is(.card,.tile,.shard,.dossier-card,.do-now,.vc-a){transition:none} :is(.card,.tile,.shard,.dossier-card,.do-now,.vc-a):hover{transform:none} } /* ── 8 · THE INTERVIEW — the first screen anyone sees ─────────────────────────────────── Real classes, read off the DOM: .vc-room .vc-q .vc-hl .vc-intro .vc-cta-row .vc-begin. */ .vc-q--hero,.vc-hl{font-size:clamp(28px,3.6vw,52px);line-height:1.02;letter-spacing:-.022em} .vc-intro{font-size:15px;line-height:1.55;margin-top:14px} .vc-cta-row{margin-top:var(--sp-block);gap:12px} .vc-room-body{padding:var(--sp-block)} @media (max-width:700px){.vc-room-body{padding:24px 20px}} /* ── 9 · THE INSTRUMENT, quiet ────────────────────────────────────────────────────────── .roommeter is shared by the interview AND the pitch room, so one rule reaches both. The rainbow track is gone; the needle is a machined tick in the state colour. */ .roommeter .roomtrack{height:5px;border-radius:99px;background:rgba(255,255,255,.10)} .roommeter .roomtrack .needle{top:-5px;bottom:-5px;width:3px;border-radius:99px; background:#D2A047;box-shadow:0 0 0 2px #1B242F,0 2px 6px rgba(0,0,0,.55)} .roommeter .roomtrack .barline{width:1px;background:rgba(255,255,255,.28);box-shadow:none} .roommeter .lbl{align-items:center;gap:12px;margin-bottom:10px} /* ═══════════════════════════════════════════════════════════════════════════════════════ 10 · THE ROOM SYSTEM, PORTED INTO THE GAME — 17 Aug, late. ⛔ CEO: "wheres my fucking new clean design we worked on all afternoon?" … "we spent HOURS feeding back- gradients, nuances..... where is this?" The honest answer was: in pn-system-v4.css, which money.html / team.html / floor.html / clients.html load and play.html never did. The gradients, the headline scale, the button pair, the photo-led figure — all of it shipped this afternoon, all of it on the eight room pages, none of it within reach of the screen he actually plays. Every "design pass" I made on the game was me rebuilding a worse version of a system that already existed. So this is a PORT, not a new design. Every value below is read out of pn-system-v4.css and carried over unchanged; nothing here is invented, and nothing here is a colour I picked. ⛔ AND IT IS SCOPED, BECAUSE THE WHOLE SHEET CANNOT COME. I linked v4 into play.html and rendered it: the PITCHNOIR mark shrank to 8px, the command bar collapsed 144px -> 100px, the left rail clipped. v4 owns bare `.card`, `.stat`, `.go` and `img`; the game uses all four for other things. Tokens are therefore prefixed --v4-*, so no game component reads them by accident, and the components carry a pnv4- prefix for the same reason. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* ── 10.1 · THE TOKENS, verbatim from v4's dark :root ─────────────────────────────────── */ .hub-view{ --v4-film-black:#0F1419; --v4-grouped:#1B242F; --v4-card:#27333F; --v4-card-2:#33414F; --v4-sep:#3E4C5B; --v4-label:#F3F6F9; --v4-label2:#B3BECB; --v4-label3:#BCC9D7; --v4-acc:#F97316; --v4-acc-ink:#07080C; --v4-sage:#9DB395; --v4-ochre:#D2A047; --v4-clay:#CE7B5E; --v4-r-card:18px; --v4-r-ctl:12px; /* the field's three members — deepest is the film black, and the palette's existing dark members are the LIGHTER two, exactly as the CEO instructed on 17 Aug */ --v4-field-deep:var(--v4-film-black); --v4-field-mid:var(--v4-card-2); --v4-field-lift:var(--v4-sep); } /* ── 10.2 · THE FIELD — "darkest part top right, then repeating right side on way down" ── Ported from v4's .content::before. Deep anchor hard into the top-right corner at full film-black, then the same dark recurring down the right edge in a DECREASING rhythm — 82%, 64%, 48%. Decreasing is what makes it elegant rather than striped: an even repeat reads as a pattern, a diminishing one reads as fall-off. Left stays lifted, so the screen has a lit side and a shadowed side and the eye always knows which way is up. */ /* ⛔ AS A BACKGROUND, NOT AN OVERLAY. v4 paints this on `.content::before` — a fixed pseudo- element — because a room page is one document with a light ground behind it. The game is a scrolling column on an already near-black ground, and I rendered the pseudo-element version: the blooms sat OVER the modules and muddied the bottom half of the screen into a dark slab. Painting it as the element's own background-image means it is behind its own content by construction and cannot cover anything, whatever the stacking context does. */ /* ⛔ AND THE GROUND HAS TO COME UP FOR THE FIELD TO EXIST AT ALL. Rendered the field on the game's existing ground and it was invisible: the game floor is already near-black, so a gradient whose whole subject is "darkest top-right, falling away down the right edge" had nothing to be darker than. On the room pages the ground is --grouped (#1B242F) and the film black reads against it. Same recipe here, or the gradient is a rule that renders nothing — which is the exact failure mode this whole file exists to stop me repeating. */ /* ⛔ DARK ONLY. These are v4's DARK tokens; painting --v4-grouped unconditionally would put a navy slab under the porcelain themes and take the light game with it. v4 redefines the whole set for light and that port is a separate piece of work — so this is gated rather than half-done, and light keeps exactly what it has today. */ body:not(.mvc-light) .hub-view{position:relative; background-color:var(--v4-grouped); background-image: radial-gradient(46% 34% at 104% -6%, var(--v4-field-deep) 0%, transparent 68%), radial-gradient(34% 24% at 106% 32%, color-mix(in srgb,var(--v4-field-deep) 82%,transparent) 0%, transparent 70%), radial-gradient(28% 20% at 106% 62%, color-mix(in srgb,var(--v4-field-deep) 64%,transparent) 0%, transparent 72%), radial-gradient(24% 17% at 106% 94%, color-mix(in srgb,var(--v4-field-deep) 48%,transparent) 0%, transparent 74%), radial-gradient(54% 44% at -6% 12%, color-mix(in srgb,var(--v4-field-lift) 78%,transparent) 0%, transparent 68%), radial-gradient(44% 36% at 8% 72%, color-mix(in srgb,var(--v4-field-mid) 62%,transparent) 0%, transparent 66%), linear-gradient(200deg, color-mix(in srgb,var(--v4-field-lift) 34%,transparent) 0%, transparent 40%, color-mix(in srgb,var(--v4-field-deep) 46%,transparent) 100%); background-attachment:local;background-size:100% 100%; animation:v4fielddrift 58s ease-in-out infinite alternate} /* ⛔ THE DRIFT MOVES THE LIGHT, NOT THE LAYOUT. v4 animates `transform` on a pseudo-element, which is free there and catastrophic here — this rule is on .hub-view itself, so a transform would drag every module on the screen with it. Animating background-position moves only the paint. And the movement is VERTICAL: a right-anchored composition loses its whole point if the dark edge walks on and off the side. The light breathes; the composition does not move. */ @keyframes v4fielddrift{ 0% {background-position:0 0} 50% {background-position:0 2.5%} 100%{background-position:0 -2%}} @media (prefers-reduced-motion:reduce){.hub-view::before{animation:none}} /* ── 10.3 · THE BUTTON PAIR — v4 .go / .go--now, ported ─────────────────────────────── Two ranks, one family. The primary is a real two-stop fill with NEAR-BLACK ink: white on #F97316 is 2.8:1 and was on every primary button in the game; --acc-ink is 7.14:1. STYLE_SOURCE_OF_TRUTH §138 over UX_RULES §13 — the locked art direction wins, and it is the one with the measurement behind it. ⛔ 2026-08-19 (CEO): "these pink buttons with new white stroke are too much — remove stroke." This rule never declared its own `border`, so play/style-01.css's brutalist default — `button{border:2px solid var(--ink)}` — was still winning on that one property (equal/lower specificity doesn't matter once the higher-specificity rule leaves a property unset). `--ink` resolves near-white inside the dark office scope, which is the bright ring measured at rest on "Read the brief" / "End week N" / every `.pnv4-go--now`. `border:0` here removes it at REST without touching `:focus-visible`, which is a separate law (`pn-laws-20260816.css` LAW 4, `outline`, not `border`) and is unaffected. */ .hub-view :is(.pnv4-go,.lg-btn,.perf-hero-cta .lg-btn){ display:inline-flex;align-items:center;justify-content:center;min-height:44px; padding:0 17px;border-radius:var(--v4-r-ctl);text-decoration:none;white-space:nowrap; font:600 14.5px/1 IS,system-ui,sans-serif;color:var(--v4-label);cursor:pointer;border:0} .hub-view :is(.pnv4-go--now,.lg-btn--primary){ background-image:linear-gradient(180deg, color-mix(in srgb, var(--v4-acc) 88%, #fff) 0%, var(--v4-acc) 52%, color-mix(in srgb, var(--v4-acc) 92%, #000) 100%); background-color:var(--v4-acc);color:var(--v4-acc-ink); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 34%,transparent), 0 2px 10px color-mix(in srgb,var(--v4-acc) 26%,transparent)} /* ── 10.4 · THE FIGURE — v4 .cfo, ported as .pnv4-fig ──────────────────────────────── "boring flat data leads. Why dont you have a picture of the CFO." A person telling you the thing, beside the thing. This is the shape the CEO sent back tonight and asked for. */ .pnv4-fig{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0; border-radius:var(--v4-r-card);overflow:hidden;background:var(--v4-card); box-shadow:inset 0 0 0 1px var(--v4-sep)} .pnv4-fig__pic{position:relative;min-height:280px;background:#0A0E13} .pnv4-fig__pic :is(img,video){width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block} .pnv4-fig__pic .who{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 18px; background:linear-gradient(180deg,transparent,rgba(6,9,13,.92));color:#F4F7FA} .pnv4-fig__pic .who b{display:block;font:700 18px/1.1 IS,system-ui,sans-serif;letter-spacing:-.016em} .pnv4-fig__pic .who i{display:block;font-style:normal;font:400 10.5px/1 JB,ui-monospace,monospace; letter-spacing:.15em;text-transform:uppercase;color:#AEB6BF;margin-top:6px} .pnv4-fig__say{padding:clamp(22px,3vw,32px);display:grid;align-content:center;gap:16px} .pnv4-fig__say q{quotes:none;font:700 clamp(20px,2.3vw,29px)/1.2 IS,system-ui,sans-serif; letter-spacing:-.022em;color:var(--v4-label)} .pnv4-fig__say p{font-size:14px;line-height:1.5;color:var(--v4-label2);margin:0;max-width:44ch} .pnv4-fig__say .acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px} @media (max-width:820px){.pnv4-fig{grid-template-columns:1fr}.pnv4-fig__pic{min-height:230px}} /* ═══════════════════════════════════════════════════════════════════════════════════════ 11 · THE DEPTH PASS, CLAWED BACK — 17 Aug, late. ⛔ CEO: "claw back the craft we did earlier." He was right and I had it backwards. I told him 3D/isometric had never been started. It was built at 15:25 today, commit 9cedd794f8 "the depth pass — gradients, glass, 3D, huge headlines, and the WahWahs' own world", against his own brief: "go ahead and implment the cool gradients and glass and 3d aspects - keep all fonts as you have them- just introduce the depth and gradients and 3d/isometric". Nothing was lost. Counted in the current file: 22 backdrop-filter rules, 14 stack3d rules, the .iso plane, the clamp(34px,4.4vw,64px) headline. All alive in pn-system-v4.css. ALL OF IT AT ZERO IN THE GAME. The craft did not need recovering — it needed CARRYING, and I had carried four things across (tokens, field, buttons, figure) and left the depth behind. ⛔ AND THE HEADLINE FINDING GOES WITH IT. Fifteen of his marks were the same sentence — "this headline still too small" — across five rooms, because the ceiling was 29px, barely bigger than a card title. That is why raising it twice never registered. The scale below is the one that fixed it: 64px section, 76px page title. Fonts unchanged, as instructed. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* ── 11.1 · GLASS. Not "a card with opacity" — a translucent fill, a bright top edge where the light catches, and a blur of what is behind. Applied to the surfaces the game already has, so no markup changes. */ body:not(.mvc-light) .hub-view :is(.card,.tile,.shard,.dossier-card,.mvc-glass):not(.topbar *){ backdrop-filter:blur(14px) saturate(1.25); -webkit-backdrop-filter:blur(14px) saturate(1.25); background-image:linear-gradient(168deg, color-mix(in srgb,var(--v4-card) 88%,transparent) 0%, color-mix(in srgb,var(--v4-card-2) 94%,transparent) 100%); box-shadow: inset 0 1px 0 0 color-mix(in srgb,var(--v4-label) 13%,transparent), inset 0 0 0 1px var(--v4-sep), 0 18px 40px -24px rgba(0,0,0,.8)} /* ── 11.2 · DEPTH ON EVERY CARD. "I want more of this 3d depth." A card sits above the page and knows it. The lift is a spring, not a fade. */ .hub-view :is(.card,.tile,.shard,.dossier-card,.do-now):not(.topbar *){ transform:translateZ(0); transition:transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s cubic-bezier(.22,1,.36,1)} .hub-view :is(.card,.tile,.shard,.dossier-card,.do-now):not(.topbar *):hover{ transform:translateY(-4px) scale(1.006); box-shadow:0 26px 54px -22px rgba(0,0,0,.8), inset 0 0 0 1px color-mix(in srgb,var(--v4-acc) 34%,var(--v4-sep))} /* ── 11.3 · THE ISOMETRIC PLANE. For a set that is genuinely spatial — a shelf, a floor, a cabinet — not merely a list. Tilts into axonometric and relaxes toward the viewer on hover, so the depth is an affordance rather than a picture of one. */ .hub-view .iso{perspective:1500px;perspective-origin:50% 24%} .hub-view .iso__plane{transform:rotateX(19deg) rotateZ(-8deg);transform-style:preserve-3d; transition:transform .55s cubic-bezier(.22,1,.36,1)} .hub-view .iso:hover .iso__plane{transform:rotateX(11deg) rotateZ(-4deg)} /* ── 11.4 · HEADLINES THAT ARE ACTUALLY BIG. The fifteen-mark fix, carried across. ⛔ BUT SCALED BY SPAN, WHICH IS WHAT THE ROOMS ACTUALLY DO. I first applied v4's clamp(34px,4.4vw,64px) to every module title here and rendered it: "WHERE YOU STAND" and "NEW BUSINESS PIPELINE" broke onto a second line and clipped out of their cells. That scale belongs to `.shead h2` — a FULL-WIDTH section headline on a room page. This screen is a two-column masonry, so a half-width cell gets the step below it. Copying a value across without copying the measure it was set against is how a fix becomes a new defect. */ .hub-view[data-view="v-perf"] :is(.pv-ph,.pv-mod>.row h2,.pv-mod>h2){ font:700 clamp(24px,2.6vw,38px)/1 IS,system-ui,sans-serif; letter-spacing:-.016em;word-spacing:.06em;text-wrap:balance} /* the full-width modules — the ones that span both columns — take the room scale in full */ @media (min-width:880px){ .hub-view[data-view="v-perf"].on > :is(.do-now,.pv-cols,.mvc-kpi-row) :is(h1,h2){ font:700 clamp(34px,4.4vw,64px)/.95 IS,system-ui,sans-serif; letter-spacing:-.012em;word-spacing:.1em} } /* ⛔ AND THE MOTION HAS AN OFF SWITCH, as v4's does. A tilted plane and a springing card are exactly what vestibular sensitivity is about. */ @media (prefers-reduced-motion:reduce){ .hub-view .iso__plane,.hub-view .iso:hover .iso__plane{transform:none} .hub-view :is(.card,.tile,.shard,.dossier-card,.do-now):not(.topbar *){transition:none} .hub-view :is(.card,.tile,.shard,.dossier-card,.do-now):not(.topbar *):hover{transform:none} } /* ═══════════════════════════════════════════════════════════════════════════════════════ 12 · THE FLOOR, BUILT TO THE COMP — design/approved-rooms-20260817/floor.jpg ⛔ The CEO's charge, and it is correct: "you have A) failed to recall the briefing and b) failed to implement the designs". Sections 10 and 11 above are the system — tokens, field, glass, depth, buttons. A system is not a screen. This is the screen. */ /* the masthead: SENTENCE CASE and large. The game's oblique caps are not what the comp does. */ .fl-mast{padding:clamp(26px,3vw,44px) 0 0} .fl-mast h1{margin:0;font:700 clamp(30px,4.2vw,58px)/1.02 IS,system-ui,sans-serif; letter-spacing:-.028em;text-transform:none;font-style:normal;color:var(--v4-label); text-wrap:balance} .fl-sub{margin:10px 0 0;font:400 11px/1 JB,ui-monospace,monospace;letter-spacing:.14em; text-transform:uppercase;color:var(--v4-label3)} /* ── the count line — DELETED (Dave, 18 Aug) ─────────────────────────────────────────────── The CEO asked for it removed, not restyled; the earlier redesign here (type, terminating rule, conditional triangle) was the restyle he did not want. The element is gone from script-01's return and its rules are removed with it. The per-card CRITICAL / WATCH chip below carries the same information. Left as a note so the deletion is legible in the diff, not a silent gap. */ /* THE ACTION ROWS. icon | a sentence with a number in it | severity | the verb. The stripe down the left edge is the SEVERITY — a state colour, never the brand accent (orange is NEVER structural, and this is exactly the rule that tempts it). */ .fl-things{display:grid;gap:12px} .fl-thing{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center; gap:16px;padding:16px 18px 16px 20px;border-radius:14px;position:relative;overflow:hidden; background:linear-gradient(168deg, color-mix(in srgb,var(--v4-card) 90%,transparent), color-mix(in srgb,var(--v4-card-2) 96%,transparent)); box-shadow:inset 0 0 0 1px var(--v4-sep),0 14px 30px -22px rgba(0,0,0,.8); transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)} /* PR1c item 6: the DS bans structural coloured spines — severity is already carried by the WATCH/Critical pill (`.rag`), so the left edge reads as elevation (a neutral hairline lifted off the ladder), not a second, redundant severity signal. `--fl-sev` stays defined per modifier (still consumed by the icon glyph, which legitimately wants the state colour) but the edge itself now reads the neutral token in every theme. */ .fl-thing::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--v4-sep)} .fl-thing--crit{--fl-sev:var(--v4-clay)} .fl-thing--watch{--fl-sev:var(--v4-ochre)} .fl-thing:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fl-sev) 46%,var(--v4-sep)), 0 22px 44px -22px rgba(0,0,0,.85)} .fl-thing__ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center; background:color-mix(in srgb,var(--fl-sev) 16%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fl-sev) 30%,transparent)} .fl-thing__ico svg{width:19px;height:19px;stroke:var(--fl-sev)} .fl-thing__t{min-width:0;display:grid;gap:4px} .fl-thing__t b{font:600 clamp(15px,1.5vw,19px)/1.25 IS,system-ui,sans-serif; letter-spacing:-.012em;color:var(--v4-label)} .fl-thing__t i{font-style:normal;font:400 12px/1.35 IS,system-ui,sans-serif;color:var(--v4-label2)} .fl-thing__do{min-height:38px;padding:0 15px;font-size:13.5px} /* ── the week bar ───────────────────────────────────────────────────────────────────────── Same fault as the count line, worse: a full-width slab, 14px of padding, and inside it one 10.5px mono string at .2em in the dimmest ink, with a button a very long way to its right. Most of the module was empty, which is what "poor design" reads as — a box drawn round nothing. It is the ONE ACTION of the week, so it is now weighted like one: the instruction in sans at reading size in the primary ink, a second dim line that says what the button actually does (a player should never have to infer that ending the week is what advances the game), and the whole thing sitting on the card ground rather than a translucent wash so it reads as an object. The button keeps the system's primary treatment — no new colour is introduced here. */ .fl-week{display:flex;align-items:center;gap:20px;margin-top:clamp(20px,2.4vw,32px); padding:20px 22px;border-radius:var(--v4-r-card,18px); background:var(--v4-card); box-shadow:inset 0 0 0 1px var(--v4-sep)} .fl-week__t{flex:1;min-width:0;display:grid;gap:4px} .fl-week__t b{font:600 16px/1.2 IS,system-ui,sans-serif;letter-spacing:-.01em; color:var(--v4-label);text-transform:none} .fl-week__t i{font-style:normal;font:400 12.5px/1.35 IS,system-ui,sans-serif; color:var(--v4-label3)} .fl-week__do{flex:none;min-height:44px;padding:0 20px} @media (max-width:820px){ .fl-thing{grid-template-columns:auto minmax(0,1fr);row-gap:12px} .fl-thing .rag{grid-column:1} .fl-thing__do{grid-column:2;justify-self:end} } @media (prefers-reduced-motion:reduce){ .fl-thing{transition:none}.fl-thing:hover{transform:none} } /* ── 12b · THE MASTHEAD ON EVERY ROOM ─────────────────────────────────────────────────── Headlines lifted from the CEO's own comps — "What you're up against", "Who's paying, and when", "Who's on what", "What's coming in, what's going out", "Where you stand". One sentence-case question, one mono line of real figures. */ .fl-mast--room{padding:clamp(20px,2.4vw,34px) 0 clamp(14px,1.6vw,22px)} .fl-mast--room h1{font-size:clamp(28px,3.8vw,52px)} /* ⛔ AND THE OLD SLAB HEADER GOES. "again you have two headings- remove the second" — his note on THE TEAM, and the same note on THE FLOOR, and again at 19:05: "you STILL have two competing headlines- lose the second!". Adding a masthead above the existing `.tac-eyebrow + h2` block would have created that fault on six more screens in one commit. The eyebrow stays — it carries the mono context line the comp also uses — and the duplicate h2 goes, because the masthead above it now says the same thing larger and better. ⛔ 2026-08-19 (CEO, "wrong fonts on lots of pages" — traced, not a font swap): `:has()` scopes to the WHOLE `.hub-view`, not to the one card beside the masthead. Every hub-view carries exactly one `.fl-mast--room` (viewMastHTML runs once per view), so this rule was silently killing the h2 on EVERY `.card.shard` in that view, not only the first — measured live on v-nbo and v-clients: "NBOs — NEW BUSINESS OPPORTUNITIES", "ON THE BOARD", "CLIENT GROWTH", "INCOMING BRIEFS", "THE BOOK", "YOUR ACCOUNTS", "ACTIVE CAMPAIGNS" all computed `display:none`. With the real IS display headline gone from every section, the 11.5px JetBrains Mono `.tac-eyebrow` above it was left as the ONLY visible heading on the page — which is exactly Jon's "heavy tracked mono used as if it were the display face": the eyebrow itself was never wrong (SST §2's quiet label voice, floored at 11.5px by LAW 6b below), it was PROMOTED into doing the display face's job because the display face was invisible. Fix: `+` (adjacent-sibling) instead of `:has()` at the view level — hide only the one h2 that directly follows the masthead, restore every other section's real headline. */ .fl-mast--room + .card.shard > h2:first-of-type, .fl-mast--room + .card.shard > .row:first-of-type + h2{display:none} /* the lede that followed it keeps its job, but stops hugging a hidden heading */ .fl-mast--room + .card.shard > p.muted.small{margin-top:6px;max-width:74ch} /* ═══════════════════════════════════════════════════════════════════════════════════════ 13 · THE WAR ROOM AND THE PITCH — the three surfaces the CEO named as untouched. ⛔ WHY THEY WERE UNTOUCHED, and it is structural, not neglect: §10-12 are all scoped to `.hub-view`. The war room, the pitch stages and the boardroom presentation are `app.innerHTML` screens that REPLACE the hub entirely — `.pitch-wrap`, not `.hub-view`. Not one rule above could ever have reached them. "we are yet to look at the War room. Pitch and Campain presentaiton (WPP) sequences" — correct, and this is the reason. Selectors below were dumped out of the RUNNING war room (openPitch + screenPitch in the harness), not guessed: .pitch-wrap .pitch-inner .bop .bop-ask .bop-eyebrow .bop-heroes .bop-hero-v .rm-card .wr-bs-* .pn-btn .tmeter-*. */ /* ── 13.1 · the shell gets the field and the ground, exactly as the rooms do ───────────── */ /* ⛔ ON `.pitch-wrap` DIRECTLY, not `body:not(.mvc-light) .pitch-wrap`. I wrote the guarded form first and measured it: the token block `.pitch-wrap{--v4-grouped:…}` applied (the element returned #1B242F) while the guarded rule on the SAME element did not — background stayed transparent and the radius stayed .card's 2px. Body carried no `mvc-light` at the time, so the guard should have passed and I could not account for it from here. Rather than keep paying to find out, the shell moves onto the selector that is PROVEN to apply on this element, and light is handled by an explicit override below instead of by a negation. */ /* ⛔ MEASURED, 18 Aug. The shell lost, and neither of my two theories was the cause. It was not the `body:not(.mvc-light)` guard and it was not stylesheet load order — I moved this file to genuinely last and the shell was STILL transparent at 2px radius. Enumerating every rule that actually matches this element, in order, gave the answer in one line: the war room shell carries `class="card pitch-wrap warroom pn-card"`, and `style-01.css` paints it via `body[data-view="office"] .card` at specificity (0,2,1). A bare `.pitch-wrap` is (0,1,0) and loses on specificity no matter how late it loads. Position only breaks a TIE. And that rule's declarations are `!important`, which outranks specificity and order BOTH — I proved it by setting `background-color` INLINE on the element and still measuring transparent. An inline style losing is the signature of `!important`, and it is the only thing that produces it. So this rule is raised on all three axes: specificity (0,2,1), position (last sheet), and priority. `--pn-panel` is not even defined on this element, so what that !important actually painted was nothing — the shell was transparent by accident, not by design. */ body[data-view] .pitch-wrap, body .pitch-wrap.pn-card{ background-color:var(--v4-grouped) !important; background-image: radial-gradient(52% 40% at 100% 0%, var(--v4-field-deep) 0%, transparent 72%), radial-gradient(34% 26% at 100% 34%, color-mix(in srgb,var(--v4-field-deep) 70%,transparent) 0%, transparent 74%), radial-gradient(27% 20% at 100% 62%, color-mix(in srgb,var(--v4-field-deep) 46%,transparent) 0%, transparent 76%), radial-gradient(54% 44% at -6% 12%, color-mix(in srgb,var(--v4-field-lift) 78%,transparent) 0%, transparent 68%), linear-gradient(212deg, color-mix(in srgb,var(--v4-field-deep) 42%,transparent) 0%, transparent 46%, color-mix(in srgb,var(--v4-field-lift) 30%,transparent) 100%) !important; border-radius:var(--v4-r-card) !important} .pitch-wrap{--v4-film-black:#0F1419;--v4-grouped:#1B242F;--v4-card:#27333F;--v4-card-2:#33414F; --v4-sep:#3E4C5B;--v4-label:#F3F6F9;--v4-label2:#B3BECB;--v4-label3:#BCC9D7; --v4-acc:#F97316;--v4-acc-ink:#07080C;--v4-ochre:#D2A047;--v4-clay:#CE7B5E; --v4-r-card:18px;--v4-r-ctl:12px; --v4-field-deep:var(--v4-film-black);--v4-field-lift:var(--v4-sep)} /* light keeps exactly what it has today — these are v4's DARK tokens and porcelain would take a navy slab. Stated as its own rule so the dark path is not conditional on a negation. */ body.mvc-light .pitch-wrap{background-color:transparent;background-image:none} /* ── 13.2 · THE ASK IS THE HEADLINE, and it is sentence case ────────────────────────── The comp's masthead is "What you're up against" — sentence case, large. The war room set the client's ask in oblique caps at 25px, which is a caption pretending to be a headline. ⛔ `text-transform:none` cannot lowercase text that is capitalised in the STRING; it only stops CSS from upper-casing it. This works because the ask is authored in sentence case and was being upper-cased here. Checked before writing the rule, because a rule that assumes the opposite is a rule that renders nothing. */ .pitch-wrap .bop-ask{ font:700 clamp(26px,3.4vw,46px)/1.06 IS,system-ui,sans-serif; letter-spacing:-.022em;text-transform:none;font-style:normal; color:var(--v4-label);text-wrap:balance;margin:0 0 14px} .pitch-wrap .bop-eyebrow{font:400 10px/1 JB,ui-monospace,monospace;letter-spacing:.2em; text-transform:uppercase;color:var(--v4-label3)} .pitch-wrap .bop-hero-v{font-weight:900;letter-spacing:-.03em} /* CEO 2026-09-19 "old typography": hero figures carry the hero weight (§5g), not 700 */ .pitch-wrap .bop-heroes{gap:18px 42px;margin-bottom:22px} /* ── 13.3 · the panels become glass, like every other surface in the system ───────────── */ body:not(.mvc-light) .pitch-wrap :is(.bop,.rm-card,.wr-bs-item,.wr-more){ background-image:linear-gradient(168deg, color-mix(in srgb,var(--v4-card) 88%,transparent), color-mix(in srgb,var(--v4-card-2) 94%,transparent)); backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25); box-shadow:inset 0 1px 0 0 color-mix(in srgb,var(--v4-label) 13%,transparent), inset 0 0 0 1px var(--v4-sep),0 18px 40px -24px rgba(0,0,0,.8); border-radius:var(--v4-r-card)} .pitch-wrap .rm-card{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1)} .pitch-wrap .rm-card:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v4-acc) 34%,var(--v4-sep)), 0 24px 48px -22px rgba(0,0,0,.85)} /* ── 13.4 · the button pair, same two ranks as the rooms ───────────────────────────── The war room ran the old bevelled slab with a notched corner. One family, two ranks, and near-black ink on the orange — the 7.14:1 pair, not white at 2.8:1. */ .pitch-wrap .pn-btn{min-height:44px;padding:0 18px;border-radius:var(--v4-r-ctl); font:600 14.5px/1 IS,system-ui,sans-serif;letter-spacing:.005em; color:var(--v4-label);clip-path:none;border:0; background:color-mix(in srgb,var(--v4-card-2) 92%,transparent); box-shadow:inset 0 0 0 1px var(--v4-sep)} .pitch-wrap .pn-btn--sm{min-height:36px;padding:0 13px;font-size:13px} .pitch-wrap :is(.pn-btn--primary,.pn-btn.primary,.pn-btn--go){ background-image:linear-gradient(180deg, color-mix(in srgb,var(--v4-acc) 88%,#fff) 0%, var(--v4-acc) 52%, color-mix(in srgb,var(--v4-acc) 92%,#000) 100%); background-color:var(--v4-acc);color:var(--v4-acc-ink); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 34%,transparent), 0 2px 10px color-mix(in srgb,var(--v4-acc) 26%,transparent)} /* ── 13.5 · THE PRESENTATION. The deck plays full-bleed; the type over film is the only place in the product where glass would be wrong (glass on the card, never over a picture), so the slide furniture reads on a scrim instead. */ .bs-slide .bs-kick{font:400 10px/1 JB,ui-monospace,monospace;letter-spacing:.2em; text-transform:uppercase;color:#CFD8E2} .bs-slide .bs-disc{font:700 clamp(24px,3.2vw,44px)/1.04 IS,system-ui,sans-serif; letter-spacing:-.022em;text-transform:none;font-style:normal;color:#F6F9FC} .bs-slide .bs-line{font:400 clamp(15px,1.7vw,21px)/1.45 IS,system-ui,sans-serif; color:#DCE4EC;max-width:52ch} .bs-slide .bs-cliptag{font:400 10px/1 JB,ui-monospace,monospace;letter-spacing:.18em; text-transform:uppercase} @media (prefers-reduced-motion:reduce){ .pitch-wrap .rm-card{transition:none} .pitch-wrap .rm-card:hover{transform:none} } /* ══════════════════════════════════════════════════════════════════════════════════════════ §14 · THE `--pn-*` BRIDGE — the one place that actually re-skins the hub ══════════════════════════════════════════════════════════════════════════════════════════ ⛔ THIS IS THE ANSWER TO "WHY IS IT STILL THE SAME?", found 18 Aug by measurement. `style-01.css` §PN-SKIN (around line 6560) paints EVERY card in the office through a single rule, and every declaration in it is `!important`: body[data-view="office"] :is(.card,.card.shard,.client-card,.nbo-card,.tt-card,.scout-card, .camp-card,.dossier-card){ background:var(--pn-panel) !important; border:1px solid var(--pn-border) !important; border-radius:var(--pn-r) !important; box-shadow:var(--pn-shadow),… !important; color:var(--pn-text) !important; … } and 25 lines further down it also sets `backdrop-filter:none !important`. `!important` outranks specificity AND source order BOTH. So every card background, border, radius, shadow, ink and blur I wrote in §10–§12 has been losing to that block silently, all day, no matter how specific the selector or how late the sheet — which is exactly what the CEO kept seeing and I kept failing to explain. `--pn-r` is `2px`, which is why the whole hub stayed at a 2px radius while `--v4-r-card:18px` resolved perfectly on the same elements. THE FIX IS NOT MORE `!important`. That block's own comment says it exists so that "one place, whole shell re-skins" — the `--pn-*` names are a BRIDGE, deliberately indirected so the skin can be repointed. So repoint it: bind the bridge to the v4 palette for the dark shell and let the existing !important rule paint v4 on our behalf. One rule, every card, nothing fought. Scoped `body:not(.mvc-light)[data-view="office"] .hub-view` (0,4,0): · beats the `:root` bridge at (0,1,0) that the office skin reads by default; · cannot collide with the light bridge, which is guarded on `body.mvc-light`; · sits on `.hub-view`, where the `--v4-*` tokens are already defined (§10.1), so every value below resolves on the same element that declares it. ────────────────────────────────────────────────────────────────────────────────────────── */ body:not(.mvc-light)[data-view="office"] .hub-view{ /* SURFACES — grouped ground, card, raised card. The v4 ladder, in the v4 order. */ --pn-panel:linear-gradient(168deg, color-mix(in srgb,var(--v4-card) 94%,transparent) 0%, color-mix(in srgb,var(--v4-card-2) 88%,transparent) 100%); --pn-panel-2:linear-gradient(168deg, color-mix(in srgb,var(--v4-card-2) 92%,transparent) 0%, color-mix(in srgb,var(--v4-card) 90%,transparent) 100%); --pn-tile:color-mix(in srgb,var(--v4-card) 88%,transparent); --pn-elev:var(--v4-card-2); --pn-bg:var(--v4-grouped); /* EDGES — v4's separator, and the accent only on the hover edge (never structural). */ --pn-border:color-mix(in srgb,var(--v4-sep) 76%,transparent); --pn-hairline:color-mix(in srgb,var(--v4-sep) 52%,transparent); --pn-border-hi:color-mix(in srgb,var(--v4-acc) 62%,transparent); /* INK — v4's three label ranks. */ --pn-text:var(--v4-label); --pn-body:var(--v4-label2); --pn-muted:var(--v4-label3); --pn-faint:color-mix(in srgb,var(--v4-label3) 62%,transparent); /* GEOMETRY — the 2px lock lifts here and nowhere else. This single line is what has been holding every card in the game at a 2px corner. */ --pn-r:var(--v4-r-card); --pn-r-sm:var(--v4-r-ctl); /* DEPTH — cards sit ABOVE the page (design law 5). Cast, plus the bright top edge that makes glass read as glass rather than as a card with opacity. */ --pn-shadow:0 18px 44px rgba(7,10,16,.46), 0 2px 6px rgba(7,10,16,.34); --pn-shadow-hi:0 26px 62px rgba(7,10,16,.56), 0 3px 8px rgba(7,10,16,.4); } /* GLASS. §PN-SKIN turns the blur off with `backdrop-filter:none !important` under a comment reading "engineered-matte (BMW M is flat, not glass)". That was a real decision, and it was superseded on 17 Aug by an explicit brief — "implment the cool gradients and glass and 3d aspects". Overriding an !important needs an !important; there is no other mechanism. It is stated here rather than scattered so the next person can find the one line that turns it back off. Blur ONLY — every surface value above still comes from the bridge. */ body:not(.mvc-light)[data-view="office"] .hub-view :is(.card,.card.shard,.client-card,.nbo-card, .tt-card,.scout-card,.camp-card,.dossier-card){ -webkit-backdrop-filter:blur(14px) saturate(1.25) !important; backdrop-filter:blur(14px) saturate(1.25) !important; } /* ══════════════════════════════════════════════════════════════════════════════════════════ §15 · THE SIDEBAR — REVERTED IN FULL, 18 Aug. Read this before rebuilding it. ══════════════════════════════════════════════════════════════════════════════════════════ I rebuilt the hub nav to the agreed comp — porcelain slab, named groups, text labels, count pills, dark active pill — and shipped it THREE TIMES. Every time it was broken on the CEO's machine and correct on mine: mint active row, then a floating short card with the top rows clipped behind the command bar, then a dead black column on one view. The last attempt is the one that matters, because by then I had a ten-assertion gate across four shell states and it reported PASS on a render that was visibly wrong. A gate that passes a broken screen is worse than no gate: it converts "I did not check" into "I checked and it is fine", which is exactly the claim that cost the most trust today. WHY THE GATE LIED — the honest list, so the rebuild does not inherit it: · it asserted properties I had chosen, not the ones that make the thing LOOK right: nothing measured flush-to-edge, gap-above, or "is this a full-height sidebar or a floating card". · it reset `.wrap.scrollTop` but not the nav's OWN scrollTop, which my §15 had made scrollable — so it measured rows that were scrolled out of view as "painted". · it ran at 1440x1000 in a cased frame. The CEO's window is larger and the shell reflows. Numbers derived from that harness are what produced the 118px phantom margin, the fixed height that clipped the last row, and the reserve constants. All of it was measurement theatre around a harness that did not match the target. WHAT SURVIVES, and it is the valuable part — three findings, all reproducible: 1. `style-01.css` §PN-SKIN paints every office card with `!important`; `--pn-r:2px` is why the whole hub sat at a 2px corner. Fixed properly in §14 by repointing the bridge. 2. the active nav row was tinted from `--glow`, the PURCHASABLE theme accent, and again from `--worn-a`, a runtime mood hue, plus an accent underline. Navigation structure must never be wired to either. That is a real defect and it is still worth fixing. 3. the wear layer sits at (0,4,2); anything styling `.hub-tab` must clear it. HOW TO REBUILD IT PROPERLY (not from this file, and not live on the CEO's build): · build the sidebar as a standalone page against the comp, at three widths, and get it signed off as a picture BEFORE a line of it goes near play.html; · change the SKIN only — the existing layout is sticky, start-aligned and content-height and has worked for months. §15 had no business setting align-self, margin, height or overflow; · the gate must assert what a person sees — flush to the shell edge, no gap under the bar, every row in the visible box, nothing overlapping — and it must be checked against a screenshot a human has actually looked at, not run alone. ══════════════════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════════════════════ §16 · THE DARK THEME IS ORANGE — brief, 2026-08-19 (Rita, 3-theme correctness pass) ══════════════════════════════════════════════════════════════════════════════════════════ `neon-onyx` is the game's DEFAULT dark palette — the one the sun/moon toggle lands on and the one the game BOOTS in. On 2026-08-18 a multi-view "neon tokenisation" re-skinned it PINK (--p/--acc/--v4-acc/--accent/--primary #FF2E88, --p2 #3FD9C0 teal) across v-perf/v-nbo/ v-clients/v-hires + the rail. That is what the CEO hit testing the themes: "the accent is the neon PINK across all themes, which is wrong." So the DARK theme is returned to the brand-orange spine here. Scoped to `[data-palette="neon-onyx"]` and `[data-view="office"]`, matches the skin's specificity ((0,4,1) / (0,5,1)) and loads later, so its !important wins cleanly across every hub view without editing style-01.css (merge-safe). Measured: near-black #07080C on #F97316 = 7.14:1; white on the glass CTA text-zone ≈ 9.2:1. (Neon theme retired 2026-09-12 — CEO: "remove neon and just have light and dark". The Neon `[data-theme="neon"]` CTA pink-skin block that used to sit below this one is deleted; dark is the only theme backed by the neon-onyx palette now.) */ body[data-view="office"][data-theme="dark"][data-palette="neon-onyx"] .hub-view[data-view]{ --v4-acc:#F97316 !important; --v4-acc-ink:#07080C !important; --p:#F97316 !important; --p2:#FF8A4F !important; --acc:#F97316 !important; --glow:249,115,22 !important; --accent:#F97316 !important; --accent2:#F97316 !important; --accent-yellow:#FBBF24 !important; --primary:#F97316 !important; --primary-deep:#9D4300 !important; --surface-tint:#F97316 !important; } /* the hero glass CTA was repainted with a LITERAL pink gradient (not a token), so the token re-pin above cannot reach it — restore pn-glass.css's orange "lit glass" recipe for Dark. */ body[data-view="office"][data-theme="dark"][data-palette="neon-onyx"] .hub-view[data-view] .lg-btn--primary{ color:#fff !important; text-shadow:0 1px 1.5px rgba(74,26,0,.62) !important; border-color:rgba(255,182,120,.55) !important; background:radial-gradient(140% 150% at 50% 47%, rgba(114,42,0,.64) 0%, rgba(114,42,0,.34) 50%, rgba(114,42,0,0) 80%), linear-gradient(178deg, #ffa04a 0%, var(--accent,#FF2E88) 24%, #e2650f 60%, #c1530a 100%) !important; } /* NEON theme + its 3-way toggle state retired (CEO 2026-09-12: "remove neon and just have light and dark"). The "NEON CTA COMPLETENESS" `[data-theme="neon"] .lg-btn--primary` pink-gradient override and the `.mvc-theme-toggle.is-neon`/`.mvc-tt-spark`/`.mvc-tt-neon` toggle-state rules that used to live here are deleted — the toggle is Dark ⇄ Light only now (mvc-os.js). */ /* ══════════════════════════════════════════════════════════════════════════════════════════ §17 · FOCUS RING — two-tone, background-independent (a11y audit, PR #582) ══════════════════════════════════════════════════════════════════════════════════════════ The LIGHT theme places cream chrome and dark cards side by side, so no single-tone focus ring clears WCAG 2.4.11 (3:1 non-text) against both: a burnt-orange ring on a dark card is 2.1:1 ("End week"), #F97316 on cream is 2.25:1 ("Store"). A TWO-BAND ring fixes it regardless of background — the accent OUTLINE carries it on the light chrome (burnt-orange on cream = 4.8:1) and the WHITE HALO carries it on the dark cards (#fff on #27333F ≈ 13:1). The faint navy edge is the mirror insurance on cream. Shipped on every theme — harmless where the accent already passes (dark/neon = 3.9:1) and keeps the indicator identical across the product. */ html body[data-view] :is(a[href],button,[role="button"],[tabindex]:not([tabindex="-1"]), input:not([type="hidden"]),select,textarea,summary,.help-chip):focus-visible{ outline:2px solid var(--acc,#F97316) !important; outline-offset:2px !important; box-shadow:0 0 0 4px var(--pn-focus-halo,#fff), 0 0 0 6px rgba(11,28,48,.55) !important; } /* the "?" explainer target is already 44px via pn-craft's ::after invisible-extension (S3-9); re-assert it on coarse pointers so the a11y target survives any later ::after override. */ @media (pointer:coarse){ .help-chip::after{ min-width:44px; min-height:44px; width:44px; height:44px; } }