/* Inkoop Service Nederland — the Dutch pages. ── Where it loads, and it is no longer one page ───────────────────────────── /nl/, /nl/besparingsscan/ and /nl/mijnisn/ load it as their *whole* visual identity: the ISN sections exist nowhere else and no other stylesheet is on those three pages at all. Since 2026-09-17 the Dutch Learn tree loads it too — /nl/blog/, /nl/guides/ and every article and guide under them — and there it is on the page **beside** learn.css, for its chrome and nothing else. `learnChrome` in build.mjs argues why: /nl/blog/ is where the ISN strip's `Kenniscentrum` shortcut and the bar's `Kennis` menu both point, and it was answering them in Buyers & Co. chrome. So the two loading patterns are: alone on the three ISN pages, and after learn.css on the Dutch Learn pages. That second pattern is safe because of one property of this file, worth keeping: **every selector in it is `body.isn …` or `.isn-…`.** Nothing here is a bare `.section`, `.shell` or `h2`, so a page that loads it beside another stylesheet gets the bar re-dressed and the `--i-*` palette declared, and not one Learn rule shadowed. The nearest thing to an exception is the accent block below — `body.isn [class*='--blue']` and its five siblings — which matches on a substring of the class attribute; no Learn class contains one (`learn-grid--blog` and `learn-callout--note` are the only `--` names over there). Adding an unscoped rule to this file is what would break the pattern, and there is no reason to. It is *not* an override layer over styles/home.css: that stylesheet and the nine beside it are not loaded on any of these pages. What is loaded before this file is always tokens.css and base.css — the reset, the type baseline, the focus rings, `[data-reveal]`'s hidden state, the reduced-motion blanket rule and the burger panel's behaviour — and everything in here is either new or a re-dressing of one of those under `body.isn`. The specificity arithmetic that makes the re-dressing work: base.css's rules are single class selectors (0,1,0) and every rule here that competes with one is `body.isn` plus that class (0,2,0) or more. So nothing in base.css had to be edited to put a white 68px bar where a 92px glass one was, and every page that does not carry `class="isn"` on its `` is untouched. Twenty-one of the 41 built Dutch pages carry it — the three above plus the eleven blog and seven guide pages — and the twenty that do not are still Buyers & Co.: /nl/manifesto/, /nl/suppliers/, /nl/product-cost-estimator/, /nl/faq/, /nl/contact/, /nl/briefing/, /nl/plan-een-gesprek/, and the industries hub with its twelve sector pages. The whole English tree is untouched too. ── The palette is the brief's, exactly ───────────────────────────────────── Eleven colours, and the ratio matters as much as the values: 65–75% white and warm off-white, 15–20% black and grey, 10–15% accent. Which is why the *saturated* accents are concentrated — the hero's step discs, the ticks, the links, the figure, the final block — and the long middle of the page is white with black type on it. A page where every section has an accent ground spends the whole allowance in the first three screens and has nothing left to make the closing call to action loud. The category rail used to be the largest single item in that budget: twenty saturated blocks filling the second screen. It is now twenty tints of the same five accents, which is what gave the allowance back to the things that have to be loud. The argument is at `.isn-cat`. Red is the one with a rule attached: limited use, never dominant. It carries four of the twenty rail cards — as a tint — one benefit's icon, and nowhere else. ── Tints, saturated grounds, and the two inks ────────────────────────────── Every accent has a saturated value and exactly **one** tint, and the pair does two different jobs. A tint is a ground you set type and drawings straight onto: the process cards (`.isn-svc` and `.isn-step-art`), the mega-menu marks, the category rail. Ink on all five tints computes between 17.8:1 (blue) and 18.6:1 (yellow), so a tint needs no per-accent decision at all — the type is `--i-ink` and that is the end of it. One tint per accent is also what makes the rule the site is held to: the same brand colour is the same light background everywhere it appears, so a blue category card and the Analyse card are one measured value. A saturated ground is the exception, and it is where a second ink comes from: white on #2463FF is 4.9:1 and clears AA for body text, where white on #FF6A13 is 2.9:1 and fails even the large-text threshold — and a name nobody can read is not a brand colour, it is a bug. So `--card-fg` is per accent for that case. Since the rail stopped being saturated its only reader is `.isn-on-accent .isn-ic`, which inverts the two-tone icons on the same grounds; the token stays because the case it answers is real and the next saturated surface should not have to re-derive it. */ body.isn { /* ── The brief's palette, verbatim ─────────────────────────────────────── */ --i-ink: #0a0a0a; --i-white: #ffffff; --i-paper: #f7f7f4; --i-grey: #f1f1ef; --i-line: #e2e2de; --i-muted: #6f706c; --i-blue: #2463ff; --i-blue-soft: #eef3ff; --i-orange: #ff6a13; --i-orange-soft: #fff1e7; --i-yellow: #ffc928; --i-yellow-soft: #fff8d9; --i-green: #13a866; --i-green-soft: #eaf8f1; --i-red: #ff4d4f; --i-red-soft: #fff0f0; /* ── Two colours from a second brief, and they are deliberately not aliases ── The top strip arrived after the palette above and named its own two values: #E8F0FF for the ground and #4B4B4B for the text. Neither is in the list above and neither is a rounding of something that is — the ground is a full point bluer than `--i-blue-soft`'s #EEF3FF, and the ink is between `--i-muted`'s #6F706C and `--i-ink`, warm grey against neutral grey. So they are declared rather than mapped onto the nearest existing token. Mapping them would be a quiet redesign of a value the brief gave in hex, and the difference is visible: the strip on #EEF3FF reads as the same paper as the scan card and the FAQ tint, where #E8F0FF reads as a band of its own above white — which is the whole job of the row. Named for the role and not the colour, because the role is what a later change would follow: anything on this strip takes these two and nothing else does. */ --i-strip: #e8f0ff; --i-strip-fg: #4b4b4b; /* ── The type scale ─────────────────────────────────────────────────────── This page adds **no font family and no type value of its own.** Both the faces and the hierarchy they are set in are the ones the site already had — `styles/tokens.css` and `styles/base.css` — aliased here so that every rule below names an `--i-*` token and the whole identity is one system rather than a per-component decision: · `--font-display` Figtree 400–800 — headlines *and* body copy, exactly as the rest of the site sets it. `--font-body` is defined as `--font-display` in tokens.css; the two aliases below keep the two roles nameable without implying two faces. · `--font-mono` IBM Plex Mono 400/500 — uppercase metadata only: the section eyebrows, the small labels and the bar's own links. Never a headline, never body copy. · `--i-wordmark` the logotype's stack, and the one place a fourth face would not be an inconsistency — see the paragraph on it below. Two faces and six weights, which is exactly what the stylesheet request in build.mjs asks for. An earlier pass on this page introduced Inter Tight for the headlines at 750–900: it is gone, and so is every number that arrived with it. It was never part of this design system, and the weights it was set at do not exist in Figtree's request (400;500;600;700;800), so every 850 and 900 in this file was being synthesised or rounded. Display type is 800, tightened by tracking rather than by weight, which is what the rest of the site does and the reason it reads as type rather than as a template. ── Every number below is the site's own, not this page's ───────────────── The sizes are tokens.css's `--t-*` scale and the tracking and leading are the values base.css sets on `h1`, `h2`, `h3` and `.eyebrow`. That is the point of aliasing rather than redeclaring: a headline here sets identically to a headline on the English site, so the colour, the product photography and the motion carry the new identity and the typography carries the old quality instead of competing with it. Exactly one number is not copied — the hero's floor, and the reason is under `--i-hero`. */ --i-display: var(--font-display); --i-body: var(--font-body); --i-mono: var(--font-mono); /* ── The logotype's stack is the site's own, alias and all ────────────────── `var(--font-wordmark)`, unchanged and unwrapped: Neue Haas Grotesk Display first, Helvetica Neue behind it. Exactly what `.topbar .brand-text` sets for `Library of Trade`, so the two lockups are the same letter on the same machine. This token used to splice `var(--font-display)` into the middle of that chain — Figtree — on the reasoning that a webfont that actually loaded beats the OS's grotesk beside copy set in a designed face. The instruction is the opposite and it is the instruction that decides a logotype: the wordmark uses the same font as the Library of Trade site. Figtree at 800 and Helvetica Neue at 700 are visibly two different logos, and this is one brand family. The licensed face is still absent from this repo — no .woff2, .otf or .ttf anywhere in the tree — so on a Mac this resolves to Helvetica Neue and on Windows to Arial Bold, and both sites drift together rather than apart. Drop the woff2 into `assets/fonts/`, add its `@font-face`, and both lockups start resolving to the real face with no change here. */ --i-wordmark: var(--font-wordmark); /* base.css sets one tracking for `h1`, `h2` and `h4` — -0.021em — and one for `h3`, and that is the whole heading system: the hero is not a special case with a tighter setting of its own. So `--i-track-hero` and `--i-track-display` carry the same number. Two role names for one decision, which means a later change to only one of them reads as a deliberate departure rather than as drift nobody noticed. 0.1em on the label is `.eyebrow`'s, and it is not only the eyebrow's: twelve rules in this file spend `--i-track-label`, so it is the site's setting for any small capitalised label and not one element's preference. It was 0.16em once, on the reasoning that `INKOOPCOLLECTIEF VOOR BEDRIJVEN` is longer than any of the site's own eyebrows and needs the air. **Both halves of that were wrong.** No eyebrow on this site has ever read that — the seven of them are inventoried above the `.isn-eyebrow` rule, and the longest is /nl/'s `Hét inkoopcollectief voor MKB Nederland` at 39 characters counted, against 31 for the string quoted here. So the sentence argued for extra air from a string that was both absent and eight characters shorter than the case it was supposed to be the extreme of. 0.1em is the site's value and stays; what is deleted is a justification, not a number. One consumer has since dropped out. `.isn-hero--scan .isn-hero-copy .isn-eyebrow` sets `--i-track-body` instead, because 0.1em exists to give capitals the rhythm their letterforms withhold and that eyebrow is no longer set in capitals. That is a departure from this token, argued where it happens rather than here. */ --i-track-hero: -0.021em; --i-track-display: -0.021em; --i-track-h3: -0.014em; --i-track-body: 0; --i-track-label: 0.1em; /* base.css's `h1`, `h2`, `h3` and body leadings, in that order and nothing between them. */ --i-lead-hero: 0.95; --i-lead-display: 0.96; --i-lead-h3: 1.12; --i-lead-body: 1.55; /* ── The one number on this page that is measured rather than copied ──────── `--t-display` is `clamp(40px, 6.2vw, 76px)` and this keeps its 76px cap and raises its floor, but the middle term is not a `vw` at all — it is `cqw`, a fraction of the hero's **copy column**, and `.isn-hero-copy` carries `container-type: inline-size` to make that resolvable. The reason is arithmetic that a viewport unit cannot see. The headline is two fixed lines and the longer of the two, `Slimme bedrijven`, measures 7.86em in Figtree 800 at this tracking — measured, not estimated. So a two-line headline needs `7.86 × size` of column, and the column is a *fraction* of the viewport minus a gap minus a 520px card. At 1440 that is 564px, and 6.2vw would ask for 89px in it: the headline broke into four lines, which is the one thing the brief rules out about it by name. 12.4cqw is 7.86em with a little slack, which means the two lines fit at every width the two-column hero exists at — 65px at 1201, 70px at 1240 and up — and the size is correct by construction rather than by a breakpoint per viewport. Below 1200 the hero is one column, the column is the shell, and the cap takes over at 76px. The floor is 44px rather than `--t-display`'s 40, and 44 exactly: it is the bottom of the brief's 44–54 mobile band *and* the largest size at which `Slimme bedrijven` still sets on one line in a 375px phone's 335px column — with the tighter tracking the 460 media query puts on it, without which the crossover is 42.6 and the band cannot be met at all. Under about 370px of viewport the first line does break in two; the arithmetic is in that query. */ --i-hero: clamp(44px, 12.4cqw, 76px); --i-h2: var(--t-h2); --i-h3: var(--t-h3); --i-lead: var(--t-lead); --i-body-size: var(--t-body); --i-small: var(--t-small); /* The smallest size on the site, which is mono's. The eyebrows and the labels take it in Plex Mono, where 12px is the size the face is drawn for; the page's own small print takes it in the body face, and that is the only place a 12px Figtree line appears. */ --i-micro: var(--t-mono); /* Form fields take the body size, and the token exists rather than the field rules naming `--i-body-size` directly because of one fact about it: 16.5px is above the 16px below which iOS zooms the page on focus. A later change to body copy must not silently take the fields under that line. */ --i-field: var(--i-body-size); /* ── Rhythm ───────────────────────────────────────────────────────────── */ /* ── The page's own width, and it is a backstop rather than a measure ─────── 1800px, and it was 1240. 1240 was a *content* width: every section was 1240px centred, the bar and the hero ran on the gutter, and on a 1440 window that put the wordmark at 56 and every section headline at 100 — two vertical lines 44px apart, which is exactly the amount that reads as a mistake rather than as a decision. One container now, `.isn-shell` below, and this is its cap. So the page is on the gutter at every width up to 1800 — 1280, 1440, 1512, 1728 all are — and past that it centres as one block, bar included, so the line holds there too instead of the sections stopping and the bar carrying on. 1800 rather than nothing at all because a fourteen-card rail and a two-column compare table on a 2560 monitor would otherwise set 2448px wide, and reading across that is a neck movement. Reading measures are *not* this: they belong on the text — `--i-lead`'s 46ch, the leads' 62ch, the step bodies' 30em — so a block starts on the line and stops where the sentence should. `docs/setup/13-visual-conventions.md` calls that the difference between a container and a measure. */ --i-shell: 1800px; --i-gutter: clamp(20px, 5vw, 56px); --i-y: clamp(64px, 7.4vw, 118px); --i-bar: 68px; /* The utility strip above the bar — three benefit claims and three shortcuts. 38px, from the brief's `36–40px` band and explicitly not higher. A height and not padding, because the row holds a 19px image beside a 12px line and the two would otherwise set the height between them: `min-height` plus `align-items: center` means the strip is 38px whether the images have arrived or not, which is what stops the nav under it from jumping once per icon on a cold load — and what keeps the fold arithmetic below honest at first paint. */ --i-strip-h: 38px; /* Everything above the hero, hairline included: the strip's 38px, `body.isn .nav`'s 68px `min-height`, and the bar's 1px `border-bottom`. Declared rather than measured, because the hero's fold rule subtracts it in CSS and `--bar-h` — js/nav.js's — does not exist at first paint. One token, and one place to change it: anything added above the nav is added here too, or the hero overruns the fold by exactly the new row's height. The strip is the proof that the warning was worth writing — it arrived after the fold was pinned, and this sum is the only edit the pin needed. */ --i-chrome: calc(var(--i-strip-h) + var(--i-bar) + 1px); --i-r: 20px; --i-r-sm: 12px; --i-r-lg: 26px; background: var(--i-white); color: var(--i-ink); font-family: var(--i-body); font-size: var(--i-body-size); line-height: var(--i-lead-body); letter-spacing: var(--i-track-body); /* Figtree at 800 over a saturated ground gets crunchy without this. */ -webkit-font-smoothing: antialiased; } /* Every accent resolves through the same handful of variables, so a component says `isn-x--orange` once and never names a hex value. `--a` is the saturated colour, `--a-soft` its tint, `--card-fg` the ink that is legible on `--a`, and `--a-ink` the accent at a weight that survives *on* `--a-soft`. `--a-ink` is the newest of the four and has two readers, both of them a stroke of the accent on the accent's own tint: the outline drawings on the three process cards, which were the first thing on this site to do that, and the rail's drawn stand-in now that `.isn-cat` is a tint too. Blue carries it as itself — #2463FF on #EEF3FF measures 4.39:1. Green and red are the two that only nearly do, 2.81:1 and 2.95:1 on their own tints, which is under the 3:1 a non-text stroke wants and is why they are worth writing down rather than rounding up: both are a drawing's outline and not type, both are read at 3–4 units of stroke, and darkening either produces a bottle green and a brick that stop being this palette's colours. Orange is close and gets there by being mixed a sixth toward the ink, landing at #D75B12 and 3.52:1 on its own tint. Yellow cannot get there at all, and that is worth stating plainly rather than fudging: #FFC928 on #FFF8D9 is 1.4:1, a line that reads as a smudge, and every darker yellow is a brown. Mixing it toward the ink until a 4-unit line holds produces #937518 — olive, dull, and the one drawing in the row that looked like it came from another palette. So yellow's ink is not a yellow at all: it borrows orange's, the same #D75B12, which is 3.6:1 on the yellow tint and stays a warm saturated line instead of a dead one. The surface is still `--a-soft`, so the card is still the yellow one at a glance across the row — what changed is the hue of the stroke on it, not the accent. The two accents sharing one ink is the point rather than a shortcut: there is no third warm dark in this palette to invent. The mix is always on the colour and never on the tint: the tint is what makes the three cards legible as three steps from across the page, and darkening it to rescue a stroke would trade the thing that works for the thing that doesn't. */ body.isn [class*='--blue'] { --a: var(--i-blue); --a-soft: var(--i-blue-soft); --card-fg: var(--i-white); --a-ink: var(--i-blue); } body.isn [class*='--orange'] { --a: var(--i-orange); --a-soft: var(--i-orange-soft); --card-fg: var(--i-ink); --a-ink: color-mix(in srgb, var(--i-orange) 84%, var(--i-ink)); } body.isn [class*='--yellow'] { --a: var(--i-yellow); --a-soft: var(--i-yellow-soft); --card-fg: var(--i-ink); --a-ink: color-mix(in srgb, var(--i-orange) 84%, var(--i-ink)); } body.isn [class*='--green'] { --a: var(--i-green); --a-soft: var(--i-green-soft); --card-fg: var(--i-ink); --a-ink: var(--i-green); } body.isn [class*='--red'] { --a: var(--i-red); --a-soft: var(--i-red-soft); --card-fg: var(--i-ink); --a-ink: var(--i-red); } body.isn [class*='--grey'] { --a: var(--i-grey); --a-soft: var(--i-grey); --card-fg: var(--i-ink); } /* ── Shared furniture ─────────────────────────────────────────────────────── */ /* ── The page container. One rule, and the bar is in it ─────────────────────── Every left edge on this page is this declaration: the wordmark's, the hero headline's, every section headline's, the FAQ's, the mission's. That is why `body.isn .nav` is in the selector list rather than carrying its own copy of the same three values — the bar and the content cannot drift apart if there is only one place to change. The `padding` shorthand, not `padding-inline`: `.nav` in styles/base.css is `padding: 0 var(--gutter) 14px`, and that 14px bottom belongs to a bar that sits over a black hero with a utility strip in it. The shorthand is what removes it. A block that needs a narrower measure caps *itself* and stays on this line — see `--i-shell` above. A block that wants to run past the page edge does it by leaving the container: the rail's `.cats-viewport` is the one that does, and it reproduces this rule's left edge with `max(var(--i-gutter), calc((100vw - var(--i-shell)) / 2 + var(--i-gutter)))` so its first card still starts on the line while the row bleeds off both sides. */ .isn-shell, body.isn .nav { width: 100%; max-width: var(--i-shell); margin: 0 auto; padding: 0 var(--i-gutter); } .isn-section { padding: var(--i-y) 0; } .isn-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* base.css's `.eyebrow` declaration for declaration: uppercase IBM Plex Mono at 12px/500/0.1em, leading 1.4, so it reads as metadata rather than as the first line of the copy. Only the colour is this page's, because `--i-muted` is. It is written out rather than reached by adding `.eyebrow` to the markup because the class name is this page's; the values are the site's either way, and 500 is Plex Mono's heaviest requested weight. A label at 700 in the body face — which is what this was two passes ago — is a small bold sentence, not a label. ── Seven instances, and not one of them a section label ───────────────────── It was the section label: every `isnHead()` printed one, and the founder and mission sections printed their own. All nine of those are out on request — "haal de eyebrows weg bij de secties. behalve bij de hero section." What is left is a hero label or a result label and never a chapter heading. There are seven because the site grew pages, not because the section label came back. Read out of build.mjs's seven `class="isn-eyebrow"` sites: · /nl/ hero `ISN_HERO.eyebrow` Hét inkoopcollectief voor MKB Nederland · /nl/besparingsscan/ `ISN_SCAN_PAGE.hero.eyebrow` Gratis inkoopcollectief voor MKB · the scan outcome panel `ISN_SCAN.three.resultEyebrow` Wat we zien · category index `ISN_CATEGORY_INDEX.eyebrow` Categorieën · a category hero `ISN_CATEGORY_PAGES.energie.hero` Energie · branche index `ISN_BRANCHE_INDEX.eyebrow` Voor wie? · a branche hero `ISN_BRANCHE_PAGES['bouw-installatie'].hero` Bouw & installatie This block used to name the hero's string as `INKOOPCOLLECTIEF VOOR BEDRIJVEN` and claim that /nl/ and /nl/besparingsscan/ printed *the same* one. Neither survived: the copy was rewritten and the two heroes have never matched. The strings are listed with their sources so the next reader re-derives them from the content files instead of trusting this comment. ── All seven are sentence case in the source; the caps are this rule's ────── Not one content file types capitals, and `ISN_HERO.eyebrow`'s docblock gives the reason: typing `HÉT INKOOPCOLLECTIEF VOOR MKB NEDERLAND` there changes nothing on screen and introduces a second way of writing the same field. So `text-transform` below is the only thing making an eyebrow uppercase anywhere on this site. Which is what makes it removable per instance, and one instance has removed it: `.isn-hero--scan .isn-hero-copy .isn-eyebrow` sets `text-transform: none` on instruction, and takes `--i-track-label` off with it, because 0.1em is tracking that only capitals need. For that field alone the "typing capitals changes nothing" argument no longer holds — `ISN_SCAN_PAGE.hero .eyebrow`'s docblock says so in place. Sentence case is still right there; it is now load-bearing rather than a filing convention. The colour is overridden twice, and both overrides are argued where they sit: green by `.isn-outcome .isn-eyebrow`, blue by the scan hero's rule. There was briefly one instance more than the seven above — `GRATIS BESPARINGSSCAN` over the besparingsscan section's headline, asked for by name in that brief and then withdrawn: "haal deze ook weg en zorg dat die titel daar staat dus top aligned." Its removal is the whole of that alignment, since `.isn-h` carries no top margin; see `isnScanSection()` in build.mjs. The 18px below is therefore hero spacing only. `.isn-head`'s own bottom margin is untouched, and every section that prints a head still starts with its headline, which is what makes them read as statements instead of as chapters in a template. */ .isn-eyebrow { margin: 0 0 18px; font-family: var(--i-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: var(--i-track-label); text-transform: uppercase; line-height: 1.4; color: var(--i-muted); } /* Every headline on the page, one rule, and it is base.css's `h1, h2, h3, h4` rule: Figtree 800, tracked -0.021em, leading 0.96. The tracking does the work the weight is not allowed to — 800 tightened sets denser than a synthesised 900 and keeps the counters open, which is the difference between type and a bold template. 0.96 on a display line, tighter than any body leading and deliberately so: these headlines are three or four words, and a three-word headline set at 1.2 reads as three separate lines rather than as one block. */ .isn-h, .isn-hero-h, .isn-mission-h, .isn-final-h, .isn-outcome-h, .isn-calc-figure { font-family: var(--i-display); font-weight: 800; letter-spacing: var(--i-track-display); line-height: var(--i-lead-display); text-wrap: balance; } .isn-h { margin: 0; font-size: var(--i-h2); } .isn-lead { max-width: 62ch; margin: 20px 0 0; font-size: var(--i-lead); line-height: var(--i-lead-body); color: var(--i-muted); } .isn-head { margin-bottom: clamp(38px, 4.4vw, 66px); } .isn-micro { margin: 0; font-size: var(--i-micro); font-weight: 600; letter-spacing: var(--i-track-body); color: var(--i-muted); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ /* Two variants on the page, plus two inversions of them for the blue block. The brief allows exactly two actions and names them; `Start nu`, `Word lid` and `Ontdek meer` are forbidden by name, which is a copy rule this file cannot enforce and a reason not to build a third button style that would invite one. */ .isn-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--i-r-sm); font-family: var(--i-body); font-size: var(--i-small); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .isn-btn:hover { /* One pixel. Enough to answer the pointer, not enough to be motion. */ transform: translateY(-1px); } .isn-btn[disabled], .isn-btn:disabled { cursor: not-allowed; opacity: 0.45; transform: none; } .isn-btn--solid { background: var(--i-blue); border-color: var(--i-blue); color: var(--i-white); } .isn-btn--solid:hover { background: #1b4fd8; border-color: #1b4fd8; } .isn-btn--quiet { background: var(--i-white); border-color: var(--i-line); color: var(--i-ink); } .isn-btn--quiet:hover { border-color: var(--i-ink); } /* The two on the blue block: white solid, and an outline of the same white. */ .isn-btn--white { background: var(--i-white); border-color: var(--i-white); color: var(--i-blue); } .isn-btn--white:hover { background: var(--i-blue-soft); border-color: var(--i-blue-soft); } .isn-btn--ghost { background: transparent; border-color: color-mix(in srgb, var(--i-white) 55%, transparent); color: var(--i-white); } .isn-btn--ghost:hover { border-color: var(--i-white); background: color-mix(in srgb, var(--i-white) 12%, transparent); } .isn-btn--bar { min-height: 44px; padding: 0 18px; } .isn-btn--panel { width: 100%; justify-content: center; margin-top: 18px; } .isn-btn-arrow { flex: none; /* Optically centred against a 700-weight cap height, which sits above the x-height. */ margin-top: 1px; transition: transform var(--dur-fast) var(--ease); } .isn-btn:hover .isn-btn-arrow { transform: translateX(3px); } /* `.isn-btn--to-scan` used to live here — it hid the arrow on a button that descended the page instead of going anywhere. Every link it was on pointed at `#besparingsscan`, and all three now point at `./besparingsscan`, which is a route: /nl/besparingsscan/ is its own page, so the arrow is correct on all three and the modifier has no users left. Deleted rather than left standing, the same treatment the hand-drawn underline's classes got. */ /* ── Icons ────────────────────────────────────────────────────────────────── */ /* One drawing, two colours, five accents — see content/isn-icons.js. The badge sets `color` for the edge and `--ic-soft` for the interior plane, and never draws a plate of its own: a rounded square behind every glyph is the icon-pack look the brief rejects by name. */ .isn-ic { display: inline-flex; flex: none; color: var(--a, var(--i-blue)); --ic-soft: var(--a-soft, var(--i-blue-soft)); } .isn-ic > svg { width: 26px; height: 26px; } .isn-ic--lg > svg { width: 38px; height: 38px; } .isn-ic--xl > svg { width: 62px; height: 62px; } .isn-ic--hub > svg { width: 30px; height: 30px; } /* On a saturated card the two-tone system inverts: the edge becomes the card's own ink and the plane a translucent film of it, because the accent it would otherwise be drawn in is the ground it is sitting on. */ .isn-on-accent .isn-ic { color: var(--card-fg); --ic-soft: color-mix(in srgb, var(--card-fg) 22%, transparent); } /* ── The category visual ──────────────────────────────────────────────────── */ /* One image zone, one set of rules, every category. The visuals are cut out on transparency and the card's accent tint is the background, so there is no white plate, no inner card and no second frame here — the wrapper is a fixed box and the image is contained inside it. The tint is near-white, which is the one thing about this zone that changed with `.isn-cat`: a cut-out is now a dark object on a light ground rather than a light one on a saturated ground, and it is still a ground and not a plate because it is the whole card and not a box inside it. `--visual-h` is the only thing a section changes, and it changes it once for all of its cards: the objects arrive one at a time and must not each set their own scale, or fourteen cards read as fourteen photographers. `object-fit: contain` plus both maxima and `width/height: auto` is what keeps a portrait object and a landscape one at the same *visual* weight rather than at the same width. Nothing is ever cropped and nothing is ever stretched. The single track is written out as `minmax(0, 1fr)` rather than left implicit, and that is what makes the maxima work at all. An implicit track is auto-sized, so it grows to the image's intrinsic 700px, and `max-height: 100%` then resolves against *that* — a percentage measured against a box the percentage's own subject just defined. The image came out 236px tall in a 164px zone and lay over the card's name. A `minmax(0, 1fr)` track takes its size from this element's definite height instead, so the percentage has something real to resolve against and the object scales down to fit. It still never scales up: `max-*` only ever shrinks. */ .isn-visual { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; height: var(--visual-h, 132px); padding: var(--visual-pad, 8px); box-sizing: border-box; } .isn-visual-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* The stand-in, for a category whose photograph is missing: its own icon, scaled up. Not a grey box and not a spinner — the card is complete, it simply has a drawing where it will later have a photograph, and nothing about it reads as missing. Every one of the twenty rail entries keeps an `icon` for exactly this reason (see `bouwmaterialen` in content/isn.js), so this path is a live contract even on the day no card is taking it. ── `--a-ink`, because the ground under it changed ─────────────────────────── This used to be `--card-fg` and a 20% film of it, which was right while the only card printing a drawing was a *saturated* one: the accent was the ground, so the drawing had to be the card's ink. `.isn-cat` is now `--a-soft`, and `--card-fg` on a tint is the one combination that fails outright — blue's is `--i-white`, so a missing `energie.png` would have drawn a white bulb on #EEF3FF and the card would have looked empty rather than provisional. `--a-ink` is the token that exists for precisely this: the accent at a weight that survives on its own tint, blue and green and red as themselves and the two warm accents mixed a sixth toward the ink. It is the same stroke the process cards' drawings are set in, on the same ground, which is what makes a stand-in read as the accent's own object. The interior plane needs no rule at all now, and that is why the second declaration is gone: `.isn-ic`'s own `--ic-soft` is already `--a-soft`, so a filled shape is painted in the ground it sits on and occludes what is behind it instead of crossing it — exactly what `.isn-una-plane` does on the process cards, and argued there. `--grey` has no `--a-ink`, so a grey card's drawing falls back through an invalid `color` to the ink it inherits from the card, which is the value that rule sets anyway. */ .isn-visual--drawn .isn-ic > svg { width: min(72px, 52%); height: auto; aspect-ratio: 1; } .isn-visual--drawn .isn-ic { width: 100%; justify-content: center; color: var(--a-ink); } /* ── The strip above the bar ───────────────────────────────────────────────── */ /* A 38px band of #E8F0FF over the whole width: three benefit claims on the left, three shortcuts on the right, and nothing else in it. ── Flow, and that is the whole mechanism ──────────────────────────────────── base.css's strip lives *inside* a `fixed` header and rides up on a transform js/nav.js drives, because `--topbar-h` is reserved as padding by a dozen rules across five stylesheets. This one is the element *before* a `sticky` header, so it scrolls away once, the nav lands at y=0 by itself, and there is no script, no `--bar-shift`, no measured height and no keyboard trap. The full argument is over `isnUtilityStrip` in build.mjs; the only thing this file has to do about it is add `--i-strip-h` to `--i-chrome`, which it does at the top. Nothing here has a `z-index`. The bar above it does, and it never needs to win: while any of the strip is on screen the bar has not reached `top: 0`, so the two are never in the same place. ── What the brief rules out is the whole reason this is four flat rules ────── No gradient, no shadow, no radius, no card. So there is no border either — the strip and the white bar under it separate on tone, and a hairline between two different colours is a third edge in a 38px row that is meant to read as calm. The one visual decision left is the ground, and it is a hex from the brief. */ .isn-utility { background: var(--i-strip); } /* `.isn-shell` in the markup supplies the width, the cap and the gutters. This is the row. */ .isn-utility-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--i-strip-h); } .isn-utility-claims { display: flex; align-items: center; gap: 26px; min-width: 0; margin: 0; padding: 0; list-style: none; } /* Tighter than the claims: three items that are each one word, against three that are three. */ .isn-utility-nav { display: flex; align-items: center; gap: 22px; } /* ── One rule for a claim and a shortcut, because they are one voice ────────── Both are a mark beside a short line at the same size, weight and colour, and the row's hierarchy comes from *side* rather than from styling: benefits left, navigation right. Two rules would be two chances for them to drift. ── 12px, which is the site's smallest and not a new number ────────────────── The brief asks for benefit text "duidelijk kleiner dan de main-nav tekst". `.nav-links a` in base.css is the body face at 14px/500 untracked, so `--i-micro` — the 12px that the page's own small print already takes in this face — is two pixels under it and the instruction is met with a token that already existed. Not smaller than that. Below 12 there is only `--t-mono-sm`'s 10.5px, which is drawn for tracked-out uppercase metadata and is not a size to set a sentence-case claim a visitor is meant to read once and believe; and a fourth type value would contradict the header of this file, which states that this page adds no type value of its own. So the difference in size is the two pixels, and the rest of the hierarchy is carried by weight against the nav's neighbours — the 700 CTA and the 21px lockup — and by this row being 38px tall. */ .isn-utility-claim, .isn-utility-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--i-body); font-size: var(--i-micro); font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--i-strip-fg); /* The row is one line and stays one line. A claim that wrapped would take the strip past the 40px the brief caps it at, which is the failure this prevents rather than styles. */ white-space: nowrap; } .isn-utility-link { text-decoration: none; transition: color var(--dur-fast) var(--ease); } /* Colour, and only colour. No background, no underline, no card — the brief rules all three out by name, and on a 38px band any of them would make three shortcuts into three buttons. */ .isn-utility-link:hover, .isn-utility-link:focus-visible { color: var(--i-ink); } /* ── There was a third rule here, singling `MijnISN` out ────────────────────── `.isn-utility-link[data-shortcut='mijnisn'] { font-weight: 600 }` — half a weight heavier than its two neighbours, which an earlier brief permitted and which cost nothing while the link was absent from the built HTML. It renders now, and the instruction that put it there is explicit about the consequence: "Alle drie moeten exact dezelfde visuele stijl hebben — donkergrijs, zelfde icon height, zelfde tekstgrootte, zelfde verticale alignment, consistente spacing." So the rule is gone and so is the `data-shortcut` attribute it was keyed on, which existed for this one rule and for nothing else. What is left is the pair of rules above: one for the row's voice, one for the link's hover. */ /* The four supplied marks. `width` and `height` are on the elements — 15 for the check, 19 for the three nav marks, both exact, since each file is a square canvas at 4× its box — so this rule only has to stop a flex row from squeezing them. Nothing recolours them: the check arrived blue and the three arrived near-black, which is what the strip wants. See the module docstring in icons.py. */ .isn-utility-mark { flex: none; } /* ── The bar ──────────────────────────────────────────────────────────────── */ /* White, sticky, 68px, one hairline — and the same element `js/nav.js` already drives. The glass, the blur, the theme table and base.css's *own* utility strip — the one inside the header, riding up on a transform — all belong to a black hero this page does not have. This page's strip is the sibling above, and js/nav.js cannot see it. What is kept is the behaviour: the burger panel, its focus and Escape handling, `aria-current` on the in-page links, and the `--bar-h` publication the panel's own height cap reads. `data-theme="light"` is printed on the bar and nothing changes it, because no ISN section carries `data-theme` — so nav.js's section list is empty and the bar cannot flip. */ body.isn .topbar { position: sticky; transform: none; background: var(--i-white); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--i-line); color: var(--i-ink); } /* Width and padding come from the container rule this shares with `.isn-shell`. */ body.isn .nav { gap: 30px; min-height: var(--i-bar); border-top: 0; } body.isn .nav-end { gap: 18px; } .isn-brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; color: inherit; text-decoration: none; } /* This brand's own mark: five petals pinwheeling around a centre, in the five accent colours. It is the proposition as one drawing — separate parties, one rotation — and it is why the borrowed marks that stood here before are gone. ── Placed, not masked, and that is the mechanism changing ─────────────────── Every mark this bar has carried until now was a black PNG masked in `currentColor`, so one file served the bar, the footer and a dark ground. A five-colour drawing cannot be: a mask reads alpha only and would flatten all five petals to one ink. So this is `background-image`, the colours are in the pixels, and a ground this mark cannot sit on is now possible rather than impossible — see `isnMark()` in build.mjs. The five inks are the site's five accents as good as exactly: the yellow samples #ffc813 against `--i-yellow`'s #ffc928, and the blue #447afd against `--i-blue`'s #2463ff, which is the one that is visibly lighter. Nothing in the stylesheet depends on them matching — no rule reads a colour out of this file — but it is why the mark sits in this palette without being tuned to it. ── Cut out, trimmed, and 16 colours ──────────────────────────────────────── The supplied file is 1254 × 1254 of RGB with the drawing floating in white. This asset is that drawing lifted off its ground by alpha, trimmed to itself at 512 × 464 — so the box and the mark are the same rectangle and the left edge lands on the gutter the wordmark and the headline below it already sit on — and quantised to sixteen colours, which five flat inks do not notice and which took it from 95 KB to 44 KB. The white lines between the petals went transparent with the ground, since they run out to the edge; on this page's white that is the same picture, and on a colour the petals separate in that colour. 34px is the globe's height, kept: the ratio is 1.10 rather than 0.99, so the mark is ~4px wider than before and reads as the same weight beside a wordmark whose block measures ~36px. */ .isn-mark { display: inline-block; flex: none; height: 34px; aspect-ratio: 512 / 464; background-image: url('../assets/logo-mark-isn.png'); background-repeat: no-repeat; background-position: center; background-size: contain; } /* The wordmark, and the one place on this page that is not set in the display face. ── Four numbers copied from `Library of Trade`, not re-derived ────────────── `.topbar .brand-text` in base.css sets that lockup at 21px / 700 / 0.86 / -0.025em, and this is those four values. The instruction was the font of the Library of Trade site, and a logotype is the face *and* its setting: Helvetica Neue at 700 tracked -0.025em is a different object from the same face at 800 tracked -0.03em, and side by side in one brand family the difference reads as a mistake rather than as a variant. So the only thing this rule still decides for itself is that the name is two lines, which is `ISN_META.wordmark`'s decision and not a typographic one. At 21px and 0.86 the cap of `Inkoop` and the baseline of `Nederland` measure ~36px against the 34px mark, so the text block and the mark are one object of the same visual size — which is what makes it a logo and not a caption beside an icon. `Inkoop Service` is a third wider than `Library of`, and 21px clears the two-item nav and the CTA in a 68px bar with room to spare because Helvetica Neue Bold sets narrower than Figtree 800 did. No colour. It inherits the bar's ink, the same way the mark takes its blue from a rule of its own; nothing here has to know which ground it is on. */ .isn-brand-name { font-family: var(--i-wordmark); font-size: 21px; font-weight: 700; line-height: 0.86; letter-spacing: -0.025em; white-space: nowrap; } .isn-brand-name > span { display: block; } /* ── The bar takes the site's setting, and only its colour is this page's ──── base.css sets the nav links, the panel links and the toggle in uppercase IBM Plex Mono at 12px/500/0.08em — the control-room voice — and these three rules used to override all of it with the body face at 15–17px, sentence case, on the reasoning that Dutch labels like `Hoe het werkt` set a third wider in uppercase mono and would crowd a two-line lockup. They do set wider, and at base.css's own 12px it does not matter: `HOE HET WERKT` measures ~105px, the two links and their gap ~230px, and the bar is 1240px wide with a 190px lockup and one CTA in it. The earlier objection was to uppercase mono at *15px*, which nothing on the site asks for. So all that is left here is colour — `--fg-sub` and `--fg` are dark-theme values and this page is paper — and the panel's hairline, which is the palette's and not the type's. */ body.isn .nav-links a { color: var(--i-muted); } body.isn .nav-links a:hover, body.isn .nav-links a[aria-current='page'] { color: var(--i-ink); } /* Beside the two nav links, so it is set as one of them. */ .isn-nav-login { font-family: var(--i-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--i-muted); text-decoration: none; } .isn-nav-login:hover { color: var(--i-ink); } body.isn .nav-toggle { color: var(--i-ink); } body.isn .nav-panel { padding: 6px var(--i-gutter) 24px; background: var(--i-white); border-top: 1px solid var(--i-line); } body.isn .nav-panel a { color: var(--i-ink); border-bottom: 1px solid var(--i-line); } /* The panel's one call to action, and `display` here is a fix rather than a tidy — the same fix base.css makes for `.nav-panel .btn`, which the ISN button did not inherit because it is a different class. `body.isn .nav-panel a` above is (0,2,1) and outranks `.isn-btn`'s own `inline-flex` at (0,1,0), so the button was a block box: no flex centring, which is what `.isn-btn--panel`'s `justify-content: center` was written to do, and no `gap`, so the arrow sat straight against the last letter and then dropped to a second line. This selector is (0,3,1) and wins. `border-bottom-width` is the older half of the rule and stays: that same hairline sets every row's bottom border to 1px, and on the button it lands on a border the other three sides draw at 1.5px, so without it the blue box is a pixel shallower along the bottom than at the top. */ body.isn .nav-panel .isn-btn { display: inline-flex; border-bottom-width: 1.5px; } /* ── The bar's two dropdowns ───────────────────────────────────────────────── `Categorieën` opens the fourteen categories in four named groups; `Kennis` opens Blogs, Guides and Besparingsscan. Both are base.css's disclosure — `.nav-drop`, `.nav-drop-toggle`, `.nav-drop-menu`, `.nav-drop-list`, `.nav-drop-all` — which was written for a Buyers & Co. menu that renders on no page, and is complete down to the panel variant and the caret's rotation. So this section restates colour and adds one layout, exactly as the three rules above it do for the nav row: reuse the class, override the palette. Two overrides are corrections rather than palette, and both are the light theme's doing. `--bg-raised` *is* `--bg` on light (tokens.css says so on purpose: the page separates with hairlines, not elevation), so base's row hover paints white on white and there is no hover at all; and `--fg-soft` under the `Alle categorieën` rule is a dark-theme grey. A menu row that does not answer the pointer reads as a heading, so the hover is a plane here — soft blue, the same one the scan's chips take when they are chosen, which is the page's existing "you have hold of this" colour. */ body.isn .nav-drop-toggle { color: var(--i-muted); } body.isn .nav-drop-toggle:hover, body.isn .nav-drop[open] > .nav-drop-toggle { color: var(--i-ink); } body.isn .nav-drop-menu { border-color: var(--i-line); border-radius: var(--i-r-sm); background: var(--i-white); } body.isn .nav-drop-list a { color: var(--i-ink); } body.isn .nav-drop-list a:hover { background: var(--i-blue-soft); } body.isn .nav-drop-all { border-top-color: var(--i-line); letter-spacing: var(--i-track-label); color: var(--i-muted); } body.isn .nav-drop-all:hover { color: var(--i-ink); } /* ── Capped to the window, and scrolling inside it ─────────────────────────── It has to be capped, because nothing else can scroll it. The menu is `position: absolute` inside a `position: sticky` bar, so whatever runs past the bottom of the window is not merely ugly — it is unreachable. Measured at 1440 × 900 with the page at the top and the groups still in a grid: the panel was 878.5px tall and its top edge is at 96.8, so it ended at 975.3, and the two rows that ended below 900 — `Notariële & juridische diensten` and the `Alle categorieën` footer — could not be brought back by scrolling. The bar rides up by the strip's 38px and then pins, which recovers 38 of the 75.3 and still leaves the footer off screen. At 1440 × 740 five rows were gone; at 1280 × 640, eight. This is base.css's `.nav-panel` argument one element in: "the overflow is simply not on screen and scrolling the page cannot bring it back — the bar does not move". Packing the groups below took the panel to 710.2 and is what actually fixes a 900px window — this cap is the net under it. It acts wherever 710.2 does not fit, which is any window shorter than 835.2, and it is the only thing standing between a 640px laptop and eight lost categories. ── Why the subtrahend is `--i-chrome`, and why the literal is 18 and not 32 ─ 28px of daylight under the panel is the target, and `--i-chrome` overshoots the panel's top by 10.2px, so the literal is 28 − 10.2 rounded to 18. Measured gap where the cap binds: 28.2px at 740 and at 640 alike. Above 835.2 the panel is shorter than the cap and the gap is whatever the content leaves — 92.9 at 900, 272.9 at 1080 — which is the requirement read the only way it can be, as a floor on the clearance and not a target for a menu that has stopped needing the room. `--i-chrome` is 107 — the strip's 38, the bar's 68 and its hairline. The panel's top is 96.8, because it hangs from the toggle's own box and not from the bar's bottom edge: the toggle is 21.7px tall and centred in the 68px row, so it ends at 82.8, which is 23.2 above the bar's bottom at 106, and base.css's `top: calc(100% + 14px)` hands 14 of that back. Those 10.2px are geometry rather than a fudge, and they are the same in both bar states — pinned, the panel's top is 58.8 against a bar that measures 69. Which is why the cap subtracts the unpinned 107 and not js/nav.js's `--bar-h`. On this page the bar is sticky and the strip is a flow sibling nav.js cannot see, so `--bar-h` reads 69 whether the strip is on screen or not; a cap measured from 69 is 813 tall and overruns a 900px window by 9.8px at the top of the page, which is the one place every reader starts. Measuring from the taller number costs a gap that opens to 66px once the strip has gone, and a panel with too much room under it is the side to be wrong on. Two heights, oldest first, so an engine without `dvh` still gets a cap. `dvh` is not dead weight on a rule that only acts at ≥1200px, where `.nav-links` is still on screen: that includes an iPad in landscape at 1366, and a retracting toolbar there is exactly the difference between the two units — the same reason `.isn-intake-sheet` gives. ── The panel scrolls; the page gains nothing ─────────────────────────────── `document.documentElement.scrollHeight` is 9730 with the menu shut and 9730 with it open, before this rule and after it: an absolutely positioned child of the bar was never part of the document's height. `overscroll-behavior` buys the other half of that — without it a wheel that reaches the end of the list carries on into the page, which slides the bar up and takes the open panel with it. The scrollbar is the one cost, and after the repack below it is rarely even drawn: at 1440 × 900 the panel is 710.2 against 775 of room and does not scroll. Where it does, on this machine the scrollbar is an overlay and `clientWidth` stays 530. A classic 15px one would take each column to 241.5 and each name's room to 183.5px, and these names cannot respond by wrapping — `.nav-links a` in base.css sets `white-space: nowrap` on every link in the bar, this menu's rows included, so `Notariële & juridische diensten` at a measured 191.7px would run into the column gap instead. It is 0.7px over the 191 it has today, so that edge is already touched; 8.2px over is the platform's worst case and it is not this rule's to fix. ── `.nav-links` in the selector, not `body.isn` ──────────────────────────── It keeps this off the burger panel by construction. In the stack the menu is `position: static` inside `.nav-panel`, which carries its own `dvh` cap and its own `overflow-y: auto`; a cap here would win at (0,1,1), put a second scroller inside the first, and then need undoing in a `.nav-panel` rule — the trap the width below declines to walk into. Both of the bar's dropdowns are in `.nav-links`, so `Kennis` is capped too, which is free: three rows never reach it. */ body.isn .nav-links .nav-drop-menu { max-height: calc(100vh - var(--i-chrome) - 18px); max-height: calc(100dvh - var(--i-chrome) - 18px); overflow-y: auto; overscroll-behavior: contain; } /* Five groups in two columns, and since the repack below they no longer have to divide evenly. An earlier version of this comment counted four and argued that an even number was the whole point, because an odd one leaves a hole in the second column. Both halves went stale at once: the fifth group arrived, and the columns stopped sharing rows. They now pack independently, so two groups stand on the left and three on the right, and the hole the even number was protecting is what the repack removed. ── The panel is wider than base.css's, by arithmetic rather than by taste ── 452px was measured for twelve category names in two columns, and for rows with nothing in front of the name. Every row here now opens with a 30px tile and a 10px gap, so the width is 452 + 2 x 40 = 532px: the tile added once per column and nothing else. Each group measures 249px of that (532 less the panel's 24px of padding, less the 8px column gap, halved — 250 on paper, 249 live), the row's own 9px either side takes 18, the tile and its gap take 40, and 191px is left for the name. 191 is the number worth keeping, because it is what the 209px column leaves a name today, to the pixel. Deriving the width from the tile instead of rounding up to a comfortable-looking 520 or 560 means the label column comes out of this change untouched: the longest name, `Technische benodigdheden` at 172.7px at 14px in this face, keeps exactly the 18.3px of slack it already had, and every measurement taken against the old panel still holds. Leaving the panel at 452 and letting the tile eat into the label column is the version that does not work, and it fails by 22px: 151px of name room breaks `Technische benodigdheden` onto two lines, and leaves `Schoonmaakproducten` (146.4px) 4.6px short of breaking too. That name took the title from `Schoonmaakproducten` when it replaced MRO; the order behind it is Schoonmaakproducten, `Schoonmaakdiensten` (135px), `Transport & logistiek` (127.8px) and `Pakketverzending` (110.8px). All five measured on the live panel with a Range over the text, not from the grid track, which reports the column and not the ink. ── Why the slack is load-bearing ── These links are `nowrap`, and this paragraph has now had it both ways. It is true that base.css sets no `white-space` on `.nav-drop-list a` — that is the correction an earlier version made — but `.nav-links a` does, and every row in this list is inside `.nav-links`. Measured over CDP on all twenty-five rows, `white-space` computes to `nowrap` on every one. So the correction was right about its selector and wrong about the outcome, which is the more expensive way to be wrong. That inverts what the slack defends against. The U+00AD two of the names carry at the compound seam, put there for the carousel card — `Schoonmaak­producten` and `Schoonmaak­diensten`, whose min-content would be `Schoonmaak-` at 93px — cannot fire under `nowrap`, so there is no two-line fallback to run short into. A column that comes out too narrow overflows instead, silently and to the right. `Notariële & juridische diensten` draws 191.7px of ink in the 191px it has, so that edge is not hypothetical: it is 0.7px past already, and invisible only because the panel's own padding is what it bleeds into. The measured room is the whole defence precisely because nothing downstream catches it. `grid-template-columns` is restated rather than inherited inside a group: `.nav-drop-list` is two columns, which is right for one list of twelve names and wrong five times over here — three names in two columns is a row and a half, and the group titles would stop lining up with anything. ── One class, and no `body.isn`, on purpose ── 532px is a bar-only number: in the burger panel the menu is the stack's width and a fixed 532 would put a horizontal scrollbar on a 390px phone. The selector is left at (0,1,0) so that `.nav-panel .nav-drop-menu`'s `width: auto` at (0,2,0) still outranks it, while it still beats base.css's own `.nav-drop-menu` at equal specificity because isn.css loads second. Adding `body.isn` would take it to (0,2,1), win in the panel, and need a second rule restating a width base.css already sets — the same trap `--compact`'s `min-width` is undone for four rules above. */ .isn-nav-menu--cats { width: 532px; } .isn-nav-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 8px; } /* ── In the bar the two columns pack independently, and grid cannot do that ─── A grid shares its row heights across the columns, and with these five group sizes that is where the panel's height goes. The groups measure 288.3 (Werkplek, 6), 198.3 (Techniek, 4), 333.3 (Energie, 7), 243.3 (Diensten, 5) and 153.3 (Financieel, 3) — a title block of 19.3 plus 44 per row and base.css's 1px between them, so a six-row group is 19.3 + 6 × 44 + 5 = 288.3 exactly, and every one of the five checks out that way. In two grid rows plus a third, that is 288.3 + 15 + 333.3 + 15 + 153.3 = 804.9, because row 1 is as tall as Werkplek even though Techniek only fills 198.3 of it, row 2 is as tall as Energie against Diensten's 243.3, and Financieel is pushed onto a row of its own where it sits alone in the left column with 249px of nothing beside it. 168.3px of that is air. Packed as two independent columns it is 636.6 — Werkplek + Energie on the left, Techniek + Diensten + Financieel on the right, 13 item rows against 12, which is the closest these five sizes come to even. The panel goes from 878.5 to 710.2 and fits a 900px window with no scrolling at all, which is the point: the cap above becomes the safety net rather than the mechanism. Flex column-wrap is the only way there without touching the data. Multi-column packs just as tightly and needs no cap, but it fills in source order — Werkplek, Techniek, Energie, Diensten, Financieel — which balances to {Werkplek, Techniek} against {Energie, Diensten, Financieel}, 18 rows against 19 and no gain worth the change; multicol has no `order`, so it can only be fixed in `content/isn.js`. `grid-template-rows: masonry` is not shipped. ── The wrap cap, and why it is `max-height` ──────────────────────────────── `max-height` and not `height`: Chrome wraps a column flex container at either, but with `height` the container *is* that tall, and 740px of box around 636.6px of groups would hand back more air than the repack just recovered. Measured with `max-height`, the container is 636.5 — its content, to a rounding error. 740 is a wrap point, not a height, and any value in [636.6, 849.9) produces this arrangement: 636.6 is the left column with Energie in it, and 849.9 is the left column with Techniek added as well. 740 sits 103.4 above the floor and 109.9 below the ceiling, so at 45px a row the left column can take two more categories before Energie is pushed right, and Techniek would have to fall from four categories to one before it was pulled left. Neither is a change anyone makes without looking at this menu. ── The order, and the two columns ────────────────────────────────────────── Flow order has to be Werkplek, Energie, Techniek, Diensten, Financieel; source order is Werkplek, Techniek, Energie, Diensten, Financieel. Three `order` values fix that, and they are on `nth-child` rather than on names because the groups carry no class of their own. They are inert everywhere `display` is not flex, which is the whole of the burger panel. `width: calc(50% - 4px)` is the grid's own column, arrived at differently: the container's content box is 506, the 8px `column-gap` survives from the rule above as the gap between the two flex lines, and (506 − 8) / 2 = 249 — the same 249 the grid reported, so the 191px the longest name is measured against is untouched. `.nav-links` in the selector for the same reason as the cap: it keeps every line of this off the burger panel by construction, where `body.isn .nav-panel .isn-nav-groups` stacks the five groups in one column and must go on doing so with no undo rule to keep in step. */ body.isn .nav-links .isn-nav-groups { display: flex; flex-flow: column wrap; align-content: flex-start; max-height: 740px; } body.isn .nav-links .isn-nav-group { flex: none; width: calc(50% - 4px); } body.isn .nav-links .isn-nav-group:nth-child(2) { order: 1; } body.isn .nav-links .isn-nav-group:nth-child(4) { order: 2; } body.isn .nav-links .isn-nav-group:nth-child(5) { order: 3; } .isn-nav-group .nav-drop-list { grid-template-columns: minmax(0, 1fr); } /* The row becomes a tile and a name. `flex` replaces base.css's `block` on the anchor — and `.nav-panel a`'s `block` too, at equal specificity and later in the file, which is wanted: the stacked panel prints the same marks. `align-items: center` is what lets a 30px tile and a text line of a different height sit against each other without either being told the other's size, and `flex: none` on the mark is what stops a long name from squeezing the photograph — with 18.3px of measured slack it should not come to that, but a tile 2px narrower in one row of twenty is exactly the kind of fault that surfaces once a name changes and nobody re-measures. No padding of its own, deliberately. base.css's `7px 9px` stays and the tile sets the row height instead: 44px in the bar, and 55px in the stacked panel, where `.nav-panel .nav-drop-list a` gives the same tile 12px and `.nav-panel a`'s hairline adds the odd pixel. A vertical padding here would have won in the panel at equal specificity and had to be undone there in a second rule, to arrive at a number the tile already implies. The tile is the tallest thing in the row, so it should be what sets the row. `.isn-nav-name` has no rule at all and is still worth existing: it makes the label one flex item, so `min-width: auto` applies to it and the row shrinks to the name's min-content — the U+00AD break — instead of overflowing the panel. That is the failure mode the width above is measured to avoid, and this is what it degrades to if a future name defeats the measurement. */ .isn-nav-group .nav-drop-list a { display: flex; align-items: center; gap: 10px; } /* A tinted plate, which the icon system refuses by name — see `.isn-ic` above: "a rounded square behind every glyph is the icon-pack look the brief rejects". This is not that, and the distinction is which set is being quoted. `.isn-visual` gives the hero card's photograph a tinted object zone in the category's accent, because a cut-out on white with no ground floats; this is that zone at 30px, in a list where twenty-five of them carry the five-colour rhythm the bar otherwise has no room to show. All twenty-five rows print a photograph into it. It has not always been all of them. Three printed a drawn icon instead — `ai-cloud`, `marketing` and `product-sourcing`, the three with no photograph of their own — genuinely sitting on the plate the brief rejects, and that was the right way round: three glyphs on a ground that the other photographs establish reads as a set with three stand-ins in it, where three glyphs floating in a column of tinted tiles reads as three rows that look broken. `marketing` has its own cut-out now and the other two were removed as categories, so the plate carries nothing but photographs; the argument is kept because the drawn branch in build.mjs is kept. 9px is a literal and not `--i-r-sm`, because a radius token does not survive a change of scale. 12px is the panel's own corner and reads as a corner there at 452px wide; on a 30px box it is 40% of the side and reads as a blob. 9px is 30%, which is the roundest this box gets while still being a square with its corners taken off. 24px of image inside the 30px leaves 3px of tint on the long side — enough to read as a ground rather than as a border. The glyph is held to 20px against the photograph's 24: the cut-outs run from 0.60 to 1.58 in aspect, so on every one of them the short side is well inside the box, while the drawn icon fills its viewBox square. At a matched 24px the glyph covers 576px² against the narrowest photograph's 360, and reads a weight heavier than the photographs it stands in for; 20px puts it at 400 and in the middle of their range. */ .isn-nav-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--a-soft); } .isn-nav-mark img { width: 24px; height: 24px; object-fit: contain; } .isn-nav-mark .isn-ic > svg { width: 20px; height: 20px; } /* The group's name, in the page's label voice — `.isn-eyebrow`'s four values at the site's smallest size, which is the one drawn for tracked-out uppercase metadata and is what `.nav-drop-all` at the foot of the same panel already uses. The 9px indent is `.nav-drop-list a`'s own padding, so the heading sits on the same left edge as the names under it rather than 9px out from them. */ .isn-nav-group-title { margin: 0 0 3px; padding: 0 9px; font-family: var(--i-mono); font-size: var(--t-mono-sm); font-weight: 500; letter-spacing: var(--i-track-label); text-transform: uppercase; color: var(--i-muted); } /* The two summaries take the panel's ink, not the bar's grey. Muted is right in the bar, where `body.isn .nav-links a` sets every label grey and ink is what hover and the current section mean. It is wrong here: `body.isn .nav-panel a` sets the panel's rows in ink, a `summary` is not an `a` so it kept the grey, and two grey rows in a stack of four ink ones read as unavailable rather than as the two that open. */ body.isn .nav-panel .nav-drop-toggle { color: var(--i-ink); } /* In the burger panel there is no room for two columns of anything: the panel is the viewport wide, minus the gutter, at every width that has it. So the four groups become four stacked blocks, and `body.isn .nav-panel a`'s hairline above already turns their rows into the same kind of row as the four links they sit under. */ body.isn .nav-panel .isn-nav-groups { grid-template-columns: minmax(0, 1fr); gap: 4px; } body.isn .nav-panel .isn-nav-group-title { padding: 12px 0 0; } /* ── `Voor wie?`: sixteen branches, and only one of them a link ─────────────── The same panel, the same list and the same type as `Categorieën` beside it, and deliberately not the same *markup*. This one is base.css's flat `.nav-drop-list` — the two-column grid it already is — where the categories menu puts `.isn-nav-groups` inside it. That was a decision, not a convenience. The three `order` rules above are `nth-child(2)`, `(4)` and `(5)` of `.isn-nav-group`, written for the categories menu's five groups in a known sequence; a branche list reusing the class would have its second, fourth and fifth rows repacked into a column of their own. Scoping those three to the categories panel would have worked too, and would have left the categories menu depending on a selector qualified for a panel that does not use it. Not sharing the class means the categories dropdown cannot change at all, which is the guarantee that was wanted rather than a near miss at it. Everything else *is* shared, and by inheritance rather than by copying: `body.isn .nav-drop-menu`'s white plate and hairline, `body.isn .nav-drop-list a`'s ink and its soft blue hover, `body.isn .nav-drop-all`'s mono footer, and the viewport cap on `body.isn .nav-links .nav-drop-menu` — which this panel needs least and inherits anyway. ── No width rule at all, and that is the measurement ─────────────────────── base.css's `.nav-drop-menu` is 452px, measured for twelve names in two columns with nothing in front of them. That is this list's shape exactly, four rows deeper. 452 less its two 1px borders and its 24px of padding is 426 of content; less base's 6px column gap, halved, is 210px a column — the grid reports `210px 210px` live. The row's own 9px either side takes 18, so 192px is left for the name. Measured over CDP on all sixteen rows with the type below applied, `Sport, cultuur & verenigingen` draws 182.8px of ink — the widest of the sixteen, ahead of `Onderwijs & kinderopvang` at 164.6, `Webshops & e-commerce` at 162.5, `Zakelijke dienstverlening` at 154.2 and `Automotive & mobiliteit` at 149.1, with `Vastgoed` at 60.2 and `Horeca` at 45.7 the narrowest. So the longest name has 9.2px of slack, and the panel keeps base's width because the arithmetic says it can — not because nobody checked. The categories panel next door had to go to 532 for a reason this one does not have: a 30px tile and a 10px gap in front of every name. The whole panel measures 452 × 396.6 at 1440 × 900, top edge at 96.8 and bottom at 493.5: 275.8 of list, a 37.2 note, the 37.7 footer and 24 of padding. It is 378.4px clear of the bottom of that window and does not scroll — `scrollHeight` equals `clientHeight` — so the cap it inherits is pure insurance here rather than the mechanism it is next door. The class exists anyway, for the two rules that must name this panel and not that one — the reading direction below, and the intake pill's `:has()` in section 12. */ /* Down the left column, then down the right. Not across. base.css's grid is row-major, which is right for twelve unordered names and wrong for these: `ISN_BRANCHES` in content/isn.js lists the sixteen in a deliberate sequence, and row-major prints it 1 2 / 3 4 / 5 6, so reading it in order means the eye crossing the panel eight times. Eight explicit rows with `grid-auto-flow: column` prints 1–8 down the left and 9–16 down the right, which is how the categories panel beside it reads its own two columns. Eight and not `auto-fill`: there is no CSS that counts rows of a grid — the same reason `--compact` is decided by `menu()` in build.mjs. Sixteen is `ISN_BRANCHES.length`, so a seventeenth branche wants a ninth row here; the panel grows by one 33.6px row and nothing else moves, and the cap above is what catches it if the window is short. `.nav-links` in the selector, for the same reason the groups' repack carries it, and here it is load-bearing rather than tidy: `.nav-panel .nav-drop-list` at (0,2,0) takes the stack to one column, and eight explicit rows plus `grid-auto-flow: column` in one column would put the other eight into an *implicit* second column — reintroducing two columns in a 390px stack, from a rule whose whole purpose is the bar. */ body.isn .nav-links .isn-nav-branches { grid-template-rows: repeat(8, auto); grid-auto-flow: column; } /* Fifteen of the sixteen rows, which are `` and not ``. Only `/nl/branche/bouw-installatie/` exists. The other fifteen are in the panel because the reader is picking what kind of company they run and a list of one answers nobody, and they are not anchors because `emit()`'s link gate in build.mjs checks an href's *shape* and never its target: fifteen `` elements would pass every gate and ship fifteen 404s. content/isn-branche-pages.js argues the choice; this rule is what makes it read as deliberate instead of as a list with fifteen broken rows in it. Every value here is `.nav-drop-list a`'s, restated because a class selector cannot reach a `` — and one value is not: the colour. `body.isn .nav-drop-list a` is ink and these are muted. That is the whole affordance. Same face, same size, same box, same 33.6px row, one step quieter, and no hover plane, because base's `a:hover` cannot match them either. `font-family` and `font-weight` are *not* restated, and that is measured rather than assumed: with only the six declarations below applied, all fifteen spans compute `Figtree` at `font-weight: 400`, which is what `.nav-drop-list a` asks for. They inherit it from the page — the anchor needs the two because it is overriding `.nav-links a`, and a span has nothing to override. `white-space` is restated for exactly that reason, and it is the one that bit. `.nav-links a` sets `nowrap` on every link in the bar and a `` is not one, so without this line these names wrap where the anchor beside them cannot. The first measurement of this panel was taken before this rule existed: at the inherited 16.5px with wrapping allowed, `Sport, cultuur & verenigingen` reported 115.7px of ink — the width of its longest *line* — and came out tenth widest of the sixteen instead of first. The width argued above is measured after. */ .isn-nav-soon { display: block; padding: 7px 9px; font-size: 14px; line-height: 1.4; white-space: nowrap; color: var(--i-muted); } /* In the burger panel the same fifteen rows take the stack's row, not the bar's. `.nav-panel a` is 13px 0 at body size in 500 with a hairline under it, `.nav-panel .nav-drop-list a` trims the padding to 12px, and `body.isn .nav-panel a` puts the hairline in `--i-line` and the text in ink. None of those four selectors reaches a ``, so without this the fifteen would keep the bar's 14px and its 7px/9px in a stack of 16.5px rows with rules between them — the one place where "same typography as the link beside it" means a different set of numbers. `nowrap` is dropped rather than inherited-and-overridden: the stack is one column of the viewport's width, `Sport, cultuur & verenigingen` needs 182.8px of it at the bar's size and more at this one, and a 390px phone minus the gutter and the panel's 16px indent has the room — but a longer name added later has nowhere to overflow to, and wrapping is the right answer in a stack where it was the wrong one in a fixed-width panel. */ body.isn .nav-panel .isn-nav-soon { padding: 12px 0; border-bottom: 1px solid var(--i-line); font-size: var(--i-body-size); font-weight: 500; white-space: normal; } /* The one sentence in either panel, under the list and above the `Alle branches` footer. It is there because fifteen quiet rows are a fact and not an explanation: a reader who tries `Horeca` and gets nothing is owed a reason in the place they tried it. Mono-small would have made it a second `.nav-drop-all`; this is a sentence, so it takes the body face at the page's smallest size, muted, which is `.isn-micro` without its 600 weight — small print reads as small print here, and a 12px line at 600 in a panel of 400s reads as a label. The 9px indent is `.nav-drop-list a`'s own padding, so the sentence starts on the same left edge as the sixteen names above it, exactly as `.isn-nav-group-title` does next door. In the burger panel that indent goes: `.nav-panel .nav-drop-menu` already pads the whole menu 16px in, and rows there sit flush against it. */ .isn-nav-note { margin: 10px 9px 0; font-size: var(--i-micro); line-height: var(--i-lead-body); color: var(--i-muted); } body.isn .nav-panel .isn-nav-note { margin: 12px 0 0; } /* ── 01 · Hero ────────────────────────────────────────────────────────────── */ /* ── The height budget, and why these are vh and not vw ─────────────────────── One thing has to be true on a 1440 × 900 *window*: the bar, the headline, the scan card *and* the three-step strip are all visible without scrolling. A window is not a viewport, and that distinction is the whole of this pass. A 900px-tall Chrome window on macOS gives the page around 780px once the tab strip, the address bar and a bookmarks bar are out of it — so a fold measured at `innerHeight: 900` is a fold nobody actually has, and a strip whose last line lands at 789 is a strip the reader sees the top half of. Measured that way and then measured again in the window, the first pass fitted and the second did not. So the budget is ~780, and it is spent like this at 1440 — bar 69, this padding 17, the taller of the two columns 512, the row gap 16, the strip 122, this padding 19. 755, which leaves the strip's last sentence ending near 720 with the fold at 780 and at 900 alike. The strip is 122 and not the 109 it reads as, because it now carries its own bottom padding — see `.isn-hero-steps`. That padding is inside the pin and this one is outside it, which is the distinction the two paragraphs below turn on. ── The budget is now a floor, and the fold is pinned ──────────────────────── A hero that fitted inside 900 was the whole of the earlier pass, and it left 158px of the *next* section — `INKOOPCATEGORIEËN` and the rail's two arrows — above the fold. Fitting is not the same as ending: the first screen has to end at the strip. So `.isn-hero-grid` below carries a `min-height` that resolves to exactly the space between the bar and the fold, its first row takes what is left over, and the strip — the second row — sits on the bottom edge of that box. At 1440 × 900 the strip's last pixel is the fold's, and `.isn-cats` starts 19px below it — this padding, which is the next paragraph. This padding stays, and lands *below* the fold at 900. That is deliberate twice over: it is the space the strip needs when the window is too short for the pin to bind, and above the fold it is the margin that keeps a sub-pixel rounding from showing a hairline of the next section, which is the failure this whole block is here to prevent. The `min-height` subtracts the top padding and not this one, which is what puts the strip's own bottom edge — not the section's — on the fold. The 755 above is therefore no longer the arithmetic of the fold; it is the floor under it. On a window shorter than 755 + 19 the pin cannot help — a `min-height` only ever adds space — and the strip crosses the fold by whatever is missing, which is why the numbers in this block are still the ones that matter and are still spent this carefully. Measured, that floor binds well below the windows anyone has: at 1440 × 700 the card column gives up 112px of its own and the strip still lands exactly on the fold. Where the 72px came from: 26 out of this padding, the row gap and the strip's own top space, and 46 out of the card — its padding, the rhythm between its blocks, 2px off each chip's vertical padding and 1px off each grid gap. No type got smaller anywhere; every number in this pass is space between things. The two paddings are `vh`, which is the whole point: the budget is the *window's* height, so a shorter window has to buy the same four things with fewer pixels, and a rule in `vw` cannot see that — it reads a 1440 × 800 laptop as identical to a 1440 × 1117 desktop and overruns the first by exactly what it wasted on the second. At 800 these two come to 32 rather than 36. Floors 14/16 rather than lower: below that the bar's hairline reads as the top edge of the eyebrow. This was 40/44 in `vw` two passes ago, then 18/20 in `vh`. */ .isn-hero { /* Named because the fold rule on `.isn-hero-grid` has to subtract this exact value, and a second copy of the clamp would drift the moment either is tuned. */ --hero-pad-t: clamp(14px, 1.9vh, 24px); /* Named one pass later, for a stronger version of the same reason. `.isn-hero--scan`'s fold rule has to make its hero *end* at the bottom edge of the viewport rather than merely reach down to it, so it subtracts both paddings from the height it claims. The home hero's rule below subtracts `--hero-pad-t` alone and therefore overruns the fold by this value; that is its bottom row's arrangement and deliberately not changed here. */ --hero-pad-b: clamp(16px, 2.1vh, 26px); padding: var(--hero-pad-t) 0 var(--hero-pad-b); } /* ── The container is `.isn-shell`, the same one every section has ──────────── The alignment is not solved here any more — it is solved once, by the rule `.isn-shell` and `body.isn .nav` share at the top of this file, and this row is one of its users. So the wordmark, the eyebrow, the headline, the lead, the claims, the strip's first column and every section headline below the fold are all on one x, and there is no second expression of the page's left edge to keep in step with the first. What is left here is the split, and the two `minmax(0, …)`. ── The split ──────────────────────────────────────────────────────────────── A 45–48 / 52–55 split and a gap cannot all three hold: they sum to 97–103% before the gap, which is 3.3% at this width. So the card track takes 47vw and the copy takes what is left, which at 1440 is 676px of card and 608px of copy — 45.8% / 50.9% with 3.3% between them. Both stated bands are within a percent of that, and the one that gives is the card's. `47vw` rather than a fixed 520px because the container is nearly the window: a fixed track would pour every pixel a wider screen adds into the text column, and the headline is sized off that column (`--i-hero` is `12.4cqw`). Floor 520 — the brief's own minimum, and the width at which the card still holds three chip columns. Ceiling 700, past which a form stops reading as a card; beyond that the copy column keeps the growth and the shell's own cap stops both. `minmax(0, …)` on both because the right one holds a `` does not wrap or ellipsise its selected option; it clips it, so the reader's own answer would read `€ 1 miljoen – € 5 m`. `grid-column: 1 / -1` rather than a wider floor on the grid, because the constraint belongs to this one field's content. Its hint fits one line across the full row, which is the second reason it is the right field to spend the row on. */ .isn-field--wide { grid-column: 1 / -1; } .isn-field--search { max-width: 440px; margin-top: 8px; } .isn-field-label { display: block; font-size: var(--i-small); font-weight: 700; } .isn-field-opt { font-weight: 500; color: var(--i-muted); } .isn-field-hint { display: block; margin-top: 3px; font-size: var(--i-micro); color: var(--i-muted); } /* 48px, not 52. Four of these stack on step 2, so the four pixels are sixteen, and 48 is still well over the 44px a field has to be to be a target. The `--i-field` size does not move with it — it is pinned at 16px because iOS zooms the page on a smaller one. */ .isn-input { display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 0 14px; border: 1.5px solid var(--i-line); border-radius: var(--i-r-sm); background: var(--i-white); font-family: var(--i-body); font-size: var(--i-field); color: var(--i-ink); } select.isn-input { /* Room for the native arrow on every platform, and no custom one drawn over it. */ padding-right: 40px; } .isn-input:focus-visible { outline: 2px solid var(--i-blue); outline-offset: 1px; border-color: var(--i-blue); } .isn-input[aria-invalid='true'] { border-color: var(--i-red); } .isn-field-problem { display: block; margin-top: 6px; font-size: var(--i-micro); font-weight: 600; color: #d43b3d; } .isn-consent { max-width: 62ch; margin-top: 12px; } /* Steps 2 and 3: a quiet `Terug` and the forward action, in a row. */ .isn-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(14px, 1.5vw, 20px); } .isn-step-actions .isn-micro { margin-right: auto; } /* Step 1 has no `Terug`, so its action is not a row of two — it is the primary call to action of the page, full width, with the terms under it. `Gratis · Vrijblijvend · ±1 minuut` sits *below* the button and not beside it, because everything it says is a reason to press and a reader who has already pressed does not need it. */ .isn-step-cta { display: grid; gap: 6px; margin-top: clamp(8px, 0.9vw, 10px); } /* **There are three block-button heights in this file now, and this rule owns the middle one.** It used to own two and the comment here said "46px here and 52 everywhere else"; that reading is false since the scan card's step 1 was sized against a reference screenshot, so all three are named here rather than left to be discovered: 52px `.isn-btn`'s own height — every button on the page that is not full width 46px this rule — a full-width button inside a card, on /nl/, in step 2 and 3 of both cards, and in the gate, receipt and calculator panels 58px `.isn-step--compact .isn-btn--block` — step 1 of /nl/besparingsscan/'s card only, where the reference's 80px button in an 800px card is both ×0.72 → 57.6 and 10% of the card's width → 57.6. The argument is on that rule. Why 46 survives as the middle value rather than being folded into either neighbour: it is the height a full-width button in a card was argued down to when the home page's fold was rebudgeted — the two pixels under `.isn-btn`'s 52 came out of the same pass as the chips' four, and 46 is still over the 44 a press target has to be. Nothing about that pass is undone by one step of one card growing, and widening the exception to every card would move /nl/'s fold for a reason that page never asked for. */ .isn-btn--block { width: 100%; min-height: 46px; justify-content: center; } .isn-micro--under { text-align: center; } /* ── Step 3: the outcome, before the ask ──────────────────────────────────── */ /* Value first, and the step reads that way on purpose: what we see, and which categories we will look at — and only then the three contact fields. There is not a percentage anywhere in it, because we have no data about this company yet and any number here would be invented. A panel inside a panel, so its padding is a step below the card's own: 16–22 against the card's 20–30. The list of "wat we vervolgens doen" that used to sit between the chips and the fields is gone with the step-3 rewrite — three numbered lines of process inside a card that has to fit beside a headline, describing what happens after a form the reader has not filled in yet. */ .isn-outcome { padding: clamp(14px, 1.6vw, 18px); border-radius: var(--i-r); background: var(--i-green-soft); --a: var(--i-green); --a-soft: #d5f0e3; } .isn-outcome .isn-eyebrow { margin-bottom: 10px; color: #0d7a4a; } .isn-outcome-h { margin: 0; font-size: var(--i-h3); font-weight: 800; letter-spacing: var(--i-track-h3); line-height: var(--i-lead-h3); } .isn-outcome-body { max-width: 62ch; margin: 10px 0 0; font-size: var(--i-small); color: #3f5c4e; } .isn-outcome-label { margin: 14px 0 8px; font-family: var(--i-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: var(--i-track-label); text-transform: uppercase; color: #3f5c4e; } .isn-outcome-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .isn-outcome-chips li { padding: 7px 13px; border-radius: var(--r-pill); background: var(--i-white); font-size: var(--i-micro); font-weight: 700; } .isn-scan-report { margin: 16px 0 0; font-size: var(--i-small); font-weight: 600; } .isn-scan-report[data-tone='error'] { color: #d43b3d; } /* A rule with a word in it, separating the form's own submit from the other way in. */ .isn-scan-or { display: flex; align-items: center; gap: 16px; margin: clamp(20px, 2vw, 26px) 0 14px; font-family: var(--i-mono); font-size: var(--t-mono); font-weight: 500; letter-spacing: var(--i-track-label); text-transform: uppercase; color: var(--i-muted); } .isn-scan-or::before, .isn-scan-or::after { content: ''; flex: 1; height: 1px; background: var(--i-line); } .isn-scan-book { margin: 0; font-size: var(--i-small); font-weight: 700; } .isn-scan-book a { display: inline-flex; align-items: center; gap: 7px; color: var(--i-blue); text-decoration: none; } .isn-scan-book a:hover { text-decoration: underline; } .isn-scan-done { display: grid; justify-items: start; gap: 16px; --a: var(--i-green); --a-soft: var(--i-green-soft); } /* ── 02b · /nl/besparingsscan/ — the same card, one step re-presented ─────── */ /* ── What is different here, and it is no longer "how little of it there is" ── It used to be. This block said that `.isn-step-title`, `.isn-step-hint`, `.isn-step-cta`, `.isn-btn--block` and `.isn-micro--under` were the home page's rules on the home page's markup, and that the delta was a pill and a taller field. **That is superseded by "het formaat van de form moet zoals hier",** which is an instruction about this card's *size* — so every one of those five now carries an override scoped to `.isn-step--compact`, and the card's own padding carries one scoped to `.isn-scan--compact`. The method, the reference figures and the ×0.72 that produced each number are in the block above the padding rule below; nothing here restates them. What is still shared, unchanged, and should stay that way: `.isn-steps-bar`, `.isn-step`, `.isn-chip` and all seven of its parts, `.isn-field`, `.isn-input`, `.isn-fields`, steps 2 and 3 entire and the receipt. The scoping is deliberate on both counts — the sizes are step 1 of the card on /nl/besparingsscan/, not the card, and certainly not the form. ── The height, and it is no longer the whole point ────────────────────────── This block existed to make the card *short*: a brief asked for 430–500px against the ~700 the full card set, and it recorded 429 at 1440. Two things retired that number. Step 1 lost its chip row to step 2 — so 120px of the 429 (a `Waar wil je op besparen?` row and one row of chips) describes markup that is not in this step any more, and the 100px it counted for one field is now counted twice, for the URL field and the branche field. And then the size instruction above asked for the reference's proportions, which are larger than ours at every internal measure except the field height. The card is **575px** at 1440 by intent. The arithmetic, so the next change to any one line can be checked against the whole. Every figure is this file's own clamps and tokens resolved at a 1440 window — **computed, not measured**, since the pass that set them had no browser: 74.0 the card's own padding, 36 top and 36 bottom, plus its 2px of hairline 0 the steps bar, hidden while step 1 is showing — see the `:has()` rule below 59.6 the pill: 13.97px of mono at 1.4, 8px of padding either side, 24.05 of margin under it 34.7 the title at 30.96px on `--i-lead-h3`'s 1.12 33.0 the hint at 17.42px on the body's 1.55, and the 6px above it 125.7 the URL field: 38.02 above it, a 16.56px label at 1.55, the 56px input 6px below it 125.7 the branche field — the same three parts at the same three sizes 122.8 the button at 58, its terms line at 15.98, the 6 between them and the 33.98 above it ───── 575.4 The same arithmetic at 1201, the narrowest two-column window, comes to 516.2 — the clamps are all `vw` and the card's own track is `40vw`, so the card's internals hold their proportion of it across the whole two-column band rather than only at 1440. Above 1440 every clamp is at its ceiling and the figure stays 575.4 while the card keeps widening to its own 700px cap, which is the same "the fill only falls above the cap" behaviour `.isn-hero--scan .isn-hero-h` has and the reason the fold survives a short, wide window. The card's rendered height is **not** this figure, though, and that is new in the same pass: the card is a stretched grid item now, so its box is `max(this content height, the left column)`. See `.isn-hero--scan .isn-scan` further down, where both edges are pinned on instruction. */ /* The steps bar is in the markup on both pages and hidden on this one while step 1 shows. Not removed, because it is the same generator and the same three steps — a reader who presses `Start gratis scan →` lands on step 2 and the bar is there, telling them where they are, as it is on /nl/. What it cannot do is take 30px off the *first* step of a page whose job is to be short: `1 Categorieën 2 Je bedrijf 3 Uitkomst` above a card that has not been started yet announces a three-step form to somebody who has been offered a one-minute scan. `:has()` reads the state off the DOM the module already maintains — step 1 `hidden` means the reader has moved on — so there is no class to add and no second source of truth about which step is showing. It is load-bearing elsewhere in this file (`.isn-chip:has(input:checked)`), and the fallback in a browser without it is a visible steps bar, which is the honest degradation: the card is 30px taller and everything works. */ .isn-scan--compact .isn-steps-bar { display: none; } .isn-scan--compact .isn-scan-form:has([data-step='1'][hidden]) .isn-steps-bar { display: flex; } /* ── "het formaat van de form moet zoals hier" — the method, once ───────────── A reference screenshot was supplied and every number in this section and the six rules under it is derived from it the same way, so the derivation is written once here and each rule below only states its own two figures. **The reference image is ~2000px wide and the card in it is 800px.** Our card's track is `minmax(0, clamp(440px, 40vw, 700px))` at `.isn-hero--scan .isn-hero-grid`, so at a 1440 window it is **576px**. **The scale factor is 576 / 800 = 0.72**, and it is applied to nothing that is not a proportion of the card — which is the one distinction the whole method rests on: * **Fixed-size UI chrome compares in absolutes.** An input's height is a decision about touch targets and does not scale with a viewport. The reference's fields measure ~57px and `.isn-input--lg` below is 56. **They already match, and nothing here changes the field height.** * **Type, padding and gaps scale with the card,** because they *are* proportions of the object. Reference → ×0.72 → the value each rule below sets. ── The 56-against-57 is also what dates the capture, and that matters ─────── The 800px card figure is only usable if the image is a 1× capture; at 2× the card would be 400 CSS pixels and the factor would be 1.44, i.e. every number below would be wrong by a factor of two. An earlier attempt to settle it from character widths gave 1×, 1.5× **and** 2× depending on which string was measured, so it settled nothing. **The field height is the reading that settles it:** a form field is one of the few objects on a web page whose size is a fixed convention rather than a proportion, ours is 56 and the reference's measures 57, and a 2× reading would make the reference's fields 28.5 CSS pixels — which is not a field. So 1×, and the 800 is trustworthy. ── Two sizes are smaller than ×0.72, and the reason is a fit, not taste ───── The two long strings in this step were measured against the card's own content width before the scaled sizes were accepted. At 1440 the card is 576 with 36px of padding and 1px of hairline a side, so **502px** of content. Both strings were read out of `content/isn.js` (`ISN_SCAN_PAGE.card`) and counted, and both are set with **0.48em per character at Figtree regular / 0.52em at 800** — this file's own two established constants, at `.isn-hero-perk-sub` and `.isn-hero--scan .isn-hero-h` respectively, and not the 0.40/0.505 an earlier pass guessed. The guess is worth naming because it is falsifiable and false: at 0.40em `.isn-hero-lead`'s 128 characters would set two lines in its 46ch measure, and the fold docblock records three. title `Doe de gratis besparingsscan` 28 chars, 1 cap, 3 spaces, Figtree 800 ≈ 14.98em, less 0.014em × 28 of `--i-track-h3` = 14.59em at ×0.72's 34.34px → 500px of 502 → one line by 2px, i.e. no line at all at 30.96px → 452px of 502 → 90.0% fill, and one line at every window hint `Ontdek binnen 1 minuut waar jouw…` 54 chars, 8 spaces, Figtree regular ≈ 25.92em, no tracking at ×0.72's 23.62px → 612px of 502 → two lines, over by 110px at 17.42px → 452px of 502 → 90.0% fill, one line So the **title is 30.96px and not 34.34 (×0.649 of the reference, a 10% step down)** and the **hint is 17.42px and not 23.62 (×0.531, a 26% step down)**. Everything else in the table below is the ×0.72 figure unreduced. 90% was chosen as the fill both step down to because the per-character constants are ±5% at best and a wrap in a card whose whole purpose is to be scanned in one look is a worse outcome than two points of size. Neither reduction was verifiable in a browser — see the note at the foot of this block. ── Every clamp is `vw` and every ceiling is its own 1440 value ────────────── The card's track is `40vw` between 1100 and 1750 and its padding below is `2.5vw`, so a `vw` clamp on an internal size holds a constant fraction of the card across the whole two-column band — 502/576 at 1440 and 418/480 at 1201 are both 87.1% of the card, so both fit checks above hold at 1201 unchanged. Above 1440 the ceilings engage: the card keeps widening to its 700px cap while its internals stop, so the fill only falls. That is deliberate and it is the same device `.isn-hero--scan .isn-hero-h`'s 60px ceiling uses. It is also what keeps the hero inside the fold on a wide, short window — uncapped, the card's content reached 647px at 1750 × 800 against a 661px budget, which is 34px of overrun bought for nothing anybody asked for. Every floor is today's value, so **no narrow window changes**: `13px` of padding, `20px` of title (`--i-h3`'s own floor), `14px` of hint and label (`--i-small`), `12px` of pill and terms line (`--i-micro`), `16px` of field rhythm, `10px` above the CTA. ── What is NOT here ──────────────────────────────────────────────────────── The reference's own `GRATIS BESPARINGSSCAN` badge carries a small leaf glyph. **Ours does not get one.** `.isn-scan-pill` is printed as `

${esc(P.pill)}

` in build.mjs — text and nothing else — and the instruction is "maar dan zonder dit rare icon", i.e. *do not adopt the reference's icon*, not *remove ours*. There is no `::before` here and none is wanted. The carousel's card design is likewise not from the reference: "gebruik niet deze carousel vormgeving maar die huidige die je al hebt." `.isn-hero-cat` and its parts are untouched by this pass. **No visual confirmation was possible.** The pass that wrote these rules had no browser, so every figure above is arithmetic on the reference's measurements and on this file's own tokens. A screenshot pass should check the two fit checks first — they are the only two places where being wrong by 10% is visible as a wrap rather than as a size. */ /* 36px at 1440, up from 16, and it is the single largest change in the card. Reference 50px in an 800px card → ×0.72 → 36. `2.5vw` is that number written so it travels: 30.02 at 1201, 36.0 at 1440, and a 36px ceiling that engages at exactly 1440 for the reason the block above gives. 6.25% of the card either way, which is the reference's own proportion. The floor is 13px — the base `.isn-scan` rule's own floor, unchanged — and it engages below a 520px window. That is not tidiness: `.isn-step-title`'s 20px floor sets 291.8px of `Doe de gratis besparingsscan`, and a 360px phone leaves the card 296px of content at 13px of padding against 288 at 16. The title fits on one line on the narrowest phone only at the padding this rule already had, so the floor is load-bearing and must not be raised to match the ceiling. What the extra 20px a side costs is step 2, which is a `.isn-fields` grid of `repeat(auto-fit, minmax(200px, 1fr))` with a 12px gap and therefore needs 412px of content to stay two-up. At 1201 — the narrowest two-column window and so the binding one — the card is 480.4 and this padding leaves **418.4px, which clears 412 by 6.4px.** It was 444.8 before, so this pass spends 26 of that 32.8px margin. That is the one number in this rule worth re-deriving before anybody widens the padding again: at `2.7vw` the step collapses to one column at 1201 and grows about 100px, which is the fold moving for the sake of a gutter. Scoped to `.isn-scan--compact` and not to `.isn-scan`: the home page's card and the two `.isn-scan--calc` cards on the category pages keep the 13–16px their own fold budgets were argued against. Same specificity as `.isn-scan`, so this wins on source order, which is how `.isn-scan--calc` already overrides the same property further down this file. */ .isn-scan--compact { padding: clamp(13px, 2.5vw, 36px); } /* `Gratis besparingsscan` again, as a green pill above the title. Green and not blue: blue on this page is the thing you press, and there is exactly one of those in the card. The pill states a fact about the offer — it costs nothing — which is the same thing `--i-green` says on the outcome panel in step 3 and on the `Geen verplichtingen` claim in the hero. It repeats the hero's eyebrow, one column across, and that is deliberate on a lead page: the card is the only thing a reader who scrolled past the copy is looking at, and it has to say what it is without the sentence beside it. ── Three of its numbers are the reference's, and one is not ───────────────── **The three declarations below carried `--i-micro`, `5px 11px` and `0 0 10px` and no longer do.** The comment that stood here described a badge sized to disappear into the card; the size instruction asks for the reference's badge, which is a third larger in every direction. Method, factor and the 1× argument are in the block above the padding rule; the figures are: font-size reference ~19px → ×0.72 → 13.68 → `clamp(12px, 0.97vw, 14px)`, 13.97 at 1440 padding reference 12×24 → ×0.72 → 8.6×17.3 → `8px 17px` margin-bottom reference 34px → ×0.72 → 24.48 → `clamp(10px, 1.67vw, 24px)`, 24.05 at 1440 The font-size and the margin travel on `vw` for the reason every other internal size here does, with today's `--i-micro` and 10px as their floors, so nothing below a ~1240px window moves. **The padding is the one that stays absolute,** and the distinction is the method's own: a pill's box is set by its own text's cap-height and its own radius, not by the card it happens to sit in — the same reading that keeps `.isn-input--lg` at 56px. `8px 17px` is therefore the ×0.72 figure at the reference width and it is not scaled off it. `--i-track-label`'s 0.1em is untouched, which is what keeps `GRATIS BESPARINGSSCAN` reading as a label at 14px rather than as a very small sentence: 21 characters of IBM Plex Mono at ~0.6em plus the tracking sets ~206px, and with 34px of padding the pill is ~240px inside 502px of card. */ .isn-scan-pill { display: inline-flex; align-items: center; margin: 0 0 clamp(10px, 1.67vw, 24px); padding: 8px 17px; border-radius: 999px; background: var(--i-green-soft); font-family: var(--i-mono); font-size: clamp(12px, 0.97vw, 14px); font-weight: 500; letter-spacing: var(--i-track-label); text-transform: uppercase; line-height: 1.4; color: #0d7a4a; } /* ── Step 1's type, at the reference's proportions ──────────────────────────── Five overrides, all scoped to `.isn-step--compact` — the `
` class build.mjs writes on step 1 of this one card and nowhere else. Two things follow from that scope and both are the reason it is not `.isn-scan--compact`: * **Steps 2 and 3 of this same card keep the shared sizes.** They print `.isn-step-title`, `.isn-step-hint`, `.isn-field-label`, `.isn-step-cta` and `.isn-btn--block` too, and step 2 is five fields and step 3 an outcome panel plus three more — a 31px legend and a 38px field rhythm there would add roughly 200px to a step that already has the most in it. The instruction points at the first screen, so the override does. * /nl/'s card, the two `.isn-scan--calc` calculators and the gate/receipt panels are untouched, on the same reasoning as the padding rule above. Each `font-size` floor is the token the rule replaces, so every one of these is a no-op below ~1210px and the phone layout is bit-for-bit what it was. The two step-downs from ×0.72 — the title and the hint — are argued with their fit arithmetic in the method block above; the other three are the scaled figure unreduced. title reference 47.7 → ×0.72 → 34.34 → 30.96 at 1440 (`--i-h3` was 26) hint reference 32.8 → ×0.72 → 23.62 → 17.42 at 1440 (`--i-small` was 14) label reference 23 → ×0.72 → 16.56 → 16.56 at 1440 (`--i-small` was 14) terms line reference 22 → ×0.72 → 15.84 → 15.98 at 1440 (`--i-micro` was 12) CTA gap reference 47 → ×0.72 → 33.84 → 33.98 at 1440 (was 10) `--i-h3`, `--i-small` and `--i-micro` themselves are not touched, and must not be: they are the page's shared steps, and the whole rest of this stylesheet is measured against them. What this card asked for is a size, not a scale. */ .isn-step--compact .isn-step-title { font-size: clamp(20px, 2.15vw, 31px); } /* The hint's `max-width: 58ch` in the base rule is now the looser of two constraints and is left alone: at 17.42px, 58ch is ~575px and the card gives 502, so the card measures it. Worth knowing before anybody reads the 58 as the thing keeping this on one line — it is not. */ .isn-step--compact .isn-step-hint { font-size: clamp(14px, 1.21vw, 17.5px); } /* Both labels are short — `Website URL` at 11 characters and `In welke branche ben je actief?` at 30, the longest of the two — so 16.56px sets ~248px of the card's 502 and there is no fit to check here. It is the one figure in this block that could have gone straight to the ×0.72 number. */ .isn-step--compact .isn-field-label { font-size: clamp(14px, 1.15vw, 16.5px); } /* 33.98 at 1440 against the 10 this was, and it is the largest proportional jump in the card — the reference puts a third of a field's height between the last field and the button. `.isn-step-cta`'s own 6px `gap` between the button and the terms line under it is untouched: that pair is one object and the reference shows it the same way. */ .isn-step--compact .isn-step-cta { margin-top: clamp(10px, 2.36vw, 34px); } /* 58px, and it is the one number in this pass that two independent readings agree on. As an absolute: the reference's button is 80px and ×0.72 is 57.6. As a proportion: 80px in an 800px card is 10% of the card's width, and 10% of our 576 is 57.6. The absolute and the proportional readings converge, which is what makes 58 defensible where `.isn-btn--block`'s own 46 was argued down to the minimum a target may be. Flat and not a clamp, for the reason `.isn-input--lg` is flat: a press target is a fixed convention, and this is now the largest one in the card by a wide margin. It does not reach step 2's or step 3's forward buttons, or the bar's `Plan kennismaking`, or /nl/'s card — see the scope argument at the head of this block. So there are now three block-button heights in the file and the comment at `.isn-btn--block` names all three. */ .isn-step--compact .isn-btn--block { min-height: 58px; } .isn-step--compact .isn-micro--under { font-size: clamp(12px, 1.11vw, 16px); } /* 56px against `.isn-input`'s 48. Step 1 of the compact card is two fields and a button, and both fields take this height — the four on step 2 keep the 48, where four of them stack and the eight pixels would be thirty-two. Not larger than this. A 64px input inside a 20px-radius card reads as a search bar on a landing page rather than as a field in a form, and the difference between the two is whether the reader expects an answer or expects to be asked something next. **The size instruction that grew everything else in this step deliberately did not touch this number, and 56 is now load-bearing twice.** The reference screenshot's own fields measure ~57px, so ours already matched and there was nothing to scale — a field's height is a touch-target convention rather than a proportion of the card. And because it is a convention, the 56-against-57 is what dates the capture as 1× and therefore what makes the reference's 800px card width usable at all; the full argument is in the method block above `.isn-scan--compact`'s padding. Changing this number would take that evidence with it. */ .isn-input--lg { min-height: 56px; font-size: var(--i-lead); } /* 38.02 at 1440, up from 16, and this is the field rhythm of the whole step. Reference 53px between the two fields → ×0.72 → 38.16, written as `2.64vw` with today's 16px as the floor so nothing below ~1210px moves. It is `.isn-field--branche`'s number too — the two are one rhythm and the comment on that rule says why — and it is *also* the gap between the hint and the first field, because the same declaration on the first of the two siblings is what that gap is. The reference shows the two distances equal, so one number is the honest reading rather than a convenience. Neither of these two classes exists anywhere but step 1 of this card (`stepOneCompact` in build.mjs), which is why they are edited in place instead of being wrapped in `.isn-step--compact`. That is not true of `.isn-fields`' own 12px `gap` one block up — step 2 uses it — so the two-up rhythm on step 2 is deliberately not part of this change. */ .isn-field--url { margin-top: clamp(16px, 2.64vw, 38px); } /* The branche field, directly under the URL field and matching it. `.isn-input--lg` cannot be reached from here: `select()` in build.mjs writes one class list on its control and it is shared with step 2's four selects, which keep the 48px. So the two declarations are repeated against a modifier on the label instead of the class being extended — three lines duplicated is cheaper than a second parameter threaded through a helper five fields use. The same top margin as `.isn-field--url` and not the `.isn-fields` grid's gap: these two are siblings in a fieldset, not cells in a grid, and the step reads as URL-then-branche-then-button on one rhythm. That clamp is now `clamp(16px, 2.64vw, 38px)` in both places rather than `clamp(12px, 1.4vw, 16px)`, on the size instruction — the argument, and the reference's 53px it comes from, is on `.isn-field--url` above. **The two must stay identical**; a rhythm expressed as two numbers is a rhythm that will drift. */ .isn-field--branche { margin-top: clamp(16px, 2.64vw, 38px); } .isn-field--branche .isn-input { min-height: 56px; font-size: var(--i-lead); } /* The category label and the row's two arrows on one line, because the arrows belong to the row and there is no room above it for a line of their own. Same arrangement as the category band's `.isn-cats-top` further down, at a smaller size. */ .isn-chiprow-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(12px, 1.4vw, 16px); } /* 30px rather than the band's 38. These sit beside a 14px label inside a form card, not beside a section caption, and at 38 they set the height of the whole row. */ .isn-chiprow-arrows .isn-rail-arrow { width: 30px; height: 30px; } .isn-chiprow-arrows .isn-rail-arrow > svg { width: 13px; height: 13px; } /* `.isn-step` is a `
`, and every browser's UA sheet gives a fieldset `min-inline-size: min-content`. That is the one rule in this file's way. The min-content width of a step containing fourteen no-wrap chips in a nowrap flex row is the sum of all fourteen — 2140px — so the fieldset refuses to be 686px wide, the row never becomes a scroller, and everything inside the card (the input, the button, the row) runs off the right edge of the page. Re-measured with the rule suspended, at a 1440 viewport: the fieldset lays out 2140 wide and `document.documentElement.scrollWidth` reads 2821. It was 1847 and 2529 while the row held thirteen chips, and it grew because splitting `facilitair` in two added the widest label in the row — `Schoonmaakproducten`, a 211px chip — as well as a fourteenth. `min-width` beats the UA's `min-inline-size` here because it is an author declaration, and the two are the same property in a horizontal writing mode. It was scoped to `.isn-scan--compact` while /nl/ still had a three-column chip grid, whose min-content is one chip wide and which therefore needed nothing. Now that both cards scroll a row, both fieldsets have a min-content width in the thousands, and the rule belongs to `.isn-scan .isn-step`. Left scoped to the compact card, the home card would not have been slightly wrong — it would have pushed the whole page 1000px wide. */ .isn-scan .isn-step { min-width: 0; } /* ── One scrolled row on both cards, and it works before any script runs ─────── An ordinary `overflow-x: auto` flex row: fourteen chips, every one of them a real checkbox with a real label, reachable by trackpad, by finger, and by keyboard — `Tab` moves through them and the browser scrolls the row to whichever has focus, which is the one navigation this cannot break. `js/isn-scan.js` adds the two arrows and a mouse drag on top of that, and it mounts on `[data-chip-rail-viewport]` rather than on either page, so the home card reusing this row needed no line of script. ── The 5px of vertical padding is not spacing ─────────────────────────────── `.isn-chip:has(input:focus-visible)` draws a 2px outline 3px outside the chip, and an outline *is* clipped by a scroll container. Without those five pixels the keyboard focus ring on a chip is sliced off top and bottom, which is the accessibility defect this layout would otherwise introduce over the grid it replaces. ── No scroll snapping ────────────────────────────────────────────────────── The category band snaps, because its cards are 180px wide and a half-shown card there is a card you cannot read. A chip is 40-odd pixels and a half-shown one is a visible promise that the row continues — which is exactly the affordance a scroller with hidden scrollbars needs. Snapping would also fight the drag: the row would settle somewhere other than where it was let go. `user-select: none` because the only text in here is fourteen category names on labels, and a mouse drag across them would otherwise select them instead of moving the row. */ .isn-chiprow { display: flex; gap: 8px; margin: clamp(8px, 0.9vw, 10px) 0 0; padding: 5px 1px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; user-select: none; } .isn-chiprow::-webkit-scrollbar { display: none; } /* `flex: none` so fourteen chips size to their labels and overflow, rather than sharing the row's width and setting three characters each. 54px tall — comfortably a touch target, and the height the single-row card can afford because there is one row of it instead of five. `nowrap` on the name, which is what makes the row a row: a chip that wraps is two lines tall and takes the other twenty-five with it. Three of the twenty-six labels carry a soft hyphen: `Kantoor⟨AD⟩artikelen`, written into `ISN_SCAN.categories`, and the two cleaning names, written into `ISN_CATEGORY_VISUALS` because at 390 they ran 21px and 8px past the 148px carousel card they also sit on. None of the three fires in this row, and that is this rule rather than the text: `nowrap` refuses every break opportunity there is, a soft hyphen and the space in `Zakelijke verzekeringen` alike. */ .isn-chiprow .isn-chip { flex: none; min-height: 54px; padding: 6px 12px; } /* ── Two rows deep, on the home card ────────────────────────────────────────── The scan page's card is 540–720px wide and its row is the page's first move, so one row of fourteen is right there: three or four chips visible, and the arrows say the rest exist. The home card is 460–540, where one row shows three of fourteen — which reads less as a carousel than as a list that has been cropped. So this variant turns the flex row into a two-row grid that still scrolls sideways: `grid-auto-flow: column` with two auto rows makes seven columns of two, about six chips visible at 518px, and a seventh column half-shown to say there are more. It has to be a grid — a `flex-wrap: wrap` inside an `overflow-x: auto` box wraps against the *visible* width, so it would quietly become seven stacked rows and scroll nothing. 46px per chip rather than the 54 above: two rows plus the 8px gap is 100px of card, and 54 would make it 116. 46 is still a thumb-sized target — it is the number the chips used on a phone while they were a grid — and the mark inside is 28, so nothing is being squeezed. `align-items: start` because a column whose two chips have labels of different lengths is not a reason for one of them to be taller than the other; without it the odd column at the end stretches its single chip over both rows. */ .isn-chiprow--rows { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); align-items: start; } .isn-chiprow--rows .isn-chip { min-height: 46px; } .isn-chiprow .isn-chip-name { white-space: nowrap; } /* While the row is being pushed by a mouse. `auto`, so the drag is not smoothed into lag. */ .isn-chiprow[data-dragging] { cursor: grabbing; scroll-behavior: auto; } .isn-chiprow[data-dragging] .isn-chip { cursor: grabbing; } /* ── The scan page's hero ─────────────────────────────────────────────────── */ /* ── The split turned back over, and this time a headline is what turned it ─── On /nl/ the copy column is the wider of the two and the card is 47vw: the page is making an argument and the scan is the first thing you can do about it. Here the card was the page, so the split turned over — 720px of card against 564.8 of copy at 1440. Three sizes have been asked for since, in one instruction, and they do not all fit in that arrangement. **`de titel moet groter`** is the one that decides the track, because a headline this file breaks in the markup (`headline: ['Koop samen in.', 'Check je besparing.']`) can only grow until its longer line reaches the column's edge: `Check je besparing.` 19 characters, ~0.52em each at Figtree 800 in a 564.8px column 564.8 / (19 × 0.52) = 57.2px before it touches both edges 48px was already 87% of that. So "bigger" inside a 564.8px column is a handful of pixels and then a wrap that puts `besparing.` on a third line — which is the one thing the two fixed lines exist to prevent. The column had to widen, and the only place the width is available is the card. The reference layout the instruction points at has it the same way round, which is the check that this is not a reading of convenience. Measured off that image (2000px wide, so ratios rather than pixels): copy 1016 / card 800 of the 1816px the two tracks share = **55.9% / 44.1%.** So: 1440 window shell 1328, column gap 43.2 card 576.0 copy 708.8 → 55.15% / 44.85% 1201 window shell 1089, column gap 36.0 card 480.4 copy 572.6 → 54.39% / 45.61% 1750 window shell 1638, column gap 44.0 card 700.0 copy 894.0 → 56.09% / 43.91% **This supersedes the band an earlier instruction put on this rule — left 43–45%, right 55–57%.** That band is where 50vw/720px came from, it is recorded here because it was explicit, and it is the mirror image of the one the reference shows. Both cannot hold. The later instruction wins and the earlier number is written down rather than quietly dropped, so that reversing this is one edit: `clamp(560px, 50vw, 720px)` in this rule and a 48px ceiling at `.isn-hero--scan .isn-hero-h`. 700px and not 600 as the ceiling, which is the one number in the clamp that is neither the reference's nor the headline's: above about 1750 the card stops growing, and every pixel past that goes to the copy column alone. At 600 the copy column reaches 1044px at 1912 — a 52ch lead in a 1044px track, with nothing capping it above 1200 — and the composition stops being two columns and becomes a page with a form pinned to it. 700 keeps the wide case at 944px, which is within 20px of what this hero already did at that window, so the widest layout is unchanged and only the laptop widths move. 1201 stays the binding case for everything measured inside the left column — it is the narrowest window that still has two columns (the grid stacks at 1200), and there the gutter is `--i-gutter`'s 56px ceiling on each side, so the shell holds 1089. The copy column is 120px wider there than it was, which is what pays for the headline and for the category cards at `.isn-hero-cats`. ── And this hero ends at the fold, which is new in this pass ──────────────── `min-height: calc(100svh - var(--i-chrome) - var(--hero-pad-t) - var(--hero-pad-b))`, so the section's own box ends on the bottom edge of the first viewport and whatever follows it starts *at* that edge. Without the rule the hero was content-sized — 545.7px at 1440 × 900 — and the next section began at y = 652.7, 247px above the fold, which is the defect this rule fixes. What follows is now `.isn-section--collective`: the category rail that used to sit here left the page with `isnCategoriesSection('scan')` (see `.isn-hero-cats` below), and measured after both changes that section's top edge is at y = 900 at 1440 × 900, y = 900 at 1201 × 900 and y = 800 at 1440 × 800 — the fold exactly, at all three. Three things make it that expression and not another: * `--i-chrome` is the utility strip's 38px, the bar's 68px and the hairline — declared at `:root` precisely so a fold rule can subtract it in CSS, where js/nav.js's measured `--bar-h` does not exist at first paint. Anything added above the nav is added to that token, not to this rule. * Both hero paddings, because this rule has to make the hero *end* at the edge. The home hero's `:has(> .isn-hero-steps)` rule subtracts `--hero-pad-t` alone and overruns by its bottom padding; that is its business, and its selector is why this one could not simply be widened to cover both — the scan hero has three children and no steps strip, which is exactly why it had no fold rule at all before this pass. * `svh` with a `vh` line above it, in that order, for the reason the home hero's rule gives: the fallback runs where `svh` is unknown, and on a phone toolbar-collapse `svh` is the one that does not leave a strip of the next section showing. It is a floor and not a height, which is what makes it safe below 1200: there the three areas stack into one column — copy, then card, then category row, with the block's own gaps — and a column that holds all three is taller than `100svh - 107px` on any phone-shaped window, so the floor is slack and adds nothing. On the one shape where it is not slack (a narrow *and* tall window: stacked layout, ~1400px of viewport height) it hands the surplus to `align-content: center` below, which centres the stack instead of leaving a hole under it. The fold requirement is about what the *first* viewport contains and is unaffected either way. ── Three areas, because the category row is a third child ────────────────── `.isn-hero-grid`'s own two rows are for /nl/'s three-step strip, which spans both columns. Here the second row is the row of category cards, which spans neither: it belongs under the copy and the card stands beside both. So this names the areas rather than counting children — copy scan cats scan — and the three children take one each. Two things follow that no `order` property could give: * The card's area is both rows plus the row gap — measured 512.9px at 1440 (373.6 of copy row, a 34px gap, 105.3 of category row) against its own content height of 409 plus its 47.5px `margin-top` — so the row of categories cannot push it anywhere and cannot be pushed by it. That is the brief's "de categoriekaarten moeten compact genoeg zijn om de formulierkaart niet weg te drukken", enforced by the geometry rather than by keeping the row short enough to hope. (It sits at the top of that area rather than filling it; `align-items: start` below, and the reason is in the same paragraph.) * At ≤1200 the areas become one column in the order `copy` / `scan` / `cats` — which is the brief's mobile order, headline and subtext, then the promises, then the form, then the categories. That is also the DOM order, so nothing is reordered visually away from the reading order and a keyboard user reaches the form before the six decorations. ── Where the leftover height goes: `align-content`, not a row that grows ──── Owning the fold and filling it are two different problems, and the second one has an honest answer and a dishonest one. Three windows, measured in the browser and not reasoned about — `getComputedStyle(grid).gridTemplateRows` for the two tracks, `.rowGap` for the gap between them, `getBoundingClientRect()` for everything else: 1440 × 900 grid 757 rows 373.6 + 105.3 over a 34.0 gap = 512.9 leftover 244.1 → 122.0 a side 1440 × 800 grid 661 rows 373.6 + 105.3 over a 34.0 gap = 512.9 leftover 148.2 → 74.1 a side 1201 × 900 grid 757 rows 424.8 together over a 28.8 gap = 453.6 leftover 303.4 → 151.7 a side The card is 409 tall at all three and shorter than the two rows it spans, so it decides nothing here. **The leftover is real and no amount of tuning removes it:** the headline's ceiling was 48px because that is where `Check je besparing.` stopped fitting the column (measured at `.isn-hero--scan .isn-hero-h`; it resolved to 47.4px at 1440 and 38.0px at 1201), the lead is three rendered lines of a sentence the instruction dictates, and a row of 87.5px-wide cards cannot be 250px tall. A composition that genuinely needed 757px at 900 would need 661 at 800 and not have it. **The three rows of that table are from before this pass and are kept as the record of why the rule is `center`, not as a description of the current page.** Four things moved since: the track split (720/564.8 → 576/708.8 at 1440), the headline's ceiling (48 → 60), the card's internal type and padding, and the category row becoming a drifting rail with a card width in `cqi`. Every one of those makes the composition taller or wider, so the leftover shrinks — the direction the paragraph above wants — and none of them can make it negative, because `min-height` is a floor and the grid grows past it. The arithmetic that says the growth fits is at the top of the type block: ~503px of left column against ~753 available at 1440 × 900. **What none of it is, is measured.** This pass had no browser available, so the numbers in the table are the last real readings taken of this hero and the new ones are owed. A screenshot pass replaces this paragraph with a fourth table; until it does, treat 373.6 / 105.3 / 244.1 as history. ── The same windows after the card grew — computed, not measured ───────────── Arithmetic on this file's own tokens and on the copy in `content/isn.js`, with no browser involved. It does not replace the table above and it is not a re-measure: it is what the tokens now say, and the first screenshot pass should believe neither figure until it has read both off a real render. The left column at 1440, where the copy track is 708.8px wide: 34.8 the eyebrow — 12px of `--t-mono` at 1.4, plus its 18px bottom margin 113.13 the headline — two lines of `clamp(34px, 8.4cqw, 60px)` on `--i-lead-hero`'s 0.95; 8.4cqw of 708.8 is 59.54px, just under the 60 ceiling, so 59.54 × 0.95 × 2 34.0 the gap above the lead 87.0 the lead — three rendered lines of 18.72px (`--i-lead`'s 1.3vw) on the body's 1.55 36.0 the gap above the promises 97.61 the promise row ────── 402.54 the copy area + 34.0 this rule's own `row-gap` at 1440 (2.4vw) + 105.3 the category row, carried over from the table above as the last real reading ────── 541.8 The card at the same width is **575.4** — the table in the 02b compact-card block, and 166.4px more than the 409 the paragraph above records, because the size instruction scaled its type, its padding and its field rhythm to the reference's proportions. So `max(541.8, 575.4)` is the card, and **the card now drives the grid.** That is a reversal of the sentence above it: through every reading in the table the two rows decided the height and the card "decided nothing here". It is also the reason `.isn-hero--scan .isn-scan` below carries `align-self: stretch` and no top offset, and why the rail carries `align-self: end` — with the card the taller box, the surplus lands in the *rows*, and the rail has to be pushed to the bottom of a row grown taller than it is. 1440 × 900 floor 757 content 575.4 leftover 181.6 → 90.8 a side 1440 × 800 floor 661 content 575.4 leftover 85.6 → 42.8 a side 1440 × 768 floor 630.3 content 575.4 leftover 54.9 → 27.5 a side 1201 × 900 floor 757 content 516.2 leftover 240.8 → 120.4 a side The floors are this rule's own expression resolved: 900 − 107 of `--i-chrome` − 17.1 of `--hero-pad-t` (1.9vh) − 18.9 of `--hero-pad-b` (2.1vh) = 757, and the same at 800 (32 of padding) and 768 (30.72). The 1201 content is the card again, 516.2 against a left column that the same six-part sum puts at roughly 473–479 there — the headline's `cqw` re-resolves to 48.10px on a 572.6px copy track and the lead hits `--i-lead`'s 17px floor, and the two candidate readings of the promise row differ by about six pixels; the conclusion does not turn on which, because the card is the taller either way. **The hero still ends at the fold at all four windows**, and the leftover moved the direction the paragraph above asks for: 244.1 → 181.6 at 1440 × 900, and 148.2 → 85.6 at 1440 × 800, which is half of what it was. The window height where the floor stops being the binding constraint is 575.4 + 107 of chrome + 30 of padding (both pads are at their `px` floors by then, 1.9vh and 2.1vh of 712 being 13.5 and 15.0) = **≈712px**. On the same arithmetic with the card back at 409 it would be the left column deciding, at 541.8 + 137 = ≈679. So this pass moved the first window height that scrolls up by about 33px, and 900, 800 and 768 all clear it. An earlier version of this paragraph claimed 578 of rows and 179 of leftover, and both were invented before the measurement above existed. The numbers in the table are what the browser returned; the two 1440 rows differ only in the grid's own height, which is the point. So `align-content: center` splits the leftover above and below the two rows, and the alternatives are worse in ways that are easy to name: `start` leaves all 244 of it in one hole between the category row and the bottom edge; a `1fr` first row leaves it between the promises and the category row, which is the "giant empty gap" the instruction rules out by name; `space-between` does both; `space-evenly` turns a third of it into that same gap — (244.1 + 34) / 3 = 92.7px between the promises and the cards at 1440 × 900, and 110.7 at 1201 × 900. Half and half is also what the home hero does with its own 134px of leftover, for the reason stated there — it is the only distribution that looks chosen at more than one window height. What half and half costs is recorded rather than rounded off, because it is the one judgement in this rule a reader might want to overturn. The visible band is the leftover plus the hero padding on that side, so it is a little larger than the table's figure: at 1440 × 900 the eyebrow starts 139px below the bar's hairline and the category row ends 141px above the fold (122.0 + 17.1, and 122.0 + 18.9); at 1201 × 900 the same two bands are about 169 and 171; at 1440 × 800 they are 89 and 91, which is the one of the three that reads as drawn. The two levers if that is judged too airy are `--visual-h` on the category visuals and this `row-gap` — both grow the composition instead of distributing air around it — and neither was pulled here, because the instruction that produced this rule is a viewport correction that says twice not to redesign the composition again. `align-items: start` stays, and now it is doing something the centring cannot: the two rows are centred as a block, and within them the card sits at the top of the two-row area it spans rather than floating in the middle of it. Both lines are needed, and they are not two ways of saying the same thing. `grid-template-rows: auto auto` for the same reason as before: the inherited `minmax(0, 1fr)` first row exists so /nl/'s strip can be pinned to the bottom of the fold, and here the rows are content-sized and the leftover is distributed around them rather than poured into one of them. The row gap is its own value rather than the inherited `clamp(14px, 1.8vh, 22px)`. That number is measured in `vh` because it is the space above a hairline that has to survive a short window; this one is the space between a paragraph of promises and a row of cards, which is a horizontal rhythm and takes `vw` — 34px at 1440, the same step as the gap over the promises themselves. */ .isn-hero--scan .isn-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(440px, 40vw, 700px)); grid-template-rows: auto auto; grid-template-areas: 'copy scan' 'cats scan'; align-items: start; align-content: center; row-gap: clamp(22px, 2.4vw, 34px); min-height: calc(100vh - var(--i-chrome) - var(--hero-pad-t) - var(--hero-pad-b)); min-height: calc(100svh - var(--i-chrome) - var(--hero-pad-t) - var(--hero-pad-b)); } .isn-hero--scan .isn-hero-copy { grid-area: copy; } .isn-hero--scan .isn-scan { grid-area: scan; } .isn-hero--scan .isn-hero-cats { grid-area: cats; } /* ── The scan hero's eyebrow: blue, and in normal case ──────────────────────── Two instructions, one page, one rule. "dus deze eyebrow moet blauw" put `--i-blue` on it; "zorg dat de eyebrow niet all caps zij maar gewoon zijn" takes the capitals off. Both are scoped rather than global because both point at one screenshot of /nl/besparingsscan/, and the two heroes have never had to match — /nl/ prints a different string, `ISN_HERO.eyebrow`'s `Hét inkoopcollectief voor MKB Nederland`, and it stays grey and uppercase. ── Why `.isn-hero-copy` is in the selector ────────────────────────────────── This was `.isn-hero--scan .isn-eyebrow`, and that was wrong in a way the colour alone hid. `isnScanHeroSection()` in build.mjs renders `isnScanCard(page, 'compact')` *inside* the hero section, and that card contains the outcome panel's own eyebrow. So the old selector matched two elements, and at (0,2,0) it tied with `.isn-outcome .isn-eyebrow` above — equal specificity, later in the file, so it won, and the green `Wat we zien` was rendering blue on this page. It went unseen because the panel sits inside `