/* fracture.css — THE FRACTURE 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 and instrument.css for the first theme this one sits beside. DIRECTION CONTRACT (the one this sheet is audited against) --------------------------------------------------------------------------- THESIS: the first viewport is the island's LIVE SIGNAL, not a title card. A server site's first question is "is it up and who is on"; this theme answers it on a broadcast board standing beside the masthead, on the owner's own plate at full strength. It refuses the category default of centred logo, slogan, three same-size cards. OWN-WORLD: obsidian ground with the owner's plate lit through it; a condensed monumental display face in caps; plates cut at two opposite corners (shards, never rounded, never square); one hot hairline per plate; readings in mono; the accent is LIGHT (edges, figures, the scan bar) and never running ink. Every colour is a token: the owner's palette decides the hue, this sheet decides the structure. STORY: a player lands, reads the name and the offer in one line, sees the live count beside it, and opens the studio or the join steps. FIRST VIEWPORT: masthead left (name in display caps, the offer, three actions), the live board right (state lamp, feed tag, three readings, the note), the owner's plate behind everything and the only picture on the page (owner ruling 2026-08-22: the mark lives in the head lockup only); the primary action is the first button. FORM: "the signal board" — candidate 3 of the grounded list, assigned by the surface roll (seed key 0ce4b5c9, mode persuade). FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md. ★★★★★ WHY IT IS SAFE FOR EVERY OTHER OWNER. The same three guards the instrument theme stands on: the file is not COPIED to a box unless that owner typed the key (assemble.py's `sheets` set); it is not LINKED unless it was copied; and every rule is scoped to `[data-site-theme="fracture"]`, which assemble.py writes onto only for an owner who opted in. ★★★★ NO RAW COLOUR LITERALS and no `!important`. Where the house look out-specifies something the SELECTOR is raised, never hammered. Local names are `--fr-*`; terminal.css's `--tm-*` and backdrop.css's `--atmos-*` are re-pointed where they already say the right thing. ★★★★★ WHAT IT DELETES, like instrument.css, and one thing more. The `:~$` prompt (both selectors), the typewriter H1, the block cursor and the registration diamond go, for the reason instrument.css gives: they are the house terminal and every owner shares them. This theme ALSO removes the small tracked label above every heading (the hero kicker and the section eyebrows): on a page whose headings are set in a monumental face the label is a second, weaker voice saying the same thing. Nothing that carries a control, a number or a sentence is removed; only labels that repeat the heading beneath them. ========================================================================= */ /* ------------------------------------------------------------------------- 1. THE SCOPE ROOT — GEOMETRY, THE GROUND, AND THE LOCAL VOCABULARY `html[data-site-theme=...]` is (0,1,1) and beats `:root` (0,1,0) outright. ------------------------------------------------------------------------- */ html[data-site-theme="fracture"] { /* ---- geometry: nothing is rounded on a shard ---- */ --r: 0px; --r-s: 0px; --r-xs: 0px; --r-lg: 0px; --r-pill: 0px; /* --r-round stays 50%: status dots and avatars are circles. */ /* ---- the measure: wide, because the board and the masthead share a row ---- */ --maxw: 1320px; /* ---- the cut: two opposite corners, the shard signature ---- Written once as a token so every plate, button and well is cut by the same hand. `--fr-cut` is the depth of the cut; the polygon reads it. */ --fr-cut: 16px; --fr-cut-s: 8px; --fr-cut-lg: 30px; --fr-clip: polygon(var(--fr-cut) 0, 100% 0, 100% calc(100% - var(--fr-cut)), calc(100% - var(--fr-cut)) 100%, 0 100%, 0 var(--fr-cut)); --fr-clip-s: polygon(var(--fr-cut-s) 0, 100% 0, 100% calc(100% - var(--fr-cut-s)), calc(100% - var(--fr-cut-s)) 100%, 0 100%, 0 var(--fr-cut-s)); --fr-clip-lg: polygon(var(--fr-cut-lg) 0, 100% 0, 100% calc(100% - var(--fr-cut-lg)), calc(100% - var(--fr-cut-lg)) 100%, 0 100%, 0 var(--fr-cut-lg)); /* ---- THE GROUND: THE PLATE COMES THROUGH ---- backdrop.css scrims the owner's art with these tokens at 78% / 54% / 20% of --bg-deep. The plate IS this owner's identity, so the scrims drop to where the picture survives and the reading is bought on the plates instead (section 5 makes those fills heavier for exactly this reason). */ --atmos-read-core: color-mix(in srgb, var(--bg-deep) 34%, transparent); --atmos-read-mid: color-mix(in srgb, var(--bg-deep) 20%, transparent); --atmos-read-soft: color-mix(in srgb, var(--bg-deep) 6%, transparent); --atmos-bar: color-mix(in srgb, var(--bg-deep) 80%, transparent); --atmos-floor: color-mix(in srgb, var(--bg-deep) 62%, transparent); --atmos-corner: color-mix(in srgb, var(--bg-deep) 28%, transparent); --atmos-page-heavy: color-mix(in srgb, var(--bg-deep) 36%, transparent); --atmos-page-light: color-mix(in srgb, var(--bg-deep) 12%, transparent); --atmos-page-col: color-mix(in srgb, var(--bg-deep) 24%, transparent); /* ---- lines ---- */ --fr-line: color-mix(in srgb, var(--edge-lit) 24%, transparent); --fr-line-lit: color-mix(in srgb, var(--edge-lit) 46%, transparent); --fr-line-hot: color-mix(in srgb, var(--accent) 58%, transparent); /* ---- the plates: heavier than the house card, because they sit on a picture; translucent, so the plate still reads through ---- */ --fr-plate: color-mix(in srgb, var(--bg-deep) 84%, transparent); --fr-plate-2: color-mix(in srgb, var(--surface) 76%, transparent); --fr-glass: color-mix(in srgb, var(--bg-deep) 66%, transparent); --fr-well: color-mix(in srgb, var(--bg-deep) 92%, transparent); --fr-hover: color-mix(in srgb, var(--accent) 7%, transparent); /* ---- the light: the accent is what things are LIT by ---- */ --fr-hot: color-mix(in srgb, var(--accent) 78%, transparent); --fr-cold: color-mix(in srgb, var(--fg) 34%, transparent); --fr-bloom: color-mix(in srgb, var(--accent) 30%, transparent); --fr-bloom-soft: color-mix(in srgb, var(--accent) 12%, transparent); /* ---- the chrome voice ---- */ --fr-label: 10.5px; --fr-track: .16em; --fr-track-wide: .26em; } [data-site-theme="fracture"] body { background-color: var(--bg-deep); } /* THE SIGNAL EDGE. One hot hairline across the top of the viewport, fixed, above the sticky nav: the chassis is lit from one edge and the page hangs off it. pointer-events none so it can never take a click. Above the nav (z-nav 60) and the rail (90), below a modal (120). */ [data-site-theme="fracture"] body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--accent) 18%, var(--accent-hi) 50%, var(--accent) 82%, transparent 100%); } /* terminal.css hangs a vignette off body::after above the content. It stays (it is light, not geometry) but it is re-lit from the owner's deep colour at a slightly stronger corner, so the plate's edges fall off into black. */ [data-site-theme="fracture"] body::after { background: radial-gradient(128% 112% at 50% 34%, transparent 0 58%, color-mix(in srgb, var(--bg-deep) 34%, transparent) 100%); } @media print { [data-site-theme="fracture"] body::before, [data-site-theme="fracture"] body::after { display: none; } } @media (forced-colors: active) { [data-site-theme="fracture"] body::before { background: CanvasText; } [data-site-theme="fracture"] body::after { display: none; } } /* ------------------------------------------------------------------------- 2. THE HOUSE TELLS, DELETED ------------------------------------------------------------------------- */ /* (a) the hero kicker — the prompt rides it, and the label itself is the second voice this theme removes. Raised past terminal's (0,2,2). */ html[data-site-theme="fracture"] .hero .kicker { display: none; } html[data-site-theme="fracture"] .hero .kicker::before { content: none; } /* (b) the typewriter and the block cursor. The heading gets the theme's one authored entrance instead (section 10); the caret says a machine waits for input and this page is not a prompt. */ html[data-site-theme="fracture"] .hero h1::after { content: none; } html[data-site-theme="fracture"] .brand-cursor { display: none; } /* (c) the registration diamond, and the eyebrow it opens. Every section head and page head loses its small label; the heading carries the weight. The interior-page prompt selector is matched at its own shape so it is beaten at (0,4,2), the trap README_FRONTEND records. */ html[data-site-theme="fracture"] .eyebrow { display: none; } html[data-site-theme="fracture"] .eyebrow::before { content: none; } html[data-site-theme="fracture"] :is(.page-head, .sec-head:has(> .page-h1)) .eyebrow::before { content: none; } /* (d) the register's corner ticks and the chiselled top edge on every plate. This theme's plates are cut, not ticked. `.status::before` is NOT in this list: section 6 redraws it as the board's scan bar. */ html[data-site-theme="fracture"] :is(.card, .feat, .cas-card, .studio-card, .step)::after, html[data-site-theme="fracture"] .status::after, html[data-site-theme="fracture"] .feat::before, html[data-site-theme="fracture"] .card::before { content: none; } /* (e) the house ground's own light pool under main. The plate is the ground here and a second pool on top of it reads as a smudge. */ html[data-site-theme="fracture"] main::before { display: none; } /* ------------------------------------------------------------------------- 3. THE HEAD — lockup, links, utility shards ------------------------------------------------------------------------- */ [data-site-theme="fracture"] .nav { background-image: none; background-color: var(--fr-glass); border-bottom: 1px solid var(--fr-line); box-shadow: none; } [data-site-theme="fracture"] .nav-in { min-height: 66px; gap: 18px; } [data-site-theme="fracture"] .brand { gap: 12px; } [data-site-theme="fracture"] .brand img { width: 40px; height: 40px; border-radius: 0; filter: drop-shadow(0 0 6px var(--fr-bloom)); } [data-site-theme="fracture"] .brand-txt > b { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; } [data-site-theme="fracture"] .brand-txt > span { font-family: var(--font-mono); font-size: var(--fr-label); letter-spacing: var(--fr-track); text-transform: uppercase; color: var(--fg-mute); margin-top: 3px; } /* THE LINKS. Tracked caps, no brackets; the current page is said three ways: full ink, weight, and a lit bar under the word. */ [data-site-theme="fracture"] .nav-links { gap: 4px; } [data-site-theme="fracture"] .nav-links a, [data-site-theme="fracture"] .nav-links.grouped a { padding: 10px 12px; border-radius: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: var(--fr-track); text-transform: uppercase; color: var(--fg-dim); background: transparent; position: relative; transition: color .14s ease, background-color .14s ease; } html[data-site-theme="fracture"] .nav .nav-links a::before, html[data-site-theme="fracture"] .nav .nav-links a::after, html[data-site-theme="fracture"] .nav .nav-links.grouped a::before, html[data-site-theme="fracture"] .nav .nav-links.grouped a::after { content: none; } [data-site-theme="fracture"] .nav-links a:hover { color: var(--fg); background: var(--fr-hover); } [data-site-theme="fracture"] .nav-links a[aria-current="page"], [data-site-theme="fracture"] .nav-links.grouped a[aria-current="page"] { color: var(--fg); font-weight: 700; background: transparent; box-shadow: inset 0 -2px 0 var(--accent); } [data-site-theme="fracture"] .nav-links .sep { display: none; } /* THE UTILITY SHARDS. Every control a cut plate of one height. */ [data-site-theme="fracture"] .nav-util { gap: 8px; } [data-site-theme="fracture"] .nav-cta, [data-site-theme="fracture"] .nav-auth-btn, [data-site-theme="fracture"] .nav-chip { border: 1px solid var(--fr-line-lit); border-radius: 0; background: var(--fr-glass); clip-path: var(--fr-clip-s); transition: background-color .14s ease, border-color .14s ease, color .14s ease; } [data-site-theme="fracture"] .nav-cta { padding: 8px 11px; } [data-site-theme="fracture"] .nav-auth-btn { padding: 8px 13px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: var(--fr-track); text-transform: uppercase; } [data-site-theme="fracture"] .nav-cta:hover, [data-site-theme="fracture"] .nav-auth-btn:hover, [data-site-theme="fracture"] .nav-chip:hover { background: var(--fr-hover); border-color: var(--accent); transform: none; } [data-site-theme="fracture"] .nav-util .wc-aud-btn { border: 1px solid var(--fr-line-lit); border-radius: 0; background: var(--fr-glass); clip-path: var(--fr-clip-s); color: var(--fg-dim); } [data-site-theme="fracture"] .nav-util .wc-aud-btn:hover { border-color: var(--accent); color: var(--fg); background: var(--fr-hover); } [data-site-theme="fracture"] .nav-menu { border-radius: 0; border: 1px solid var(--fr-line-lit); background: var(--bg-deep); } /* ------------------------------------------------------------------------- 4. THE FIRST VIEWPORT — THE MASTHEAD AND THE BOARD ON ONE ROW ★★★★★ `main` becomes the column and the grid; its sections give up their own `.wrap` measure. The hero takes the left cell, the live-status section takes the right cell of the same row, and every other section spans both. The DOM is untouched and still reads in order: name, offer, actions, then the live readings, then how to join. Scoped to a main that actually opens with a hero, so a page with its own layout (the map) is never re-gridded. */ @media (min-width: 981px) { [data-site-theme="fracture"] main:has(> .hero) { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); align-items: center; } [data-site-theme="fracture"] main:has(> .hero) > .wrap { max-width: none; margin-inline: 0; padding-inline: 0; width: auto; } [data-site-theme="fracture"] main:has(> .hero) > * { grid-column: 1 / -1; } [data-site-theme="fracture"] main:has(> .hero) > .hero { grid-column: 1; grid-row: 1; } [data-site-theme="fracture"] main:has(> .hero) > .section:has(#status-card) { grid-column: 2; grid-row: 1; padding-block: clamp(40px, 8vh, 96px) 0; position: relative; z-index: 1; } } /* backdrop.css paints a vertical page scrim onto main; with main narrowed to the measure that scrim would end at the column's edge and draw a seam. The plates carry their own reading bed, so the page scrim goes. */ html[data-site-theme="fracture"] .night[data-atmos] ~ main { background-image: none; } /* THE HERO: held to the first screen, optically centred, no flex. */ [data-site-theme="fracture"] .hero { min-height: clamp(420px, 66vh, 720px); display: flex; align-items: center; padding-block: clamp(28px, 5vh, 64px) clamp(28px, 4vh, 48px); position: relative; } [data-site-theme="fracture"] .hero-grid { display: block; } [data-site-theme="fracture"] .hero-copy, [data-site-theme="fracture"] .hero-grid > :not(.hero-art) { max-width: none; position: relative; z-index: 2; } /* THE MASTHEAD. The display face at monument scale, in the page ink, with a chromatic split behind it that the plate's own scan streaks already make. The name stacks on two lines on purpose: a short measure turns two words into a block rather than a line. */ [data-site-theme="fracture"] .hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 10.2vw, 156px); line-height: .88; letter-spacing: .012em; text-transform: uppercase; color: var(--fg); max-width: 9ch; text-wrap: balance; text-shadow: 3px 0 0 var(--fr-hot), -3px 0 0 var(--fr-cold), 0 0 42px var(--fr-bloom-soft); } [data-site-theme="fracture"] .hero .lede { margin-top: clamp(18px, 2.2vw, 28px); max-width: 52ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.58; color: var(--ink-2); text-shadow: 0 1px 2px var(--veil-deep); } [data-site-theme="fracture"] .hero-cta { margin-top: clamp(24px, 3vw, 40px); padding-top: 0; border-top: 0; gap: 10px; } /* THE HERO ART, IF AN OWNER SHIPS ONE. With `theme.hero_banner: true` the owner's banner leaves the grid and stands behind the seam between the masthead and the board, lit from its own colour, alt text and DOM place kept; the cinema feather and crossing veil (for photographs) are off. ★ Paleo Passage ships `hero_banner: false` (owner ruling 2026-08-22: the mark is the head lockup only, the plate is the only picture), so on that site this block paints nothing - the region is not even emitted. */ [data-site-theme="fracture"] .hero-art { position: absolute; z-index: 0; top: 50%; right: clamp(-190px, -13vw, -70px); translate: 0 -50%; width: clamp(360px, 36vw, 600px); max-width: none; margin: 0; overflow: visible; justify-self: auto; pointer-events: none; display: var(--hero-art-display, block); } [data-site-theme="fracture"] .hero-art img { -webkit-mask-image: none; mask-image: none; border-radius: 0; filter: drop-shadow(0 0 28px var(--fr-bloom)) drop-shadow(0 14px 30px var(--veil-deep)); } [data-site-theme="fracture"] .hero-art::before { inset: 6% 4%; border-radius: 50%; background: radial-gradient(circle at 50% 48%, var(--fr-bloom) 0%, transparent 62%); filter: blur(54px); opacity: 1; } [data-site-theme="fracture"] .hero-art::after { display: none; } /* ------------------------------------------------------------------------- 5. THE PLATE SIGNATURE — cut corners, one hairline, a reading bed ------------------------------------------------------------------------- */ [data-site-theme="fracture"] .card:not(.studio-card), [data-site-theme="fracture"] .gate, [data-site-theme="fracture"] .cta-card, [data-site-theme="fracture"] .notice, [data-site-theme="fracture"] .panel, [data-site-theme="fracture"] .status { background-image: none; background-color: var(--fr-plate); border: 1px solid var(--fr-line); border-radius: 0; box-shadow: none; clip-path: var(--fr-clip); } [data-site-theme="fracture"] .gate { border-style: solid; background-color: var(--fr-glass); } /* The cut scales with the plate: a 16px notch reads on a tag and vanishes on a 550px board. Wide plates take the large cut on wide screens. */ @media (min-width: 981px) { [data-site-theme="fracture"] .status, [data-site-theme="fracture"] .card:not(.studio-card), [data-site-theme="fracture"] .cta-card, [data-site-theme="fracture"] .gate { clip-path: var(--fr-clip-lg); } } [data-site-theme="fracture"] .card:not(.studio-card) { padding: 26px 28px; } /* the studio's three panels and the live card keep their own layout and their popovers; they take the plate fill and the hairline only */ [data-site-theme="fracture"] .studio-card, [data-site-theme="fracture"] .lvc-card, [data-site-theme="fracture"] .deck, [data-site-theme="fracture"] .channels, [data-site-theme="fracture"] .stage { background-image: none; background-color: var(--fr-plate); border-color: var(--fr-line); border-radius: 0; box-shadow: none; } [data-site-theme="fracture"] .card h3, [data-site-theme="fracture"] .gate h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: .03em; text-transform: uppercase; color: var(--fg); } /* ------------------------------------------------------------------------- 6. THE BOARD — the live status card as a broadcast readout ------------------------------------------------------------------------- */ [data-site-theme="fracture"] .status { padding: 26px 28px 24px; position: relative; background-color: var(--fr-well); } /* THE SCAN BAR. The board's top edge is the one place the accent is a fill: a lit strip the readings hang from. Drawn on the ::before terminal.css used for its chisel, so nothing new exists in the DOM. */ [data-site-theme="fracture"] .status::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent-hi), var(--accent) 55%, transparent); opacity: .92; } [data-site-theme="fracture"] .status-top { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--fr-line); gap: 12px; } [data-site-theme="fracture"] .status-label { font-family: var(--font-display); font-weight: 400; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); } [data-site-theme="fracture"] .status-src { border: 1px solid var(--fr-line-lit); border-radius: 0; clip-path: var(--fr-clip-s); background: var(--fr-glass); color: var(--accent-hi); font-size: var(--fr-label); letter-spacing: var(--fr-track); padding: 6px 10px; } [data-site-theme="fracture"] .dot { width: 11px; height: 11px; } /* THE READINGS. The figure is the loudest thing on the board and it is set in the display face; the first reading is the island's head count, which IS the signal, so it alone takes the accent. Labels are tracked caps. */ [data-site-theme="fracture"] .status-figs { gap: 0; border-top: 0; grid-template-columns: 1.3fr 1fr 1fr; } /* Two readings (no map figure) get two columns - the house rule, re-stated at the theme's weight so the third column is never an empty third. */ [data-site-theme="fracture"] .status-figs:has(.fig:nth-child(2):last-child) { grid-template-columns: 1.45fr 1fr; } [data-site-theme="fracture"] .fig { padding: 6px 16px 6px 0; border-left: 1px solid var(--fr-line); padding-left: 16px; } [data-site-theme="fracture"] .fig:first-child { border-left: 0; padding-left: 0; } [data-site-theme="fracture"] .fig b { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: .92; letter-spacing: .01em; color: var(--fg); font-variant-numeric: tabular-nums; } [data-site-theme="fracture"] .fig:first-child b { color: var(--accent-hi); text-shadow: 0 0 22px var(--fr-bloom); } [data-site-theme="fracture"] .fig span { margin-top: 8px; font-family: var(--font-ui); font-size: var(--fr-label); font-weight: 700; letter-spacing: var(--fr-track-wide); text-transform: uppercase; color: var(--fg-mute); } [data-site-theme="fracture"] .status-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fr-line); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--fg-mute); } /* ------------------------------------------------------------------------- 7. THE SECTION GRAMMAR — a monumental heading on a ruled edge ------------------------------------------------------------------------- */ [data-site-theme="fracture"] .section { padding-block: clamp(44px, 7vh, 84px); } [data-site-theme="fracture"] .section + .section { padding-block-start: 0; } [data-site-theme="fracture"] .sec-head { margin-bottom: 26px; } [data-site-theme="fracture"] .sec-head h2, [data-site-theme="fracture"] .page-h1, [data-site-theme="fracture"] .page-h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; line-height: .94; color: var(--fg); } [data-site-theme="fracture"] .sec-head h2 { font-size: clamp(34px, 4.8vw, 64px); } /* The board's own heading is a step under the section scale: it labels one instrument, and at section scale it broke "RIGHT / NOW" over two lines beside the masthead. */ [data-site-theme="fracture"] .section:has(#status-card) .sec-head h2 { font-size: clamp(24px, 2.6vw, 38px); } [data-site-theme="fracture"] .section:has(#status-card) .sec-head { margin-bottom: 18px; } [data-site-theme="fracture"] .page-h1 { font-size: clamp(44px, 6.4vw, 88px); } [data-site-theme="fracture"] .page-h2 { font-size: clamp(30px, 4vw, 52px); } [data-site-theme="fracture"] .sec-head p { margin-top: 12px; font-size: 16.5px; max-width: 58ch; color: var(--ink-2); } /* The heading stands on a hairline with one lit segment at its head: the same edge the board hangs from, at heading scale. */ [data-site-theme="fracture"] .sec-head h2, [data-site-theme="fracture"] .page-h1 { position: relative; padding-bottom: 14px; border-bottom: 1px solid var(--fr-line); } [data-site-theme="fracture"] .sec-head h2::after, [data-site-theme="fracture"] .page-h1::after { content: ""; position: absolute; left: 0; bottom: -1px; width: clamp(64px, 8vw, 120px); height: 3px; background: linear-gradient(90deg, var(--accent-hi), var(--accent)); } /* cinema/terminal give the page head a rule, a tick ladder and a margin hairline of their own; the heading now carries the rule itself. */ html[data-site-theme="fracture"] :is(.page-head, .sec-head:has(> .page-h1)) { border-bottom: 0; padding-bottom: 0; } html[data-site-theme="fracture"] :is(.page-head, .sec-head:has(> .page-h1))::after, html[data-site-theme="fracture"] :is(.page-head, .sec-head:has(> .page-h1))::before { display: none; } [data-site-theme="fracture"] .sec-head:not(.page-head):not(:has(> .page-h1)) { border-bottom: 0; } /* ------------------------------------------------------------------------- 8. CONTROLS — cut plates; the committing control is the filled one The two-reds law is carried in fill and shape: the primary is a filled plate in the accent, the quiet one is outlined glass, and the destructive one keeps site.css's own plate, mark and words. ------------------------------------------------------------------------- */ [data-site-theme="fracture"] .btn { border-radius: 0; clip-path: var(--fr-clip-s); font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: var(--fr-track); text-transform: uppercase; padding: 14px 22px; box-shadow: none; transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease; } [data-site-theme="fracture"] .btn-primary { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--on-primary); } [data-site-theme="fracture"] .btn-primary:hover { background: color-mix(in srgb, var(--accent-hi) 82%, var(--fg)); border-color: color-mix(in srgb, var(--accent-hi) 82%, var(--fg)); } [data-site-theme="fracture"] .btn-ghost { border-color: var(--fr-line-lit); background-color: var(--fr-glass); color: var(--fg); } [data-site-theme="fracture"] .btn-ghost:hover { border-color: var(--accent); background-color: var(--fr-hover); } [data-site-theme="fracture"] .btn-danger { clip-path: var(--fr-clip-s); } [data-site-theme="fracture"] .btn-sm { padding: 9px 14px; font-size: 11px; } /* ------------------------------------------------------------------------- 9. THE LEDGER, THE STEPS, THE CALL The feature tiles stop being three same-size cards and become one ledger: full-width rows on hairlines, the glyph in a cut well, the title in the display face, the copy beside it. Three rows of the same grammar read as a specification, which is what they are. ------------------------------------------------------------------------- */ [data-site-theme="fracture"] .grid.grid-3 { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--fr-line); } [data-site-theme="fracture"] .feat { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px 0; background: none; border: 0; border-bottom: 1px solid var(--fr-line); border-radius: 0; box-shadow: none; transition: background-color .16s ease; } [data-site-theme="fracture"] .feat:hover { transform: none; border-color: var(--fr-line); background-color: var(--fr-hover); box-shadow: none; } [data-site-theme="fracture"] .feat > div { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.6fr); column-gap: 28px; align-items: baseline; } [data-site-theme="fracture"] .feat > div > .feat-cmd { grid-column: 2; } [data-site-theme="fracture"] .feat-ico { width: 56px; height: 56px; border: 1px solid var(--fr-line-lit); border-radius: 0; clip-path: var(--fr-clip-s); background: var(--fr-glass); color: var(--accent-hi); box-shadow: none; transition: border-color .16s ease, background-color .16s ease; } [data-site-theme="fracture"] .feat:hover .feat-ico { border-color: var(--accent); background: var(--fr-well); } [data-site-theme="fracture"] .feat-ico svg { width: 22px; height: 22px; } [data-site-theme="fracture"] .feat h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: .03em; text-transform: uppercase; color: var(--fg); } [data-site-theme="fracture"] .feat p { margin-top: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; } /* THE STEPS. The ordinal is a cut well in the display face; the sequence carries information here, so the numbers stay. */ [data-site-theme="fracture"] .steps li { padding: 2px 0 22px 52px; font-size: 15.5px; color: var(--ink-2); } [data-site-theme="fracture"] .steps li::before { width: 34px; height: 34px; top: -4px; border-radius: 0; clip-path: var(--fr-clip-s); background: var(--fr-glass); border: 1px solid var(--fr-line-lit); box-shadow: none; font-family: var(--font-display); font-size: 16px; font-weight: 400; color: var(--accent-hi); } [data-site-theme="fracture"] .steps li:not(:last-child)::after { left: 17px; top: 32px; bottom: 4px; background: linear-gradient(180deg, var(--fr-line-lit), transparent); } [data-site-theme="fracture"] .steps li b, [data-site-theme="fracture"] .steps li [data-server-name] { color: var(--fg); font-weight: 700; } /* THE CALL. The community card becomes a full-measure band with the scan bar, the heading at section scale, and one filled action. */ [data-site-theme="fracture"] .cta-card { position: relative; padding: clamp(44px, 7vw, 84px) 24px clamp(40px, 6vw, 72px); background-color: var(--fr-plate); background-image: radial-gradient(80% 120% at 50% 120%, var(--fr-bloom-soft), transparent 70%); } /* One scan bar on the site, and it is the board's. The call carries a hot hairline instead: the same light, at hairline weight, so the device that marks the live instrument is not repeated on a card that is not one. */ [data-site-theme="fracture"] .cta-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--fr-line-hot) 30%, var(--accent) 50%, var(--fr-line-hot) 70%, transparent); } [data-site-theme="fracture"] .cta-card h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5.4vw, 76px); letter-spacing: .02em; text-transform: uppercase; line-height: .92; max-width: 14ch; margin-inline: auto; text-wrap: balance; } [data-site-theme="fracture"] .cta-card p { font-size: 16.5px; max-width: 56ch; } /* THE NOTICE. A plate with the warn colour on its glyph only. */ [data-site-theme="fracture"] .notice { padding: 18px 20px; font-size: 14.5px; background-color: var(--fr-glass); } [data-site-theme="fracture"] .notice b { font-family: var(--font-ui); font-weight: 700; letter-spacing: .02em; } /* ------------------------------------------------------------------------- 10. MOTION — one authored moment, gated The masthead arrives through a glitch: three slices jump, the chromatic split overshoots, the word settles. Once, on load, only when the motion engine has armed the page, never for a reader who asked for less motion. The board's scan bar breathes slowly; it is the only thing that loops. ------------------------------------------------------------------------- */ @keyframes fr-glitch { 0% { clip-path: inset(0 0 0 0); translate: 0 0; text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent; } 6% { clip-path: inset(8% 0 64% 0); translate: -7px 0; text-shadow: -8px 0 0 var(--fr-hot), 8px 0 0 var(--fr-cold), 0 0 0 transparent; } 10% { clip-path: inset(58% 0 6% 0); translate: 6px 0; } 14% { clip-path: inset(0 0 0 0); translate: 0 0; text-shadow: 3px 0 0 var(--fr-hot), -3px 0 0 var(--fr-cold), 0 0 42px var(--fr-bloom-soft); } 34% { clip-path: inset(30% 0 44% 0); translate: -4px 0; text-shadow: 6px 0 0 var(--fr-hot), -6px 0 0 var(--fr-cold), 0 0 42px var(--fr-bloom-soft); } 38% { clip-path: inset(0 0 0 0); translate: 0 0; } 100% { clip-path: inset(0 0 0 0); translate: 0 0; text-shadow: 3px 0 0 var(--fr-hot), -3px 0 0 var(--fr-cold), 0 0 42px var(--fr-bloom-soft); } } @keyframes fr-scan { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } /* THE PAGE CUT. motion.css already runs a cross-document view transition (a 140/260ms fade) for every owner. This theme re-voices the root's two halves in its own gesture: the leaving page tears out in three stepped slices with a sideways kick, the arriving page slices in and settles. The nav and the live rail keep their own transition names, so they stay put while the document cuts. Under reduced motion motion.css sets `navigation: none` and none of this runs. */ @keyframes fr-vt-out { 0% { opacity: 1; clip-path: inset(0 0 0 0); translate: 0 0; } 40% { opacity: .9; clip-path: inset(12% 0 48% 0); translate: -6px 0; } 100% { opacity: 0; clip-path: inset(0 0 0 0); translate: 4px 0; } } @keyframes fr-vt-in { 0% { opacity: 0; clip-path: inset(40% 0 20% 0); translate: 6px 0; } 45% { opacity: 1; clip-path: inset(0 0 0 0); translate: -3px 0; } 100% { opacity: 1; clip-path: inset(0 0 0 0); translate: 0 0; } } html[data-site-theme="fracture"]::view-transition-old(root) { animation: fr-vt-out 150ms steps(3, end) both; } html[data-site-theme="fracture"]::view-transition-new(root) { animation: fr-vt-in 220ms steps(4, end) both; } html[data-site-theme="fracture"][data-wc-motion="on"] .hero .kicker { animation: none; } html[data-site-theme="fracture"][data-wc-motion="on"] .hero h1 { animation: fr-glitch 1.25s steps(1, end) .15s both; } /* ...and only while the feed is LIVE (the dot carries `on`): a live indicator breathing over a dead feed would say something untrue. */ html[data-site-theme="fracture"][data-wc-motion="on"] .status:has(.dot.on)::before { animation: fr-scan 5.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { html[data-site-theme="fracture"][data-wc-motion="on"] .hero h1, html[data-site-theme="fracture"][data-wc-motion="on"] .status::before { animation: none; } [data-site-theme="fracture"] .nav-links a, [data-site-theme="fracture"] .btn, [data-site-theme="fracture"] .feat, [data-site-theme="fracture"] .feat-ico, [data-site-theme="fracture"] .nav-cta, [data-site-theme="fracture"] .nav-auth-btn { transition: none; } } /* ------------------------------------------------------------------------- 11. THE RAIL AND THE FOOT ------------------------------------------------------------------------- */ [data-site-theme="fracture"] #wc-livebar { background-color: var(--fr-glass); border-top: 1px solid var(--fr-line); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } [data-site-theme="fracture"] .foot { margin-top: clamp(56px, 9vh, 110px); background-image: none; background-color: var(--bg-deep); border-top: 1px solid var(--fr-line); box-shadow: none; padding: 40px 0 32px; } /* ★ THE MARK APPEARS ONCE, IN THE HEAD LOCKUP (owner ruling 2026-08-22: "P should be as a logo only on the top left server name"). site.css draws the mark again as a footer watermark and beside the footer name; both go, so the plate is the only picture on the page and the logo is the one in the corner. The footer keeps the name and the domain. */ [data-site-theme="fracture"] .foot::before { display: none; } [data-site-theme="fracture"] .foot-brand img { display: none; } [data-site-theme="fracture"] .foot-brand b { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; } [data-site-theme="fracture"] .foot-brand span { font-family: var(--font-mono); font-size: 12px; } [data-site-theme="fracture"] .foot-links a { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: var(--fr-track); text-transform: uppercase; } [data-site-theme="fracture"] .foot-legal { border-top: 1px solid var(--fr-line); font-family: var(--font-mono); font-size: 11.5px; } /* ------------------------------------------------------------------------- 12. THE STUDIO AND THE LIVE PAGE — the same hand, lightly These pages keep their own working layout; only the chrome is re-voiced. ------------------------------------------------------------------------- */ [data-site-theme="fracture"] .studio-tabs { border-radius: 0; clip-path: var(--fr-clip-s); border-color: var(--fr-line-lit); background: var(--fr-glass); } [data-site-theme="fracture"] .studio-tabs [role="tab"] { border-radius: 0; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: var(--fr-track); text-transform: uppercase; } [data-site-theme="fracture"] .studio-tabs [role="tab"][aria-selected="true"] { background: var(--fr-well); box-shadow: inset 0 -2px 0 var(--accent); } [data-site-theme="fracture"] .preset, [data-site-theme="fracture"] .chip, [data-site-theme="fracture"] .pill { border-radius: 0; } [data-site-theme="fracture"] .stage-head h3, [data-site-theme="fracture"] .deck h3, [data-site-theme="fracture"] .channels h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; } [data-site-theme="fracture"] .lvc-title { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; } /* The live page's gate heading (livecard.js draws it) takes the plate heading scale; it rendered at label size under the hero's split shadow. */ [data-site-theme="fracture"] .lvc-empty h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: .04em; text-shadow: none; } /* ★ THE SPECIMEN LAB WEARS THE OWNER'S LIGHT. studiolab.css is a PAGE THEME with its donor's own palette (jade on a warm brown chamber, a serif headline) and it is exempt from the colour scan for exactly that reason. Under this site theme it would be the one page on the site lit in another island's colour. The lab reads every colour through its own `--av-*` tokens, declared on `body.studiolab` (0,1,1); re-pointing them here at (0,2,1), from a sheet that loads later, repaints the chamber in the owner's tokens without touching the lab's layout or its working controls. `--av-chamber` is the one studiolab.js rewrites per chosen channel, on the element it paints, so that behaviour is unchanged. */ [data-site-theme="fracture"] body.studiolab { --av-serif: var(--font-display); --av-sans: var(--font-ui); --av-ink: var(--fg); --av-page: var(--bg-deep); --av-panel: var(--surface); --av-panel-2: var(--surface-2); --av-line: var(--border-2); --av-jade: var(--accent); --av-jade-lt: var(--accent-hi); --av-jade-hot: color-mix(in srgb, var(--accent-hi) 72%, var(--fg)); --av-amber: var(--warn); --av-amber-lt: color-mix(in srgb, var(--warn) 78%, var(--fg)); --av-focus: var(--warn); --av-edge: color-mix(in srgb, var(--accent-hi) 17%, transparent); --av-chamber: var(--accent); --av-chamber-rgb: var(--accent-rgb); } /* The lab writes a dark-green ink literal on every jade fill and a jade wash on every hover; with jade re-pointed to the accent those become green on red. The ink becomes the owner's on-primary, the washes the theme's hover, and the capsules (999px) take the cut. Nothing here touches the lab's layout, its working controls or the slider knobs (a knob is a circle). */ [data-site-theme="fracture"] body.studiolab :is(.chip.on, .gc-chip.is-on, .btn-primary, .btn.primary, .studio-tabs [role="tab"][aria-selected="true"], #quality-toggle[aria-pressed="true"], .vp-autorotate[aria-pressed="true"], .vp-autorotate[aria-pressed="true"] .ar-ico) { color: var(--on-primary); } [data-site-theme="fracture"] body.studiolab .vp-autorotate[aria-pressed="true"] { background: var(--accent-hi); } [data-site-theme="fracture"] body.studiolab .chip { background: var(--fr-glass); color: var(--fg-dim); border-color: var(--fr-line-lit); } [data-site-theme="fracture"] body.studiolab .chip.on { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--on-primary); } [data-site-theme="fracture"] body.studiolab :is(.channel:hover, .channel:focus-within, .skin-cycler button:hover, .rail-action:hover, .rail-action[aria-pressed="true"], .btn:hover) { background: var(--fr-hover); } [data-site-theme="fracture"] body.studiolab .channel.cp-on { background: var(--fr-hover); border-color: var(--accent); } [data-site-theme="fracture"] body.studiolab .vp-readout .k { color: var(--accent-hi); } [data-site-theme="fracture"] body.studiolab .showcase-hint .sh-dot { background: var(--accent-hi); box-shadow: 0 0 9px var(--fr-bloom); } [data-site-theme="fracture"] body.studiolab :is(.stage-growth, .skin-cycler, .vp-autorotate, .vp-rotate, .vp-exposure, .showcase-hint, .lab-rail-stack, .vp-mesh-status, .vp-loading, .vp-readout) { border-radius: 0; clip-path: var(--fr-clip-s); } [data-site-theme="fracture"] body.studiolab .lab-rail-stack { border-color: var(--fr-line-lit); } [data-site-theme="fracture"] body.studiolab :is(.rail-colors button, .rail-custom) { border-radius: 0; } /* THE CHAMBER BEHIND THE SPECIMEN. studiolab.css paints a warm BROWN wall (a literal #151009 → #0b0806 gradient with amber pools) and a jade glow at the top; under a red-on-black site that read as a dirty brown dome behind the animal (owner, 2026-08-22: "theres a weird effect ... the weird thing behind them"). The wall becomes the owner's own ground - surface into deep - lit by one red pool at the top and one at the floor; the haze puffs, the contact glow and the motes take the same light. The 3D ground disc is already the theme's stage-floor token, so floor and wall agree. */ [data-site-theme="fracture"] body.studiolab .viewport-wrap { border-color: var(--fr-line); background: radial-gradient(92% 72% at 50% 2%, var(--fr-bloom-soft), transparent 62%), radial-gradient(60% 34% at 50% 100%, var(--fr-bloom-soft), transparent 70%), linear-gradient(var(--surface), var(--bg-deep)); } [data-site-theme="fracture"] body.studiolab #lab-cloud .base { background: radial-gradient(ellipse, var(--veil-deep), transparent 72%); } [data-site-theme="fracture"] body.studiolab #lab-cloud .contact { background: radial-gradient(ellipse, var(--fr-bloom), transparent 72%); } [data-site-theme="fracture"] body.studiolab #lab-cloud .puff { background: radial-gradient(circle, var(--fr-bloom-soft), transparent 68%); } [data-site-theme="fracture"] body.studiolab #lab-parts .mote { --mote: var(--accent-hi); box-shadow: 0 0 var(--glow, 8px) calc(var(--glow, 8px) / 2) var(--fr-bloom-soft); } /* ------------------------------------------------------------------------- 13. NARROWER SCREENS Under 981px the board drops under the masthead and the mark steps behind the words at lower strength, so the name still reads over it. ------------------------------------------------------------------------- */ @media (max-width: 980px) { /* ★ THE MARK'S BLEED IS CLIPPED AT THE HERO'S OWN BOX. Measured on the first phone render: the absolutely placed mark reached 444px on a 390px viewport, and a mobile browser grows its layout viewport to the widest box rather than clipping it - the whole page rendered 14% too wide and the type shrank with it. `overflow-x: clip` (not hidden: hidden makes a scroll container and traps sticky descendants) keeps the bleed inside. */ [data-site-theme="fracture"] .hero { min-height: 0; padding-block: clamp(28px, 6vh, 56px) 8px; overflow-x: clip; } [data-site-theme="fracture"] .hero-art { right: -8%; top: 46%; width: clamp(300px, 56vw, 480px); opacity: .58; } [data-site-theme="fracture"] .hero h1 { font-size: clamp(56px, 13vw, 120px); } [data-site-theme="fracture"] main:has(> .hero) > .section:has(#status-card) { padding-block: 24px 0; } [data-site-theme="fracture"] .feat > div { grid-template-columns: 1fr; row-gap: 6px; } [data-site-theme="fracture"] .feat > div > .feat-cmd { grid-column: 1; } } /* THE PHONE DRAWER keeps its burger and its closed state: `display` is set only on `[data-open="true"]`, so site.css still shuts it. */ @media (max-width: 820px) { [data-site-theme="fracture"] .nav-links[data-open="true"] { display: flex; flex-direction: column; gap: 0; padding: 0; background-color: var(--bg-deep); background-image: none; border-top: 1px solid var(--fr-line); } [data-site-theme="fracture"] .nav-links a { padding: 15px 16px; font-size: 12.5px; border-bottom: 1px solid var(--fr-line); } [data-site-theme="fracture"] .nav-links a[aria-current="page"] { box-shadow: inset 1px 0 0 var(--accent); color: var(--accent-hi); } [data-site-theme="fracture"] .section { padding-block: 34px; } [data-site-theme="fracture"] .hero h1 { font-size: clamp(52px, 15vw, 96px); max-width: none; } [data-site-theme="fracture"] .hero-art { right: -14%; width: clamp(260px, 64vw, 380px); opacity: .42; } [data-site-theme="fracture"] .status { padding: 22px 18px 20px; } [data-site-theme="fracture"] .status-figs { grid-template-columns: 1.2fr 1fr 1fr; } [data-site-theme="fracture"] .fig { padding-left: 12px; padding-right: 8px; } [data-site-theme="fracture"] .fig b { font-size: clamp(30px, 9vw, 44px); } [data-site-theme="fracture"] .feat { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; } [data-site-theme="fracture"] .feat-ico { width: 44px; height: 44px; } [data-site-theme="fracture"] .card:not(.studio-card) { padding: 20px 18px; } [data-site-theme="fracture"] .cta-card h2 { font-size: clamp(34px, 11vw, 56px); } [data-site-theme="fracture"] .foot::before { width: 260px; height: 260px; } }