/* =========================================================================
OZK BLOKVORM — panelen en omrande boxen in de smalle kolommen
=========================================================================
Besluit Richard, 1 aug 2026 ("Combi: kop óf rand"), na de kleur- en
contrastanalyse van diezelfde dag. HERZIEN 2 aug 2026: "Alles kopbalk" —
variant i-kop uit de kleurdemo (varianten.html, groep Infoboxen).
DE REGEL, in één zin: een blok of box die een eigen boodschap draagt, krijgt
een gekleurde kopbalk boven een licht paneel; een alert die als losse nuance
MIDDEN IN een lopende tekst staat, houdt de rustige rand-vorm.
Het verschil met de vorige variant zit niet in de CSS maar in de bron: de
meldingsboxen in de hoofdkolom hadden geen kop-element, en kregen er daarom
in de views-header één (`.ozk-paneel` + ``). In de kleurdemo kwam die
tekst nog uit CSS `content:` — dat is voor een demo prima, maar een
schermlezer leest het niet betrouwbaar voor, dus op productie hoort de kop
in de HTML. Zie sectie 2.0 voor welke boxen wél en niet zijn omgezet.
KLEUR VOLGT BETEKENIS, niet smaak — zie de memory huisstijl-kleursemantiek-
banen: paars #663399 = navigatie (het menublok), blauw #006E83 = informatie
(al het overige). Oranje en groen blijven weg uit deze laag: die dragen al
status-betekenis in de kaarten en tabellen. Beide combinaties halen WCAG AA
met witte tekst: 8,41:1 op paars, 5,90:1 op blauw.
TWEE MANIEREN OM EEN BLOK TE VORMEN
1. Automatisch, op de smalle kolommen (.col-lg-3): via :has(> h2). Dat is de
default en vergt geen configuratie per blok. :has() is in dit theme een
geaccepteerd patroon (custom.css r.69/893, ozk-kaarten.css r.94/159,
ozk-d7-parity-extra.css r.98/162/352).
2. Expliciet, met een class op de blok-wrapper — voor blokken buiten de
smalle kolommen of om de automatiek te overrulen. Dit is de route die de
meldingsboxen in de hoofdkolom volgen; hun kop is een ``, want daar is
`` al de bloktitel:
.ozk-paneel licht paneel + gekleurde kopbalk
.ozk-paneel--paars kleurvariant van de kopbalk (default blauw)
.ozk-omrand alleen een gekleurde rand
.ozk-omrand--paars kleurvariant van de rand
.ozk-geen-paneel opt-out: dit blok blijft plat, ook mét titel
LAADVOLGORDE: dit bestand hoort in de 'theme'-groep met weight 103, ná
ozk-knoppen.css (102). De Bootswatch-yeti-CDN zit in de 'component'-groep en
zet zelf maten op h2 en .alert-*; vanuit 'component' zou dit bestand daar
stil onder verdwijnen. Zie de toelichting in bario_sub.libraries.yml.
========================================================================= */
/* =========================================================================
1.0 BLOK MÉT TITEL → LICHT PANEEL + GEKLEURDE KOPBALK
========================================================================= */
/* HET HELE BLOK schuift naar de menulijn, niet alleen zijn kop.
superfish-ozk.css §3.2 (r.293 en r.307) schuift `ul.sf-vertical` en
`.col-lg-3 h2` bewust elk 15px naar links, zodat kop en menu op één
linkerlijn liggen. Zolang alleen de KOP die verschuiving kreeg, stond de
bodytekst van een paneel 15px naar rechts ten opzichte van zijn eigen
kopbalk (gemeten 2 aug 2026: kop-tekst 662,6 / body-tekst 677,6).
De verschuiving hoort dus op het blok: dan liggen grond, kopbalk en content
over elkaar en volstaat één padding voor alles wat erin staat. */
/* ALLE blokken in de kolom schuiven mee, niet alleen de panelen. Zodra de
panelen op 649 staan en een omrande box (de cadeaubox, de kampweken-box) op
664 blijft, springt die box zichtbaar naar rechts uit de lijn. Eén
linkerlijn voor de hele kolom is het hele punt van deze verschuiving. */
.col-lg-3 .block {
margin-left : -15px !important;
width : calc(100% + 15px) !important;
}
.col-lg-3 .block:has(> h2):not(.ozk-geen-paneel),
.ozk-paneel,
#block-bario-sub-vacature-meer,
#block-bario-sub-vacature-favorieten {
background : whitesmoke;
margin-bottom : 1.1rem;
}
/* De kopbalk vult zijn blok. De -15px uit §3.2 moet hier juist NEUTRAAL: die
zit nu in de blok-verschuiving hierboven, en twee keer schuiven zou de balk
op -30px zetten. De margin-bottom van 15px uit §3.2 gaat ook weg — de kop
plakt tegen zijn paneel.
Padding 15px, niet .85rem: dat is exact de zijpadding van de menu-items
(§3 r.336), zodat kop-, body- en menutekst alle drie op 664 uitkomen. */
/* RAMBLA IS HIER BEWUST — NIET "OPRUIMEN" NAAR OPEN SANS.
De typografieschaal (variant B, besluit 1 aug 2026) schrijft één font voor:
Open Sans, groot licht (300) en klein halfvet (600). Dat geldt voor
INHOUDELIJKE koppen. Op 4 aug 2026 is daar de regel bij gekomen dat Rambla
mag blijven als *chrome*: de omkadering van de pagina — blokkopbalken,
badges, navigatie en de footerkoppen — tegenover Open Sans voor alles wat
inhoud is. Een meting van diezelfde dag bevestigde dat de site die scheiding
al volgt: alle 53 Rambla-koppen zijn chrome (40 footerkoppen, 12
zijkolom-blokkoppen, 1 paneelkop) en geen enkele inhoudelijke kop staat erin.
Zie kleurdemo/huisstijl.html sectie 3 voor de vergelijking. */
.col-lg-3 .block:has(> h2):not(.ozk-geen-paneel) > h2,
.ozk-paneel > h2,
.ozk-paneel > h3,
#block-bario-sub-vacature-meer > h2,
#block-bario-sub-vacature-favorieten > h2 {
background : #006E83 !important;
color : #ffffff !important;
font-family : Rambla, Arial, Helvetica, sans-serif !important;
font-size : 1.05rem !important;
font-weight : 400 !important;
text-transform : none !important;
letter-spacing : 0 !important;
padding : .55rem 15px !important;
border-radius : 0 !important;
margin-left : 0 !important;
margin-top : 0 !important;
margin-bottom : 0 !important;
width : auto !important;
}
/* Navigatie is paars. De menublokken in de kolom dragen .block-superfish
("Kampen" en "Menu"); alle andere blokken dragen informatie en blijven blauw.
De :not() hier is nodig voor de SPECIFICITEIT, niet voor de logica: de blauwe
regel hierboven telt zijn `:not(.ozk-geen-paneel)` mee en komt op (0,3,2).
Zonder dezelfde teller bleef deze regel op (0,2,2) steken en werden ook de
menublokken blauw. */
.col-lg-3 .block-superfish:has(> h2):not(.ozk-geen-paneel) > h2,
.ozk-paneel--paars > h2,
.ozk-paneel--paars > h3 {
background : #663399 !important;
}
/* Binnenruimte van het paneel: dezelfde 15px als de kopbalk en de menu-items,
zodat alle tekst in de kolom op één linkerlijn staat. */
.col-lg-3 .block:has(> h2):not(.ozk-geen-paneel):not(:has(ul.sf-menu)) > .content,
.ozk-paneel > .content,
.ozk-paneel > .ozk-paneel__body,
#block-bario-sub-vacature-meer > .content,
#block-bario-sub-vacature-favorieten > .content {
padding : .2rem 15px .7rem;
}
/* Een paneel dat niet uit een Drupal-blok komt (de meldingsboxen in de
views-headers) heeft geen `.content`-wrapper van het theme; daar draagt
`.ozk-paneel__body` diezelfde binnenruimte. De laatste alinea erin mag geen
staartmarge houden, anders zakt de onderrand van het paneel scheef. */
.ozk-paneel > .ozk-paneel__body > *:last-child {
margin-bottom : 0;
}
.col-lg-3 .block:has(ul.sf-menu) > .content {
padding : 0 !important;
}
/* De menu-box droeg zijn eigen -15px (§3.2 r.293). Nu het blok die
verschuiving draagt zou dat samen -30px worden en stak het menu links buiten
de kolom. Hier dus neutraliseren — het menu schuift mee met zijn blok. */
.col-lg-3 .block:has(ul.sf-menu) ul.sf-vertical {
margin-left : 0 !important;
width : 100% !important;
}
/* =========================================================================
2.0 LOSSE ALERT ZÓNDER TITEL → ALLEEN EEN GEKLEURDE RAND
========================================================================= */
/* WAT HIER NOG ONDER VALT, na het besluit "alles kopbalk" van 2 aug 2026.
De meldingsboxen die een eigen boodschap dragen (de aanmeld-alerts in de
views-headers van beschikbaarheid_zomerkampen) zijn omgezet naar
`.ozk-paneel` + `` en vallen dus onder sectie 1.0. Wat overblijft zijn de
alerts die MIDDEN IN een lopende bodytekst staan — voetnoten en nuances,
zoals de sterretjesregels op /kinderkamp/bagage of de aanvulling voor het
topkamp op /ouders/kampregels. Zo'n regel is geen box met een eigen
onderwerp; een kopbalk zou daar een titel moeten verzinnen voor iets wat er
geen heeft. Die houden de rustige vorm: rand, geen vulling.
De border-left-width expliciet terug naar 2px omdat custom.css r.1072 op
.alert-info een dikke accentrand links zet; die zou hier als een scheve
vierde zijde lezen. */
.col-lg-3 .alert-light,
.col-lg-3 .alert-info,
.col-lg-6 .alert-info,
.ozk-omrand {
background-color : transparent !important;
border : 2px solid #006E83 !important;
border-left-width : 2px !important;
border-radius : 0 !important;
padding : .7rem .85rem !important;
}
.ozk-omrand--paars {
border-color : #663399 !important;
}
/* Ruimte onder een omrand blok (verzoek Richard, 08-09-2026). De basisregel
hierboven staat in een selectorlijst met .col-lg-3 .alert-* — die erven hun
margin van Bootstrap's .alert. Een .ozk-omrand is een gewone div zonder die
class, dus die had geen marge en plakte tegen het volgende blok aan; de
marge van de
erin zit binnen de rand en helpt daar niet.
1rem = dezelfde afstand als tussen twee meldingsboxen. */
.ozk-omrand {
margin-bottom : 1rem;
}
/* UITZONDERING: een meldingsbox die BINNEN een paneel-blok staat heeft de
kopbalk al als begrenzing. Zonder deze regel staat er een omrande box in een
omkaderd paneel — twee kaders om dezelfde tekst, en dat leest als een fout.
Doet zich voor zodra een views-blok met een alert in de header een titel
krijgt (bijv. "Leeftijdscriteria" op de aanmeldpagina). Specificiteit (0,3,1)
verslaat de basisregel hierboven (0,2,0). */
.col-lg-3 .block:has(> h2) .alert-light,
.col-lg-3 .block:has(> h2) .alert-info,
.ozk-paneel .alert-light,
.ozk-paneel .alert-info {
background-color : transparent !important;
border : none !important;
padding : 0 !important;
margin : 0 !important;
}
/* De quote-box en de kampweken-box hebben hun eigen rand (custom.css r.1313 en
r.1487) en vallen daarmee al in de omrand-familie; hun kleur staat daar. */
/* =========================================================================
3.0 MOBIEL (< 768px)
========================================================================= */
/* CONTENTRIJEN IN EEN BODYVELD. De icoonblokken op /ouders/uniek (en elders
waar de body een Bootstrap-grid bevat) stonden op mobiel van rand tot rand,
terwijl elk ander blok op de pagina 12px marge houdt.
Oorzaak: zo'n `.row` in het bodyveld zet `margin: 0 -12px` om de gutter van
zijn kolommen te compenseren — precies evenveel als de kolom eromheen aan
padding heeft, dus netto begint die inhoud op 0 in plaats van op 12.
Onder 768px staan die kolommen toch onder elkaar; de compensatie heeft daar
geen functie meer en kost alleen de marge. */
@media (max-width: 767.98px) {
.field--name-body > .row,
.field--name-body .block > .content > .row {
margin-left : 0 !important;
margin-right : 0 !important;
}
}
/* superfish-ozk.css r.328 draait de -15px onder 767.98px terug, omdat de
menu-box en de kop daar anders 15px links van de bodytekst zouden staan (de
kop viel deels buiten beeld). De kopbalk moet die reset volgen, anders steekt
hij als enige element 15px uit. Zelfde grens, bewust. */
@media (max-width: 767.98px) {
/* ALLE blokken terug, niet alleen de panelen met een kop. Stond die reset
te smal, dan hielden de omrande boxen (kampweken-box, cadeaubox) hun
-15px: op een telefoon liep hun rand daardoor tot tegen de schermrand,
zonder marge ernaast. */
.col-lg-3 .block,
.ozk-paneel {
margin-left : 0 !important;
width : 100% !important;
}
/* Verticale ruimte. Op desktop staan deze blokken naast de content en zorgt
de kolomafstand voor lucht; op mobiel vallen ze eronder en plakte de
laatste box (de kampweken-box, margin-bottom 0) direct tegen het volgende
blok. 1,5rem is iets ruimer dan de 1,1rem tussen panelen onderling —
gestapeld heeft het oog meer scheiding nodig dan naast elkaar. */
.col-lg-3 .block {
margin-bottom : 1rem !important;
}
.col-lg-3 {
margin-bottom : .5rem;
}
}
/* Blokkop in een h4-veldwrapper (21-09-2026)
------------------------------------------------------------------------
Views wikkelt sommige velden in