/* ── gold ──────────────────────────────────────────────────────────────── The other material. Where `.surface` is the ground, this is the thing you are meant to act on — buttons, and anything else that should read as the one warm object on a near-black page. Reusable by design: any element on any page can take `.gold`.

loose-ends

NO ANIMATION. A shimmer or a sweep reads as a novelty; real gold sits still and lets the light do the work. What makes metal rather than a yellow button is the RAMP. A two-stop gradient is plastic. Metal needs, from top to bottom: a blown highlight at the very edge, a fast fall through saturated gold, a DARK WAIST across the middle where the surface turns away, then a second lift underneath where the surroundings bounce back up into it. That waist and that bounce are the whole trick — remove either and it goes flat. ──────────────────────────────────────────────────────────────────── */ /* There is no shine layer any more. Gloss, hotspot and specular streak have all gone in turn, and what is left is the honest thing: the metal's own colour, its texture, and nothing painted on top pretending a light source. The `background-*` lists below are positional and now describe exactly two images — texture and ramp. Adding a layer means adding an entry to all three. */ :root { /* Neutral until gold.js replaces it: mid grey is a no-op under `overlay`, so a button is simply the plain ramp with no script. */ --gold-tex: linear-gradient(#808080, #808080); /* THE TEXTURE'S OWN SIZE, so it is painted 1:1 and never resampled. gold.js generates it at `Surface.noise.size`, which is 384. **If that constant ever changes, this changes with it** — they are one number. Every instinct that says "the tile should be smaller than the element" is wrong here, and wrong in a way that is invisible until you look closely. At 30px the browser was averaging about 164 source pixels into every screen pixel: a 12.8x downscale. Voronoi facets, pits and scratches are all high-frequency, so they averaged away completely and left flat colour — and the only thing that SURVIVED the averaging was the low-frequency mottle, which at 30px repeats often enough to read as a motif. Too flat and too obviously tiled, from the same cause: shrinking a texture does not give you a finer one, it gives you a blurrier one. At 384 the marks are the size they were drawn. It is also about a phone screen wide, so nothing on this site is large enough to show a seam — the repeat exists and is simply never reached. ABSOLUTE, and **nothing overrides it per element.** The grain belongs to the material, not to whatever is wearing it: a bigger object is a bigger window onto the same sheet, exactly as a wider slab of marble does not get wider veins. Never `em` or a percentage — the wordmark's size is a `clamp()`, and an `em` tile silently rescaled the metal every time the viewport moved. */ --gold-tile: 384px; } /* ── the metal itself ──────────────────────────────────────────────────── Two images and nothing else: the ramp, and the texture riding over it through `overlay`. Blended into one element's background rather than stacked in pseudo-elements, because a button's label is a bare text node and an absolutely-positioned layer would paint straight over it. The texture is the SAME Voronoi/fbm/ridged kit the background material is built from (see gold.js), which is why the two read as belonging to one product. `overlay` is what makes it a surface treatment rather than a picture: mid grey passes through untouched and only the marks either side of it bite. The object and the ink share this one declaration. They used to carry a copy each with a comment telling the next person to keep them in step, which is a comment that only exists because the code is wrong. What differs between them is below, and it is three lines each. The `background-*` lists are POSITIONAL: adding a layer means adding an entry to all three. The gradient literal is the NO-SCRIPT FALLBACK and nothing else — a plausible gold for when gold.js never runs. Two stops, written by hand, deliberately not tracking the generator. It used to be the generator's ten-stop print with a rule saying to re-paste it on every gold change; but `flat` sits near 1, so all ten land within three points of lightness of each other and the print is an elaborate way of writing one colour. Two numbers say the same thing and cannot drift. */ .gold, .gold-ink { background-image: var(--gold-tex), var(--gold-grad, linear-gradient(180deg, hsl(47, 63%, 48%), hsl(47, 63%, 45%))); background-size: var(--gold-tile) var(--gold-tile), auto; background-repeat: repeat, no-repeat; background-blend-mode: overlay, normal; } .gold { /* The metal owns the ink that is legible on it, so `.act` never has to name a colour. Blue and not a dark brown: brown on gold is the same hue twice and goes muddy at label sizes, where the page's own night blue stays a separate colour and reads as the ground showing through the metal. */ color: var(--ink-on-gold, #10173a); border: 1px solid #6d4b10; /* No bevels. Four inset lines — lit top, dark bottom, lit sides — were the whole of what made this read as a raised, rounded object. A flat one keeps only the cast shadow, which is not shading ON the button but the separation between it and the tray behind it. */ box-shadow: 0 3px 12px rgba(0, 0, 0, .5); } .gold:active { /* Same stack, with the light tilted down the object — which is what a real thing does when it is pressed, rather than the whole surface going darker. Fallback is two stops for the same reason as above, a little darker and running the other way. */ background-image: var(--gold-tex), var(--gold-grad-active, linear-gradient(180deg, hsl(47, 63%, 43%), hsl(47, 63%, 45%))); opacity: .93; box-shadow: inset 0 2px 5px rgba(52, 34, 0, .45), 0 2px 7px rgba(0, 0, 0, .5); } /* ── the metal as an INK ───────────────────────────────────────────────── The same material, painted through the glyphs instead of behind them.

loose-ends

Standalone, not a modifier of `.gold`: an object wants a border and a cast shadow and a label colour, and a word wants none of those. The background stack they do share is declared once, above. It sets no tile size of its own. `--gold-tile` is one absolute value for the whole material (see `:root`), which is what makes the grain the same grain in a word as on an object. At `facetCells` 19 over a 384px tile the cells land around 20px, which is roughly one letter — so cell edges cross the strokes and each letter sits in its own patch of light. Both of the numbers that set that live in gold.js and `:root`, not here; a letter is never sized against them and should not be. The name and the object below it are two windows cut out of one sheet of metal, and how coarse the sheet is belongs to the sheet. No `:active` variant, and it needs none: nothing set in this is a control. If that changes, the tilt lives in `.gold:active`. It stays legible before the texture arrives. `--gold-tex` starts as mid grey, which is a no-op under `overlay`, and `--gold-grad` has a baked literal fallback — so the glyphs are always filled with at least the flat ramp, never with nothing. `color: transparent` with no paint behind it is invisible text, and that is the one way this construction fails badly. */ .gold-ink { -webkit-background-clip: text; background-clip: text; color: transparent; /* Safari needs the fill colour cleared as well as `color`; without it the glyphs paint solid over the clipped background. */ -webkit-text-fill-color: transparent; } /* A forced-colours palette replaces backgrounds but not a transparent text fill, so a clipped-background word would come out invisible in exactly the mode somebody turned on to be able to read it. Hand the type back to the system and drop the material. */ @media (forced-colors: active) { .gold-ink { background-image: none; -webkit-text-fill-color: revert; color: revert; } }