/* Alles Over Mantelzorg — designsysteem "Warm papier, diepgroen" Warm papier met een subtiele roodtoon, het groen uit het logo als accent, haarlijnen in plaats van kaarten met schaduw, serif-koppen op regulier gewicht. Twee bewuste afwijkingen van het voorbeeld: - het gedempte grijs is verdiept van #766a66 naar #685C58, want het origineel haalde 3,92:1 op het panelvlak waar WCAG 2.2 AA 4,5:1 vraagt; - labels staan op 12px en de basistekst op 18px, omdat een groot deel van de doelgroep 65-plus is. Lettertypen worden zelf gehost. Zie assets/fonts/LEESMIJ.md. Ontbreken ze, dan valt de site terug op Georgia en de systeemletters. */ /* ---------- Lettertypen ---------- */ @font-face { font-family: 'Spectral'; src: url('../fonts/spectral-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral'; src: url('../fonts/spectral-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Spectral'; src: url('../fonts/spectral-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Spectral'; src: url('../fonts/spectral-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Karla'; src: url('../fonts/karla-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Karla'; src: url('../fonts/karla-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Karla'; src: url('../fonts/karla-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Archivo'; src: url('../fonts/archivo-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* ---------- Ontwerptokens ---------- */ :root { --papier: #F1E5E0; --paneel: #ECDCD6; --vlak: #F8F1EE; --inkt: #241F1D; --gedempt: #685C58; /* Accent overgenomen uit het woordmerk van het logo, zodat merk en site dezelfde kleur spreken. Salie #86977E uit het beeldmerk is te licht voor tekst (2,53:1) en wordt alleen als vlak gebruikt. */ --accent: #304034; --accent-diep: #20301F; --salie: #86977E; --haar: #DCCCC6; --haar-sterk: #C9B5AE; --op-accent: #FFFFFF; --amber-tekst: #7A4A0F; --amber-vlak: #F2E3CE; --rust-tekst: #22301F; --rust-vlak: #D7E1D0; --alarm-tekst: #7B2D26; --alarm-vlak: #F6DED9; --serif: 'Spectral', Georgia, 'Times New Roman', serif; --sans: 'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --label: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Vertelt de browser dat deze pagina licht is. Zonder dit maken Safari en Chrome op een toestel in donkere modus zelf formuliervelden, schuifbalken en invoervakken donker — ook als de rest van de pagina licht blijft. */ color-scheme: light; --breedte: 1180px; --lees: 62ch; --rand: 40px; --onderruimte: 5rem; } /* Donkere variant — bewust uitgeschakeld. De site volgde eerst de instelling van het toestel. Op een iPhone in donkere modus werd de achtergrond daardoor bijna zwart, terwijl het warme papier juist het karakter van het ontwerp draagt. De kleuren staan er nog wel, want ze zijn stuk voor stuk op contrast getoetst. Wil je donkere modus terug, dan zijn er twee manieren: · altijd donker → zet data-thema="donker" op in scripts/bouw.mjs · het toestel volgen → vervang de regel hieronder door @media (prefers-color-scheme: dark) { :root { ... } } */ [data-thema="donker"] { color-scheme: dark; --papier: #1B1917; --paneel: #232120; --vlak: #221F1E; --inkt: #F0E8E4; --gedempt: #A89E99; --accent: #A6C39C; --accent-diep: #C2D9BA; --salie: #A6C39C; --haar: #3A3533; --haar-sterk: #4E4744; --op-accent: #131A12; --amber-tekst: #EFCB93; --amber-vlak: #33291A; --rust-tekst: #BBD3B2; --rust-vlak: #1F2A1E; --alarm-tekst: #F0B2A9; --alarm-vlak: #33201D; } *, *::before, *::after { box-sizing: border-box; } /* Bewust geen scroll-behavior: smooth. Bij een paginawissel animeerde de sprong naar boven, waardoor het leek alsof je omhoog scrolde in plaats van naar een nieuwe pagina te gaan. Een directe sprong voelt als een echte paginawissel. */ html { font-size: 18px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; } } body { margin: 0; /* Nodig voor de schermbrede band: 100vw telt de schuifbalk mee en zou anders een horizontale schuifbalk opleveren. */ overflow-x: hidden; background: var(--papier); color: var(--inkt); font-family: var(--sans); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* ---------- Typografie ---------- */ h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--inkt); letter-spacing: -0.015em; margin: 0 0 .5em; } h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.08; } h2 { font-size: 1.65rem; line-height: 1.18; } h3 { font-size: 1.25rem; line-height: 1.25; } h4 { font-family: var(--sans); font-weight: 600; font-size: 1rem; margin: 0 0 .4em; } p { margin: 0 0 1.1em; max-width: var(--lees); } ul, ol { max-width: var(--lees); padding-left: 1.25em; margin: 0 0 1.1em; } li { margin-bottom: .45em; } strong { font-weight: 600; } a { color: var(--accent-diep); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* De pagina-kop krijgt na navigatie focus zodat schermlezers de nieuwe titel voorlezen. Die focus mag geen zichtbaar kader om de titel tekenen. */ h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible, main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; } /* Ruimte laten wanneer een vraag automatisch in beeld wordt gebracht. */ .stelling, .wizard-stap { scroll-margin-top: 2rem; } /* Het elegante detail: kleine gespatieerde kapitaaltjes. */ .eyebrow { font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); display: block; line-height: 1.4; } .eyebrow.stil { color: var(--gedempt); font-weight: 500; } .overslaan { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--op-accent); padding: .8rem 1.2rem; text-decoration: none; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .overslaan:focus { left: 0; color: var(--op-accent); } .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .omhulsel { max-width: var(--breedte); margin: 0 auto; padding: 0 var(--rand); } /* ---------- Kop ---------- */ .kop { border-bottom: 1px solid var(--haar); background: var(--papier); } .kop-binnen { max-width: var(--breedte); margin: 0 auto; padding: 20px var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .merk { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: var(--inkt); } .merk:hover { color: var(--inkt); } .merk-teken { width: 52px; height: 52px; flex: 0 0 auto; display: block; } .merk-woord { display: flex; flex-direction: column; gap: .1rem; } .merk-naam { font-family: var(--serif); font-size: 1.4rem; letter-spacing: .01em; line-height: 1.1; } .merk-payoff { font-family: var(--label); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gedempt); line-height: 1.3; } /* Menu op een eigen regel, links uitgelijnd onder de naam. */ .navbalk { border-top: 1px solid var(--haar); } .hoofdnav { max-width: var(--breedte); margin: 0 auto; padding: 0 var(--rand); display: flex; gap: 1.7rem; flex-wrap: wrap; align-items: center; } .hoofdnav a { font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gedempt); text-decoration: none; padding: .8rem 0; border-bottom: 2px solid transparent; margin-bottom: -1px; } .hoofdnav a:hover { color: var(--inkt); border-color: var(--inkt); } .hoofdnav a[aria-current="page"] { color: var(--accent); border-color: var(--accent); } /* Hamburger: alleen zichtbaar als het menu niet meer op één regel past. */ .menuknop { display: none; align-items: center; gap: .6rem; font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: transparent; color: var(--inkt); border: 1px solid var(--haar-sterk); border-radius: 0; padding: .6rem .9rem; cursor: pointer; } .menuknop:hover { border-color: var(--accent); color: var(--accent); } .menuknop-icoon { display: inline-block; width: 18px; height: 12px; position: relative; } .menuknop-icoon span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; } .menuknop-icoon span:nth-child(1) { top: 0; } .menuknop-icoon span:nth-child(2) { top: 5px; } .menuknop-icoon span:nth-child(3) { top: 10px; } .menuknop[aria-expanded="true"] .menuknop-icoon span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .menuknop[aria-expanded="true"] .menuknop-icoon span:nth-child(2) { opacity: 0; } .menuknop[aria-expanded="true"] .menuknop-icoon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } @media (max-width: 940px) { .menuknop { display: inline-flex; } .navbalk[hidden] { display: none; } .hoofdnav { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: .6rem; } .hoofdnav a { padding: .95rem 0; border-bottom: 1px solid var(--haar); border-left: 2px solid transparent; margin-bottom: 0; padding-left: .6rem; } .hoofdnav a:last-child { border-bottom: none; } .hoofdnav a:hover { border-bottom-color: var(--haar); border-left-color: var(--inkt); } .hoofdnav a[aria-current="page"] { border-bottom-color: var(--haar); border-left-color: var(--accent); } } /* ---------- Zoekbalk in de kop ---------- */ /* Eén zoekveld voor de hele site, rechtsboven. Op smalle schermen schuift het naar een eigen regel onder de naam: op een telefoon is een half zoekveld naast een hamburger voor niemand bruikbaar. */ .kop-rechts { display: flex; align-items: center; gap: .8rem; } .zoekbalk { position: relative; display: flex; align-items: stretch; width: clamp(11rem, 24vw, 21rem); max-width: 100%; border: 1px solid var(--haar-sterk); background: var(--vlak); } .zoekbalk:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(48, 64, 52, .16); } /* Een echte tekening in plaats van een teken uit een font: het loepje bestaat niet in elk font en werd dan een leeg blokje. */ .zoekbalk-teken { flex: 0 0 auto; align-self: center; margin-left: .7rem; color: var(--gedempt); } .zoekbalk:focus-within .zoekbalk-teken { color: var(--accent); } .zoekbalk input[type="search"] { flex: 1; min-width: 0; width: auto; border: none; background: transparent; padding: .6rem .55rem; font-family: var(--sans); font-size: .95rem; color: var(--inkt); -webkit-appearance: none; appearance: none; } .zoekbalk input[type="search"]:focus { outline: none; border: none; } .zoekbalk input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .zoekbalk input[type="search"]::placeholder { color: var(--gedempt); opacity: 1; } .zoekbalk-knop { flex: 0 0 auto; border: none; cursor: pointer; background: var(--accent); color: #fff; padding: 0 .85rem; font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .zoekbalk-knop:hover { background: var(--accent-diep); } .zoeksuggesties { position: absolute; top: calc(100% + 5px); left: -1px; right: -1px; z-index: 60; background: var(--vlak); border: 1px solid var(--haar-sterk); box-shadow: 0 16px 34px rgba(36, 31, 29, .16); max-height: min(70vh, 30rem); overflow-y: auto; } .sug { display: block; padding: .7rem .85rem; text-decoration: none; color: var(--inkt); border-bottom: 1px solid var(--haar); } .sug:last-of-type { border-bottom: none; } .sug-soort { display: block; font-family: var(--label); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gedempt); margin-bottom: .12rem; } .sug-titel { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.25; } .sug-tekst { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .84rem; color: var(--gedempt); line-height: 1.35; margin-top: .12rem; } .sug:hover, .sug-aan { background: var(--rust-vlak); color: var(--inkt); } .sug-alles { display: block; width: 100%; text-align: left; cursor: pointer; background: var(--paneel); border: none; border-top: 1px solid var(--haar-sterk); padding: .72rem .85rem; color: var(--accent); font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .sug-alles:hover { background: var(--rust-vlak); } .sug-leeg { margin: 0; padding: .9rem; font-size: .9rem; color: var(--gedempt); } /* ---------- Zoekresultaten ---------- */ .zoek-telling { color: var(--gedempt); margin: 1.8rem 0 .4rem; } .zoeklijst { list-style: none; padding: 0; margin: 0; max-width: 46rem; border-top: 1px solid var(--haar); } .zoeklijst li { margin: 0; } .zt { display: block; padding: 1.05rem .3rem; border-bottom: 1px solid var(--haar); text-decoration: none; color: var(--inkt); } .zt:hover { background: var(--vlak); } .zt-soort { display: block; font-family: var(--label); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gedempt); } .zt-titel { display: block; font-family: var(--serif); font-size: 1.22rem; line-height: 1.3; margin: .16rem 0; } .zt:hover .zt-titel { color: var(--accent); } .zt-tekst { display: block; color: var(--gedempt); font-size: .95rem; line-height: 1.45; } @media (max-width: 940px) { /* display:contents laat de zoekbalk en de hamburger directe kinderen van de kop worden, zodat ze onafhankelijk kunnen afbreken. */ .kop-rechts { display: contents; } .kop-binnen { flex-wrap: wrap; gap: .2rem 1rem; } .merk { order: 1; } .menuknop { order: 2; } .zoekbalk { order: 3; width: 100%; margin-top: .9rem; } .zoekbalk input[type="search"] { padding: .72rem .55rem; font-size: 1rem; } } /* ---------- Hoofdvlak ---------- */ main { min-height: 60vh; padding: 3rem 0 var(--onderruimte); } /* Schermbrede band. Breekt uit de leeskolom en loopt van rand tot rand. Staat hij onderaan, dan sluit hij naadloos aan op de voettekst. */ .bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--paneel); border-top: 1px solid var(--haar); padding: 3.5rem 0; margin-top: 4rem; } .bleed:last-child { margin-bottom: calc(var(--onderruimte) * -1); } .bleed-binnen { max-width: var(--breedte); margin: 0 auto; padding: 0 var(--rand); } .bleed .kaart { background: transparent; } .bleed .rooster-2, .bleed .rooster-3 { border-color: var(--haar-sterk); } .bleed .rooster-2 > *, .bleed .rooster-3 > * { border-color: var(--haar-sterk); } /* ---------- Knoppen: rechthoekig, haarlijn, geen schaduw ---------- */ .knop { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--label); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; background: var(--accent); color: var(--op-accent); border: 1px solid var(--accent); border-radius: 0; padding: .85rem 1.5rem; text-decoration: none; cursor: pointer; line-height: 1.3; } .knop:hover { background: var(--accent-diep); border-color: var(--accent-diep); color: var(--op-accent); } .knop-2 { background: transparent; color: var(--accent-diep); border-color: var(--haar-sterk); } .knop-2:hover { background: transparent; color: var(--accent); border-color: var(--accent); } .knop-3 { background: none; border: none; padding: .3rem 0; cursor: pointer; font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-diep); text-decoration: none; border-bottom: 1px solid var(--accent-diep); } .knop-3:hover { color: var(--accent); border-color: var(--accent); } /* ---------- Vlakken ---------- */ .kaart { background: var(--vlak); border: 1px solid var(--haar); border-radius: 0; padding: 1.6rem 1.7rem; } .kaart h3 { margin-bottom: .4rem; } .rooster { display: grid; gap: 0; } .rooster-2, .rooster-3 { border-top: 1px solid var(--haar); border-left: 1px solid var(--haar); } .rooster-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); } .rooster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .rooster-2 > *, .rooster-3 > * { border-right: 1px solid var(--haar); border-bottom: 1px solid var(--haar); } .rooster .kaart { border: none; background: transparent; } .merkje { display: inline-block; font-family: var(--label); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border: 1px solid var(--haar-sterk); color: var(--gedempt); border-radius: 0; } .merkje-groen { border-color: transparent; background: var(--rust-vlak); color: var(--rust-tekst); } .merkje-amber { border-color: transparent; background: var(--amber-vlak); color: var(--amber-tekst); } .merkje-rood { border-color: transparent; background: var(--alarm-vlak); color: var(--alarm-tekst); } .let-op { border-left: 2px solid var(--amber-tekst); background: var(--amber-vlak); color: var(--amber-tekst); padding: 1.1rem 1.3rem; margin: 1.6rem 0; max-width: var(--lees); } .let-op p { margin: 0; color: inherit; max-width: none; } .let-op p + p { margin-top: .6rem; } .rust { border-left: 2px solid var(--accent); background: var(--rust-vlak); color: var(--rust-tekst); padding: 1.1rem 1.3rem; margin: 1.6rem 0; max-width: var(--lees); } .rust p { margin: 0; color: inherit; max-width: none; } /* ---------- Onderwerpkaart: haarlijnen, abstract kleurvlak ---------- */ .ok { display: block; position: relative; padding: 1.9rem 1.7rem; text-decoration: none; color: var(--inkt); background: transparent; height: 100%; } .ok:hover { background: var(--vlak); color: var(--inkt); } .ok::before { content: ""; display: block; height: 6px; margin: -1.9rem -1.7rem 1.5rem; background: var(--paneel); } .ok:nth-child(3n+2)::before { background: var(--rust-vlak); } .ok:nth-child(3n)::before { background: var(--amber-vlak); } .ok:hover::before { background: var(--accent); } .ok-thema { font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .7rem; } .ok-titel { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.22; display: block; margin-bottom: .5rem; } .ok:hover .ok-titel { color: var(--accent); } .ok-tekst { display: block; font-size: .92rem; color: var(--gedempt); line-height: 1.6; margin-bottom: 1rem; } .ok-voet { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; font-family: var(--label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); } /* ---------- Intake ---------- */ .wizard { max-width: 42rem; } .wizard-balk { height: 1px; background: var(--haar); margin-bottom: 2rem; } .wizard-balk span { display: block; height: 1px; background: var(--accent); transition: width .3s ease; } .wizard-stap { font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; } .wizard h1.wizard-vraag { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 1.1rem; } .keuzes { display: grid; gap: 0; border-top: 1px solid var(--haar); margin-bottom: 2rem; } .keuze { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; padding: 1.05rem .4rem; background: transparent; border: none; border-bottom: 1px solid var(--haar); border-radius: 0; font-family: var(--sans); font-size: 1.02rem; color: var(--inkt); cursor: pointer; } .keuze:hover { background: var(--vlak); color: var(--accent); padding-left: .9rem; } .keuze[aria-pressed="true"] { color: var(--accent); font-weight: 500; } .keuze[aria-pressed="true"]::after { content: "—"; margin-left: auto; color: var(--accent); } .wizard-voet { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; } /* ---------- Zelftest en check ---------- */ .stelling { border-bottom: 1px solid var(--haar); padding: 1.3rem 0; } .stelling p { margin: 0 0 .8rem; font-size: 1.05rem; max-width: var(--lees); } .schaal { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--haar); width: fit-content; } .schaal button { padding: .55rem 1.1rem; border: none; border-right: 1px solid var(--haar); background: transparent; border-radius: 0; cursor: pointer; font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gedempt); } .schaal button:last-child { border-right: none; } .schaal button:hover { background: var(--vlak); color: var(--inkt); } .schaal button[aria-pressed="true"] { background: var(--accent); color: var(--op-accent); } .uitslag { padding: 2.2rem 2.3rem; margin-bottom: 2rem; border-left: 2px solid currentColor; } .uitslag-1 { background: var(--rust-vlak); color: var(--rust-tekst); } .uitslag-2 { background: var(--amber-vlak); color: var(--amber-tekst); } .uitslag-3 { background: var(--alarm-vlak); color: var(--alarm-tekst); } .uitslag h2, .uitslag h3, .uitslag p { color: inherit; } /* ---------- Vraagbaak ---------- */ .gesprek { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2rem; max-width: 46rem; } .bericht { max-width: 92%; padding: 1.1rem 1.3rem; font-size: .98rem; border-radius: 0; } .bericht-jij { align-self: flex-end; background: var(--rust-vlak); color: var(--rust-tekst); } .bericht-nw { align-self: flex-start; background: var(--vlak); border: 1px solid var(--haar); } .bericht p:last-child { margin-bottom: 0; } .bronkaart { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--haar); font-size: .85rem; } .bronkaart a { display: block; } .invoerrij { display: flex; gap: 0; align-items: stretch; max-width: 46rem; } .invoerrij > div { flex: 1; } .invoerrij .knop { border-left: none; } input[type="text"], input[type="search"], textarea, select { width: 100%; padding: .85rem 1rem; font-family: var(--sans); font-size: 1rem; border: 1px solid var(--haar-sterk); border-radius: 0; background: var(--vlak); color: var(--inkt); } input:focus { border-color: var(--accent); } label { display: block; margin-bottom: .45rem; font-family: var(--label); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gedempt); } /* ---------- Tijdlijn ---------- */ .tl { border-left: 1px solid var(--haar); padding-left: 2rem; margin-left: .5rem; } .tl-item { position: relative; padding-bottom: 2.4rem; } .tl-item::before { content: ""; position: absolute; left: calc(-2rem - 4px); top: .55rem; width: 7px; height: 7px; background: var(--accent); } .tl-datum { font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gedempt); } .tl-titel { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; margin: .35rem 0 .6rem; } /* ---------- Tabellen ---------- */ table { border-collapse: collapse; width: 100%; font-size: .9rem; } th, td { text-align: left; padding: .75rem .8rem; border-bottom: 1px solid var(--haar); vertical-align: top; } th { font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gedempt); border-bottom-color: var(--haar-sterk); } .tabelrol { overflow-x: auto; } /* ---------- Stappen ---------- */ .stappenblok { border: 1px solid var(--haar-sterk); background: var(--vlak); padding: 1.8rem 2rem; margin: 2.5rem 0; max-width: 46rem; } .stappenblok h2 { font-size: 1.4rem; margin: .5rem 0 1.4rem; } .stappenblok .stappen { margin-bottom: 0; } .stappenblok .stappen li:last-child { margin-bottom: 0; } .stappen { counter-reset: s; list-style: none; padding: 0; max-width: var(--lees); } .stappen li { counter-increment: s; position: relative; padding-left: 3rem; margin-bottom: 1.1rem; min-height: 2rem; } .stappen li::before { content: counter(s); position: absolute; left: 0; top: -.05rem; width: 2rem; height: 2rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid var(--accent); color: var(--accent); font-family: var(--label); font-size: 13px; font-weight: 600; line-height: 1; } /* ---------- Profielbalk ---------- */ .profielbalk { border-top: 1px solid var(--haar); border-bottom: 1px solid var(--haar); padding: 1rem 0; margin-bottom: 2.4rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; font-size: .95rem; color: var(--gedempt); } .profielbalk strong { color: var(--inkt); font-weight: 500; } .datumnoot { font-family: var(--label); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gedempt); } /* ---------- Voet ---------- */ .voet { border-top: 1px solid var(--haar); padding: 3rem 0 2.5rem; } .voet-rooster { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .voet strong { font-family: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gedempt); display: block; margin-bottom: .8rem; } .voet ul { list-style: none; padding: 0; margin: 0; } .voet li { margin-bottom: .4rem; } .voet a { color: var(--inkt); text-decoration: none; font-size: .92rem; } .voet a:hover { color: var(--accent); text-decoration: underline; } /* ---------- Cijferblok en citaat ---------- */ .cijfer-groot { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1; color: var(--accent); } .cijfer-bij { font-size: .9rem; color: var(--gedempt); margin-top: .5rem; max-width: 22ch; } /* ---------- Kruimelpad ---------- */ .kruimels { margin-bottom: 1.6rem; } .kruimels ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; max-width: none; } .kruimels li { margin: 0; display: flex; align-items: center; gap: .5rem; } .kruimels li + li::before { content: "›"; color: var(--gedempt); } .kruimels a, .kruimels span { font-family: var(--label); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gedempt); text-decoration: none; } .kruimels a:hover { color: var(--accent); text-decoration: underline; } .kruimels [aria-current] { color: var(--inkt); } /* ---------- Sectiekop ---------- */ .sectiekop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--haar); padding-bottom: .9rem; margin: 2.8rem 0 1.8rem; } .sectiekop h2 { margin: 0; } .sectiekop:first-child { margin-top: 0; } /* ---------- Inleiding en veelgestelde vragen ---------- */ .inleiding { font-size: 1.12rem; color: var(--inkt); } .vragen { margin: 2.5rem 0; max-width: 46rem; border-top: 1px solid var(--haar); } .vragen h2 { margin: 1.6rem 0 1.2rem; } .vraagitem { border-bottom: 1px solid var(--haar); padding-bottom: 1.2rem; margin-bottom: 1.2rem; } .vraagitem:last-child { border-bottom: none; margin-bottom: 0; } .vraagitem h3 { font-size: 1.12rem; margin-bottom: .4rem; } .vraagitem p { margin: 0; } /* ---------- Eenvoudige lijsten ---------- */ .linklijst { list-style: none; padding: 0; max-width: 46rem; } .linklijst li { padding: .7rem 0; border-bottom: 1px solid var(--haar); margin: 0; } .linklijst li:last-child { border-bottom: none; } .linklijst .datumnoot { display: block; text-transform: none; letter-spacing: 0; font-size: .85rem; margin-top: .15rem; } .gemeentelijst { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .2rem 1.2rem; } .gemeentelijst li { margin: 0; padding: .3rem 0; font-size: .92rem; } /* ---------- Gemeenteresultaat ---------- */ .gemeentekop { border: 1px solid var(--haar-sterk); background: var(--vlak); padding: 1.6rem 1.8rem; margin-top: 1.5rem; } .gemeentekop h2 { font-size: 1.7rem; } .loketlijst { border-top: 1px solid var(--haar); max-width: 46rem; } .loket { display: flex; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--haar); } .loket-nr { flex: 0 0 auto; width: 2rem; height: 2rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid var(--accent); color: var(--accent); font-family: var(--label); font-size: 13px; font-weight: 600; line-height: 1; } .loket-tekst { flex: 1; min-width: 0; } .loket-tekst h4 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin: 0 0 .3rem; } .loket-tekst p { margin: 0 0 .5rem; font-size: .95rem; max-width: none; } .loket-vraag { font-family: var(--serif); font-style: italic; color: var(--accent); border-left: 2px solid var(--haar-sterk); padding-left: .9rem; } .loket-links { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 0 !important; } .loket-links a { font-family: var(--label); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .leeg { color: var(--gedempt); font-style: italic; } hr { border: none; border-top: 1px solid var(--haar); margin: 2.5rem 0; } /* ---------- Responsief ---------- */ @media (max-width: 820px) { :root { --rand: 22px; } html { font-size: 17px; } .kop-binnen { padding: 16px var(--rand); } .merk { gap: .6rem; } .merk-teken { width: 42px; height: 42px; } .merk-naam { font-size: 1.2rem; } .merk-payoff { display: none; } .bleed { padding: 2.5rem 0; margin-top: 2.5rem; } } /* ========================================================================== Startpagina — persoonlijke keuze-ingang (niveau + situatie → op maat) ========================================================================== */ .hero-proef{max-width:49rem;margin:1.2rem 0 1rem} .hero-proef h1{margin:.5rem 0 .8rem} .hero-proef .lead{font-size:1.12rem;color:var(--inkt);max-width:44rem} .hero-proef .geruststelling{color:var(--gedempt);font-size:.95rem;margin-top:.9rem} .keuze-vraag{font-family:var(--label);font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--gedempt);margin:2.4rem 0 1rem} .niveaus{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .niveau{display:flex;flex-direction:column;text-decoration:none;color:var(--inkt);background:var(--vlak);border:1px solid var(--haar);border-radius:16px;padding:1.4rem 1.3rem;transition:border-color .15s,transform .15s,background .15s,box-shadow .15s} .niveau:hover,.niveau:focus-visible{border-color:var(--accent);background:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(48,64,52,.10)} .niveau-ic{width:38px;height:38px;color:var(--accent);margin-bottom:.7rem} .niveau-ic svg{width:38px;height:38px;display:block} .niveau-stap{font-family:var(--label);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--salie)} .niveau b{font-family:var(--serif);font-size:1.18rem;font-weight:600;line-height:1.25;margin:.2rem 0 .35rem} .niveau i{font-style:normal;color:var(--gedempt);font-size:.95rem} .paneel-proef{display:none;scroll-margin-top:1.5rem;margin-top:2.2rem;background:var(--paneel);border-radius:16px;padding:1.7rem 1.6rem} .paneel-proef:target{display:block;animation:opdoem .28s ease} @keyframes opdoem{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .paneel-kop{display:flex;gap:.85rem;align-items:center} .paneel-kop .niveau-ic{width:34px;height:34px;margin:0} .paneel-kop .niveau-ic svg{width:34px;height:34px} .paneel-proef h2{margin:0} .paneel-spiegel{color:var(--gedempt);max-width:var(--lees);margin:.7rem 0 1.3rem;font-size:1.02rem} .sit-rij{margin-top:1.4rem;padding-top:1.15rem;border-top:1px solid var(--haar-sterk)} .sit-rij .lab{font-family:var(--label);font-size:.86rem;color:var(--gedempt);margin-bottom:.6rem} .chips{display:flex;flex-wrap:wrap;gap:.5rem} .chip{text-decoration:none;font-size:.9rem;color:var(--accent-diep);background:var(--vlak);border:1px solid var(--haar);border-radius:999px;padding:.4rem .85rem} .chip:hover,.chip:focus-visible{border-color:var(--accent);background:#fff} .chip.actief{background:var(--accent);color:var(--op-accent);border-color:var(--accent)} .paneel-acties{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem} .op-maat-kop{font-family:var(--label);font-size:.82rem;letter-spacing:.04em;color:var(--salie);margin:.1rem 0 .9rem} .op-maat-kop b{color:var(--accent-diep);font-weight:600} .ok-waarom{display:flex;gap:.4rem;align-items:flex-start;margin-top:.7rem;font-family:var(--label);font-size:.76rem;line-height:1.3;color:var(--accent);font-weight:600} .ok-waarom svg{flex:0 0 auto;margin-top:.06rem} .onthoud-note{font-family:var(--label);font-size:.8rem;color:var(--gedempt);margin-top:1rem} .wis-knop{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit;font-size:.8rem} .wis-knop:hover{color:var(--accent-diep)} .terug{margin-top:1.1rem} .terug a{color:var(--gedempt);font-size:.9rem;text-decoration:none;border-bottom:1px solid transparent} .terug a:hover{border-color:var(--gedempt)} .zoek-groot{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 .2rem} .zoek-groot input{flex:1 1 15rem;font:inherit;padding:.7rem .9rem;border:1px solid var(--haar-sterk);border-radius:10px;background:#fff;color:var(--inkt)}