/* ============================================================================ hero-fluid.css — the sheet that holds the hero's fluid field. Copied out of the final Foxora Studio stylesheet (web/site/public/site.css, the hero-fluid block) and kept verbatim below. The only thing added is the alias block: this repo declares the same ramp under --fx-* names, and both the script and the scrim read --paper / --v1 / --v3. Nothing here is a new value. It lives in public/ next to hero-fluid.js and vendor/gpu-io.min.js, not in src/styles, because it belongs to the field rather than to the theme layer — the script is loaded from before any bundle, and its sheet with it. ========================================================================== */ /* the field reads --paper, --v1 and --v3 off the document root and re-reads them on every theme change; the scrim below is built entirely out of --paper. Aliased, never copied — a palette change in paper.css re-tints the field on the next frame and this file never has to be touched. */ :root { --paper: var(--fx-paper); --v1: var(--fx-v1); --v3: var(--fx-v3); } /* ------------------------------------------------ hero-fluid.css (the current under the hero) */ /* ================================================ the hero's fluid field Append to site.css, after the `#ascii, #dots` rules near the end of the hero block. Four jobs: take the drafting grid off the hero *while the field is live*, hold the canvas, lay a token-built scrim between the field and the copy, and give the one transparent control in the hero a surface to sit on. Nothing here touches the frame, the auroras or the printer. */ /* 1 · while the field is live the hero is a clean plate. The body still paints the 10px/50px drafting grid for the whole document; the hero draws its own paper over that one region, so the grid stops at the hero and resumes at the trust band's rule. Gated on .fx-fluid on purpose. With no WebGL, with reduced motion, or with ?fluid=0, the class is never set (or is removed again) and the hero is returned *exactly* as it was: grid, dots and all. #dots draws the major grid's own nodes — leaving it on a sheet whose grid had been erased left a lattice of orphaned marks with nothing to mark. */ html.fx-fluid .hero { background: var(--paper); } /* 2 · the field's layer — under the auroras, under .wrap (z-index 1), and deaf to the pointer so every CTA keeps its clicks. It fades in once the first frame is on the canvas, so the hero opens on paper. */ .fx-fluid-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.1s ease; } .fx-fluid-layer.is-on { opacity: 1; } .fx-fluid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .fx-fluid-swatch { position: absolute; width: 0; height: 0; overflow: hidden; } /* 3 · the scrim: paper lifted back over every run of type, and a margin lifted back around the whole sheet. Percentages are measured off the live hero box (1600×820 and 1440×820 at the two desktop sizes): copy column y 8.8–89%, printer y 8.4–81%, receipt caption y 84.4–89.3%. Layer order is top-down, as CSS paints it: a. the copy column d. the drawn margins, left and right b. the stat / CTA / note e. head and foot c. the receipt caption f. one even veil over the plate */ .fx-fluid-scrim { position: absolute; inset: 0; pointer-events: none; background: /* a · the headline and the lede — the long run of type on the field */ radial-gradient(36% 44% at 30% 42%, color-mix(in srgb, var(--paper) 94%, transparent) 0%, color-mix(in srgb, var(--paper) 82%, transparent) 42%, color-mix(in srgb, var(--paper) 44%, transparent) 74%, transparent 100%), /* a2 · the mark's stage, right column. The particle mark is itself made of dots, and at 1440 the field's strokes ran full-strength through it, so object and background fought at the same scale. Half a veil here — the strokes stay visible at the stage's rim and fade under the mark. */ radial-gradient(24% 27% at 72% 29%, color-mix(in srgb, var(--paper) 62%, transparent) 0%, color-mix(in srgb, var(--paper) 38%, transparent) 58%, transparent 100%), /* b · the stat rule, the two buttons and the note under them, which are small type low on the plate and were the least legible thing here */ radial-gradient(32% 19% at 30% 80%, color-mix(in srgb, var(--paper) 90%, transparent) 0%, color-mix(in srgb, var(--paper) 72%, transparent) 46%, color-mix(in srgb, var(--paper) 30%, transparent) 78%, transparent 100%), /* c · the receipt's caption — the receipt is an opaque card and needs nothing, but the italic under it sits straight on the field */ radial-gradient(23% 13% at 73% 88%, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, var(--paper) 60%, transparent) 52%, transparent 100%), /* d · the sheet's margins. A drawn plate has clean paper at its edges; this also keeps the field from running into the frame's dashed rules at 30px. Absolute, so the margin is a margin at every width. */ linear-gradient(to right, var(--paper) 0, color-mix(in srgb, var(--paper) 52%, transparent) 34px, color-mix(in srgb, var(--paper) 16%, transparent) 78px, transparent 132px), linear-gradient(to left, var(--paper) 0, color-mix(in srgb, var(--paper) 52%, transparent) 34px, color-mix(in srgb, var(--paper) 16%, transparent) 78px, transparent 132px), /* e · head and foot, so the field never butts into the title block's rule above or the trust rule below, and the classline at 9% keeps clean paper behind it */ linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 74%, transparent) 6%, color-mix(in srgb, var(--paper) 44%, transparent) 12%, color-mix(in srgb, var(--paper) 16%, transparent) 18%, transparent 26%, transparent 78%, color-mix(in srgb, var(--paper) 26%, transparent) 90%, color-mix(in srgb, var(--paper) 62%, transparent) 97%, var(--paper) 100%), /* f · and one even veil over the whole plate */ color-mix(in srgb, var(--paper) 14%, transparent); } /* 4 · the hero's one transparent control. `.btn.hollow` is background:transparent, which was right on flat paper and wrong over a live field — the strokes ran through the button and it stopped reading as a surface. Paper, only here, only while the field is on. */ html.fx-fluid .hero .btn.hollow, html.fx-fluid .hero .v5-btn--ghost { background: color-mix(in srgb, var(--paper) 88%, transparent); } html.fx-fluid .hero .btn.hollow:hover, html.fx-fluid .hero .v5-btn--ghost:hover { background: color-mix(in srgb, var(--paper) 88%, transparent); } /* ^ .v5-btn--ghost is this repo's name for the same transparent control — the hero's "Watch one work". The reference selector is kept beside it. */ /* 5 · the two older hero backgrounds retire the moment the field is live. #dots drew the drafting grid's own nodes — with the grid gone from the hero its premise is gone, and its 50px lattice would fight the field's own lattice. #ascii is the comp-only alternative behind ?bg=ascii. Both are hidden before their loops can start, so neither is left running unseen; if the field ever fails to come up the class is removed and they return, along with the grid (rule 1). ?fluid=0 keeps the old pair for comparison. */ html.fx-fluid #dots, html.fx-fluid #ascii { display: none !important; } /* the same rule for this repo's two: DotGrid renders .v5-hero__fx (the 50px dot lattice) and .v5-hero__scrim is the halo's own legibility wash, which the field brings with it in .fx-fluid-scrim above. Both are already out of the hero's markup — this is here so a hero that gets one back does not end up wearing two textures. */ html.fx-fluid .hero .v5-hero__fx, html.fx-fluid .hero .v5-hero__scrim { display: none !important; } /* narrow sheets: the columns stack, the copy runs the full measure and the printer takes the bottom half, so the scrim becomes one long column of paper with the plate left alive only where there is no type. Measured on the live boxes: 390×1800 — copy y 4–49%, printer 55–94%, caption 95–97%; 1100×1389 — copy y 5–40%, printer 49–92%, caption 93–96%. */ @media (max-width: 1100px) { .fx-fluid-scrim { background: radial-gradient(112% 30% at 50% 20%, color-mix(in srgb, var(--paper) 90%, transparent) 0%, color-mix(in srgb, var(--paper) 74%, transparent) 48%, color-mix(in srgb, var(--paper) 34%, transparent) 78%, transparent 100%), radial-gradient(104% 15% at 50% 45%, color-mix(in srgb, var(--paper) 84%, transparent) 0%, color-mix(in srgb, var(--paper) 50%, transparent) 56%, transparent 100%), radial-gradient(96% 9% at 50% 95%, color-mix(in srgb, var(--paper) 86%, transparent) 0%, transparent 100%), linear-gradient(to right, var(--paper) 0, color-mix(in srgb, var(--paper) 40%, transparent) 22px, transparent 60px), linear-gradient(to left, var(--paper) 0, color-mix(in srgb, var(--paper) 40%, transparent) 22px, transparent 60px), linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 56%, transparent) 5%, color-mix(in srgb, var(--paper) 20%, transparent) 12%, transparent 20%, transparent 74%, color-mix(in srgb, var(--paper) 30%, transparent) 90%, var(--paper) 100%), color-mix(in srgb, var(--paper) 16%, transparent); } } /* ============================================ this repo, and nothing else One rule of the block above is outranked here. paper.css retires the v5 sheet's leftover decorations wholesale: .v5 [class*="scrim"], .v5 [class*="blob"] { display: none !important } and that substring match catches .fx-fluid-scrim by name. The scrim is not a decoration: it is the paper lifted back over every run of type, and without it the strokes run straight through the headline. Restated at a specificity that wins — (0,3,1) against (0,2,0) — and gated on .fx-fluid, so it exists only while the field does. No value is changed; the scrim's background is the block's own, above. */ html.fx-fluid .hero .fx-fluid-scrim { display: block !important; }