/* ============================================================ KLANTVERHAAL — het paginatype (BOUWGIDS §5.12) Eén verhaal van één locatie: foto-hero, harde cijfers, de uitdaging, de uitspraak, wat Constell eraan veranderde, en het bewijs. Prefix: kv- (paginatype-breed, niet paginagebonden). Laadt ná pages/ems-gedeeld.css: daar komen het kruimelpad (.em-kruimel), de split-rijen (.em-rij) en de bullets (.em-bullets) vandaan. Alles wat híer staat, is wat een klantverhaal onderscheidt van een feature-pagina. Beeldmateriaal per verhaal: /ds/verhalen// — gegenereerd met scripts/verhaal-beelden.mjs uit de zware v1-PNG's. Motie verrijkt altijd een zichtbare eindstand: zonder JS staat .reveal-armed niet op en is elke eindstand meteen zichtbaar. ============================================================ */ /* ========================================================= 1. HERO — full-bleed locatiefoto, tekst onderin (inkt) Bewust ánders dan de video-hero van het feature-paginatype (tekst links op een zijdelingse scrim): een klantverhaal opent als een tijdschriftcover — de locatie vult het beeld, de tekst staat onderaan op een verloop dat van onderen opkomt. Zo blijft het bovenste tweederde van de foto volledig onaangeraakt. ========================================================= */ .kv-hero { position: relative; min-height: min(86vh, 880px); display: flex; align-items: flex-end; overflow: hidden; background: var(--c-ink); color: var(--c-on-dark); isolation: isolate; } .kv-hero-media { position: absolute; inset: 0; z-index: 0; } .kv-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; } /* Stops in PIXELS, niet in procenten (BOUWGIDS §5.8): de tekst staat op een vaste afstand van de ONDERrand, dus moet het verloop daar ook aan vastzitten. Met procenten verschuift het mee met de bandhoogte en valt het op 390px op de verkeerde plek. Vanaf 620px boven de onderrand is de foto volledig onaangeraakt. */ .kv-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(9, 9, 14, 0.92) 0, rgba(9, 9, 14, 0.86) 160px, rgba(9, 9, 14, 0.66) 330px, rgba(9, 9, 14, 0.30) 480px, rgba(9, 9, 14, 0) 620px); } .kv-hero-inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(3rem, 8vh, 5rem); } .kv-hero-tekst { max-width: 46rem; } .kv-hero h1 { font-size: var(--fs-display); line-height: 1.04; color: #fff; text-wrap: balance; margin-bottom: var(--sp-5); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); } .kv-hero .lead { color: var(--c-on-dark); max-width: 40rem; } .kv-hero-acties { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-7); } /* Het label boven de kop: sterretje + "Klantverhaal" + hoe lang al klant. */ .kv-label { display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-on-dark); margin-bottom: var(--sp-5); } .kv-label svg { width: 12px; height: 20px; flex: 0 0 auto; color: var(--c-orange); } .kv-label .kv-label-sep { opacity: 0.45; } /* Het locatielogo staat op een wit plaatje (de logo's zijn donker en zouden op de foto wegvallen) en hangt RECHTSBOVEN in de hero, buiten de tekstkolom (Jorn 05-08-2026). Twee redenen: het logo mag groot, en de tekstkolom wordt korter zodat de knoppen hoger staan en het portret van de kennismakingssectie er niet meer overheen klimt. De rechtermarge volgt de contentkolom, niet de vensterrand. */ .kv-hero-logo { position: absolute; z-index: 2; top: clamp(1.25rem, 4vh, 2.75rem); right: max(1.5rem, calc(50% - var(--container) / 2)); display: flex; align-items: center; justify-content: center; background: var(--c-surface); border-radius: var(--r-tile); padding: clamp(0.6rem, 1.4vw, 1rem) clamp(0.9rem, 2vw, 1.4rem); box-shadow: var(--shadow-pop); } .kv-hero-logo img { height: clamp(4.5rem, 7vw, 8rem); width: auto; max-width: 17rem; object-fit: contain; display: block; } /* Een logo dat zelf uit wit of bleek lijnwerk bestaat, verdwijnt op een wit plaatje. Die krijgt een inkt-plaatje; welke dat zijn bepaalt scripts/verhaal-logos.mjs (meting + een handmatige uitzonderingenlijst). */ .kv-hero-logo--donker { background: var(--c-ink); } /* ========================================================= 2. KENNISMAKING (steen) — staat direct onder de hero Eerst de mensen, dan de cijfers (Jorn 05-08-2026): een gast maakt op een verhaalpagina eerst kennis met wie er werkt. Het portret klimt over de onderrand van de hero, alleen vanaf 1024px: daaronder staat de herotekst zelf onderin de foto en zou de band eroverheen lopen. ========================================================= */ .kv-kennismaking { position: relative; z-index: 2; } .kv-portret-bij { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-ink-soft); } @media (min-width: 1024px) { .kv-kennismaking .kv-resultaat { align-items: start; } .kv-kennismaking .kv-portretbeeld { margin-top: calc(-1 * (var(--section-y) + 5.5rem)); } /* De herotekst staat onderaan (align-items:flex-end), dus het logo uit de tekstkolom halen tilt hem níet op: daarvoor is extra bodempadding nodig. Zonder deze 4,5rem klimt het portret over de herknoppen heen. */ .kv-hero-inner { padding-bottom: calc(clamp(3rem, 8vh, 5rem) + 4.5rem); } } /* ========================================================= 3. AAN HET WERK — drie foto's van de locatie mét het systeem ========================================================= */ .kv-werkfotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); } .kv-werkfotos figure { margin: 0; display: grid; gap: var(--sp-3); } .kv-werkfotos img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-media); box-shadow: var(--shadow-card); } .kv-werkfotos figcaption { font-size: var(--fs-small); color: var(--c-ink-soft); } /* Lege omhulzing zolang de foto van deze locatie er nog niet is: zelfde maat en zelfde plek als de echte foto, met een streepjeslijn zodat meteen duidelijk is dat hier nog iets komt (dezelfde taal als "Foto volgt" in het referentievenster op de homepage). */ .kv-werkfoto--leeg .kv-werkfoto-vlak { display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: var(--r-media); background: var(--c-surface-soft); border: 2px dashed var(--c-line-strong); } .kv-werkfoto--leeg .kv-werkfoto-vlak span { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-soft); } /* ========================================================= 4. FEITEN + CIJFERS (steen) Links de harde, natrekbare uitkomsten als tellende ringen, rechts de witte feitenkaart met het kaartje van Nederland. ========================================================= */ .kv-feiten-band { position: relative; } .kv-feiten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } /* Altijd drie naast elkaar. De auto-fit van .stats-row rekent met een minimum van 160px en klapte de derde ring in de smallere kolom naast de feitenkaart (rond 1024px) naar een eigen regel — één losse ring onder twee andere leest als een fout. */ .kv-stats { max-width: 40rem; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); } .kv-stats .stat-ring { width: clamp(7.5rem, 12vw, 10.5rem); height: clamp(7.5rem, 12vw, 10.5rem); font-size: clamp(1.5rem, 2.6vw, 2.25rem); } /* Stat-ring op een lichte band: inkt-schijf achter het cijfer, donkere baan, lavendel voortgangsring — dezelfde uitvoering als de resultatenband van het feature-paginatype. */ .kv-stats .stat-ring:has(svg)::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: var(--c-ink); } .kv-stats .stat-ring:has(svg) circle { stroke-width: 8; } .kv-stats .stat-ring:has(svg) .ring-track { stroke: var(--c-ink); } .kv-stats .stat-ring:has(svg) .ring-num { position: relative; color: var(--c-on-dark); } /* Een ring die geen percentage is maar een woord of een jaartal ("2019", "45 min") krijgt geen tellend cijfer maar een vaste, kleinere regel. */ .kv-stats .stat-ring .ring-num.is-woord { font-size: 0.62em; text-align: center; line-height: 1.1; } .kv-stats .stat .stat-sub { opacity: 1; color: var(--c-ink-soft); } .kv-feitenkaart { background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--sp-6); } .kv-feitenkaart .kv-kaartje { display: block; width: 9rem; margin: 0 auto var(--sp-5); height: auto; } .kv-feitenkaart dl { margin: 0; display: grid; gap: var(--sp-4); } .kv-feitenkaart dt { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: 0.2rem; } .kv-feitenkaart dd { margin: 0; font-weight: 500; } .kv-feitenkaart dd a { color: var(--c-ink); } .kv-feitenkaart .kv-feit + .kv-feit { border-top: 1px solid var(--c-line); padding-top: var(--sp-4); } /* ========================================================= 5. HET VERHAAL — redactionele tekstkolom Leesalinea's cappen op 42rem (BOUWGIDS §8: ≤75 tekens). ========================================================= */ .kv-verhaal { max-width: 42rem; } .kv-verhaal p + p { margin-top: var(--sp-5); } /* Initiaal op de eerste alinea: dit is een verhaal, geen featurelijst. Cormorant Infant draagt hem; de letter blijft inkt (geen accentkleur — een gekleurde initiaal zou als tweede accent naast de kop lezen). */ .kv-initiaal::first-letter { font-family: var(--font-display); font-weight: 700; font-size: 3.6em; line-height: 0.82; float: left; padding: 0.06em 0.14em 0 0; } /* Een citaat middenin de lopende tekst, ingesprongen met een streep. */ .kv-tussenquote { margin: var(--sp-6) 0; padding-left: var(--sp-5); border-left: 2px solid var(--c-orange); font-family: var(--font-display); font-size: var(--fs-kaartkop); line-height: 1.3; } .kv-tussenquote cite { display: block; margin-top: var(--sp-3); font-family: var(--font-body); font-size: var(--fs-small); font-style: normal; color: var(--c-ink-soft); } /* Het "voorheen"-kaartje naast de uitdaging: kruisjes uit het designsysteem op een zachtwit vlak. */ .kv-voorheen { background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--sp-6); max-width: 24rem; } .kv-voorheen h3 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 500; margin: 0 0 var(--sp-5); } .kv-voorheen .list-cross { margin: 0; } /* Een foto naast de tekst, staand formaat, met een bijschrift. */ .kv-beeld { display: grid; gap: var(--sp-3); } .kv-beeld img { width: 100%; height: auto; border-radius: var(--r-media); display: block; box-shadow: var(--shadow-card); } .kv-beeld figcaption { font-size: var(--fs-small); color: var(--c-ink-soft); } .kv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .kv-split--flip { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); } .kv-split--flip > :first-child { order: 0; } /* Drie verhalen hebben geen bruikbaar beeldmateriaal naast de tekst. Dan staat de leeskolom gecentreerd in plaats van links met een gat ernaast. */ .kv-split--breed { grid-template-columns: minmax(0, 1fr); justify-items: center; } .kv-split--breed .kv-verhaal { max-width: 46rem; } /* Idem voor een rij in "wat er veranderde" zonder beeld en zonder tijdbalk. */ .em-rij.kv-rij--tekst { max-width: 46rem; } /* En voor de kennismaking zonder portret: dan draagt de tekst de band alleen. */ .kv-resultaat--zonder-beeld { grid-template-columns: minmax(0, 1fr); max-width: 52rem; } /* ========================================================= 6. TIJDBALK — de gebouwde proef (BOUWGIDS §2, wet 2) Geen screenshot van een stopwatch: twee balken die laten zien hoeveel van een werkdag er per offerte in ging. De eindstand staat in de CSS; .reveal-armed neemt hem weg en speelt hem af. ========================================================= */ .kv-tijdbalk { display: grid; gap: var(--sp-6); max-width: 34rem; margin-top: var(--sp-7); } .kv-tijdrij { display: grid; gap: var(--sp-3); } .kv-tijdrij-kop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); } .kv-tijdrij-kop b { font-weight: 500; } .kv-tijdrij-kop .kv-tijd { font-family: var(--font-body); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; } .kv-baan { height: 14px; border-radius: var(--r-pill); background: var(--c-surface); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-line); } .kv-baan span { display: block; height: 100%; width: var(--kv-vul, 100%); border-radius: var(--r-pill); background: var(--c-ink); } .kv-tijdrij--nu .kv-baan span { background: var(--c-orange); } .kv-tijdrij .kv-toelichting { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; } /* Motie: de balken groeien uit hun linkerkant zodra het blok in beeld komt. Via transform, niet via width — een breedte-animatie laat de browser elk frame opnieuw layouten. De balk houdt zijn eindbreedte en wordt alleen horizontaal geschaald, dus de pill-radius klopt in de eindstand. */ .kv-baan span { transform-origin: left center; } .reveal-armed .kv-tijdbalk .kv-baan span { transform: scaleX(0); transition: transform 900ms var(--ease); } .reveal-armed .kv-tijdbalk.in .kv-baan span { transform: none; } .reveal-armed .kv-tijdbalk.in .kv-tijdrij--nu .kv-baan span { transition-delay: 260ms; } @media (prefers-reduced-motion: reduce) { .reveal-armed .kv-tijdbalk .kv-baan span { transform: none; transition: none; } } /* ========================================================= 7. CIJFERBAND (inkt) — de uitkomst in drie getallen Merkcopy van de locatie zelf; de serif draagt de cijfers. ========================================================= */ .kv-cijfers { text-align: center; } .kv-cijfers .section-head { margin-inline: auto; } .kv-cijferrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4rem); margin-top: var(--sp-8); } .kv-cijfer .kv-groot { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 8vw, 6rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .kv-cijfer .kv-bij { display: block; margin-top: var(--sp-3); font-size: var(--fs-lead); color: var(--c-on-dark); } .kv-cijfers .kv-bron { margin-top: var(--sp-7); font-size: var(--fs-small); color: rgba(244, 244, 245, 0.7); } /* ========================================================= 7b. GALERIJ — de locatie zelf (nevel) Vijf beelden in een asymmetrisch raster: één breed sfeerbeeld en vier staande. Op mobiel wordt het één kolom. ========================================================= */ .kv-galerij { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); } .kv-galerij figure { margin: 0; position: relative; border-radius: var(--r-media); overflow: hidden; box-shadow: var(--shadow-card); } .kv-galerij img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Vier beelden vullen het raster precies: één staand sfeerbeeld over twee kolommen én twee rijen, daarnaast twee portretten en daaronder één liggend beeld over dezelfde twee kolommen. */ .kv-galerij figure { aspect-ratio: 3 / 4; } .kv-galerij .kv-breed { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 100%; } .kv-galerij .kv-lang { grid-column: span 2; aspect-ratio: 3 / 2; } /* Bijschrift op de foto: scrim in pixelstops, alleen onder de regel. */ .kv-galerij figcaption { position: absolute; inset: auto 0 0 0; padding: var(--sp-6) var(--sp-5) var(--sp-4); font-size: var(--fs-small); color: #fff; background: linear-gradient(0deg, rgba(9, 9, 14, 0.82) 0, rgba(9, 9, 14, 0.55) 40px, rgba(9, 9, 14, 0) 96px); } /* ========================================================= 7c. VERTELLER — portret + naam + rol + locatielogo Draagt de grote uitspraak en het slotblok. ========================================================= */ .kv-verteller { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; } .kv-verteller img.kv-portret { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: 0 0 auto; box-shadow: var(--shadow-tile); } .kv-verteller .kv-wie { display: block; font-weight: 500; margin: 0; } .kv-verteller .kv-rol { display: block; font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; } .kv-verteller--midden { justify-content: center; } .section--dark .kv-verteller .kv-rol { color: rgba(244, 244, 245, 0.72); } /* De grote uitspraak op de rustband. De losse scroll-quote blijft grotesk (BOUWGIDS §3.2) — alleen quotes ín een kaart mogen serif. */ .kv-uitspraak { text-align: center; max-width: 52rem; margin-inline: auto; } .kv-uitspraak blockquote { margin: 0 0 var(--sp-7); font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.35; text-wrap: balance; } /* ========================================================= 8. MEEST GEBRUIKTE FUNCTIES Drie kaarten met de EM-illustratie als beeldtaal (dezelfde set als de featuregrids van de EMS-pagina's), plus een verwijsknop naar de functiepagina zelf. ========================================================= */ .kv-functies { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); } .kv-functie { background: var(--c-surface); border-radius: var(--r-media); box-shadow: var(--shadow-card); padding: var(--sp-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); } /* Het icoon houdt zijn eigen verhouding en ware grootte; alleen de hoogte is begrensd zodat de drie koppen op één lijn beginnen. */ .kv-functie img { height: auto; width: auto; max-height: 6.75rem; max-width: 100%; object-fit: contain; } .kv-functie h3 { font-size: var(--fs-kaartkop); margin: var(--sp-2) 0 0; } .kv-functie p { margin: 0; color: var(--c-ink-soft); } .kv-functie .btn { margin-top: auto; } /* ========================================================= 9. WAT ZEGGEN GASTEN — citaten + de standen op de platforms ========================================================= */ .kv-gasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-8); } .kv-gastkaart { margin: 0; background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); } /* Een quote ín een kaart mag serif (BOUWGIDS §3.2, serif-grens). */ .kv-gastkaart blockquote { margin: 0; font-family: var(--font-display); font-size: var(--fs-kaartkop); line-height: 1.25; flex: 1; } .kv-gastkaart figcaption { display: grid; gap: 0.15rem; } .kv-scores { margin-top: var(--sp-8); text-align: center; } .kv-scores-kop { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: var(--sp-5); } .kv-scores ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); } .kv-scores li { display: grid; gap: 0.1rem; background: var(--c-surface); border-radius: var(--r-tile); box-shadow: var(--shadow-tile); padding: var(--sp-4) var(--sp-6); min-width: 11rem; } .kv-score { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; } .kv-score-bron { font-weight: 500; } .kv-score-aantal { font-size: var(--fs-small); color: var(--c-ink-soft); } .kv-scores-bron { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-ink-soft); } /* ========================================================= 10. SLOTBLOK + CTA ========================================================= */ .kv-resultaat { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .kv-resultaat .kv-portretbeeld img { width: 100%; height: auto; border-radius: var(--r-media); display: block; box-shadow: var(--shadow-card); } .kv-resultaat .checklist { margin-top: var(--sp-6); } .kv-cta { text-align: center; } .kv-cta .em-diamond, .kv-cta .kv-ster { display: block; margin: 0 auto var(--sp-6); width: 26px; height: 44px; color: var(--c-ink); } .kv-cta .lead { max-width: 38rem; margin: var(--sp-4) auto 0; } .kv-cta-acties { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-7); } /* ========================================================= 11. Responsief ========================================================= */ @media (max-width: 1000px) { .kv-werkfotos, .kv-functies, .kv-gasten { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } .kv-feiten, .kv-split, .kv-split--flip, .kv-resultaat { grid-template-columns: 1fr; } .kv-feitenkaart { max-width: 28rem; } .kv-voorheen { max-width: none; } .kv-beeld img { max-width: 28rem; } .kv-resultaat .kv-portretbeeld img { max-width: 20rem; } } @media (max-width: 760px) { .kv-hero { min-height: min(92vh, 720px); } .kv-hero-inner { padding-block: clamp(2.5rem, 7vh, 4rem); } /* Op smal scherm mag het logo niet de halve foto vullen; 4rem hoog laat de bovenkant van de foto (waar geen scrim ligt) nog zien. */ .kv-hero-logo { top: 1rem; right: 1rem; padding: 0.5rem 0.7rem; } .kv-hero-logo img { height: 4rem; max-width: 9rem; } .kv-stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .kv-stats .stat-ring { width: clamp(5.5rem, 26vw, 8rem); height: clamp(5.5rem, 26vw, 8rem); font-size: clamp(1.1rem, 5vw, 1.5rem); } .kv-cijferrij { grid-template-columns: 1fr; gap: var(--sp-7); } .kv-galerij { grid-template-columns: repeat(2, 1fr); } .kv-galerij .kv-breed { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; min-height: 0; } .kv-galerij .kv-lang { grid-column: span 2; } } @media (max-width: 460px) { .kv-galerij { grid-template-columns: 1fr; } .kv-galerij .kv-breed, .kv-galerij .kv-lang { grid-column: span 1; } .kv-initiaal::first-letter { font-size: 3.2em; } }