/*! JKC Consent — banner en voorkeurenvenster. * * DE KLEUREN STAAN HIER NIET. * * Alles wat kleur is, komt uit een --jkcc-*-variabele die de plugin in de * zet (JKC_Consent_Branding::inline_css()). De waarden hieronder zijn * alleen de bodem: ze gelden als het stylesheet zonder de plugin wordt * gebruikt, of als het inline-blok om wat voor reden dan ook niet meekomt. * * Elke waarde hieronder is nagemeten: * * tekst #18181b op #ffffff .................. 17,72:1 (AA vraagt 4,5) * bodytekst #46464f op #ffffff .............. 9,34:1 * bodytekst #46464f op #f4f4f7 .............. 8,50:1 * "Altijd aan" #5c5c66 op #ffffff ........... 6,61:1 * wit op accent #15529e ..................... 7,69:1 * wit op accent-hover #0e3b73 ............... 11,10:1 * rand #8a8a94 op #ffffff ................... 3,42:1 (1.4.11 vraagt 3,0) * rand #8a8a94 op #f4f4f7 ................... 3,11:1 * toggle-uit #767680 op #ffffff ............. 4,49:1 * witte knop op toggle-uit #767680 .......... 4,49:1 * toggle-aan #15529e op #ffffff ............. 7,69:1 * * En in de donkere modus, tegen #202127: * * tekst #f4f4f5 ............................. 14,60:1 * bodytekst #c9c9d1 ......................... 9,75:1 * "Altijd aan" #b4b4bf ...................... 7,81:1 * accent #6ea8fe ............................ 6,65:1 * #0b0d12 op accent #6ea8fe ................. 8,05:1 * rand #7a7b86 .............................. 3,83:1 (op #2a2b33: 3,35:1) * * Typografie staat er met opzet niet in: font-family is `inherit`, zodat de * banner de letter van de site gebruikt. Er komt geen font mee. */ .jkc-consent, .jkc-consent-blocked { --jkcc-bg: #ffffff; --jkcc-bg-subtle: #f4f4f7; --jkcc-text: #18181b; --jkcc-text-body: #46464f; --jkcc-text-muted: #5c5c66; --jkcc-accent: #15529e; --jkcc-accent-text: #ffffff; --jkcc-accent-ui: #15529e; --jkcc-link: #15529e; --jkcc-accent-hover: #0e3b73; --jkcc-border: #8a8a94; --jkcc-switch-off: #767680; --jkcc-backdrop: rgba(9, 9, 12, .55); --jkcc-shadow: 0 12px 32px rgba(9, 9, 12, .18); --jkcc-radius: 8px; --jkcc-logo-h: 28px; font-family: inherit; color: var(--jkcc-text); } /* De donkere modus zit hier óók, en niet alleen in het inline-blok: zonder de plugin (of met dark_mode uit in de instellingen, waarbij het inline-blok geen dark-regels bevat) moet de banner nog steeds leesbaar zijn. :root[data-theme="light"] uitgezonderd, zodat een expliciete lichte keuze van de bezoeker of het thema wint van het systeem. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jkc-consent, :root:not([data-theme="light"]) .jkc-consent-blocked { --jkcc-bg: #202127; --jkcc-bg-subtle: #2a2b33; --jkcc-text: #f4f4f5; --jkcc-text-body: #c9c9d1; --jkcc-text-muted: #b4b4bf; --jkcc-accent: #6ea8fe; --jkcc-accent-text: #0b0d12; --jkcc-accent-ui: #6ea8fe; --jkcc-link: #6ea8fe; --jkcc-accent-hover: #8ec2ff; --jkcc-border: #7a7b86; --jkcc-switch-off: #7a7b86; --jkcc-backdrop: rgba(0, 0, 0, .66); --jkcc-shadow: 0 12px 32px rgba(0, 0, 0, .55); } } /* Ook op de wrapper zelf: niet vertrouwen op de UA-stijl voor [hidden]. */ .jkc-consent[hidden], .jkc-consent [hidden] { display: none !important; } /* --------------------------------------------------------------------------- * Plaatsing * * Drie standen, met de instelling `position`: * * corner kaart rechtsonder, buiten de leeskolom. Minst opdringerig en het * beste voor een site waar de inhoud voorop staat. * bar balk over de volle breedte onderaan. Onvermijdelijk zonder modaal * te zijn; de bezoeker kan de pagina nog gebruiken. * center gecentreerd venster met een overlay erachter. Kies dit alleen als * je wilt dat er eerst een keuze komt. * * Het voorkeurenvenster staat altijd midden: dat is een taak, geen mededeling. * ------------------------------------------------------------------------- */ .jkc-consent__banner, .jkc-consent__dialog { position: fixed; z-index: 2000; max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; border: 1px solid var(--jkcc-border); border-radius: calc(var(--jkcc-radius) * 2); background: var(--jkcc-bg); box-shadow: var(--jkcc-shadow); } .jkc-consent--corner .jkc-consent__banner { right: 24px; bottom: 24px; width: min(420px, calc(100vw - 40px)); } .jkc-consent--bar .jkc-consent__banner { right: 0; bottom: 0; left: 0; width: auto; border-width: 1px 0 0; border-radius: 0; padding: 20px max(24px, calc((100% - 1200px) / 2)); } /* De balk in twee kolommen: de tekst leest door en de knoppen staan rechts, zoals in een dialoogvenster. Onder 860px wordt het weer één kolom. */ @media (min-width: 860px) { .jkc-consent--bar .jkc-consent__banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, auto); align-items: center; gap: 8px 32px; } .jkc-consent--bar .jkc-consent__logo, .jkc-consent--bar .jkc-consent__title, .jkc-consent--bar .jkc-consent__text, .jkc-consent--bar .jkc-consent__links { grid-column: 1; } .jkc-consent--bar .jkc-consent__actions { grid-column: 2; grid-row: 1 / -1; flex-direction: column; align-items: stretch; } .jkc-consent--bar .jkc-consent__links { margin-bottom: 0; } } .jkc-consent--center .jkc-consent__banner { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); } .jkc-consent__dialog { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2001; width: min(560px, calc(100vw - 32px)); } .jkc-consent__backdrop { position: fixed; inset: 0; z-index: 2000; background: var(--jkcc-backdrop); } /* Bij `center` zet de JS ook de overlay aan achter de bannerstap. De overlay sluit de banner NIET: wegklikken zonder keuze mag geen toestemming zijn, en een overlay die de banner laat verdwijnen zou dat wel suggereren. */ .jkc-consent-locked { overflow: hidden; } /* --------------------------------------------------------------------------- * Inhoud * ------------------------------------------------------------------------- */ /* Het logo klein en linksboven: genoeg om te zien van wie de banner is, te klein om de vraag te overschaduwen. */ .jkc-consent__logo { display: block; height: var(--jkcc-logo-h); width: auto; max-width: 60%; margin: 0 0 14px; object-fit: contain; object-position: left center; } .jkc-consent__dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .jkc-consent__title { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--jkcc-text); } .jkc-consent__dialog-head .jkc-consent__title { margin-bottom: 0; } .jkc-consent__text { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--jkcc-text-body); } .jkc-consent__dialog .jkc-consent__text { margin-top: 12px; } .jkc-consent__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 20px; font-size: 13px; } .jkc-consent__links a { /* --jkcc-link en niet --jkcc-accent-ui: een link is tekst en heeft 4,5:1 nodig, waar de knop en de baan van de schakelaar met 3:1 klaar zijn. */ color: var(--jkcc-link); text-decoration: underline; text-underline-offset: 2px; } .jkc-consent__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--jkcc-bg-subtle); color: var(--jkcc-text); cursor: pointer; } .jkc-consent__close:hover { background: var(--jkcc-border); } /* Accepteren en weigeren: zelfde maat, gewicht en regelhoogte, alleen een andere vulling. De AVG vraagt dat weigeren net zo makkelijk is als accepteren; een weiger-linkje in kleine letters haalt die eis niet. */ .jkc-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; } .jkc-consent__btn { flex: 1 1 auto; min-height: 44px; padding: 11px 18px; border: 1.5px solid transparent; border-radius: var(--jkcc-radius); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* --jkcc-accent en --jkcc-accent-text horen bij elkaar: de plugin heeft ze samen zo gekozen dat de combinatie 4,5:1 haalt. Niet één van de twee vervangen zonder de ander. */ .jkc-consent__btn--accept { background: var(--jkcc-accent); color: var(--jkcc-accent-text); } .jkc-consent__btn--accept:hover { background: var(--jkcc-accent-hover); } .jkc-consent__btn--reject { background: var(--jkcc-bg); border-color: var(--jkcc-text); color: var(--jkcc-text); } .jkc-consent__btn--reject:hover { background: var(--jkcc-bg-subtle); } /* Voorkeuren is geen keuze maar een omweg: wel minder nadruk. */ .jkc-consent__btn--ghost { flex: 1 1 100%; min-height: 32px; padding: 8px 0 0; background: none; color: var(--jkcc-text-body); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .jkc-consent__btn--ghost:hover { color: var(--jkcc-text); } .jkc-consent__list { margin: 0 0 20px; padding: 0; list-style: none; border-top: 1px solid var(--jkcc-border); } .jkc-consent__row { padding: 14px 0; border-bottom: 1px solid var(--jkcc-border); } .jkc-consent__row-head { display: flex; align-items: center; gap: 12px; } .jkc-consent__row-title { flex: 1 1 auto; font-size: 15px; font-weight: 600; } .jkc-consent__always { font-size: 12px; font-weight: 500; color: var(--jkcc-text-muted); } .jkc-consent__row-desc { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--jkcc-text-body); } /* De schakelaar is de checkbox zelf: minder markup, en een echte checkbox voor toetsenbord en screenreader. De uit-stand is een eigen variabele en niet een randkleur van het thema, want die is bijna altijd een hairline van rond 1,3:1 en WCAG 1.4.11 vraagt 3:1 voor een bedieningselement. */ .jkc-consent__switch { flex: 0 0 auto; appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 24px; margin: 0; border: 0; border-radius: 12px; background: var(--jkcc-switch-off); cursor: pointer; transition: background-color .18s ease; } .jkc-consent__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--jkcc-bg); transition: transform .18s ease; } .jkc-consent__switch:checked { background: var(--jkcc-accent-ui); } .jkc-consent__switch:checked::after { background: var(--jkcc-accent-text); transform: translateX(20px); } .jkc-consent__switch:disabled { cursor: not-allowed; opacity: .55; } /* Zichtbare focus. De schakelaar ook op :focus: hij wordt met de spatiebalk bediend, dus je moet altijd zien waar hij staat. */ .jkc-consent :focus-visible, .jkc-consent__switch:focus { outline: 2px solid var(--jkcc-accent-ui); outline-offset: 2px; } .jkc-consent__banner:focus, .jkc-consent__dialog:focus { outline: none; } /* Windows-hoge-contrastmodus zet kleuren aan de kant. De toggle is dan alleen nog aan zijn vorm te herkennen, dus daar een echte rand omheen. */ @media (forced-colors: active) { .jkc-consent__switch { border: 1px solid CanvasText; } .jkc-consent__switch::after { background: CanvasText; } .jkc-consent__btn { border-color: CanvasText; } } .jkc-consent-blocked { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid var(--jkcc-border); border-radius: var(--jkcc-radius); background: var(--jkcc-bg-subtle); font-family: inherit; } .jkc-consent-blocked__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--jkcc-text-body); } /* Telefoon: volle breedte. 420px past niet in een hoek van 375px. */ @media (max-width: 575.98px) { .jkc-consent--corner .jkc-consent__banner, .jkc-consent--center .jkc-consent__banner { right: 12px; left: 12px; bottom: 12px; top: auto; width: auto; padding: 20px; transform: none; } .jkc-consent--bar .jkc-consent__banner { padding: 20px 16px; } .jkc-consent__dialog { padding: 20px; } .jkc-consent__btn { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { .jkc-consent__btn, .jkc-consent__switch, .jkc-consent__switch::after { transition: none; } }