: het is een mockup, er valt niets te klikken. Op de site zijn het echte links, en dan zet de browser er standaard een streep onder. Die streep staat niet in het ontwerp. De klasse .link houdt zijn onderstreping wel, want die vraagt er in de lab-CSS zelf om. 2. .pcard is in het lab een flexbox. Dat wint van het hidden-attribuut, waardoor de bewaar-kaart — die pas verschijnt zodra er een compliment is — altijd zichtbaar zou zijn. Dit zet hidden weer terug op zijn werk. 3. Contrast. Deze alinea beschreef tot 10 september 2026 een stel donkere terracotta-varianten die er niet meer zijn: de kleuren zijn later naar het ontwerpsysteem getrokken en een zoekvervang liet de tekst achter met "van var(--kleur-rood) naar var(--kleur-rood)". Hier staan de gemeten waarden van de kleuren die er nu echt zijn: --kleur-soft #6E6E73 5,07 op wit 4,71 op creme --kleur-rood #C9414C 4,83 op wit 4,49 op creme --kleur-ink #1D1D1F 16,83 op wit 15,64 op creme --kleur-lijn #E5E5EA 1,26 op wit 1,17 op creme Lopende tekst haalt de AA-grens van 4,5 dus overal, behalve rood op creme, dat er met 4,49 net onder blijft. Gebruik rood daar niet voor lopende tekst. De lijnkleur haalt de 3,0 voor niet-tekst niet en is daarom een scheiding, nooit de rand waaraan je een invoerveld herkent. 5. WooCommerce brengt zijn eigen layout-stylesheet mee, en die zet float en een percentagebreedte op de accountblokken en de afrekenkolommen. Binnen een raster levert dat onzin op: het accountmenu werd 294px naast een inhoudskolom van 139px, waardoor de tekst met een woord per regel viel. Dit haalt die float en breedte eraf, zodat het raster van het lab weer bepaalt hoe breed de kolommen zijn. De rest van WooCommerce's opmaak blijft staan; die dresst de betaalmethoden en de meldingen. 6. Het lab stelt de sitekop in met de elementkiezer nav{display:flex;gap:32px}. Die pakt ook de account-zijbalk, want dat is in het lab zelf ook een

