/**
* OZK — knoppen
* =========================================================================
*
* DIT IS DE ENIGE PLEK WAAR KNOPPEN WORDEN BEPAALD.
* Moet je een knop van kleur, maat of gedrag veranderen: doe het hier, niet
* in custom.css / colors.css / ozk-d7-parity-extra.css. Daar stonden de
* knopregels tot 01-08-2026 verspreid (vijf bestanden, deels met !important,
* deels gescoped op .featured-box of .node__content) en dat maakte het
* onvoorspelbaar welke regel won. Die regels zijn hierheen verhuisd; op hun
* oude plek staat een verwijzing naar dit bestand.
*
* LAADVOLGORDE — waarom dit werkt zonder !important
* -------------------------------------------------------------------------
* Dit bestand staat in bario_sub.libraries.yml in de 'theme'-groep met
* weight 102. Die groep laadt ná álle 'component'-CSS, en daar zit ook de
* Bootswatch-yeti-CDN in (bootstrap_barrio.libraries.yml, type external), die
* `.btn-primary { background-color: #007ea7; border-color: #007ea7 }` als
* concrete property zet. Bij gelijke specificiteit wint de laatste regel in
* de bronvolgorde — dus deze. Vandaar dat hier geen !important meer nodig is;
* zie je toch een knop de verkeerde kleur houden, dan is de oorzaak vrijwel
* altijd een regel met HOGERE specificiteit elders, niet deze cascade.
*
* TWEE LAGEN, BEWUST GESCHEIDEN
* -------------------------------------------------------------------------
* 1. KLEUR geldt overal (`.btn-primary`, `.btn-secondary`, …). De merkkleur
* hoort ook op CiviCRM-schermen en formulieren die niet in de node-body
* staan; zonder deze regels vallen die terug op het yeti-blauw.
* 2. MAAT geldt alleen in bezoekerscontent (node-body, views-area's,
* webforms). Een 48px hoge knop met 24px zijpadding is prachtig voor een
* CTA maar zou de dichte formulierschermen van CiviCRM en de Drupal-admin
* uit elkaar drukken — daar blijft de knop dus zijn eigen maat houden.
*
* KLEURBETEKENIS OP DE SITE
* -------------------------------------------------------------------------
* roze #c13c61 gewone actieknop — de merkkleur (.btn-primary, .btn-info)
* groen #28881e meedoen als leiding (.btn-secondary, .btn-success)
* blauw #006E83 donatie / Onvergetelijke Vriend (.btn-ozk-vriend)
* paars #663399 navigatie (.btn-ozk-paars) — 16-8-2026
* oranje #cc4d00 "let op", vraagt aandacht (.btn-ozk-oranje) — 16-8-2026
* grijs #3c3c3b neutraal / feitelijk (.btn-ozk-grijs) — 18-8-2026
*
* ALLE KNOPPEN HEBBEN WITTE TEKST. Dat is de site-brede afspraak van palet C;
* er is geen enkele variant met zwarte tekst. Contrast tegen de WCAG-eis van
* 4,5:1, in rust en bij hover:
* paars 8,41 -> 10,57 blauw 5,90 -> 8,27
* roze 5,14 -> 7,17 groen 4,54 -> 6,62 oranje 4,54 -> 6,22
* Hover gaat overal naar donkerder, dus het contrast neemt bij aanraken toe en
* nooit af. Alle varianten halen de norm sinds 4-8-2026 (palet C); paars en
* oranje zijn op 16-8-2026 toegevoegd zodat elk van de banen als knop bestaat. Het groen was #439F35 en
* haalde 3,4:1; dat is een stap donkerder gezet, wat mocht omdat de
* ontwerpersmail van 2015 groen "slechts voor accenten" noemt. Roze staat weer
* exact op de bronwaarde #c13c61 uit die mail.
*
* NIET IN DIT BESTAND
* -------------------------------------------------------------------------
* De D7-erfenis `a.button` / `.box.boxbig` / `a.button.skyblue` is een ander
* component (klikbare blokken in kaarten en op de gebedspagina's), geen
* Bootstrap-knop. Die regels staan in ozk-porto-port.css, ozk-kaarten.css en
* ozk-d7-parity-extra.css en zijn bewust niet samengevoegd — ze delen geen
* enkele property met de knoppen hieronder.
*/
/* -------------------------------------------------------------------------
* 1. MERKKLEUREN
*
* Als custom properties op :root, zodat een kleurwijziging op één regel gaat
* en overal doorwerkt — ook in de varianten hieronder.
* ------------------------------------------------------------------------- */
:root {
--ozk-roze: #c13c61;
--ozk-roze-donker: #9C2F4D;
/* Focusrand op DONKERE vlakken (footer, skip-link). OZK-roze haalt daar
maar ~2:1 tegen de footergrijs en het skip-link-blauw; WCAG 1.4.11 vraagt
3:1 voor een focusindicator. Op lichte vlakken is de focusrand gewoon
--ozk-roze (5,1:1 op wit). Besluit Richard 25-09-2026. */
--ozk-roze-focus-donker: #f85b86;
--ozk-groen: #28881e;
/* HALF MEEGEMIGREERD, HERSTELD 16-8-2026.
Bij de overgang naar palet C is `--ozk-groen` van #439F35 naar #28881e
gegaan, maar de twee varianten bleven op hun oude, relatieve waarden staan.
Gevolg, gemeten met witte tekst:
--ozk-groen-licht #4BB23B 2,72:1 FAALT (hover van .btn-secondary)
--ozk-groen-donker #3B8C2F 4,22:1 FAALT (active, en L* 51,7 dus
LICHTER dan de basis 49,7)
De groene knop op de homepage ("Meer info", "Nieuwsbrief") viel dus bij
hover én klik onder de norm. `--ozk-groen-donker` is nu een échte donkere
variant die de andere banen volgt (hover = donkerder, hoger contrast):
roze #c13c61 5,14 -> hover #a33351 6,67
blauw #006e83 5,90 -> hover #005a6b 7,85
paars #663399 8,41 -> hover #522980 10,57
groen #28881e 4,54 -> hover #1f6b17 6,62
`--ozk-groen-licht` blijft staan als variant maar wordt niet meer als
hover gebruikt — een lichtere hover kan bij dit groen niet AA halen. */
--ozk-groen-licht: #4BB23B;
--ozk-groen-donker: #1f6b17;
--ozk-blauw: #006E83;
--ozk-blauw-donker: #00566A;
/* Paars en oranje ontbraken hier tot 16-8-2026, terwijl ze wél in het palet
zitten. Paars stond hardgecodeerd in de kaartkopbalken (#663399/#522980) en
oranje had helemaal geen knopvariant, waardoor twee van de zes banen niet als
knop beschikbaar waren. De donkere varianten volgen hetzelfde patroon als de
andere banen — ongeveer 9 punten L* omlaag, dus hoger contrast bij hover:
paars #663399 (8,41) -> #522980 (10,57) dL* 6,3
oranje #cc4d00 (4,54) -> #a83f00 ( 6,22) dL* 8,6 */
--ozk-paars: #663399;
--ozk-paars-donker: #522980;
/* Focusrand (besluit Richard 29-09-2026: paars is rustiger dan roze). Op
lichte vlakken --ozk-paars (8,41:1 op wit). Op DONKERE vlakken (footer,
skip-link) haalt dat geen 3:1 (WCAG 1.4.11), vandaar deze lichte tint:
5,04:1 op de footergrijs #3c3c3b en 4,57:1 op het skip-link-blauw
#004767. Vervangt --ozk-roze-focus-donker (3,59:1). */
--ozk-paars-focus-donker: #c3a1e8;
--ozk-oranje: #cc4d00;
--ozk-oranje-donker: #a83f00;
/* DRIE STATEN PER KNOP (besluit Richard 18-8-2026): rust, hover én een eigen
klik-kleur. Tot nu was `active` gelijk aan `hover`, waardoor een klik geen
eigen terugkoppeling gaf — je zag niet of de knop je aanraking had
geregistreerd. De klik-tint ligt ongeveer even ver onder de hover als de
hover onder de rust (~9 punten L*), dus de reeks voelt als één beweging:
baan rust hover klik
roze #c13c61 5,14 -> #9C2F4D 7,17 -> #77243b 10,00
blauw #006e83 5,90 -> #00566A 8,27 -> #00404e 11,39
groen #28881e 4,54 -> #1f6b17 6,62 -> #174f11 9,71
paars #663399 8,41 -> #522980 10,57 -> #402064 13,05
oranje #cc4d00 4,54 -> #a83f00 6,22 -> #853200 8,56
Het contrast met witte tekst neemt bij elke stap toe, dus alle drie de
staten halen AA — donkerder kan hier nooit een leesbaarheidsprobleem geven.
VIER RONDES, ÉÉN CONCLUSIE (18-8-2026). De klik is uiteindelijk een stap
DONKERDER met witte tekst — dezelfde richting als de hover, in hetzelfde
ritme (ongeveer 9 punten L* per stap):
roze #c13c61 5,14 -> #9C2F4D 7,17 -> #77243b 10,00
blauw #006e83 5,90 -> #00566A 8,27 -> #00404e 11,39
groen #28881e 4,54 -> #1f6b17 6,62 -> #174f11 9,71
paars #663399 8,41 -> #522980 10,57 -> #402064 13,05
oranje #cc4d00 4,54 -> #a83f00 6,22 -> #853200 8,56
Onderweg zijn drie alternatieven doorgerekend en afgevallen. Ze staan hier
omdat ze allemaal op dezelfde muur stuiten, en die muur is niet vanzelf
zichtbaar:
WAAROM HET VLAK NIET LICHTER KAN MET WITTE TEKST. Palet C zet groen en
oranje op precies 4,54:1 — vier honderdsten boven de norm. Elke verlichting
van het vlak duwt ze eronder. Gemeten met witte tekst:
achtergrond 90% alpha groen 3,83 oranje 3,92 faalt
achtergrond 80% alpha groen 3,23 oranje 3,35 faalt
vlak 70% over wit groen 2,74 oranje 2,87 faalt
Er is dus geen "beetje lichter" mogelijk; de bodem is al bereikt in rust.
WAT WEL WERKTE MAAR IS AFGEWEZEN: een licht vlak met donkere tekst
(50/60/70% over wit, tekst #333333 / #1a1a1a / zwart, contrast 5,01 tot
7,47). Dat gaf de scherpste omslag, maar dwong de tekst naar hard zwart:
hoe meer kleur in het vlak, hoe donkerder de tekst moest zijn — bij 70%
haalde #333333 nog maar 3,58 op paars. Voorkeur ging uiteindelijk naar
witte tekst in alle drie de staten, wat rustiger is en geen tekstwissel
vraagt.
`opacity` kan hier trouwens principieel niet: die dimt het vlak ÉN de
tekst, dus wit blijft wit terwijl het vlak lichter wordt. Wil je alleen het
vlak doorzichtig maken, dan moet dat via rgba() of een menging — maar ook
dan geldt de bodem hierboven. Zie verder sectie 2h.
*/
--ozk-roze-klik: #77243b;
--ozk-blauw-klik: #00404e;
--ozk-groen-klik: #174f11;
--ozk-paars-klik: #402064;
--ozk-oranje-klik: #853200;
/* Grijs is de zesde baan. Had tot 18-8-2026 nergens een knopvariant, terwijl
het wel in het palet zit en het footervlak draagt. Wit haalt 11,04:1 — het
ruimste van alle banen, dus hier is nooit een contrastvraag. */
--ozk-grijs: #3c3c3b;
--ozk-grijs-donker: #2f2f2e;
--ozk-grijs-klik: #232322;
/* Wit in alle drie de staten — zie de toelichting hierboven. */
--ozk-klik-tekst: #FFFFFF;
}
/* -------------------------------------------------------------------------
* 2. KLEURVARIANTEN — gelden site-breed
*
* Elke variant zet zowel de BS5-knopvariabelen (zodat afgeleide toestanden
* als :disabled vanzelf meekleuren) als de concrete background/border. Dat
* dubbelop is nodig: yeti zet concrete properties, en die winnen van
* Bootstrap's var()-gebaseerde regel.
* ------------------------------------------------------------------------- */
/* 2a. .btn-primary — de gewone actieknop (roze). Was #007bff in colors.css.
Binnen een formulier wint sectie 2j (groen, 29-09-2026).
`.button--primary` staat erbij omdat Drupal die klasse zonder .btn
uitschrijft op formulierknoppen (o.a. webform Indienen/Volgende). */
.btn-primary,
.webform-submission-form .button--primary {
--bs-btn-bg: var(--ozk-roze);
--bs-btn-border-color: var(--ozk-roze);
--bs-btn-hover-bg: var(--ozk-roze-donker);
--bs-btn-hover-border-color: var(--ozk-roze-donker);
--bs-btn-active-bg: var(--ozk-roze-klik);
--bs-btn-active-border-color: var(--ozk-roze-klik);
--bs-btn-disabled-bg: var(--ozk-roze);
--bs-btn-disabled-border-color: var(--ozk-roze);
--bs-btn-color: #FFF;
--bs-btn-hover-color: #FFF;
background-color: var(--ozk-roze);
border-color: var(--ozk-roze);
color: #FFF;
}
.btn-primary:hover,
.btn-primary:focus,
.webform-submission-form .button--primary:hover,
.webform-submission-form .button--primary:focus {
background-color: var(--ozk-roze-donker);
border-color: var(--ozk-roze-donker);
color: #FFF;
}
/* Klik krijgt zijn eigen tint: zie de toelichting bij --ozk-*-klik. */
.btn-primary:active,
.webform-submission-form .button--primary:active {
background-color: var(--ozk-roze-klik);
border-color: var(--ozk-roze-klik);
color: var(--ozk-klik-tekst);
}
/* 2b. .btn-secondary — "meedoen als leiding" (groen). Kleuren 1-op-1 uit D7's
bootstrap.css; de drieledige border-color geeft de donkere onderrand
die de D7-knop had. */
.btn-secondary {
--bs-btn-bg: var(--ozk-groen);
--bs-btn-border-color: var(--ozk-groen);
--bs-btn-hover-bg: var(--ozk-groen-donker);
--bs-btn-hover-border-color: var(--ozk-groen-donker);
--bs-btn-active-bg: var(--ozk-groen-klik);
--bs-btn-active-border-color: var(--ozk-groen-klik);
--bs-btn-disabled-bg: var(--ozk-groen);
--bs-btn-disabled-border-color: var(--ozk-groen);
--bs-btn-color: #FFF;
--bs-btn-hover-color: #FFF;
background-color: var(--ozk-groen);
border-color: var(--ozk-groen) var(--ozk-groen) var(--ozk-groen-donker);
color: #FFF;
}
/* Hover donkerder, niet lichter (16-8-2026). Zie de toelichting bij
--ozk-groen-licht: dat lichtere groen haalt met witte tekst maar 2,72:1. */
.btn-secondary:hover,
.btn-secondary:focus {
background-color: var(--ozk-groen-donker);
border-color: var(--ozk-groen-donker);
color: #FFF;
}
.btn-secondary:active {
background-color: var(--ozk-groen-klik);
border-color: var(--ozk-groen-klik);
color: var(--ozk-klik-tekst);
}
/* 2c. .btn-info — de "Meer info"-knopjes in de weektabellen. Bootstrap zet
hier cyaan (#5bc0de); op verzoek in de merkkleur, dus gelijk aan
.btn-primary. Aparte klasse gehouden omdat de views hem zo uitschrijven. */
.btn-info {
--bs-btn-bg: var(--ozk-roze);
--bs-btn-border-color: var(--ozk-roze);
--bs-btn-hover-bg: var(--ozk-roze-donker);
--bs-btn-hover-border-color: var(--ozk-roze-donker);
--bs-btn-active-bg: var(--ozk-roze-klik);
--bs-btn-active-border-color: var(--ozk-roze-klik);
--bs-btn-color: #FFF;
--bs-btn-hover-color: #FFF;
background-color: var(--ozk-roze);
border-color: var(--ozk-roze);
color: #FFF;
}
.btn-info:hover,
.btn-info:focus {
background-color: var(--ozk-roze-donker);
border-color: var(--ozk-roze-donker);
color: #FFF;
}
/* 2d. .btn-ozk-vriend — donatie / Onvergetelijke Vriend (blauw).
Keuze Richard 01-08-2026: blauw betekent site-breed "hier vraagt de
stichting om geld", zodat roze de gewone actieknop kan blijven.
Gebruik: … —
de klasse VERVANGT btn-primary, niet aanvullen. */
.btn-ozk-vriend {
--bs-btn-bg: var(--ozk-blauw);
--bs-btn-border-color: var(--ozk-blauw);
--bs-btn-hover-bg: var(--ozk-blauw-donker);
--bs-btn-hover-border-color: var(--ozk-blauw-donker);
--bs-btn-active-bg: var(--ozk-blauw-klik);
--bs-btn-active-border-color: var(--ozk-blauw-klik);
--bs-btn-disabled-bg: var(--ozk-blauw);
--bs-btn-disabled-border-color: var(--ozk-blauw);
--bs-btn-color: #FFF;
--bs-btn-hover-color: #FFF;
background-color: var(--ozk-blauw);
border-color: var(--ozk-blauw);
color: #FFF;
}
.btn-ozk-vriend:hover,
.btn-ozk-vriend:focus {
background-color: var(--ozk-blauw-donker);
border-color: var(--ozk-blauw-donker);
color: #FFF;
}
.btn-ozk-vriend:active {
background-color: var(--ozk-blauw-klik);
border-color: var(--ozk-blauw-klik);
color: var(--ozk-klik-tekst);
}
/* 2e. .btn-ozk-paars — navigatie (paars). Toegevoegd 16-8-2026 zodat de
navigatiebaan óók als losse knop bestaat; tot dan was paars alleen te
krijgen binnen .featured-box, waar het hardgecodeerd stond.
Gebruik: … — vervangt
btn-primary, niet aanvullen. Wit haalt hier 8,41:1, het ruimste van alle
banen. */
.btn-ozk-paars {
--bs-btn-bg: var(--ozk-paars);
--bs-btn-border-color: var(--ozk-paars);
--bs-btn-hover-bg: var(--ozk-paars-donker);
--bs-btn-hover-border-color: var(--ozk-paars-donker);
--bs-btn-active-bg: var(--ozk-paars-klik);
--bs-btn-active-border-color: var(--ozk-paars-klik);
--bs-btn-disabled-bg: var(--ozk-paars);
--bs-btn-disabled-border-color: var(--ozk-paars);
--bs-btn-color: #FFF;
--bs-btn-hover-color: #FFF;
background-color: var(--ozk-paars);
border-color: var(--ozk-paars);
color: #FFF;
}
.btn-ozk-paars:hover,
.btn-ozk-paars:focus {
background-color: var(--ozk-paars-donker);
border-color: var(--ozk-paars-donker);
color: #FFF;
}
.btn-ozk-paars:active {
background-color: var(--ozk-paars-klik);
border-color: var(--ozk-paars-klik);
color: var(--ozk-klik-tekst);
}
/* 2f. .btn-ozk-oranje — "let op" (oranje). Toegevoegd 16-8-2026; oranje had geen
knopvariant. Bedoeld voor een actie die aandacht vraagt zonder dat het een
gewone conversie is (denk aan een deadline of een wachtlijst), niet als
tweede merkkleur. Wit haalt 4,54:1 — dat is de krapste van de banen, dus zet
hier geen kleine tekst in. */
.btn-ozk-oranje {
--bs-btn-bg: var(--ozk-oranje);
--bs-btn-border-color: var(--ozk-oranje);
--bs-btn-hover-bg: var(--ozk-oranje-donker);
--bs-btn-hover-border-color: var(--ozk-oranje-donker);
--bs-btn-active-bg: var(--ozk-oranje-klik);
--bs-btn-active-border-color: var(--ozk-oranje-klik);
--bs-btn-disabled-bg: var(--ozk-oranje);
--bs-btn-disabled-border-color: var(--ozk-oranje);
--bs-btn-color: #FFF;
--bs-btn-hover-color: #FFF;
background-color: var(--ozk-oranje);
border-color: var(--ozk-oranje);
color: #FFF;
}
.btn-ozk-oranje:hover,
.btn-ozk-oranje:focus {
background-color: var(--ozk-oranje-donker);
border-color: var(--ozk-oranje-donker);
color: #FFF;
}
.btn-ozk-oranje:active {
background-color: var(--ozk-oranje-klik);
border-color: var(--ozk-oranje-klik);
color: var(--ozk-klik-tekst);
}
/* 2g. .btn-outline-primary — de omlijnde variant (o.a. /leiding/aanmelden,
/jeugdkamp/locatie). Stond nergens gedefinieerd en viel dus terug op
yeti-blauw, waardoor een omlijnde knop naast een roze knop uit de toon
viel. Nu de merkkleur als rand en tekst, gevuld bij hover. */
.btn-outline-primary {
--bs-btn-color: var(--ozk-roze);
--bs-btn-border-color: var(--ozk-roze);
--bs-btn-hover-bg: var(--ozk-roze);
--bs-btn-hover-border-color: var(--ozk-roze);
--bs-btn-hover-color: #FFF;
--bs-btn-active-bg: var(--ozk-roze-klik);
--bs-btn-active-border-color: var(--ozk-roze-klik);
background-color: transparent;
border-color: var(--ozk-roze);
color: var(--ozk-roze);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
background-color: var(--ozk-roze);
border-color: var(--ozk-roze);
color: #FFF;
}
.btn-outline-primary:active {
background-color: var(--ozk-roze-klik);
border-color: var(--ozk-roze-klik);
color: var(--ozk-klik-tekst);
}
/* 2i. .btn-ozk-grijs — neutraal / feitelijk (grijs). Toegevoegd 18-8-2026 als
tegenhanger van `ozkgrijs` in de mail-CSS, zodat elk van de zes banen aan
beide kanten als knop bestaat. Gebruik voor een actie die geen kleurlading
hoort te hebben: een terug-knop, een sluiten, een neutrale keuze naast een
gekleurde hoofdactie. Wit haalt 11,04:1. */
.btn-ozk-grijs {
--bs-btn-bg: var(--ozk-grijs);
--bs-btn-border-color: var(--ozk-grijs);
--bs-btn-hover-bg: var(--ozk-grijs-donker);
--bs-btn-hover-border-color: var(--ozk-grijs-donker);
--bs-btn-active-bg: var(--ozk-grijs-klik);
--bs-btn-active-border-color: var(--ozk-grijs-klik);
--bs-btn-disabled-bg: var(--ozk-grijs);
--bs-btn-disabled-border-color: var(--ozk-grijs);
--bs-btn-color: #FFF;
--bs-btn-hover-color: #FFF;
background-color: var(--ozk-grijs);
border-color: var(--ozk-grijs);
color: #FFF;
}
.btn-ozk-grijs:hover,
.btn-ozk-grijs:focus {
background-color: var(--ozk-grijs-donker);
border-color: var(--ozk-grijs-donker);
color: #FFF;
}
.btn-ozk-grijs:active {
background-color: var(--ozk-grijs-klik);
border-color: var(--ozk-grijs-klik);
color: var(--ozk-klik-tekst);
}
/* -------------------------------------------------------------------------
* 2h. KLIK-BEWEGING — één regel voor alle knoppen
*
* Naast de klik-kleur zakt de knop 1px en krimpt hij 2%: fysiek wat een echte
* knop doet, en in een tiende seconde sneller te lezen dan een kleurverschil.
*
* WAAROM VORM EN NIET TRANSPARANTIE (afgewogen 18-8-2026, verzoek Richard om
* "de knop 50% transparant" te maken). Doorgerekend met witte tekst op de
* krapste banen, want palet C zet wit op élk vlak:
* opacity 0.5 roze 2,17 groen 1,99 oranje 2,07 alles faalt hard
* opacity 0.85 roze 4,03 groen 3,52 faalt
* brightness 0.85 roze 4,69 groen 4,15 oranje 4,21 groen+oranje eronder
* aparte klik-kleur roze 10,0 groen 9,71 oranje 8,56 alles ruim
* Bij opacity mengt het vlak met de witte pagina terwijl de tekst wit blijft;
* bij brightness dimmen vlak en tekst samen, dus de verhouding blijft gelijk en
* de banen die al op 4,54 staan zakken eronder. Alleen een donkerder vlak mét
* witte tekst laat het contrast stijgen — vandaar de kleuren hierboven.
*
* Een VORM-effect ontloopt die hele afweging: het raakt geen enkele kleur, dus
* het contrast blijft exact wat het was. En het geldt voor elke knop, ook voor
* knoppen die later worden toegevoegd zonder eigen -klik-variabele.
*
* `prefers-reduced-motion` zet de beweging uit voor wie daar last van heeft; de
* klik-kleur blijft dan als enige terugkoppeling, en die is op zichzelf genoeg.
* ------------------------------------------------------------------------- */
.btn:active,
.webform-submission-form .button--primary:active {
transform: translateY(1px) scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
.btn:active,
.webform-submission-form .button--primary:active {
transform: none;
}
}
/* -------------------------------------------------------------------------
* 2j. VERZENDKNOPPEN IN FORMULIEREN — groen
*
* Besluit Richard 29-09-2026: roze "past te veel bij de oude site", groen heeft
* een betere vibe. Geldt voor de verzendknop van elk formulier: webforms, het
* inlogformulier en de CiviCRM-formulieren (inschrijven, profielen). Diezelfde
* dag gold nog "verzendknop roze overal"; dat is hiermee vervangen.
*
* NIET voor linkknoppen buiten een formulier (.btn-primary als "Meer info" of
* "Aanmelden"): die volgen sectie 2a en de kleuren van hun pagina.
*
* Wit op groen haalt 4,54:1, net boven de AA-norm; daarom hover en klik
* DONKERDER (--ozk-groen-donker 6,62, --ozk-groen-klik 9,71), nooit lichter.
*
* CiviCRM (RiverLea) kleurt zijn knoppen met --crm-primary-color. Die variabele
* wordt hier op de knop zelf gezet, niet op .crm-container, zodat links, kopjes
* en andere CiviCRM-elementen hun kleur houden. De annuleerknop heeft een eigen
* kleur (--crm-secondary-color) en blijft buiten schot. Het beheer van CiviCRM
* draait op het admin-thema en laadt dit bestand niet.
* ------------------------------------------------------------------------- */
form .btn-primary,
form .button--primary,
.webform-submission-form .button--primary {
--bs-btn-bg: var(--ozk-groen);
--bs-btn-border-color: var(--ozk-groen);
--bs-btn-hover-bg: var(--ozk-groen-donker);
--bs-btn-hover-border-color: var(--ozk-groen-donker);
--bs-btn-active-bg: var(--ozk-groen-klik);
--bs-btn-active-border-color: var(--ozk-groen-klik);
--bs-btn-disabled-bg: var(--ozk-groen);
--bs-btn-disabled-border-color: var(--ozk-groen);
background-color: var(--ozk-groen);
border-color: var(--ozk-groen);
color: #FFF;
}
form .btn-primary:hover,
form .btn-primary:focus,
form .button--primary:hover,
form .button--primary:focus,
.webform-submission-form .button--primary:hover,
.webform-submission-form .button--primary:focus {
background-color: var(--ozk-groen-donker);
border-color: var(--ozk-groen-donker);
color: #FFF;
}
form .btn-primary:active,
form .button--primary:active,
.webform-submission-form .button--primary:active {
background-color: var(--ozk-groen-klik);
border-color: var(--ozk-groen-klik);
color: var(--ozk-klik-tekst);
}
.crm-container form [type="submit"]:not(.cancel):not(.crm-button-type-cancel),
.crm-container form .crm-button.crm-form-submit:not(.cancel):not(.crm-button-type-cancel) {
--crm-primary-color: var(--ozk-groen);
--crm-primary-hover-color: var(--ozk-groen-donker);
--crm-primary-text-color: #FFF;
--crm-primary-hover-text-color: #FFF;
}
.crm-container form [type="submit"]:not(.cancel):not(.crm-button-type-cancel):active,
.crm-container form .crm-button.crm-form-submit:not(.cancel):not(.crm-button-type-cancel):active {
--crm-primary-hover-color: var(--ozk-groen-klik);
}
/* -------------------------------------------------------------------------
* 3. MAAT — alleen in bezoekerscontent
*
* Vastgelegd 01-08-2026: één maat voor elke knop die een bezoeker op een
* contentpagina tegenkomt, of dat nu een CTA-link in de node-body is of de
* Indienen-knop onder een webform.
*
* Wat er vóór stond (gemeten op 1280px):
* /form/nieuwsbrief Indienen 38px hoog, 16px letter, 6/8px, 1116px breed
* /vrienden/giften CTA .btn.full 38px hoog, 16px letter, 6/8px
* /leiding/leidingtaken CTA .btn-lg 48px hoog, 20px letter, 8/16px
* Drie verschillende knoppen voor dezelfde handeling.
*
* DE MAAT: 48px hoog, 18px letter, 10/24px padding. 48px is de WCAG-norm voor
* een comfortabel aanraakdoel (minimum 44px) en was al de hoogte van de
* grootste bestaande knop, dus niets wordt kleiner. border-radius blijft 0:
* de hele site (kaarten, tabs, alerts, invoervelden) is hoekig. font-weight
* 400 in plaats van de thema-brede 300, omdat lichte letters op een verzadigde
* vlakkleur wegvallen.
*
* SCOPE:
* .node__content node-body van gewone pagina's
* .field--name-body idem, ook waar Layout Builder geen node__content zet
* .view-empty / .view-footer / .view-header tekstblokken bij een view,
* o.a. de vacature-CTA's (view event_kenmerken)
* .webform-submission-form Indienen / Volgende / Vorige
*
* Let op het verschil tussen views-AREA's (hierboven: gewone tekstblokken,
* horen bij de uniforme maat) en views-VELDEN (per rij in een smalle kolom,
* eigen doorgemeten padding — zie punt 5).
* ------------------------------------------------------------------------- */
.node__content .btn,
.field--name-body .btn,
.view-empty .btn,
.view-footer .btn,
.view-header .btn,
.webform-submission-form .btn,
.webform-submission-form .button,
.webform-submission-form input[type="submit"],
.webform-submission-form button[type="submit"],
.ozk-formulier input[type="submit"],
.ozk-formulier button[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0.625rem 1.5rem;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.35;
border-radius: 0;
border-width: 1px;
text-align: center;
text-decoration: none;
}
/* Knoppen van core-formulieren (klasse ozk-formulier, zie ozk-formulieren.css)
kwamen op de themabrede letter 300; de webformknoppen staan op 400, want lichte
letters op een verzadigd vlak vallen weg (29-09-2026). */
.ozk-formulier input[type="submit"],
.ozk-formulier button[type="submit"] {
font-weight: 400;
}
/* Webform hangt `form-control` aan de Indienen-knop (naast btn btn-primary).
Die klasse is voor invoervelden bedoeld en zet width:100%, waardoor de knop
over de volle formulierbreedte uitrekte — gemeten 1116px op /form/nieuwsbrief.
Hier teruggebracht naar dezelfde maat als een knop in een .ozk-btn-group. */
.webform-submission-form .btn,
.webform-submission-form .button,
.webform-submission-form input[type="submit"],
.webform-submission-form button[type="submit"] {
width: auto;
min-width: 16rem;
max-width: 100%;
}
/* Knoptekst nooit onderstrepen, ook niet bij hover. De roze linkkleur uit
custom.css geeft tekstlinks hun affordance; een knop heeft die al door zijn
vlak, en een streep eronder maakt het rommelig. */
.node__content .btn:hover,
.node__content .btn:focus,
.field--name-body .btn:hover,
.field--name-body .btn:focus,
.view-empty .btn:hover,
.view-footer .btn:hover {
text-decoration: none;
}
/* Knoppen op /account (Naar het intranet, Naar het ouderportaal, Tekenbeet
melden): de kleine maat, 44px hoog en 16px letter, zo dik als de balken van
het stappenplan ernaast (keuze Richard 29-09-2026; eerst 48px/18px, dat
vond hij te groot naast die balken). De ouderportaalknop komt uit een eigen
sjabloon en viel eerst buiten elke maat (34px, 13px, dun). */
/* Ook "Kind toevoegen" en "Andere ouder toegang geven" in het ouderportaal
(btn-sm, 31px/14px/dun tot 29-09-2026; Richard: naar de accountmaat). */
.ozk-account-card .btn.ozk-account-knop,
.ozk-account-card .btn.ozk-gezinsactie__knop {
min-height: 44px;
padding: 0.5rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.35;
}
/* Kind toevoegen / Andere ouder: outline in paars (ouderportaal.css), bij
hover gevuld zoals Tekenbeet melden (Richard 30-09-2026); voorheen alleen
een onderstreping. */
.ozk-account-card .btn.ozk-gezinsactie__knop:hover,
.ozk-account-card .btn.ozk-gezinsactie__knop:focus {
background-color: var(--ozk-paars, #663399);
border-color: var(--ozk-paars, #663399);
color: #fff;
text-decoration: none;
}
/* Bootstrap's btn-lg/btn-sm zouden de uniforme maat weer uit elkaar trekken.
In de node-body staan ze historisch door elkaar (btn-lg op /leiding/
leidingtaken, kaal .btn op /vrienden/giften); ze worden hier gelijkgetrokken
in plaats van uit alle bodies weggehaald, zodat oude markup vanzelf goed
staat en een redacteur die btn-lg typt geen afwijkende knop krijgt. */
.node__content .btn-lg,
.node__content .btn-sm,
.field--name-body .btn-lg,
.field--name-body .btn-sm,
.view-empty .btn-lg,
.view-footer .btn-lg,
.view-header .btn-lg {
min-height: 48px;
padding: 0.625rem 1.5rem;
font-size: 1.125rem;
}
/* -------------------------------------------------------------------------
* 4. KNOPPEN NAAST ELKAAR — .ozk-btn-group
*
* Wens Richard: twee knoppen naast elkaar 50/50 zolang ze passen, en anders
* (smalle contentkolom, mobiel) elk over de volle breedte.
*
* Gebruik: met daarin losse
.
*
* Bewust GEEN media query. De beslissing hangt niet af van de viewport maar
* van de beschikbare kolombreedte, en die verschilt per layout: op 1280px is
* de contentkolom in de 6-3-3-indeling van /leiding/leidingtaken maar ~534px,
* terwijl diezelfde pagina op 768px (kolommen gestapeld) juist ~720px heeft.
* Bootstrap's d-grid/d-md-flex schakelt op viewportbreedte en zet de knoppen
* daardoor precies verkeerd om.
*
* De truc zit in `flex: 1 1 0` + `white-space: nowrap`. Basis 0 met gelijke
* groei maakt de knoppen exact even breed — 50/50, ongeacht labellengte. De
* nowrap bepaalt het omslagpunt: een flex-item krimpt niet onder zijn
* min-content, en dat is bij nowrap de volle tekstbreedte. Past het langste
* label niet in de helft, dan wrapt de tweede knop naar de volgende regel en
* groeit elke knop daar naar 100%.
*
* Een vaste flex-basis (16rem) werkte niet: dan houdt de knop wel de halve
* breedte maar breekt het label over twee regels — gemeten 71px hoge knoppen
* naast 48px elders.
* ------------------------------------------------------------------------- */
.node__content .ozk-btn-group,
.field--name-body .ozk-btn-group,
.view-empty .ozk-btn-group,
.view-footer .ozk-btn-group,
.view-header .ozk-btn-group {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.node__content .ozk-btn-group > .btn,
.field--name-body .ozk-btn-group > .btn,
.view-empty .ozk-btn-group > .btn,
.view-footer .ozk-btn-group > .btn,
.view-header .ozk-btn-group > .btn {
flex: 1 1 0;
white-space: nowrap;
}
/* Eén knop in de groep is vol breed — zo staat een enkelvoudige CTA even zwaar
als een paar. Die mag zijn label wél afbreken: op een smal scherm is een
knop van twee regels beter dan tekst die buiten zijn kader steekt. */
.node__content .ozk-btn-group > .btn:only-child,
.field--name-body .ozk-btn-group > .btn:only-child,
.view-empty .ozk-btn-group > .btn:only-child,
.view-footer .ozk-btn-group > .btn:only-child,
.view-header .ozk-btn-group > .btn:only-child {
flex: 1 1 100%;
white-space: normal;
}
/* -------------------------------------------------------------------------
* 5. UITZONDERING — knoppen in views-VELDEN
*
* De CTA onderin de kampkaartjes (`.views-field .btn.full`) staat in een
* bewust smalle kolom: 96px in de md-zone, 136px bij 992-1199px. Daar past de
* uniforme 24px zijpadding niet, en een afgebroken label evenmin. Deze knoppen
* houden daarom hun eigen doorgemeten maatvoering.
*
* GEMETEN bij font-size 20px + 32px padding, benodigde knopbreedte:
* "Meer informatie" 177px, "Meer info" 118px, "Nieuwsbrief" 141px. Met het
* korte label past nowrap overal behalve in de md-zone, waar de kolommen
* daarom stapelen (zie custom.css punt 8).
*
* De selector `#main-wrapper .views-field .btn.full` heeft een id en wint dus
* hoe dan ook van de maatregels hierboven; die regel blijft fysiek in
* custom.css bij de rest van de kolomlogica.
*
* Hetzelfde geldt voor de "Meer info"-knop onderin een kaartje
* (`.featured-box`). Die kaartjes staan in de node-body en vielen dus onder de
* uniforme maat, terwijl hun kolom net zo smal is: gemeten op /leiding/aanmelden
* 92px op een viewport van 1280px. Met 2 x 24px zijpadding blijft daar 44px
* over voor het label. (Ter vergelijking: ook met de oude btn-lg — 20px letter,
* 16px padding — paste "Meer info" daar niet op één regel; die kaart is
* gewoon smal. De compacte maat maakt het wel zo ruim mogelijk.)
*
* Twee klassen, net als `.node__content .btn` hierboven — maar deze regels
* staan later in het bestand en winnen daarmee bij gelijke specificiteit.
* ------------------------------------------------------------------------- */
.views-field .btn,
.featured-box .btn {
min-height: 0;
padding: 0.5rem 1rem;
font-size: 1.25rem;
display: inline-block;
align-items: initial;
justify-content: initial;
}
/* 5b. "MEER INFO" IN DE CTA-KAARTEN: PAARS, NIET ROZE
*
* Besluit Richard 4-8-2026. Deze knop stuurt de bezoeker door naar een
* informatiepagina — dat is navigatie, en die baan is paars (#663399, zie
* huisstijl-kleursemantiek-banen). Roze is de kleur van een échte actie
* ("Meld je aan", "Doneren"); die op een doorverwijsknop zetten maakte de vier
* roze vlakken per kaart tot een brij en gaf de knop dezelfde urgentie als een
* aanmelding. Witte tekst op paars haalt 8,41:1, het ruimste van alle banen.
*
* Alleen binnen .featured-box: elders blijft .btn-primary de merkkleur. De hover
* volgt hetzelfde patroon als de andere knoppen — een donkerder variant van de
* eigen kleur, hier het paars uit superfish-ozk.css. */
.featured-box .btn-primary,
.featured-box .btn-info {
background-color: var(--ozk-paars);
border-color: var(--ozk-paars);
color: #FFF;
}
.featured-box .btn-primary:hover,
.featured-box .btn-primary:focus,
.featured-box .btn-info:hover,
.featured-box .btn-info:focus {
background-color: var(--ozk-paars-donker);
border-color: var(--ozk-paars-donker);
color: #FFF;
}
/* De kaartknop volgt dezelfde drietrap als de andere knoppen. */
.featured-box .btn-primary:active,
.featured-box .btn-info:active {
background-color: var(--ozk-paars-klik);
border-color: var(--ozk-paars-klik);
color: var(--ozk-klik-tekst);
}
/* -------------------------------------------------------------------------
* 6. BOOTSWATCH-GROEN AFVANGEN
*
* De yeti-CDN geeft `.btn-success` zijn eigen groen (#43ac6a) met witte tekst:
* een groen dat in geen enkele OZK-lijst staat, en met 2,86:1 ook onder de norm.
* De doneerknop op /vrienden gebruikt die klasse. Hier teruggebracht naar het
* OZK-groen #28881e met witte tekst (4,54:1). Gemeten 4-8-2026.
*
* Let op de semantiek: volgens de kleurbanen is donatie eigenlijk blauw
* (.btn-ozk-vriend, #006E83). Deze regel laat de knop groen zoals hij nu is en
* repareert alleen de kleur en het contrast — de vraag of hij blauw moet worden
* is een aparte keuze.
* ------------------------------------------------------------------------- */
.btn-success,
.btn-success:visited {
background-color: #28881e;
border-color: #28881e;
color: white;
}
/* Was hardgecodeerd #357F2A — het uitwijkgroen uit de oude set, de enige plek in
dit bestand die niet via een variabele liep (gevonden 16-8-2026 bij de
kleurscan). Nu dezelfde donkere variant als de andere groene knop. */
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
background-color: var(--ozk-groen-klik);
border-color: var(--ozk-groen-klik);
color: var(--ozk-klik-tekst);
}
/* -------------------------------------------------------------------------
* 7. HULPKLASSEN
* ------------------------------------------------------------------------- */
.btn-full { width: 100% !important; }
/* Knoppenrij met gelijke maten (verzoek Richard, 08-09-2026, voor /stijlgids).
Een knop groeit normaal met zijn label, dus een rij knoppen met verschillende
teksten wordt een trap: op de stijlgids liep dat van 238px (btn-ozk-grijs) tot
417px (btn-secondary). In een demo -- of in een rij gelijkwaardige keuzes --
moet de vorm te vergelijken zijn, niet de labellengte.
auto-fit met minmax vult de breedte met zoveel gelijke kolommen als er passen:
twee op een contentkolom van 1086px, één zodra er minder dan ~470px is. Het
min(100%, ...) voorkomt dat een kolom breder wordt dan het scherm op mobiel.
De knoppen zelf worden flex zodat een label dat over twee regels valt netjes
gecentreerd blijft en alle knoppen in een rij even hoog zijn. */
.knoppendemo {
display : grid;
grid-template-columns : repeat(auto-fit, minmax(min(100%, 470px), 1fr));
gap : 10px;
margin-bottom : 1rem;
}
/* Vangnet: het tekstformaat 'full' heeft filter_autop aan, dus elk regeleinde
tussen twee knoppen in de node-body wordt een
. In een grid is die
zelf een item en vult hij de tweede kolom, waardoor alle knoppen in kolom 1
onder elkaar bleven staan (gemeten 08-09-2026). De body zet ze nu op een
regel; deze regel houdt het goed als iemand ze in de editor uit elkaar haalt. */
.knoppendemo br {
display : none;
}
.knoppendemo .btn {
width : 100%;
display : flex;
align-items : center;
justify-content : center;
text-align : center;
}
/* ======================================================================== */
/* 6. DE a.button-FAMILIE OOK OP (checklist op /account) */
/* ======================================================================== */
/* De stappenplan-/checklistknoppen (a.button.indent.success|warning|…) zijn een
letterlijke D7-port en staan in ozk-porto-port.css (en nogmaals in custom.css).
Die selector matcht alleen . Sinds 06-09-2026 rendert de checklist een
regel ZONDER actie als — views civicrm_participant,
displays btn_gld_c, btn_gld_i en btn_gld_p ("Het kampgeld is betaald",
"Overzicht kampgeld"): besluit Richard, het kampgeldoverzicht krijgt geen link
meer naar /civicrm/user. Zo'n span kreeg wel de kleur (.success) en .indent,
maar geen breedte, padding, rand of Rambla: gemeten 15-09-2026 als inline
tekst van 219x21px tussen knoppen van 492x44px. Hier krijgt span.button
dezelfde geometrie; hover-opacity en de linkcursor blijven bij . Dezelfde
regel dekt de dichte kaartknop span.button.ozk-btn-dicht (ozk-kaarten.css),
die tot nu toe een eigen kopie had. */
span.button {
width : 100%;
padding : 10px 5px 10px 5px;
font-family : Rambla, Arial, Helvetica, sans-serif;
font-size : 14px;
text-decoration : none;
border : 1px solid;
border-color : darkgray;
border-radius : 0;
display : block;
cursor : default;
}
/* Icoon verticaal in het midden (Richard 10-10-2026). Het icoon (24px, float
uit .buttonicon) stond 4,5px onder het midden van de tekstregel (22,4px). Het
vak krijgt de hoogte van één regel (1lh) en centreert het icoon daarin. Geldt
voor de checklist, de knoppen in Aanmelding op /account en de ouderportaalknop;
de kampkaarten (.kader .boxbig, ozk-kaarten.css) hebben hun eigen icoonkolom
en vallen erbuiten. */
a.button.indent .buttonicon:not(.kader .buttonicon),
span.button.indent .buttonicon:not(.kader .buttonicon) {
display : flex;
align-items : center;
height : 1lh;
margin : 0 3px !important;
}
a.button.indent .buttonicon:not(.kader .buttonicon) .material-symbols-outlined,
span.button.indent .buttonicon:not(.kader .buttonicon) .material-symbols-outlined {
line-height : 1;
}
/* ======================================================================== */
/* 7. PASSKEY-KNOPPEN: BEZIG-TOESTAND EN STATUSREGEL */
/* ======================================================================== */
/* De module wa zet tijdens passkey-acties .wa-busy en aria-busy op de knop en
gebruikt .wa-status--* voor de terugkoppeling eronder. Een button kan een
ronde spinner via ::after tonen; de loginknop is een input en krijgt daarom
een bewegende lichte streep. De statuskleuren volgen de sitekleuren.
Achtergrond en tekst zijn bewust licht en rustig gehouden. Zie ook
/usr/local/bin/login/passkeys.md. */
.wa-busy[aria-busy="true"] {
cursor: progress;
position: relative;
}
button.wa-busy[aria-busy="true"]::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-left: .5em;
vertical-align: -0.15em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: ozk-draai .8s linear infinite;
}
input.wa-busy[aria-busy="true"] {
background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
background-size: 40% 100%;
background-repeat: no-repeat;
animation: ozk-streep 1.2s linear infinite;
}
@keyframes ozk-draai {
to {
transform: rotate(360deg);
}
}
@keyframes ozk-streep {
from {
background-position: -40% 0;
}
to {
background-position: 140% 0;
}
}
@media (prefers-reduced-motion: reduce) {
button.wa-busy[aria-busy="true"]::after,
input.wa-busy[aria-busy="true"] {
animation: none;
}
}
#passkey-status.wa-status {
margin-top: .75rem;
padding: .6rem .9rem;
border-left: 4px solid;
font-size: .95rem;
}
#passkey-status.wa-status--info {
border-color: #2f7fa5;
background: #eef6fa;
color: #1c4c63;
}
#passkey-status.wa-status--success {
border-color: #43ac6a;
background: #eef8f1;
color: #1f5a35;
}
#passkey-status.wa-status--error {
border-color: #d9480f;
background: #fdf1ec;
color: #7a2a08;
}
/* ======================================================================== */
/* 8. NIEUWSBRIEFVRAAG BIJ DE KAMPAANMELDING ALS TWEE KEUZEKNOPPEN */
/* ======================================================================== */
/* Keuzerondjes van PART_TERMS:akkoord_nieuwsbrief (CiviCRM-profiel
nieuwsbrief_aanmelding) in dezelfde stijl als de keuzeknoppen van de webforms
(besluit Richard 29-09-2026; tot dan groene knoppen met vinkje): een omlijnd vak
met het rondje erin, de hele knop klikbaar, de gekozen knop met een paarse rand
en een lichtpaarse achtergrond. Het haakje is het data-attribuut dat CiviCRM zelf
zet, niet het veld-id: dat verschilt tussen dev en productie. */
.crm-multiple-checkbox-radio-options:has(input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"]) {
display: flex;
flex-wrap: wrap;
gap: .75rem;
}
/* Riverlea zet .crm-option-label-pair op een grid met een smalle kolom voor het
rondje; vandaar !important op display (gemeten 28-09-2026 op dev). */
.crm-option-label-pair:has(> input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"]) {
display: flex !important;
align-items: center;
justify-content: center;
gap: .45em;
flex: 1 1 0;
min-width: 9rem;
position: relative;
margin: 0;
padding: 9px 8px;
border: 3px solid #ccc;
border-radius: 3px;
background: #fff;
cursor: pointer;
}
input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"] {
position: static;
opacity: 1;
appearance: auto;
width: 1.05em;
height: 1.05em;
margin: 0;
accent-color: var(--ozk-paars, #663399);
cursor: pointer;
}
input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"] + label {
padding: 0 !important;
border: 0;
background: none;
color: #3c3c3b;
font-weight: 400;
white-space: nowrap;
cursor: pointer;
}
/* De hele knop klikbaar: een onzichtbaar vlak van het label over het vak. */
input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"] + label::after {
content: "";
position: absolute;
inset: 0;
}
.crm-option-label-pair:has(> input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"]:checked) {
border-color: var(--ozk-paars, #663399);
background-color: #F3EEF8;
}
input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"]:checked + label {
color: var(--ozk-paars, #663399);
}
.crm-option-label-pair:has(> input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"]):hover {
border-color: #8559B3;
}
.crm-option-label-pair:has(> input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"]:focus-visible) {
box-shadow: 0 0 0 3px rgba(102, 51, 153, .3);
}
input[data-crm-custom="PART_TERMS:akkoord_nieuwsbrief"]:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* =========================================================================
UPLOADKNOP — blauw omlijnd (besluit Richard 29-09-2026)
=========================================================================
De knop "Uploaden" van een bestandsveld was precies gelijk aan de
verzendknop (roze, even groot), zodat je niet zag welke knop het formulier
verstuurt. Nu een tussenstap: OZK-blauw als rand en tekst op wit (blauw =
informatie in palet C), bij hover gevuld. Verzenden blijft de enige roze knop. */
.webform-submission-form .form-managed-file input[type="submit"],
form.ozk-formulier .form-managed-file input[type="submit"] {
--bs-btn-bg: #fff;
--bs-btn-color: #006E83;
--bs-btn-border-color: #006E83;
--bs-btn-hover-bg: #006E83;
--bs-btn-hover-color: #fff;
--bs-btn-hover-border-color: #006E83;
background-color: #fff;
color: #006E83;
border: 2px solid #006E83;
min-width: 0;
min-height: 44px;
padding: .4rem 1rem;
font-size: 1rem;
font-weight: 600;
}
.webform-submission-form .form-managed-file input[type="submit"]:hover,
form.ozk-formulier .form-managed-file input[type="submit"]:hover {
background-color: #006E83;
color: #fff;
}
/* Voor browsers met JavaScript actief handelt Drupal's fileAutoUpload de
upload automatisch af zodra een bestand gekozen wordt. De "Uploaden"-knop
moet dan verborgen zijn (js-hide), anders klikken gebruikers erop tijdens
de lopende upload wat leidt tot dubbele AJAX-requests en vastlopers. */
html.js .form-managed-file input[data-drupal-selector$="-upload-button"],
html.js .form-managed-file input.js-hide {
display: none !important;
}