,
and still a working link. Smooth scrolling is scroll-behavior on ,
which the reduced-motion block below already turns off. */
.to-top {
position: relative;
height: 0;
margin-top: 0; margin-bottom: 0;
pointer-events: none;
z-index: 2;
}
@supports (position: sticky) {
.to-top { position: sticky; bottom: var(--gap-s); }
}
/* The control itself is a brass disc with an arrow, bottom right. It reads as a
control rather than as an ornament on the spine, which the vertical label did
not - see the rendered comparison in
docs\design\proposals\sticky-header-backtotop\compare-phone.png.
The colour is measured, and the obvious choice is wrong. --brass-light is
what the old label used, but it only worked there because that label sat on
its own --ink ground: a --brass-light disc floating on the paper ground is
2.10:1 and disappears. --brass on --paper is 4.74:1, and --paper on --brass
is 4.74:1 inside the disc - both past 1.4.11's 3:1. The weak point is the
disc against a --band--dark section at 3.06:1, and the 1px paper-tinted ring
in the box-shadow covers it without showing on the light ground.
right: 1rem is measured too: the mirror of the old left placement put half
the disc off-screen at 390px. The box is fully inside the viewport from
320px up (Evidence 3).
display: grid is preceded by display: block and the arrow carries
margin: auto, so a pre-grid engine gets the arrow centred horizontally at
the top of the disc instead of nowhere - cosmetic, and the link still works.
#6F511A is the hover shade of --brass, a literal rather than a new token:
the palette contract in section 1 is not changed by this round. */
.to-top a {
position: absolute;
bottom: 0;
right: 1rem;
display: block;
display: grid;
place-items: center;
width: 3rem; height: 3rem; /* 48px, above the 44px touch target */
pointer-events: auto;
text-decoration: none;
color: var(--paper);
background: var(--brass);
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(244, 242, 237, 0.35),
0 2px 14px rgba(15, 34, 51, 0.30);
transition: opacity 160ms ease, visibility 160ms ease,
background-color 160ms ease, transform 160ms ease;
}
.to-top a svg { width: 1.3rem; height: 1.3rem; margin: auto; }
.to-top a:hover { background: #6F511A; transform: translateY(-2px); }
.to-top a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (min-width: 62rem) {
.to-top a { right: 0; }
}
.at-hero .to-top a { opacity: 0; visibility: hidden; }
/* The disc steps aside while the rule engine is under it: site.js puts
.at-engine on while any of the engine's text or controls meets the
area the disc rests in - the bottom strip of the viewport, within the
disc's own column. No width condition: round 39 had one, below the width
where the engine stacks, and it left the disc on the engine's text at 800px.
The geometry is the condition (round 40). Its size, colour, ring and
position are unchanged - it is hidden, not moved. */
.at-engine .to-top a { opacity: 0; visibility: hidden; }
/* A telephone number is one thing to read and to copy. Round 39 measured the
one after the contact form breaking across two lines at 390px, orphaning
"843". Whole, it is about 114px wide, so it fits a 320px line. */
a[href^="tel:"] { white-space: nowrap; }
/* --- Utilities ------------------------------------------------------------ */
/* Visually hidden, still read aloud. Checked first: this file had no such
utility - .skip is off-screen only until it is focused, and .field-offscreen
belongs to the form. The disc's label needs one. */
.u-sr {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.stack-s > * + * { margin-top: var(--gap-s); }
.mt-m { margin-top: var(--gap-m); }
.mt-l { margin-top: var(--gap-l); }
.band a:not([class]) { text-decoration-color: var(--brass); }
.band--dark a:not([class]) { text-decoration-color: var(--brass-light); }
/* --- Reduced motion (state 2) --------------------------------------------- */
/* Removes motion. Hides nothing, disables nothing: the rule engine still
answers every change, instantly. The spine is returned to its final state -
fully drawn, every node registered - even if site.js is running, which is
also why site.js does not start the tracker under this preference. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
/* The disc keeps its colour change and loses its 2px lift. Nothing else is
needed: the rule above already holds every transition to 0.001ms, so the
prototype's per-element transition override was redundant and is not here. */
.to-top a:hover { transform: none; }
.spine-live .band > .shell { --fill: 1 !important; }
.spine-live .band:not(.is-passed) > .shell::before { background: var(--spine-ink); box-shadow: none; }
}
/* ==========================================================================
Fifth pass (round 34) - the only three rules site.css gains.
Append to src/assets/css/site.css; nothing existing is edited.
No new token, no new colour: --line-dark and the grid are already there.
========================================================================== */
/* 1. Two adjacent marine bands. #werkwijze and the new #traject are both
band--dark, so without a seam they read as one very long section. A
hairline is the site's own separator (DESIGN-BRIEF 1: no cards, blocks
separated by hairlines), and it is the only way to keep the new section
legible as a section. Place it next to the .band rules. */
.band--dark + .band--dark { border-top: 1px solid var(--line-dark); }
/* 2. The loop schematic is drawn portrait, 480 x 520, so its words survive a
360px viewport. .schematic img caps at 60rem, which would blow it up to
960px on a desktop and print 38px labels; this caps it at its intrinsic
width. Place it next to the .schematic rules. */
.schematic--loop img { max-width: 30rem; }
/* 3. A fifth .claim in a two-column .grid--two would leave an orphan. The
fifth block spans both columns instead: no orphan, no dropped block, no
padding sixth. Its keeps --measure, so the line length does not grow
with the column. Place it next to the .claim rules. */
.claim--wide { grid-column: 1 / -1; }
/* ==========================================================================
Sixth pass (round 40) - one rule. Append to src/assets/css/site.css next to
the .schematic block. No new token, no new colour, no new font.
========================================================================== */
/* The takeover figure carries two drawings in one : the wide one
(960 x 400) from 63rem up, the narrow one (400 x 560) below it. The
chooses the file; this chooses the cap, and the query is the same
one, deliberately - if one moves, the other has to move with it.
Below 63rem: cap at 30rem. The narrow drawing is drawn 400px wide, so it is
never scaled below 0.875 (a 390px viewport gives it 350px) and never blown
up past 1.2. That is the rule FIFTH-PASS-RESULT.md wrote down: draw it at
the size it is shown at, and cap it in CSS.
From 63rem up the default .schematic img cap of 60rem applies, which is the
wide drawing at its natural width - the desktop rendering the browser review
found useful, unchanged. */
@media (max-width: 62.99rem) {
.schematic--takeover img { max-width: 30rem; }
}
/* ==========================================================================
Round 68 - "Van A tot Z" / "A to Z": the customers' questions, one
each (docs\proposals\home-van-a-tot-z.md 3e). No cards (DESIGN-BRIEF 1): a
hairline above every question, as .claim has, and one below the last. The
browser's own marker differs per engine, so it is hidden and a + / minus in
brass is drawn instead. Without JavaScript still opens and closes,
and every answer is in the HTML (state 1); nothing animates (state 2); an
engine that cannot lay out a flex shows the question and the sign
one after the other (state 3).
========================================================================== */
.qa { margin-top: var(--gap-m); max-width: 52rem; }
.qa__item { border-top: 1px solid var(--line); }
.qa__item:last-child { border-bottom: 1px solid var(--line); }
.qa__item > summary {
list-style: none;
cursor: pointer;
display: flex; justify-content: space-between; align-items: baseline;
padding-top: var(--gap-s); padding-bottom: var(--gap-s);
font-size: var(--step-1); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em;
}
.qa__item > summary::-webkit-details-marker { display: none; }
.qa__item > summary::after {
content: "+";
flex: none;
margin-left: var(--gap-s);
font-family: var(--font-mono);
color: var(--brass);
}
.qa__item[open] > summary::after { content: "\2212"; }
.qa__item > p { color: var(--steel); }
.qa__item > p:last-child { margin-bottom: 0; padding-bottom: var(--gap-s); }
/* ---------------------------------------------------------------------
Round 69: the proof page (/bewijs/, /en/proof/). One , a row per
item: the label, then the state and the date. Without CSS it reads
"Laatste hersteltest / OK ยท 1 oktober 2026, 18:18". The state is a word,
never only a colour.
--------------------------------------------------------------------- */
.proof { margin: var(--gap-m) 0; max-width: 46rem; }
.proof__row {
display: grid; grid-template-columns: 1fr; gap: 0.15rem;
padding: var(--gap-s) 0;
border-top: 1px solid var(--line);
}
.proof__row:last-child { border-bottom: 1px solid var(--line); }
.proof dt { font-weight: 600; }
.proof dd { margin: 0; color: var(--steel); }
.proof__state { color: var(--ink); }
.proof__state--attention { color: var(--brass); }
@media (min-width: 48rem) {
.proof__row { grid-template-columns: 1fr 1fr; gap: var(--gap-s); }
}