. Het menu ging daardoor op een rij staan en duwde de rasterkolom naar 979px, waardoor de inhoud in een strook van 139px viel — precies de fout die live stond. Het lab heeft dit euvel zelf ook (kolommen 831/354 in plaats van 460/830). Deze regel zet de zijbalk terug op een kolom, zoals de rest van .acct-nav duidelijk bedoelt. Wordt het in het lab opgelost, dan kan deze regel weg. Meer dan dit hoort er niet bij te komen; alle overige opmaak komt uit het lab. -------------------------------------------------------------------------- */ a{text-decoration:none} [hidden]{display:none} .pcard .tag,.pdp .tag{color:var(--label)} .foot h3{color:var(--muted)} .copy{color:var(--muted)} .eyebrow{color:var(--label)} .step .n{color:var(--label)} .ic .badge{background:var(--label)} .btn,.feeling.is-active{background:var(--kleur-rood)} .free-nudge{color:var(--label)} .btn-ghost{background:transparent} .account > .woocommerce-MyAccount-navigation, .account > .woocommerce-MyAccount-content, .commerce .col2-set,.commerce .col-1,.commerce .col-2{float:none;width:auto} .acct-nav{display:block} /* WooCommerce Blocks zet een negatieve marge van 8px op de productlijst om de tussenruimte tussen kolommen te compenseren, maar de wrapper eromheen heeft geen bijpassende padding. Op een telefoon (390px) staat de grid daardoor 8px buiten het scherm en kun je de hele pagina zijwaarts schuiven — te zien op de winkelwagen, onder "misschien ook leuk". In één kolom valt er niets te compenseren, dus daar mag de marge gewoon weg. */ @media (max-width: 600px) { .wc-block-grid__products { margin-left: 0; margin-right: 0; } } /* --- Lijnstijl: motiefrondjes en de voorbeeldkaart ------------------------ */ /* De rondjes tonen de tekening zelf; een naam als "vos bij boom" zegt niets en een plaatje alles. Ze erven de vorm van .sw, dus alleen de inhoud verschilt. */ .motief-swatch{background:#faf6f1;overflow:hidden;padding:4px} .motief-swatch img{width:100%;height:100%;object-fit:contain;display:block} .motief-swatch.is-active{outline:2px solid var(--terra,var(--kleur-rood));outline-offset:2px} /* De voorbeeldkaart krijgt de tekening boven de woorden, in dezelfde verhouding als het printbestand: eerst het beeld, dan de tekst. Zonder motief verandert er niets aan de kaart. */ /* De kaart met een tekening erop. De indeling (tekening boven de woorden) is per 11 september 2026 verhuisd naar .preview-art__inhoud: de kaart zelf is nu een raster met één vak, waarin een leeg blokje de verhouding van het drukbestand aanhoudt. Stond display:flex hier nog op de kaart, dan zou dat raster nooit ontstaan. De binnenruimte blijft wél op de kaart staan: die hoort bij het papier en niet bij wat erop ligt. */ #cmpl-preview.has-motief{background:var(--kleur-vlak-warm);padding:8% 8% 6%} /* De inhoud in het midden, niet bovenaan. flex-start stond hier omdat de kaart vroeger zo hoog was als zijn inhoud: er was geen ruimte om iets in te centreren. Nu de kaart de verhouding van het drukbestand aanhoudt is die ruimte er wel, en met flex-start bleef de onderste kwart van de kaart leeg terwijl de tekening tegen de bovenrand plakte. Het drukbestand verdeelt tekening en woorden over het hele vel. */ #cmpl-preview.has-motief .preview-art__inhoud{justify-content:center} /* Het beeldvak: even hoog voor alle negen tekeningen. Hier stond `max-height:46%`, en die deed niets. Een percentage in max-height rekent tegen de hoogte van de ouder, en die ouder had er geen: de kaart is zo hoog als zijn inhoud. Elke tekening kreeg dus zijn eigen maat, en de kaart die van hem over. Gemeten op live, 22 augustus 2026: 460 px bij de vogels, 604 bij de vierkante, 820 bij de vos en de boom. Dat laatste was ook nog wat je bij binnenkomst zag. Nu een vak met een vaste vorm en `object-fit:contain` erin. Een staande tekening wordt daarin kleiner in plaats van dat de kaart hoger wordt, en `aspect-ratio` samen met een breedte van 100% betekent dat de browser die hoogte al kent voordat er een byte van de tekening binnen is: geen sprong bij het laden en geen sprong bij het bladeren. De grens in vh is er voor lage vensters: op een liggende telefoon is een vierkant vak van de volle breedte hoger dan het scherm. En sinds 11 september 2026 staat er een aandeel van de kaart bij, maar in cqw en niet in procenten. De reden dat die het niet deed, is weg — de kaart heeft nu de verhouding van het drukbestand en dus een hoogte die de browser kent. Zonder dit aandeel nam de tekening op een telefoon 280 van de 417 pixels, hield de woorden 91 pixels over en liep een lange zin tot 101 pixels buiten de kaart. Met 45 procent verdelen tekening en tekst het vel ongeveer zoals de drukker dat doet, op elk scherm hetzelfde. */ #cmpl-preview.has-motief [data-cmpl-motief-beeld]{ width:100%;height:auto;aspect-ratio:1/1;max-height:min(57cqw,44vh,360px); object-fit:contain;margin-bottom:4%; } #cmpl-preview.has-motief .q{color:var(--kleur-ink);margin:0} @media (max-width:720px){ #cmpl-preview.has-motief{padding:7% 7% 5%} #cmpl-preview.has-motief [data-cmpl-motief-beeld]{max-height:min(45cqw,38vh,300px)} } /* De hero met beeld erin. Smal scherm: het tegeltje staat als strook onder de woorden, van rand tot rand. De negatieve marges halen de padding van de hero eraf, zodat de foto de volle breedte pakt en tegen het volgende blok aan sluit. */ .hero__beeld{display:block;width:calc(100% + 56px);height:auto;max-width:none; margin:48px -28px -78px;object-fit:cover;aspect-ratio:5/3} @media (min-width:640px){ .hero__beeld{aspect-ratio:5/2} } /* Breed scherm: de foto rechts, de woorden in de lege ruimte links die de foto daarvoor openhoudt. Zonder die verschuiving zou de grote zin over het tegeltje vallen, en dan staan er twee complimenten door elkaar. */ @media (min-width:1000px){ .hero--beeld{text-align:left;padding:96px 6vw 96px;min-height:min(74vh,560px); display:flex;flex-direction:column;align-items:flex-start;justify-content:center} .hero--beeld .eyebrow{align-self:flex-start} .hero--beeld .big{margin:24px 0 0;max-width:14ch} .hero--beeld .sig{margin-left:0} .hero--beeld .cta{justify-content:flex-start} .hero--beeld .hero__beeld{position:absolute;top:0;right:0;bottom:0;left:auto; width:74%;height:100%;margin:0;aspect-ratio:auto;object-position:center right;z-index:0} /* Papier over de linkerhelft, uitlopend naar niets. De foto begint links met een rustige muur, dus de overgang valt niet op; de woorden houden hun contrast ook waar de foto lichter wordt. */ .hero--beeld::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(90deg,var(--cream) 0%,var(--cream) 34%,rgba(247,242,233,.82) 46%,rgba(247,242,233,.24) 58%,rgba(247,242,233,0) 70%)} } @media (min-width:1400px){ .hero--beeld{padding-left:max(6vw,calc((100vw - 96px) / 2))} } /* Het voorbeeldblok op de winkelpagina. Op de maakpagina is dit het hoofdgerecht en mag het groot zijn. Boven een lijst met producten is het een onderschrift: het zegt "dit komt erop te staan" en dan wil je bij de producten zijn. Zonder deze grens groeit het blok mee met de tekening, en een staande boom maakt er een halve pagina van. Gezien op de winkelpagina op 20 augustus 2026. */ .preview--winkel{max-width:820px} .preview--winkel .preview-art{padding:24px 24px;height:300px;display:flex;flex-direction:column;justify-content:center} .preview--winkel #cmpl-preview.has-motief{padding:4% 6% 3%} /* Deze kaart heeft wel een vaste hoogte (300px hierboven), dus hier rekent het percentage wel ergens tegen en is de vaste vorm van de maakpagina niet nodig. `aspect-ratio:auto` haalt hem er weer af. */ .preview--winkel #cmpl-preview.has-motief [data-cmpl-motief-beeld]{aspect-ratio:auto;max-height:62%} .preview--winkel .q{font-size:var(--fs-lead);line-height:1.35} @media (max-width:720px){ .preview--winkel .preview-art{height:230px} } /* ========================================================================== Inspiratie- en themapagina's, 20 augustus 2026 Vier gerichte ingrepen op het gedeelde template, zodat alle landingspagina's in een keer meeprofiteren. ========================================================================== */ /* * 1. Leesbreedte. * * De kolom was 672 pixels breed en dat leverde 75 tot 83 tekens per regel op, * gemeten op /compliment-voor-collega/. De leesbaarheidsnorm is 50 tot 75, met * 66 als prettigste. In `ch` gerekend valt dat lager uit dan je zou denken, * want `ch` is de breedte van een nul en die is smaller dan een gemiddelde * letter. Vandaar 58ch en niet 66ch; nagemeten komt dat uit rond de 66 tekens. * * De hero-titel valt hier bewust buiten: die mag breed blijven staan. */ .art-body > *, .single .art-body > * { max-width: 58ch; margin-left: auto; margin-right: auto; } /* Beeld en bredere blokken mogen de volle kolom houden. */ .art-body > figure, .art-body > .wp-block-image, .art-body > table, .art-body > .cmpl-cta-vroeg { max-width: none; } /* * 2. De voorbeelden als rustige lijst. * * Ze stonden als kale genummerde lijst. Dezelfde vorm als het opgeruimde * zoekblok leest rustiger en hoort bij het merk: een haarlijn tussen de regels * en een klein terracotta hartje ervoor. Het nummer verdwijnt; de volgorde van * een voorbeeldenlijst draagt geen betekenis. */ .art-body ol { list-style: none; margin: 24px auto; padding: 0; max-width: 58ch; } .art-body ol > li { position: relative; margin: 0; padding: 12px 0 12px 24px; border-top:var(--lijn-dikte) solid var(--cmpl-line, var(--kleur-lijn)); } .art-body ol > li:first-child { border-top: 0; } .art-body ol > li::before { content: "\2665"; position: absolute; left: 2px; top: 12px; font-size:var(--fs-label); line-height: 1.6; color: var(--cmpl-terra-deep, var(--kleur-rood)); opacity: .55; } /* * 3. De uitnodiging ook hoger op de pagina. * * De enige actie stond op 88 procent van de paginahoogte. Wie halverwege stopt * met lezen zag hem nooit. Dit is er een rustige, vroege variant van: een regel * met een link, geen tweede kleurvlak, zodat de band onderaan de opvallende * blijft en er niet twee even harde vragen op een pagina staan. */ .cmpl-cta-vroeg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 24px auto; max-width: 58ch; padding: 12px 16px; /* Geen accentbalkje links. De rest van de site werkt met hele randen en zachte vlakken; dit was de enige plek met een zijstreepje, en dan valt het op als een uitzondering zonder reden. */ border:var(--lijn-dikte) solid var(--cmpl-line, var(--kleur-lijn)); border-radius: var(--r-vlak); background: var(--cmpl-paper-warm, var(--kleur-grond)); } .cmpl-cta-vroeg p { margin: 0; font-size:var(--fs-body); color: var(--cmpl-muted-deep); } .cmpl-cta-vroeg a { font-weight: 700; color: var(--cmpl-terra-deep, var(--kleur-rood)); text-decoration: underline; text-underline-offset: 3px; } /* * 4. Het kaartbeeld op /inspiratie/. * * Geen van de zes berichten heeft een uitgelichte afbeelding, en de terugval * was een vage vlek met de titel eroverheen. Nu de lijntekening van het merk op * een warm vlak: herkenbaar, en per kaart een andere. */ .pcard .cmpl-kaartbeeld { display: grid; place-items: center; width: 100%; height: 100%; background: var(--cmpl-paper-warm, var(--kleur-grond)); padding: 14%; box-sizing: border-box; } .pcard .cmpl-kaartbeeld img { width: 100%; height: 100%; object-fit: contain; opacity: .85; } @media (max-width: 600px) { .art-body > *, .art-body ol, .cmpl-cta-vroeg { max-width: none; } } /* * 5. De vage vlekken weg. * * `.preview-art` en `.render` stonden op vier gekleurde radiale verlopen: een * groene, een perzik, een paarse en een blauwe. Bedoeld als zachte aquarel, * maar zonder beeld erbovenop komt het eruit als een half lege vlek. Zichtbaar * op het blok "Voorbeeld van de mok" op elke productpagina, en op de * inspiratiekaarten. * * Nu een rustig merkvlak met een haarlijn eromheen. Staat er wél een render of * een foto overheen, dan zag je deze achtergrond toch niet; het verschil zit * alleen daar waar het beeld ontbreekt, en juist daar was het rommelig. */ .preview-art { background: var(--cmpl-paper-warm, var(--kleur-grond)); border:var(--lijn-dikte) solid var(--cmpl-line, var(--kleur-lijn)); } .render { background: var(--cmpl-paper-warm, var(--kleur-grond)); } .pcard .ph { background: var(--cmpl-paper-warm, var(--kleur-grond)); } /* ========================================================================== * 6. Eén knopsysteem, één icoonset. * * Wat hier stond waren vier knopstijlen die niets van elkaar wisten: `.btn` met * een terracotta verloop, `.chip-dark` zwart, `.chip-blue` blauw en `.chip` * zonder eigen kleur (die kreeg per gebruik een style-attribuut mee). Op de * maakpagina stonden ze alle drie tegelijk, en de blauwe zat op de * belangrijkste actie. Dan is er geen hoofdactie meer, alleen drie knoppen. * * Nu drie rollen en niet meer dan dat: * * .btn primair — terracotta vlak, witte tekst. Eén per weergave. * .btn-ghost secundair — alleen een rand. * .btn-icon een ronde knop voor iets dat geen woorden nodig heeft. * * `.chip`, `.chip-dark` en `.ch` blijven bestaan als naam, maar zijn hieronder * op dit systeem aangesloten. Ze staan nog in de winkelmand, het account en de * productpagina; die templates hoeven daardoor niet in dezelfde beweging om. * * Over de kleur. De opdracht noemt var(--kleur-rood). Wit op dat vlak meet 4,49:1 en * blijft daarmee net onder de 4,5:1 die WCAG AA voor deze tekstgrootte vraagt. * Het staat hier daarom op var(--kleur-rood) (4,74:1) — met het blote oog hetzelfde, * maar wel meetbaar goed. De hover is var(--kleur-rood-hover) zoals gevraagd (5,85:1). * ========================================================================== */ :root{ --knop-vol:var(--kleur-rood); --knop-vol-hover:var(--kleur-rood-hover); --knop-hoogte:50px; --knop-rand:var(--kleur-lijn); } /* De gedeelde vorm. Alles wat een knop is heeft dezelfde hoogte, dezelfde ronding en dezelfde afstand tussen icoon en woord — dat is wat "één systeem" in de praktijk betekent. min-height in plaats van een vaste hoogte, zodat een label dat over twee regels valt de knop niet openbreekt. */ .btn, .chip{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:var(--knop-hoogte);padding:12px 24px;border-radius:var(--r-rond); border:var(--lijn-dikte) solid transparent; font:700 var(--fs-body) var(--cmpl-sans);line-height:1.2;text-align:center; cursor:pointer;position:relative;overflow:hidden; transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .15s ease; } /* Primair. Een vlak, geen verloop: een verloop leest op een knop van vijftig pixels als een lichte vervuiling en maakt de hover-kleur onvoorspelbaar. */ .btn, .chip-dark{ background:var(--knop-vol);background-image:none;color:var(--kleur-grond); box-shadow:none; } .btn:focus-visible, .chip-dark:focus-visible{background:var(--knop-vol-hover);color:var(--kleur-grond);transform:translateY(-1px)} @media (hover: hover) and (pointer: fine){.btn:hover, .chip-dark:hover{background:var(--knop-vol-hover);color:var(--kleur-grond);transform:translateY(-1px)}} /* Secundair. Alleen een rand; de tekst is gewoon de tekstkleur van de site. */ .btn-ghost, .chip:not(.chip-dark){ background:transparent;background-image:none;color:var(--ink); border-color:var(--knop-rand);box-shadow:none; } .btn-ghost:focus-visible, .chip:not(.chip-dark):focus-visible{ background:var(--kleur-grond);border-color:var(--terra);color:var(--ink);transform:translateY(-1px); } @media (hover: hover) and (pointer: fine){.btn-ghost:hover, .chip:not(.chip-dark):hover{ background:var(--kleur-grond);border-color:var(--terra);color:var(--ink);transform:translateY(-1px); }} /* Icoonknop. 44 bij 44 is geen ontwerpkeuze maar de kleinste maat die een duim betrouwbaar raakt; alle ronde knoppen op de site houden zich daaraan. */ .btn-icon, .ch{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;min-width:44px;padding:0;border-radius:50%; border:var(--lijn-dikte) solid var(--line);background:var(--kleur-grond);color:var(--muted);cursor:pointer; transition:border-color .2s, background .2s, color .2s, transform .15s; } .btn-icon:focus-visible, .ch:focus-visible{border-color:var(--terra);background:var(--kleur-grond);color:var(--knop-vol-hover);transform:translateY(-1px)} @media (hover: hover) and (pointer: fine){.btn-icon:hover, .ch:hover{border-color:var(--terra);background:var(--kleur-grond);color:var(--knop-vol-hover);transform:translateY(-1px)}} .btn-icon:disabled,.btn-icon[aria-disabled="true"]{opacity:.4;cursor:default;transform:none} /* Eén zichtbare focusring voor het hele systeem. Zonder dit erft elke knop de ring van de browser, en die verdwijnt op een terracotta vlak. */ .btn:focus-visible,.chip:focus-visible,.btn-icon:focus-visible,.ch:focus-visible, .motief-swatch:focus-visible,.feeling:focus-visible{ outline:2px solid var(--knop-vol-hover);outline-offset:3px; } /* Twee knoppen onder elkaar in een smalle kolom horen even breed te zijn. */ .btn--vol{width:100%} /* De iconen. Ze erven hun kleur van de knop, dus er is nooit een tweede kleurregel nodig; flex:none houdt ze vierkant als het label lang wordt. */ .cmpl-ic{flex:none;display:block} .btn .cmpl-ic,.chip .cmpl-ic{margin-top:-1px} /* De oude tekentjes zijn iconen geworden; wat er nog van over is, is een typografisch hartje in het woordmerk. Dat blijft een letter. */ .btn .hh{font-size:var(--fs-body)} /* --- Het deel-blok ------------------------------------------------------- */ .share-acties{display:flex;flex-direction:column;gap:12px;margin-top:12px} .share-uitleg{margin-top:12px;text-transform:none;letter-spacing:0;font-size:var(--fs-label)} .channels{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap} .share-meer{margin-top:12px} .share-meer summary{cursor:pointer;display:inline-block;list-style:none} .share-meer summary::-webkit-details-marker{display:none} [data-cmpl-share-status]{margin-top:12px;min-height:1.2em;text-transform:none;letter-spacing:0;font-size:var(--fs-label)} /* --- Het cadeau-blok ----------------------------------------------------- Het tastbare pad stond hier als grijs tekstlinkje onder een deel-blok: de enige plek op de site waar iemand net iets gemaakt heeft dat hij mooi vindt, en daar was het het minst zichtbare element van de kolom. Nu een eigen kaart met een eigen knop, in dezelfde warme kleur maar zacht — zichtbaar zonder te duwen. */ .cmpl-cadeau{ margin-top:24px;padding:16px;border-radius:var(--r-vlak); background:var(--kleur-grond);border:var(--lijn-dikte) solid var(--kleur-lijn); display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:start; transition:background .3s ease,border-color .3s ease; } /* Persoonlijk: staat er een naam voor de ontvanger, dan is dit geen zin meer maar een cadeau vóór iemand. Het blok licht zacht op en de uitleg spreekt de naam aan. Terugvallen gebeurt vanzelf als het naamveld weer leeg is. */ .cmpl-cadeau.is-persoonlijk{ background:var(--kleur-grond);border-color:var(--kleur-lijn); box-shadow:none; } .cmpl-cadeau.is-persoonlijk .cmpl-cadeau__uitleg{color:var(--kleur-rood);font-weight:600} /* --- De seizoensband ------------------------------------------------------- Rond een gelegenheid op de homepage, net onder de hero. Rustig, een held per keer, boven de vouw en dus altijd meteen zichtbaar (geen onthul-animatie). */ .cmpl-seizoen{ max-width:1120px;margin:24px auto 0; display:flex;align-items:center;gap:24px;flex-wrap:wrap; padding:24px 24px;border-radius:var(--r-vlak); background:var(--soft);border:var(--lijn-dikte) solid var(--line); box-shadow:none; } .cmpl-seizoen__body{flex:1 1 260px;min-width:0} .cmpl-seizoen__eyebrow{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--kleur-rood);margin:0 0 4px} .cmpl-seizoen__titel{font-size:var(--fs-kop);line-height:1.2;color:var(--kleur-ink);margin:0 0 4px} .cmpl-seizoen__sub{color:var(--kleur-ink);font-size:var(--fs-body);margin:0} .cmpl-seizoen__side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:300px} .cmpl-seizoen__deadline{margin:0;font-size:var(--fs-label);line-height:1.4;color:var(--muted);text-align:right} .cmpl-seizoen__deadline b{color:var(--kleur-ink);font-weight:600} @media(max-width:640px){ .cmpl-seizoen__side{flex:1 1 100%;align-items:center;max-width:none} .cmpl-seizoen__knop{width:100%} .cmpl-seizoen__deadline{text-align:center} } .cmpl-cadeau__ic{grid-row:1;grid-column:1;color:var(--knop-vol-hover);display:flex;padding-top:4px} .cmpl-cadeau__tekst{grid-row:1;grid-column:2} .cmpl-cadeau__titel{font-size:var(--fs-lead);line-height:1.2;color:var(--ink)} .cmpl-cadeau__uitleg{color:var(--kleur-soft);font-size:var(--fs-label);margin-top:4px} .cmpl-cadeau__knop{grid-column:1 / -1;width:100%;margin-top:12px} .cmpl-cadeau__vrij{grid-column:1 / -1;color:var(--kleur-soft);font-size:var(--fs-label);margin-top:8px;text-align:center} /* --- De tekeningkiezer ---------------------------------------------------- */ .cmpl-tekening{margin-bottom:16px} .cmpl-tekening__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .cmpl-tekening__kop .style-picker__label{margin-bottom:0} .cmpl-tekening__blader{display:flex;align-items:center;gap:8px} /* De hit-area blijft 44px ook al is het rondje kleiner: het pseudo-element vangt de aanraking op zonder dat de knop optisch groter wordt. */ .cmpl-tekening__pijl{position:relative;width:38px;height:38px;min-width:38px} .cmpl-tekening__pijl::after{content:'';position:absolute;inset:-3px;border-radius:50%} .cmpl-tekening__teller{ font-size:var(--fs-label);color:var(--muted);min-width:12ch;text-align:center; font-variant-numeric:tabular-nums; } /* De rij tekeningen. Ze stonden op 24 pixels — op die maat is een hond niet van een vos te onderscheiden en was klikken de enige manier om te zien wat je koos. 58 pixels is waar de negen motieven herkenbaar worden. Past de rij niet, dan schuift hij; de chevrons hierboven blijven de manier om er doorheen te gaan zonder te slepen. */ .cmpl-tekening__rij{ display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding:4px 4px 8px; scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin; } .motief-swatch, .cmpl-tekening__duim{ flex:none;width:58px;height:58px;border-radius:var(--r-vlak); border:var(--lijn-dikte) solid var(--line);background:#faf6f1;overflow:hidden;padding:4px;cursor:pointer; transition:border-color .2s, transform .15s; } .motief-swatch img{width:100%;height:100%;object-fit:contain;display:block} @media (hover: hover) and (pointer: fine){.motief-swatch:hover{border-color:var(--terra);transform:translateY(-1px)}} /* De actieve krijgt een terracotta ring, geen outline: een outline valt buiten de scrollrand weg zodra de rij schuift. */ .motief-swatch.is-active{outline:none;border-color:var(--knop-vol);box-shadow:none} /* Het achtergrondpaneel. Maten uit het InContext-ontwerp: raster van vier met een gat van 11, hoekje 12, haarlijn eromheen, en de groepskop klein in hoofdletters. De gekozen kleur krijgt een koraal randje met een ring, zodat je hem ook ziet als de kleur zelf bijna wit is. */ .cmpl-acht{margin-bottom:16px} .cmpl-acht__kop{margin-bottom:12px} .cmpl-acht__titel{margin:0;font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em} .cmpl-acht__sub{margin:4px 0 0;font-size:var(--fs-label);color:var(--ink-2,var(--kleur-soft))} .cmpl-acht__groep{margin-bottom:24px} .cmpl-acht__groepkop{ display:block;margin-bottom:12px;font-size:var(--fs-label);font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2,var(--kleur-soft)); } .cmpl-acht__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:100%} .cmpl-kleur__knop{ position:relative;width:100%;aspect-ratio:1;padding:0;border-radius:var(--r-vlak);cursor:pointer; border:var(--lijn-dikte) solid var(--line,var(--kleur-lijn));background:none;line-height:0; transition:border-color .2s; } .cmpl-kleur__vlak{display:block;width:100%;height:100%;border-radius:var(--r-vlak)} @media (hover: hover) and (pointer: fine){.cmpl-kleur__knop:hover{border-color:var(--terra)}} .cmpl-kleur__knop.is-actief{border:var(--lijn-dikte) solid var(--knop-vol);box-shadow:none} .cmpl-kleur__knop:focus-visible{outline:2px solid var(--knop-vol);outline-offset:2px} .cmpl-kleur__dekking{display:flex;align-items:center;gap:12px;margin-top:12px;max-width:100%} .cmpl-kleur__dekking[hidden]{display:none} .cmpl-kleur__label{flex:none;font-size:var(--fs-label);color:var(--ink-2,var(--kleur-soft))} .cmpl-kleur__schuif{flex:1;min-width:0;accent-color:var(--knop-vol)} .cmpl-kleur__uit{flex:none;width:74px;text-align:right;font-size:var(--fs-label);color:var(--ink-2,var(--kleur-soft))} /* De sfeertegels staan op 3:4, de verhouding van een canvas, zodat je ziet hoe het verloop over een staand vlak valt. Drie op een rij: meer wordt een catalogus, en er zijn er ook maar drie. */ .cmpl-acht__sferen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:100%} .cmpl-sfeer__knop{ position:relative;width:100%;aspect-ratio:3/4;padding:0;border-radius:var(--r-vlak);cursor:pointer; border:var(--lijn-dikte) solid var(--line,var(--kleur-lijn));background:none;line-height:0; transition:border-color .2s; } .cmpl-sfeer__vlak{display:block;width:100%;height:100%;border-radius:var(--r-vlak)} @media (hover: hover) and (pointer: fine){.cmpl-sfeer__knop:hover{border-color:var(--terra)}} .cmpl-sfeer__knop.is-actief{border:var(--lijn-dikte) solid var(--knop-vol);box-shadow:none} .cmpl-sfeer__knop:focus-visible{outline:2px solid var(--knop-vol);outline-offset:2px} /* De fotoknop: volle breedte met een streepjesrand, zodat hij leest als een plek waar iets bij mag in plaats van als een gewone knop. */ .cmpl-acht__fotoknop{ display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 12px; border:var(--lijn-dikte) dashed var(--line,var(--kleur-lijn));border-radius:var(--r-vlak);background:var(--kleur-grond);cursor:pointer; transition:border-color .2s; } @media (hover: hover) and (pointer: fine){.cmpl-acht__fotoknop:hover{border-color:var(--knop-vol)}} .cmpl-acht__fotoknop:focus-within{outline:2px solid var(--knop-vol);outline-offset:2px} .cmpl-acht__fotoic{ flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px; border-radius:var(--r-vlak);background:var(--zacht,var(--kleur-grond));color:var(--ink-2,var(--kleur-soft)); } .cmpl-acht__fotolabel{font-size:var(--fs-label);font-weight:600} .cmpl-acht__uitleg{margin:8px 0 0;font-size:var(--fs-label);color:var(--ink-2,var(--kleur-soft))} .cmpl-acht__uitleg.is-waarschuwing{color:var(--knop-vol)} /* De doorverwijzing onder de compacte maker op de homepage was hier een tekstlink (.maak-verder). Hij is een brede rij geworden en woont nu in assets/css/maak.css als .maak-deur; zie cmpl_editor_link() in functions.php. */ .cmpl-acht__meer{ display:inline-block;min-height:44px;margin-right:12px;padding:12px 0; font-size:var(--fs-label);font-weight:600;color:var(--knop-vol-hover,var(--kleur-rood)); text-decoration:underline;text-underline-offset:3px; } .cmpl-acht__weg{ display:inline-block;min-height:44px;padding:12px 0;border:0;background:none;cursor:pointer; font-size:var(--fs-label);font-weight:500;color:var(--knop-vol-hover,var(--kleur-rood)); text-decoration:underline;text-underline-offset:3px; } .cmpl-acht__weg[hidden]{display:none} @media (prefers-reduced-motion: reduce){ .cmpl-tekening__rij{scroll-behavior:auto} .btn,.chip,.btn-icon,.ch,.motief-swatch,.cmpl-kleur__knop{transition:none} @media (hover: hover) and (pointer: fine){.btn:hover,.chip:hover,.btn-icon:hover,.ch:hover,.motief-swatch:hover,.cmpl-kleur__knop:hover{transform:none}} } /* De pijlen op de voorbeeldkaart. Ze worden door generator.js gemaakt en staan er alleen als er echt meer dan één tekening is. De kaart krijgt dan ruimte aan de zijkanten, zodat een pijl nooit over het compliment heen valt. */ .preview-art.has-blader{padding-left:64px;padding-right:64px} .cmpl-tekening__kaartpijl{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:40px;height:40px;border-radius:50%; border:var(--lijn-dikte) solid var(--line);background:rgba(255,255,255,.92);color:var(--muted); display:inline-flex;align-items:center;justify-content:center;cursor:pointer; transition:background .2s, border-color .2s, color .2s; } .cmpl-tekening__kaartpijl::after{content:'';position:absolute;inset:-2px;border-radius:50%} .cmpl-tekening__kaartpijl:focus-visible{ background:var(--kleur-grond);border-color:var(--terra);color:var(--knop-vol-hover); } @media (hover: hover) and (pointer: fine){.cmpl-tekening__kaartpijl:hover{ background:var(--kleur-grond);border-color:var(--terra);color:var(--knop-vol-hover); }} .cmpl-tekening__kaartpijl:focus-visible{outline:2px solid var(--knop-vol-hover);outline-offset:2px} .cmpl-tekening__kaartpijl--vorige{left:8px} .cmpl-tekening__kaartpijl--volgende{right:8px} @media (max-width:720px){ .preview-art.has-blader{padding-left:48px;padding-right:48px} .cmpl-tekening__kaartpijl{width:36px;height:36px} .cmpl-tekening__kaartpijl--vorige{left:5px} .cmpl-tekening__kaartpijl--volgende{right:5px} .cmpl-tekening__teller{min-width:0} } /* Kleine chip. Stond in het account als een style-attribuut per knop (font-size + padding + kleur). De kleur hoort in het systeem, de maat mag een variant zijn — maar dan één keer opgeschreven en niet vier keer. */ .chip--klein{min-height:38px;padding:8px 16px;font:600 var(--fs-label) var(--cmpl-sans)} /* Een keuzetegel is geen actieknop. Hij toont wát je gekozen hebt, en dat mag je zien zonder dat het de hoofdactie beconcurreert. Eerst was de gekozen tegel vol terracotta. Precies zo ziet "Maak mijn compliment" er ook uit, en die staat er pal onder: twee gelijke vlakken, en dan is niet te zien welke de actie is. Nu is de gekozen tegel een duidelijk geselecteerd vlak: zacht terracotta, een rand in de merkkleur en terracotta tekst. Zo blijft de volle vulling voorbehouden aan de enige primaire knop. Terracotta-tekst op het zachte vlak meet 5,8:1 — ruim boven AA. Dezelfde regel als .feeling, zodat de homepage en de maakpagina hetzelfde gebaar hebben. */ .chip.choice-tile{font-weight:600;padding:12px 24px;min-height:44px} .chip.choice-tile.is-active{ background:var(--kleur-grond);color:var(--knop-vol-hover);border-color:var(--knop-vol); box-shadow:none; } @media (hover: hover) and (pointer: fine){.chip.choice-tile.is-active:hover{background:var(--kleur-grond);color:var(--knop-vol-hover)}} /* Hetzelfde geselecteerde vlak voor de gevoel-chips op de maakpagina. */ .feeling{min-height:44px} .feeling.is-active{background:var(--kleur-grond);background-image:none;color:var(--knop-vol-hover);border-color:var(--knop-vol)} @media (hover: hover) and (pointer: fine){.feeling.is-active:hover{background:var(--kleur-grond);color:var(--knop-vol-hover)}} .feeling .ic{display:inline-flex;color:var(--knop-vol-hover)} .feeling.is-active .ic{color:var(--knop-vol-hover)} /* De kaarticoontjes op de homepage stonden op font-size:var(--fs-kop); een SVG trekt zich daar niets van aan, dus die maat staat nu op het icoon zelf. Deze regel houdt hem alleen op zijn plek. */ .card .ic,.step .ic{display:inline-flex;justify-content:center;color:var(--terra)} /* --- Twee dingen die de test op 390px vond -------------------------------- */ /* * 1. De voorbeeldkaart brak de pagina open op een telefoon. * * `.preview` klapt onder 820px terug naar één kolom, maar een rasterkind heeft * `min-width:auto` en kan dus niet smaller worden dan zijn inhoud. De tekening * in de kaart is 1000 pixels breed en `width:100%` lost dat niet op — de * intrinsieke breedte telt nog steeds mee. Gevolg: op 390px was de pagina 680px * breed en kon je hem opzij schuiven. Deze twee regels laten het raster zijn * werk doen. * * Dit stond er al voordat er iets aan de knoppen veranderde; de bladerpijlen op * de kaart maakten het alleen zichtbaarder. */ .preview > *{min-width:0} #cmpl-preview.has-motief [data-cmpl-motief-beeld]{max-width:100%} /* * 2. De bladerpijlen bij de teller waren 38 bij 38. * * Er zat een onzichtbare rand van 3px omheen die de aanraakzone op 44 bracht, * maar dat is een truc die je niet ziet en die bij de eerstvolgende wijziging * sneuvelt. Nu gewoon 44 bij 44, zoals elke andere ronde knop op de site. */ .cmpl-tekening__pijl{width:44px;height:44px;min-width:44px} .cmpl-tekening__pijl::after{content:none} /* * De duimenrij schoof de pagina open op een telefoon, en niet door de * tekeningen. * * De rij heeft `overflow-x:auto` en klapt de negen tekeningen netjes weg. Maar * in elke knop zit ook een `.screen-reader-text` — het label dat een * schermlezer voorleest — en dat staat op `position:absolute`. Een absoluut * geplaatst element wordt niet geknipt door de `overflow` van een ouder die * zelf niet gepositioneerd is; het zoekt de dichtstbijzijnde ouder mét een * positie, en dat was hier de pagina. Zo stak een onzichtbare span van één * pixel op x=590 buiten het scherm en werd de hele pagina 647 breed. * * `position:relative` op de knop maakt hem de ankerpunt van zijn eigen inhoud, * en dan valt het label netjes binnen. Geen `overflow-x:hidden` op de body: * dat verbergt het probleem en breekt `position:sticky` verderop. */ .motief-swatch{position:relative} /* Het cadeau-blok als één kolom. Het stond op een raster met het icoon in een eigen kolom; op een telefoon hield de tekst dan 250 pixels over en viel de titel over twee regels met één woord op de tweede. Het icoon hoort bij de titel, dus het staat er nu in. */ .cmpl-cadeau{display:block} .cmpl-cadeau__titel{display:flex;align-items:center;gap:12px} .cmpl-cadeau__ic{flex:none;color:var(--knop-vol-hover);display:flex} .cmpl-cadeau__uitleg{margin-top:8px} .cmpl-cadeau__knop{width:100%;margin-top:12px} .cmpl-cadeau__vrij{margin-top:8px;text-align:center} /* * Op een telefoon was de deel-kolom 214 pixels breed. * * Niet door één regel, maar door drie die op elkaar stapelen: `.wrap` neemt 28 * pixels aan elke kant, `.maak-studio` nog eens 32 en `.preview` daarbinnen 26. * Van de 390 blijft dan 218 over voor de knoppen. "Bekijk de cadeaus" viel * daardoor over twee regels en de duimenrij liet nog drie tekeningen zien. * * Op een klein scherm mag die lucht weg: de kaart is dan tóch de hele pagina en * hoeft niet nog eens als kaart in een kaart te worden aangekondigd. Op een * breed scherm verandert er niets. */ @media (max-width: 600px) { .maak-studio { padding: 24px 16px; } .preview { padding: 16px; } .btn, .chip { padding-left: 16px; padding-right: 16px; } .cmpl-cadeau { padding: 16px 12px; } } /* --- Het voorbeeldblok op de productpagina -------------------------------- Eén kop, één beeld, één regel, één knop. De kleuren komen uit de merkvariabelen hierboven; er staat hier met opzet geen enkele losse kleurwaarde. */ .cmpl-voorbeeldblok__kop{font-size:var(--h2);margin:8px 0 0;max-width:26ch} .cmpl-voorbeeldblok__kaart{margin-top:16px} .cmpl-voorbeeldblok__uitleg{color:var(--ink);font-size:var(--fs-body);margin:0} .cmpl-voorbeeldblok__noot{color:var(--muted);font-size:var(--fs-label);margin-top:8px} .cmpl-voorbeeldblok__actie{margin-top:16px} .cmpl-voorbeeldblok__actie .btn{width:100%;justify-content:center} /* De previewkaart draagt het beeld en hoeft er zelf geen te maken: zonder deze regel valt de warme papierkleur van .preview-art achter een mockup met eigen achtergrond, en zie je een randje papier om de scène heen. */ .cmpl-voorbeeldblok .preview-art{padding:0;border:none;background:transparent;overflow:visible} .cmpl-voorbeeldblok .preview-art .cmpl-product-preview{width:100%} @media (max-width:820px){ .cmpl-voorbeeldblok__kop{max-width:none} .cmpl-voorbeeldblok__actie .btn{width:100%} } /* Het beeld hoeft de halve pagina niet te vullen. Op 1280 werd de mockup 559 pixels breed en het blok ruim 800 hoog, met een grote lege plek naast de drie regels ernaast. Het gaat hier om laten zien hoe het eruitziet, niet om het product zo groot mogelijk maken; bovenaan de pagina staat de echte productfoto al. 440 pixels haalt er honderdtwintig hoogte af en houdt de kaart in verhouding. */ .cmpl-voorbeeldblok .preview-art{max-width:440px;margin:0 auto} @media (max-width:820px){ .cmpl-voorbeeldblok .preview-art{max-width:none} } /* ========================================================================== * 7. De drie stappen: uitleg, en verder niets. * * Ze stonden hier als `.steps` met echte knoppen erin: stap 1 droeg vijf * gevoel-chips, stap 2 een knop en stap 3 alleen tekst. Drie kolommen van heel * verschillende hoogte, en niet te zien of dit uitleg was of het ding zelf. De * knoppen zijn verhuisd naar `.cmpl-bouwer` hieronder; wat hier staat legt uit. * * Een `

`s: het is een volgorde, en dat mag een * schermlezer ook horen. * ========================================================================== */ .cmpl-stappen{ list-style:none;margin:32px 0 0;padding:0;position:relative; display:grid;grid-template-columns:repeat(3,1fr);gap:24px; } /* De verbindingslijn. Eén lijn over de hele rij, van het midden van de eerste kolom tot het midden van de laatste (vandaar 1/6 aan elke kant), op de hoogte van het midden van de cirkels. De cirkels liggen erbovenop met een eigen achtergrond, zodat de lijn er niet doorheen loopt maar ertussen. Stippels en geen doorgetrokken lijn: dit is een suggestie van volgorde, geen voortgangsbalk. Er valt hier niets af te vinken. */ .cmpl-stappen::before{ content:'';position:absolute;z-index:0; top:23px;left:16.6667%;right:16.6667%; border-top:var(--lijn-dikte) dotted var(--gold);opacity:.75; } .cmpl-stappen__stap{ position:relative;z-index:1;text-align:center; display:flex;flex-direction:column;align-items:center; } .cmpl-stappen__nummer{ width:46px;height:46px;border-radius:50%; border:var(--lijn-dikte) solid var(--knop-vol);color:var(--knop-vol-hover); background:var(--cream); display:inline-flex;align-items:center;justify-content:center; font:600 var(--fs-body) var(--cmpl-sans); } .cmpl-stappen__icoon{display:flex;color:var(--knop-vol-hover);margin-top:12px} .cmpl-stappen__titel{font-size:var(--fs-lead);margin-top:8px} /* De regel eronder houdt zijn breedte, zodat de drie kolommen even hoog blijven ook als de ene zin een woord langer is dan de andere. */ .cmpl-stappen__regel{ color:var(--muted);font-size:var(--fs-body);margin-top:8px; max-width:24ch; } /* --- De knop onder de uitleg -------------------------------------------- */ .cmpl-stappen__actie{margin-top:32px;text-align:center} .cmpl-stappen__vrij{ margin-top:12px;color:var(--muted);font-size:var(--fs-label); } /* --- De bouwer ----------------------------------------------------------- */ .cmpl-bouwer{margin-top:48px;text-align:center} /* De focusring op de bouwer zelf hoort weg: hij krijgt focus omdat de knop hierboven ernaartoe springt, niet omdat je hem aanklikt. De inhoud eronder toont waar je bent. */ .cmpl-bouwer:focus{outline:none} .cmpl-bouwer__label{display:block;margin-bottom:12px} .cmpl-bouwer__gevoelens{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .cmpl-bouwer__knop{margin-top:24px} @media (max-width:820px){ /* De lijn weg: gestapeld zou hij dwars door de kolom lopen in plaats van ertussen. De nummers doen het werk dan zelf. */ .cmpl-stappen{grid-template-columns:1fr;gap:32px;margin-top:32px} .cmpl-stappen::before{content:none} .cmpl-stappen__regel{max-width:32ch} .cmpl-stappen__actie .btn{width:100%} } /* De regel onder de titel liet één woord alleen achter: "Voor wie of welk moment het" / "is." Met `balance` verdeelt de browser de regels zelf en valt dat weesje weg. Kan hij het niet, dan gebeurt er niets ergs: dan breekt hij zoals hij altijd deed. */ .cmpl-stappen__regel{max-width:26ch;text-wrap:balance} /* De bouwer wordt een kaart, net als `.maak-studio` op de maakpagina. Zonder die kaart stonden er twee terracotta knoppen vlak onder elkaar — de knop van de uitleg en die van de bouwer — en las het als één blok met twee keer dezelfde vraag. Nu is het zichtbaar: hierboven staat de uitleg, hier begint het ding zelf. De voorbeeldkaart erbinnen laat zijn eigen rand los. Twee witte kaders om hetzelfde wit is een lijn zonder werk. */ .cmpl-bouwer{ background:var(--white);border:var(--lijn-dikte) solid var(--line);border-radius:var(--r-vlak); padding:32px 24px;max-width:940px;margin:48px auto 0; } .cmpl-bouwer .preview{ border:none;box-shadow:none;background:transparent; padding:0;margin:24px auto 0;max-width:none; /* Bovenaan uitlijnen, niet centreren. Gecentreerd zweefde de kortere voorbeeldkaart tegen de langere zijkolom en viel er boven en onder een leeg gat. */ align-items:start; } /* De tekeningkiezer onder het voorbeeld, in de linkerkolom. * * De kiezer is in het template uit de zijkolom gehaald en staat nu als los * kind in `.preview`, tussen het voorbeeld en de zijkolom. Op desktop leggen * we hem met grid links onder de kaart: rij 1 het voorbeeld, rij 2 de * tekeningen, en de zijkolom (naam, delen, cadeau) rechts over beide rijen. * Zo zijn beide kolommen ongeveer even lang. Onder 820px stapelt `.preview` * al tot één kolom en volgt de bronvolgorde vanzelf: voorbeeld, tekeningen, * naam, delen, cadeau. */ /* Dezelfde balans op de maak-pagina (`.maak-studio`), die dezelfde bouwer * gebruikt en hetzelfde gat had. Alleen de uitlijning en de plaatsing van de * tekeningkiezer; de kaart van de maak-studio zelf (rand, wit, padding) blijft * zoals hij is. */ .maak-studio .preview{align-items:start} /* Het krappe tussengebied. * * Twee kolommen werken pas als de kaart bijna op zijn volle breedte (940px) * staat. Daaronder, tot 960px, wordt de rechterkolom met de knoppen * samengeknepen: dat is precies de nauwe, rommelige staat. Daar stapelen we * liever, net als op de telefoon, en houden we de blokken op een prettige * leesbreedte in het midden zodat het voorbeeld niet leeg oogt op een breed * gestapeld vlak. Twee kolommen komen pas terug vanaf 961px. */ @media (max-width:960px){ .cmpl-bouwer .preview, .maak-studio .preview{grid-template-columns:1fr} .cmpl-bouwer .preview > *, .maak-studio .preview > *{max-width:560px;width:100%;margin-left:auto;margin-right:auto} } @media (min-width:961px){ .cmpl-bouwer .preview, .maak-studio .preview{grid-template-rows:auto 1fr} .cmpl-bouwer .preview > .preview-art, .maak-studio .preview > .preview-art{grid-column:1;grid-row:1} .cmpl-bouwer .preview > .style-picker, .maak-studio .preview > .style-picker{grid-column:1;grid-row:2;margin-top:16px} .cmpl-bouwer .preview > .preview-side, .maak-studio .preview > .preview-side{grid-column:2;grid-row:1 / span 2} } @media (max-width:600px){ .cmpl-bouwer{padding:24px 16px;border-radius:var(--r-vlak);margin-top:32px} } /* ========================================================================== * 8. Namen op het compliment. * * Optioneel, en dat moet je kunnen zien. Het blok is daarom rustiger dan alles * eromheen: geen kader met vulling, alleen een haarlijn erboven, en het woord * "optioneel" naast de kop in plaats van een sterretje bij de velden. Wie * doorloopt naar de knop hoeft hier niets mee. * ========================================================================== */ .cmpl-namen{ border-top:var(--lijn-dikte) solid var(--line); padding-top:16px;margin-bottom:16px;text-align:left; } .cmpl-namen__kop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .cmpl-namen__titel{font-size:var(--fs-body);color:var(--ink)} .cmpl-namen__optie{ font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--muted); } .cmpl-namen__velden{display:flex;flex-direction:column;gap:8px;margin-top:12px} .cmpl-namen__veld{display:flex;align-items:center;gap:8px} /* Het label heeft een vaste breedte zodat "Voor" en "Van" onder elkaar uitlijnen en de twee velden even lang zijn. */ .cmpl-namen__label{ flex:none;width:3.2em; font:600 var(--fs-label) var(--cmpl-sans);color:var(--muted); } .cmpl-namen__invoer{ flex:1;min-width:0; border:var(--lijn-dikte) solid var(--line);border-radius:var(--r-vlak); background:var(--white);color:var(--ink); padding:8px 12px;font:400 var(--fs-body) var(--cmpl-sans); min-height:40px; } .cmpl-namen__invoer::placeholder{color:var(--kleur-soft)} .cmpl-namen__invoer:focus{ outline:none;border-color:var(--terra); box-shadow:none; } .cmpl-namen__schakelaar{ display:flex;align-items:center;gap:8px;margin-top:12px; font-size:var(--fs-label);color:var(--ink);cursor:pointer; /* 44px hoog, ook al is het vinkje klein: de hele regel is aanraakbaar. */ min-height:44px; } .cmpl-namen__schakelaar input{ flex:none;width:18px;height:18px;accent-color:var(--knop-vol);cursor:pointer; } /* Zonder ontvanger valt er niets in de tekst te zetten; dat mag je zien. */ .cmpl-namen__schakelaar:has(input:disabled){color:var(--muted);cursor:default} .cmpl-namen__schakelaar input:disabled{cursor:default} .cmpl-namen__hint{color:var(--muted);font-size:var(--fs-label);margin-top:4px} /* --- De naamregels op de voorbeeldkaart ---------------------------------- Ze staan in de kleur van het merkje en niet in die van de tekst, precies zoals de renderer ze op het doek zet: een toewijding is een adressering en geen boodschap. Zou hij even donker zijn als het compliment, dan las je hem eerst, en dan begint een kaart met een naam in plaats van met iets liefs. */ .cmpl-naamregel{ font-family:'Newsreader',serif; color:var(--kleur-soft); text-align:center; line-height:1.3; width:100%; } .cmpl-naamregel--voor{font-size:var(--fs-body);margin-bottom:2%} .cmpl-naamregel--van{font-size:var(--fs-body);margin-top:4%} /* In de kaart mét tekening is het een flexkolom; daarbuiten niet. Beide gevallen moeten kloppen, want de aquarelstijl heeft geen tekening. */ #cmpl-preview:not(.has-motief) .cmpl-naamregel--voor{margin-bottom:12px} #cmpl-preview:not(.has-motief) .cmpl-naamregel--van{margin-top:12px} /* De strook krijgt focus omdat de cadeau-knop ernaartoe springt, niet omdat je hem aanklikt. De inhoud eronder laat zien waar je bent; een ring om een halve pagina zegt niets. */ .cmpl-strook-sectie:focus{outline:none} /* --- Opruiming onder de prijs op de productpagina ------------------------- "Bewaar in mijn account" stond hier als omrande chip, pal naast de cross-sell. Dan lijken het twee gelijkwaardige voorstellen: er iets bij kopen en dit bewaren. Dat zijn ze niet — een account is optioneel en voor later. */ .cmpl-bewaar{margin-top:12px} .cmpl-bewaar__link{ border:none;background:none;padding:0;cursor:pointer; font:400 var(--fs-body) var(--cmpl-sans);color:var(--muted); text-decoration:underline;text-underline-offset:3px; transition:color .2s; /* Klein op het scherm, maar met een aanraakzone die een duim aankan. */ min-height:44px;display:inline-flex;align-items:center; } .cmpl-bewaar__link:focus-visible{color:var(--terra)} @media (hover: hover) and (pointer: fine){.cmpl-bewaar__link:hover{color:var(--terra)}} .cmpl-bewaar__link:focus-visible{outline:2px solid var(--knop-vol-hover);outline-offset:3px;border-radius:var(--r-vlak)} .cmpl-bewaard__melding{margin-top:12px;color:var(--muted);font-size:var(--fs-label)} /* "Andere tekst of tekening?" onder het voorbeeldblok: één bewerkplek, en die staat op de maakpagina. */ .cmpl-voorbeeldblok__anders{margin-top:12px} /* ========================================================================== * 9. De rechterkolom van stap 2: vier blokken, één kolom. * * Ze stonden er als vier losse dingen die toevallig onder elkaar vielen: het * naam-blok met een eigen serif-kopje, de tekeningkiezer met een klein * hoofdletterlabel, het deel-blok met een serif-zin, en het cadeau in een * gekleurd kader. Vier soorten kop in vijftien centimeter. * * Nu vier keer hetzelfde kopje en een haarlijn ertussen. De volgorde volgt wat * je doet: tekening, dan optioneel een naam, dan delen, dan het cadeau. * ========================================================================== */ .cmpl-kolomblok{margin:0} .cmpl-kolomblok + .cmpl-kolomblok{ margin-top:16px;padding-top:16px;border-top:var(--lijn-dikte) solid var(--line); } .cmpl-kolomblok__kop{ font:600 var(--fs-label) var(--cmpl-sans);letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin:0 0 12px; } /* De tekeningkiezer draagt zijn kopje in dezelfde rij als de bladerpijlen, dus daar hoort de onderruimte bij de rij en niet bij de kop. */ .cmpl-tekening .cmpl-kolomblok__kop{margin-bottom:0} /* --- Het naam-blok, ingeklapt -------------------------------------------- */ .cmpl-namen[open]{padding-bottom:4px} .cmpl-namen__knop{ display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none; font:600 var(--fs-body) var(--cmpl-sans);color:var(--ink); /* Een hele regel aanraakbaar, en nooit lager dan een duim. */ min-height:44px; } .cmpl-namen__knop::-webkit-details-marker{display:none} @media (hover: hover) and (pointer: fine){.cmpl-namen__knop:hover{color:var(--knop-vol-hover)}} .cmpl-namen__knop:focus-visible{ outline:2px solid var(--knop-vol-hover);outline-offset:3px;border-radius:var(--r-vlak); } /* Het plusje wordt een minnetje zodra het openstaat: dat is de enige aanwijzing die je nodig hebt, en hij staat waar je hem verwacht. */ .cmpl-namen__plus{ flex:none;width:22px;height:22px;border-radius:50%; border:var(--lijn-dikte) solid var(--knop-vol);color:var(--knop-vol-hover); display:inline-flex;align-items:center;justify-content:center; font:600 var(--fs-body) var(--cmpl-sans);line-height:1; } .cmpl-namen[open] .cmpl-namen__plus{font-size:0} .cmpl-namen[open] .cmpl-namen__plus::after{content:'–';font-size:var(--fs-body)} .cmpl-namen__optie{ margin-left:auto;font:400 var(--fs-label) var(--cmpl-sans); letter-spacing:.08em;text-transform:uppercase;color:var(--muted); } .cmpl-namen__velden{margin-top:12px} /* --- De twee sterke acties ------------------------------------------------ Mylene wil "Deel" en "Bekijk de cadeaus" allebei sterk. Dat mag, maar niet als twee identieke terracotta knoppen pal onder elkaar: dan lezen ze als dezelfde vraag die twee keer gesteld wordt. Ze staan nu in hun eigen blok, met een kop en een haarlijn ertussen, en de tweede is inktkleur binnen het zachte terracotta kader. Even zwaar, herkenbaar anders. Wit op var(--kleur-ink) meet 15,8:1; ruim boven AA. */ .cmpl-cadeau__knop.btn{ background:var(--ink);color:var(--kleur-grond); box-shadow:none; } .cmpl-cadeau__knop.btn:focus-visible{background:var(--kleur-ink);color:var(--kleur-grond)} @media (hover: hover) and (pointer: fine){.cmpl-cadeau__knop.btn:hover{background:var(--kleur-ink);color:var(--kleur-grond)}} @media (prefers-reduced-motion: reduce){ .cmpl-namen__knop{transition:none} } /* ========================================================================== * 10. De rechterkolom, bijgetrokken naar de mockup. * * De opbouw klopte al — tekening, optioneel naam, delen, cadeau, met gelijke * kopjes en haarlijnen — maar drie dingen zagen er anders uit dan getekend. * ========================================================================== */ /* 1. De cadeau-knop: terracotta rand in plaats van een inktvlak. * * Ik had hem donker gemaakt omdat de opdrachttekst "allebei even sterk" zei en * inkt als mogelijkheid noemde. De mockup zegt iets anders, en legt uit waarom: * "één primaire knop (Deel), cadeau nadrukkelijk maar secundair (terracotta * rand)". Twee vlakken onder elkaar vechten nu eenmaal, hoe je ze ook kleurt. * * Nadrukkelijk blijft hij: dezelfde hoogte, dezelfde volle breedte, en een rand * in de merkkleur binnen het zachte kader. Terracotta op het cadeaupapier meet * 5,28:1 — ruim boven AA. */ .cmpl-cadeau__knop.btn{ background:transparent; color:var(--knop-vol-hover); border:var(--lijn-dikte) solid var(--knop-vol); box-shadow:none; } .cmpl-cadeau__knop.btn:focus-visible{ background:var(--knop-vol); color:var(--kleur-grond); border-color:var(--knop-vol); } @media (hover: hover) and (pointer: fine){.cmpl-cadeau__knop.btn:hover{ background:var(--knop-vol); color:var(--kleur-grond); border-color:var(--knop-vol); }} /* 2. De naam-regel: een uitnodigend vak, geen kale regel. * * In de mockup is dit een blokje met een gestippelde rand en terracotta tekst; * dat leest als "hier valt iets open te klappen". Mijn versie was een gewone * regel met een rondje ervoor, en die verdween tussen de kopjes. */ .cmpl-namen__knop{ background:var(--soft); border:var(--lijn-dikte) dashed var(--kleur-lijn); border-radius:var(--r-vlak); padding:12px 12px; color:var(--knop-vol-hover); gap:8px; } @media (hover: hover) and (pointer: fine){.cmpl-namen__knop:hover{ background:var(--kleur-grond); border-color:var(--knop-vol); color:var(--knop-vol-hover); }} .cmpl-namen[open] .cmpl-namen__knop{ border-style:solid; border-color:var(--line); background:transparent; } /* Het plusje erft nu de kleur van de regel; een eigen rondje eromheen is er één vorm te veel naast de gestippelde rand. */ .cmpl-namen__plus{ border:none;width:auto;height:auto;font-size:var(--fs-lead);color:inherit; } .cmpl-namen[open] .cmpl-namen__plus{font-size:0} .cmpl-namen[open] .cmpl-namen__plus::after{content:'–';font-size:var(--fs-lead)} /* 3. De tekeningrij: duimpjes links, bladeren rechts, op één regel. * * Het kopje staat nu op zijn eigen regel, net als de andere drie, en daaronder * staan de tekeningen en de chevrons naast elkaar. Zo hoort de teller bij de * rij waar hij over gaat, en niet bij het kopje. */ /* De mockup zet de duimpjes en het bladeren naast elkaar. Dat past daar in een paneel van 440 pixels; onze kolom is er 278 en dan houden de chevrons 198 over en de tekeningen 68 — één duimpje. Gemeten, niet geschat. Dus gestapeld, met de volgorde van de mockup: kopje, tekeningen, bladeren. De duimpjes blijven 58 pixels; kleiner maken zou de lijntekeningen weer onherkenbaar maken, en dat was nu juist de reden dat ze zo groot staan. */ .cmpl-tekening__kop{display:block} .cmpl-tekening__kop .cmpl-tekening__rij{margin-top:0} .cmpl-tekening__blader{display:flex;justify-content:flex-end;margin-top:12px} @media (max-width:600px){ /* Op een smal scherm past het niet naast elkaar zonder dat de duimpjes tot drie stuks krimpen. Dan liever onder elkaar, met het bladeren eronder. */ .cmpl-tekening__kop{flex-wrap:wrap} .cmpl-tekening__blader{margin-left:0} } /* ========================================================================== * 11. Landingspagina's per ontvanger of moment (template-landing.php). * * Eigen, rustige opmaak die de bestaande tokens en fonts gebruikt. Alles onder * .cmpl-landing zodat het niets anders raakt. De productstrook en de knoppen * lenen de bestaande klassen (.products, .pcard, .btn), dus die blijven vanzelf * on-brand. * ========================================================================== */ .cmpl-landing__hero{ display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center; } @media (max-width:820px){ .cmpl-landing__hero{grid-template-columns:1fr;gap:32px} } .cmpl-landing__titel{ font-size:var(--fs-titel);line-height:1.1;margin:0 0 12px;color:var(--ink); } .cmpl-landing__accent{color:var(--terra);font-style:italic} .cmpl-landing__hero .lead{max-width:30rem;margin:0 0 24px} .cmpl-landing__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center} /* Onder 390 px stapt het hartje uit de knop. De knoptekst van een landingspagina is de langste van de site ("Maak een verjaardagscompliment", dertig tekens). Met het hartje erbij paste die op een smalle telefoon net niet en brak hij over twee regels. Gemeten op 6 september 2026, met het icoon, over zeven breedtes: 360 en 375 breken, 380 breekt (61 px hoog), 385 breekt, en pas vanaf 389 staat hij op één regel. De opdracht noemde 380 als grens, maar dat is te laag gegokt: tussen 380 en 388 brak hij nog steeds. De grens ligt daarom op 390, en dat is meteen de breedte waarop de doorloop en het controlescript de telefoon meten, dus er komt geen nieuw getal bij. Het hartje is versiering en draagt `aria-hidden`, dus weglaten kost niets. De tekst inkorten zou de belofte veranderen en dat is geen CSS-besluit. Er staan twee van deze knoppen op elke landingspagina, en de tweede zit niet in `.cmpl-landing` maar in het slotblok. Vandaar de klasse van het sjabloon als ingang, en niet die van de sectie. */ @media (max-width:389px){ .page-template-template-landing .btn > svg{ display:none; } } .cmpl-landing__vrij{font-size:var(--fs-label);color:var(--muted);margin-top:12px} .cmpl-landing__beeld{display:flex;justify-content:center} .cmpl-landing__tegel{ max-width:420px;width:100%;border-radius:var(--r-vlak);padding:32px 32px;text-align:center; box-shadow:none; } .cmpl-landing__tegel .q{ font-family:'Newsreader',serif;font-size:var(--fs-kop);line-height:1.25;color:var(--ink); } /* Alleen nog de plaatsing. Letter, gewicht, kleur en het hartje komen uit .cmpl-logo. Dit stond op var(--gold), en --gold is sinds de systeemlaag een alias van var(--kleur-lijn): het woordmerk stond dus in de kleur van een scheidingslijn op wit, contrast 1,26 op 1. */ .cmpl-landing__merk{margin-top:16px} .cmpl-landing__intro .lead{max-width:40rem;margin:12px auto 0} .cmpl-landing__vbwrap .cmpl-landing__sub{ text-align:center;color:var(--muted);font-size:var(--fs-body);margin:8px auto 24px;max-width:34rem; } .cmpl-landing__vbs{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto; } @media (max-width:760px){.cmpl-landing__vbs{grid-template-columns:1fr}} .cmpl-landing__vb{ background:var(--white);border:var(--lijn-dikte) solid var(--line);border-radius:var(--r-vlak);padding:24px 24px; font-family:'Newsreader',serif;font-size:var(--fs-lead);line-height:1.4;color:var(--ink);margin:0; } .cmpl-landing__hart{color:var(--terra)} .cmpl-landing__midcta{text-align:center;margin-top:24px} .cmpl-landing__faqwrap .center{text-align:center;margin-bottom:24px} /* Alleen de plaatsing; de accordeon staat bij .cmpl-faq in systeem.css. */ .cmpl-landing__faq{max-width:760px;margin:0 auto} .cmpl-landing__slot .lead{margin:8px auto 0} /* ========================================================================== WooCommerce-chrome in de huisstijl: meldingen, knoppen en paginering. WooCommerce zet hier standaard grijze balken en systeemknoppen neer die buiten de huisstijl vallen (toegevoegd/verwijderd-melding, winkelwagen leeg, Terug naar winkel, de paginering onder de producten). Hieronder krijgen ze de rustige vorm van de rest van de site. ========================================================================== */ /* Meldingen (succes, info, fout). De accentrand links doet het werk; de standaard grijze balk en het systeemicoon gaan eraf. */ .woocommerce-notices-wrapper:empty{margin:0} .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-message, .woocommerce-info, .woocommerce-error{ display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px; background:var(--soft); border:var(--lijn-dikte) solid var(--line); border-left:var(--lijn-dikte) solid var(--knop-vol); border-radius:var(--r-vlak); padding:16px 24px; margin:0 0 24px; color:var(--ink); font:500 var(--fs-body) var(--cmpl-sans);line-height:1.5; list-style:none; box-shadow:none; } .woocommerce .woocommerce-info, .woocommerce-info{border-left-color:var(--gold)} .woocommerce .woocommerce-error, .woocommerce-error{border-left-color:var(--kleur-rood);color:var(--ink)} .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{display:none} /* Standaardknoppen: ghost-pil in de huisstijl. De echte koopknop is in het template al .btn, die raken we hier niet. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button{ display:inline-flex;align-items:center;justify-content:center; background:transparent;color:var(--knop-vol-hover); border:var(--lijn-dikte) solid var(--knop-rand);border-radius:var(--r-rond); padding:12px 24px;min-height:0; font:600 var(--fs-body) var(--cmpl-sans);line-height:1.2;letter-spacing:0; text-decoration:none;text-shadow:none;box-shadow:none;cursor:pointer; transition:background .18s,border-color .18s,color .18s,transform .15s; } .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible{ background:var(--kleur-grond);border-color:var(--terra);color:var(--knop-vol-hover); transform:translateY(-1px); } @media (hover: hover) and (pointer: fine){.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .button:hover{ background:var(--kleur-grond);border-color:var(--terra);color:var(--knop-vol-hover); transform:translateY(-1px); }} /* Knop binnen een melding rechts uitlijnen. */ .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button{margin-left:auto} /* Primaire acties (Terug naar winkel, Naar afrekenen, .alt) gevuld terracotta. */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce a.button.wc-backward, .woocommerce .return-to-shop .button, .woocommerce .checkout-button{ background:var(--knop-vol);border-color:var(--knop-vol);color:var(--kleur-grond); } @media (hover: hover) and (pointer: fine){.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce a.button.wc-backward:hover, .woocommerce .return-to-shop .button:hover, .woocommerce .checkout-button:hover{ background:var(--knop-vol-hover);border-color:var(--knop-vol-hover);color:var(--kleur-grond); }} .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce input.button:focus-visible{ outline:2px solid var(--knop-vol-hover);outline-offset:3px; } /* Paginering onder de producten: ronde pillen in plaats van de kale vakjes. */ .woocommerce nav.woocommerce-pagination{margin:32px 0 8px;text-align:center} .woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li{ border:0;margin:0;padding:0;list-style:none;background:transparent; } .woocommerce nav.woocommerce-pagination ul{display:inline-flex;gap:8px} .woocommerce nav.woocommerce-pagination ul li a.page-numbers, .woocommerce nav.woocommerce-pagination ul li span.page-numbers{ display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 12px;margin:0; border:var(--lijn-dikte) solid var(--knop-rand);border-radius:var(--r-rond); background:transparent;color:var(--ink); font:600 var(--fs-body) var(--cmpl-sans);line-height:1; transition:background .18s,border-color .18s,color .18s; } @media (hover: hover) and (pointer: fine){.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover{ background:var(--kleur-grond);border-color:var(--terra);color:var(--knop-vol-hover); }} .woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--knop-vol);border-color:var(--knop-vol);color:var(--kleur-grond); } /* * Tekst die alleen een schermlezer hoort. * * De klasse werd al gebruikt (in de duimenrij van de maker, en sinds 29 aug 2026 * voor de kop boven het vertrouwensblok op de homepage) maar was nergens in dit * thema gedefinieerd; hij kwam van de stylesheet van een plugin. Zodra die niet * laadt, staat er ineens zichtbare tekst op de pagina. Daarom staat hij hier. */ .screen-reader-text{ position:absolute; width:1px;height:1px; margin:-1px;padding:0;border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap; } /* * De zoekresultaten. * * Zoeken was tot 30 augustus 2026 omgeleid naar de winkel, dus deze template * werd nooit getoond en had alleen inline stijlen. Nu hij bereikbaar is staat de * opmaak hier, in dezelfde kaartvorm als de rest van de site. * * Twee groepen: de cadeaus bovenaan met een beeld en een prijs, daaronder de * artikelen en pagina's met een samenvatting. Zie cmpl_zoeken_volgorde() in * inc/omleidingen.php voor de volgorde. */ .cmpl-zoekresultaten{ max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:12px; } .cmpl-zoekgroep{ font-size:var(--fs-label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:12px 0 0; } .cmpl-zoekgroep:first-child{margin-top:0} .cmpl-zoekhit{ background:var(--white); border:var(--lijn-dikte) solid var(--line); border-radius:var(--r-vlak); padding:16px 16px; } /* Met beeld wordt het een rij; zonder blijft het precies wat het was. */ .cmpl-zoekhit.heeft-beeld{ display:flex; align-items:center; gap:16px; } .cmpl-zoekhit__beeld{ flex:0 0 72px; width:72px; height:72px; border-radius:var(--r-vlak); overflow:hidden; background:var(--soft); display:block; } .cmpl-zoekhit__beeld img{width:100%;height:100%;object-fit:cover;display:block} .cmpl-zoekhit__tekst{min-width:0} .cmpl-zoekhit__titel{font-size:var(--fs-lead);margin:0 0 4px} .cmpl-zoekhit__uitleg{margin:0;color:var(--muted)} .cmpl-zoekhit__prijs{margin:0;color:var(--ink);font-weight:600} .cmpl-zoekhit__prijs del{color:var(--muted);font-weight:400;margin-right:8px} @media (max-width:520px){ .cmpl-zoekhit__beeld{flex-basis:56px;width:56px;height:56px} } /* ========================================================================== Het inklapmenu op smalle schermen. Onder 820 px stond `nav{display:none}` uit het design lab, zonder iets ervoor in de plaats: op een telefoon was er geen weg naar Cadeaus, Inspiratie of Voor teams. Die regel blijft staan — hij is de basis — en hieronder krijgt de nav een tweede leven als paneel onder de balk, met een knop ervoor. De knop is er alleen op smal. Op een breed scherm is de nav gewoon de balk en zou een knop een tweede manier zijn om hetzelfde te doen. ========================================================================== */ .cmpl-menuknop{ display:none; align-items:center; justify-content:center; /* Vierenveertig, de bodem uit het ontwerpsysteem. flex:none omdat de knop in de kopbalk anders meekrimpt met de ruimte die het logo overlaat; in de etalage kwam hij daardoor op twintig pixels breed uit. */ width:44px;height:44px; flex:none; margin-left:auto; padding:0; border:var(--lijn-dikte) solid var(--line); border-radius:var(--r-vlak); background:transparent; color:var(--kleur-soft); cursor:pointer; } /* Drie streepjes uit één element: de middelste is het element zelf, de andere twee zijn ::before en ::after. Zo staat er geen markup in de knop die alleen maar vorm is. */ .cmpl-menuknop__streepjes, .cmpl-menuknop__streepjes::before, .cmpl-menuknop__streepjes::after{ display:block; width:18px;height:2px; border-radius:0; background:currentColor; transition:transform .18s ease, opacity .18s ease; } .cmpl-menuknop__streepjes{position:relative} .cmpl-menuknop__streepjes::before, .cmpl-menuknop__streepjes::after{content:"";position:absolute;left:0} .cmpl-menuknop__streepjes::before{top:-6px} .cmpl-menuknop__streepjes::after{top:6px} /* Open: de streepjes worden een kruis. De middelste verdwijnt, de buitenste draaien naar het midden. */ header.menu-open .cmpl-menuknop__streepjes{background:transparent} header.menu-open .cmpl-menuknop__streepjes::before{transform:translateY(6px) rotate(45deg)} header.menu-open .cmpl-menuknop__streepjes::after{transform:translateY(-6px) rotate(-45deg)} /* Het hoofdmenu op een breed scherm: een rode streep onder het item waar je bent (aria-current, uit header.php) en onder het item waar de muis staat. Eén lijndikte, twee pixels onder de tekst, zodat hij niet door de onderkant van de letters loopt. Tot 12 september 2026 had het menu geen van beide: vier woorden die nergens op reageerden. */ header nav#cmpl-hoofdmenu a{ position:relative; padding:4px 0; color:var(--kleur-ink); text-decoration:none; } header nav#cmpl-hoofdmenu a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:var(--lijn-dikte); background:var(--kleur-rood); opacity:0; } header nav#cmpl-hoofdmenu a[aria-current="page"]{ color:var(--kleur-ink); } header nav#cmpl-hoofdmenu a[aria-current="page"]::after{ opacity:1; } @media (hover: hover) and (pointer: fine){ header nav#cmpl-hoofdmenu a:hover{ color:var(--kleur-rood); } header nav#cmpl-hoofdmenu a:hover::after{ opacity:1; } } header nav#cmpl-hoofdmenu a:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:3px; } @media(max-width:820px){ .cmpl-menuknop{display:inline-flex} /* De balk houdt zijn drie delen: woordmerk links, dan de knop, dan de iconen. Het paneel hangt eronder en telt niet mee in die rij. */ .bar{position:relative;gap:12px;padding:12px 24px} .bar .icons{order:3} .cmpl-menuknop{order:2;margin-left:0} /* Specifieker dan `nav{display:none}` hierboven, en dat is precies genoeg: die regel blijft de basis, dit is de uitzondering als de knop openstaat. */ header nav#cmpl-hoofdmenu{ display:none; position:absolute; top:100%;left:0;right:0; flex-direction:column; gap:0; padding:8px 24px 16px; background:var(--white); border-bottom:var(--lijn-dikte) solid var(--line); box-shadow:none; max-height:calc(100dvh - 100%); overflow-y:auto; } header.menu-open nav#cmpl-hoofdmenu{display:flex} header nav#cmpl-hoofdmenu a{ padding:12px 4px; border-bottom:var(--lijn-dikte) solid var(--line); font-size:var(--fs-body); color:var(--ink); } header nav#cmpl-hoofdmenu a:last-child{border-bottom:none} header nav#cmpl-hoofdmenu a::after{display:none} header nav#cmpl-hoofdmenu a[aria-current="page"]{color:var(--kleur-rood)} } @media(prefers-reduced-motion:reduce){ .cmpl-menuknop__streepjes, .cmpl-menuknop__streepjes::before, .cmpl-menuknop__streepjes::after{transition:none} } /* De makersnotitie onder een productpagina. Bewust geen kader en geen sterren: een kader eromheen laat het lezen als een review-widget, en dat is precies wat het niet is. Een dunne lijn erboven, een klein kopje, de tekst in de serif zodat hij als geschreven leest, en de naam eronder. Zoals een bordje naast een werk in een galerie. */ .pdp-makersnotitie{margin:0;padding-top:24px;border-top:var(--lijn-dikte) solid var(--line)} .pdp-makersnotitie__kop{margin:0;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--label)} .pdp-makersnotitie blockquote{margin:12px 0 0;padding:0;border:0} .pdp-makersnotitie blockquote p{margin:0;font-family:'Newsreader',serif;font-size:var(--fs-lead);line-height:1.6;color:var(--ink)} .pdp-makersnotitie__naam{margin-top:12px;font-size:var(--fs-label);color:var(--muted)} /* Recensies onder een product. De sterren zijn radioknoppen en geen echte knoppen, want dan werkt kiezen ook zonder javascript en kun je er met het toetsenbord doorheen. Ze staan in de opmaak omgekeerd (5 tot 1) zodat "vul alles tot en met mijn keuze" een zusselector kan zijn; row-reverse draait ze visueel weer goed. */ /* De mail na levering linkt rechtstreeks naar #respond. De kopbalk staat vast bovenaan en is 71px hoog, dus zonder deze marge landt de sprong met de kop van het formulier eronder verstopt. */ #reviews,#respond,.cmpl-schrijf{scroll-margin-top:96px} .cmpl-reviews{margin:0;padding-top:24px;border-top:var(--lijn-dikte) solid var(--line)} .cmpl-reviews h2{margin:0;font-size:var(--h2)} .cmpl-reviews__hoe{margin:8px 0 0;font-size:var(--fs-label);color:var(--muted);max-width:62ch} .cmpl-reviews__lijst{list-style:none;margin:0;padding:0} .cmpl-reviews__paginas{margin-top:16px;font-size:var(--fs-body)} .cmpl-review{padding:24px 0 4px;border-top:var(--lijn-dikte) solid var(--line);margin-top:16px} .cmpl-review:first-of-type{border-top:0;margin-top:8px} .cmpl-sterren{display:inline-flex;gap:4px;color:var(--gold)} .cmpl-sterren svg{display:block} .cmpl-sterren .leeg{color:var(--line)} .cmpl-review__verhaal{margin:12px 0 0;font-family:'Newsreader',serif;font-size:var(--fs-lead);line-height:1.6;color:var(--ink)} .cmpl-review__verhaal p{margin:0 0 12px} .cmpl-review__verhaal p:last-child{margin-bottom:0} .cmpl-review__wie{margin:12px 0 0;font-size:var(--fs-label);color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center} .cmpl-review__gekocht{font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--kleur-rood);border:var(--lijn-dikte) solid var(--line);border-radius:var(--r-rond);padding:4px 12px} .cmpl-schrijf{margin-top:24px;background:var(--soft);border:var(--lijn-dikte) solid var(--line);border-radius:var(--r-vlak);padding:24px} .cmpl-schrijf h3{margin:0;font-size:var(--fs-lead);font-weight:500} .cmpl-schrijf__intro{margin:8px 0 0;color:var(--muted);font-size:var(--fs-body);max-width:58ch} .cmpl-schrijf form{margin:0} .cmpl-veld{display:flex;flex-direction:column;gap:8px;margin:24px 0 0} .cmpl-veld label,.cmpl-veld__label{font-weight:600;font-size:var(--fs-body)} .cmpl-veld .hint{font-size:var(--fs-label);color:var(--muted);margin:0} .cmpl-veld input[type=text],.cmpl-veld input[type=email],.cmpl-veld textarea{ font:400 var(--fs-body)/1.5 var(--cmpl-sans);color:var(--ink);background:var(--kleur-grond); border:var(--lijn-dikte) solid var(--line);border-radius:var(--r-vlak);padding:12px 12px;width:100%} .cmpl-veld textarea{min-height:130px;resize:vertical} .cmpl-veld input:focus-visible,.cmpl-veld textarea:focus-visible{outline:2px solid var(--kleur-rood);outline-offset:1px} .cmpl-sterrenkeuze{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;padding-top:4px} .cmpl-sterrenkeuze input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .cmpl-sterrenkeuze label{color:var(--line);cursor:pointer;line-height:0;padding:4px;border-radius:0} .cmpl-sterrenkeuze input:checked ~ label{color:var(--gold)} @media (hover: hover) and (pointer: fine){.cmpl-sterrenkeuze label:hover, .cmpl-sterrenkeuze label:hover ~ label{color:var(--gold)}} .cmpl-sterrenkeuze input:focus-visible + label{outline:2px solid var(--kleur-rood);outline-offset:2px} .cmpl-schrijf__rij{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px} .cmpl-schrijf__rij .cmpl-veld{margin-top:0} .cmpl-schrijf__knop{margin-top:24px} .cmpl-schrijf__ingelogd{margin:16px 0 0;font-size:var(--fs-body);line-height:1.55;color:var(--muted)} .cmpl-schrijf__ingelogd strong{color:var(--ink)} .cmpl-schrijf__klein{margin:16px 0 0;font-size:var(--fs-label);line-height:1.5;color:var(--muted);max-width:62ch} /* De rekensom van de captcha-plugin en het cookievinkje van WordPress. Allebei komen ze kant en klaar uit iets anders; dit zet ze in dezelfde vorm als de rest van het formulier in plaats van eromheen. */ .cmpl-schrijf__captcha{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px;font-size:var(--fs-body);color:var(--muted)} .cmpl-schrijf__captcha img{border-radius:var(--r-vlak);vertical-align:middle} .cmpl-schrijf__captcha input[type=text]{font:400 var(--fs-body)/1.5 var(--cmpl-sans);color:var(--ink);background:var(--kleur-grond);border:var(--lijn-dikte) solid var(--kleur-veldrand);border-radius:var(--r-vlak);padding:8px 12px;width:5.5em} .cmpl-schrijf__captcha input[type=text]:focus-visible{outline:2px solid var(--kleur-rood);outline-offset:1px} .cmpl-schrijf__captcha br{display:none} .cmpl-schrijf .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:8px;margin:24px 0 0;font-size:var(--fs-label);line-height:1.5;color:var(--muted)} .cmpl-schrijf .comment-form-cookies-consent input{margin:4px 0 0;flex:0 0 auto} .cmpl-schrijf .comment-form-cookies-consent label{font-weight:400;font-size:var(--fs-label)} @media (max-width:640px){.cmpl-schrijf{padding:24px 16px;border-radius:var(--r-vlak)}.cmpl-schrijf__rij{grid-template-columns:1fr}} /* Jouw woorden moeten er bewerkbaar uitzien. De tekst in de kaart is al contenteditable en de muisaanwijzer wordt al een cursor, maar verder liet niets het zien: de hint eronder stond in 12,5 punts grijs en werd gemist. Daardoor leest de kern van het merk, jouw eigen woorden, als kiezen uit andermans zinnen. Nu een leesbare hint met een potlood, en de tekst zelf reageert op de muis. */ .maak-schrijfhint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-body);color:var(--ink)} .maak-schrijfhint svg{flex:0 0 auto;opacity:.75} .q[contenteditable="true"]{border-radius:var(--r-vlak);transition:background-color .18s ease} @media (hover: hover) and (pointer: fine){.q[contenteditable="true"]:hover{background:rgba(169,76,44,.06);box-shadow:none}} .q[contenteditable="true"]:focus{outline:2px solid var(--kleur-rood);outline-offset:8px;background:transparent;box-shadow:none} @media (prefers-reduced-motion:reduce){.q[contenteditable="true"]{transition:none}} /* De klaar-pagina op een telefoon. De deelknop begon op 1018px in een venster van 812, terwijl delen de enige actie is die deze pagina hoeft te veroorzaken. De opvulling stapelde: 120 boven de hero, 84 eronder, en nog eens 96 boven de sectie met de kaart. */ @media (max-width:640px){ .hero.klaar-hero{padding-top:64px;padding-bottom:32px} .hero.klaar-hero h1.big{font-size:var(--fs-titel);line-height:1.15} .hero.klaar-hero .lead{font-size:var(--fs-body)} .section.klaar-sectie{padding-top:48px;padding-bottom:48px} .klaar__kaart{padding-top:0;padding-bottom:0} } /* Op breed scherm eindigt de knoppenkolom ruim 500px boven de onderkant van de kaart, en daarna komt er nog 96 plus 96 opvulling voordat het cadeaublok begint. Daardoor leest de pagina als afgelopen en wordt dat blok gemist. */ @media (min-width:900px){ .section.klaar-sectie{padding-top:64px;padding-bottom:64px} .section.klaar-sectie + .section{padding-top:64px} } /* De foto bij de makersnotitie. De notitie zegt "ik heb er zelf een besteld"; de foto laat zien dat dat waar is. Klein gehouden, als een kiekje naast een bordje in een galerie, want het bewijs mag het verhaal niet overstemmen. */ .pdp-makersnotitie__rij{display:flex;gap:24px;align-items:center;margin-top:12px} .pdp-makersnotitie__foto{flex:0 0 auto;max-width:150px} .pdp-makersnotitie__foto img{display:block;width:100%;height:auto;border-radius:var(--r-vlak)} .pdp-makersnotitie__tekst{flex:1 1 auto;min-width:0} .pdp-makersnotitie__rij blockquote{margin:0} @media (max-width:560px){ .pdp-makersnotitie__rij{flex-direction:column;gap:12px} .pdp-makersnotitie__foto{flex:none;max-width:200px} } /* De productpagina opnieuw ingedeeld. Het raster was "media summary" / "info summary": het hele verhaal (Over dit product, makersnotitie, Goed om te weten, vragen, recensies) stond daardoor in de linkerkolom van 508px, terwijl rechts over bijna drieduizend pixels niets meer stond. Dat is wat de pagina onaf liet voelen. De inhoud loopt nu over de volle breedte onder beeld en koopblok door. */ .pdp{grid-template-areas:"media summary" "info info"} .pdp-verhaal{grid-area:info;margin:48px 0 0;max-width:none} /* Het beeldveld. Het product is staand 3:4 maar het kader was vierkant, en object-fit:cover sneed er dus van af. Nu past het beeld in zijn geheel op een zachte ondergrond. */ .pdp .media{aspect-ratio:3/4;background:var(--soft);display:flex;align-items:center;justify-content:center;position:relative;margin:0} .pdp .media .pdp-beeld{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in} .pdp-vergroot{position:absolute;right:12px;bottom:12px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:var(--lijn-dikte) solid var(--line);border-radius:var(--r-rond);background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;padding:0} @media (hover: hover) and (pointer: fine){.pdp-vergroot:hover{background:var(--kleur-grond)}} .pdp-vergroot:focus-visible{outline:2px solid var(--kleur-rood);outline-offset:2px} /* De miniaturen zijn knoppen geworden in plaats van links: ze openen niets, ze wisselen iets. De actieve staat staat in aria-current, zodat de rand en de voorleessoftware hetzelfde zeggen. */ .swatches{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px} .cmpl-mini{width:64px;height:64px;padding:0;border:var(--lijn-dikte) solid var(--line);border-radius:var(--r-vlak);overflow:hidden;background:var(--soft);cursor:pointer;display:block} .cmpl-mini img{width:100%;height:100%;object-fit:cover;display:block} .cmpl-mini[aria-current="true"]{border-color:var(--terra);box-shadow:none} .cmpl-mini:focus-visible{outline:2px solid var(--kleur-rood);outline-offset:2px} .pdp-lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,17,14,.86);display:flex;align-items:center;justify-content:center;padding:32px} .pdp-lightbox img{max-width:min(100%,1100px);max-height:100%;object-fit:contain;border-radius:var(--r-vlak)} .pdp-lightbox__sluit{position:absolute;top:18px;right:18px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-rond);background:rgba(255,255,255,.92);color:var(--kleur-ink);cursor:pointer} .pdp-lightbox__sluit:focus-visible{outline:2px solid var(--kleur-grond);outline-offset:3px} /* De feiten als drie kolommen, en de vragen op leesbreedte. */ .pdp-feiten{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .pdp-feiten h3{margin:0 0 8px;font-size:var(--fs-body);letter-spacing:.02em} .pdp-feiten p{margin:0;color:var(--muted);font-size:var(--fs-body);line-height:1.6} /* .art-body geeft een auto-marge links en rechts; samen met een leesbreedte centreert dat het blok, terwijl de feiten erboven links beginnen. */ .pdp-vragen{max-width:62ch;margin-left:0;margin-right:auto} .pdp-vragen details{border-top:var(--lijn-dikte) solid var(--line);padding:12px 0} .pdp-vragen details:last-of-type{border-bottom:var(--lijn-dikte) solid var(--line)} .pdp-vragen summary{cursor:pointer;font-weight:600;font-size:var(--fs-body);list-style:none;display:flex;gap:12px;align-items:flex-start} .pdp-vragen summary::-webkit-details-marker{display:none} .pdp-vragen summary::after{content:"+";margin-left:auto;color:var(--muted);font-weight:400;line-height:1;transition:transform .18s ease} .pdp-vragen details[open] summary::after{transform:rotate(45deg)} @media (prefers-reduced-motion:reduce){.pdp-vragen summary::after{transition:none}} .pdp-vragen summary:focus-visible{outline:2px solid var(--kleur-rood);outline-offset:3px;border-radius:0} .pdp-vragen details p{margin:12px 0 0;color:var(--muted);line-height:1.65} .pdp-makersnotitie{max-width:none} @media (max-width:900px){ .pdp{grid-template-areas:"media" "summary" "info"} .pdp-verhaal{margin-top:8px} .pdp-feiten{grid-template-columns:1fr;gap:24px} } /* De uitnodiging bij nul recensies. De summary is de knop; het driehoekje van de browser moet weg, anders staat er een pijltje in. */ .cmpl-schrijf-vouw{margin-top:16px} .cmpl-schrijf-vouw > summary{display:inline-flex;align-items:center;list-style:none;cursor:pointer} .cmpl-schrijf-vouw > summary::-webkit-details-marker{display:none} .cmpl-schrijf-vouw > summary::marker{content:""} .cmpl-schrijf-vouw > summary:focus-visible{outline:2px solid var(--kleur-rood);outline-offset:3px} .cmpl-schrijf-vouw[open] > summary{display:none} .cmpl-schrijf-vouw .cmpl-schrijf{margin-top:0} /* De vragen links, een meelopende koopkaart rechts. Dat was de laatste lege kolom: 469 bij 880 pixels naast de vragenlijst. Onder 900 valt de kaart weg en staat de lijst weer op volle breedte; de leesvolgorde verandert niet, want de kaart staat in de bron al ná de vragen. */ .pdp-onderrij{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:start} .pdp-onderrij > .pdp-vragen{max-width:none} .pdp-koopkaart{position:sticky;top:16px;align-self:start;background:var(--soft);border:var(--lijn-dikte) solid var(--line);border-radius:var(--r-vlak);padding:24px} .pdp-koopkaart__kop{display:flex;gap:12px;align-items:flex-start} .pdp-koopkaart__foto{flex:0 0 56px;width:56px;height:75px;border-radius:var(--r-vlak);overflow:hidden;background:var(--kleur-grond);border:var(--lijn-dikte) solid var(--line)} .pdp-koopkaart__foto img{width:100%;height:100%;object-fit:cover;display:block} .pdp-koopkaart__naam{margin:0;font-size:var(--fs-body);font-weight:600;line-height:1.35} .pdp-koopkaart__prijs{margin:4px 0 0;font-size:var(--fs-lead);color:var(--ink)} .pdp-koopkaart__prijs .woocommerce-Price-amount{font-weight:600} .pdp-koopkaart__tekst{margin:16px 0 0;padding:0 0 0 12px;border-left:var(--lijn-dikte) solid var(--terra);font-family:'Newsreader',serif;font-size:var(--fs-body);line-height:1.5;color:var(--ink)} .pdp-koopkaart__knop{margin-top:16px;width:100%;justify-content:center} .pdp-koopkaart__verzending{margin:12px 0 0;font-size:var(--fs-label);color:var(--muted);text-align:center} @media (max-width:900px){ .pdp-onderrij{display:block} .pdp-koopkaart{display:none} } /* De plaatsregel onder de naam van de maker. Stond alleen in de footer, waar je hem leest als je al weg wilt. */ .pdp-makersnotitie__naam{display:flex;flex-direction:column;gap:4px} .pdp-makersnotitie__plaats{font-weight:400;font-size:var(--fs-label);color:var(--muted)} /* Deze week geschreven: geen recensies, wel echte woorden. Bewust geen kaders met sterren eromheen, want dan leest het alsnog als een beoordeling. */ .pdp-verseweek{margin-top:64px} .pdp-verseweek h2{margin:0 0 8px} .pdp-verseweek__uitleg{margin:0 0 24px;color:var(--muted);font-size:var(--fs-body);max-width:62ch} .pdp-verseweek__rij{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .pdp-verseweek__rij li{margin:0} .pdp-verseweek__rij blockquote{margin:0;background:var(--soft);border-radius:var(--r-vlak);padding:16px 24px;font-family:'Newsreader',serif;font-size:var(--fs-lead);line-height:1.5;color:var(--ink)} /* Dezelfde woorden, andere vorm. De pagina eindigde hiervoor in de footer. */ .pdp-andere{margin-top:64px} .pdp-andere h2{margin:0 0 24px} .pdp-andere__rij{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .pdp-andere__item{margin:0} .pdp-andere__link{display:block;text-decoration:none;color:inherit} .pdp-andere__beeld{display:block;aspect-ratio:1/1;background:var(--soft);border-radius:var(--r-vlak);overflow:hidden;margin-bottom:12px} .pdp-andere__beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease} @media (hover: hover) and (pointer: fine){.pdp-andere__link:hover .pdp-andere__beeld img{transform:scale(1.03)}} @media (prefers-reduced-motion:reduce){.pdp-andere__beeld img{transition:none}@media (hover: hover) and (pointer: fine){.pdp-andere__link:hover .pdp-andere__beeld img{transform:none}}} .pdp-andere__link:focus-visible{outline:2px solid var(--kleur-rood);outline-offset:4px;border-radius:var(--r-vlak)} .pdp-andere__naam{display:block;font-size:var(--fs-body);font-weight:600;line-height:1.35} .pdp-andere__prijs{display:block;margin-top:4px;font-size:var(--fs-body);color:var(--muted)} /* De eerlijke verzendregel onder het meelift-kaartje. */ .cmpl-aov-bump__verzending{margin:8px 0 0;font-size:var(--fs-label);color:var(--muted)} @media (max-width:900px){ .pdp-verseweek__rij{grid-template-columns:repeat(2,minmax(0,1fr))} .pdp-andere__rij{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .pdp-verseweek__rij{grid-template-columns:1fr} } /* ================================================================ De footer, opnieuw ingedeeld op 4 september 2026. Hij was 944 pixels hoog voor 34 links, waarvan er negentien in één kolom stonden die de andere vier 400 tot 490 pixels lucht gaf. ================================================================ */ /* De ingangen als index, niet als knoppenrij. * * Het waren zesentwintig pillen met een rand, en de pil is in dit systeem de * knop die je pagina verder brengt. Zesentwintig daarvan naast elkaar maakt * van een register een muur, en het maakt de echte oproep bovenaan de pagina * minder waard. * * Nu: woorden in het zachte grijs, rood en onderstreept zodra je ze aanraakt. * Ze staan onderaan, waar je gaat kijken als je iets specifieks zoekt. * * Het raakvlak blijft ruim boven de vierentwintig pixels van WCAG 2.5.8: de * regelhoogte plus de padding maakt achtentwintig, en de tussenruimte van * twintig zorgt dat je er niet naast tikt. */ .foot-ideeen{ max-width:1120px;margin:0 auto;width:100%;box-sizing:border-box; padding:24px 32px 16px;display:flex;flex-direction:column;gap:8px; border-top:var(--lijn-dikte) solid var(--kleur-lijn); } .foot-ideeen__rij{display:flex;align-items:baseline;gap:16px} /* Gewone woorden, geen streepjes-caps. Zie de kolomkoppen hierboven. */ .foot-ideeen__label{flex:0 0 auto;min-width:96px;font-size:var(--fs-label);letter-spacing:0;text-transform:none;color:var(--kleur-soft);opacity:.75} .foot-ideeen__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 24px} .foot-ideeen__chips li{margin:0} .foot-chip{ display:inline-flex;align-items:center;min-height:32px;padding:4px 0; border:none;background:none;border-radius:0; color:var(--kleur-soft);font-size:var(--fs-label);line-height:1.35; text-decoration:none;transition:color .2s; } @media (hover: hover) and (pointer: fine){ .foot-chip:hover{color:var(--kleur-rood);text-decoration:underline;text-underline-offset:4px} } .foot-chip:focus-visible{outline:2px solid var(--kleur-rood);outline-offset:2px} /* Vijf kolommen met andere verhoudingen: de merkkolom draagt nu ook de maker, en de kolom Bestellen heeft langere regels dan een linklijst. */ .foot{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr)} /* De maker, uit de losse band van 173 pixels naar de merkkolom die leegstond. Dit is de opmaak die eerst als inline