` in the document, including the four that are semantic subdivisions inside another section and not grounds of their own: `.spec` inside the specification block, and `.ft__plate`, `.ft__certs` and `.ft__ask` in the footer. Each of those was laying a second emulsion over the one its parent already carries, and `mix-blend-mode:overlay` on a doubled layer lightens rather than textures, so they read as rectangular patches of a different colour sitting behind the footer's text blocks. Reported on client review 2026-07-29. A ground is a thing a section stands on, and only the twelve sections that declare one own an emulsion. */ section[data-ground]::before{ /* 15, between the footage at 10 and the type at 20. Below 10 the emulsion would sit under the very frames it is supposed to be part of, which is precisely the mistake the note at `main{}` further down records. */ content:''; position:absolute; inset:0; z-index:15; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23m)'/%3E%3C/svg%3E"); background-size:180px 180px; /* Deliberately still. It scrolls with its section, which is motion enough, and animating a layer this tall in eleven places at once buys a repaint budget for texture the moving root layer already supplies. */ } section[data-ground="F"]::before{ opacity:.03; } section[data-ground="P"]::before{ opacity:.07; } /* ------------------------------------------------------------------- intro A held frame before the page starts, not a spinner, and the loading state is the site's own subject rather than a bar borrowed from an installer. The readout counts DOWN from 60,0 dB(A), the noise of an ordinary heat pump, to 50,8, the number KIWA measured. That descent IS the progress: the fonts and the hero's first frame resolving are what drive it. By the time the page is ready to be looked at, the reader has already been told the one thing the site is about, and has watched it happen instead of reading it. The hand-over is not a wipe. The plate is two halves and they part along the horizon, so the hero's footage arrives through a widening slit and the headline rises out of the seam. A plate that lifts as one block says the loader is finished; a plate that opens says the film is starting. It is removed from the DOM as soon as it has played, and under reduced motion it is never shown at all, so there is no state in which it can sit in front of the page. -------------------------------------------------------------------------- */ .intro{ position:fixed; inset:0; z-index:90; overflow:hidden; pointer-events:none; } /* The two halves are the plate. They carry the ground, so the inner block can sit above both and stay whole while they part underneath it. */ .intro__half{ position:absolute; left:0; right:0; height:50.2%; background:var(--paper); z-index:0; } .intro__half--t{ top:0; } .intro__half--b{ bottom:0; } .intro__inner{ position:absolute; inset:0; z-index:1; display:grid; place-content:center; justify-items:center; gap:22px; } .intro__mark{ font-size:clamp(2.6rem, 1.2rem + 4vw, 5rem); font-weight:500; letter-spacing:.5em; margin-right:-.5em; overflow:hidden; } .intro__mark-i{ display:block; } /* The readout is display-sized on purpose: it is the headline of the loader. */ .intro__read{ display:flex; align-items:baseline; gap:.4em; font-variant-numeric:tabular-nums; } .intro__n{ font-size:clamp(3.4rem, 1.4rem + 6vw, 7.5rem); font-weight:500; line-height:.9; letter-spacing:-.03em; color:var(--accent); } .intro__u{ font-family:var(--font-mono); font-weight:450; font-size:var(--fs-micro); letter-spacing:.22em; color:var(--ink-2); } .intro__meta{ font-size:var(--fs-micro); font-weight:500; letter-spacing:.2em; color:var(--ink-2); } /* The axis, not a bar. It is the same graduated rail #geluid plots its five measurements against, carrying the two numbers the whole site is about at its two ends: 60,0 where an ordinary heat pump sits, 50,8 where this one does. The fill travels between them and a square rides its leading edge, so what the reader watches during the load is the measurement being taken, and the loader is a preview of the instrument rather than an installer widget with the site's colours on it. */ .intro__axis{ display:flex; align-items:center; gap:14px; width:min(38vw, 320px); } .intro__axis-l{ font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.14em; color:var(--ink-2); font-variant-numeric:tabular-nums; } .intro__axis-l--b{ color:var(--accent); } .intro__axis-track{ position:relative; flex:1; height:1px; background:var(--line); } /* the graduations: one hairline at each endpoint, the far one in accent because that is the value the count is travelling to */ .intro__axis-track::before, .intro__axis-track::after{ content:''; position:absolute; top:-4px; width:1px; height:9px; background:var(--line-alt); } .intro__axis-track::before{ left:0; } .intro__axis-track::after{ right:0; background:var(--accent); } .intro__fill{ position:absolute; inset:0; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; } .intro__axis-sq{ position:absolute; top:50%; left:calc(var(--p, 0) * 100%); width:7px; height:7px; background:var(--accent); transform:translate(-50%, -50%); } .intro.is-done{ pointer-events:none; } /* Set by main.js for the length of the plate and taken off at the hand-over. On the root element only: `overflow:hidden` on is what made every sticky pin on this page stick to a scrollport that does not scroll, and that bug is not worth reintroducing for two seconds of loader. */ .is-intro{ overflow:hidden; overscroll-behavior:none; } @media (prefers-reduced-motion:reduce){ .intro{ display:none; } } /* --------------------------------------------------------------- utilities */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--accent-ink); padding:12px 20px; font-size:var(--fs-ui); font-weight:600; } .skip:focus{ left:0; } /* The two inside the long pins. Same link, moved to where the reader's eye already is: the bottom left of the frame they are being offered a way out of. Above the film and the type, and only ever on screen while it has focus. */ .skip--pin{ z-index:30; } .skip--pin:focus{ left:var(--gutter); top:auto; bottom:24px; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } /* No z-index here. `z-index:0` on main and on every section made each one a stacking context, which trapped their z-index:10 footage and z-index:20 type underneath the root-level .grain at z-index:1. The grain then painted OVER the hero clip, all three drains and the takeover, which is the exact inverse of the spec: grain above the flat ground, below anything on ground F. */ main{ position:relative; } section,footer{ position:relative; } /* the wordmark */ .mark{ font-size:26px; font-weight:500; letter-spacing:.62em; margin-right:-.62em; } /* masked line reveal: overflow wrapper + inner span */ /* The reveal mask clips at the padding box, not the line box. Geist's content area is 1.300em against an ascent of 1.005em, and `g` drops to -0.162em, so a mask cut at a line-height of .92 slices the tail off every g, j, p and y. At 1440 that was 8.6px off the h1 and 14.2px off the footer wordmark, which is half its descender on the largest object on the page. The negative margin gives the space straight back, so no baseline moves and the yPercent:110 from-state still parks the line out of sight. */ .ln{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; } .ln > span{ display:block; will-change:transform; } /* the accent square, the one shape the accent is allowed to be */ .sq{ display:inline-block; width:.62em; height:.62em; background:var(--accent); vertical-align:baseline; margin-right:.34em; } /* the button, and it is an instrument --------------------------------------------------------------------------- Four review rounds rejected this control, and every one of those rounds was answered with a different easing on the same idea: a fill crossing a pill while the label swaps colour. That is the most common button on the award sites this page is going to sit next to, and it cannot be tuned into being its own. So the shape stops being a pill with a hover and becomes the thing the rest of the page already is. The page's detail language is axes: the loader plots 60,0 against 50,8 on a graduated track, #geluid plots five measurements against a second one, and #besparing collapses a hundred ticks. The button is the only object on the page a reader can touch that was not written in that language. It gets a graduation rail along its bottom edge, on its own dark plinth so the rail reads the same over lime, over bone and over the dark, and the hover is a level rising along it to a value rather than a rectangle being coloured in. The rail resolves as it fills. At rest it carries the axis and a major tick every fifth graduation, which is a quiet four or five marks on a 170px button. The level that rises under the pointer carries the FINE graduation as well, in accent, so the instrument gains resolution exactly where it has taken a reading. That is the difference between an axis and a progress bar. ------------------------------------------------------------------------- */ .btn{ /* the rail's geometry, overridable per button. --rail-g is the fine pitch and the major pitch is five of them, the way a ruler is built. */ --rail-h:7px; /* band height, and the major tick height */ --rail-t:4px; /* the fine tick height */ --rail-g:9px; /* the fine graduation pitch */ --rail-c:rgb(232 230 222 / .54); /* the resting axis, 4.93:1 on the plinth */ --rail-lc:var(--accent); /* the level, 14.77:1 on the plinth */ display:inline-block; font-size:var(--fs-ui); font-weight:600; letter-spacing:.01em; padding:13px 26px; background:var(--accent); color:var(--accent-ink); border:0; border-radius:0; cursor:pointer; position:relative; overflow:hidden; isolation:isolate; /* --fill is the whole hover gesture: 0 at rest, 1 under the pointer, and the fill, the recoloured label and the level are all functions of it. It is the only thing on this control that transitions. */ --fill:0; transition:transform 140ms var(--ease-out), --fill var(--d-mid) var(--ease-drawer); } /* G-c. The fill knows which way the hand came in. It used to rise from below whichever side you approached from, which is a control that has one answer for every question; it now opens from the edge the pointer actually crossed, on the same `--eo` fromEdge() writes for #bewijs's facts. Approach from the right and the ink arrives from the right. A translate or a scale, never a colour transition: a background swap has no travel and reads as a state change rather than a response. `--ink` is the LIGHT token here. The slant does not resolve. At rest-hover the wedge leaves a sliver of accent across the top left, which is the same cut the CTA blocks carry, so the button ends the gesture as a shape rather than as a filled rectangle. Under scaleX the wedge opens sideways and the slope arrives with it, so the shape is drawn by the gesture instead of being carried in already finished. --ease-drawer, not --ease-inout. This is the "unsmooth" the client named four rounds running, and it was never the travel: cubic-bezier(.76,0,.24,1) holds still, lurches through the middle and stops dead, which on a 0.5s hover is read as a stutter rather than as an ease. The drawer curve leaves under the hand immediately and settles, which is what a control answering a pointer should do. Same four named curves, no new token. ONE animated scalar, --fill, and everything reads it. This is not a refinement, it is the only construction that works, and the reason is worth the paragraph: `--eo` is written by JS on pointerenter, which is the same moment `:hover` starts. A transition captures its start value when the hover rule applies, so a hover-swapped clip-path had already committed to the OLD edge before the pointer event handler ran. Measured: the fill correctly opened from the right, because transform-origin is not transitioned and re-anchors a running animation, while the recoloured label kept sweeping in from the left. Two halves of one gesture disagreeing about which way the hand came in is worse than not being directional at all. With --fill as the only thing that transitions, --eo is read fresh on every frame by all three layers, exactly the way transform-origin already was. The edge can be rewritten mid-gesture and the whole control simply re-anchors. The pair also makes the leave direction free: fromEdge() rewrites --eo on pointerleave and the fill collapses out through the side the hand left by. */ @property --fill{ syntax:''; initial-value:0; inherits:true; } /* The fill is the DARK, on every button on the page, and this is the answer to the complaint that has run longest in this build: four rounds of "the button animations are mid", against four rounds of easing and travel tuning that could never have fixed it. It was never the motion. Measured on the built page: the fill was `--ink`, #E8E6DE, sweeping across a pill whose resting colour is `--accent`, #CCFF00. Relative luminance 0.78 against 0.83. **1.06:1.** The single most prominent gesture on the page was a near-invisible tonal move, executing perfectly, on the correct curve, over the correct distance, and arriving as almost no change at all. The one button the client picked out unprompted as the best on the page, best animation and best colour, was `#cta-2`'s, and the only thing different about it was a local override sweeping `--paper` instead: 14.5:1 against the same pill. An earlier version of this comment concluded from that coincidence that he was not describing a preference, he was reading a contrast ratio. He was asked, and he was not: "the color was not really the issue, it was the kind of animation ... also the higher contrast made a better impact." Two separate things, and the measurement only ever explained the second one. The note stays as written because inventing a motive for a person and filing it as a finding is the more expensive mistake of the two. See _lib/EXEMPLARS.md. That override is now the law and the local rule is gone. Four buttons stand on dark ground and one on bone, so the old pair of rules looked like a ground-aware law and behaved like one; it was aimed at the wrong surface. The fill's job is to be seen crossing THE BUTTON, whose colour is the same lime everywhere, not to separate from the section behind it. The button already separates from the section: it is lime. What is left on dark ground when the fill has fully crossed was measured in composited pixels before this was accepted, not reasoned about. The hero button, 170x49, samples 78.9% accent at rest and 11.1% at full hover, and that remainder is in the two places it has to be: the slant's wedge across the top band, x 0 to 152, and the rail's lit level along the bottom band, x 0 to 169, the full width. The label is `--ink` at 13.89:1 on the fill. So the button empties out to reveal its own instrument, held by lime on two edges, and does not dissolve into the section behind it. */ .btn::after{ content:''; position:absolute; inset:0; z-index:0; background:var(--paper); clip-path:polygon(0 18%, 100% 0, 100% 100%, 0 100%); transform:scaleX(var(--fill)); transform-origin:var(--eo, 0%) 50%; } /* Two whole labels, stacked in register, one in ink and one in paper. The paper copy is clipped to the SAME slanted edge as the fill and on the same clock, so the letters change colour exactly where the dark crosses them: the word is recoloured by the sweep passing through it rather than swapped out for another word. Nothing moves letter by letter, which is the version of this that reads as a template. `inset:0` resolves against the button's padding box, so `padding:inherit` lands the overlay's text on the same baseline as the label underneath it, and the clip percentages are percentages of the button itself. Both copies are built by main.js and are aria-hidden; the accessible name moves onto the control. Without JS the button is a plain readable button. */ .btn__t{ display:block; } /* The sizer is the only copy in flow, and it is the reason the label is allowed to change weight at all. Both visible copies are out of flow now, so the 600 to 660 the word gains under the pointer cannot widen the control, cannot move the dock's centre and cannot relayout the form column on a hover. It holds the box the way .btn__t1 used to, at a weight that never moves. */ .btn__sz{ visibility:hidden; font-weight:600; } /* Both copies now sit in the same absolute box, which is what makes the register exact rather than nearly exact: one padding box, one line box, two colours. */ .btn__t1, .btn__t2{ position:absolute; inset:0; padding:inherit; line-height:inherit; text-align:inherit; white-space:nowrap; font-weight:600; transform:translate3d(0,0,0); transition:transform var(--d-mid) var(--ease-drawer), font-weight var(--d-mid) var(--ease-drawer); } .btn__t1{ z-index:2; } /* The paper copy is revealed by the SAME edge the fill opens from, and by the same value: `--eo` is 0% or 100%, so the rest clip is inset(0 100% 0 0) when the hand came from the left and inset(0 0 0 100%) when it came from the right. Both edges are vertical, which is exactly the fill's leading edge under scaleX, so the colour change happens on the ink's own boundary and nowhere else. One property drives both, so they cannot drift apart. The fill's slant is not mirrored here any more, and does not need to be: it reaches 18% of the control's height at the very left edge and tapers to nothing, while the label starts a full 26px of padding inside that. The slant has never crossed a letter. */ .btn__t2{ z-index:3; /* The swept copy is the LIGHT one, because the fill under it is the dark. These two move together and always have; see the note on .btn::after. It is light only once there is dark underneath it to be light against. At --fill:0 this copy is clipped to zero width and nobody can see it, but its computed colour is still a fact about the page, and a bone label whose computed background is lime is 1.06:1. The probe read exactly that and failed 11 stops at all three widths the moment the fill went dark. The honest fix is not to teach the probe about clip-path, it is for the resting colour to be the one that is true at rest: `--accent-ink`, the same dark the unswept copy carries, 14.5:1 on the pill. REVERTED, and the reason is worth keeping so nobody tries it again. The resting colour was briefly driven off --fill through `color-mix(in oklab, var(--ink) calc(var(--fill) * 1000%), var(--accent-ink))`, which measures perfectly in Chrome: oklab L 0.218 at --fill 0 and 0.924 at --fill 1, a clean step by a tenth of the gesture. It also silently produces a DARK label on the dark fill anywhere that construction is not fully supported, because an invalid computed value falls back to the inherited colour, and the button's own colour is `--accent-ink`. Dark on dark on the most prominent control on the page. Reported from a real browser within minutes of it shipping. A registered custom property, animated, inherited across an element boundary, and consumed inside a color-mix percentage through a calc that multiplies a number by a percentage, is four things that each have to hold. The contrast line item it was buying is not worth one of them failing. So the label is plainly `--ink`, always, and the probe's complaint about it is a documented false positive rather than a defect: at --fill 0 this copy is clipped to `inset(0 100% 0 0)`, zero width, and no reader has ever seen bone on lime here. The probe reads computed colour against computed background and cannot see a clip-path. Verified by measurement, not asserted: `.btn__t2`'s painted width at rest is 0. */ color:var(--ink); pointer-events:none; /* The reveal is a function of --fill and --eo, never a hover swap. At --eo:0% this is inset(0 100% 0 0) closing to inset(0), and at --eo:100% it is inset(0 0 0 100%) closing to inset(0): a vertical edge either way, which is exactly the fill's leading edge under scaleX, so the letters change colour on the ink's own boundary and nowhere else. */ clip-path:inset(0 calc((1 - var(--fill)) * (100% - var(--eo, 0%))) 0 calc((1 - var(--fill)) * var(--eo, 0%))); transition:transform var(--d-mid) var(--ease-drawer), font-weight var(--d-mid) var(--ease-drawer); } /* The rail. Its own plinth in the page's dark, so the axis reads identically on the lime ground at rest and on the dark fill under the pointer, everywhere, with no per-section colour to keep in sync. That was already true when the fill was still bone on four of the five buttons, which is why making the fill uniformly dark cost the rail nothing. */ .btn__rail{ position:absolute; left:0; right:0; bottom:0; z-index:4; height:var(--rail-h); pointer-events:none; background-color:var(--accent-ink); background-image: linear-gradient(var(--rail-c), var(--rail-c)), /* the end tick */ repeating-linear-gradient(90deg, var(--rail-c) 0 1px, transparent 1px calc(var(--rail-g)*5)), /* major */ linear-gradient(var(--rail-c), var(--rail-c)); /* the axis */ background-repeat:no-repeat; background-position:100% 100%, 0 100%, 0 100%; background-size:1px var(--rail-h), 100% var(--rail-h), 100% 1px; } /* The level. Same four marks plus the fine graduation the resting rail does not carry, in accent, revealed left to right on the fill's own clock and the fill's own curve so the two are one gesture. clip-path rather than a width or a scaleX: a width would relayout and a scale would stretch the pitch, and a graduation whose spacing changes is not a graduation. */ .btn__lvl{ position:absolute; inset:0; background-image: linear-gradient(var(--rail-lc), var(--rail-lc)), repeating-linear-gradient(90deg, var(--rail-lc) 0 1px, transparent 1px calc(var(--rail-g)*5)), repeating-linear-gradient(90deg, var(--rail-lc) 0 1px, transparent 1px var(--rail-g)), linear-gradient(var(--rail-lc), var(--rail-lc)); background-repeat:no-repeat; background-position:100% 100%, 0 100%, 0 100%, 0 100%; background-size:1px var(--rail-h), 100% var(--rail-h), 100% var(--rail-t), 100% 1px; /* The level enters from the crossed edge too, off the same --fill and the same --eo, so the fill and the reading are one gesture arriving from one side rather than two things starting from opposite corners of the same control. */ clip-path:inset(0 calc((1 - var(--fill)) * (100% - var(--eo, 0%))) 0 calc((1 - var(--fill)) * var(--eo, 0%))); } /* No JS, no rail element, so the rail is painted into the button's own ground instead. The resting state is identical, which is the whole point: a button that only looks designed once a script has run does not look designed. */ .btn:not(:has(.btn__rail)){ background-image: linear-gradient(var(--rail-c), var(--rail-c)), repeating-linear-gradient(90deg, var(--rail-c) 0 1px, transparent 1px calc(var(--rail-g)*5)), linear-gradient(var(--rail-c), var(--rail-c)), linear-gradient(var(--accent-ink), var(--accent-ink)); background-repeat:no-repeat; background-position:100% 100%, 0 100%, 0 100%, 0 100%; background-size:1px var(--rail-h), 100% var(--rail-h), 100% 1px, 100% var(--rail-h); } @media (hover:hover) and (pointer:fine){ /* One declaration is the entire hover. The fill, the label recolour and the level are all functions of --fill, so there is nothing else to swap and nothing that can disagree about the direction. */ .btn:hover{ --fill:1; } /* both copies lift together, or they come out of register and the colour edge stops reading as one surface passing behind the letters */ .btn:hover .btn__t1, .btn:hover .btn__t2 { transform:translate3d(0,-2px,0); } /* D6. The word firms as the level passes under it, as one word on one clock, 600 to 660 on the wght axis Geist already carries. Both copies or neither: a weight difference across the slanted colour edge would ghost the letters exactly where the edge is supposed to be invisible. */ .btn:hover .btn__t1, .btn:hover .btn__t2 { font-weight:660; } /* no-JS fallback: without the duplicate there is nothing to recolour, so the single label needs to survive the fill on its own */ .btn:not(:has(.btn__t)):hover{ color:var(--paper); } } /* The press law is a reading, not a scale. The whole rail snaps to accent at once and the level opens to full with no transition at all, so the button answers with a value rather than with the 1.5 percent squeeze every second page ships. The scale stays underneath it for the pointer that expects it, and where GSAP has left an inline transform on the control the scale is dead and the rail is the whole of the response, which is the more robust half of the law. --rail-c is an UNregistered custom property, so it does not interpolate, which is exactly what a snap wants. --fill above is registered and does interpolate; that difference is deliberate, one is a gesture and the other is a reading, and registering --rail-c would turn the snap into a fade. */ .btn:active .btn__rail{ --rail-c:var(--accent); } .btn:active .btn__lvl { clip-path:inset(0 0 0 0); transition:none; } .btn:active{ transform:scale(.985); } /* D4, the rest of the press law. The button answers with a reading because it has a rail to read; everything else that can be pressed on this page has no instrument on it, so it gives the 3 percent instead. One block, and it names what it excludes rather than leaving the exclusion to be rediscovered: `.db__row` and `.pr__st` both carry a scrub-owned transform, and a press scale would replace the whole declaration rather than compose with it, which is bug class 1 exactly. Their press response is the rule and the child translate they already have. The dock's own link is ruled at the end of the dock section rather than here, because the entry stagger leaves a transition-delay of up to .41s on those four anchors and a press that answers four tenths of a second late is not a press. It needs to sit after those rules and cancel the delay. */ .ft__nav a:active, .ft__url a:active, .ft__ask-l a:active, .fm__consent-l:active{ transform:scale(.97); transition-duration:.12s; } .ft__nav a, .ft__url a, .ft__ask-l a{ transition:transform var(--d-fast) var(--ease-out); } /* From its own left edge, where the box is. A wide flex row scaled from its centre reads as a paragraph shrinking; scaled from the control it reads as the control being pressed. */ .fm__consent-l{ transform-origin:0 50%; transition:transform var(--d-fast) var(--ease-out); } /* =============================================================== the dock A squared pill, floating, centred, and small: 40px of height, a hairline, a translucent ground that lets the footage read through it, and the CTA living inside the same shape rather than pinned to the far corner. The full-width bar it replaces was a browser chrome impression of a nav, and a full-width bar over a full-bleed frame is the single loudest way to say "template". The one thing it is NOT is a rounded capsule. Every corner on this page is square or cut, and a 999px radius here would be the only curve on the site. ------------------------------------------------------------------------- */ #dock{ position:fixed; top:18px; left:50%; z-index:50; display:flex; align-items:center; gap:6px; height:40px; padding:0 5px 0 16px; /* No glass. The blur was doing exactly one job, holding four small words legible over moving footage, and a .9 ink ground does that job without the frosted panel that every second page ships as its default surface, and without the per-frame paint of blurring whatever is scrolling underneath. */ background:rgb(13 16 17 / .9); border:1px solid rgb(232 230 222 / .14); /* The entry is not a bar sliding down. The pill draws itself: it arrives as a single square at the centre of the top edge and opens outward from that square to its full width, and only then do the mark, the four links and the CTA rise into the shape, each a beat after the last. A nav that travels in as one finished rectangle is a browser chrome impression; a nav that is built in front of you is the page introducing its own furniture. Two transforms on one property, the centring and the entry travel, have to live in the same declaration or the later one deletes the other. */ transform:translate3d(-50%, -8px, 0) scaleY(.72); clip-path:inset(0 calc(50% - 20px) 0 calc(50% - 20px)); opacity:0; pointer-events:none; /* The drawer curve belongs to the things that travel, the shape and its entry. The ground and the hairline do not travel, they only change value, and with the blur gone the ground fade is the whole of what happens when the pill gives itself up over the takeover. That is what --ease-soft is for. */ transition:transform .54s var(--ease-drawer), clip-path .62s var(--ease-drawer), opacity .3s var(--ease-drawer), background .42s var(--ease-soft), border-color .42s var(--ease-soft), gap .42s var(--ease-drawer), padding .42s var(--ease-drawer); } #dock[data-state="docked"]{ transform:translate3d(-50%, 0, 0) scaleY(1); clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; } /* The contents wait for the shape. They are staggered by hand rather than by a timeline, because the state is a CSS attribute and nothing here needs GSAP. */ #dock .dock__mark, #dock .dock__nav a, #dock .dock__cta{ opacity:0; transform:translate3d(0, 9px, 0); transition:opacity .34s var(--ease-out), transform .46s var(--ease-out), max-width .42s var(--ease-drawer); } #dock[data-state="docked"] .dock__mark, #dock[data-state="docked"] .dock__nav a, #dock[data-state="docked"] .dock__cta, #dock[data-state="reduced"] .dock__nav a{ opacity:1; transform:translate3d(0, 0, 0); } #dock[data-state="docked"] .dock__mark { transition-delay:.20s; } #dock[data-state="docked"] .dock__nav a:nth-child(1){ transition-delay:.26s; } #dock[data-state="docked"] .dock__nav a:nth-child(2){ transition-delay:.31s; } #dock[data-state="docked"] .dock__nav a:nth-child(3){ transition-delay:.36s; } #dock[data-state="docked"] .dock__nav a:nth-child(4){ transition-delay:.41s; } #dock[data-state="docked"] .dock__cta { transition-delay:.46s; } /* Over the takeover the pill gives up its ground and its CTA and becomes four words floating on the film, which is what the frame is for. */ #dock[data-state="reduced"]{ transform:translate3d(-50%, 0, 0) scaleY(1); clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; background:transparent; border-color:transparent; padding:0; } #dock[data-state="reduced"] .dock__mark, #dock[data-state="reduced"] .dock__cta{ opacity:0; pointer-events:none; max-width:0; margin:0; padding-inline:0; overflow:hidden; } .dock__mark{ font-size:10px; font-weight:600; letter-spacing:.34em; margin-right:.2em; color:var(--ink); white-space:nowrap; } /* the hairline that separates the wordmark from the nav inside the pill */ .dock__mark::after{ content:''; display:inline-block; vertical-align:middle; width:1px; height:12px; margin-left:14px; background:rgb(232 230 222 / .2); } #dock[data-state="reduced"] .dock__mark::after{ opacity:0; } .dock__nav{ display:flex; gap:4px; } .dock__nav a{ font-size:11px; font-weight:500; letter-spacing:.02em; position:relative; padding:0 10px; line-height:38px; white-space:nowrap; } /* Directional underline: it grows in from the left edge and, on leave, keeps travelling the same way and collapses out through the right, because the origin flips with the hover state. A single origin makes the line retrace its own path backwards, which is the tell of a default transition. */ /* Inside a pill the underline has nowhere to sit, so the hover fills the item's own square instead. It still travels: the fill wipes up from the baseline. */ .dock__nav a::after{ content:''; position:absolute; inset:2px 0; z-index:-1; background:rgb(232 230 222 / .1); transform:scaleY(0); transform-origin:50% 100%; transition:transform .26s var(--ease-out); } .dock__nav a{ z-index:0; } @media (hover:hover) and (pointer:fine){ .dock__nav a:hover::after{ transform:scaleY(1); } } /* the pill's own CTA: full accent, square, and the same height as the pill's inner box so the shape reads as one object with a filled end. The rail comes with it, at a finer pitch because the control is a third of the size. */ .dock__cta.btn{ height:30px; padding:0 14px; line-height:30px; font-size:11px; letter-spacing:.04em; --rail-h:4px; --rail-t:2px; --rail-g:6px; } /* G-b. The pill used to carry a graduated axis of its own, `.dock__ln`, along the inside of its bottom edge at a 30px pitch. The CTA in the pill is a .btn and carries the page's rail at 6px, and with the CTA centred in a 40px pill the two sat 4px apart: two parallel rails, which is what the client saw and named. Both were defended in a comment as "a scale and its detail"; on the built page they were the same ruler printed twice, 4px apart. The button's rail is the one that stays, and not by coin toss. It is the thing the hover level rises along and the press snaps to accent, so it takes a reading; removing it would have made the dock CTA the only button on the page that answers differently from every other button, which is a second button law to keep in sync forever. The pill's axis took no reading at all. It arrived, and that was its whole behaviour. It also restated the opening gesture the pill's own clip-path already performs, half a second later. An unearned detail layer, by the standard in _lib/AI-TELLS.md section 0. */ /* D4, the dock's share of the press law, and it has to live here. The four links carry a transition-delay of .26s to .41s so they arrive in sequence behind the pill, and that delay is on the same declaration the press would use: measured, the scale started 260ms after the finger and finished at 380. The delay is cancelled for the duration of the press and the rule is placed after the stagger it is cancelling, because at equal specificity the later rule is the one that means it. */ #dock[data-state] .dock__nav a:active{ transform:scale(.97); transition-duration:.12s; transition-delay:0s; } /* ============================================== 01 #hero — ground F — 100svh */ #hero{ height:100svh; min-height:560px; overflow:hidden; } .hero__film{ position:absolute; inset:0; z-index:10; } .hero__video{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; opacity:1; } .hero__grade{ position:absolute; inset:0; background: linear-gradient(to top, rgba(10,13,14,.55) 0%, rgba(10,13,14,0) 26%), linear-gradient(to bottom, rgba(10,13,14,.42) 0%, rgba(10,13,14,0) 20%), linear-gradient(to right, rgba(10,13,14,.82) 0%, rgba(10,13,14,.48) 30%, rgba(10,13,14,0) 66%), rgba(10,13,14,.18); } #hero .mark{ position:absolute; z-index:20; top:3.4%; left:50%; transform:translateX(-50%); } .hero__type{ position:absolute; z-index:20; left:var(--gutter); right:var(--gutter); bottom:13.2%; text-align:center; } .hero__h1{ font-size:var(--fs-display); font-weight:500; line-height:.92; letter-spacing:-.02em; } .hero__lead{ /* .7em of the LEAD, not of the display, so the gap stayed ~19px while the headline above it grew to 192px. Geist's content box overhangs its line box by .19em at that size, which put 20px of descender inside the lead's own rect at 1920 and 12px at 1440, one pixel under the probe's filter. Scaling the gap off --fs-display is what makes the clearance width-independent. */ margin-top:calc(.20 * var(--fs-display)); font-size:var(--fs-lead); font-weight:400; color:var(--ink); max-width:66ch; margin-left:auto; margin-right:auto; } .hero__cta{ position:absolute; z-index:20; right:var(--gutter); top:90%; } /* ============================================= 02 #drain — ground D — 120svh */ /* 240svh, not 120. A sticky pin only scrubs for (section height - pin height), so a 120svh section around a 100svh pin gave the drain 20svh of travel: the whole dissolve finished inside 180px and the rest of the section was the post-drain emptiness. The section height is the pin height PLUS the travel the device needs, never the travel on its own. Measured with `_tools/scrollcheck.mjs --sticky`, which reports travel in viewport heights. */ #drain{ height:240svh; } .drain__pin{ position:sticky; top:0; height:100svh; overflow:hidden; } .drain__stage{ position:absolute; inset:0; z-index:10; } .drain__img, .drain__gl{ position:absolute; inset:0; width:100%; height:100%; } .drain__gl{ pointer-events:none; } .drain__img{ object-fit:cover; } .drain__gl{ display:none; } /* main.js shows it when WebGL is live */ .drain__stage.is-gl .drain__img{ visibility:hidden; } .drain__stage.is-gl .drain__gl{ display:block; } /* ---------------------------------------------- the drain without WebGL Not an opacity fade. A fade is precisely what device 2 exists to replace, and it is the reflex every thin build in this repo reached for, so the machine that cannot run the shader still has to see a frame come apart in grain-sized bites rather than dim. Two mask layers, intersected. Layer 1 is a 4px grid of hard-edged dots whose radius shrinks from full coverage to nothing, which is the erosion. Layer 2 is a threshold sweeping top to bottom, which is the shader's (1 - vUv.y) bias. Because layer 1 is binary the intersection never dims anything: a pixel is either film or ground, exactly as in the shader. Applied only where the compositing operator resolves, tested in JS, because a mask that half-applies would leave the film on screen forever. Shared by all three drains, so `.is-mask` names no section. */ .is-mask{ --cut:0; -webkit-mask-image: radial-gradient(circle, #000 calc((1 - var(--cut)) * 104%), transparent 0), linear-gradient(to bottom, transparent calc(var(--cut) * 132% - 32%), #000 calc(var(--cut) * 132%)); mask-image: radial-gradient(circle, #000 calc((1 - var(--cut)) * 104%), transparent 0), linear-gradient(to bottom, transparent calc(var(--cut) * 132% - 32%), #000 calc(var(--cut) * 132%)); -webkit-mask-size:4px 4px, 100% 100%; mask-size:4px 4px, 100% 100%; -webkit-mask-repeat:repeat, no-repeat; mask-repeat:repeat, no-repeat; -webkit-mask-composite:source-in; mask-composite:intersect; } /* The payoff of the drain: the statement carries the section at h2 scale and the film is what uncovers it, rather than one 20px line floating in the middle of a section whose whole job is to empty itself. The measure is in px, not ch. `ch` on this container resolves against the INHERITED body size, roughly 9px, so `max-width:20ch` was about 190px of box around an 80px headline: the sentence broke into four ragged lines, and once each line was told not to wrap, `.ln{overflow:hidden}` clipped the glyphs horizontally and the heading came out garbled. A ch measure only means what you think it means on an element that is set at the size it measures. */ .drain__type{ position:absolute; z-index:20; left:var(--gutter); right:var(--gutter); bottom:16%; max-width:min(1180px, 100%); margin-inline:auto; text-align:center; } .drain__line{ font-size:var(--fs-h2); font-weight:500; line-height:1.02; letter-spacing:-.02em; color:var(--ink); } /* One written line is one rendered line, but only where 41.6px of Geist and a twenty-character sentence actually fit. Below that the balance is the fix. */ @media (min-width:1000px){ .drain__line .ln > span{ white-space:nowrap; } } .drain__line .sq{ width:.44em; height:.44em; margin-right:.3em; } .drain__sub{ margin-top:1.1em; max-width:46ch; margin-inline:auto; font-size:var(--fs-lead); font-weight:400; color:var(--ink-2); } /* ============================================ 03 #geluid — ground P — 324svh */ /* 100svh pin + 224svh of travel for the five-row scrub, same arithmetic as #drain. G3. It was 240svh, so 140svh of travel, and a sticky pin scrubs for section height minus pin height and not one pixel more: five levels shared 140svh and each of them got 28svh, which at 900 is 252px and is less than a third of a wheel gesture per measurement. The travel is 224svh now, 1.6x, so a level is 403px at 900 and 378px at 844. The clock inside it is shaped rather than linear; main.js holds that arithmetic. */ #geluid{ height:324svh; } .geluid__pin{ position:sticky; top:0; height:100svh; padding:var(--pad-sec) var(--gutter); } .geluid__h{ /* pinned for the whole section, so the traced 5.3% (48px at 900) would keep this heading two thirds under the docked bar the entire time, not for a moment in passing. Same 88px floor as the timecode. */ position:absolute; right:var(--gutter); top:max(5.3%, 88px); max-width:34ch; text-align:right; font-size:var(--fs-ui); font-weight:500; letter-spacing:0; color:var(--ink-2); } .db{ /* The stack clears the rail rather than sitting against it: the rail is set in from the page edge and the list is set in again from the rail, so the axis reads as an axis with air on both sides of it. */ position:absolute; left:calc(var(--gutter) + 44px); right:var(--gutter); top:16%; height:66%; --spread:1; /* CSS holds the END state */ --stack:.66svh; /* one percent of this stack */ --prog:1; /* and the END of the rail */ } /* ------------------------------------------------------------- the rail A progress line for the section that is also the axis the five figures are plotted against, which is the only reason it earns its place: a bar that only reports how far you have scrolled is a scrollbar with a coat of paint. The fill grows, a square marker rides the fill, and the marker carries the value of whichever row the reader is on. Set in the gutter, left of the stack, so it frames the list rather than sitting in it. */ .db__rail{ /* --prog lives here, not on .db: the rail is .db's SIBLING, so a custom property set on the list would never reach it. */ --prog:1; /* CSS holds the END state */ position:absolute; left:max(30px, calc(var(--gutter) - 6px)); top:16%; height:66%; width:1px; background:var(--line); z-index:2; } .db__rail-fill{ position:absolute; inset:0; background:var(--accent); transform:scaleY(var(--prog, 0)); transform-origin:50% 0; } /* the ticks: one hairline per true dB position, so the axis is graduated */ .db__rail::after{ content:''; position:absolute; left:0; top:0; width:9px; height:100%; background: linear-gradient(var(--line), var(--line)) 0 0 / 9px 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 50% / 9px 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 62.5%/ 9px 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 77% / 9px 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 100% / 9px 1px no-repeat; } .db__rail-mark{ position:absolute; left:0; top:calc(var(--prog, 0) * 100%); display:flex; align-items:center; gap:10px; transform:translate(-50%, -50%); will-change:top; } .db__rail-sq{ display:block; width:9px; height:9px; flex:0 0 9px; background:var(--accent); } .db__rail-v{ font-style:normal; white-space:nowrap; font-family:var(--font-mono); font-weight:450; font-size:10px; letter-spacing:.14em; color:var(--accent); font-variant-numeric:tabular-nums; transition:opacity .18s var(--ease-out); } .db__rail.is-swapping .db__rail-v{ opacity:0; } .db__row{ position:absolute; left:0; display:flex; align-items:baseline; gap:.6em; /* --e = evenly spaced start, --t = true relative dB position, both % of stack. The scrub used to drive `top`, which relaid out five rows on every frame of a 224svh scrub. It rides transform now, so the stack composites. The unit is a fraction of svh rather than a percentage because a percentage on translate resolves against the row's own height, not the stack's. --in is the entry travel, folded into the same transform: two transforms on one element is one of them winning, and GSAP writing y here would have silently deleted the scrub. */ --in:0px; top:calc(var(--e) * var(--stack)); transform:translateY(calc((var(--t) - var(--e)) * var(--spread) * var(--stack) + var(--in))); } .db__row:nth-child(1){ --e:0; --t:0; --s:.62; } .db__row:nth-child(2){ --e:25; --t:50; --s:.72; } .db__row:nth-child(3){ --e:50; --t:62.5; --s:.86; } .db__row:nth-child(4){ --e:75; --t:77; --s:1; } .db__row:nth-child(5){ --e:100; --t:100; --s:1; } .db__n{ font-size:calc(clamp(2.6rem, 1rem + 4.2vw, 5.2rem) * var(--s)); font-weight:500; line-height:1; letter-spacing:-.015em; font-variant-numeric:tabular-nums; } .db__l{ font-size:var(--fs-ui); font-weight:400; color:var(--ink-2); } .db__row--hit .db__n{ background:var(--accent); color:var(--accent-ink); padding:.06em .18em; clip-path:inset(0 0 0 0); /* JS wipes this open; scaleX would distort the glyphs */ } .db__row--hit .db__l{ color:var(--ink); } /* The rows are the measurement; the aside is what the measurement means. It answers whichever row is hovered, focused or nearest the scrub, so the section stops being a list of numbers you have to interpret yourself. */ /* Narrowed from 56% to make room for the readout, which is now the largest thing on the page and needs a column it cannot reach out of. Below 1360 the pair swaps to a narrower readout instead, because at that width there is no arrangement where a 200px numeral and this list both fit. */ .db{ width:min(52%, 640px); } @media (min-width:1360px){ .db{ width:min(50%, 640px); } } .db__row{ /* Full width, or the only hoverable thing on the row is the glyphs themselves and the pointer falls through the gaps between them. */ width:100%; cursor:pointer; padding-block:.2em; transition:opacity .24s var(--ease-out); } /* An accent rule draws in from the left edge under the attended row. It is the thing that says "this one", and it costs one pseudo-element. */ .db__row::before{ content:''; position:absolute; left:-12px; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:50% 100%; transition:transform .3s var(--ease-out); } .db__row .db__n, .db__row .db__l{ transition:transform .26s var(--ease-out), color .24s var(--ease-out); } /* the un-attended rows step back so the attended one reads as chosen */ .db.is-attending .db__row{ opacity:.34; } .db.is-attending .db__row.is-on{ opacity:1; } .db__row.is-on::before{ transform:scaleY(1); } .db__row.is-on .db__n{ transform:translateX(18px); } .db__row.is-on .db__l{ transform:translateX(18px); color:var(--ink); } .db__row:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; } .db__aside{ position:absolute; right:var(--gutter); bottom:16%; width:min(32%, 400px); text-align:right; } @media (min-width:1360px){ .db__aside{ width:min(38%, 560px); } } .db__aside-k{ font-size:var(--fs-micro); font-weight:500; letter-spacing:.16em; text-transform:lowercase; color:var(--ink-2); } /* ---------------------------------------------------------- the readout DEVICE. Every decibel value is typeset at the volume it describes. Scale and weight are mapped to loudness, so 20 dB is small and thin, 60 dB is the largest and heaviest object on the page, and 50,8 is the only value that arrives in accent and the only one that stands perfectly still. The quietest machine on the page is the quietest object on the page, which is the entire argument of the product said in type rather than in a sentence. Scale rides a transform on the inner span, NEVER font-size, so the swap is composited and the box never reflows. The number sits in a lane of its own (`min-width`, tabular figures, right aligned) and the unit sits outside it, so a value resolving from four glyphs to two cannot move anything on the line. JS writes --rs, --rw and data-level and nothing else: the transform itself is declared once, here, so no inline transform ever lands on this element and the scrub and the hover can never overwrite each other. */ .db__aside-v{ margin-top:.1em; font-size:clamp(2.2rem, .4rem + 7.4vw, 4.4rem); font-weight:500; line-height:.86; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--accent); --rs:.885; --rw:450; /* CSS holds the END state, and it is 50,8 */ } /* Three tiers, and they are sized off the column rather than off the viewport: the numeral's lane is 2.2em wide and the unit's is 65px, so the ceiling at every width is what the aside can hold without the value wrapping. 1360 is where the readout takes the page over; below it the list still needs the width more. */ @media (min-width:700px) { .db__aside-v{ font-size:clamp(4rem, -1rem + 9.4vw, 8rem); } } @media (min-width:1360px){ .db__aside-v{ font-size:clamp(6rem, -.4rem + 14.5vw, 13rem); } } /* min-width, not width: the numeral gets a lane of its own so the box is the same width whether the value is two glyphs or four, and text-align keeps its right edge nailed to the same pixel. The unit therefore never moves while the value resolves, which is the difference between a meter settling and a layout jumping. pointer-events:none because the readout is not interactive and, being a transformed layer around 200px glyphs, its paint bounds reach well past the 0.86 line box and would otherwise sit in front of the note under it. */ .db__ro{ display:inline-block; min-width:2.2em; text-align:right; pointer-events:none; transform:scale(var(--rs)); transform-origin:100% 100%; font-variation-settings:'wght' var(--rw); transition:transform .5s var(--ease-inout), font-variation-settings .4s var(--ease-soft), color .3s var(--ease-soft); will-change:transform; } .db__ro-u{ display:inline-block; margin-left:14px; font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:500; letter-spacing:.18em; color:var(--ink-2); } /* only the whspr level is accent; every other level reads in ink */ .db__aside-v:not([data-level="50.8"]){ color:var(--ink); } .db__aside-v:not([data-level="50.8"]) .db__ro{ transition-duration:.4s; } /* 60 dB is the one value that cannot hold still. A weight-axis square wave, one element, no translation and no rotation, so it reads as instability under load rather than as a wobbling logo. Delayed past the weight transition, or the animation would win the moment the level lands and the 300-to-740 climb that carries the meaning would never be seen. */ .db__aside-v[data-level="60"] .db__ro{ animation:ro-loud .14s steps(2) .45s infinite; } @keyframes ro-loud{ 0% { font-variation-settings:'wght' 740; } 50% { font-variation-settings:'wght' 768; } } @media (prefers-reduced-motion:reduce){ .db__aside-v .db__ro{ animation:none; } } .db__aside-n{ margin-top:1.1em; font-size:var(--fs-ui); line-height:1.55; color:var(--ink-2); } /* The swap: the old note leaves upward, the new one is set from JS. The readout is deliberately NOT in this group. It resolves through its own values instead of blinking out and back, which is what makes it read as a meter settling. */ .db__aside.is-swapping .db__aside-k, .db__aside.is-swapping .db__aside-n{ opacity:0; transform:translateY(-8px); } .db__aside-k,.db__aside-n{ transition:opacity .18s var(--ease-out), transform .18s var(--ease-out); } /* ============================================== 04 #cta-1 — ground P — 70svh */ .cta-block{ padding:var(--pad-sec) 0; } /* No min-height. 70svh forced 630px around 433px of content at 1440, and the 200px left over sat between this block and the takeover as dead page. The section is now the height of what is in it plus the section rhythm. */ #cta-1{ display:flex; align-items:center; } /* Was a 72vw box whose content only filled its left half, so a quarter of the viewport sat empty to the right of a block that was itself mostly empty. Full bleed now, edge to edge, with the gutter as the box's own padding: 92vw left 115px of nothing outside the right edge on top of the 72px inside it. The bottom cut is shallower too. A 18% wedge on a 415px box is 75px of deliberately empty box directly above the section's own bottom padding. */ /* The one solid accent field on the page. A 5 percent tint of --ink behind a heading and three notes is what a wireframe looks like, and it is what this block was: nothing in it was louder than the section above it, so the page's own question arrived quieter than the copy that led to it. The block is now #CCFF00 edge to edge with #171B1C type on it, and it is the only place the accent is ever used as a field rather than as a mark. Once, so it lands. */ .cta-block--a .cta-block__box{ position:relative; width:100%; padding:clamp(52px,7.5svh,104px) var(--gutter) clamp(56px,7svh,92px); background:var(--accent); color:var(--accent-ink); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 90%); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr); column-gap:clamp(40px,7vw,140px); align-items:start; } /* The rule across the top edge is the first thing to arrive and the thing the rest of the block is built off. On the lime field it is drawn in the ink. */ .cta-block__rule{ position:absolute; left:0; right:0; top:0; height:3px; background:var(--accent); transform-origin:0 50%; } .cta-block--a .cta-block__rule{ background:var(--accent-ink); height:4px; } .cta-block__eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(20px,3svh,36px); font-size:var(--fs-micro); font-weight:600; letter-spacing:.2em; color:var(--ink-2); } .cta-block--a .cta-block__eyebrow{ color:var(--accent-ink); opacity:.62; } .cta-block__eyebrow .sq{ width:9px; height:9px; } .cta-block--a .cta-block__eyebrow .sq{ background:var(--accent-ink); } .cta-block__main{ min-width:0; } /* ---- de specificatieplaat ------------------------------------------------ G9. The right half of this block was a ledger of three key-value rows, and on a solid #CCFF00 field beside a question set at 80px a ledger in body copy is the small print under the ask. The facts are the right facts. The treatment was the wrong treatment. It is a plate now, and specifically it is the SAME plate the footer stamps at the end of the page, one rank larger and inverted onto the lime: a graduated axis across the top, a hairline per cell, a mono key, a value at a size that can stand beside the headline, and a note under it. Three measurements taken off the aanvraag, read the way the page reads every other measurement it has taken. The index sits at the right edge, where a drawing sheet puts it, which is also the one difference from the footer's version: there the cells run four across, here they run down a column. Contrast is computed against #CCFF00, never estimated. L(#CCFF00) is 0.84357 and L(#171B1C) is 0.01053, so solid ink is 14.76:1. Composited in sRGB the alphas used here measure: .5 -> 3.24:1, rules only; .66 -> 5.27:1; .74 -> 6.84:1. Nothing below 4.5 carries a word. ------------------------------------------------------------------------- */ .spec{ position:relative; min-width:0; padding-top:clamp(18px,2.4svh,30px); } /* The same graduated edge the loader, the dB rail, every button and the footer plate carry. Drawn in the ink here, because on this block the accent is the ground. 28px pitch: the column is a third of the page wide, so the footer's 46px would read as three marks and the button's 9px as hatching. */ .spec__ax{ --rail-c:rgb(23 27 28 / .5); position:absolute; left:0; right:0; top:0; height:9px; display:block; pointer-events:none; background-image: repeating-linear-gradient(90deg, var(--rail-c) 0 1px, transparent 1px 28px), linear-gradient(var(--rail-c), var(--rail-c)); background-repeat:no-repeat; background-position:0 0, 0 0; background-size:100% 9px, 100% 2px; transform-origin:0 50%; } .spec__h{ margin-bottom:clamp(22px,3.2svh,38px); font-family:var(--font-mono); font-weight:450; font-size:11px; letter-spacing:.24em; color:rgb(23 27 28 / .66); } .spec__cells{ display:flex; flex-direction:column; gap:clamp(22px,3.2svh,40px); } .spec__c{ position:relative; padding-top:18px; } .spec__l{ position:absolute; left:0; top:0; display:block; width:100%; height:1px; background:rgb(23 27 28 / .5); transform-origin:0 50%; transition:background .3s var(--ease-out); } /* z-index, and it is load-bearing rather than tidy. The scrub writes a clip-path on .spec__k, which makes that element a stacking context painted as if it were z-index:0, and it comes AFTER this index in tree order. Without a z-index of its own the sheet number is painted over by the empty right half of the key's line box: still legible, but the probe reads it as occluded and it is. */ .spec__i{ position:absolute; right:0; top:18px; z-index:2; font-family:var(--font-mono); font-weight:450; font-size:11px; letter-spacing:.14em; color:rgb(23 27 28 / .66); font-variant-numeric:tabular-nums; } /* The body is a box of its own for one structural reason: the cell answers the pointer with a translate, and the scrub writes opacity and y on the key, the value and the note. A hover transform and a scrub transform on the same element is bug class 1, and the inline one wins. Two levels, two owners. */ .spec__b{ transition:transform .3s var(--ease-out); } .spec__k{ display:block; font-family:var(--font-mono); font-weight:450; font-size:11px; letter-spacing:.2em; color:var(--accent-ink); } .spec__v{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.42em; margin-top:.4em; font-size:clamp(2.6rem, 1rem + 3.4vw, 4.6rem); font-weight:500; line-height:.96; letter-spacing:-.035em; color:var(--accent-ink); font-variant-numeric:tabular-nums; } .spec__u{ font-family:var(--font-mono); font-style:normal; font-weight:450; font-size:var(--fs-micro); letter-spacing:.14em; color:rgb(23 27 28 / .66); } .spec__n{ display:block; margin-top:.7em; max-width:34ch; font-size:var(--fs-micro); line-height:1.55; color:rgb(23 27 28 / .74); } @media (hover:hover) and (pointer:fine){ .spec__c:hover .spec__l{ background:var(--accent-ink); } .spec__c:hover .spec__b{ transform:translateX(9px); } } /* The block answers the pointer before it reaches the button: the tinted ground lifts a little and the cut corner opens. Only the fill and the clip move, both composited, and the geometry of the shape is the thing that changes, so it reads as the block responding rather than a card doing a hover trick. */ .cta-block__box{ transition:background .3s var(--ease-out), clip-path .3s var(--ease-out); } @media (hover:hover) and (pointer:fine){ .cta-block--a .cta-block__box:hover{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 80%); } } /* Was clamped to 4.4rem, which put the page's own question at 70px next to a 150px hero. A call to action set smaller than the copy around it is a call to action nobody hears. */ .cta-block__h{ font-size:var(--fs-h2); font-weight:500; line-height:.92; letter-spacing:-.025em; } .cta-block__h .ln{ display:block; } /* On the lime field the question is the only thing competing with the colour, so it goes up to display scale. Anything smaller loses to its own ground. */ .cta-block--a .cta-block__h{ font-size:clamp(3.6rem, 0.9rem + 6.4vw, 8.4rem); line-height:.88; letter-spacing:-.035em; } .cta-block__p{ margin-top:.9em; font-size:var(--fs-body); color:var(--ink-2); max-width:52ch; } .cta-block--a .btn{ margin-top:clamp(28px,4svh,48px); } /* ---- the inline capture -------------------------------------------------- A link to a form 4000px further down is a promise to fill something in later, and it was the only thing this block asked of anyone. One field on the page instead: what is typed here is written into the real form at #aanvraag and the page travels there with the field already filled and focused, so the ask is answered where it is made. Mechanically it is the same field as the main form, inverted: floating label, a rule that fills from the left on focus, a typed error under it, no browser chrome. */ .cap{ position:relative; margin-top:clamp(30px,4.5svh,54px); max-width:min(560px, 100%); } .cap__label{ display:block; margin-bottom:10px; font-size:var(--fs-micro); font-weight:600; letter-spacing:.18em; color:rgb(23 27 28 / .66); transition:color .26s var(--ease-out); } .cap:focus-within .cap__label{ color:var(--accent-ink); } .cap__row{ position:relative; display:flex; align-items:stretch; gap:12px; } .cap__input{ flex:1 1 auto; min-width:0; padding:14px 2px 16px; font-family:inherit; font-size:clamp(1.05rem, .8rem + .55vw, 1.5rem); font-weight:500; letter-spacing:-.01em; color:var(--accent-ink); background:transparent; border:0; border-radius:0; border-bottom:2px solid rgb(23 27 28 / .3); transition:border-color .3s var(--ease-out), opacity .32s var(--ease-out), transform .32s var(--ease-out); } .cap__input::placeholder{ color:rgb(23 27 28 / .52); } .cap__input:focus{ outline:none; border-bottom-color:rgb(23 27 28 / .16); } /* the rule that fills the underline from the left, the one moving part */ .cap__line{ position:absolute; left:0; bottom:0; display:block; height:2px; width:calc(100% - clamp(52px,5.4vw,64px) - 12px); background:var(--accent-ink); transform:scaleX(0); transform-origin:0 50%; transition:transform var(--d-mid) var(--ease-inout); pointer-events:none; } .cap:focus-within .cap__line{ transform:scaleX(1); } /* the send square. Two arrows in one window: the resting one leaves to the right as the next one arrives from the left, so the control moves the way the thing it does moves. */ .cap__go{ position:relative; overflow:hidden; flex:0 0 auto; width:clamp(52px,5.4vw,64px); height:auto; min-height:56px; display:grid; place-items:center; background:var(--accent-ink); color:var(--accent); border:0; border-radius:0; cursor:pointer; font-size:1.35rem; line-height:1; transition:background .3s var(--ease-out); } .cap__go-a,.cap__go-b{ grid-area:1 / 1; display:block; transition:transform .46s var(--ease-inout), opacity .3s var(--ease-out); } .cap__go-b{ transform:translateX(-140%); opacity:0; } @media (hover:hover) and (pointer:fine){ .cap__go:hover .cap__go-a{ transform:translateX(140%); opacity:0; } .cap__go:hover .cap__go-b{ transform:translateX(0); opacity:1; } } .cap__go:active{ transform:scale(.97); } .cap__err{ min-height:1.2em; margin-top:10px; font-family:var(--font-mono); font-weight:450; font-size:var(--fs-micro); letter-spacing:.04em; color:#5B1A12; opacity:0; transform:translateY(-4px); transition:opacity .26s var(--ease-out), transform .26s var(--ease-out); } .cap.is-error .cap__err{ opacity:1; transform:translateY(0); } .cap.is-error .cap__input{ border-bottom-color:#5B1A12; } /* D3, the armed state. The control answered focus and it answered failure, and it had nothing at all to say about the one thing that actually matters to the person typing: that what they have written is now enough. The moment the value becomes reachable the underline completes on its own, without waiting for the caret to leave, and the second arrow slides into the window the way it does under the pointer. The control says it will accept before anyone commits. Same travel as the hover, deliberately: an armed control and a control under the pointer are both "this will go", and inventing a third gesture for the same statement is how a form ends up with four vocabularies. Rest state, invalid and unfocused, is untouched. */ .cap.is-valid .cap__line{ transform:scaleX(1); } .cap.is-valid .cap__go-a{ transform:translateX(140%); opacity:0; } .cap.is-valid .cap__go-b{ transform:translateX(0); opacity:1; } /* the label stops being a prompt and becomes a heading over an answer */ .cap.is-valid .cap__label{ color:var(--accent-ink); } /* the handoff: the field empties upward once the value is on its way down */ .cap.is-sent .cap__input{ opacity:0; transform:translateY(-10px); } /* ================================= 05 #regen — ground D>F>D — 320svh — PINNED */ /* 100svh pin + 320svh of travel, the figure §8d specifies for the takeover. Same arithmetic as #drain: a sticky pin scrubs for section height MINUS pin height, so 320svh of section only ever bought 220svh of device. */ /* 360, down from 420. The height is fixed; how the travel is SPENT is in main.js, in the T_* constants at the top of INITS.regen, and that is where this section's pacing complaints get answered. Measured at 1440x900: 2340px of travel, of which the takeover now takes 1076, the film holds the whole screen for 889, and the dissolve takes the last 374 and finishes exactly as the pin releases. Do not retune those by changing this number. */ #regen{ height:360svh; } .regen__pin{ /* positioned, so the absolute children below resolve against the pin and not against the 420svh section. Without it, a page with no JS parks the video at 160svh and paints the veil across the whole section. */ position:relative; height:100svh; overflow:hidden; } .regen__veil{ position:absolute; inset:0; z-index:9; background:#0D1011; opacity:var(--regen-veil, 1); /* CSS holds the END state: the page has left */ pointer-events:none; } .regen__stage{ position:absolute; z-index:10; /* CSS holds the END state: full bleed. Placed by inset, NOT by left/top:50% plus translate(-50%,-50%), and that is the whole fix for "the video only half shows". The scrub writes `yPercent` on this element. Centring with a translate meant GSAP held that centring AS xPercent -50 / yPercent -50, so the very first scrub frame overwrote yPercent -50 with the rise value and the stage dropped exactly half a viewport. Measured on the built page: at full bleed the stage box sat at y=450 in a 900px viewport, so the bottom half of the picture was below the fold at every scroll position in the section, for the whole life of this build. x and y were free lanes, as the note in main.js said, but yPercent never was. Positioned by inset there is no transform to collide with and all four lanes are free. */ inset:0; /* The poster sits behind the video. Between the clip-path opening and the decoder handing over its first picture there were a few frames of nothing, and a few frames of nothing at the start of a full-bleed takeover is the whole difference between a cut and a glitch. */ background:#0D1011 url("assets/plate-regen.jpg") center/cover no-repeat; } .regen__video{ display:block; width:100%; height:100%; object-fit:cover; transition:opacity .45s var(--ease-out); } /* The from-state, added by JS and taken off at the first decoded frame. This way round rather than the reverse, because a page with no JS must still get the clip: an `opacity:0` default would have hidden it for good. */ .regen__stage.is-waiting .regen__video{ opacity:0; } /* The video only goes once the canvas has fully faded in over it. Hiding it the instant the drain existed made a visible step in brightness, because a WebGL canvas and a