/* ============================================================ 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-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}} /* ------------------------------------------------------------ 4 · /cookieverklaring · toggles meteen zichtbaar, geen details ------------------------------------------------------------ */ .ck-panel .od-cb-cats{margin-bottom:0} .ck-panel .od-cb-cat-t{font-size:14px} .ck-panel .od-cb-cat-d{font-size:13px} .ck-state{font-size:12.5px;line-height:1.6;color:rgba(248,245,238,.42);margin:14px 0 18px} .ck-state b{color:var(--od-cream,#F8F5EE);font-weight:600} /* ------------------------------------------------------------ 5 · FORMULIERCONTEXT · zelfde toggle in contact / offerte / boeking ------------------------------------------------------------ */ .od-consent{display:flex;flex-direction:column;gap:2px;margin-top:20px} .od-consent-row{display:grid;grid-template-columns:1fr 38px;column-gap:14px;align-items:center;padding:11px 0;min-height:44px;cursor:pointer} .od-consent-text{font-size:14px;line-height:1.55;color:rgba(248,245,238,.72)} .od-consent-text a{color:var(--od-green,#6FE000)} .od-consent-err{display:none;font-size:12.5px;color:#F09A9A;margin:0 0 6px;line-height:1.45} .od-consent-row.is-invalid+.od-consent-err,.od-consent-row:has(.od-toggle:user-invalid)+.od-consent-err{display:block} .od-consent-row.is-invalid .od-consent-text{color:#F4C4C4} [data-od-surface="paper"] .od-consent-text{color:#2A2A2A} [data-od-surface="paper"] .od-consent-text a{color:var(--od-green-deep,#3F8A00)} /* paginaskelet · alleen voor de voorbeeldpagina's */ .demo-page{margin:0;background:#000;height:100vh;overflow:hidden;font-family:'Luxe Uno',system-ui,sans-serif} .skel-nav{position:absolute;top:0;left:0;right:0;height:58px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:26px;padding:0 clamp(16px,4vw,40px)} .skel-logo{width:clamp(72px,16vw,104px);height:15px;border-radius:3px;background:rgba(111,224,0,.4);flex:0 0 auto} .skel-nav i{width:56px;height:8px;border-radius:99px;background:rgba(255,255,255,.11);flex:0 0 auto} .skel-body{position:absolute;left:clamp(16px,4vw,40px);top:112px;right:clamp(16px,4vw,40px);display:flex;flex-direction:column;gap:14px} .skel-h{width:min(56%,520px);height:clamp(28px,5vw,44px);border-radius:6px;background:rgba(255,255,255,.13)} .skel-h2{width:min(38%,340px);height:clamp(28px,5vw,44px);border-radius:6px;background:rgba(255,255,255,.09)} .skel-p{width:min(44%,420px);height:9px;border-radius:99px;background:rgba(255,255,255,.07);margin-top:12px} .skel-p2{width:min(36%,340px);height:9px;border-radius:99px;background:rgba(255,255,255,.07)} .demo-dots{position:fixed;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.055) 1px,transparent 0);background-size:18px 18px;pointer-events:none} /* ============================================================ E6 · DE OPSLAANKNOP BLIJFT IN BEELD OP EEN LAGE VIEWPORT ------------------------------------------------------------ GEMETEN op de ECHT GEBAKKEN pagina, uitgeklapt, op 568px hoog. ⚠️ NIET op de demopagina uit de bouwset: daar is het vaste deel 358 en hier 443, want de echte pagina laadt meer stylesheets. Een plafond dat op de demo is afgeleid laat de opslaanknop op de echte pagina alsnog buiten beeld vallen (gemeten y=587 tegen 558). het VASTE deel van de banner (alles behalve de categorielijst) is 311 tot 443px, afhankelijk van de taal en van hoeveel regels de knoprij nodig heeft. Het zwaarste geval is NL op 320px breed: drie knoprijen, vast deel 443, natuurlijke hoogte 717 tegen een max-height van 544. Daar viel "Keuze opslaan" buiten het formulier (top 590, formulier tot 558) en was er geen enkele aanwijzing dat er te scrollen viel. DE VORM · alleen de categorielijst krijgt een plafond en scrolt. De opslaanknop staat eronder in de normale stroom en is daarmee altijd zichtbaar. Er gaat GEEN inhoud weg: alle drie de categorieen houden hun titel en hun hele beschrijving. HET GETAL · 382 = 24 (de bestaande calc(100dvh - 24px) van de banner zelf) + 443 (het zwaarste vaste deel). Daarmee past het geheel per constructie, ook in het zwaarste geval. ⚠️ GESCOPED OP HOOGTE EN NIET OP BREEDTE. Het gebrek is een lage viewport, geen smalle: op 390x844 past hij gewoon. En een breedte-breekpunt zou op het kantelpunt van de knoprij moeten liggen, en dat kantelpunt is gemeten TEKSTafhankelijk (NL 533, EN 451) · dus geen betrouwbare grens. ⚠️ BEWUST GEEN FLEXKETEN. Die is geprobeerd en werkt niet op 320: de knoprij wikkelt daar naar drie regels, en een flexregel krimpt in de kruisas niet onder zijn inhoud. Gemeten bleef de lijst daar op 274px staan terwijl hij op 360 en 390 wel kromp. Een vorm die alleen werkt zolang de knoppen op twee regels passen, is geen vorm. ============================================================ */ @media (max-height: 700px) { .od-cb-cats { max-height: calc(100dvh - 467px); overflow-y: auto; /* SCROLL-AANWIJZING zonder JavaScript: de twee dekkers zitten vast aan de container (scroll) en de twee schaduwen aan de inhoud (local), dus de schaduw verdwijnt precies aan het begin en aan het eind van de lijst. */ background-image: linear-gradient(to bottom, #121212, rgba(18,18,18,0)), linear-gradient(to top, #121212, rgba(18,18,18,0)), linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)), linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); background-position: 0 0, 0 100%, 0 0, 0 100%; background-repeat: no-repeat; background-size: 100% 10px, 100% 10px, 100% 12px, 100% 12px; background-attachment: scroll, scroll, local, local; } }