/* ===================================================================== VAL — the mark's geometry, as tokens. Import before core/mark.css. Every number here is a share of the cap height; --logo-h sizes the lot. Nothing in this file paints — it only states the shapes and the numbers, so no value is written twice. Delivered as assets/val-mark.css alongside assets/LOGO-SPEC.md, which is the contract this file states. It lives in core/ rather than assets/ because every other stylesheet on the site does, and the three SVGs it describes were renamed val-* -> brand-* on the way in: assets/val-v.svg and val-a.svg are NOT this mark — they are the pager and reel arrows (core/site.css .pager-mark, core/reel.css .reel-mark), which keep the old letterforms and are not part of this change. PHASE ONE USES THE REST POLYGONS AND NOTHING ELSE. The bar, the spread, the reveal and the loader tokens are stated here now so that phase two adds states over an unchanged structure rather than re-cutting it. The three SVGs are reference artwork for that phase; the corner mark itself loads no file, because clip-path is what lets the shape transition. ===================================================================== */ :root { /* ---- the box -------------------------------------------------- */ --mark-ratio: 1.0340; /* V box 103.40 x 100 */ --word-ratio: 2.6746; /* VAL box 267.46 x 100 */ /* ---- the two arms, rest --------------------------------------- */ --arm-l-rest: polygon(0.00% 0.00%, 22.63% 0.00%, 49.71% 100.00%, 27.08% 100.00%); --arm-r-rest: polygon(77.37% 0.00%, 100.00% 0.00%, 72.92% 100.00%, 50.29% 100.00%); /* ---- the two arms, pressed: one bar, two stroke widths wide ---- THE TWO HALVES OVERLAP AT THE MIDDLE, and the outer edges are the ones that carry the shape: 27.37% and 72.63% are untouched, so the bar is still exactly two stroke widths wide and centred on 50%. They met at 50.00%/50.00% and the bar came out with a pale hairline down its middle. That is not a drawing error, it is compositing: the meeting point lands at 8.27 of a 16.54px box, so one pixel column is partly covered by each half, each half paints over its own coverage, and the two partial alphas compose to about .80 instead of 1 — a column 20% lighter than the bar around it. Overlapping them by 6% of the box, which is very close to one pixel at a 16px cap, gives that column full coverage from one half alone. The silhouette does not change: the overlap is interior ink under interior ink. */ --arm-l-bar: polygon(27.37% 0.00%, 53.00% 0.00%, 53.00% 100.00%, 27.37% 100.00%); --arm-r-bar: polygon(47.00% 0.00%, 72.63% 0.00%, 72.63% 100.00%, 47.00% 100.00%); /* ---- the whole word, as six polygons ---------------------------- THE SAME DRAWING AS assets/brand-wordmark.svg, restated against its own 267.46 x 100 box so that each shape can be an element in that box rather than a path inside one SVG. Two places need the word and both need it this way: the reveal behind the home page, and the loading state, which lifts the six one at a time. Percentages, so the word is sized by one width and nothing else — and clip-path, for the same reason the mark is: the loading state opens from the mark's pressed bar, and only two polygons in the same point order can travel into one another without a script. ids in the drawing become classes here, because two elements on one page cannot share an id and the word may be on the page twice. */ --word-v-left: polygon(0.000% 0.000%, 8.749% 0.000%, 19.218% 100.000%, 10.469% 100.000%); --word-v-right: polygon(29.911% 0.000%, 38.660% 0.000%, 28.191% 100.000%, 19.442% 100.000%); --word-a-left: polygon(32.865% 100.000%, 41.614% 100.000%, 52.083% 0.000%, 43.334% 0.000%); --word-a-right: polygon(62.776% 100.000%, 71.525% 100.000%, 61.056% 0.000%, 52.307% 0.000%); --word-l-stem: polygon(74.052% 0.000%, 82.801% 0.000%, 82.801% 79.500%, 74.052% 79.500%); --word-l-foot: polygon(82.801% 79.500%, 100.000% 79.500%, 100.000% 100.000%, 82.801% 100.000%); /* ---- hover ----------------------------------------------------- */ /* HOW FAR EACH ARM STEPS OUT, AND WHY THERE ARE TWO OF THESE. --mark-spread is the drawing's own figure: 3.87% of the box is 4.00 of the cap, stated the way assets/LOGO-SPEC.md states every other number, and it is the right number at display size — on a 640px cap it is 25.6px of travel. IT DOES NOT SURVIVE THE TRIP TO A CORNER. At --logo-h: 16px the same 4% is 0.64px per arm, and the hairline opens from 0.10px to 1.38px: measured, drawn, and invisible. A proportion of the cap is the right way to state a SHAPE and the wrong way to state a GESTURE, because the gesture has to be felt by an eye at a fixed distance rather than scaled with the letter. So the corner gets its own number, in pixels, which does not shrink with the mark. 2.5px was chosen by putting 1.5, 2.5 and 3.5 side by side at 16px: 1.5 is perceptible but easy to miss, 3.5 pulls the two arms far enough apart that they stop reading as one letter and start reading as two strokes, and 2.5 is felt at a glance with the V still intact. core/mark.css uses this one; --mark-spread above is kept for the display lockup and for the record. */ --mark-spread: 3.87%; /* display: each arm steps out 4.0 of the cap */ --mark-spread-corner: 2.5px; /* the corner: felt, and it does not scale */ /* THE MARK'S LIT COLOUR, NAMED HERE SO IT CANNOT GO MISSING. Every page lights its corner controls through its own .ic:hover rule, and each one names a different token for it — --foam on the home page, Procedural Breath and the archive, --mist on Contact Aureole, Miscible and Rocky, --signal on the seventeen interior pages. The mark used to inherit whichever of those the page happened to have, which works until a page has none, and then the mark silently keeps its resting colour with nothing to say so. The chain below asks for each in turn and ends in a literal, so the answer is always defined. It resolves to exactly what each page already uses today — this changes no page's colour, it only stops the mark depending on a variable that might not be there. */ --mark-lit: var(--foam, var(--mist, var(--signal, #eef4f8))); --reveal-opacity: .12; /* the wordmark behind the page */ --reveal-width: clamp(280px, 34vw, 560px); /* THE PAGE GOES SOFT BEHIND THE WORD. A backdrop blur, faded in on the same curve as the word itself, so the reveal reads as depth rather than as a second layer of ink. IT IS BOUNDED, AND IT HAS TO BE. The home page is running the sea shader, and a backdrop-filter over the whole viewport would mean re-blurring every frame of it. The plate is a box around the word and no more, with the soft mask below taking its edges off so it never reads as a rectangle. If it ever does read as one, WIDEN THE MASK rather than raising the radius: a bigger radius on the same box makes the edge more obvious, not less. */ --reveal-blur: 14px; /* how soft the page goes behind the word */ /* HOW FAR THE PLATE STANDS PAST THE WORD, and it is two numbers because the word is two and a half times wider than it is tall. A single inset resolves horizontally against the plate's width and vertically against its height, so one figure gives the word plenty of room at the ends and almost none above and below — and the mask then has nowhere to finish fading before the top and bottom edges. The vertical bleed is the larger share for that reason. */ --reveal-bleed-x: 24%; --reveal-bleed-y: 60%; /* THE MASK HAS TO FINISH INSIDE THE PLATE. This is the whole trick, and the first version got it wrong: a radial-gradient's `ellipse X% Y%` states the ending shape's RADII as a share of the box, so 62% is 1.24 of the box's half-width and a stop at 82% of that radius lands just OUTSIDE the edge. The gradient was still part-opaque when the element stopped, and the plate read as a rectangle with two visible sides. 46% and 42% put the ending radii at .92 and .84 of the half-width and half-height, so `transparent 100%` is reached with room to spare on every side and there is no edge to see. Widen these if it ever reads as a box again; do not reach for --reveal-blur, which makes an edge more obvious rather than less. */ --reveal-mask: radial-gradient(ellipse 46% 42% at 50% 50%, #000 0%, #000 42%, rgba(0,0,0,.55) 72%, transparent 100%); /* WHERE THE REVEAL SITS IN THE STACK. Above the page's shader and below everything else on it — the content, the menu, the chrome, the cursor and the veil all carry a higher layer than this, and the element is appended last to , so at the shader's own z-index it paints just above it and under everything else. ONE NUMBER IS ENOUGH NOW. The reveal is the home page's alone, and index.html paints #c at 0. It was a per-page token while the reveal was on all twenty-three: the four labs pieces paint their canvas at 1, not 0, and would each have had to restate this. */ --reveal-z: 0; /* ---- motion: the site's own tokens, restated for reference ------ */ --mark-dur-in: var(--dur-slow, .62s); --mark-dur-out: var(--dur-med, .42s); --mark-ease: var(--ease, cubic-bezier(.22,.72,.2,1)); /* ---- loader ---------------------------------------------------- THE LOADING STATE'S TIMING IS NOT HERE. It was, as a placeholder, while the loader was still the old one; --load-stagger, --load-stroke-dur and --load-hold now live in core/loader.css's CONFIG block, which is the file that owns that state. They were removed rather than left: core/loader.css is linked BEFORE core/site.css on the interior pages, so this file's copies came later in the cascade and silently won. The loop ran at the old placeholder pace, and the CONFIG block it was supposed to be tuned from did nothing. Two homes for one number is not a tidiness problem, it is a bug waiting for someone to edit the wrong one. */ }