/* instrument.css — THE INSTRUMENT SITE THEME. ========================================================================= A whole-site look, selected by one manifest key: `web.site.theme`. Loaded after terminal.css (the house look) and soundchrome.css, before the owner's own overlay. See assemble.py::site_theme for the switch. ★★★★★ WHY IT EXISTS. Two owners on this webcore load the SAME NINE SHEETS in the same order and six of them are byte-identical as served — ~338 KB of identical layout, component and motion CSS. The whole visible difference between them is the ~6 KB generated `theme.css` and which already-loaded face is named `--font-display`. Sections start at identical Y coordinates; type metrics agree to five decimal places. Jurassic Den's owner, 2026-08-17: "website too similar to frontier prime ... its copy paste frontier prime right now pretty much." He is right, and no further token swap fixes it — a token swap is what produced it. STRUCTURE has to become per-owner. ★★★★★ IT IS A PORT OF CRAFT, AND OF NOBODY'S IDENTITY. Read off the RENDERED Sequence pages (`lookcompare/seq_*_1440w_*.png` and `seq_navfit_20260815/OUT_live/navfit_live_{1440,390}.png`), never off the donor's source — `feedback_a_stylesheet_read_is_not_a_page_seen`. WHAT TRAVELLED — technique only: 1. THE ART IS THE GROUND, AT FULL STRENGTH, and translucent bordered panels sit on it. The donor's page is a photograph with instruments laid over it. This owner already has strong artwork and was hiding it under a 78% scrim; this is the single highest-leverage change here. 2. A hairline BEZEL, so the page reads as an instrument with an edge. 3. A full-width SEGMENTED TAB BAR — equal cells, 1px dividers, the active cell lit — instead of links floating on a bar. It WRAPS, never scrolls: `feedback_a_clipped_scroll_container_hides_navigation...`. 4. THE PANEL SIGNATURE: radius 0, 1px hairline, translucent dark fill, and a 3px inset rail down the left edge. 5. BIG DIM ORDINALS beside a tracked caps title, over a segmented rule — the donor's clearest single component device. 6. KEY:VALUE readings: dim label, bright value, never a decorated chip. 7. Wide POSITIVE tracking on caps; hierarchy from size, weight and tracking rather than from more typefaces. 8. Restraint in ambient motion, generosity in INTERACTION feedback. ★★★★★ WHAT WAS DELIBERATELY LEFT BEHIND — AND THE TRAP THAT MADE IT NECESSARY. The donor's identity is a SHELL: electric blue on near-black, the dripping wordmark, the neon city, `SEQUENCE@EVRIMA:~#`, the operator voice, GENOME / EXTRACTIONS / FLOOR. None of it is here. And there is a sharper trap than "do not copy the colours". This owner ALREADY SHARES A TERMINAL METAPHOR with the site he is trying to stop resembling — the house look is literally `terminal.css`, and both sites carry the `domain:~$ LABEL` prompt and the typewriter H1. Porting the donor's shell across would have given him a STRONGER version of the very metaphor that makes the two read alike, while also wearing the donor's identity: more Frontier-family, AND Sequence. That fails twice. So the terminal is DELETED here, not upgraded. Three specific tells go: the `:~$` prompt line, the typewriter H1, and the ◇ registration diamond that opens every section heading. The fourth — the bracketed mono nav wrapping to a second row — is replaced by the segmented bar above. The house look survives underneath as a component kit, which is what it is good at; it stops being the site's voice. ★★★★★ WHY IT IS SAFE FOR EVERY OTHER OWNER. Three independent guards: - not COPIED to a box unless that owner typed the key (assemble.py's `sheets` set); - not LINKED unless it was copied; and - every rule is scoped to `[data-site-theme="instrument"]`, an attribute assemble.py writes onto only for an owner who opted in — so the file paints nothing even if it were shipped by mistake. ★★★★ NO RAW COLOUR LITERALS and no `!important`. Colour comes from the owner's tokens (which is why this sheet needs no exemption from test_house_look.py), and where the house look out-specifies something the SELECTOR is raised, never hammered. Local names are `--in-*`. terminal.css's `--tm-*` and backdrop.css's `--atmos-*` are re-pointed or reused where they already say the right thing; both always load first. ========================================================================= */ /* ------------------------------------------------------------------------- 1. THE SCOPE ROOT — GEOMETRY, MEASURE, AND THE GROUND, ALL AT THE TOKEN ★★★★★ THE BIG MOVES ARE MADE BY RE-POINTING TOKENS, NOT BY OVERRIDING RULES. Every sheet in webcore already draws corners with `var(--r)`, sets its column with `var(--maxw)` and scrims the art with backdrop.css's `--atmos-*`. Re-pointing those here changes the ENTIRE site — every page, every component, including ones written after this file — in one block, with no shared sheet edited and nothing to keep in step. `html[data-site-theme=...]` is (0,1,1) and beats `:root` (0,1,0) outright, so this wins on specificity and not merely on order. ------------------------------------------------------------------------- */ html[data-site-theme="instrument"] { /* ---- geometry: nothing is rounded on an instrument ---- */ --r: 0px; --r-s: 0px; --r-xs: 0px; --r-lg: 0px; --r-pill: 0px; /* --r-round is left alone: it is 50% and it draws status dots and avatars, which are shapes rather than corners. A squared status dot reads as a stop, not a state. */ /* ---- the measure ---- ★ THE DONOR USES THE WHOLE FRAME. Its content runs ~33px to ~1408px at 1440 — edge to edge inside the bezel — while the house column is 1140 centred, which leaves 150px of dead ground down both sides and is a large part of why every owner's page has the same silhouette. Prose is NOT widened by this: terminal.css already caps reading copy at 64ch, so what the extra width buys is more columns in a grid and a page that fills its own chassis. */ --maxw: 1400px; /* ---- THE GROUND: THE ART COMES BACK ---- ★★★★★ backdrop.css scrims the owner's background art with these six tokens, at 78% / 54% / 20% / 93% / 96% / 60% of `--bg-deep`. At 78% over the reading bed the artwork is present in the DOM and invisible on the page — this owner's art was being paid for and thrown away. Halving the scrim is the single biggest visual change in this theme. ★★★★ AND THE TEXT DOES NOT MOVE ONTO THE PHOTOGRAPH. The other half of the donor's technique is that reading copy sits inside a PANEL with its own darker fill (section 5 below makes those fills heavier than the house ones for exactly this reason). Art strong on the ground, ink on a plate: lighten one without the other and the site becomes unreadable, which is why the two are written here as one decision. */ --atmos-read-core: color-mix(in srgb, var(--bg-deep) 40%, transparent); --atmos-read-mid: color-mix(in srgb, var(--bg-deep) 26%, transparent); --atmos-read-soft: color-mix(in srgb, var(--bg-deep) 8%, transparent); --atmos-bar: color-mix(in srgb, var(--bg-deep) 82%, transparent); --atmos-floor: color-mix(in srgb, var(--bg-deep) 72%, transparent); --atmos-corner: color-mix(in srgb, var(--bg-deep) 34%, transparent); --atmos-page-heavy: color-mix(in srgb, var(--bg-deep) 40%, transparent); --atmos-page-light: color-mix(in srgb, var(--bg-deep) 16%, transparent); --atmos-page-col: color-mix(in srgb, var(--bg-deep) 28%, transparent); /* ---- the bezel ---- */ --in-gap: 10px; /* frame inset from the viewport edge */ --in-line: var(--tm-hair); /* the hairline the whole theme draws with */ --in-line-lit: color-mix(in srgb, var(--edge-lit) 42%, transparent); /* The chassis edge is the outermost line on the page, so it is the strongest. At the panel hairline it measured correct in the DOM and was invisible in the capture; a frame you cannot see is not a frame. */ --in-frame: color-mix(in srgb, var(--edge-lit) 58%, transparent); /* ---- the plate ---- Heavier than the house card, because these now sit on a photograph instead of on near-black. Translucent, so the art still reads THROUGH them and the page stays one image rather than a stack of lids. */ --in-plate: color-mix(in srgb, var(--bg-deep) 78%, transparent); --in-plate-2: color-mix(in srgb, var(--surface) 72%, transparent); --in-rail: color-mix(in srgb, var(--accent) 34%, transparent); --in-rail-lit: var(--accent); --in-sink: color-mix(in srgb, var(--bg-deep) 86%, transparent); /* ---- the chrome voice: one label size, one tracking, everywhere ---- */ --in-label: 10.5px; --in-track: .2em; --in-track-wide: .3em; --in-cell-y: 11px; --in-cell-x: 13px; } /* THE GROUND BEHIND THE FRAME. */ [data-site-theme="instrument"] body { background-color: var(--bg-deep); } /* THE BEZEL. Fixed, so it stays at the edge of the viewport while the page scrolls under it — a chassis, not a rule that scrolls away. `pointer-events: none` so it can never eat a click. It sits above the sticky nav (z-nav 60) and the status rail (z-livebar 90) and below a modal (z-modal 120), because a dialog is a thing that comes OUT of the chassis. */ [data-site-theme="instrument"] body::before { content: ""; position: fixed; inset: var(--in-gap); border: 1px solid var(--in-frame); pointer-events: none; z-index: 95; } /* Registration ticks at the four corners of the frame, from one element and eight gradients so no extra node exists to be found by a script. */ [data-site-theme="instrument"] body::after { content: ""; position: fixed; inset: var(--in-gap); pointer-events: none; z-index: 96; background: linear-gradient(var(--edge-lit), var(--edge-lit)) 0 0 / 18px 1px, linear-gradient(var(--edge-lit), var(--edge-lit)) 0 0 / 1px 18px, linear-gradient(var(--edge-lit), var(--edge-lit)) 100% 0 / 18px 1px, linear-gradient(var(--edge-lit), var(--edge-lit)) 100% 0 / 1px 18px, linear-gradient(var(--edge-lit), var(--edge-lit)) 0 100% / 18px 1px, linear-gradient(var(--edge-lit), var(--edge-lit)) 0 100% / 1px 18px, linear-gradient(var(--edge-lit), var(--edge-lit)) 100% 100% / 18px 1px, linear-gradient(var(--edge-lit), var(--edge-lit)) 100% 100% / 1px 18px; background-repeat: no-repeat; } /* Content clears the frame: the gutter spaces it off the viewport edge, and the frame needs its own share on top of that. */ [data-site-theme="instrument"] .wrap { padding-inline: calc(var(--gut) + var(--in-gap)); } /* A fixed overlay prints on page one and lands mid-page after that; forced colours would paint the tick layer as a solid band. Both drop it. */ @media print { [data-site-theme="instrument"] body::before, [data-site-theme="instrument"] body::after { display: none; } } @media (forced-colors: active) { [data-site-theme="instrument"] body::after { display: none; } [data-site-theme="instrument"] body::before { border-color: CanvasText; } } /* ------------------------------------------------------------------------- 2. THE THREE TERMINAL TELLS, DELETED ★★★★★ THIS SECTION IS THE POINT OF THE WHOLE THEME AND IT REMOVES RATHER THAN ADDS. These three are what a person actually registers when they say two sites are the same, and they are all inherited furniture rather than this owner's own idea. Nothing here deletes COPY or a CONTROL: the prompt and the diamond are decorative pseudo-elements, and the typewriter is an entrance animation. Every word and every link survives. ------------------------------------------------------------------------- */ /* (a) THE SHELL PROMPT. terminal.css hangs `content: var(--prompt)` — the owner's own domain plus `:~$` — off the hero kicker on every owner's home page. It is the loudest single shared mannerism on the two sites. Raised to (0,3,2) because terminal.css writes it at (0,2,2). */ html[data-site-theme="instrument"] .hero .kicker::before { content: none; } /* Without the prompt the kicker is a lone tracked label, so it takes the same rule the section labels get and stops being a command line. */ html[data-site-theme="instrument"] .hero .kicker { font-family: var(--font-mono); font-size: var(--in-label); letter-spacing: var(--in-track-wide); text-transform: uppercase; color: var(--fg-mute); gap: 12px; } /* (b) THE TYPEWRITER H1. terminal.css clips the kicker and the h1 in with `tm-type` steps() under `html[data-wc-motion="on"]` (0,2,2). The heading arrives instead — the entrance engine still fades the section in, so nothing appears without motion; only the character-by-character reveal, which is the terminal's signature gesture, is gone. */ html[data-site-theme="instrument"][data-wc-motion="on"] .hero .kicker, html[data-site-theme="instrument"][data-wc-motion="on"] .hero h1 { animation: none; } /* …and the blinking block the typewriter types up to. A caret says a machine is waiting for input; this page is not a prompt. Same delete as the wordmark cursor below. */ html[data-site-theme="instrument"] .hero h1::after { content: none; } /* (c) THE REGISTRATION DIAMOND. A hollow square on its corner opening every section label, on both sites, on every page. The label and its rule stay; the mark goes. */ html[data-site-theme="instrument"] .eyebrow::before { content: none; } /* ★★★★★ (d) AND THE PROMPT AGAIN, ON THE OTHER NINE PAGES — THE ONE THIS THEME NEARLY SHIPPED WITH. terminal.css does NOT only put the shell prompt on the hero. It puts it on EVERY PAGE HEAD, from a different selector, at a specificity the theme prefix alone loses to: :is(.page-head, .sec-head:has(> .page-h1)) .eyebrow::before (0,3,2) The (0,2,2) rule above squares up against the plain `.eyebrow::before` and is beaten here. The home page therefore looked correct while `Shop` still opened `thejurassicden.com:~$ TRADING POST` and `Leaderboard` still opened `thejurassicden.com:~$ STANDINGS` — nine of the eleven pages, in the exact voice this theme exists to remove. It is the compound README_FRONTEND names as the reason "last wins" is not enough on its own, and it was invisible until an INTERIOR page was rendered. Matching the shape and adding the scope puts this at (0,4,2). */ html[data-site-theme="instrument"] :is(.page-head, .sec-head:has(> .page-h1)) .eyebrow::before { content: none; } /* With the prompt gone the page head's own furniture is re-voiced to the one language the rest of the theme uses: a full-measure hairline instead of a 150px dotted tick ladder, which on a ruled page read as a broken line. */ html[data-site-theme="instrument"] :is(.page-head, .sec-head:has(> .page-h1))::after { width: 100%; height: 1px; background: var(--in-line); } /* The bound-margin hairline is redundant beside the bezel and the plate rails, and on the un-scrimmed ground it reads as a stray mark. */ html[data-site-theme="instrument"] :is(.page-head, .sec-head:has(> .page-h1))::before { display: none; } /* ------------------------------------------------------------------------- 3. THE HEAD — IDENTITY PLATE, SEGMENTED TAB BAR, UTILITY PLATES ------------------------------------------------------------------------- */ [data-site-theme="instrument"] .nav { background-image: none; background-color: var(--in-sink); border-bottom: 1px solid var(--in-line); } /* ★★★★★ THE TWO-BAND HEAD IS DESKTOP-ONLY, AND THE BREAKPOINT IS 820 BECAUSE THAT IS WHERE THE DRAWER STARTS — not 860, not "about 850". site.css turns `.nav-links` into an ABSOLUTELY POSITIONED drawer at `max-width: 820px` and holds it shut with `display: none`, opening it only on `[data-open="true"]`. Two things follow, both learned from a render: - re-laying `.nav-in` as a grid must stop before that point, or the out-of-flow drawer takes a grid area as its containing block and `top: 100%` stops meaning what site.css wrote it to mean; and - this theme must NEVER set `display` on `.nav-links` unconditionally. An earlier draft did, at 860px, and the drawer stood permanently OPEN on every phone — eleven cells laid over the hero, the burger inert, the page under it unreadable. HTTP 200, no console error, suite green. The 390px capture is the only thing that found it. */ @media (min-width: 821px) { [data-site-theme="instrument"] .nav-in { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand . util" "tabs tabs tabs"; align-items: center; gap: 0 14px; padding-top: 10px; min-height: 0; } [data-site-theme="instrument"] .nav-links { grid-area: tabs; display: flex; flex-wrap: wrap; gap: 0; overflow: visible; margin-top: 10px; margin-inline: 0; border-top: 1px solid var(--in-line); border-left: 1px solid var(--in-line); padding: 0; /* ★ MEASURED, NOT ASSUMED. The bar came out 890px wide and centred in a 1360px track on the first render — something upstream leaves the item content-sized. Both halves are pinned rather than hunted: a bar that silently stops filling its band is the defect this theme is about. */ justify-self: stretch; width: 100%; } } /* THE IDENTITY PLATE. The mark is an object the chassis holds, not a picture floating on a bar. */ [data-site-theme="instrument"] .brand { gap: 10px; padding: 0; } [data-site-theme="instrument"] .brand { grid-area: brand; } [data-site-theme="instrument"] .brand img { border: 1px solid var(--in-line); background: var(--in-sink); padding: 3px; box-sizing: content-box; } [data-site-theme="instrument"] .brand-txt > b { font-family: var(--font-display); letter-spacing: .04em; } [data-site-theme="instrument"] .brand-txt > span { font-family: var(--font-mono); font-size: var(--in-label); letter-spacing: var(--in-track); text-transform: uppercase; color: var(--fg-mute); } /* The blinking block after the wordmark is the terminal cursor. Same delete as section 2 — an identity block is not a command line. */ html[data-site-theme="instrument"] .brand-cursor { display: none; } /* THE UTILITY PLATES: every control a bordered cell of one height, sharing hairlines with its neighbours. */ [data-site-theme="instrument"] .nav-util { grid-area: util; gap: 0; align-items: stretch; } [data-site-theme="instrument"] .nav-util > * { border: 1px solid var(--in-line); margin-left: -1px; display: flex; align-items: center; } [data-site-theme="instrument"] .nav-util > :first-child { margin-left: 0; } [data-site-theme="instrument"] .nav-cta { padding: 7px 11px; background: transparent; transition: background-color .14s ease, border-color .14s ease; } [data-site-theme="instrument"] .nav-cta:hover { background: var(--tm-faint); border-color: var(--in-line-lit); } [data-site-theme="instrument"] .nav-auth { border: 0; padding: 0; } [data-site-theme="instrument"] .nav-auth-btn { border: 1px solid var(--in-line); border-left: 0; padding: 7px 13px; background: var(--in-plate-2); font-family: var(--font-mono); font-size: var(--in-label); letter-spacing: var(--in-track); text-transform: uppercase; transition: background-color .14s ease, border-color .14s ease; } [data-site-theme="instrument"] .nav-auth-btn:hover { background: var(--tm-faint); border-color: var(--in-line-lit); } /* ★★★★★ THE SEGMENTED TAB BAR — the change that stops the page reading as the house template. Links stop being floating brackets and become equal cells sharing their dividers (-1px collapses the doubled hairline), the current one lit from its top edge. IT WRAPS, IT DOES NOT SCROLL. `flex-wrap: wrap` + `flex: 1 1 auto` + `min-width: 0` is the shape the fleet law demands: eleven cells fall to a second row rather than into an unreachable overflow. */ [data-site-theme="instrument"] .nav-links a { flex: 1 1 auto; min-width: 0; text-align: center; padding: var(--in-cell-y) var(--in-cell-x); border-right: 1px solid var(--in-line); border-bottom: 1px solid var(--in-line); border-radius: 0; font-family: var(--font-mono); font-size: var(--in-label); font-weight: 500; letter-spacing: var(--in-track); text-transform: uppercase; color: var(--fg-mute); background: transparent; position: relative; white-space: nowrap; /* generosity in interaction feedback — the half of the donor's motion budget that is worth having */ transition: background-color .14s ease, color .14s ease, box-shadow .14s ease; } /* ★ THE BRACKETS GO, AND THE SELECTOR IS RAISED RATHER THAN HAMMERED. terminal.css writes them from four selector shapes, the strongest being `.nav .nav-links a::before` at (0,2,2) — the same weight this theme's prefix alone reaches, and a tie is not a win worth relying on. Adding `.nav` puts these at (0,4,3). Measured: with the tie version every tab still read `[ HOME ]` inside its own cell. */ html[data-site-theme="instrument"] .nav .nav-links a::before, html[data-site-theme="instrument"] .nav .nav-links a::after, html[data-site-theme="instrument"] .nav .nav-links.grouped a::before, html[data-site-theme="instrument"] .nav .nav-links.grouped a::after { content: none; } [data-site-theme="instrument"] .nav-links a:hover { background: var(--tm-faint); color: var(--fg); } /* (0,3,1) — the weight of terminal.css's own current-tab rule, and later, so it lands. THREE signals, not one: a lit top edge, a weight step and a fill. Colour alone is not a signal this core is allowed to rely on. */ [data-site-theme="instrument"] .nav-links a[aria-current="page"], [data-site-theme="instrument"] .nav-links.grouped a[aria-current="page"] { color: var(--fg); font-weight: 700; background: var(--in-plate-2); box-shadow: inset 0 2px 0 var(--accent); } /* A grouped-nav hairline is redundant once every tab has its own edge. */ [data-site-theme="instrument"] .nav-links .nav-sep, [data-site-theme="instrument"] .nav-links .sep { display: none; } /* ------------------------------------------------------------------------- 4. THE SECTION GRAMMAR — LABEL, RULE, HEADING ------------------------------------------------------------------------- */ /* ★★★★★ `padding-block`, NEVER THE `padding` SHORTHAND. THIS ONE SHIPPED IN DRAFT AND CLIPPED EVERY PAGE AT EVERY WIDTH. A content section is `class="section wrap"` — it is BOTH. `.wrap` carries the reading gutter; `.section` carries the vertical rhythm. A `padding: 44px 0` here is (0,2,0) with the theme prefix, which TIES cinema.css's `.wrap.section` and lands later, so the shorthand's implied `0` for the inline axis won and the gutter went to zero on every section on every page. The hero kept its padding (it is `.hero.wrap`, not `.section`), so the top of the page looked right and everything below it sat 30px further left, outside the bezel on a phone. Nothing errored and nothing overflowed. Set ONE AXIS. terminal.css reaches for the block longhands here for the same reason. */ [data-site-theme="instrument"] .section { padding-block: 44px; } [data-site-theme="instrument"] .section + .section { padding-block-start: 0; } [data-site-theme="instrument"] .sec-head { margin-bottom: 18px; } [data-site-theme="instrument"] .page-head { margin-bottom: 20px; } [data-site-theme="instrument"] .eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: var(--in-label); letter-spacing: var(--in-track-wide); text-transform: uppercase; color: var(--fg-mute); } /* The rule runs out to the end of the measure. With the diamond deleted in section 2 this is the label's only ornament, and it is a ruled line rather than a mark — a measuring device, not a logo. */ [data-site-theme="instrument"] .eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--in-line); margin: 0; } [data-site-theme="instrument"] .sec-head h2, [data-site-theme="instrument"] .page-h1, [data-site-theme="instrument"] .page-h2 { font-family: var(--font-display); letter-spacing: -.005em; } /* THE HERO SITS ON THE PHOTOGRAPH. With the ground un-scrimmed the copy needs its own local shade, exactly as the donor's does — a soft one-sided wash under the text column, not a lid over the picture. */ [data-site-theme="instrument"] .hero-copy { position: relative; } [data-site-theme="instrument"] .hero-copy::before { content: ""; position: absolute; inset: -28px -48px -28px calc(var(--in-gap) * -4); background: linear-gradient(100deg, var(--bg-deep) 0%, color-mix(in srgb, var(--bg-deep) 82%, transparent) 46%, transparent 100%); /* ★ FEATHERED ON THE OTHER AXIS TOO. The horizontal gradient alone left a hard rectangular top and bottom edge sitting across the photograph, which reads as a mistake rather than as a plate. A mask fades the shade out where the copy ends, so the picture is never cut. A mask reads ALPHA only, so the colour in it is arbitrary — it is `currentColor` rather than a literal, because this sheet ships no colour literal and a mask is not the place to start. */ -webkit-mask-image: linear-gradient(180deg, transparent 0, currentColor 12%, currentColor 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, currentColor 12%, currentColor 86%, transparent 100%); z-index: -1; pointer-events: none; } /* ------------------------------------------------------------------------- 5. THE PLATE SIGNATURE — hairline, translucent dark fill, 3px inset rail The house card floats: a gradient face, a soft shadow, a gap on every side. The donor's panels are flat plates on a photograph, held by one hairline and marked on the left edge. Removing the float is most of the density; the rail is what makes a plate read as an instrument face rather than a box. ------------------------------------------------------------------------- */ [data-site-theme="instrument"] .card, [data-site-theme="instrument"] .feat, [data-site-theme="instrument"] .gate, [data-site-theme="instrument"] .cta-card, [data-site-theme="instrument"] .notice, [data-site-theme="instrument"] .panel, [data-site-theme="instrument"] .status { background-image: none; background-color: var(--in-plate); border: 1px solid var(--in-line); box-shadow: inset 3px 0 0 var(--in-rail); } /* An interactive plate lights its rail rather than lifting off the page. */ [data-site-theme="instrument"] .feat { transition: background-color .16s ease, box-shadow .16s ease; } [data-site-theme="instrument"] .feat:hover { background-color: var(--in-plate-2); box-shadow: inset 3px 0 0 var(--in-rail-lit); } /* The house look hangs a corner tick off ::after on these — the same mannerism as the bezel's registration marks, so it stays, re-pointed to the lit hairline so the whole site marks its corners with one colour. */ [data-site-theme="instrument"] .card::after, [data-site-theme="instrument"] .status::after, [data-site-theme="instrument"] .feat::after { border-color: var(--in-line-lit); } [data-site-theme="instrument"] .card h3, [data-site-theme="instrument"] .feat h3, [data-site-theme="instrument"] .gate h3 { font-family: var(--font-mono); font-size: var(--tm-h-item); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); } /* THE MATRIX. Cells share their hairlines instead of floating in gutters — the change that turns a page of tiles into one panel of readings. */ [data-site-theme="instrument"] .grid { gap: 0; border-top: 1px solid var(--in-line); border-left: 1px solid var(--in-line); counter-reset: cell; /* One rail for the whole matrix rather than one per cell: the matrix IS the plate here, and eleven rails inside one panel is a barcode. */ box-shadow: inset 3px 0 0 var(--in-rail); } [data-site-theme="instrument"] .grid > .feat, [data-site-theme="instrument"] .grid > .card { border-top: 0; border-left: 0; padding: 20px; box-shadow: none; /* one rail per matrix, not one per cell */ counter-increment: cell; } [data-site-theme="instrument"] .feat-ico { border: 1px solid var(--in-line); background: var(--in-sink); border-radius: 0; } /* ★★★★ THE BIG DIM ORDINAL. The donor's clearest component device: a large, quiet number beside a tracked caps title, over a segmented rule. It is drawn from a CSS counter, so it needs no markup, cannot go out of step with the cell order, and disappears with the cell if an owner switches a page off. `aria-hidden` is not available to a pseudo-element, but generated content of this kind is not announced as content by any current screen reader and the title beside it carries the meaning. */ [data-site-theme="instrument"] .grid > .feat > div > h3::before, [data-site-theme="instrument"] .grid > .card > h3::before { content: counter(cell, decimal-leading-zero); display: inline-block; margin-right: 12px; font-family: var(--font-mono); /* the interior heading scale, asked for by ROLE. terminal.css owns the four steps; there is no number to pick here and no nineteenth size invented. */ font-size: var(--tm-h-sec); font-weight: 400; letter-spacing: 0; color: var(--in-line-lit); vertical-align: -2px; } /* ------------------------------------------------------------------------- 6. CONTROLS A committing control stays FILLED and a quiet one stays outlined: the two-reds law carries the difference between actions in fill and shape, and squaring the corners must not quietly flatten that difference. ------------------------------------------------------------------------- */ [data-site-theme="instrument"] .btn { border-radius: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: var(--in-track); text-transform: uppercase; padding: 11px 20px; transition: background-color .14s ease, border-color .14s ease, color .14s ease; } /* ★ THE QUIET CONTROL STAYS READABLE ON A PHOTOGRAPH. Measured on the rendered page: a ghost button on a plate on the un-scrimmed ground came out as dim ink on a dark fill on a picture, and "Join the Discord" was close to invisible. A quiet control is quiet in FILL, never in legibility. */ [data-site-theme="instrument"] .btn-ghost { border-color: var(--in-line-lit); background-color: var(--in-plate); color: var(--fg); } [data-site-theme="instrument"] .btn-ghost:hover { border-color: var(--edge-lit); background-color: var(--in-plate-2); } /* The hero's actions become a butted set, like the utility plates. */ [data-site-theme="instrument"] .hero-cta { gap: 0; } [data-site-theme="instrument"] .hero-cta > .btn { margin-left: -1px; } [data-site-theme="instrument"] .hero-cta > .btn:first-child { margin-left: 0; } /* ------------------------------------------------------------------------- 7. READINGS — KEY dim, VALUE bright, never a decorated chip ------------------------------------------------------------------------- */ [data-site-theme="instrument"] .status-figs { gap: 0; border-top: 1px solid var(--in-line); } [data-site-theme="instrument"] .fig { border-left: 1px solid var(--in-line); padding: 16px 18px; } [data-site-theme="instrument"] .fig:first-child { border-left: 0; padding-left: 0; } [data-site-theme="instrument"] .fig b { font-family: var(--font-mono); letter-spacing: -.01em; color: var(--fg); } [data-site-theme="instrument"] .fig span, [data-site-theme="instrument"] .status-label, [data-site-theme="instrument"] .status-src { font-family: var(--font-mono); font-size: var(--in-label); letter-spacing: var(--in-track); text-transform: uppercase; color: var(--fg-mute); } [data-site-theme="instrument"] .status-top { border-bottom: 0; padding-bottom: 14px; } /* Ordinals on a numbered list take the same treatment as the matrix. */ [data-site-theme="instrument"] .steps > li::before { border-radius: 0; font-family: var(--font-mono); letter-spacing: .06em; color: var(--in-line-lit); } /* Any table on any page reads as an instrument readout. */ [data-site-theme="instrument"] table { border-collapse: collapse; } [data-site-theme="instrument"] th { font-family: var(--font-mono); font-size: var(--in-label); letter-spacing: var(--in-track); text-transform: uppercase; color: var(--fg-mute); border-bottom: 1px solid var(--in-line); } [data-site-theme="instrument"] td { border-bottom: 1px solid var(--tm-hair-soft); } /* ------------------------------------------------------------------------- 8. THE STATUS RAIL AND THE FOOT ★ THE RAIL IS `div#wc-livebar` AND CARRIES NO CLASS — read off the rendered DOM, after a `.wc-livebar` guess matched nothing at all and the rail alone kept the house look while everything around it changed. ------------------------------------------------------------------------- */ [data-site-theme="instrument"] #wc-livebar { border-top: 1px solid var(--in-line); background-color: var(--bg-deep); font-family: var(--font-mono); font-size: var(--in-label); letter-spacing: var(--in-track); text-transform: uppercase; /* inside the bezel, so the chassis stays closed */ inset-inline: var(--in-gap); bottom: var(--in-gap); width: auto; } [data-site-theme="instrument"] .foot { background-image: none; background-color: var(--in-sink); border-top: 1px solid var(--in-line); } [data-site-theme="instrument"] .foot-in { padding-block: 26px; } [data-site-theme="instrument"] .foot-links a { font-family: var(--font-mono); font-size: var(--in-label); letter-spacing: var(--in-track); text-transform: uppercase; } [data-site-theme="instrument"] .foot-legal { font-family: var(--font-mono); font-size: var(--in-label); } /* ------------------------------------------------------------------------- 9. THE PHONE ★★★★★ THE DRAWER KEEPS ITS BURGER AND ITS CLOSED STATE. `display` is set ONLY on `[data-open="true"]`, so site.css's `display: none` still shuts it and the control players already use behaves exactly as before (`feedback_a_redesign_must_not_repurpose_a_players_button`). The theme changes the drawer's SHAPE and nothing about its behaviour. ------------------------------------------------------------------------- */ @media (max-width: 820px) { [data-site-theme="instrument"] .nav-links[data-open="true"] { display: grid; grid-template-columns: repeat(2, 1fr); padding: 0; gap: 0; border-top: 1px solid var(--in-line); border-left: 0; /* OPAQUE, and from the deepest token rather than the nav scrim. With the ground art now at full strength an 0.98 scrim still let the hero read through the open menu in the 390 capture. A menu you can see the page through is a menu nobody can read. */ background-color: var(--bg-deep); background-image: none; } /* The desktop bar's stretch pins would fight an out-of-flow drawer. */ [data-site-theme="instrument"] .nav-links { width: auto; margin-top: 0; border-top: 0; border-left: 0; } [data-site-theme="instrument"] .nav-links a { text-align: left; white-space: normal; padding: 14px; font-size: 12px; border-right: 1px solid var(--in-line); border-bottom: 1px solid var(--in-line); } [data-site-theme="instrument"] .nav-util > * { margin-left: -1px; } [data-site-theme="instrument"] .wrap { padding-inline: calc(var(--gut) * .6 + var(--in-gap)); } /* A 10px bezel on a phone spends reading width on a line that does less at that size; it tightens rather than disappearing, so the chassis stays. */ html[data-site-theme="instrument"] { --in-gap: 5px; } [data-site-theme="instrument"] .section { padding-block: 30px; } /* A butted two-up matrix is a 150px column on a phone. One up. */ [data-site-theme="instrument"] .grid { border-left: 0; } [data-site-theme="instrument"] .grid > .feat, [data-site-theme="instrument"] .grid > .card { border-left: 0; border-right: 0; } /* Stacked actions overlap on the other axis. */ [data-site-theme="instrument"] .hero-cta > .btn { margin-left: 0; margin-top: -1px; } [data-site-theme="instrument"] .hero-cta > .btn:first-child { margin-top: 0; } /* Readings sit one per row, so the divider moves to the top edge: a left hairline on a full-width row is a stray mark. */ [data-site-theme="instrument"] .fig { border-left: 0; border-top: 1px solid var(--in-line); padding-left: 0; } [data-site-theme="instrument"] .fig:first-child { border-top: 0; } /* The hero wash covers the column rather than raking across it. */ [data-site-theme="instrument"] .hero-copy::before { inset: -20px -20px -20px -20px; background: linear-gradient(180deg, var(--bg-deep) 0%, color-mix(in srgb, var(--bg-deep) 86%, transparent) 70%, color-mix(in srgb, var(--bg-deep) 62%, transparent) 100%); } } /* The narrowest phones: one tab per row rather than two squeezed ones. */ @media (max-width: 400px) { [data-site-theme="instrument"] .nav-links[data-open="true"] { grid-template-columns: 1fr; } } /* ★ THE REDUCED-MOTION PASS IS NOT A SEPARATE DESIGN. Everything above that moves is a hover transition; nothing in this theme hides content behind an animation, so a reader who asks for less motion receives the same page with the same information. The one thing to say explicitly is that the deleted typewriter must stay deleted here too — it is switched off by the motion flag rather than by this query, so the rule in section 2 already covers both, and this block exists so the next reader does not add one. */ @media (prefers-reduced-motion: reduce) { [data-site-theme="instrument"] .nav-links a, [data-site-theme="instrument"] .btn, [data-site-theme="instrument"] .feat, [data-site-theme="instrument"] .nav-cta, [data-site-theme="instrument"] .nav-auth-btn { transition: none; } }