/* Hondenjaren — marketingsite. Huisstijl van de boeken: crème papier, teal, Baloo voor de koppen, Pacifico als accent, Poppins voor de tekst. Eén definitie per onderdeel; de mediaqueries staan onderaan, van breed naar smal. */ @font-face { font-family:"Pacifico"; src:url("fonts/Pacifico-Regular.woff2") format("woff2"); font-display:swap; } @font-face { font-family:"Baloo"; src:url("fonts/Baloo2-ExtraBold.woff2") format("woff2"); font-display:swap; } @font-face { font-family:"Poppins"; src:url("fonts/Poppins-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face { font-family:"Poppins"; src:url("fonts/Poppins-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; } @font-face { font-family:"Poppins"; src:url("fonts/Poppins-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; } :root { --papier:#FFFDF9; --creme:#FFF6EC; --zand:#FBEFE0; /* eigen tint voor de tellersectie */ --donker:#173C39; --inkt:#40323A; --zacht-inkt:#5B4E52; --mute:#6F6155; --lijn:#EFE3D5; /* decoratieve scheiding */ --lijn-ui:#9C8A78; /* rand van iets bedienbaars: 3,1:1 op crème */ --teal:#2FB6A6; --teal-diep:#177567; --zon:#F7C24B; --roze:#F2929E; --lucht:#7FA9DF; --diep-zon:#7A5606; /* geel is als tekstdrager te licht */ --max:1180px; /* drie hoekmaten, plus de boekrug-vorm voor alles wat een omslag toont */ --r-s:8px; --r-m:16px; --r-l:24px; --r-pil:999px; --boekhoek:2px var(--r-s) var(--r-s) 2px; /* twee hoogtes; meer heeft een pagina niet nodig */ --schaduw-1:0 1px 2px rgba(64,50,58,.05), 0 2px 8px rgba(64,50,58,.04); --schaduw-2:0 8px 16px -8px rgba(64,50,58,.18), 0 24px 48px -24px rgba(64,50,58,.22); --ruimte-s:52px; --ruimte-m:88px; --ruimte-l:112px; } /* ook de pseudo-elementen: anders valt een rand buiten de opgegeven maat en staan iconen in een munt met rand net naast het midden */ *, *::before, *::after { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:100px; } body { margin:0; background:var(--papier); color:var(--inkt); font:400 17px/1.65 "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; } /* papier in plaats van glas: heel lichte ruis over de hele pagina */ body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width:100%; height:auto; display:block; } h1, h2, h3 { line-height:1.12; margin:0; } p { margin:0; } :focus-visible { outline:3px solid var(--inkt); outline-offset:3px; border-radius:6px; } .slot :focus-visible, .voet :focus-visible, .nav.donker :focus-visible { outline-color:#fff; } .overslaan { position:absolute; left:-999px; top:0; background:var(--inkt); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; z-index:99; } .overslaan:focus { left:0; } /* onzichtbaar voor het oog, wel voorleesbaar */ .vk { position:absolute; width:1px; height:1px; min-width:0; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* ---- navigatie ---- */ .nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:28px; flex-wrap:nowrap; padding:14px max(24px, calc((100vw - var(--max)) / 2)); background:var(--papier); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; } @supports (backdrop-filter: blur(1px)) { .nav { background:color-mix(in srgb, var(--papier) 82%, transparent); backdrop-filter:blur(14px) saturate(1.2); } } .nav.vast { border-bottom-color:var(--lijn); } /* boven de donkere sectie kleurt de balk mee; anders hangt er een melkige vlek */ .nav.donker { background:color-mix(in srgb, var(--donker) 88%, transparent); border-bottom-color:transparent; } .nav.donker .merk-woord { color:#fff; } .nav.donker nav a { color:#F4EFE7; } .nav.donker .knop-klein { background:var(--zon); color:#2B2016; } .nav.donker .menuknop { background:transparent; border-color:#ffffff40; } .nav.donker .menuknop span { background:#fff; } .merk { text-decoration:none; margin-right:auto; } .merk-woord { font-family:"Pacifico", cursive; font-size:26px; color:var(--teal-diep); letter-spacing:.2px; } .nav nav > ul { display:flex; gap:26px; list-style:none; margin:0; padding:0; } .nav nav a, .nav nav button { font:inherit; color:var(--inkt); text-decoration:none; font-weight:500; font-size:15px; position:relative; padding:4px 0; background:none; border:0; cursor:pointer; } .nav nav > ul > li > a::after, .nav nav > ul > li > button::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--teal); border-radius:2px; transition:right .28s ease; } .nav nav > ul > li > a:hover::after, .nav nav > ul > li > button:hover::after { right:0; } /* uitklapper: opent bij aanwijzen en bij toetsenbordbediening */ .heeft-sub { position:relative; } .heeft-sub > button { display:inline-flex; align-items:center; gap:7px; } .heeft-sub > button::before { content:""; width:6px; height:6px; border-right:2px solid var(--teal-diep); border-bottom:2px solid var(--teal-diep); transform:rotate(45deg) translateY(-2px); order:2; transition:transform .25s ease; } .heeft-sub > button[aria-expanded="true"]::before { transform:rotate(-135deg) translateY(-2px); } /* de brug vult het gat tussen knop en paneel, anders valt de muis onderweg buiten het item en klapt het menu dicht voordat je er bent */ .heeft-sub::after { content:""; position:absolute; inset:100% -14px -10px; display:none; } .heeft-sub:hover::after, .heeft-sub:focus-within::after { display:block; } .submenu { display:none; position:absolute; top:calc(100% + 10px); left:-14px; z-index:60; min-width:250px; list-style:none; margin:0; padding:10px; background:var(--papier); border:1px solid var(--lijn); border-radius:var(--r-m); box-shadow:var(--schaduw-2); } .submenu a { display:block; padding:9px 12px; border-radius:9px; font-weight:500; } .submenu a:hover { background:var(--creme); } .heeft-sub:hover > .submenu, .heeft-sub > button[aria-expanded="true"] + .submenu, .submenu:focus-within { display:block; } .menuknop { display:none; width:44px; height:44px; border:1px solid var(--lijn); background:var(--papier); border-radius:12px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0; } .menuknop span { display:block; width:18px; height:2px; background:var(--inkt); border-radius:2px; } /* ---- knoppen en links ---- */ .knop { display:inline-block; text-decoration:none; font-weight:600; background:var(--teal-diep); color:#fff; padding:15px 28px; border-radius:var(--r-pil); box-shadow:0 8px 22px -12px var(--teal-diep); transition:transform .2s ease, box-shadow .2s ease, background .2s ease; } .knop:hover { transform:translateY(-2px); box-shadow:0 14px 30px -14px var(--teal-diep); } .knop-klein { padding:11px 20px; font-size:15px; min-height:44px; display:inline-flex; align-items:center; } .knop-groot { padding:18px 38px; font-size:18px; } .knop-stil { background:transparent; color:var(--inkt); box-shadow:none; border:1.5px solid var(--lijn-ui); } .knop-stil:hover { border-color:var(--teal); box-shadow:none; } .tekstlink { align-self:center; color:var(--inkt); font-weight:600; text-decoration:none; border-bottom:2px solid var(--teal-diep); padding:2px 0; } .tekstlink:hover { border-bottom-color:var(--teal); } /* ---- hero ---- */ .hero { position:relative; display:grid; grid-template-columns:1fr minmax(380px, 520px); gap:88px; align-items:center; overflow-x:clip; padding:72px max(24px, calc((100vw - var(--max)) / 2)) 56px; min-height:min(84vh, 760px); } .hero-tekst { max-width:600px; } .hero-beeld { min-width:0; } .kicker { font-family:"Poppins", sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.16em; font-size:12.5px; color:var(--teal-diep); margin-bottom:18px; } .hero h1 { font-family:"Baloo", sans-serif; font-size:clamp(40px, 4.3vw, 54px); letter-spacing:-.02em; line-height:1.05; max-width:19ch; text-wrap:balance; } /* geen handschrift meer in de kop: de gele golf en de kleurwissel zijn genoeg nadruk. Pacifico blijft voor het woordmerk en voor het citaat halverwege. */ .hero h1 em { font-family:"Baloo", sans-serif; font-style:normal; font-weight:800; color:var(--teal-diep); font-size:1em; line-height:1.05; display:block; margin-top:.06em; position:relative; padding-bottom:.2em; width:fit-content; } /* de gele golf onder de titel, zoals op de omslagen */ .hero h1 em::after { content:""; position:absolute; left:2%; right:6%; bottom:0; height:11px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 11' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 34 1.5, 62 10, 96 5 S 160 1, 198 6.5' fill='none' stroke='%23F7C24B' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; } .lead { font-size:18px; line-height:1.7; color:var(--zacht-inkt); margin-top:30px; max-width:36ch; } .hero-acties { display:flex; gap:22px; flex-wrap:wrap; align-items:center; margin-top:34px; } .boek picture, .kaart-beeld picture, .galerij picture, .halte picture { display:contents; } /* ---- hardcover-look: rug links, bladzijden rechts ---- */ .boek { position:relative; display:inline-block; isolation:isolate; filter:drop-shadow(0 18px 24px rgba(64,50,58,.22)); } .boek > img { position:relative; z-index:2; border-radius:3px 10px 10px 3px; display:block; } /* de rug: een smalle band in de kleur van het deel, met een lichtval erover */ .boek::before { content:""; position:absolute; z-index:3; left:0; top:0; bottom:0; width:13px; border-radius:3px 0 0 3px; background: linear-gradient(90deg, rgba(0,0,0,.30), rgba(255,255,255,.34) 46%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.05)), var(--kleur, var(--teal)); mix-blend-mode:multiply; } /* ---- de waaier in de hero: alle vijf de delen zichtbaar ---- */ /* De waaier: vijf delen op één rij, elk een slag verder naar links en iets verder gedraaid. Het voorste boek staat rechts in de rij, niet in het midden. Bij aanwijzen komt dat ene boek naar voren en schuiven de andere opzij. */ .waaier { position:relative; width:100%; padding:52px 0 18px; --spreid:0; --a:0; } .waaier .boek { position:absolute; bottom:0; transform-origin:65% 96%; display:block; /* de delen rechts van het uitgelichte boek bedekken het, dus die gaan ver opzij; de delen links schuiven maar een beetje mee */ --d:calc(var(--i) - var(--a)); transform:rotate(var(--draai)) translateX(calc(var(--spreid) * (max(var(--d), 0) * 104px + min(var(--d), 0) * 22px))); transition:transform .55s cubic-bezier(.22,.9,.24,1), filter .45s ease; will-change:transform; } .waaier .b1 { z-index:5; width:52%; right:-12%; --draai:2deg; --i:5; } .waaier .b2 { z-index:4; width:51%; right:6%; --draai:-2deg; --i:4; } .waaier .b3 { z-index:3; width:50%; right:24%; --draai:-6deg; --i:3; } .waaier .b4 { z-index:2; width:49%; right:42%; --draai:-10deg; --i:2; } .waaier .b5 { z-index:1; width:48%; right:59%; --draai:-14deg; --i:1; } /* Het aangewezen deel komt recht overeind en iets omhoog. De stapelvolgorde blijft zoals hij is; het boek wordt zichtbaar doordat de buren opzij gaan. */ .waaier .boek:focus-visible { outline:3px solid var(--inkt); outline-offset:6px; border-radius:6px; } /* het uitgelichte deel komt zo ver omhoog dat de titel boven de buren uitkomt */ .waaier .boek.actief { transform:rotate(0deg) translateY(-42px) scale(1.05); filter:drop-shadow(0 30px 34px rgba(64,50,58,.26)); } /* de hoogte volgt uit het voorste boek: 54% breed, verhouding 3:4, plus de ruimte die de gedraaide delen ernaast innemen */ .waaier::after { content:""; display:block; padding-top:70%; } /* het tekstballonnetje met het bot, zoals op de omslagen */ .hero-golf { position:absolute; left:0; right:0; bottom:0; height:180px; z-index:-1; background:linear-gradient(to bottom, transparent, var(--creme) 62%); } /* ---- sectiekoppen en overgangen ---- */ .sectiekop { max-width:660px; margin:0 auto var(--ruimte-s); text-align:center; } .sectiekop h2, .waarom h2, .slot h2, .teller h2 { font-family:"Baloo", sans-serif; font-size:clamp(28px, 3.6vw, 42px); } .sectielead { color:var(--mute); margin-top:16px; font-size:18px; } /* De sectierand: een met de hand getekende golflijn, dezelfde soort lijn als onder de kop in de hero. Het kleurvlak van de sectie loopt door tot aan de golf, dus de rand is de kleur zelf en geen los randje. */ .golfrand { position:relative; } .golfrand::before { content:""; position:absolute; left:0; right:0; top:-26px; height:27px; background:inherit; pointer-events:none; -webkit-mask:url("data:image/svg+xml,") repeat-x bottom / 400px 27px; mask:url("data:image/svg+xml,") repeat-x bottom / 400px 27px; } /* ---- de dagenteller ---- */ .teller { background:var(--zand); padding:var(--ruimte-m) 24px; } .teller-binnen { max-width:760px; margin:0 auto; text-align:center; } .teller-form { display:flex; flex-direction:column; align-items:center; gap:22px; } .teller-zin { font-family:"Baloo", sans-serif; font-size:clamp(22px, 2.5vw, 32px); line-height:1.6; text-align:center; margin-top:26px; } .teller-zin input { font:inherit; background:transparent; border:0; border-radius:0; border-bottom:2px dashed var(--teal-diep); padding:0 10px 4px; line-height:1.5; min-width:5ch; max-width:100%; color:var(--teal-diep); text-align:center; } .teller-zin input:focus { outline:none; border-bottom-style:solid; } .teller-zin input[type="date"] { width:auto; padding-inline:6px; } .teller-zin input::placeholder { color:var(--mute); } .teller-form .knop { min-height:48px; border:0; outline-offset:4px; } .teller-uit { display:none; } .teller-uit.gevuld { display:block; margin-top:36px; padding:34px 38px; text-align:left; background:var(--papier); border:1px solid var(--lijn); border-top:3px solid var(--teal-diep); border-radius:var(--r-m); } .teller-uit h3 { font-family:"Baloo", sans-serif; font-size:26px; margin-bottom:12px; } .teller-uit p { color:var(--zacht-inkt); } .teller-uit .knop { margin-top:20px; } .teller-noot { margin-top:18px; font-size:13px; color:var(--mute); } /* ---- binnenwerk ---- */ .binnenin { background:var(--creme); padding:var(--ruimte-m) 24px; } .galerij { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:auto auto; gap:28px 34px; align-items:start; } .galerij figure { margin:0; } .galerij figure:first-child { grid-row:1 / 3; } .galerij figure:first-child figcaption { font-size:17px; } .galerij img { border-radius:var(--r-s); border:1px solid var(--lijn); box-shadow:var(--schaduw-1); } .galerij figcaption { margin-top:16px; font-size:15px; color:var(--mute); text-align:center; } .galerij-actie { text-align:center; margin-top:44px; } /* ---- tijdlijn ---- */ .reis { background:var(--creme); padding:var(--ruimte-m) 24px; } .tijdlijn { list-style:none; padding:0; margin:0 auto; max-width:var(--max); display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; position:relative; } .tijdlijn::before { content:""; position:absolute; left:6px; right:6px; top:9px; height:2px; background:linear-gradient(90deg, var(--teal), var(--lucht), var(--roze), var(--zon)); opacity:.35; border-radius:2px; } .halte { position:relative; padding-top:44px; } /* de tipkaders van alle vier de fases beginnen op dezelfde hoogte, ook als de tekst erboven verschilt in lengte */ @supports (grid-template-rows: subgrid) { .tijdlijn { grid-template-rows:auto auto auto; } /* de padding zou de rijen laten overlopen; de ruimte onder de lijn zit daarom in de marge van de kop */ .halte { display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; padding-top:0; } /* expliciet plaatsen; met automatische plaatsing belandde de tip in een extra rij en schoof hij over de tekst heen */ .halte h3 { grid-row:1; margin-top:44px; align-self:start; } .halte > p:not(.halte-tip) { grid-row:2; align-self:start; } .halte-tip { grid-row:3; align-self:start; } } .halte-stip { position:absolute; top:0; left:0; width:20px; height:20px; border-radius:50%; background:var(--kleur); box-shadow:0 0 0 6px color-mix(in srgb, var(--kleur) 18%, transparent); } .halte h3 { font-family:"Baloo", sans-serif; font-size:21px; margin-bottom:10px; } .halte p { color:var(--mute); font-size:16px; } /* ---- deel 4, in zijn eigen stille sectie ---- */ .uitgelicht { background:var(--papier); color:var(--inkt); padding:var(--ruimte-m) 24px; position:relative; border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn); } .uitgelicht-binnen { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; } /* de secties wisselen om en om van kant */ .uitgelicht.omgekeerd .uitgelicht-tekst { order:2; } .uitgelicht.omgekeerd { background:var(--creme); } .uitgelicht-tekst { position:relative; } .uitgelicht .kicker { color:var(--diep-zon); } .uitgelicht h2 { font-family:"Baloo", sans-serif; font-size:clamp(30px, 3.6vw, 44px); line-height:1.15; max-width:14ch; color:var(--inkt); } .uitgelicht p { margin-top:22px; color:var(--zacht-inkt); max-width:52ch; font-size:17.5px; } .uitgelicht-actie { margin-top:36px; } .uitgelicht-actie .knop { background:var(--diep-zon); color:#fff; box-shadow:none; } .uitgelicht-meta { margin-top:16px; font-size:14.5px; color:var(--mute); } /* ---- de vijf delen ---- */ .boeken { padding:var(--ruimte-m) 24px; background:var(--papier); } .boeken > * { max-width:var(--max); margin-inline:auto; } .boeken .sectiekop { margin-bottom:72px; } .raster { display:grid; grid-template-columns:repeat(2, 1fr); gap:40px; } /* vijf kaarten in twee kolommen: de laatste staat gecentreerd in plaats van scheef */ .raster > :nth-child(5) { grid-column:1 / -1; max-width:calc(50% - 20px); justify-self:center; } .kaart { position:relative; background:var(--papier); border:1px solid color-mix(in srgb, var(--kleur) 28%, var(--lijn)); border-radius:var(--r-m); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--schaduw-1); transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; } .kaart:hover { transform:translateY(-4px); box-shadow:var(--schaduw-2); } /* het omslagvlak draagt de kleur van het deel; het omslag draagt de rest */ .kaart-beeld { padding:52px 40px 44px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--kleur) 22%, transparent), transparent 70%), color-mix(in srgb, var(--kleur) 9%, var(--papier)); border-bottom:1px solid color-mix(in srgb, var(--kleur) 20%, transparent); } .kaart-beeld .boek { display:block; max-width:280px; margin:0 auto; transform:rotate(-2deg); transition:transform .35s cubic-bezier(.2,.7,.3,1); } .kaart:hover .kaart-beeld .boek { transform:rotate(0deg) translateY(-6px); } .kaart-tekst { padding:26px 30px 32px; } .kaart .kaart-nr { display:inline-block; font-family:"Poppins", sans-serif; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:5px 12px; border-radius:var(--r-pil); background:color-mix(in srgb, var(--kleur) 20%, transparent); color:var(--diep, var(--teal-diep)); margin-bottom:14px; } .kaart h3 { font-family:"Baloo", sans-serif; font-size:24px; margin-bottom:12px; } .kaart p { color:var(--zacht-inkt); font-size:15.5px; max-width:60ch; } .kaart-koop { margin-top:20px; } .kaart-koop .knop { background:var(--diep, var(--teal-diep)); box-shadow:none; } .kaart-meta { margin-top:12px; font-size:13.5px; color:var(--mute); } /* ---- kiezer ---- */ .kiezer { background:var(--papier); padding:var(--ruimte-m) 24px; } .kiezer-binnen { max-width:780px; margin:0 auto; background:var(--creme); border:1px solid var(--lijn); border-radius:var(--r-l); padding:48px 52px; box-shadow:var(--schaduw-2); counter-reset:v; } .vraag { border:0; padding:0; margin:0 0 32px; } .vraag legend { font-family:"Poppins", sans-serif; font-weight:600; font-size:18px; margin-bottom:16px; padding:0; display:flex; align-items:center; gap:12px; } .vraag legend::before { counter-increment:v; content:counter(v); width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--teal-diep); color:#fff; font-size:14px; display:grid; place-items:center; } .vraag button { font:inherit; font-weight:500; background:var(--papier); color:var(--inkt); border:1.5px solid var(--lijn-ui); border-radius:var(--r-pil); padding:14px 26px; font-size:16px; margin:0 8px 8px 0; min-height:44px; cursor:pointer; transition:border-color .2s, background .2s, color .2s; } .vraag button:hover { border-color:var(--teal); } .vraag button[aria-pressed="true"] { background:var(--teal-diep); border-color:var(--teal-diep); color:#fff; } .advies { display:block; margin-top:8px; padding:28px 32px; background:var(--papier); border:1px solid var(--lijn); border-left:4px solid var(--teal-diep); border-radius:var(--r-m); } .advies:not(.gevuld) { color:var(--mute); border-left-color:var(--lijn); } .advies:not(.gevuld)::before { content:"Kies hierboven, dan zie je meteen welk deel klopt."; } .advies h3 { font-family:"Baloo", sans-serif; font-size:22px; margin-bottom:10px; } .advies p { color:var(--zacht-inkt); } .advies .knop { margin-top:18px; } .advies-extra { margin-top:18px; font-size:15.5px; } .advies-extra a { color:var(--teal-diep); font-weight:600; } /* ---- waarom ---- */ .waarom { background:var(--creme); padding:var(--ruimte-m) 24px; } /* De waarom-sectie stond met een enorme kop en veel lucht; nu compacter, met de opsomming als kaartjes zodat het niet één grijze lap tekst is. */ .waarom-binnen { max-width:var(--max); margin:0 auto; text-align:left; display:grid; grid-template-columns:1fr 1fr; gap:16px 56px; align-items:start; } .waarom-binnen > .kicker { grid-column:1 / -1; } /* het citaat staat midden tegenover de tekst, anders valt de linkerkolom leeg */ .waarom blockquote { grid-column:1; grid-row:2 / span 3; margin:0; align-self:center; } .waarom blockquote p { font-family:"Baloo", sans-serif; font-weight:400; font-size:clamp(28px, 3.4vw, 40px); line-height:1.22; color:var(--inkt); max-width:16ch; margin:0; } .waarom blockquote em { font-family:"Pacifico", cursive; font-style:normal; color:var(--teal-diep); font-size:1.05em; } .waarom-binnen > p { grid-column:2; margin-top:0; align-self:start; color:var(--zacht-inkt); font-size:17px; } .waarom-binnen > p + p { margin-top:16px; } /* Wat de boeken opleveren, vanuit het gebruik gezien. Vormgeving uit de boeken zelf: een licht gestreept vlak zoals de kaders daar, met een gekleurde pootjesmunt die over de rand heen valt. */ .waarde { grid-column:1 / -1; grid-row:auto; list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:30px 26px; } .waarde li { position:relative; margin-top:16px; padding:30px 24px 24px; border-radius:20px; color:var(--zacht-inkt); font-size:15.5px; line-height:1.58; background:color-mix(in srgb, var(--k) 10%, var(--papier)); box-shadow:var(--schaduw-1); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; } .waarde li:hover { transform:translateY(-3px) rotate(-.4deg); box-shadow:var(--schaduw-2); } .waarde b { color:var(--inkt); font-weight:600; } /* de munt met het pootje, half over de rand, zoals de bolletjes in het boek */ .waarde li::before { content:""; position:absolute; left:22px; top:-17px; width:36px; height:36px; border-radius:50%; background:var(--k); border:3px solid #fff; } .waarde li::after { content:""; position:absolute; left:22px; top:-17px; width:36px; height:36px; background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cellipse cx='12' cy='14.5' rx='6.4' ry='5.2'/%3E%3Cellipse cx='4.4' cy='7' rx='2.7' ry='3.4' transform='rotate(-18 4.4 7)'/%3E%3Cellipse cx='9.6' cy='4.2' rx='2.7' ry='3.6'/%3E%3Cellipse cx='15' cy='4.6' rx='2.7' ry='3.4' transform='rotate(16 15 4.6)'/%3E%3Cellipse cx='19.6' cy='8.4' rx='2.4' ry='3' transform='rotate(32 19.6 8.4)'/%3E%3C/svg%3E") no-repeat center/17px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cellipse cx='12' cy='14.5' rx='6.4' ry='5.2'/%3E%3Cellipse cx='4.4' cy='7' rx='2.7' ry='3.4' transform='rotate(-18 4.4 7)'/%3E%3Cellipse cx='9.6' cy='4.2' rx='2.7' ry='3.6'/%3E%3Cellipse cx='15' cy='4.6' rx='2.7' ry='3.4' transform='rotate(16 15 4.6)'/%3E%3Cellipse cx='19.6' cy='8.4' rx='2.4' ry='3' transform='rotate(32 19.6 8.4)'/%3E%3C/svg%3E") no-repeat center/17px; } /* elk vlak een eigen kleur uit de reeks; de eerste regel volgt de fasekleuren */ /* de volgorde is met opzet niet regelmatig; anders krijgt elke kolom zijn eigen kleur en oogt het raster als een tabel */ .waarde li:nth-child(9n+1) { --k:var(--teal); } .waarde li:nth-child(9n+2) { --k:var(--zon); } .waarde li:nth-child(9n+3) { --k:#9B7EDE; } .waarde li:nth-child(9n+4) { --k:var(--roze); } .waarde li:nth-child(9n+5) { --k:var(--teal); } .waarde li:nth-child(9n+6) { --k:var(--lucht); } .waarde li:nth-child(9n+7) { --k:#F4794F; } .waarde li:nth-child(9n+8) { --k:#9B7EDE; } .waarde li:nth-child(9n+9) { --k:var(--zon); } /* ---- cadeau ---- */ .cadeau { padding:var(--ruimte-m) 24px; background:var(--papier); } .cadeau > * { max-width:var(--max); margin-inline:auto; } .cadeau-raster { display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; } .cadeau-raster article { position:relative; overflow:hidden; padding:0 32px 32px; border:1px solid var(--lijn); border-top:4px solid var(--kleur); border-radius:var(--r-m); box-shadow:var(--schaduw-1); background:color-mix(in srgb, var(--kleur) 5%, var(--papier)); display:flex; flex-direction:column; } .cadeau-raster img { width:84px; margin:28px auto 20px; border-radius:var(--boekhoek); box-shadow:var(--schaduw-1); transform:rotate(-3deg); } .cadeau-raster h3 { font-family:"Baloo", sans-serif; font-size:19px; margin-bottom:10px; } .cadeau-raster p { color:var(--zacht-inkt); font-size:16px; } /* de titel op één regel, met een chevron in plaats van het woord 'Naar' */ .cadeau-raster a { margin-top:auto; padding-top:16px; color:var(--diep, var(--teal-diep)); font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:baseline; gap:7px; align-self:flex-start; border-bottom:2px solid transparent; } .cadeau-raster a::before { content:"›"; font-size:1.25em; line-height:1; } .cadeau-raster a:hover { border-bottom-color:var(--kleur); } /* ---- vragen ---- */ .vragen { background:var(--creme); padding:var(--ruimte-m) 24px; } .vragen-binnen { max-width:760px; margin:0 auto; } .vragen details { background:var(--papier); border:1px solid var(--lijn); border-radius:var(--r-m); padding:4px 26px; margin-bottom:12px; transition:box-shadow .25s, border-color .25s; } .vragen details[open] { border-color:color-mix(in srgb, var(--teal) 45%, transparent); box-shadow:var(--schaduw-1); } .vragen summary { font-family:"Poppins", sans-serif; font-weight:600; font-size:17.5px; padding:18px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } .vragen summary::-webkit-details-marker { display:none; } .vragen summary::after { content:""; width:11px; height:11px; flex:0 0 11px; border-right:2.5px solid var(--teal-diep); border-bottom:2.5px solid var(--teal-diep); transform:rotate(45deg) translateY(-3px); transition:transform .25s; } .vragen details[open] summary::after { transform:rotate(-135deg) translateY(-3px); } .vragen details p { padding-bottom:20px; margin-top:6px; color:var(--zacht-inkt); max-width:66ch; } /* ---- slot en voet ---- */ .slot { background:var(--teal-diep); color:#fff; text-align:center; padding:var(--ruimte-m) 24px; position:relative; } .slot::after { content:""; position:absolute; inset:0; opacity:.035; pointer-events:none; overflow:hidden; background-image:url("data:image/svg+xml,"); background-size:270px 270px; } .slot-binnen { position:relative; z-index:1; max-width:var(--max); margin:0 auto; } .slot p { margin:18px auto 34px; max-width:44ch; } .slot .knop { background:#fff; color:var(--teal-diep); box-shadow:none; } .voet { background:#0F4A41; color:#fff; font-size:15px; display:grid; gap:20px; padding:56px 24px 36px; padding-inline:max(24px, calc((100vw - var(--max)) / 2)); } .voet-merk { font-family:"Pacifico", cursive; font-size:30px; margin-bottom:12px; } .voet-auteur { white-space:nowrap; font-weight:600; } .voet nav { display:flex; flex-wrap:wrap; gap:6px 22px; } .voet a { color:#fff; text-decoration:none; opacity:.85; } .voet a:hover { opacity:1; text-decoration:underline; } .voet-slot { border-top:1px solid #ffffff26; padding-top:24px; font-size:13.5px; color:#ffffffb3; } /* ---- verschijnen bij het scrollen (alleen als JavaScript draait) ---- */ .js .verschijnt { opacity:0; transform:translateY(12px); } .verschijnt.in { opacity:1; transform:none; transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1); transition-delay:calc(var(--i, 0) * 45ms); } /* ---- breed naar smal ---- */ @media (max-width: 1000px) { :root { --ruimte-m:80px; --ruimte-l:104px; } .galerij { grid-template-columns:repeat(2, 1fr); row-gap:44px; } /* de lijn blijft staan, maar rechtop; anders zijn het losse tekstblokjes */ .tijdlijn { grid-template-columns:1fr; row-gap:0; } .tijdlijn::before { left:9px; right:auto; top:8px; bottom:8px; width:2px; height:auto; background:linear-gradient(180deg, var(--teal), var(--lucht), var(--roze), var(--zon)); } .halte { padding:0 0 32px 40px; } .halte-stip { left:0; top:4px; } .raster > :nth-child(5) { grid-column:auto; max-width:none; } .cadeau-raster { grid-template-columns:repeat(2, 1fr); } } @media (max-width: 1320px) { .hero { gap:44px; } .hero h1 { font-size:clamp(36px, 3.7vw, 46px); } } @media (max-width: 900px) { .hero { grid-template-columns:1fr; gap:44px; padding:64px 24px 40px; min-height:0; } /* op smal scherm staat de waaier smaller en vlakker, en blijft hij binnen beeld */ .waaier { padding:44px 0 8px; max-width:430px; margin-inline:auto; } .waaier::after { padding-top:70%; } .waaier .b1 { right:1%; width:44%; --draai:1deg; } .waaier .b2 { right:13%; width:43%; --draai:-2deg; } .waaier .b3 { right:26%; width:42%; --draai:-5deg; } .waaier .b4 { right:38%; width:41%; --draai:-8deg; } .waaier .b5 { right:50%; width:40%; --draai:-11deg; } /* de golf hoort onder één regel; bij twee regels loopt hij de tekst voorbij */ .hero h1 em::after { content:none; } .hero h1 { max-width:none; } .stapel { width:min(100%, 360px); margin:0 auto; } .nav { flex-wrap:wrap; gap:16px; } .nav nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--papier); border-bottom:1px solid var(--lijn); padding:8px 24px 16px; max-height:calc(100vh - 76px); overflow-y:auto; } .nav.open nav { display:block; } .nav nav > ul { flex-direction:column; gap:0; } .nav nav a, .nav nav button { padding:13px 2px; min-height:44px; } /* op smal scherm staan de subitems gewoon uitgeklapt; een menu in een menu is op een telefoon meer werk dan het oplevert */ .heeft-sub > button { display:none; } .heeft-sub::after { content:none; } .submenu { display:block; position:static; min-width:0; border:0; box-shadow:none; background:none; padding:0 0 0 14px; border-left:2px solid var(--lijn); } .submenu a { padding:11px 8px; } .menuknop { display:inline-flex; } .uitgelicht-binnen { grid-template-columns:1fr; gap:40px; } .waarom-binnen { grid-template-columns:1fr; gap:32px; } .waarom blockquote p { max-width:20ch; } .waarom-binnen > p { grid-column:1; } .waarde { grid-template-columns:1fr; gap:12px; margin-top:28px; } .galerij figure:first-child { grid-row:auto; grid-column:1 / -1; max-width:560px; margin-inline:auto; } } @media (max-width: 560px) { /* de hamburger draagt de navigatie; twee knoppen naast elkaar breken de balk */ .nav > .knop-klein { display:none; } .merk-woord { font-size:22px; } html { scroll-padding-top:76px; } } @media (max-width: 640px) { :root { --ruimte-s:40px; --ruimte-m:56px; --ruimte-l:72px; } .raster { grid-template-columns:1fr; gap:16px; } /* boekkaarten liggend: een omslag op volle breedte is een diavoorstelling */ .kaart { flex-direction:row; align-items:stretch; } .kaart-beeld { flex:0 0 96px; padding:18px 8px; display:grid; place-items:start center; } .kaart-beeld img { max-width:80px; } .kaart-tekst { padding:16px 16px 20px; } .kaart h3 { font-size:19px; } .kaart p { font-size:14px; line-height:1.55; } .kaart-meta { font-size:12.5px; } /* binnenwerk en cadeaus als swipe-rij die tot de schermrand loopt; de volgende kaart piept eruit, zodat zichtbaar is dat er meer staat */ .binnenin, .cadeau { padding-inline:0; } .binnenin .sectiekop, .cadeau .sectiekop, .galerij-actie { padding-inline:24px; } .galerij, .cadeau-raster { display:flex; overflow-x:auto; gap:16px; padding:0 24px 12px; scroll-padding-inline:24px; scroll-snap-type:x proximity; scrollbar-width:none; } .galerij::-webkit-scrollbar, .cadeau-raster::-webkit-scrollbar { display:none; } .galerij figure, .cadeau-raster article { flex:0 0 82%; scroll-snap-align:start; } .galerij figure:first-child { max-width:none; margin-inline:0; } .galerij figcaption { font-size:14px; } .kiezer-binnen { padding:32px 24px; } .vraag { margin-bottom:24px; } .vraag button { width:100%; margin:0 0 8px; } .teller-zin { line-height:2.2; } .stapel .s3 { display:none; } } @media (prefers-reduced-motion: reduce) { .verschijnt, .verschijnt.in { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } } @media print { .nav, .hero-golf, .overslaan, .hero-acties, .teller, .kiezer, .slot .knop, .galerij-actie { display:none; } .verschijnt, .verschijnt.in { opacity:1 !important; transform:none !important; } body::before { display:none; } body, .reis, .binnenin, .vragen, .slot, .voet, .uitgelicht { background:#fff !important; color:#000 !important; } a[href^="http"]::after { content:" (" attr(href) ")"; font-size:11px; } } /* ---- ronde 6: regie ---- */ /* Niet elke sectie dezelfde as. Gecentreerd is nu voorbehouden aan de teller, het boekenraster en het slot; de rest staat links. */ .kop-split { max-width:var(--max); margin:0 auto var(--ruimte-s); display:grid; grid-template-columns:1.05fr .95fr; column-gap:72px; align-items:end; text-align:left; } .kop-split .kicker { grid-column:1; grid-row:1; margin-bottom:14px; } .kop-split h2 { grid-column:1; grid-row:2; max-width:16ch; } .kop-split .sectielead { grid-column:2; grid-row:2; margin-top:0; max-width:42ch; } .kop-links { max-width:var(--max); margin:0 auto var(--ruimte-s); text-align:left; } .kop-links h2 { max-width:18ch; } .kop-links .sectielead { max-width:52ch; } /* streepje dat de linkse koppen aan elkaar knoopt */ .kop-split .kicker::before, .kop-links .kicker::before { content:""; display:inline-block; width:26px; height:2px; border-radius:2px; background:var(--teal); vertical-align:middle; margin-right:12px; transform:translateY(-1px); } /* de kiezerkop staat in het paneel; twee objecten boven elkaar was er één te veel */ .kiezer-kop { text-align:left; margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--lijn); } .kiezer-kop h2 { font-family:"Baloo", sans-serif; font-size:clamp(26px, 3vw, 34px); } .kiezer-kop .sectielead { margin-top:12px; font-size:16.5px; max-width:46ch; } /* de senior stapt over de schulprand heen de crèmesectie in */ /* vier honden op de tijdlijn, van jong naar oud */ .tijdlijn { margin-top:126px; } .halte-dier { position:absolute; bottom:calc(100% - 10px); left:50%; translate:-50% 0; width:auto; height:112px; max-width:none; filter:drop-shadow(0 7px 5px rgba(64,50,58,.16)); pointer-events:none; } /* de derde hond keek de tijdlijn uit; gespiegeld kijkt hij mee naar rechts */ .halte:nth-child(3) .halte-dier { scale:-1 1; } .halte:last-child .halte-dier { height:62px; bottom:calc(100% - 8px); } @media (max-width: 1000px) { .tijdlijn { margin-top:0; } .halte-dier { position:static; translate:none; height:78px; margin:0 0 12px; filter:none; } .halte:last-child .halte-dier { height:52px; } } @media (max-width: 900px) { .kop-split { grid-template-columns:1fr; row-gap:16px; } .kop-split .sectielead { grid-column:1; grid-row:3; } } @media (max-width: 640px) { } /* ---- de hero komt binnen: de waaier klapt open, de ballon springt erna ---- */ @media (prefers-reduced-motion: no-preference) { .js .waaier .boek { animation:waaier-open .9s cubic-bezier(.2,.8,.25,1) backwards; } .js .waaier .b1 { animation-delay:.05s; } .js .waaier .b2 { animation-delay:.14s; } .js .waaier .b3 { animation-delay:.23s; } .js .waaier .b4 { animation-delay:.32s; } .js .waaier .b5 { animation-delay:.41s; } @keyframes waaier-open { from { transform:rotate(-4deg) translate(16%, 8%) scale(.94); opacity:0; } to { transform:rotate(var(--draai)); opacity:1; } } /* de tekstballon doet niet mee met de animatie; die staat er gewoon */ } /* ---- tips per fase ---- */ .halte-tip { position:relative; margin-top:30px; padding:28px 20px 20px; border-radius:20px; font-size:15px; line-height:1.55; color:var(--zacht-inkt); background:color-mix(in srgb, var(--kleur) 10%, var(--papier)); box-shadow:var(--schaduw-1); transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; } .halte-tip:hover { transform:translateY(-3px) rotate(-.4deg); box-shadow:var(--schaduw-2); } .halte-tip b { color:var(--inkt); } /* een munt met een opengeslagen boek, half over de bovenrand */ .halte-tip::before { content:""; position:absolute; left:20px; top:-17px; width:36px; height:36px; border-radius:50%; background:var(--kleur); border:3px solid #fff; } .halte-tip::after { content:""; position:absolute; left:20px; top:-17px; width:36px; height:36px; background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 3.6C6 2 10 2.2 12 4.8C14 2.2 18 2 22 3.6L22 16.6C18 15 14 15.2 12 17.8C10 15.2 6 15 2 16.6Z' fill='%23000'/%3E%3Cpath d='M11.1 5.2h1.8v12.2h-1.8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/17px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 3.6C6 2 10 2.2 12 4.8C14 2.2 18 2 22 3.6L22 16.6C18 15 14 15.2 12 17.8C10 15.2 6 15 2 16.6Z' fill='%23000'/%3E%3Cpath d='M11.1 5.2h1.8v12.2h-1.8z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/17px; } /* ---- de serie als rij omslagen, met een link naar elk deel ---- */ .reeks { list-style:none; margin:0 auto; padding:0; max-width:var(--max); display:grid; grid-template-columns:repeat(5, 1fr); gap:26px; } .reeks a { display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; color:var(--inkt); text-align:center; } .reeks .boek { display:block; width:100%; transition:transform .3s cubic-bezier(.2,.7,.3,1); } .reeks a:hover .boek { transform:translateY(-6px); } .reeks-titel { font-family:"Baloo", sans-serif; font-size:16px; line-height:1.2; margin-top:6px; } /* ---- een sectie per deel: tekst naast een waaier van pagina's ---- */ .boekdeel { padding:var(--ruimte-m) 24px; position:relative; background:var(--papier); } /* om en om een crèmekleurige ondergrond; dat markeert de wisseling van kant */ .boekdeel.omgekeerd { background:var(--creme); } .boekdeel-binnen { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; } .boekdeel.omgekeerd .boekdeel-tekst { order:2; } .boekdeel-tekst { position:relative; } .boekdeel-tekst h2 { font-family:"Baloo", sans-serif; font-size:clamp(28px, 3.4vw, 40px); max-width:15ch; } .boekdeel-tekst p { margin-top:20px; color:var(--zacht-inkt); max-width:46ch; } .boekdeel-actie { margin-top:30px; } .boekdeel-actie .knop { background:var(--diep); box-shadow:none; } .boekdeel-meta { margin-top:14px; font-size:14.5px; color:var(--mute); } /* het omslag hoort bij de tekst, klein en iets scheef */ /* het omslag hoort bij de titel en staat er dus naast, niet los in de hoek */ .boekdeel-kop { display:flex; align-items:center; gap:22px; margin-bottom:4px; } .boekdeel-omslag { flex:0 0 88px; width:88px; transform:rotate(-3deg); } .boekdeel-kop h2 { margin:0; } /* de pagina's liggen als losse vellen door elkaar, elk met een eigen kanteling */ .paginawaaier { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px 14px; } .paginawaaier .pagina { margin:0; } .paginawaaier .pagina:hover { z-index:4; } .paginawaaier img { width:100%; border:1px solid var(--lijn); border-radius:4px; background:#fff; box-shadow:var(--schaduw-1); transform:rotate(var(--t)); transform-origin:50% 60%; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; } .paginawaaier .pagina:hover img { transform:rotate(0deg) scale(1.6); box-shadow:var(--schaduw-2); position:relative; z-index:3; } .paginawaaier .pagina:nth-child(4n+2) img { margin-top:16px; } .paginawaaier .pagina:nth-child(4n+3) img { margin-top:-8px; } @media (max-width: 1000px) { .boekdeel-binnen { grid-template-columns:1fr; gap:40px; } .boekdeel.omgekeerd .boekdeel-tekst, .uitgelicht.omgekeerd .uitgelicht-tekst { order:0; } .reeks { grid-template-columns:repeat(3, 1fr); row-gap:34px; } } @media (max-width: 640px) { /* de pagina's als swipe-rij: acht vellen onder elkaar is te veel scrollen */ .paginawaaier { display:flex; overflow-x:auto; gap:12px; padding:4px 24px 12px; margin-inline:-24px; scroll-snap-type:x proximity; scrollbar-width:none; } .paginawaaier::-webkit-scrollbar { display:none; } .paginawaaier .pagina { flex:0 0 70%; scroll-snap-align:center; } .paginawaaier .pagina img { margin-top:0 !important; } .boekdeel { padding-inline:24px; overflow-x:clip; } .reeks { grid-template-columns:repeat(2, 1fr); } .boekdeel-omslag { width:70px; top:-8px; } .paginawaaier .pagina:hover img { transform:rotate(var(--t)); box-shadow:var(--schaduw-1); } } /* ---- kenmerken: getekende schetsen van de bladzijden ---- */ .kenmerken { background:var(--papier); padding:var(--ruimte-m) 24px; } .kenmerkraster { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(2, 1fr); gap:36px 48px; } .kenmerk { display:grid; grid-template-columns:172px 1fr; gap:24px; align-items:start; } .kenmerk-beeld { display:block; border:1px solid var(--lijn); border-radius:var(--r-m); background:color-mix(in srgb, var(--kleur) 7%, var(--papier)); padding:10px; box-shadow:var(--schaduw-1); transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.3,1); } .kenmerk:hover .kenmerk-beeld { transform:translateY(-3px); box-shadow:var(--schaduw-2); } .kenmerk h3 { font-family:"Baloo", sans-serif; font-size:19px; margin-bottom:8px; } .kenmerk p { color:var(--zacht-inkt); font-size:15.5px; } .kb { display:block; width:100%; height:auto; } /* de gedeelde onderdelen van de schetsen */ .kb .vel { fill:var(--papier); stroke:var(--lijn); stroke-width:2; } .kb .lijn, .kb .bandlijn { stroke:var(--lijn); stroke-width:4; stroke-linecap:round; } .kb .kop { fill:color-mix(in srgb, var(--kleur) 55%, var(--papier)); } .kb .stip { fill:color-mix(in srgb, var(--kleur) 18%, var(--papier)); } .kb .pootje { fill:var(--kleur); opacity:.7; } .kb .band { fill:color-mix(in srgb, var(--kleur) 16%, var(--papier)); } .kb .kader { fill:color-mix(in srgb, var(--kleur) 12%, var(--papier)); stroke:var(--kleur); stroke-width:2; } .kb .hoek { stroke:var(--kleur); stroke-width:2.5; fill:none; stroke-linecap:round; } .kb .raster { stroke:var(--lijn); stroke-width:1.6; } .kb .cel { fill:var(--kleur); opacity:.75; } .kb .vak { fill:none; stroke:var(--kleur); stroke-width:2.4; } .kb .vink { fill:none; stroke:var(--kleur); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform-origin:center; } /* de tabs zitten tegen de buitenrand van de bladzijde, net als in het boek, en hebben elk de kleur van hun eigen fase */ .kb .t1 { fill:var(--teal); } .kb .t2 { fill:var(--roze); } .kb .t3 { fill:var(--zon); } .kb .pen, .kb .krabbel { fill:none; stroke:var(--kleur); stroke-width:3; stroke-linecap:round; stroke-dasharray:180; stroke-dashoffset:180; } /* de beweging: klein, één ding per schets */ @media (prefers-reduced-motion: no-preference) { .kb .tab, .kb .band, .kb .cel, .kb .foto, .kb .vink, .kb .pen, .kb .krabbel, .kb .stip { transition:transform .45s cubic-bezier(.2,.8,.3,1), opacity .35s ease, stroke-dashoffset .9s ease; } .kenmerk:hover .kb .t1 { transform:translateX(4px); } .kenmerk:hover .kb .t2 { transform:translateX(4px); transition-delay:.07s; } .kenmerk:hover .kb .t3 { transform:translateX(4px); transition-delay:.14s; } .kenmerk:hover .kb .band { transform:translateY(-4px); } .kenmerk:hover .kb .foto { transform:rotate(-3deg); transform-origin:54px 45px; } .kenmerk:hover .kb .stip { transform:scale(1.08); transform-origin:118px 88px; } .kenmerk:hover .kb .pen, .kenmerk:hover .kb .krabbel { stroke-dashoffset:0; } .kenmerk:hover .kb .k1 { opacity:1; } .kenmerk:hover .kb .k2 { opacity:1; transition-delay:.1s; } .kenmerk:hover .kb .k3 { opacity:1; transition-delay:.2s; } .kenmerk:hover .kb .c1 { transform:scaleX(1.35); transform-origin:32px 32px; } .kenmerk:hover .kb .c2 { transform:scaleX(1.35); transform-origin:66px 52px; transition-delay:.08s; } .kenmerk:hover .kb .c3 { transform:scaleX(1.35); transform-origin:101px 72px; transition-delay:.16s; } } @media (max-width: 900px) { .kenmerkraster { grid-template-columns:1fr; gap:28px; } } @media (max-width: 640px) { .kenmerk { grid-template-columns:132px 1fr; gap:16px; } .kenmerk-beeld { padding:8px; } } @media (max-width: 420px) { /* op heel smalle schermen past de langste titel niet op één regel */ .cadeau-raster a { white-space:normal; } } @media (max-width: 520px) { /* onder deze breedte blijft er naast het beeld te weinig over voor de tekst */ .kenmerk { grid-template-columns:1fr; gap:14px; } .kenmerk-beeld { width:150px; } }