/* Ensemblo-huisstijl over de standaard PlainConsent-banner. * * pc.js en banner.css blijven neutraal: dat is wat elke PlainConsent-klant * krijgt. Deze laag zit er alleen op ensemblo.nl overheen, en gebruikt de * tokens die al op :root van de pagina staan. Zo blijft de merkmanual leidend * (styling via var(--token)) zonder dat we het product zelf verbouwen. * * Laad dit ná pc/banner.css. */ #pc-consent-banner { font-family:var(--font-sans); color: var(--ink, #171A21); background: var(--panel, #fff); border: 1px solid var(--line, rgba(23, 26, 33, 0.12)); border-radius: 14px; box-shadow: var(--shadow-lg, 0 2px 4px rgba(23, 26, 33, .06), 0 40px 80px -30px rgba(23, 26, 33, .55)); } #pc-consent-banner .pc-title { font-family:var(--font-display); font-weight: 900; letter-spacing: -.015em; color: var(--ink, #171A21); } #pc-consent-banner .pc-text, #pc-consent-banner .pc-cat { color: var(--muted, #5A6172); } /* Kobalt voor de keuzevakjes en de bevestigende knop; koraal blijft gereserveerd voor de aandachtsaccenten elders op de pagina. */ #pc-consent-banner .pc-cat input { accent-color: var(--brand, #2547E6); } #pc-consent-banner .pc-btn { font-family:var(--font-sans); font-weight: 600; border-radius: 999px; } #pc-consent-banner .pc-accept { background: var(--brand, #2547E6); border-color: var(--brand, #2547E6); color: #fff; } /* Weigeren moet even vindbaar zijn als accepteren. Geen grijze fluistertoets: dat is precies waar PlainConsent zich tegen afzet, dus op onze eigen site zeker niet. Zelfde formaat en contrast, alleen niet gevuld. Bewust NIET var(--line): dat is de kleur voor scheidingslijnen en die is te licht voor een knoprand. Op een knop leest dat als "deze is minder belangrijk", en dat is precies het effect dat we niet willen. Gemeten in de browser voordat dit werd rechtgezet. */ #pc-consent-banner .pc-decline { background: transparent; color: var(--ink, #171A21); border-color: currentColor; } #pc-consent-banner .pc-save { background: transparent; color: var(--brand, #2547E6); border-color: var(--brand, #2547E6); } #pc-consent-banner .pc-btn:focus-visible { outline: 2px solid var(--brand, #2547E6); outline-offset: 2px; } #pc-consent-banner .pc-policy, #pc-consent-banner .pc-policy a { color: var(--muted, #5A6172); } /* Hier stond een @media (prefers-color-scheme: dark)-blok dat --ink en --panel overschreef. Dat kan weg: sinds de pagina's tokens.css laden, regelt de merkmanual het thema zelf, en die luistert naar data-theme op en niet naar de systeemvoorkeur. Het blok deed dus niets meer (de tokens waren al gezet, dus de terugvalkleuren kwamen nooit aan bod) en zou straks juist in de weg zitten: zodra de site dual-theme wordt, moet één mechanisme bepalen welk thema geldt. De site staat nu bewust op data-theme="light". */ /* Mobiel: gemeten op 375x812 bedekte de banner 48% van het eerste scherm, inclusief de primaire CTA. Alle keuzes blijven zichtbaar en bedienbaar; alleen de ruimte is compacter. De cookie-tabel ("Bekijk cookies") gaat op mobiel dicht achter de beleidslink; het cookiebeleid zelf blijft één tik verderop. Doel: banner onder de ~25% van het scherm. */ @media (max-width: 640px) { #pc-consent-banner .pc-body { padding: 14px 16px; } #pc-consent-banner .pc-title { font-size: 15px; margin-bottom: 4px; } #pc-consent-banner .pc-text { font-size: 12.5px; margin-bottom: 10px; } #pc-consent-banner .pc-cats { gap: 6px 14px; margin-bottom: 10px; } #pc-consent-banner .pc-cat { font-size: 12.5px; } #pc-consent-banner .pc-cat input { width: 14px; height: 14px; } #pc-consent-banner .pc-decl { display: none; } #pc-consent-banner .pc-actions { gap: 6px; flex-wrap: nowrap; } #pc-consent-banner .pc-btn { min-width: 0; padding: 9px 10px; font-size: 12.5px; } }