/* doordenacht main.css v2 Redactioneel digitaal ontwerp naar AREA 17-model: Zwitsers minimalisme, strak grid, gedurfde grotesk-typografie, extreem wit, monochroom palet. Eén uitzondering op monochroom: het nachtlampje (amber) als merksignatuur in voortgang en focus. Contrast: inkt op papier 17:1, steen 7,4:1. Taptargets >= 48px. */ /* Fonts: zelf gehost (site/assets/fonts/, OFL-licentie), geen Google Fonts, geen extern verzoek. Zelfde woff2-bestanden als de babylogboek-app. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/intertight-600.woff2") format("woff2"); } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/intertight-700.woff2") format("woff2"); } :root { color-scheme: light; --papier: #FCFCFA; --inkt: #141412; --steen: #575752; --lijn: #E4E4DF; --gloed: #C98A3C; /* alleen: lampje, voortgang, focus */ --fout: #9B2C1B; --nacht: #141412; /* footer: puur monochroom invert */ --nachttekst: #FCFCFA; --glas: rgba(252, 252, 250, 0.82); /* melkwitte, doorschijnende header-achtergrond (zoals de app) */ --voetrand: transparent; /* in donker: hairline tussen pagina en footer */ --maat: 41rem; --display: "Inter Tight", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; } /* ---------- donkere modus: het monochrome systeem omgekeerd ---------- Volgt standaard het toestel (prefers-color-scheme); de schakelaar in de header zet data-thema op en wint dan van de systeemvoorkeur (in-sessie onthouden). Amber blijft in beide modi het enige kleuraccent. De grijzen zijn tinten uit dezelfde monochrome familie: steen wordt het footer-grijs dat al bestond, de hairline en de foutkleur zijn donker/licht-varianten van hun lichte broers. De footer is in beide modi nacht; in donker scheidt een hairline hem van de pagina. */ :root[data-thema="donker"] { color-scheme: dark; --papier: #141412; --inkt: #FCFCFA; --steen: #A9A9A2; --lijn: #34342F; --fout: #E08A70; --glas: rgba(20, 20, 18, 0.80); --voetrand: #34342F; } @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) { color-scheme: dark; --papier: #141412; --inkt: #FCFCFA; --steen: #A9A9A2; --lijn: #34342F; --fout: #E08A70; --glas: rgba(20, 20, 18, 0.80); --voetrand: #34342F; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; font-feature-settings: "kern", "ss01"; /* voorkomt een horizontale scrollbalk door de full-bleed (100vw) header-glaslaag; clip (niet hidden) breekt sticky-positionering niet. */ overflow-x: clip; } /* ---------- typografie: groot, strak, grotesk ---------- */ h1, h2, h3 { font-family: var(--display); font-weight: 650; line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 0.5em; } h1 { font-size: clamp(2.6rem, 9vw, 5rem); } h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.125rem; letter-spacing: -0.01em; margin-top: 2.2em; } p { margin: 0 0 1.15em; max-width: var(--maat); } em { font-style: italic; } strong { font-weight: 650; } a { color: var(--inkt); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.2s ease; } /* onderstreping blijft bij hover en focus (verdikt), zodat een link nooit onzichtbaar wordt: in lopende tekst is de onderstreping het enige onderscheid met gewone tekst */ a:hover, a:focus-visible { background-size: 100% 2px; } .klein { font-size: 0.875rem; color: var(--steen); } .eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steen); margin-bottom: 1.5rem; } /* ---------- het nachtlampje ---------- */ .lampje { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--gloed); } :focus-visible { outline: 2px solid var(--gloed); outline-offset: 4px; } /* skip-link: onzichtbaar tot hij focus krijgt, dan springt hij naar de inhoud. Voor toetsenbord- en schermlezergebruikers die de header willen overslaan. */ .overslaan { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--inkt); color: var(--papier); padding: 0.75rem 1.1rem; border-radius: 2px; background-image: none; } .overslaan:focus { left: 1rem; top: 1rem; } /* ---------- grid en structuur ---------- */ /* .wrap regelt alleen de leesbaan (breedte + zijmarge). Verticale ruimte is van de secties zelf; de padding-shorthand die dat per ongeluk op nul zette, is weg. */ .wrap { max-width: 76rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; } @media (min-width: 64rem) { .wrap { padding-left: 3rem; padding-right: 3rem; } } /* secties scheiden met de losse hr-hairlines uit de markup; geen eigen border-top erbovenop (dat gaf twee lijnen van 1px tegen elkaar, dikker dan elders). Let op: geef .wrap nooit een padding-shorthand; die sloeg deze sectiepadding twee keer stilletjes plat (B45 de basisregel, B49 de 64rem-variant). */ section { padding: 4rem 0 4.5rem; } .hr { border: 0; border-top: 1px solid var(--lijn); margin: 0; } /* sectienummers: redactionele telling, alleen in het plan-document en bij de stappen van het stappenplan; de landingskoppen zijn sinds 7 juli nummerloos. line-height 1: het nummer krijgt een eigen strakke regelhoogte in plaats van die van de grote kop te erven, zodat lijn, nummer en titel overal hetzelfde ritme hebben. */ .plan h2::before { counter-increment: sectie; content: counter(sectie, decimal-leading-zero); display: block; line-height: 1; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; color: var(--steen); margin-bottom: 1rem; } .plan { counter-reset: sectie; } header.site { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.25rem; max-width: 76rem; margin: 0 auto; /* B141: de header blijft in beeld en legt zich met een melkwitte, doorschijnende laag over de content die eronder wegscrolt (zelfde frosted-glass-gevoel als de app). */ position: sticky; top: 0; z-index: 50; } /* de melkwitte laag is full-bleed (100vw) via een pseudo-element, terwijl logo en nav uitgelijnd blijven op de 76rem-contentkolom; achter de header-inhoud (z-index:-1). */ header.site::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--glas); -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05); } @media (min-width: 64rem) { header.site { padding: 1.6rem 3rem; } } /* geen sticky-gedrag of glaslaag op papier */ @media print { header.site { position: static; } header.site::before { display: none; } } .wordmark { font-family: var(--display); font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--inkt); text-decoration: none; background: none; display: inline-flex; align-items: center; gap: 0.5em; } /* twee kleurversies van het logo in plaats van meekleuren: zwart in lichte modus, wit in donkere. Betrouwbaarder dan één logo laten omkleuren. De zichtbaarheid volgt exact dezelfde palet-selectoren als de rest van het thema. Dubbel formaat waar de header het toelaat; op smalle schermen iets kleiner zodat logo en navigatie elkaar niet raken. */ .wordmark .logo { height: 1.375rem; width: auto; display: block; } @media (min-width: 40rem) { .wordmark .logo { height: 2.25rem; } } .wordmark .logo--wit { display: none; } :root[data-thema="donker"] .wordmark .logo--zwart { display: none; } :root[data-thema="donker"] .wordmark .logo--wit { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .wordmark .logo--zwart { display: none; } :root:not([data-thema="licht"]) .wordmark .logo--wit { display: block; } } header.site a.klein { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 600; color: var(--inkt); } /* leestijd-label naast het logo (gids, mini-les): rustig, als een header-label */ .duur { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steen); white-space: nowrap; } /* center i.p.v. baseline: de nachtmodus-knop draagt een icoon, waardoor zijn baseline niet gelijkloopt met de tekstlink ernaast; centreren zet "gratis tips", het label en het icoon op precies dezelfde lijn. */ header.site .site-nav { display: flex; gap: 1.5rem; align-items: center; } .thema-knop { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5em; /* padding plus gelijke negatieve marge: groter tapdoel zonder de layout te verschuiven */ padding: 0.75rem; margin: -0.75rem; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steen); } .thema-knop:hover { text-decoration: underline; text-underline-offset: 4px; } .thema-knop .thema-icoon { width: 1.05rem; height: 1.05rem; display: block; } /* op smalle schermen alleen het icoon: de header blijft rustig naast het logo */ .thema-knop .thema-label { display: none; } @media (min-width: 40rem) { .thema-knop .thema-label { display: inline; } } /* ---------- knoppen: rechthoekig, zwart, Zwitsers ---------- */ .knop, button.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.9rem 1.75rem; background: var(--inkt); color: var(--papier); border: 1px solid var(--inkt); border-radius: 2px; font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; background-image: none; transition: background-color 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .knop:hover { background-color: var(--papier); color: var(--inkt); } .knop:active { transform: translateY(1px); } .knop--stil, button.knop--stil { background: transparent; color: var(--inkt); } .knop--stil:hover, button.knop--stil:hover { background: var(--inkt); color: var(--papier); } .knop--breed { width: 100%; } .tekstlink { background: none; border: 0; padding: 0.75rem 0; min-height: 3rem; font-size: 0.9375rem; font-weight: 500; color: var(--inkt); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } /* ---------- hero: gedurfd, veel lucht ---------- */ .hero { padding: 5.5rem 0 5rem; border-top: 0; } .hero h1 { max-width: 13ch; } .hero .sub { font-size: 1.125rem; color: var(--steen); max-width: 32rem; margin-top: 1.5rem; } .hero .acties { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2.5rem; max-width: 24rem; } @media (min-width: 40rem) { .hero .acties { flex-direction: row; max-width: none; } } @media (min-width: 64rem) { .hero { padding: 8rem 0 7rem; } } /* ---------- stappen: geordende redactionele lijst ---------- */ .stappen { display: grid; gap: 0; margin-top: 0.5rem; counter-reset: stap; } .stap { border-top: 1px solid var(--lijn); padding: 1.75rem 0; } .stap:first-child { border-top: 0; } .stap h3 { margin-top: 0; } .stap .nr { display: none; } .stap h3::before { counter-increment: stap; content: counter(stap, decimal-leading-zero); display: block; line-height: 1; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; color: var(--steen); margin-bottom: 0.75rem; } @media (min-width: 64rem) { .stap { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; } .stap h3::before { margin-bottom: 0; } } /* ---------- kader: hairline, geen schaduw ---------- */ .kader { border: 1px solid var(--inkt); border-radius: 2px; padding: 1.75rem 1.75rem 0.75rem; max-width: var(--maat); background: transparent; } /* Citaten (B103, social proof): rustige monochrome blokjes met een amber-hairline. Geen sterren, geen carrousel, geen tellers. Alleen echte zinnen van echte ouders, met voornaam en leeftijd kind. De sectie staat bewust leeg tot er toestemming is. */ .citaten .citaat { max-width: var(--maat); margin: 1.5rem 0; padding-left: 1.25rem; border-left: 2px solid var(--gloed); } .citaten .citaat p { font-style: italic; margin-bottom: 0.4rem; } .citaten .citaat cite { font-style: normal; font-size: 0.85em; color: var(--steen); } .prijs { font-family: var(--display); font-weight: 650; font-size: 2.5rem; letter-spacing: -0.03em; } /* B130: de kleine toelichting bij een prijs hoort in de leesletter, niet in de strakke display-letter (die kneep de regel samen) */ .prijs .klein, .kaart-prijs .klein { font-family: var(--sans); font-weight: 400; letter-spacing: normal; } /* ---------- shop-etalage + winkelmand (B111) ---------- Kaart-grid per collectie, één grijswaarde-beeld per product, koopknoppen, en een mand als hairline-blok. Monochroom met alleen amber als accent; geen schaduw. */ /* compacte kop: je ziet meteen producten, de titel duwt de kaarten niet omlaag */ #shop-app { padding-top: 1.75rem; } .shop-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; } /* B121: geen grote titel meer; de kop is een bescheiden regel (eyebrow-stijl), het feature-blok en de lijst zijn de binnenkomst. */ .shop-titel { margin-bottom: 0; } /* B142: de winkelmand-knop woont in de sticky header-nav; compact, borderloos, als de andere nav-items (icoon plus teller, geen kader). */ .mand-knop { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 0; cursor: pointer; padding: 0.4rem; margin: -0.4rem 0; color: var(--inkt); font: inherit; } .mand-icoon { width: 1.15rem; height: 1.15rem; flex: none; } .mand-teller { font-variant-numeric: tabular-nums; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; } /* B121: vaste mand-balk onderin zodra er iets in de mand ligt (echt-shopgevoel, nacht-invert zoals de footer; geen pop-up, alleen wat er al is) */ .mand-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; align-items: center; gap: 1.25rem; padding: 0.6rem 1rem; background: var(--nacht); color: var(--nachttekst); border-top: 1px solid var(--voetrand); font-size: 0.9rem; } .mand-balk .knop { background: var(--nachttekst); color: var(--nacht); border-color: var(--nachttekst); min-height: 2.25rem; padding: 0.4rem 0.9rem; font-size: 0.85rem; } .mand-balk.verborgen { display: none; } .collectie { margin-top: 2.25rem; } .collectie:first-of-type { margin-top: 1.5rem; } .collectie > h2 { margin-bottom: 0.25rem; } /* B120/B123: de etalage is een productgrid van tekst-kaarten. Elke kaart draagt de volledige omschrijving (B120), met de klassieke kaart-anatomie van een webshop: titel en tekst boven, en onderin een prijsvoet (hairline erboven) met de prijs links en de knoppen rechts. Eén kolom op mobiel, twee op breed. Geen beelden in de kaarten; het enige beeld zit in het feature-blok. Echte foto's voor de feature lever je zwart-wit aan (sinds B118 zonder amber). */ .etalage { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; } @media (min-width: 48rem) { .etalage { grid-template-columns: 1fr 1fr; } } .kaart { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.25rem 1.15rem; border: 1px solid var(--lijn); border-radius: 2px; } .kaart:hover { border-color: var(--inkt); } .kaart-tekst { flex: 1; min-width: 0; } .kaart-tekst h3 { margin: 0 0 0.35rem; font-size: 1.05rem; } .kaart-tekst p { margin: 0; max-width: 38rem; } /* B127: uitklap met handvatten (native details); rustig, hairline-loos */ .kaart-meer { margin-top: 0.6rem; } .kaart-meer summary { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .kaart-meer[open] summary { margin-bottom: 0.35rem; } .kaart-meer ul { margin: 0 0 0 1.1rem; padding: 0; } .kaart-meer li { margin: 0.3rem 0; } /* B131: op de productpagina staan de handvatten open als vaste lijst */ .product-handvatten { margin: 1.75rem 0; max-width: var(--maat); } .product-handvatten h2 { font-size: 1.05rem; margin-bottom: 0.5rem; } .product-handvatten ul { margin: 0 0 0 1.1rem; padding: 0; } .product-handvatten li { margin: 0.35rem 0; } /* de prijsvoet: onderaan de kaart, prijs links, acties rechts */ .kaart-zij { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 0.85rem; border-top: 1px solid var(--lijn); } .kaart-zij p { margin: 0; } .kaart-prijs { font-family: var(--display); font-weight: 650; font-size: 1.1rem; margin: 0; } .kaart-acties { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .kaart-acties .knop { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; } /* het slaapplan onderin: het plan en de cadeaubon naast elkaar (B124), in hetzelfde grid als de rest */ /* feature-blok (B116): één editorial anker bovenaan de etalage; beeld naast tekst op breed, gestapeld op mobiel. Hairline, geen schaduw, v5-monochroom. */ /* B122: geen kader meer om de feature; beeld en tekst staan open op de pagina, de hairlines van de lijst eronder doen de ordening */ .feature { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; } @media (min-width: 40rem) { .feature { grid-template-columns: 0.8fr 1.4fr; gap: 2rem; } } /* compacter beeldvlak (B118/B119): laag bannerbeeld op mobiel, smalle beeldkolom op breed; het beeld opent, maar domineert niet */ .feature-beeld { width: 100%; height: 100%; aspect-ratio: 5 / 2; object-fit: cover; display: block; background: var(--lijn); border-radius: 2px; } @media (min-width: 40rem) { .feature-beeld { aspect-ratio: auto; } } .feature-tekst { padding: 0 0 0.25rem; display: flex; flex-direction: column; align-items: flex-start; } .feature-tekst h2 { margin: 0.35rem 0 0.4rem; font-size: 1.35rem; } .feature-tekst .kaart-prijs { margin: 0.5rem 0 1rem; font-size: 1.2rem; } .feature-tekst .kaart-acties { margin-top: auto; } .shop-kruislink { margin-top: 2.5rem; } /* het vijf-seconden-overzicht: één regel onder de titel die naar de secties springt */ .shop-overzicht { margin: 0.5rem 0 0; } /* binnenkort (B113): wel te zien, niet te koop; gedempt en compacter, zodat het koopbare aanbod leidt. Hairline erboven als de slotsectie; geen nieuwe kleuren. */ .collectie--straks { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--lijn); } .kaart--straks { padding: 0.85rem 1rem 0.95rem; color: var(--steen); } .kaart--straks:hover { border-color: var(--lijn); } .kaart--straks h3 { font-size: 0.95rem; } .kaart--straks .kaart-zij { border-top: 0; padding-top: 0; } .mand { border: 1px solid var(--inkt); border-radius: 2px; padding: 1.5rem 1.5rem 1.75rem; margin: 3rem 0 0; max-width: var(--maat); } .mand.leeg { border-color: var(--lijn); } .mand h2 { margin-top: 0; } .mand-regel { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--lijn); } .mand-regels .mand-regel:first-child { border-top: 0; } .mand-regel-rechts { white-space: nowrap; } .mand-totaal { font-size: 1.05rem; margin: 1rem 0 1.25rem; } .mand-suggestie { border-left: 2px solid var(--gloed); padding: 0.5rem 0 0.5rem 1.25rem; margin: 0 0 1.5rem; } /* ---------- footer: monochroom invert ---------- */ footer.nacht { background: var(--nacht); color: var(--nachttekst); padding: 4rem 0; margin-top: 4rem; border-top: 1px solid var(--voetrand); } footer.nacht p { color: var(--nachttekst); } footer.nacht .klein { color: #A9A9A2; } footer.nacht a { color: var(--nachttekst); background-image: linear-gradient(currentColor, currentColor); } /* vindbaarheids-nav in de footer: alle paden (slaapplan, tips, naslagwerk, workshops) op één rustige regel, netjes afbrekend op smal. */ .voetnav { margin: 0 0 1.15em; line-height: 2; } /* ---------- vragenlijst ---------- */ #app { min-height: 60vh; } .vraag-kop { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem 0 0.75rem; } .gang { position: relative; flex: 1; height: 1px; background: var(--lijn); } .gang .lampje-voortgang { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: var(--gloed); transition: left 0.3s ease; } .vraag-teller { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steen); white-space: nowrap; } .vraag h2 { margin-top: 1.5rem; } .vraag h2::before { content: none; } .vraag .sub { color: var(--steen); margin-top: -0.25rem; } .opties { margin: 2rem 0; border-top: 1px solid var(--lijn); } .optie { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 3.5rem; padding: 1rem 0.25rem; background: transparent; border: 0; border-bottom: 1px solid var(--lijn); font-size: 1.0625rem; font-family: var(--sans); color: var(--inkt); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: padding-left 0.15s ease, background-color 0.15s ease; } .optie:hover { padding-left: 0.75rem; } .optie .bol { flex: none; width: 0.9rem; height: 0.9rem; border: 1.5px solid var(--inkt); border-radius: 50%; transition: background-color 0.15s ease; } .optie .bol--vierkant { border-radius: 2px; } .optie[aria-checked="true"] { background: var(--inkt); color: var(--papier); padding-left: 0.75rem; } .optie[aria-checked="true"] .bol { border-color: var(--papier); background: var(--papier); } .vraag-acties { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem 0 3.5rem; } /* ---------- plan: redactioneel document ---------- Ritme van een sectiegrens: vaste lucht boven de hairline (margin-top, onafhankelijk van wat erboven staat), dan de lijn, dan het nummer, dan de titel. De uitzondering zonder lijn geldt alleen voor de allereerste kop van de pagina (direct kind van .plan, onder de eyebrow), niet voor koppen in geneste blokken zoals het uitklapdeel of het bewaar-blok: die zijn gewone secties en houden hun lijn. */ .plan h2 { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--lijn); } .plan > h2:first-of-type { border-top: 0; padding-top: 1rem; margin-top: 0; } .plan > .wrap > h2, .plan h2 { max-width: var(--maat); } .plan table { border-collapse: collapse; width: 100%; max-width: var(--maat); font-size: 0.9375rem; margin: 1.25rem 0 1.75rem; } .plan th, .plan td { border-bottom: 1px solid var(--lijn); padding: 0.7rem 0.75rem 0.7rem 0; text-align: left; vertical-align: top; } .plan th { font-weight: 650; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steen); border-bottom-color: var(--inkt); } .verstoring-blok { border-left: 2px solid var(--gloed); padding-left: 1.5rem; margin: 1.75rem 0 3rem; } .toggle-regel { font-size: 0.9375rem; color: var(--steen); margin: -0.5rem 0 1.5rem; } /* ---------- preview ---------- */ .preview .kader { margin: 2rem 0; } .codeveld { display: flex; gap: 0.6rem; margin: 1.25rem 0; flex-wrap: wrap; } .codeveld input { flex: 1; min-width: 12rem; min-height: 3.25rem; padding: 0 1.1rem; font-size: 1.0625rem; font-family: var(--sans); border: 1px solid var(--inkt); border-radius: 2px; background: transparent; color: var(--inkt); } .foutmelding { color: var(--fout); font-size: 0.9375rem; } .verborgen { display: none !important; } /* ---------- bewaren: de link is het plan ---------- */ .bewaar-blok .codeveld input { font-size: 0.875rem; color: var(--steen); } .bewaar-blok .acties { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.25rem 0; max-width: var(--maat); } @media (min-width: 40rem) { .bewaar-blok .acties { flex-direction: row; } } .print-url { display: none; } /* ---------- B154/B156: drieslag-stappenkaarten en het noodblok in "In het kort" ---------- Typografische hiërarchie (designreview B156): de handeling leest op leesgrootte, het waarom en de uitweg een maat kleiner in steen, de verdieping (uitklap) nog een maat kleiner en cursief. Kop- en knopmaten volgen de bestaande kaarten. */ .stap-kaart { border: 1px solid var(--lijn); border-left: 3px solid var(--inkt); padding: 1rem 1.1rem; margin: 1rem 0; } .stap-kaart h3 { margin: 0 0 0.5rem; font-size: 1.05rem; } .stap-kaart p { margin: 0.35rem 0; } .stap-kaart .stap-waarom { color: var(--steen); font-size: 0.9375rem; } .stap-kaart .stap-lukt { border-top: 1px dashed var(--lijn); padding-top: 0.5rem; margin-top: 0.6rem; color: var(--steen); font-size: 0.9375rem; } .nood-blok { border: 1px solid var(--inkt); padding: 1rem 1.1rem; margin: 1.25rem 0; } .nood-blok h3 { margin: 0 0 0.4rem; font-size: 1.05rem; } .nood-blok h3::before { content: "\25CF\00A0"; color: var(--gloed); } .nood-blok p { margin: 0; } /* de compacte tabellen blijven alleen in de printweergave bestaan */ .alleen-print { display: none; } /* B157: de situatie-strook bovenaan het plan (compact, journey-review J1) */ .situatie-blok { border-bottom: 1px solid var(--lijn); padding: 0 0 1rem; margin: 0 0 1.5rem; } .situatie-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steen); margin: 0 0 0.35rem; } .situatie-regel { margin: 0; font-size: 0.9375rem; line-height: 1.7; } .situatie-regel strong { font-size: 1.0625rem; } .situatie-blok .klein { margin: 0.6rem 0 0; } /* B155/B156: de vannacht-kaart (stapkiezer) en de inline waarom-uitklap */ .stap-kiezer { margin: 1.25rem 0 0.5rem; } .stap-kiezer .kies-rij { display: flex; flex-wrap: wrap; gap: 0.4rem; } .kies-knop { font: inherit; font-size: 0.875rem; min-height: 2.5rem; padding: 0.45rem 0.9rem; border: 1px solid var(--inkt); background: transparent; color: var(--inkt); cursor: pointer; border-radius: 2px; } .kies-knop[aria-pressed="true"] { background: var(--inkt); color: var(--papier); } .stap-kaart--dicht { cursor: pointer; } .stap-kaart--dicht > p { display: none; } .stap-kaart--dicht h3 { margin: 0; color: var(--steen); } .stap-kaart--dicht h3::after { content: " \25B8"; color: var(--steen); } .waarom-knop { font: inherit; font-size: 0.7rem; line-height: 1; margin-left: 0.45rem; width: 1.6rem; height: 1.6rem; border: 1px solid var(--lijn); border-radius: 50%; background: transparent; color: var(--steen); cursor: pointer; vertical-align: -0.2em; padding: 0; } .waarom-knop[aria-expanded="true"] { background: var(--inkt); color: var(--papier); border-color: var(--inkt); } /* de verdieping: kleiner en cursief (eigenaarswens B156), duidelijk een laag onder de instructie */ .waarom-kaart { display: none; border: 1px solid var(--lijn); border-left: 3px solid var(--lijn); padding: 0.7rem 0.9rem; margin-top: 0.55rem; color: var(--steen); font-size: 0.875rem; font-style: italic; line-height: 1.6; } .waarom-kaart--open { display: block; } /* ---------- printweergave: het volledige plan, uitgevouwen, zonder bediening ---------- "Opslaan als PDF" loopt via deze weergave. Veiligheid en samenvatting staan er altijd in; uitklap bestaat op papier niet. */ @media print { /* papier is altijd licht: ook met de donkere modus actief print dit donkere tekst op wit (de dubbele selector wint van de thema-variabelen) */ :root, :root[data-thema="donker"] { color-scheme: light; --papier: #fff; --inkt: #000; --steen: #575752; --lijn: #E4E4DF; --gloed: #C98A3C; --fout: #9B2C1B; --voetrand: transparent; } header.site a.klein, .thema-knop, footer.nacht, .knop, .tekstlink, .toggle-regel, .bewaar-blok, .codeveld, .vraag-acties { display: none !important; } #plan-lang.verborgen { display: block !important; } .print-url { display: block; } body { background: #fff; color: #000; font-size: 11pt; } .plan h2 { break-after: avoid; page-break-after: avoid; } .alleen-print { display: block; } .stap-kaart, .nood-blok { break-inside: avoid; page-break-inside: avoid; } /* B155/B164: op papier staat alles open en verdwijnt de bediening */ #coslapen-body.verborgen { display: block !important; } #coslapen-toon { display: none !important; } .stap-kiezer, .waarom-knop { display: none !important; } .stap-kaart--dicht > p { display: block; } .stap-kaart--dicht h3 { color: #000; } .stap-kaart--dicht h3::after { content: ""; } .waarom-kaart { display: block; } .plan table { break-inside: avoid; page-break-inside: avoid; } a { background-image: none; text-decoration: underline; color: #000; } } @media (min-width: 48rem) { body { font-size: 1.125rem; } section { padding: 5rem 0 5.5rem; } } /* UITBREIDING v6: datumhulp bij vraag 1 */ .datumhulp { margin: 1.5rem 0 0.5rem; } .datumhulp input[type="date"] { padding: 0.6rem 0.75rem; border: 1px solid var(--inkt); border-radius: 2px; background: transparent; font: inherit; } .optie--suggestie { padding-left: 0.75rem; } .optie--suggestie .bol { background: var(--gloed); border-color: var(--gloed); }