/* ============================================================ OnDestination · cookiebanner v2 · toggles, twee lagen Voorbeeld-CSS bij patroon-cookiebanner-v2.html. In productie horen deze regels in de gedeelde stijl. Vereist: colors_and_type.css (tokens + fonts). ============================================================ */ /* ------------------------------------------------------------ 1 · DE TOGGLE · .od-toggle Echte input type="checkbox" met appearance:none. De knop is een background-image (radial-gradient) op de input zelf, geen kindelement, want ::before rendert niet op een input. ------------------------------------------------------------ */ .od-toggle{ appearance:none;-webkit-appearance:none;margin:0;flex:none; width:38px;height:22px;min-width:38px;border-radius:999px; border:1.5px solid rgba(248,245,238,.34); background-color:rgba(255,255,255,.05); background-image:radial-gradient(circle at center,rgba(248,245,238,.72) 49%,transparent 50%); background-size:14px 14px;background-repeat:no-repeat;background-position:2.5px center; box-shadow:inset 0 1px 2px rgba(0,0,0,.4); cursor:pointer; transition:background-position 180ms cubic-bezier(.22,.61,.36,1),background-color 180ms cubic-bezier(.22,.61,.36,1),border-color 180ms cubic-bezier(.22,.61,.36,1),box-shadow 180ms cubic-bezier(.22,.61,.36,1); } .od-toggle:hover{border-color:rgba(248,245,238,.6);background-color:rgba(255,255,255,.09)} .od-toggle:checked{ background-color:var(--od-green,#6FE000);border-color:var(--od-green,#6FE000); background-image:radial-gradient(circle at center,#000 49%,transparent 50%); background-position:calc(100% - 2.5px) center; box-shadow:none; } .od-toggle:checked:hover{background-color:var(--od-green-bright,#8BFF1F);border-color:var(--od-green-bright,#8BFF1F)} .od-toggle:focus-visible,.od-toggle.demo-focus{outline:none;border-color:var(--od-green,#6FE000);box-shadow:0 0 0 3px rgba(111,224,0,.26)} .od-toggle:checked:focus-visible,.od-toggle:checked.demo-focus{box-shadow:0 0 0 3px rgba(111,224,0,.32)} .od-toggle:user-invalid,.od-toggle.is-invalid{border-color:#E04848;background-color:rgba(224,72,72,.12);box-shadow:0 0 0 3px rgba(224,72,72,.18)} /* Vast aan · geen tekstlabel, geen grijs. Verzadigd dieper groen met zwarte knop rechts: onmiskenbaar aan, en zichtbaar geen deelnemer aan de keuze. Nooit de :disabled-tint · die leest als kapot. */ .od-toggle.od-toggle--locked, .od-toggle.od-toggle--locked:disabled, .od-toggle.od-toggle--locked:disabled:checked{ cursor:default; background-color:var(--od-green-deep,#3F8A00); border-color:var(--od-green-deep,#3F8A00); background-image:radial-gradient(circle at center,#000 49%,transparent 50%); background-position:calc(100% - 2.5px) center; box-shadow:none; } .od-toggle:disabled{cursor:not-allowed;border-color:rgba(248,245,238,.14);background-color:rgba(255,255,255,.02);box-shadow:none} /* lichte ondergrond · voor beige en witte secties */ [data-od-surface="paper"] .od-toggle{border-color:rgba(0,0,0,.28);background-color:#fff;background-image:radial-gradient(circle at center,rgba(0,0,0,.4) 49%,transparent 50%);box-shadow:inset 0 1px 2px rgba(0,0,0,.09)} [data-od-surface="paper"] .od-toggle:hover{border-color:rgba(0,0,0,.5)} [data-od-surface="paper"] .od-toggle:checked{background-color:var(--od-green,#6FE000);border-color:var(--od-green-deep,#3F8A00);background-image:radial-gradient(circle at center,#000 49%,transparent 50%)} [data-od-surface="paper"] .od-toggle.od-toggle--locked:disabled:checked{background-color:var(--od-green-deep,#3F8A00);border-color:var(--od-green-deep,#3F8A00)} /* ------------------------------------------------------------ 2 · DE BANNER · .od-cb · stiller dan v1 Smaller, lagere schaduw, kleinere kop, en in de eerste laag alleen kop, één alinea en drie knoppen. ------------------------------------------------------------ */ .od-cb,.od-cb *{box-sizing:border-box} .od-cb{ /* 524px = 466px voor de drie pillen naast elkaar (NL is de langste: 141 + 156 + 149 + 2x10 gap) + 42px padding + 2px rand. Smaller en de rij breekt in tweeën, ook op 1440. */ position:fixed;left:20px;right:20px;bottom:20px;z-index:9000;max-width:524px; background:#0E0E0E;border:1px solid rgba(255,255,255,.1);border-radius:13px; padding:19px 21px;box-shadow:0 10px 34px rgba(0,0,0,.42); color:var(--od-cream,#F8F5EE);font-family:'Luxe Uno',system-ui,sans-serif; animation:odCbIn .4s var(--od-ease,cubic-bezier(.22,.61,.36,1)); } @keyframes odCbIn{from{opacity:0;transform:translateY(10px)}} @media (prefers-reduced-motion:reduce){.od-cb{animation:none}} /* ⚠️ `.od .od-cb-h` EN NIET `.od-cb-h` · SPECIFICITEITSREPARATIE, geen ontwerpwijziging: de voorgeschreven waarden stonden er al en werden alleen niet toegepast. `colors_and_type.css` r272 draagt `.od h2, .od .od-h2` (0,1,1) en die verslaat `.od-cb-h` (0,1,0), dus de kop rendeerde `--od-t-h2` = 40px met regelhoogte 1.15 en gewicht 400 in plaats van de voorgeschreven 14px/700, en marge `--od-s-3` = 12px in plaats van 7px. Gemeten op de LIVE site, op alle 316 pagina's · body draagt overal `class="od"`. Het klopt sluitend: 46 + 12 + 40 + 16 + 44 + 38 + 2 = 198, exact de gemeten bannerhoogte. `.od .od-cb-h` is (0,2,0) en wint dus, zonder `!important`. ⚠️ DE VORM IS GESPIEGELD, NIET BEDACHT: CLAUDE.md schrijft over de `.od p`-reparatie van 2026-07-28 dat de resterende componenten "wel de `.od`-prefix per component" vragen, en de kaartjes-fix van dezelfde dag deed "vier selectors met `.od` geprefixt". Die descendant-vorm staat vandaag in colors_and_type.css, gelegenheden.css en home.css. ⚠️ WAT HIJ NIET HERSTELT, en dat is bewust: `font-family` en `line-height` staan NIET in deze regel, dus die blijven van `.od h2` komen (de display-letter, regelhoogte 1.15). Ze toevoegen zou een ontwerpwijziging zijn en niet een reparatie. */ .od .od-cb-h{margin:0 0 7px;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--od-cream,#F8F5EE)} .od-cb-p{margin:0 0 15px;font-size:12.5px;line-height:1.6;color:rgba(248,245,238,.55)} .od-cb-p a{color:var(--od-green,#6FE000);text-decoration:underline;text-underline-offset:2px} /* ------------------------------------------------------------ 3 · KNOPRIJ + TWEEDE LAAG De
is het derde item in de knoprij: is de pil "Keuzes aanpassen". Open pakt hij de volle breedte, zodat het paneel eronder komt in plaats van naast de knoppen. GEEN order-eigenschappen: de bronvolgorde IS de beeldvolgorde, zodat Tab dezelfde weg loopt als het oog (WCAG 2.4.3). ------------------------------------------------------------ */ .od-cb-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start} .od-cb-row button{cursor:pointer;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;padding:11px 20px;border:1px solid transparent;font-family:inherit;transition:filter 160ms,background 160ms} .od-cb-row button:focus-visible{outline:2px solid var(--od-green,#6FE000);outline-offset:2px} /* varianten zwaarder dan de basisregel: anders wint border:…transparent */ .od-cb-row button.od-cb-accept{background:var(--od-green,#6FE000);color:#000} .od-cb-row button.od-cb-accept:hover{filter:brightness(1.08)} .od-cb-row button.od-cb-min{background:transparent;color:var(--od-cream,#F8F5EE);border-color:rgba(255,255,255,.22)} .od-cb-row button.od-cb-min:hover{background:rgba(255,255,255,.07)} .od-cb-row button.od-cb-save{background:transparent;color:var(--od-cream,#F8F5EE);border-color:rgba(255,255,255,.22)} .od-cb-row button.od-cb-save:hover{background:rgba(255,255,255,.07)} .od-cb-more{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;min-width:0} .od-cb-more[open]{flex:1 1 100%} .od-cb-adjust{ list-style:none;cursor:pointer;display:inline-block; border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap; padding:11px 20px;border:1px solid rgba(255,255,255,.22); background:transparent;color:var(--od-cream,#F8F5EE); transition:background 160ms,border-color 160ms; } .od-cb-adjust::-webkit-details-marker{display:none} .od-cb-adjust::marker{content:''} .od-cb-adjust:hover{background:rgba(255,255,255,.07)} .od-cb-adjust:focus-visible{outline:2px solid var(--od-green,#6FE000);outline-offset:2px} .od-cb-more[open] .od-cb-adjust{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.34)} .od-cb-panel{width:100%;margin:13px 0 0} .od-cb-cats{display:flex;flex-direction:column;padding:0 14px;margin:0 0 14px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.02)} .od-cb-cat{display:grid;grid-template-columns:1fr 38px;column-gap:14px;row-gap:3px;align-items:center;padding:11px 0;min-height:44px;cursor:pointer} .od-cb-cat+.od-cb-cat{border-top:1px solid rgba(255,255,255,.07)} .od-cb-cat.is-locked{cursor:default} .od-cb-cat-t{grid-column:1;grid-row:1;font-size:13px;font-weight:700;line-height:1.3;color:var(--od-cream,#F8F5EE)} .od-cb-cat-d{grid-column:1;grid-row:2;font-size:12px;font-weight:400;line-height:1.5;color:rgba(248,245,238,.48)} .od-cb-cat .od-toggle{grid-column:2;grid-row:1/span 2;justify-self:end;align-self:center} @media (max-width:560px){.od-cb{left:12px;right:12px;bottom:12px;padding:17px;max-width:none;max-height:calc(100dvh - 24px);overflow-y:auto}} @media (max-width:360px){.od-cb{left:10px;right:10px;bottom:10px;padding:15px 13px}.od-cb-cats{padding:0 12px}} /* ------------------------------------------------------------ 3b · DE HAAK · een vast element trekt zich terug zolang de banner staat. `cookie-banner.js` zet `data-od-cb` op op het moment dat hij de banner onthult, en haalt het weg op het moment dat hij hem uit de DOM verwijdert. ⚠️ DE SELECTOR IS EEN CONVENTIE EN GEEN LIJST. Elke of