/* ============================================================ THE PLATE — the shared ground for every surface on this domain. 2026-08-02 (izzy: "upgrade the rest of izzy.la to look like /saturnshop/", + "still implement the cube and assets"). Pairs with /plate.js. Every page that links this file prints on the same procedural halftone Saturn as /saturnshop/. ONE SOURCE OF TRUTH ON PURPOSE. The alternative was pasting the same twelve rules into style.css, 404.css, book.css, account.css and awake.css, which is five copies to drift apart the first time anyone tunes the fallback. Page-specific work (which blocks get a card, where the planet sits) stays in each page's own stylesheet. Every token carries a literal fallback: the pages that link this file define their palettes in their own :root, and a stylesheet that renders as nothing when a variable is missing is the dead-CSS-var trap this repo has already paid for once. ============================================================ */ /* The canvas paint must come from , not . With it on body it propagates to the root canvas and body paints nothing — which works right up until something gives body a background of its own and silently buries the plate. Pinning it here makes the -1 layer unconditional. `html body`, not `body`: every page that links this file also links its own stylesheet, and all of them already say `body { background: var(--paper) }`. A bare `body` selector here ties on specificity and loses to whichever file is linked last — an opaque body paints straight over the plate and the whole page silently reverts to flat cream. The extra element in the selector makes this win no matter what order the sheets load in. */ html { background: var(--paper, #ece7db); } html body { background: transparent; } /* ANCHORED TO THE PAGE, NOT THE VIEWPORT (izzy, 2026-08-02: "have the animated saturn stay down the page, doesnt move with scrolling"). It was `position: fixed; inset: 0` — which pins the print to the screen, so the Saturn rides along with you and every section scrolls past the same planet. That reads as a screensaver behind a website. Absolute against the initial containing block instead: the plate is printed ONCE at a fixed place on the sheet and scrolls away like ink on paper. It is a BAND, not the whole document, deliberately. A canvas the height of this site's homepage would be ~7600 CSS px — over 13k device px at DPR 1.75, which is at the edge of MAX_RENDERBUFFER_SIZE on real hardware and enormous to fill. --plate-h sets the band per page. */ .plate { position: absolute; top: var(--plate-top, 0); left: 0; right: 0; height: var(--plate-h, 170vh); /* -1 sits above the root canvas paint and below every normal-flow box, so no existing z-index on any page has to move for the plate to appear */ z-index: -1; color: var(--ink, #141312); pointer-events: none; overflow: hidden; } /* ---- the two layers (izzy, 2026-08-02: "i want the animated saturn anchored here, and i want the animated specs all over the screen") ---- Those are two different jobs and they were fighting inside one element: a page-anchored band puts the Saturn where you want it but leaves the rest of the document on flat cream, while a viewport layer covers everything but drags the planet along with the scroll. So they are split. .plate--specks fixed to the viewport, planet OFF, transparent paper. A uniform dot field has no landmarks, so pinning it to the screen is invisible — there is nothing in it to read as "moving with you" — and it costs one viewport-sized canvas instead of a document-sized one. .plate--saturn absolute, pinned by data-anchor to a real block on the page. This is the one that has to stay put. */ .plate--specks { position: fixed; inset: 0; height: auto; z-index: -1; } .plate--saturn { z-index: -2; /* the specks print over the Saturn — one sheet, two passes */ } .plate-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .plate-canvas[hidden] { display: none; } /* Static print. The canvas covers it when WebGL boots; if it never does, or the context is lost, this IS the page — so it is a real drawing, not a placeholder. */ .plate-fallback { position: absolute; left: 50%; top: 70%; width: min(78vmin, 720px); height: min(78vmin, 720px); transform: translate(-50%, -50%); opacity: 0.85; } .plate-has-gl .plate-fallback { visibility: hidden; } /* ---------- print-margin data line ---------- */ /* The bottom rule of the sheet. On pages that also print a viewport-fixed GEN stamp (bottom-left), everything here stays right-aligned: at the foot of the document the two otherwise land on the same pixels and print through each other. */ .margin-bar { position: relative; z-index: 20; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 4px 18px; /* This is the last row on the page, so its bottom padding is the page's bottom padding. Without the safe-area inset the links sit under the iOS home indicator, which both hides them and swallows the taps. The side insets cover a notched phone held in landscape. */ padding-top: clamp(14px, 2.4vh, 22px); padding-bottom: calc(clamp(12px, 2vh, 20px) + env(safe-area-inset-bottom, 0px)); padding-left: max(var(--pad, 24px), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad, 24px), env(safe-area-inset-right, 0px)); font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #57534b); } /* The signature line. nowrap keeps the heart welded to the words — an inline mark that shrink-to-fits can drop onto its own line and read as a stray glyph (the GEN-chip phantom-line bug, same shape). */ .margin-note { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } /* Black heart, drawn — never an emoji: the compass bans them, and an emoji would render in the reader's system font, full colour, off-palette. */ .margin-heart { width: 11px; height: 11px; flex: 0 0 auto; display: block; fill: var(--ink, #141312); } .margin-links { display: inline-flex; gap: 18px; flex-wrap: wrap; } .margin-links a { color: var(--ink, #141312); display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .margin-links a:hover { color: var(--muted, #57534b); } @media (max-width: 640px) { .margin-bar { justify-content: flex-end; text-align: right; } } /* ---------- the card: how a block sits ON the plate ---------- */ /* The one rule that keeps this system honest: a block that needs a backing becomes a DELIBERATE object — paper stock, an ink rule, a mint sticker offset and a hard cast shadow, the same vocabulary as /saturnshop/'s .machine. It never gets a silent page-coloured wash, because a box painted in the page's own colour on a live ground does not read as a label sitting on the print; it reads as the print having been ERASED underneath it. This repo has paid for that lesson twice (the hero lead wiping 71% of the Saturn glyph, the caption cutting the middle out of the coin). */ .plate-card { position: relative; background: var(--paper, #ece7db); border: 2px solid var(--ink, #141312); box-shadow: 0 0 0 4px var(--mint, #d9e8cf), 6px 6px 0 var(--ink, #141312); } .plate-card--ink { background: var(--ink, #141312); color: var(--paper, #ece7db); }