/* DuraPlus 2.0 in de Sitebuilder (plan C B2): wat nodig is om de blokken van type duraplus net zo te laten tekenen als de mockups van Design. Staat in het blad vóór duraplus.css (die volgt 1-op-1, ongewijzigd). Alleen op sites met duraplus-blokken. Elk duraplus-blok staat in een omhulsel met data-dp (display: contents). 1. De mockups hebben alleen de standaardopmaak van de browser plus duraplus.css. Een Sitebuilder-pagina heeft ook de basis van Tailwind (marges, lijsten, svg als blok, knoppen) en de hulpklassen, allebei in een cascade-laag. Deze laag komt daarna en zet binnen de blokken terug naar de browser wat de basislaag van Tailwind zet; duraplus.css (zonder laag) gaat daar weer boven. C3-golf1d (snelheid): niet meer met "all: revert" op elk element en zijn ::before/::after. Dat zette honderden eigenschappen per element terug en kostte op het mobiele profiel 0,3–0,4 s stijlberekening vóór de eerste paint (de LCP). Nu precies de eigenschappen van de basislaag van Tailwind v4 (preflight), per element zoals daar; dezelfde uitkomst, want geen klasse binnen de blokken is een hulpklasse van Tailwind (duraplus.css en de renderer gebruiken eigen namen). */ [data-dp] { display: contents; } @layer dp-basis { :where([data-dp]) :where(:not(svg *)), :where([data-dp]) :where(:not(svg *))::before, :where([data-dp]) :where(:not(svg *))::after { box-sizing: revert; margin: revert; padding: revert; border: revert; } :where([data-dp]) :where(hr) { height: revert; color: revert; } :where([data-dp]) :where(abbr[title]) { text-decoration: revert; } :where([data-dp]) :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; } :where([data-dp]) :where(a) { color: revert; text-decoration: revert; } :where([data-dp]) :where(b, strong) { font-weight: revert; } :where([data-dp]) :where(code, kbd, pre, samp) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; } :where([data-dp]) :where(small, sub, sup) { font-size: revert; vertical-align: revert; line-height: revert; position: revert; top: revert; bottom: revert; } :where([data-dp]) :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; } :where([data-dp]) :where(summary) { display: revert; } :where([data-dp]) :where(menu, ol, ul) { list-style: revert; } /* ook de maat uit de attributen (width/height: presentatie-hints, die "all: revert" ook terugzette): de maat komt uit duraplus.css */ :where([data-dp]) :where(audio, canvas, embed, iframe, img, object, svg, video) { vertical-align: revert; display: revert; width: revert; height: revert; aspect-ratio: revert; } :where([data-dp]) :where(img, video) { max-width: revert; } :where([data-dp]) :where(button, input, optgroup, select, textarea) { font: revert; font-feature-settings: revert; font-variation-settings: revert; letter-spacing: revert; color: revert; opacity: revert; background-color: revert; border-radius: revert; appearance: revert; } :where([data-dp]) :where(button, input, optgroup, select, textarea)::placeholder { opacity: revert; color: revert; } :where([data-dp]) :where(textarea) { resize: revert; } :where([data-dp]) :where(progress) { vertical-align: revert; } } /* Niet binnen een svg (E2, keuring 03-11): de presentatie-attributen van svg (fill="none", stroke="currentColor", stroke-width) tellen ook als attribuut-opmaak; teruggezet werd elk pad zwart gevuld zonder lijn (onzichtbare iconen in het mobiele menu, zwarte driehoekjes in WebKit). De basis van Tailwind raakt de onderdelen van een svg niet. */ /* Het hidden-attribuut verbergt altijd (panelen van de megamenu, het mobiele menu), ook waar geen Tailwind is (het canvas van de editor). */ :where([data-dp]) [hidden] { display: none !important; } /* 2. global.css geeft h1–h4 de kopletter van het thema en een eigen focusrand; binnen de blokken telt duraplus.css. */ :where([data-dp]) h1, :where([data-dp]) h2, :where([data-dp]) h3, :where([data-dp]) h4 { font-family: revert; font-weight: revert; letter-spacing: revert; text-transform: revert; } :where([data-dp]) :is(a, button, input, select, textarea):focus-visible, :where([data-dp]) [tabindex]:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; border-radius: 4px; } /* 3. De brugkaart is een eigen blok vóór de voet en hangt over de rand pagina | voet met de algemene optie zweven (7). Zijn eigen negatieve marge uit duraplus.css (--brug-over) telt hier niet: zonder zweven staat hij gewoon boven de voet. */ .dp-brugvak .brug { margin-top: 0; } /* het omhulsel van de brug heeft al de 1px van .voet; de voet zelf dus niet. Ook geen lijn (verbeterronde punt 10): duraplus.css geeft een voet zonder brug erin (.voet:not(:has(.brug))) een lijn als grens; in de mockup staat de brug ín de voet, hier is hij een eigen blok ervoor, dus liep die lijn langs de onderrand van de groene kaart (links ervan zichtbaar, "de kaart staat op een streep") */ html[data-zw~="brugkaart"][data-zw] footer.voet { padding-top: 0; border-top: 0; } /* QA 04-11 (42): tikdoelen op mobiel minstens 44 x 44 px (WCAG 2.5.5; de keuring toetst het, livegangkeuring.mjs › tikFouten): de links van de inhoudsopgave ("Op deze pagina", 36 px hoog, onder elkaar) en de korte links in de voet (Assen, Privacy: smaller dan 44 px naast elkaar). Alleen de maat van het klikvlak; de tekst en de lijst staan op dezelfde plek (de inhoudsopgave: 4 px meer padding boven en onder en evenveel negatieve marge, dus 44 px klikvlak bij dezelfde hoogte als de mockup). */ @media (max-width: 760px) { .toc ol a { padding-block: 12px; margin-block: -4px; } .toc summary { padding-block: 16px; margin-block: -16px; } .voet .prov a, .voet .onder a { min-width: 44px; } } /* QA 04-11 (13): een kop met een lang samengesteld woord (render.ts › metKopPas: , X = de breedte van het breedste woord in em, Rubik 900) past op een smal scherm: de letter hooguit zo groot dat dat woord in de container past; nooit groter dan de kop zelf (1em = de letter van de kop), dus een woord dat past blijft gelijk. Als vangnet breekt een woord dat toch niet past (overflow-wrap; geen hyphens: auto, dat breekt ook woorden die passen anders af dan de mockup: 33 px per sectie op 390). */ @media (max-width: 760px) { [data-dp] .kop-pas { font-size: min(1em, calc((100vw - 2 * var(--rand, 16px)) / var(--kop-em))); } :where([data-dp]) :is(h1, h2, h3) { overflow-wrap: break-word; } } /* punt 6, aanvulling (Richard 04-11): per kaart de foto van de reviewer (rond, 40 px) of de initialen in de lichte merktint, de naam en de relatieve datum eronder; het woordmerk van Google alleen bij de score */ .rk .rev .wie { display: flex; align-items: center; gap: 12px; } .rk .rev-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; } .rk .rev-init { display: grid; place-items: center; background: var(--lichtgroen); color: var(--groen-tekst); font: 700 17px/1 var(--f-tekst); } .rk .rev-init[data-k="1"] { background: #E6EFFA; color: var(--blauw); } .rk .rev-init[data-k="2"] { background: var(--groen-tekst); color: #fff; } .rk .rev-init[data-k="3"] { background: var(--blauw); color: #fff; } .rk .rev-naam { display: grid; gap: 2px; min-width: 0; } .rk .rev-datum { font: 500 13px/1.3 var(--f-tekst); color: var(--stil); } /* verbeterronde punt 6: de focus van de reviewbaan staat op .revs (het vak dat scrolt, axe); de rand op de baan zoals de mockup */ .rk .revs:focus-visible { outline: none; } .rk .rk-baan:has(> .revs:focus-visible) { box-shadow: 0 0 0 3px var(--groen-diep); } /* verbeterronde punt 11: "DuraGo Sitebuilder" is een link (zoals onderdelen/FooterGebouwdMet.vue: halfvet, in de koptekstkleur) */ .voet .onder [data-sb-gebouwd] a { font-weight: 600; color: var(--inkt); } /* 4. Het mobiele menu (position: fixed) mag nooit opgesloten worden in een voorouder met transform, translate of filter (incident 01-11). De kop staat niet in .dg-sticky; voor de zekerheid ook hier. */ html.dcm-slot .dg-sticky { translate: none !important; transform: none !important; will-change: auto !important; } /* 5. Keuring Design 03-11 (C1). E1: een artikel zonder inhoudsopgave heeft één kolom (de tekstkolom houdt max. 760 px en staat links op de container). Vangnet tabellen: de houder van elke tabel scrolt zijwaarts, de pagina wordt nooit breder dan het scherm. E6: op mobiel verbergt duraplus.css de pluspunten van de topbalk; zonder reviewsregel geen lege band. E7: de vaste knop onderaan (lib/vasteknop.ts) in de actiekleur blauw, zoals de knop in het mobiele menu. */ .artikel.zonder-toc { grid-template-columns: minmax(0, 1fr); } .dp-tabelhouder { overflow-x: auto; max-width: 100%; min-width: 0; } /* QA 04-11 (24): een brede tabel in de tekstkolom (/bouwfysica 918 px in 760) werd afgeknipt. Een tabel past in zijn kolom: is hij breder dan zijn houder, dan zet het gedragsscript (gedrag.ts › dpTabellen) .te-breed en breken lange woorden in een cel af (afbreekstreep, nl; anders ergens in het woord). Alleen dan: een tabel die past (de mockups) blijft precies zo. Zonder script scrolt hij in de houder. */ .dp-tabelhouder.te-breed .tabel :is(td, th) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } /* op mobiel de kaartvorm van Design (blokken, geen tabelopmaak): een woord dat niet op de regel past, breekt (alleen dan) */ @media (max-width: 760px) { .dp-tabelhouder .tabel:not(.smal):not(.compact) td { overflow-wrap: anywhere; } .dp-tabelhouder .tabel:not(.smal):not(.compact) td.nr::before { white-space: normal; overflow-wrap: anywhere; } } /* het getal blijft heel, zijn label breekt: lange labels liepen over elkaar (/warmteverliesberekening) */ /* een getal breekt nooit (Drenthe op 390: "30.7" en "49" op twee regels): een getalcel (.nr) en een bedrag blijven heel; past de tabel dan niet, dan scrolt hij in zijn houder (keuring: mobiel.mjs, getal over twee regels) */ .dp-tabelhouder .tabel td.nr, .dp-tabelhouder .tabel:not(.smal):not(.compact) td.nr { overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; white-space: nowrap; } /* de kop (th) breekt zoals elke tekst */ @media (max-width: 760px) { .topbalk:not(:has(.reviews, .reviewregel)) { display: none; } } /* de reviewregel heet .reviewregel sinds C2 (C3-golf1b: de score op 390) */ .dg-sticky-cta .dg-sticky-cta-knop { background: var(--blauw); } .dg-sticky-cta:focus-visible .dg-sticky-cta-knop { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blauw); } /* 6. C2 (bouwkaarten): de tekst van een dienstkaart en de titel van een kennisbankkaart hooguit 3 regels (line-clamp); de volle tekst blijft in de link (de naam van de link). Een beetje ruimte onder de regels, zodat overflow: hidden de staarten van g, j en p niet afknipt. De link om een pijl van de labelschaal (SEO S3, labels.ts) vult de rij. */ .dienst .txt p, .art .txt h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; } .schaal .pijlen .rij > a { display: block; border-radius: 6px; } /* 7. Zweven (algemene blokoptie, schema.ts › ZWEVEN; Richard 03-11). duraplus.css van Design zet de overlap (.zweef-kwart, .zweef-half: margin-top = -¼ of -½ van --zweef-h); dpZweef (gedrag.ts) meet --zweef-h, zoals ontwerp/zweven.js. Hier wat de Sitebuilder er omheen doet: - het blok zelf heeft geen eigen afstand boven en onder en geen eigen achtergrond (verbeterronde punt 2, Richard 04-11: "nu … blijf je die hele witte balk over de hele breedte zien"): de kaart ligt over de naad, het deel eronder (--zweef-onder) op de volgende sectie (duraplus.css: margin-bottom); alleen de brugkaart houdt zijn vlak (de voet erna, zie onder); - de sectie ervoor krijgt onderaan precies het deel dat over haar valt erbij (--zweef-ruimte, dpZweef), als ruimte in haar eigen vlak (::after), zodat haar laatste inhoud even ver van de kaart staat als elders van de volgende sectie; - de sectie erna krijgt bovenaan de sectieruimte plus het deel onder de naad (--zweef-volgende, dpZweef; zoals .zweef-half + .sectie in duraplus.css, dat door de omhulsels hier niet grijpt), zodat haar kop even ver van de kaart staat als elders; - zonder script: een schatting per blok (de vertrouwensbalk: de gemeten hoogte van Design per breekpunt, 83/136/257 px). Geen beweging: bij prefers-reduced-motion verandert er niets. */ .bg-wit { --zweef-vlak: var(--wit); } .bg-warm { --zweef-vlak: var(--warm); } .bg-lichtgroen { --zweef-vlak: var(--lichtgroen); } .dp-brugvak { --zweef-vlak: var(--voet, #fff); } [data-dp] :is(.zweef-half, .zweef-kwart) { padding-block: 0; background: none; } [data-dp] :is(.zweef-half, .zweef-kwart) { z-index: 3; } /* de brugkaart: de voet erna staat niet in
(geen sectie om op te liggen); het omhulsel houdt zijn vlak onder de rand in de kleur van de voet (--voet, Richard 06-11: geen witte strook) en trekt de voet niet op */ [data-dp] .dp-brugvak:is(.zweef-half, .zweef-kwart) { margin-bottom: 0; background: linear-gradient(transparent var(--zweef-over), var(--zweef-vlak, transparent) var(--zweef-over)); } /* het laatste blok van zijn rij: geen sectie erna, dus ook niets optrekken (de voet schuift anders onder de kaart) */ [data-dp]:last-child > * > :is(.zweef-half, .zweef-kwart) { margin-bottom: 0; } /* de sectie erna (een duraplus-blok, of een omhulsel met een duraplus-weergave als eerste kind) */ :where([data-zw~="zweeft-half"]) + * { --zweef-f-na: .5; } :where([data-zw~="zweeft-kwart"]) + * { --zweef-f-na: .75; } :where([data-dp="labelcheck"]) + * { --zweef-schat-na: var(--schat-labelcheck); } :where([data-dp="vertrouwensbalk"]) + * { --zweef-schat-na: var(--schat-vertrouwensbalk); } :where([data-dp="tussen-actie"]) + * { --zweef-schat-na: var(--schat-tussen-actie); } /* --zweef-na op de sectie zelf (daar zet dpZweef --zweef-volgende; een var() wordt opgelost waar hij staat). Op het eerste element van het blok erna, ook als dat geen .sectie is (Richard 04-11, huurwoning op 390: de vertrouwensbalk lag over de antwoordzin, want .antwoord-sectie kreeg geen ruimte) */ :where([data-zw~="zweeft-rand"]) + [data-dp] > * > :first-child, :where([data-zw~="zweeft-rand"]) + :not([data-dp]) > [data-dp]:first-child > * > :first-child { --zweef-na: var(--zweef-volgende, calc(var(--zweef-schat-na, 112px) * var(--zweef-f-na, .5))); } /* een eerste element dat geen .sectie is (eigen padding, bv. .antwoord-sectie): het deel onder de naad komt erbij als een doorzichtige rand bovenaan; de achtergrond van het element loopt onder de rand door (background-clip: border-box), dus geen eigen strook */ :where([data-zw~="zweeft-rand"]) + [data-dp] > * > :first-child:not(.sectie), :where([data-zw~="zweeft-rand"]) + :not([data-dp]) > [data-dp]:first-child > * > :first-child:not(.sectie) { border-top: var(--zweef-na) solid transparent; background-clip: border-box; } :where([data-zw~="zweeft-rand"]) + [data-dp] > * > .sectie, :where([data-zw~="zweeft-rand"]) + :not([data-dp]) > [data-dp]:first-child > * > .sectie { padding-top: calc(var(--sectie) + var(--zweef-na)); } :where([data-zw~="zweeft-rand"]) + [data-dp] > * > .sectie:is(.afstand-kort-boven, .kort-na-kop), :where([data-zw~="zweeft-rand"]) + :not([data-dp]) > [data-dp]:first-child > * > .sectie:is(.afstand-kort-boven, .kort-na-kop) { /* kort-na-kop: formulier-taak (duraplus.css, 0,2,0) */ padding-top: calc(clamp(24px, 3vw, 48px) + var(--zweef-na)); } :where([data-zw~="zweeft-rand"]) + [data-dp] > * > .sectie.afstand-kort, :where([data-zw~="zweeft-rand"]) + :not([data-dp]) > [data-dp]:first-child > * > .sectie.afstand-kort { padding-top: calc(var(--s5) + var(--zweef-na)); } :where([data-zw~="zweeft-rand"]) + [data-dp] > * > .sectie.afstand-aansluiten, :where([data-zw~="zweeft-rand"]) + :not([data-dp]) > [data-dp]:first-child > * > .sectie.afstand-aansluiten { padding-top: var(--zweef-na); } /* een ander blok erna (geen duraplus-sectie): het deel onder de naad als ruimte bovenin (in zijn eigen vlak), boven zijn eigen afstand */ [data-zw~="na-zweef-los"][data-zw][data-zw]::before { content: ""; display: block; height: var(--zweef-volgende, calc(var(--zweef-schat-na, 112px) * var(--zweef-f-na, .5))); pointer-events: none; } /* de ruimte in de sectie ervoor; de stand en de schatting van het zwevende blok bepalen hem (--zweef-f, --zweef-schat) */ [data-zw~="voor-half"][data-zw] { --zweef-f: .5; } [data-zw~="voor-kwart"][data-zw] { --zweef-f: .25; } [data-zw~="voor-labelcheck"][data-zw] { --zweef-schat: var(--schat-labelcheck); } [data-zw~="voor-vertrouwensbalk"][data-zw] { --zweef-schat: var(--schat-vertrouwensbalk); } [data-zw~="voor-brugkaart"][data-zw] { --zweef-schat: var(--schat-brugkaart); } [data-zw~="voor-tussen-actie"][data-zw] { --zweef-schat: var(--schat-tussen-actie); } /* een duraplus-blok ervoor: in zijn eigen vlak (het buitenste element); ook in een omhulsel zonder data-dp met een duraplus-weergave als laatste kind (faq/groep weergave duraplus, C3); een ander blok ervoor: onder dat blok */ :where([data-dp][data-zw~="voor-zweef"]) > * > :last-child::after, :where(:not([data-dp])[data-zw~="voor-zweef"] > [data-dp]:last-child) > * > :last-child::after, :where([data-zw~="voor-zweef-los"])::after { content: ""; display: block; height: var(--zweef-ruimte, calc(var(--zweef-schat, 112px) * var(--zweef-f))); pointer-events: none; } /* de schattingen (de kaarthoogte zonder script), ook als --zweef-h op het blok zelf */ :root { --schat-labelcheck: clamp(150px, calc(340px - 13vw), 300px); --schat-vertrouwensbalk: 80px; --schat-brugkaart: clamp(230px, calc(520px - 20vw), 480px); --schat-tussen-actie: 112px; } /* de vertrouwensbalk zwevend: de gemeten hoogte van Design (duraplus.css: --zweef-h 83/136/257 px, verbeterronde 04-11) */ @media (max-width: 1100px) { :root { --schat-vertrouwensbalk: 74px; } } @media (max-width: 760px) { :root { --schat-vertrouwensbalk: 190px; } } [data-dp="labelcheck"] :is(.zweef-half, .zweef-kwart) { --zweef-h: var(--schat-labelcheck); } [data-dp="vertrouwensbalk"] :is(.zweef-half, .zweef-kwart) { --zweef-h: var(--schat-vertrouwensbalk); } [data-dp="brugkaart"] :is(.zweef-half, .zweef-kwart) { --zweef-h: var(--schat-brugkaart); } [data-dp="tussen-actie"] :is(.zweef-half, .zweef-kwart) { --zweef-h: var(--schat-tussen-actie); } /* 7b. Zonder zweven (geen, of op een plek waar het niet kan: het eerste blok) nooit over de sectie erboven: de eigen negatieve marge van de check-kaart in duraplus.css (.check, de home van de mockup) telt in de Sitebuilder niet; dat doet zweven. */ [data-dp] .check:not(.zweef-half):not(.zweef-kwart) { margin-top: 0; } /* 8. De check-kaart (duraplus/labelcheck): de uitslag van de labelcheck (role=status) onder het formulier over de hele breedte van de kaart; zolang hij leeg is neemt hij geen plaats in (hij blijft voor schermlezers bestaan). */ .check .kaart > .dg-lc-uit { grid-column: 1 / -1; margin: 0; } .check .kaart > .dg-lc-uit:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* de knop in de uitslag (geen of een verlopen label) in de knopstijl van duraplus.css (.knop.blauw); labelcheck.css kent hem alleen in de oude kaart (.dg-lc) */ .check .dg-lc-uit .dg-lc-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; margin-top: 12px; padding: 0 26px; border-radius: var(--pill); font: 600 16px/1 var(--f-tekst); background: var(--blauw); color: #fff; text-decoration: none; } .check .dg-lc-uit .dg-lc-cta:hover { background: var(--blauw-diep); } /* C3 afstand aansluiten (algemene blokoptie, schema.ts): het blok sluit zonder tussenruimte aan op het blok erboven (zelfde vlak, zoals de zakelijke strook onder de situaties in energielabel-aanvragen.html: alleen de marge van het blok zelf). Heeft het blok erboven zelf een korte onderafstand (kort-onder, kort), dan blijft die (C3-golf1, home: de check-kaart onder de keuzekaarten) */ /* flow-root: de bovenmarge van het eerste kind (de zakelijke strook) blijft binnen het vlak van de sectie, anders valt zij erdoorheen en staat er een streep van de pagina-achtergrond tussen de twee blokken (C3-golf1, gezien op de hub) */ .afstand-aansluiten { padding-top: 0; display: flow-root; } [data-dp][data-zw~="voor-aansluit"][data-zw] > * > .sectie:not(.afstand-kort-onder):not(.afstand-kort) { padding-bottom: 0; } /* de FAQ staat in de bouw in een eigen omhulsel zonder data-dp: het blok ervoor sluit net zo aan (één band; de ruimte staat boven de FAQ, duraplus.css) */ [data-dp][data-zw~="voor-aansluit-omhulsel"][data-zw][data-zw][data-zw] > * > .sectie:not(.afstand-kort-onder):not(.afstand-kort) { padding-bottom: 0; } /* Richard 06-11 ("lekker sticky"): een blok zonder eigen marge plakte aan de inhoud erboven (de labelcheck onder het proces: 13 px; de zoekbalk onder de artikelen en feitjes onder feitjes: 0 px). Zelfde band, de korte stap van het ritme ertussen, net als kort-onder + aansluiten op de home. De keuring meet het (ritme.mjs › AFSTAND_IN_PAGINA). */ [data-dp][data-zw~="voor-plak"][data-zw][data-zw][data-zw] > * > .sectie:not(.afstand-kort-onder):not(.afstand-kort) { padding-bottom: var(--s5); } /* 9. De labelbalk (epstat op een duraplus-site, C3-golf1d, lib/epstat.ts). Het widget (duraplus.nl/widget/ep-stat) rendert in de browser, na de hydratie; tot dan is het blok leeg. De ruimte is vooraf gereserveerd, zodat er niets verschuift (CLS 0): de hoogte van het gerenderde widget in de letter van de site (data-font="inherit"), per band de grootste, naar boven afgerond. Per vorm: twee balken (een gebied met de landelijke vergelijking: de 11 provincies en 44 plaatsen, gemeten van 320 tot 2560 px) en één balk (het land zelf of zonder vergelijking: de dienstpagina's). tools/lokaal/widgets.mjs toetst het in de paginatest en de keuring (rood als het widget groter wordt). Een SSR-terugval (de balk al in de HTML) komt in golf 2. */ .dp-epstat { display: block; } .dp-epstat[data-vergelijk="1"]:not([data-scope="land"]) { min-height: 188px; } .dp-epstat[data-scope="land"], .dp-epstat[data-vergelijk="0"] { min-height: 94px; } @media (max-width: 1129px) { .dp-epstat[data-vergelijk="1"]:not([data-scope="land"]) { min-height: 213px; } } @media (max-width: 1089px) { .dp-epstat[data-vergelijk="1"]:not([data-scope="land"]) { min-height: 238px; } .dp-epstat[data-scope="land"], .dp-epstat[data-vergelijk="0"] { min-height: 119px; } } @media (max-width: 579px) { .dp-epstat[data-vergelijk="1"]:not([data-scope="land"]) { min-height: 262px; } } @media (max-width: 559px) { .dp-epstat[data-vergelijk="1"]:not([data-scope="land"]) { min-height: 287px; } .dp-epstat[data-scope="land"], .dp-epstat[data-vergelijk="0"] { min-height: 144px; } } @media (max-width: 399px) { .dp-epstat[data-vergelijk="1"]:not([data-scope="land"]) { min-height: 337px; } .dp-epstat[data-scope="land"], .dp-epstat[data-vergelijk="0"] { min-height: 169px; } } @media (max-width: 369px) { .dp-epstat[data-vergelijk="1"]:not([data-scope="land"]) { min-height: 354px; } } /* met een titel (Labelverdeling in Nederland, 0611t): de regel erbij, gemeten op /energielabel-aanvragen/woning */ .dp-epstat[data-scope="land"]:not([data-titel=""]) { min-height: 138px; } @media (max-width: 1089px) { .dp-epstat[data-scope="land"]:not([data-titel=""]) { min-height: 163px; } } @media (max-width: 559px) { .dp-epstat[data-scope="land"]:not([data-titel=""]) { min-height: 188px; } } @media (max-width: 399px) { .dp-epstat[data-scope="land"]:not([data-titel=""]) { min-height: 213px; } } /* Een bedrag is één onbreekbaar geheel, in elke context: tussenbalk, kaart, tabel, kop en knop (Richard 04-11: in de tussenbalk stond "Vanaf € 192" met ",50" op een nieuwe regel, want .mini-cta span{display:block} van duraplus.css raakte ook de prijs en zijn centen). Het bedrag breekt niet (ook niet tussen € en het getal), de centen staan altijd in de regel van het bedrag. Een prijs die in de tussenbalk in de lopende tekst staat, blijft een inline-element. Keuring: mobiel.mjs (bedrag op één regel). */ [data-dp] :is([data-sb-prijs], [data-sb-pakket]) { white-space: nowrap; } [data-dp] :is([data-sb-prijs], [data-sb-pakket]) .cent { display: inline; margin-top: 0; } /* de drie afstammelingsregels van duraplus.css die elke span als blok zetten (.mini-cta span, .tab-project span, .mm-kol a span; Design: daar hoort een kindselector) raken een geneste prijs niet */ [data-dp] :is(.mini-cta span, .tab-project span, .mm-kol a span) :is(span[data-sb-prijs], span[data-sb-pakket]) { display: inline; margin: 0; font-size: inherit; } /* keuzelijst (punt 1, review): versturen zonder keuze geeft een zichtbare rand, ook na een muisklik (het veld krijgt aria-invalid) */ [data-dp] .kl-veld[aria-invalid="true"] { border-color: #D83028; box-shadow: 0 0 0 3px rgba(216, 48, 40, .18); } /* Coördinator 05-11 (mobiel op de proefsite): 1. het widget van de labelbalk laadt niet (of zonder JS): geen lege gereserveerde vlakte, het blok valt weg (gedrag.ts › dpWidgetsVroeg) */ .sectie:has(> .in > .dp-epstat.dp-epstat-leeg) { display: none; } /* coördinator 05-11 (Assen op 390: witte vlakken van 100-120 px boven en onder de labelbalk): het blok van de labelbalk heeft de korte sectieruimte (zoals .kort-na-kop), voor elke pagina met een labelbalk */ [data-dp="epstat"] .sectie:has(> .in > .dp-epstat) { --sectie: clamp(24px, 3vw, 48px); } /* via --sectie: de ruimte onder een zwevend blok erboven telt nog mee */ /* en het blok erna in dezelfde achtergrond begint ook kort (anders twee sectieruimtes wit op wit, "een leeg wit vlak") */ :is([data-dp="epstat"]:has(.sectie.bg-wit) + [data-dp] > * > .sectie.bg-wit, [data-dp="epstat"]:has(.sectie.bg-warm) + [data-dp] > * > .sectie.bg-warm, [data-dp="epstat"]:has(.sectie.bg-lichtgroen) + [data-dp] > * > .sectie.bg-lichtgroen) { --sectie-boven: clamp(24px, 3vw, 48px); padding-top: var(--sectie-boven); } /* home op 390: zonder de sterrenregel geen lijn boven het eerste punt van de vertrouwensbalk */ @media (scripting: none) { .sectie:has(> .in > .dp-epstat) { display: none; } } /* 2 en 3. een strook of tabel die verder loopt dan het scherm: bolletjes, teller en "Veeg voor meer" (gedrag.ts › dpVeeg), en een vervaging aan de rechterrand tot het eind */ [data-dp] .veegbaar:not(.aan-eind) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } [data-dp] .veegbaar:focus-visible { -webkit-mask-image: none; mask-image: none; } /* review: de mask knipte de focusring weg */ [data-dp] .dp-veeg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; margin-top: 4px; font: 500 13px/1.2 var(--f-tekst); color: var(--stil); } /* de carrousel (mobiel-richtlijn §3): t/m 6 kaarten knoppen van 44 × 44 op elkaar aansluitend, het bolletje zelf 10 px (actief 28 px) als ::before; vanaf 7 alleen een indicator; rechts de teller; eronder de hint die 3× zacht beweegt en na de eerste veeg verdwijnt */ [data-dp] .dp-veeg-punten { display: flex; align-items: center; gap: 0; margin-left: -17px; } [data-dp] .dp-veeg-punten button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; } [data-dp] .dp-veeg-punten button::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: #B9D8BF; transition: width .25s, background .25s; } [data-dp] .dp-veeg-punten button[aria-current=true]::before { width: 28px; background: var(--groen-diep); } [data-dp] .dp-veeg-punten button:focus-visible { outline: 3px solid var(--groen-diep); outline-offset: -6px; border-radius: 12px; } [data-dp] .dp-veeg-indicator { gap: 8px; margin-left: 0; min-height: 44px; } [data-dp] .dp-veeg-punten i { width: 10px; height: 10px; border-radius: 999px; background: #B9D8BF; transition: width .25s, background .25s; } [data-dp] .dp-veeg-punten i.aan { width: 28px; background: var(--groen-diep); } [data-dp] .dp-veeg-teller { font: 600 14px/1 var(--f-tekst); font-variant-numeric: tabular-nums; } [data-dp] .dp-veeg-vh, [data-dp] .rk-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-dp] .dp-veeg-tekst { flex-basis: 100%; font: 600 13px/1 var(--f-tekst); color: var(--groen-tekst); margin-top: 6px; animation: dp-veeg-hint 1.6s ease-in-out 3; animation-play-state: paused; } /* pas in beeld (gedrag.ts › dpHintInBeeld) */ [data-dp] .dp-veeg-tekst.hint-aan { animation-play-state: running; } [data-dp] .dp-veeg-tekst::after { content: " \2192"; } [data-dp] .dp-veeg.dp-geveegd .dp-veeg-tekst { display: none; } @keyframes dp-veeg-hint { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } } @media (prefers-reduced-motion: reduce) { [data-dp] .dp-veeg-tekst { animation: none; } [data-dp] .dp-veeg-punten > *, [data-dp] .dp-veeg-punten button::before { transition: none; } } /* Prijskaarten (de coördinator 07-11, keuring 1024): tot 1100 px twee kolommen, ook de rij van drie; een knop groeit mee en breekt, een lang woord breekt, nooit afgesneden tekst */ @media (max-width: 1100px) { [data-dp] .prijzen.drie { grid-template-columns: repeat(2, minmax(0, 1fr)); } } [data-dp] .prijs { min-width: 0; overflow-wrap: break-word; hyphens: auto; } [data-dp] .prijs .knop { height: auto; min-height: 48px; padding-block: 10px; white-space: normal; text-align: center; justify-content: center; line-height: 1.25; } /* de halve volgende kaart: (baan − tussenruimte) / 1,5 (§3), ook de reviews */ @media (max-width: 760px) { [data-dp] .prijzen.drie { display: flex; gap: var(--s2); margin-top: 0; } /* keuring 05-11: .drie van een ander blok (duraplus.css) hield 3 prijskaarten in een raster van 103 px per kaart */ [data-dp] .prijzen .prijs { flex: 0 0 calc((100% - var(--s2)) / 1.5); } [data-dp] .af-kaarten > .af-kaart { flex: 0 0 calc((100% - 16px) / 1.5); } [data-dp] .rk .rev, [data-dp] .rk-raster .rev { flex: 0 0 calc((100% - var(--s2)) / 1.5); } [data-dp] .prijzen .prijs .knop, [data-dp] .af-kaarten .af-kaart .knop { padding-inline: 14px; font-size: 15px; line-height: 1.25; white-space: normal; text-align: center; justify-content: center; min-height: 48px; height: auto; padding-block: 10px; } /* de reviewcarrousel: dezelfde 44 px-knoppen; vanaf 7 de indicator */ [data-dp] .rk-bolletjes:not(.rk-indicator) { gap: 0; margin-left: -17px; } [data-dp] .rk-bolletjes:not(.rk-indicator) button { width: 44px; height: 44px; background: none; display: grid; place-items: center; } [data-dp] .rk-bolletjes:not(.rk-indicator) button::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: #B9D8BF; transition: width .25s, background .25s; } [data-dp] .rk-bolletjes:not(.rk-indicator) button[aria-selected=true]::before { width: 28px; background: var(--groen-diep); } } [data-dp] .rk-bolletjes.rk-indicator button { pointer-events: none; cursor: default; } /* passen alle kaarten, dan geen bediening (gedrag.ts meet het, ook bij een resize); zonder JS ook niet */ [data-dp] .rk[data-een-scherm] :is(.rk-bediening, .rk-hint) { display: none !important; } @media (scripting: none) { [data-dp] .rk :is(.rk-bediening, .rk-hint) { display: none !important; } } /* de pijlen: uitgeschakeld met aria-disabled (de focus blijft) */ [data-dp] .rk-pijlen button[aria-disabled=true] { opacity: .35; cursor: default; } [data-dp] .rk-pijlen button[aria-disabled=true]:hover { border-color: rgba(26, 42, 32, .18); background: #fff; } /* 2. een tabel in tabelvorm (.smal, .compact) op een telefoon: geen woorden in stukken ("No-or-der-park"); past hij niet, dan veegt hij in zijn houder, met de aanwijzing van dpVeeg (bolletjes niet: "Veeg voor meer kolommen") */ @media (max-width: 600px) { .dp-tabelhouder.te-breed .tabel:is(.smal, .compact) :is(td, th) { overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; } } /* 3. tabs (de woningtypen van de pakketkaarten) op een telefoon onder elkaar in twee kolommen, nooit een verborgen strook */ @media (max-width: 760px) { [data-dp] .schakel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; border-radius: var(--r-m); } [data-dp] .schakel button { height: auto; min-height: 44px; padding: 10px 12px; white-space: normal; line-height: 1.2; } } /* 4. de duimbalk (.dg-sticky-cta) pas als de knop in de kop uit beeld is en geen formulier in beeld (gedrag.ts › dpDuimbalk) */ html.dp-duim .dg-sticky-cta { transition: transform .25s ease, visibility .25s; } html.dp-duim .dg-sticky-cta:not(.dp-toon) { transform: translateY(110%); visibility: hidden; } @media (prefers-reduced-motion: reduce) { html.dp-duim .dg-sticky-cta { transition: none; } } /* 5. Google één keer per scherm op een telefoon: staat de score met het woordmerk al in de topbalk, dan in de vertrouwensbalk de score zonder het woordmerk */ /* coördinator 05-11 (home op 390): ook de sterrenregel zelf niet, de waardering staat al in de topbalk; BRL, levering en het derde punt blijven */ /* C3-golf1g: een anker op een duraplus-blok (de blokoptie anchor, render.ts › metAnker) valt niet onder de vaste kop */ :where([data-dp]) > * > [id] { scroll-margin-top: calc(var(--kop-balk, 72px) + 38px); } /* Megamenu, het actievak als keuze (Design 05-11, na-golf1/megamenu-voorstel/bouwkaart-actie-keuze.md › CSS; variant C, Omgevingsvergunning). Tot de stand van Design deze regels in duraplus.css heeft. Desktop: .mm-keuzevak in .mm-actie; mobiel: .dcm-promo.dcm-keuzepromo */ [data-dp] .mm-keuze { display: grid; gap: 10px; margin-top: 12px; } [data-dp] .mm-keuze a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--lijn); transition: border-color .15s; } [data-dp] .mm-keuze a:hover { border-color: var(--groen); } [data-dp] .mm-keuze .oog { grid-column: 1; margin: 0; } [data-dp] .mm-keuze b { grid-column: 1; font: 700 15px/1.3 var(--f-kop); } [data-dp] .mm-keuze span:not(.oog) { grid-column: 1; font-size: 13px; color: var(--stil); } [data-dp] .mm-keuze .ico { grid-column: 2; grid-row: 1 / 4; } [data-dp] .dcm-keuze { display: grid; gap: 8px; margin-top: 12px; } [data-dp] .dcm-keuze a { display: block; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: #fff; } [data-dp] .dcm-keuze b { display: block; } [data-dp] .dcm-keuze span { font-size: 13px; opacity: .85; } /* De sterren van een score vullen zich (coördinator 05-11, zoals live: style#dp-sterren-animatie; render.ts › dpSterren, gedrag.ts › dpSterren). Twee lagen van vijf sterren: onder leeg, boven in de kleur van .sterren (het thema), afgeknipt tot de score. De html is de eindstand: zonder JS, en met prefers-reduced-motion, staan de sterren meteen goed. Met JS begint de bovenste laag van de sterren die het script volgt (.dp-ster-wacht) leeg en loopt één keer vol als ze in beeld komen (.dp-ster-aan); afdrukken toont de eindstand. */ [data-dp] .dp-sterren { position: relative; width: max-content; max-width: 100%; } [data-dp] .dp-sterren > span { display: flex; gap: inherit; } [data-dp] .dp-ster-leeg { color: var(--dp-ster-leeg, #dadce0); } [data-dp] .dp-ster-vol { position: absolute; left: 0; top: 0; clip-path: inset(0 var(--dp-ster-rest, 0%) 0 0); } @media screen and (prefers-reduced-motion: no-preference) { [data-dp] .dp-sterren.dp-ster-wacht:not(.dp-ster-aan) .dp-ster-vol { clip-path: inset(0 100% 0 0); } [data-dp] .dp-sterren.dp-ster-wacht.dp-ster-aan .dp-ster-vol { animation: dp-ster-vullen .62s cubic-bezier(.2, .7, .3, 1) .12s both; } } @keyframes dp-ster-vullen { from { clip-path: inset(0 100% 0 0); } } /* De inhoudsopgave in een artikel op warm (coördinator 05-11: het plaatsblok rendert al zijn delen in de achtergrond van het blok, warm). duraplus.css geeft het vak van de inhoudsopgave op ≤ 1100 px en de hover de kleur warm: op een warme sectie wit, anders verdwijnt het vak */ [data-dp] .bg-warm .toc a:hover { background: var(--wit); } @media (max-width: 1100px) { [data-dp] .bg-warm .toc details { background: var(--wit); } } /* Een reviewplek (tekstMetReviews, data-sb-reviews) geeft geen eigen ruimte in een flex-link met gap (Design 05-11, zoals de mockups) */ [data-dp] [data-sb-reviews] { display: contents; } /* Proces, "Zo werkt het" (golf1h, Design 05-11, blokken/proces.md): de regels van de mockup na-golf1/pagina/hub-aanvragen/v3.html, 1-op-1, tot de stand van Design ze in duraplus.css heeft. Desktop 3 + 2 (subgrid), 761–1100 tekst links en scherm rechts, ≤ 760 onder elkaar */ .pr-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto;column-gap:var(--s4);row-gap:var(--s3)} .pr-stappen li{display:grid;grid-column:span 2;grid-row:span 2;grid-template-rows:subgrid;row-gap:var(--s3);min-width:0} .pr-stappen li:nth-child(4){grid-column:2 / span 2} .pr-stappen li:nth-child(4),.pr-stappen li:nth-child(5){margin-top:var(--s4)} .pr-tekst{display:grid;gap:12px;align-content:start;position:relative} .pr-stappen li:nth-child(1) .pr-tekst::before,.pr-stappen li:nth-child(2) .pr-tekst::before,.pr-stappen li:nth-child(4) .pr-tekst::before{content:"";position:absolute;left:56px;right:calc(-1 * var(--s4) + 12px);top:21px;height:2px;background:repeating-linear-gradient(90deg,var(--lijn) 0 8px,transparent 8px 14px)} .pr-tekst h3{margin:0 0 4px}.pr-tekst p{margin:0} .pr .nr{width:44px;height:44px;border-radius:50%;background:var(--wit);border:2px solid var(--groen);display:grid;place-items:center;font:800 18px/1 var(--f-kop);color:var(--groen-diep);position:relative} .pr-stappen li:last-child .nr{background:var(--groen);color:var(--inkt)} .pr-scherm{margin:0;align-self:start;background:var(--wit);border:1px solid var(--lijn);border-radius:14px;overflow:hidden;box-shadow:0 18px 36px -24px rgba(22,44,28,.35)} .pr-scherm img{display:block;width:100%;height:auto} .pr-noot{margin:var(--s3) 0 0;font-size:14px;color:#475569} /* 6 stappen 3 + 3, 4 stappen 2 + 2 (na-golf1/pagina/proces/varianten/beng.html en mwa.html, 1-op-1) */ @media (min-width:1101px){.pr-stappen.pr-aantal-6 li:nth-child(4){grid-column:span 2}.pr-stappen.pr-aantal-6 li:nth-child(n+4){margin-top:var(--s4)}} .pr-stappen.pr-aantal-6 li:nth-child(5) .pr-tekst::before{content:"";position:absolute;left:56px;right:calc(-1 * var(--s4) + 12px);top:21px;height:2px;background:repeating-linear-gradient(90deg,var(--lijn) 0 8px,transparent 8px 14px)} .pr-stappen.pr-aantal-4{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4)} .pr-stappen.pr-aantal-4 li,.pr-stappen.pr-aantal-4 li:nth-child(4){grid-column:auto;margin-top:0} .pr-stappen.pr-aantal-4 li:nth-child(n+3){margin-top:var(--s4)} .pr-stappen.pr-aantal-4 .pr-scherm{max-width:420px} .pr-stappen.pr-aantal-4 li:nth-child(even) .pr-tekst::before{display:none} .pr-stappen.pr-aantal-4 li:nth-child(3) .pr-tekst::before{content:"";position:absolute;left:56px;right:calc(-1 * var(--s4) + 12px);top:21px;height:2px;background:repeating-linear-gradient(90deg,var(--lijn) 0 8px,transparent 8px 14px)} @media (max-width:1100px){ .pr-stappen{grid-template-columns:minmax(0,1fr);row-gap:var(--s4);position:relative} .pr-stappen::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:repeating-linear-gradient(180deg,var(--lijn) 0 8px,transparent 8px 14px)} .pr-stappen li,.pr-stappen li:nth-child(4){grid-column:auto;grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:var(--s4);align-items:start;margin-top:0} .pr-stappen li .pr-tekst::before{display:none!important} .pr-tekst .nr{z-index:1} .pr-tekst{grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start} } @media (max-width:1100px){.pr-stappen.pr-aantal-4{grid-template-columns:minmax(0,1fr)}.pr-stappen.pr-aantal-4 li:nth-child(n+3){margin-top:0}} @media (min-width:761px) and (max-width:1100px){.pr-stappen.pr-aantal-4 .pr-scherm{max-width:none}.pr-stappen li:not(:has(.pr-scherm)){grid-template-columns:minmax(0,1fr)}} @media (max-width:760px){ .pr-stappen.pr-aantal-4 li,.pr-stappen.pr-aantal-4 li:nth-child(4){grid-template-columns:minmax(0,1fr);row-gap:14px} .pr-stappen.pr-aantal-4 .pr-scherm{max-width:358px} .pr-stappen{row-gap:var(--s4)} .pr-stappen::before{display:none} .pr-stappen li,.pr-stappen li:nth-child(4){grid-template-columns:minmax(0,1fr);row-gap:14px} .pr-tekst{grid-template-columns:40px minmax(0,1fr);gap:14px} .pr .nr{width:40px;height:40px;font-size:17px} .pr-scherm{max-width:358px} } /* Kennisbank 2.0 (Sitebuilder 05-11, blok 4; blokken/kennisbank-overzicht.md, zoek-kennisbank.md, hero.md): de regels van de mockup na-golf1/pagina/kennisbank/v1.html (