/* ======================================================================== */ /* THEME & ACHTERGRONDKLEUREN: BOVENKANT ORANJE (META), ONDERKANT GRIJS (CSS) */ /* ======================================================================== */ html, body { background-color: #3c3c3b; margin: 0; min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; font-size: 16px !important; color: #343a40 !important; /* Duidelijk leesbaar donkergrijs */ line-height: 1.6 !important; /* Prettige regelafstand voor lange teksten */ } #page-wrapper { background-color: #ffffff; min-height: 100vh; display: flex; flex-direction: column; } #page { background-color: #ffffff; flex: 1 0 auto; display: flex; flex-direction: column; } #main-wrapper { flex: 1 0 auto; } footer.site-footer { background: #3c3c3b !important; margin-top: auto; } /* Zorg dat de header spierwit blijft (Yeti's 'light' is soms heel lichtgrijs) */ #navbar-main { background-color: #ffffff !important; background-image: none !important; border: none !important; } /* ======================================================================== */ /* ### LINKKLEUR IN OZK-PAARS */ /* ======================================================================== */ /* D11 erfde Yeti's blauw (#008CBA) voor alle links, D7 gebruikt de huisstijl- roze. Gemeten op www.onvergetelijk.nl: normaal #c13c61 (rgb 193,60,98) en bij hover #C84E71 (rgb 200,78,113) — dus een iets lichtere tint, geen donkerdere. Via de Bootstrap-variabelen i.p.v. losse `a {}`-regels: dan volgen hover, focus, active en alle componenten die op --bs-link-* bouwen automatisch mee, zonder een stapel !important. De -rgb-varianten horen erbij; Bootstrap zet rgba()-kleuren (bv. focus-ringen) daaruit samen. */ /* !important op de custom properties zelf: de CDN-bootstrap laadt NA de thema-aggregatie en zet ze ook op `:root` (specificiteit 0,1,0 — hoger dan `body`, dus een tweede declaratie op body verliest). Met !important is dit de enige plek waar de linkkleur staat en volgt elk component dat op --bs-link-* bouwt automatisch mee. */ /* Sinds 28-08-2026 paars in plaats van het roze (besluit Richard). Twee redenen: het roze haalde op de grijze labelkolom van de tabellen maar 3,43:1, waar WCAG AA 4,5:1 vraagt -- paars haalt daar 5,61 en op wit 8,41 -- en het beeld wordt rustiger nu links niet meer dezelfde kleur hebben als de knoppen. De knoppen houden hun roze; dat blijft de actiekleur. */ :root { --bs-link-color: #663399 !important; --bs-link-color-rgb: 102, 51, 153 !important; --bs-link-hover-color: #7a45b3 !important; --bs-link-hover-color-rgb: 122, 69, 179 !important; } /* De variabelen alleen zijn niet genoeg: de CDN-bootstrap (bario_sub.libraries.yml, library bootstrap_cdn) laadt NA de thema-aggregatie en zet zelf `a { color }` hardcoded. Bij gelijke specificiteit wint dan de laatste — vandaar `body a` (0,0,2) i.p.v. `a` (0,0,1). Bewust GEEN !important: regels die specifieker zijn houden hun eigen kleur, en dat is precies de bedoeling — het zijmenu blijft grijs (ul.nav-list > li a), kaartlinks zwart (.kaderbox a) en knoppen wit (.btn), net als op D7. */ body a, body .link { color: var(--bs-link-color); } body a:hover, body a:focus, body .link:hover, body .link:focus { color: var(--bs-link-hover-color); } /* ======================================================================== */ /* ### LEGE LAYOUT-SECTIES LATEN INKLAPPEN */ /* ======================================================================== */ /* Secties met een context (bv. de presale-blokken per aanmeldpagina) renderen op pagina's waar die context niet matcht nog altijd hun wrapper: een `.layout row layout-builder__layout` zónder kolom-divs erin. Die lege rijen nemen wél verticale ruimte in — op /kinderkamp stonden er vijf achter elkaar, wat een groot wit gat gaf tussen de breadcrumb en de eerste tekst. `:has(> *)` test op element-kinderen; losse witruimte telt niet mee, dus deze regel raakt alleen écht lege rijen en nooit een sectie met inhoud. */ .layout-builder__layout:not(:has(> *)) { display: none; } /* De cadeau- en presale-secties op de aanmeldpagina's staan op volle breedte (col-12): met een 6-3-3-indeling zou er een lege zijbalkruimte naast staan en zou het menu honderden pixels onder de content beginnen. Volle breedte zonder meer maakt de regels op een breed scherm echter onleesbaar lang, dus de tekst houdt een leesbare maat; de tabel in het presale-blok mag wel breed zijn. */ .layout-builder__layout > .col-12 > .block-block-content p { max-width: 46em; } /* ======================================================================== */ /* ### FRONTPAGE SLIDESHOW (100% BREEDTE & SPLIDE FIXES) */ /* ======================================================================== */ /* 1. Verberg de play/pauze knop van Splide (overal) */ .splide__toggle { display: none !important; } /* 2. Dwing ALLE header-regio's en blokken op de frontpage uit hun kaders */ /* /demo (10-10-2026) krijgt dezelfde schermbrede header: herkend aan zijn eigen slideshowblok, zodat de regel met dat blok meeverdwijnt. */ .path-frontpage .featured-top, .path-frontpage .featured-top [class*="container"], .path-frontpage .featured-top .featured-top__inner, .path-frontpage .region-featured-top, .path-frontpage .region-featured-top [class*="container"], .path-frontpage .featured-top .block, .path-frontpage .splide, .path-frontpage .splide__track, body:has(#block-bario-sub-demo-slideshow) .featured-top, body:has(#block-bario-sub-demo-slideshow) .featured-top [class*="container"], body:has(#block-bario-sub-demo-slideshow) .featured-top .featured-top__inner, body:has(#block-bario-sub-demo-slideshow) .region-featured-top, body:has(#block-bario-sub-demo-slideshow) .region-featured-top [class*="container"], body:has(#block-bario-sub-demo-slideshow) .featured-top .block { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; padding: 0 !important; margin: 0 !important; } /* 3. Reset de Bootstrap row marges om horizontale scrollbalken te voorkomen */ .path-frontpage .featured-top .row, .path-frontpage .region-featured-top .row, body:has(#block-bario-sub-demo-slideshow) .featured-top .row, body:has(#block-bario-sub-demo-slideshow) .region-featured-top .row { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } /* 4. Fix voor Splide afbeeldingen: dwing de foto superstrak in het kader */ .featured-top img, .splide__slide img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; } /* ======================================================================== */ /* ### HERO-OVERLAY "Onvergetelijk" IN HUISSTIJLFONT (LANJUTIN) */ /* ======================================================================== */ /* Lanjutin01.otf: gelicenseerd merk-font, aangeleverd door Richard. Bestand staat in bario_sub/fonts/ (niet in ozkcontent — dat is de aanlevermap, geen webroot). */ @font-face { font-family: 'Lanjutin'; src: url('../fonts/Lanjutin01.woff2') format('woff2'), url('../fonts/Lanjutin01.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } /* WAAROM CSS EN GEEN IMAGE-EFFECT: image_effects kan het woordmerk in de derivatives branden, maar dan moeten 6 image styles x ~126 foto's opnieuw gerenderd worden (tot 3840px), elke tekstwijziging kost een volledige herrender, en — beslissend — alle achttien slideshow-displays delen dezelfde responsive image style `header`. Het woordmerk zou dus onvermijdelijk ook op de VIERKANTE promoslideshows landen. Het verschil rechthoekig/vierkant zit alleen in de type-filter van de view (slideshow_default vs slideshow_square), niet in de image style. HOE DE SELECTIE WERKT (27-jul-2026): de klasse .ozk-heroshow staat als `css_class` op de DEFAULT-display van views_slideshow en wordt daardoor door elke display geërfd — ook door displays die later worden toegevoegd. Er is dus niets te registreren bij een nieuwe kamppagina of slideshow-blok. De drie vierkante promo-displays (sq_kkbk / sq_tkjk / sq_kids) overschrijven hem met .ozk-promoshow en krijgen geen woordmerk. Dit verving een block_content "OZK Hero Overlay" in region featured_top met een handmatige lijst van 234 paden. Die liep achter: /youth/*, /form/donatie* en /kids hadden wel een header-slideshow en geen woordmerk. Het blok staat nu uit (niet verwijderd, zodat het terug kan). Aangehangen aan .views_slideshow_main en niet aan de view-wrapper: die container bevat precies de foto's. Komt er later een pager onder de slideshow, dan blijft het woordmerk midden op de FOTO staan in plaats van midden in de wrapper. BEWUST D11-ONLY (besluit Richard, 27-jul-2026). De projectregel is dat ozkprod (D7) de bron is en dat er geen D11-only patches komen; dit woordmerk is een uitgezonderde, puur visuele keuze voor de nieuwe site. D7 (thema porto_sub, Drupal-DB ozkprod) krijgt het niet. Dat gaat niet per ongeluk mis: de twee sites delen alleen de CiviCRM-database, niet de Drupal-database, dus views-, block- en themawijzigingen blijven aan deze kant. Wordt de overlay later tóch op D7 gewenst, dan is dat daar een eigen ingreep — porto_sub heeft geen .ozk-heroshow en D7's views_slideshow heeft geen css_class. */ /* De heroshow-wrapper is het meetpunt voor de cqw-eenheden van het woordmerk hieronder. Zonder container-type valt cqw stil terug op de viewport (= vw) en schaalt het woordmerk weer met het scherm i.p.v. met de foto. Alleen inline-size: de hoogte blijft gewoon door de slides bepaald. */ .ozk-heroshow { container-type: inline-size; } /* isolation:isolate maakt van de slideshow een eigen stacking-context. Dat is de randvoorwaarde voor de hoge z-index van het woordmerk hieronder: die telt dan alleen mee BINNEN de hero en niet tegen de rest van de pagina (sticky header, Klaro-banner, CiviCRM-modals). Zonder isolatie zou z-index:9999 daar overheen kunnen vallen. */ .ozk-heroshow .views_slideshow_main, .ozk-heroshow > .view-content { position: relative; isolation: isolate; } /* De slides krijgen van Cycle wel position:absolute maar geen breedte, dus ze krimpen naar de foto. Op de binnenpagina's valt dat niet op - daar is de contentkolom toevallig even breed als de foto (1296 px) - maar op de fullwidth-hero van de homepage bleef de foto 280 px smaller dan de regio, en sprong de breedte mee met de srcset-variant die de browser koos. Gemeten op dev 23-09-2026: container 1576 px, foto 1296 px. De breedte hier zetten en niet met Cycle's fit-optie: fit is een instelling per views-display en zou dus twaalf keer apart moeten; dit is een regel. */ .ozk-heroshow .views_slideshow_slide { width: 100%; } /* Het woordmerk zelf. pointer-events:none zodat het de slideshow (swipe, klikbare slides) niet blokkeert. Centreren met translate en niet met flex: een pseudo-element is een betrouwbaarder tekstblok dan flex-container. */ .ozk-heroshow .views_slideshow_main::after, .ozk-heroshow > .view-content::after { content: 'Onvergetelijk'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; pointer-events: none; /* 9999 en niet 5 (23-sep-2026): jQuery Cycle beheert de stapeling van de slides zelf en tilt bij ELKE overgang de actieve slide omhoog - gemeten op /kinderkamp z-index 7 en daarna 8, dus boven de oude 5. Alleen de allereerste slide staat nog op z-index:auto; daardoor was het woordmerk precies de eerste 5 seconden na het laden zichtbaar en daarna nooit meer tot een reload ("soms wel, meestal niet"). Cycle telt op vanaf het aantal slides, dus een vaste marge van 9 is te krap zodra er foto's bijkomen; 9999 binnen de geisoleerde context hierboven is onbegrensd veilig. */ z-index: 9999; font-family: 'Lanjutin', cursive; font-weight: normal; color: #ffffff; /* cqw en niet vw (04-aug-2026): met 10vw schaalde het woordmerk met de VIEWPORT, niet met de foto. Op de fullwidth frontpage-hero was het daardoor relatief een derde kleiner dan op de binnenpagina's (gemeten @1920: 7,5% vs 11,1% van de fotobreedte — de 9rem-cap sloeg daar al vanaf 1440px aan terwijl de foto doorgroeide). 11cqw = 11% van de heroshow-breedte, de verhouding die de binnenpagina's al hadden; die blijven dus visueel gelijk en de frontpage groeit mee. */ font-size: clamp(3rem, 11cqw, 13.5rem); line-height: 1; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.35); white-space: nowrap; } @media (max-width: 767.98px) { .ozk-heroshow .views_slideshow_main::after, .ozk-heroshow > .view-content::after { font-size: clamp(2rem, 14cqw, 4rem); white-space: normal; } } /* Pijlnavigatie op een heroshow (10-10-2026, eerst op /demo). Opt-in per views-display: zet de widget "Controls" (tekst) aan en geef de display de css_class "ozk-heroshow ozk-heroshow--nav". De tekstlinks Vorige/Volgende van views_slideshow worden ronde pijlen links en rechts op de foto; de pauzeknop verdwijnt (cycle pauzeert al bij hover). De linktekst blijft voor schermlezers staan. De cursortoetsen bedienen dezelfde links, zie ozkSlideshowToetsen in global.js. */ .ozk-heroshow--nav .views-slideshow-controls-bottom, .ozk-heroshow--nav .views-slideshow-controls-top { position: absolute; inset: 0; pointer-events: none; } .ozk-heroshow--nav > .view-content, .ozk-heroshow--nav .skin-default { position: relative; } .ozk-heroshow--nav .views_slideshow_controls_text_pause { display: none; } .ozk-heroshow--nav .views_slideshow_controls_text_previous, .ozk-heroshow--nav .views_slideshow_controls_text_next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: auto; } .ozk-heroshow--nav .views_slideshow_controls_text_previous { left: clamp(8px, 2cqw, 32px); } .ozk-heroshow--nav .views_slideshow_controls_text_next { right: clamp(8px, 2cqw, 32px); } .ozk-heroshow--nav .views_slideshow_controls_text_previous a, .ozk-heroshow--nav .views_slideshow_controls_text_next a { display: flex; align-items: center; justify-content: center; width: clamp(36px, 4cqw, 56px); height: clamp(36px, 4cqw, 56px); border-radius: 50%; background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); color: transparent; font-size: 0; text-decoration: none; transition: background 0.2s; } .ozk-heroshow--nav .views_slideshow_controls_text_previous a:hover, .ozk-heroshow--nav .views_slideshow_controls_text_next a:hover, .ozk-heroshow--nav .views_slideshow_controls_text_previous a:focus-visible, .ozk-heroshow--nav .views_slideshow_controls_text_next a:focus-visible { background: rgba(0, 0, 0, 0.7); } /* Chevron als gedraaide hoek: geen icoonfont nodig (Material Symbols is een subset) en hij schaalt mee met de knop. */ .ozk-heroshow--nav .views_slideshow_controls_text_previous a::before, .ozk-heroshow--nav .views_slideshow_controls_text_next a::before { content: ''; width: 32%; height: 32%; border-top: 3px solid #ffffff; border-right: 3px solid #ffffff; } .ozk-heroshow--nav .views_slideshow_controls_text_previous a::before { transform: translateX(15%) rotate(-135deg); } .ozk-heroshow--nav .views_slideshow_controls_text_next a::before { transform: translateX(-15%) rotate(45deg); } /* Pijlen pas tonen bij hover over de slideshow (Richard 10-10-2026). Alleen op apparaten met een muis: een touchscherm kent geen hover, daar blijven ze staan. focus-within houdt ze zichtbaar voor wie met Tab op een pijl staat. */ @media (hover: hover) { .ozk-heroshow--nav .views_slideshow_controls_text_previous, .ozk-heroshow--nav .views_slideshow_controls_text_next { opacity: 0; transition: opacity 0.25s; } .ozk-heroshow--nav:hover .views_slideshow_controls_text_previous, .ozk-heroshow--nav:hover .views_slideshow_controls_text_next, .ozk-heroshow--nav:focus-within .views_slideshow_controls_text_previous, .ozk-heroshow--nav:focus-within .views_slideshow_controls_text_next { opacity: 1; } } /* Knop "volledig scherm" op een heroshow (11-10-2026, eerst op /demo). Opt-in met de css_class "ozk-heroshow--volscherm"; ozkSlideshowVolscherm in global.js zet de knop erin. Hij zet de hele pagina in browser-fullscreen (geen adresbalk, tabs of systeembalken, ook bij casten) - de pagina zelf blijft zoals hij is. Waar de browser dat niet kan (Safari op een iPhone) komt er geen knop. */ .ozk-heroshow--volscherm > .view-content, .ozk-heroshow--volscherm .skin-default { position: relative; } .ozk-volscherm-knop { position: absolute; top: clamp(8px, 2cqw, 32px); right: clamp(8px, 2cqw, 32px); z-index: 3; display: flex; align-items: center; justify-content: center; width: clamp(36px, 4cqw, 56px); height: clamp(36px, 4cqw, 56px); padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); cursor: pointer; transition: background 0.2s, opacity 0.25s; } .ozk-volscherm-knop:hover, .ozk-volscherm-knop:focus-visible { background: rgba(0, 0, 0, 0.7); } .ozk-volscherm-knop svg { width: 50%; height: 50%; fill: none; stroke: #ffffff; stroke-width: 2.5; stroke-linecap: round; } .ozk-volscherm-knop .ozk-volscherm-uit, :fullscreen .ozk-volscherm-knop .ozk-volscherm-aan { display: none; } :fullscreen .ozk-volscherm-knop .ozk-volscherm-uit { display: block; } @media (hover: hover) { .ozk-heroshow--volscherm .ozk-volscherm-knop { opacity: 0; } .ozk-heroshow--volscherm:hover .ozk-volscherm-knop, .ozk-heroshow--volscherm:focus-within .ozk-volscherm-knop { opacity: 1; } } /* Vangnet: mocht een vierkante display ooit de default-class tóch erven (bv. omdat de override vergeten is), dan houdt de sq_-displayklasse het woordmerk alsnog weg. Conventie: elke vierkante promo-display heet sq_*. */ .view-views-slideshow[class*="view-display-id-sq_"] .views_slideshow_main::after, .ozk-promoshow .views_slideshow_main::after, .ozk-promoshow > .view-content::after { content: none; } /* .region-featured-top blijft de positioneringscontext voor andere overlays; op zichzelf onschadelijk. */ .region-featured-top { position: relative; } /* ======================================================================== */ /* ### RUIMTE TUSSEN SLIDESHOW EN CONTENT (BREADCRUMBS / TITEL) */ /* ======================================================================== */ #main-wrapper { padding-top: 16px !important; } @media (max-width: 991.98px) { #main-wrapper { padding-top: 8px !important; } } /* ======================================================================== */ /* ### UITLIJNING TEKST EN TITEL (LAYOUT BUILDER GUTTER FIX) */ /* ======================================================================== */ /* De hero-afbeelding en het breadcrumb-kader spannen de volle container- breedte INCLUSIEF de 12px containerpadding (ze starten dus op de containerrand). De layout-builder-kolommen hebben een 3rem-gutter (24px padding per zijde), waardoor kolominhoud 12px RECHTS van die rand zou beginnen. 12px padding-left (i.p.v. 0) zet titel en bodytekst exact op dezelfde linkerlijn als hero en breadcrumb — op desktop én mobiel (met 0 plakte de tekst op mobiel tegen de schermrand). */ .layout-builder__layout.row > div[class*="col-"]:first-child { padding-left: 12px !important; } /* Zelfde verhaal aan de rechterkant: de laatste kolom (sidebar-menu) eindigde met 24px padding 12px BINNEN de hero/breadcrumb-lijn. */ .layout-builder__layout.row > div[class*="col-"]:last-child { padding-right: 12px !important; } /* Gestapelde kolommen (mobiel, onder de md-breakpoint): er is dan geen tussen-gutter meer nodig — geef álle kolommen 12px aan beide zijden, zodat elk blok links én rechts precies op de hero/breadcrumb-lijn staat (met de 24px-gutter stond content rechts 12px te ver naar binnen en middenkolommen ook links). */ @media (max-width: 767.98px) { .layout-builder__layout.row > div[class*="col-"] { padding-left: 12px !important; padding-right: 12px !important; } } /* ======================================================================== */ /* ### MOBIELE ZIJBALKEN (RUIMTE AAN DE ZIJKANTEN HERSTELLEN) */ /* ======================================================================== */ @media (max-width: 991.98px) { .region-sidebar-first, .region-sidebar-second { padding-left: 15px !important; padding-right: 15px !important; } } /* ======================================================================== */ /* HEADER ACHTERGROND SPIERWIT MAKEN (Overschrijft Spacelab thema) */ /* ======================================================================== */ #navbar-main { background-color: #ffffff !important; background-image: none !important; /* Verwijder het grijze verloopje */ border: none !important; /* Verwijdert eventuele donkere randjes */ } /* ======================================================================== */ /* ### STICKY HEADER & KRIMPEND LOGO - CANONIEK BLOK */ /* ======================================================================== */ /* De krimp-staat wordt gezet door bario_sub/js/global.js als `body.ozk-shrunk` en NIET door barrio's eigen `body.scrolled`. Waarom: barrio.js (themes/contrib/bootstrap_barrio/js/barrio.js:14) zet die class op EEN harde drempel (scrollY > 50) en haalt hem er direct weer af zodra je eronder komt - geen hysterese. Het krimpende logo maakt de header 35px lager (80px -> 45px hoog). #header staat `position: sticky` en telt dus mee in de normale flow, dus het document wordt 35px korter. Chrome compenseert dat met scroll-anchoring door scrollY ook 35px te verlagen: je zakt daarmee onder de drempel van 50 -> class eraf -> logo groeit -> document langer -> scrollY weer boven 50 -> class erop -> ... Die terugkoppeling stopt nooit; het logo pompt eindeloos op en neer (het "bibberen"). GEMETEN 01-08-2026 op de homepage @1280px: na scrollTo(0, 60) oscilleerde scrollY tussen 40 en 58 en de logobreedte tussen 203px en 270px, 18 metingen lang, zonder ooit te stabiliseren. De eigen class heeft hysterese (aan boven 140px, uit onder 10px). Een eenmalige krimp van 35px kan die band van 130px nooit overbruggen, dus de terugkoppeling kan zich niet sluiten. */ #header { position: sticky !important; top: 0 !important; z-index: 1030 !important; background-color: #ffffff !important; } /* Alleen de maten animeren i.p.v. `all`: op een sticky element is `all` duur en het nam ook background/box-shadow mee zonder dat daar iets aan verandert. */ #header .navbar-brand img { transition: max-width 0.3s ease-in-out, max-height 0.3s ease-in-out !important; max-height: 80px !important; width: auto !important; } /* ======================================================================== */ /* LOGO & HEADER STYLING (RESPONSIVE) */ /* ======================================================================== */ /* ------------------------------------------------------------------------ */ /* 1. MOBIEL: Logo klein & naast menuknop houden */ /* ------------------------------------------------------------------------ */ @media screen and (max-width: 768px) { /* Logo max 180px op mobiel */ .navbar-brand img, .navbar-brand img.img-fluid { max-width: 180px !important; height: auto !important; } /* Logo en menuknop op regel 1, uitgeklapt menu op een eigen regel eronder. LET OP: flex-wrap MOET 'wrap' zijn. Met 'nowrap' kon het uitgeklapte .navbar-collapse (flex-basis:100%) niet naar een tweede regel wrappen en bleef het als gekrompen flex-item (~173px) naast logo+toggler hangen, rechts uit het scherm lopend. Met 'wrap' blijven logo en toggler samen op regel 1 (ze passen ruim) en valt de collapse full-width op regel 2. */ .navbar > .container { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; } } /* ------------------------------------------------------------------------ */ /* 2. DESKTOP: Groot logo dat krimpt bij scrollen */ /* ------------------------------------------------------------------------ */ @media (min-width: 992px) { /* A. STARTPOSITIE (Bovenaan de pagina) - XL Versie */ .navbar-brand img, .navbar-brand img.img-fluid { max-width: 400px !important; /* Lekker groot beginnen */ width: auto !important; height: auto !important; } /* B. KRIMP-STAAT. `ozk-shrunk` i.p.v. barrio's `scrolled` - zie het canonieke sticky-header-blok hierboven voor het waarom (bibberend logo). Krimpt naar 150px voor meer leesruimte. */ body.ozk-shrunk .navbar-brand img, body.ozk-shrunk .navbar-brand img.img-fluid { max-width: 150px !important; } /* C. Hier stond een "header ademt mee"-blok: `header.navbar` met padding 30px -> 5px in de scrolled-staat. Verwijderd op 01-08-2026 omdat het nooit iets deed - er is geen element dat `header.navbar` matcht (de navbar is `nav#navbar-main`; gemeten: 0 hits), en padding-bottom wordt verderop toch al platgelegd door `header#header, #navbar-main { padding-bottom: 0 !important }`. Niet terugzetten zonder na te denken: dit activeren zet de header-hoogte per krimp 25px extra in beweging, en juist die hoogteverandering was de bron van het bibberen. */ } /* ======================================================================== */ /* ### MENU WISSELTRUC: SUPERFISH (DESKTOP) VS NATIVE (MOBIEL) */ /* ======================================================================== */ /* 1. Verberg het Superfish menu op mobiele schermen */ /* @media (max-width: 991.98px) { #block-bario-sub-mobielmenu-superfish { display: none !important; } } */ /* 2. Verberg het reguliere (native) menu op grote schermen (desktop) */ @media (min-width: 992px) { #block-bario-sub-mobielmenu { display: none !important; } } /* 3. Verberg het Mobiele menu (native) op grote schermen (desktop) */ @media (min-width: 992px) { #block-bario-sub-mobielmenu-superfish { display: none !important; } } /* ======================================================================== */ /* ### MOBIEL MENU STYLING (HAMBURGER RECHTS & 100% BREEDTE) */ /* ======================================================================== */ @media (max-width: 991.98px) { .navbar { width: 100% !important; justify-content: space-between !important; } .navbar-toggler { margin-left: auto !important; } .navbar-collapse { width: 100% !important; flex-basis: 100% !important; background-color:#ffffff !important; padding: 15px 20px !important; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important; } .navbar-collapse .nav-item { border-bottom: 1px solid #f3f4f6 !important; padding-top: 8px !important; padding-bottom: 8px !important; } .navbar-collapse .nav-item:last-child { border-bottom: none !important; } } /* ======================================================================== */ /* ### HEADERTOP ACHTERGROND (GRIJS VERWIJDEREN) */ /* ======================================================================== */ #header-top, .region-header-top, .header-top { background-color: #ffffff !important; } /* ======================================================================== */ /* ### STICKY HEADER & KRIMPEND LOGO - VERPLAATST NAAR BOVEN */ /* ======================================================================== */ /* Hier stond een tweede, bijna identieke kopie van het sticky-header-blok (#header + #header.scrolled + de logo-transitie). Verwijderd op 01-08-2026: de `#header.scrolled`-selectors matchten nooit iets (barrio zet die class op , niet op #header) en de `padding-bottom: 15px` werd verderop al overruled door `header#header { padding-bottom: 0 !important }` (hogere specificiteit). Het canonieke blok staat hierboven onder "STICKY HEADER & KRIMPEND LOGO - CANONIEK BLOK". */ /* ======================================================================== */ /* ### MOBIEL MENU: RUSTIGE & STABIELE "ALWAYS EXPANDED" LOOK */ /* ======================================================================== */ @media (max-width: 991.98px) { /* 1. Reset container */ #block-bario-sub-mobielmenu ul { display: flex !important; flex-direction: column !important; width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } /* 2. De Hoofdsecties (Parents: KAMPEN, OUDERS, etc.) */ #block-bario-sub-mobielmenu ul li > a { display: block !important; width: 100% !important; padding: 12px 20px !important; color: #444444 !important; background-color: #f7f7f7 !important; /* Subtiel grijs vlak voor rust */ border-bottom: 1px solid #e2e2e2 !important; border-left: 4px solid #cccccc !important; /* Neutrale indicator ipv Bold */ font-weight: 500 !important; /* Minder zwaar dan bold */ text-transform: uppercase !important; text-decoration: none !important; } /* 3. Submenu's altijd zichtbaar tonen */ #block-bario-sub-mobielmenu ul li ul { display: flex !important; flex-direction: column !important; } /* 4. De Submenu-items (Kind-items) */ #block-bario-sub-mobielmenu ul li ul li a { display: block !important; padding: 12px 25px !important; /* Minimale inspringing voor rust */ font-size: 15px !important; color: #555555 !important; background-color: #ffffff !important; border-bottom: 1px solid #f0f0f0 !important; text-transform: none !important; font-weight: 400 !important; } /* --- 5. STATUS EN FOCUS --- */ /* Als de sectie actief is (Active Trail) -> Blauwe lijn */ #block-bario-sub-mobielmenu ul li.menu-item--active-trail > a { border-left-color: #1a7b8c !important; color: #1a7b8c !important; } /* De Huidige Pagina (Subtiel Rood accent) */ #block-bario-sub-mobielmenu ul li a.is-active { background-color: #fff0f3 !important; /* Zachte roze gloed */ color: #b52b53 !important; font-weight: 600 !important; border-left: 4px solid #b52b53 !important; padding-left: 21px !important; /* Compensatie voor de rode lijn */ } } /* ######################################################################## */ /* ### LAYOUT BALANS: SLIDESHOW, HEADER & BREADCRUMBS */ /* ######################################################################## */ /* 1. Sluit header aan op slideshow */ header#header, #navbar-main { margin-bottom : 0 !important; padding-bottom : 0 !important; } /* 2. Slideshow marges: 5px boven voor ademruimte, 10px onder voor aansluiting */ .featured-top { margin-top : 5px !important; margin-bottom : 10px !important; } /* 3. Verwijder het grote gat boven de content/breadcrumbs */ #main-wrapper { margin-top : 0 !important; padding-top : 0 !important; } /* 4. Breadcrumbs: Verwijder top-marge, behoud ruimte naar de titel */ .breadcrumb { margin-top : 0 !important; margin-bottom : 15px !important; padding-top : 0 !important; } /* 5. Mobiele correcties voor compacte weergave */ @media (max-width: 991.98px) { .featured-top { margin-top : 0 !important; margin-bottom : 5px !important; } .breadcrumb { margin-bottom : 10px !important; } /* Zorg dat de paginatitel op mobiel niet tegen de breadcrumb plakt */ #block-bario-sub-page-title { margin-top : 5px !important; } } /* 6. Ademruimte tussen de hero-slideshow en het CTA-blok op de HOMEPAGE. Waarom een aparte regel en niet punt 2 hierboven: de frontpage-reset in de sectie FRONTPAGE SLIDESHOW (`.path-frontpage .featured-top { margin:0 !important }`, ~r92) bestaat om de hero uit zijn container te breken — padding-left/right op 0. Die shorthand nulde óók de verticale marge, en omdat `.path-frontpage .featured-top` specifieker is dan `.featured-top` won hij van de 10px van punt 2. Gemeten 27-07-2026 op 1280/900/390: featured-top bottom == #main-wrapper top, dus 0px lucht; het CTA-blok ("Iedereen een onvergetelijk ...") plakte op de foto. DE MAAT (besluit Richard, 27-07-2026): de witruimte hero→CTA moet exact gelijk zijn aan de verticale ruimte tussen de twee groene knoppen ("Meer informatie" / "Nieuwsbrief"). Die knoppen zitten elk in een eigen

, dus die ruimte IS de alinea-afstand van het thema: 28px (1.75em bij 16px body-tekst). Gemeten en op 1280, 900 én 390 identiek — daarom één waarde en geen media queries. Meteen ook de logische maat: de hero sluit aan op het ritme van de pagina in plaats van een eigen afstand te introduceren. 18 en niet 28: tussen `.featured-top` en het contentblok zit nog 10px containerpadding van #main-wrapper. 18 + 10 = de gewenste 28. Verandert die padding ooit, dan moet dit getal mee — de zichtbare gap is wat telt, niet deze marge. Alleen margin-BOTTOM overschrijven, niet de shorthand: de horizontale reset moet intact blijven, anders keert de container-inspringing terug en is de hero niet meer 100% breed. Selector even specifiek als de reset + !important, dus deze latere regel wint. Bewust alleen op de frontpage: op de overige pagina's staat onder de hero een breadcrumb met 15px onderruimte, die hebben de extra lucht niet nodig (en zouden dan te ver van de header komen te staan). */ .path-frontpage .featured-top, .path-frontpage .region-featured-top, body:has(#block-bario-sub-demo-slideshow) .featured-top, body:has(#block-bario-sub-demo-slideshow) .region-featured-top { margin-bottom : 18px !important; } /* 7. CTA-knoppen niet over twee regels laten afbreken. De knoppen staan in de smalle `col-md-2` van de CTA-rij (views `beschikbaarheid_zomerkampen` — de markup zit in `alter.text` van een veld, niet in een blok of node-body). Die kolom is bewust smal; daarom is niet de kolom verbreed maar het label ingekort naar "Meer info" (27-07-2026), conform de al bestaande korte labels in teaser_ouders/teaser_vrienden. SCOPE: `.views-field .btn.full`, dus NIET meer `.path-frontpage`-only. De CTA komt in vijf zichtbare displays voor, verspreid over meerdere pagina's: teaser_pre + teaser_open (homepage, wisselen per seizoensfase), block_32 (/kampen), teaser_leid (/leiding) en block_10 (nergens geplaatst). Gecontroleerd dat `btn`+`full` in de HELE Drupal-config alleen in deze view voorkomt — de selector raakt dus precies deze CTA-knoppen en geen andere knop op de site. Let op: block_10 heeft als enige geen `full`-class; die knop is niet width:100% en groeit dus met zijn tekst mee, waardoor nowrap daar niet nodig is. GEMETEN bij font-size 20px + 32px padding, benodigde knopbreedte: "Meer informatie" 177px, "Meer info" 118px, "Nieuwsbrief" 141px. Beschikbare knopbreedte per viewport: 1440→196, 1280→166, 992-1100→136, 768-900→96, <=576→366+ (kolom is dan vol breed). Met het korte label past nowrap dus overal, BEHALVE in de md-zone 768-991 waar de kolom maar 96px geeft — zie punt 8. */ #main-wrapper .views-field .btn.full { white-space : nowrap; } /* 7b. "Nieuwsbrief" (141px nodig) paste met de standaard btn-lg-padding van 2x16px net niet in de 136px-knop van de zone 992-1199px — 5px tekort. Deze knoppen hebben class `full` (width:100%), dus hun horizontale padding bepaalt NIET de zichtbare breedte maar alleen het punt waarop de tekst niet meer past; de tekst staat gecentreerd. Padding verkleinen is hier dus puur functioneel en visueel onzichtbaar. 2x8px geeft 16px lucht i.p.v. 5px tekort. */ #main-wrapper .views-field .btn.full { padding-left : 8px; padding-right : 8px; } /* 8. In de md-zone (768-991px) is de col-md-2 slechts ~96px breed: daar past geen enkel zinvol knoplabel op één regel, dus zou nowrap de tekst buiten de groene knop laten steken. In die zone stapelen de kolommen daarom, net als onder 768px al gebeurt: de knoppen komen vol breed onder de tekst te staan. Dat is daar sowieso de betere verhouding — een 96px knopkolom naast een ~950px tekstkolom oogt geknepen. De col-md-10/col-md-2-verhouding op >=992px blijft ongemoeid; dat is de indeling die op 27-07-2026 bewust is gelijkgetrokken met CTA 2. Scope net als punt 7: alle CTA-rijen van deze view, niet alleen de homepage. De 10/2-combinatie in een views-veld is uniek voor deze CTA. */ @media (min-width: 768px) and (max-width: 991.98px) { #main-wrapper .views-field .col-md-10, #main-wrapper .views-field .col-md-2 { flex : 0 0 100%; max-width : 100%; } } /* ######################################################################## */ /* ### FEATURE BOX EN MATERIAL ICONS */ /* ######################################################################## */ /* 1. BASIS: De roze cirkel (altijd gecentreerd). Alleen de tegel-varianten met .large/.small — de kale .feature-box.secondary uit de views (praktisch-kampinfo) volgt de Porto-stijl (klein icoon-rondje, zie ozk-d7-parity-extra.css); content gebruikt uitsluitend .large (5×). */ .feature-box.secondary.large, .feature-box.secondary.small, p.feature-box.secondary.large { background-color: #c13c61 !important; /* was #c13c61 — één punt naast de huisstijlkleur */ border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; clear: both; } /* 2. MATEN: Groot en Klein */ .feature-box.secondary.large, p.feature-box.secondary.large { width: 100px !important; height: 100px !important; margin-bottom: 15px !important; } .feature-box.secondary.small { width: 60px !important; height: 60px !important; } /* 3. ICONEN: Wit en de juiste maat */ .feature-box.secondary .material-icons, p.feature-box.secondary .material-icons { color: #ffffff !important; line-height: 1 !important; margin: 0 !important; } .feature-box.secondary.large .material-icons { font-size: 55px !important; } .feature-box.secondary.small .material-icons { font-size: 32px !important; } /* 4. LAYOUT: Float-optie voor 'Icoon Links' */ .feature-box.secondary.float-start { float: left !important; margin-right: 20px !important; margin-bottom: 10px !important; } /* 5. DE BOX: Grijze rand en aansluiting op float */ .border.p-4.rounded { overflow: hidden !important; /* Voorkomt 'lekkage' onder het icoon */ margin-top: 25px !important; clear: both; } /* Verwijder de marge van het laatste element in de box voor een strakke aansluiting */ .border.p-4.rounded > *:last-child { margin-bottom: 0 !important; } /* Optioneel: als je de box in het algemeen te hoog vindt, verlaag de padding */ .border.p-4.rounded { padding: 1.5rem !important; /* Dit is de standaard p-4, verlaag naar 1rem voor minder ruimte */ } /* Verwijdert de extra marge van de laatste alinea in de box */ .border.p-4.rounded > *:last-child { margin-bottom: 0 !important; } /* Verlaag de algemene padding voor een compactere box */ .border.p-4.rounded { padding: 1.2rem !important; } /* 6. TITELS: Fix voor witruimte in of boven de box */ .border.p-4.rounded h2, .border.p-4.rounded .h2, h2 + .border.p-4.rounded { margin-top: 0 !important; margin-bottom: 15px !important; } /* ======================================================================== */ /* OZK Button & Checklist styles (gemigreerd van D7 Porto_sub) */ /* ======================================================================== */ /* Material Symbols font — LOKAAL gehost (02-08-2026). Stond hier als @import van fonts.googleapis.com. Bezoekers met een tracker-blocker (uBlock, Firefox strict) kregen dat verzoek geblokkeerd en zagen op de kampkaarten de kale ligatuur-tekst: "malefemale", "calendar_month", "location_on". Zelfde afweging als het theme al voor Rambla maakte: font meeleveren i.p.v. van Google halen. Het meegeleverde bestand is de STATISCHE variant (geen fvar-tabel, dus geen variabele assen opsz/wght/FILL/GRAD). Sinds performance2 (02-08-2026) is het bovendien een SUBSET van alleen de gebruikte icon-namen (±48, o.a. edit, lock_person, article, calendar_month) — het volledige font staat ernaast als .bak.performance2-20260802. LET OP: een NIEUWE icon-naam in views/bodies rendert als kale ligatuurtekst tot de glyph aan de subset is toegevoegd (fontTools: ligature + glyph kopiëren uit de .bak, zie 05-08 'article') en de ?v= in de src hieronder is opgehoogd. Dat is de default-instantie wght 400 / FILL 0 / GRAD 0 — precies wat de regel `font-variation-settings` hieronder al vroeg, die daarmee een no-op wordt en niets aan het beeld verandert. Alle bestaande maat-overrides (.md-48/60/72, .kadericon, .icon-featured, .feature-box-icon) werken ongewijzigd: die sturen font-size, niet de assen. font-display: block i.p.v. swap — bij swap toont de browser tijdens het laden juist de ligatuur-tekst, precies de bug die we hier oplossen. block houdt het glyph onzichtbaar tot het font er is (lokaal: milliseconden). Geen unicode-range: de icoonglyphs liggen in 523 losse bereiken tot in de PUA van plane 16 (U+FFFFD). Google's eigen icoon-stylesheet zet er ook geen; een te smal bereik zou stilletjes iconen slopen. Het font wordt alleen via .material-symbols-outlined aangesproken, dus er valt niets te besparen. */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/material-symbols-outlined.woff2?v=20261014') format('woff2'); } /* Basisregels 1-op-1 overgenomen uit de Google-stylesheet die de @import binnenhaalde — andere bestanden rekenen er expliciet op (zie de toelichting bij .icon-featured in ozk-d7-parity-extra.css over de 24px die hiervandaan komt). Zelfde plek in de cascade als de @import, zonder !important, zodat alle overrides verderop blijven winnen. .material-icons hangt hier bewust aan mee. Die klasse hoort bij de oudere, GEVULDE Material Icons-set die bootstrap_barrio als theme-setting van fonts.googleapis.com laadde — dezelfde blocker-bug, en bovendien twee icoonstijlen door elkaar (gevuld naast omlijnd, soms binnen één view). De zeven namen die de site gebruikt (auto_awesome, edit, forum, groups, map, public, shield) bestaan alle zeven ook in Symbols, dus dit is puur een alias: geen markup-wijziging in de 5 node-body's en 5 views nodig. Besluit Richard 02-08-2026; theme-setting bootstrap_barrio_icons staat daarom nu leeg. Zichtbaar effect: shield en map worden lijntekeningen. */ .material-symbols-outlined, .material-icons { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } a.button { width: 100%; padding: 10px 5px 10px 5px; font-family: Rambla, Arial, Helvetica, sans-serif; font-size: 14px; text-decoration: none; outline: none; border-color: darkgray; border: 1px solid; border-radius: 0; display: block; } a.button.margin { width: 100%; margin: 0 0 10px 0; } a.button:hover { opacity: 0.8; } .success { border: 1px solid; background-color: #28881e !important; border-color: darkgray !important; color: #F7F7F7 !important; } .info { background-color: #006E83 !important; border: 1px solid; border-color: darkgray !important; color: #F7F7F7 !important; } .warning { background-color: #cc4d00 !important; border: 1px solid; border-color: darkgray !important; color: #F7F7F7 !important; } .danger { background-color: #c13c61 !important; border: 1px solid; border-color: darkgray !important; color: #F7F7F7 !important; } .grijs { background-color: whitesmoke !important; border-color: lightgray !important; border: 1px solid; color: black; } .disabled { background: #EFEFEF; } .isDisabled { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; } /* Disabled WEERGAVEVELDEN op webforms (bv. 'Uw naam' op /form/ouder/regeling): de generieke .disabled hierboven verft de hele form-item grijs, inclusief het label. Alleen de input zelf hoort grijs (dat doet Bootstraps .form-control:disabled{background-color:#eee} al); label, hulptekst en wrapper blijven transparant. 19-08-2026: de oorspronkelijke selector .form-item.disabled matchte NOOIT. Webform/Barrio zetten op de wrapper wel js-form-item, js-form-type-, form-type- en form-item-, maar GEEN kale form-item. Gemeten op /form/inloglink: 6 wrappers met class disabled, alle 6 met js-form-item. Daarom nu op js-form-item; de oude selector blijft staan voor gewone Drupal-formulieren die de kale class wel gebruiken. */ .form-item.disabled, .js-form-item.disabled { background: transparent; } .js-form-item.disabled > label, .js-form-item.disabled > .description, .js-form-item.disabled > .form-item--description { background: transparent; } a.button.ongecheckt { background-color: #cc4d00 !important; border: 1px solid; border-color: darkgray !important; color: #F7F7F7 !important; } a.button.bijgewerkt { background-color: #28881e !important; border: 1px solid; border-color: darkgray !important; color: #F7F7F7 !important; } .ozkgroen { background: #28881e !important; color: white !important; } .ozkblauw { background: #006E83 !important; color: white !important; } .ozkoranje { background: #cc4d00 !important; color: white !important; } .ozkroze { background: #c13c61 !important; color: white !important; } .ozkpaars { background: #663399 !important; color: white !important; } /* Grijs was de enige huisstijlbaan zonder vlak-class (18-08-2026). Bestond hier al als variabele --ozk-grijs in ozk-klaro.css; nu ook als vlak, met dezelfde naam als in de mail-CSS (nl.onvergetelijk.cssinliner/custom_civicrm_email.css). */ .ozkgrijs { background: #3c3c3b !important; color: white !important; } .indent { text-indent: 15% !important; text-align: left !important; margin: 0 0 10px 0; } .indent7 { text-indent: 7% !important; text-align: left !important; } .parentbutton { margin: 5px 0 15px 0; } .buttonicon { margin: 3px 3px 3px 3px !important; font-size: 14px; float: left !important; text-align: left !important; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; } .material-symbols-outlined.md-48 { font-size: 48px !important; } .material-symbols-outlined.md-60 { font-size: 60px !important; } .material-symbols-outlined.md-72 { font-size: 72px !important; } .kader { /* Alleen uiterlijk; ALLE layout (padding/hoogte/breedte/uitlijning) staat in css/ozk-kaarten.css — de enige eigenaar van de kaartlayout, laadt als laatste. */ border: solid 1px lightgrey; background-color: rgba(192, 192, 192, 0.1); } .kader:hover { background-color: rgba(192, 192, 192, 0.5); } /* D7-kaartjes zijn smal (kaderbox = col-sm-3/6); zonder eigen font-size valt de kop terug op het thema-default h3 (28px) en overlapt hij de buurkaart. D7 gebruikte hier 18px. */ .kader h3 { font-size: 18px; line-height: 24px; } /* De kaartregels (datum/leeftijd/locatie/status) hadden geen eigen font-size en vielen daardoor terug op de thema-default (17,1px) waar D7 14px gebruikt. Op mobiel is de tekstkolom in een kaart maar ~126px breed; bij 17px braken "Boerderij Hoekelum" en "Costa del Zeumeren" over twee regels. 14px is exact de D7-waarde (gemeten op www.onvergetelijk.nl/kampen), line-height iets ruimer dan de tekst zelf zodat de regels met het 18px-icoon meebewegen. */ .kader .indent7 { font-size: 14px; line-height: 22px; } .kader a { text-decoration: none !important; } /* D7's Bootstrap 3 heeft een globale img{max-width:100%;height:auto}-reset; Bootstrap Barrio/bario_sub niet. De kaderafbeeldingen zijn kale -tags zonder class (raw Views-veld), dus zonder deze regel renderen ze op hun natuurlijke pixelbreedte en lopen ze over de kaartrand heen. */ .kader img { max-width: 100%; height: auto; display: block; } /* .kadericon (ozk-porto-port.css) mist display:inline-block; het icoon en de .indent7-teksdiv zijn allebei

's (blokniveau) en breken daardoor elk naar hun eigen regel. Fix: rij-div flex (icoon+tekst verticaal gecentreerd). GEEN white-space:nowrap: deze kaartjes verschijnen zowel breed (/kampen, 9-3-sectie, ~205px) als smal (front, oude 6-3-3-sectie, ~134px); met nowrap past de tekst breed prima maar loopt hij smal over de kaartrand heen. .indent7 kreeg met flex-grow:0 (default) alleen zijn eigen minimale content-breedte i.p.v. de ruimte die de rij daadwerkelijk beschikbaar heeft, waardoor de tekst soms al wrapte terwijl er nog ruimte over was (bv. "18/07 tot 24/07" op /kampen: 122px toegewezen vs 160px beschikbaar). flex-grow:1 laat 'm die ruimte opvullen: past-ie op 1 regel (breed), dan ook 1 regel; past-ie niet (smal), dan wrapt-ie alsnog netjes zonder overloop. Geverifieerd via page.evaluate op beide kaartbreedtes. */ .kader > div:has(.kadericon) { display: flex; align-items: center; gap: 4px; } .kader .indent7 { flex-grow: 1; } /* Op smartphone staan de kaarten 2-per-rij en houdt de tekstkolom nog maar ~126px over. Daar past de langste locatienaam ("Boerderij Hoekelum", "Costa del Zeumeren") ook op 14px net niet: de 7%-inspringing (~9px) en de laatste px'en font-grootte zijn precies het verschil tussen één en twee regels. De inspringing is hier bovendien dubbelop — in de flex-rij staat het icoon al in een eigen kolom, dus de tekst lijnt zonder text-indent netjes uit. Gemeten: 4 van de 48 regels wrappen nu; met indent 0 nog 2; met 13px geen. */ @media (max-width: 767.98px) { .kader .indent7 { text-indent: 0 !important; font-size: 13px; } /* Material Symbols nemen bij font-size 18px de volle 24px van hun grid in beslag. Op mobiel is dat verspilde tekstbreedte: 16px levert ~8px per regel op, precies wat de kaarten van blocks_aanbod op /kampen nodig hebben om hun langste regels op één regel te houden (gemeten: 3px tekort vóór deze regel, +5px marge erna). Het icoon blijft goed leesbaar. */ .kadericon { font-size : 16px; width : 16px; min-width : 16px; } } /* Onder 385px is zelfs 13px te groot: daar is de tekstkolom nog ~111px en "Boerderij Hoekelum" vraagt 121px. Gemeten omslagpunt met de regel hierboven: 385px is de eerste breedte zonder afbreking (marge +2px), 380px zit op 0 en 360px komt 10px tekort. Onder die grens dus een compactere kaart: krappere binnenmarge, kleinere icoon-tekstafstand en 12px tekst — samen ~19px winst, wat op 360px een marge van +9px geeft. Bewust geen 1-kaart-per-rij als alternatief: dat werkt ook, maar verdubbelt de sectiehoogte (848 -> 1760px). Op ~320px (iPhone 5-klasse) blijft het te krap; dat is bewust geaccepteerd. */ @media (max-width: 384.98px) { .kader > div:has(.kadericon) { gap: 2px; } .kader .indent7 { font-size: 12px; } } /* De kaartmarkup komt 1-op-1 uit D7 mee en gebruikt `col-6 col-sm-3`. In Bootstrap 3 (D7) begon `sm` bij 768px, in Bootstrap 5 (D11) al bij 576px — dus sprong het grid 192px te vroeg naar 4 kaarten per rij. Gemeten wrap bij 4-per-rij: 576px → 34 van de 48 regels, 768px en 992px → 6. De inhoud vraagt een kaart van ~190px; die haalt 4-per-rij pas vanaf ±1200px (bij 1280px is de kaart 205px en wrapt niets). Daaronder dus 2 per rij: 576-1199px geeft kaarten van 270-370px, ruim genoeg voor de langste locatienaam. De frontpage-kaarten (blocks_kamptype / blocks_kamptype_pre) hebben hetzelfde probleem maar een andere omslag: die staan in een 100%-brede sectie, dus vanaf 992px is de kaart daar al 234px en past alles. Daar loopt 2-per-rij dus tot 991.98px i.p.v. 1199.98px. */ @media (min-width: 576px) and (max-width: 1199.98px) { .view-display-id-blocks_aanbod .kaderbox.col-sm-3 { flex: 0 0 auto; width: 50%; } } @media (min-width: 576px) and (max-width: 991.98px) { .view-display-id-blocks_kamptype .kaderbox.col-sm-3, .view-display-id-blocks_kamptype_pre .kaderbox.col-sm-3 { flex: 0 0 auto; width: 50%; } } /* De layout van de kaartenrijen (kaderwrap/kaderbox/kader: breedte, tussenruimte, uitlijning, gelijke hoogte, binnenmarge) staat NIET hier maar in css/ozk-kaarten.css — de enige eigenaar van die selectors, laadt als laatste (theme-groep, weight 101). Hier alleen nog het link-uiterlijk. */ .kaderbox a { text-decoration: none !important; color: black !important; } /* Microdata-weektabellen ("Kampen 2026", view event_kenmerken microdata_*): op desktop krijgen ze bewust -15px (ozk-d7-parity-extra.css §microdata, de "structurele verschuiving" die ze uitlijnt met de zijbalk-koppen die via superfish-ozk.css §3.2 óók -15px staan). Die kop-verschuiving gaat op smartphone al UIT (§3.2 2b, grens 767.98px), maar de tabel-regel miste die uitzondering — de tabel viel op mobiel buiten de schermrand (left -3px gemeten). Zelfde grens, zelfde neutralisatie. */ @media (max-width: 767.98px) { .view-event-kenmerken[class*="view-display-id-microdata"] .view-content.row { margin-left: 0; margin-right: 0; width: 100%; } } /* Microdata-weektabellen: altijd dezelfde celgrootte, ongeacht inhoud. De tabel is 2x2 (rij 1: kampweek | weeknummer, rij 2: startdatum | einddatum). In de veld-rewrite stonden width:50% en white-space:nowrap als INLINE style, maar Drupal's Xss-filter stript style-attributen uit view-output (zelfde val als bij de viewblokken-fixronde van 13-07). De tabel viel daardoor terug op table-layout:auto met inhoud-gebaseerde kolommen: "week 1 / week 30" kreeg een andere verdeling dan "week 2 / week 31" met "6 augustus 2027" eronder, dus naast elkaar staande weektabellen liepen visueel niet gelijk. Daarom hier in CSS, waar niets wordt gestript: fixed layout + 50/50, zodat alle vijf microdata-displays (algemeen/nextyear/tkjk/top/typekamp) identiek renderen. Rij 2 krijgt de nowrap terug die inline verloren ging — datums mogen niet midden in "6 augustus 2027" afbreken. Eigen class omdat "table table-striped table-bordered" ook elders wordt gebruikt (o.a. de beschikbaarheidsoverzichten). */ table.ozk-microdata { table-layout: fixed; width: 100%; } table.ozk-microdata > tbody > tr > td { width: 50%; } table.ozk-microdata > tbody > tr:nth-child(2) > td { white-space: nowrap; } /* Kampweken-tabel (view beschikbaarheid_zomerkampen, displays kampdata / lp_body_pre / lp_body_presale: kolommen Kamp | Start | Einde). De views-rijen krijgen row_class "nowrap", maar bario_sub kent — anders dan D7 — geen .nowrap-regel, dus die class deed niets en elke cel brak af op mobiel ("1 / (30)", "zaterdag 24 juli / 2027"). Hier krijgt de class alsnog z'n werking, op de hele rij: geen enkele cel mag midden in een datum breken. */ /* Views-klasse nowrap op cellen en rijen (pariteit met D7). Voorkomt dat datums, badges en statuscodes ongewenst afbreken. */ .nowrap, table td.nowrap, table th.nowrap, tr.nowrap > td, tr.nowrap > th { white-space: nowrap; } .view-beschikbaarheid-zomerkampen tr.nowrap > td { white-space: nowrap; } /* Met nowrap eist de tabel 413px terwijl er op een 360px-toestel 336px is: de .table-responsive-wrapper (Bootstrap, overflow-x:auto) kapte de Einde-kolom dan af tot je horizontaal veegde. Onder sm gaan lettergrootte en celpadding daarom omlaag; daarmee komt de tabel op 347px en past hij in één blik (gemeten op 360 en 390px; op 320px moet je nog vegen). Alleen deze view: de datums zijn hier het enige dat breed is, en op tablet en desktop (696px / 1116px beschikbaar) is er ruimte zat, dus daar verandert niets. Blijft het krap na een tekstwijziging (langere maandnaam), dan is de volgende stap het jaartal uit het veldformat halen — dat staat al in de kop "De kampdata voor 2027 zijn bekend" erboven. */ @media (max-width: 575.98px) { .view-beschikbaarheid-zomerkampen tr.nowrap > td, .view-beschikbaarheid-zomerkampen table.views-view-table > thead > tr > th { font-size: 0.8rem; padding: 0.35rem 0.4rem; } } .parentdiv { background: whitesmoke; display: block; width: 100%; margin: 5px 0 15px 0; } .btn-full { width: 100% !important; } .noborder { border: 0 solid !important; } .nopointer { cursor: default !important; } .margintop { margin-top: 10px !important; } .marginbottom { margin-bottom: 10px !important; } .boxheader { width: 100%; padding: 5px 10px; border-style: solid; border-width: 0; border-color: darkgrey; } .boxheadercaption { font-size: large !important; margin: 10px 5px 0 0 !important; } .boxheadericon { color: #C8C8C8 !important; margin: 10px 0 0 0; font-size: 18px; } .icon { color: #C8C8C8 !important; margin: 5px 0 0 0; font-size: 18px; float: right; } .icon a:hover { color: #c13c61 !important; } /* .full = 100% breed, zodat twee knoppen in een teaser-CTA-blok even breed zijn ongeacht hun tekstlengte. Erfenis uit D7 (Porto-thema); blijft hier omdat de klasse ook op niet-knoppen wordt gebruikt. De bijbehorende .btn-secondary-kleuren zijn verhuisd naar css/ozk-knoppen.css (01-08-2026), waar sinds die datum ALLE knopkleuren staan — daar zonder !important, want dat bestand laadt ná de yeti-CDN. */ .full { display: block; width: 100%; } /* Basis-linkkleur voor alles wat niet via de Bootstrap-variabelen loopt. Stond op het D7-roze (#c13c61) en volgt sinds 28-08-2026 het paars van de variabelen hierboven. */ a { color: #663399; } a:hover, a:focus { color: #7a45b3; } /* .btn-info (de "Meer info"-knopjes in de weektabellen) is verhuisd naar css/ozk-knoppen.css (01-08-2026). */ /* De webform-knoppen (Indienen / Volgende / Vorige) zijn verhuisd naar css/ozk-knoppen.css (01-08-2026) — inclusief de .button--primary-variant die Drupal zonder .btn-class uitschrijft. */ /* Informatieblokken (.alert-info, o.a. de presale-aankondiging in de *_ready-views) stonden op wit op Bootstrap's cyaan #5bc0de: contrastratio 2,09:1, waar WCAG AA 4,5:1 vraagt — vandaar dat het onleesbaar aanvoelde. Nu de huisstijl-blauw #006E83 als accent op een lichte tint daarvan, met donkere tekst: #343a40 op #E7F1F3 geeft ~9,6:1 (AAA). Dezelfde opzet als de grijze .alert-light-kaders elders op de site, dus het blijft rustig; de linkerrand geeft het de nadruk die een mededeling nodig heeft. */ .alert-info { --bs-alert-color: #343a40; --bs-alert-bg: #E7F1F3; --bs-alert-border-color: #C3DDE2; color: #343a40 !important; background-color: #E7F1F3 !important; border-color: #C3DDE2 !important; border-left: 4px solid #006E83 !important; } /* Naast het contrast was de grootte het probleem: de alerts stonden op 14px terwijl de tekst eromheen 17,1px is, wat ze ondanks de donkere letter nog moeilijk leesbaar maakte. `inherit` i.p.v. een vaste maat, want de alerts staan in views-markup binnen content die zelf 17,1px is en een concurrerende regel zette ze hard op 14px — met inherit lopen ze altijd mee met de tekst eromheen. Geldt voor alle alert-varianten; ze komen uit dezelfde markup. */ .alert, p.alert, .alert p, .alert li { font-size: inherit !important; line-height: 1.6 !important; } /* Links in statusberichten (Drupal messages / Bootstrap alerts) kregen nog Bootstrap's eigen alert-linkkleur (specifieker dan de globale a-regel hierboven) — ook naar OZK-roze. */ .alert a, .alert .alert-link, .messages a { color: #663399; } .alert a:hover, .alert a:focus, .messages a:hover, .messages a:focus { color: #7a45b3; } /* ======================================================================== CIVICRM-POPUPS BOVEN HET SUPERFISH-MENU ------------------------------------------------------------------------ CiviCRM opent zijn formulier-popups (bv. "Edit participant") als een jQuery-UI dialog (.ui-dialog / .ui-widget-overlay, class .ui-front). Die krijgt van jQuery-UI dynamisch een LAGE z-index (~100). Het superfish- menu (superfish-ozk.css: z-index 9999 !important) en de sticky #header (z-index 1030) staan daar ver boven, waardoor de modal ONDER het menu valt en de bovenkant ervan onbedienbaar is. We tillen de CiviCRM-modal + overlay expliciet boven beide. Geldt alleen als er een dialog open is (.ui-dialog bestaat dan pas), dus geen effect op de normale menu-stacking. ======================================================================== */ .ui-widget-overlay, .ui-widget-overlay.ui-front { z-index: 100000 !important; } .ui-dialog, .ui-dialog.ui-front { z-index: 100001 !important; } /* Gevolg van de regel hierboven: select2-keuzelijsten (contactkeuze, contactverwijzingen, keuzevelden, tags, groepen) staan op z-index 9999 en vielen daardoor ACHTER de opgetilde dialoog (gemeten 28-09-2026, tab TALENT bewerken). Masker en lijst dus mee omhoog, net boven de dialoog. */ .select2-drop-mask { z-index: 100010; } .select2-drop { z-index: 100011; } /* ======================================================================== CIVICRM-POPUPS SCROLLBAAR MAKEN ------------------------------------------------------------------------ De jQuery-UI dialog heeft van zichzelf geen max-height/overflow: bij een lange modal (bv. "Edit participant" met veel velden) groeit de dialog voorbij de viewport en is de onder- of bovenkant onbereikbaar, want de inhoud scrolt niet. We begrenzen de hele dialog op 90vh en maken hem een flex-kolom, zodat de titelbalk vast blijft en ALLEEN het .ui-dialog-content binnenin scrolt. Additief t.o.v. de z-index-fix hierboven; raakt de stacking NIET. ROOT CAUSE van "kan niet scrollen met wheel/scrollbar" (14-jul, geverifieerd in browser): de .ui-dialog-content (#crm-ajax-dialog-N) kreeg computed pointer-events: none uit een CROSS-ORIGIN CDN-stylesheet (bootstrap_cdn, niet uitleesbaar via document.styleSheets). Daardoor gingen alle muis-events — inclusief het muiswiel — DWARS door de content heen naar de .ui-dialog eronder (elementFromPoint op het midden van de content gaf .ui-dialog, niet de content). De dialog-wrapper is geen scroll-container, dus het wiel deed niets; scrollTop werkte programmatisch WEL (geen pointer-event nodig). De flex/overflow hierboven was dus nooit het probleem. Fix: pointer-events terug op auto forceren. Directe declaratie op de content wint van de (geërfde noch inline) cross-origin bron. ======================================================================== */ .ui-dialog { max-height: 90vh !important; display: flex !important; flex-direction: column !important; } .ui-dialog .ui-dialog-content { flex: 1 1 auto !important; overflow-y: auto !important; /* Herstel muis-interactie (wheel/scrollbar/klik) op de dialog-inhoud; een CDN-stylesheet zet hier pointer-events: none op. */ pointer-events: auto !important; } /* ======================================================================== COMPACTERE CIVICRM-SCHERMEN ------------------------------------------------------------------------ Op /civicrm/* had de main-canvas een margin-top van 54px (uit het Gin/ admin-navigation-thema), waardoor er een grote lege strook stond tussen de vaste CiviCRM-menubalk en de zwarte contact-header. Die ruimte weg, zodat de inhoud direct onder de menubalk begint. Beperkt tot .page-civicrm zodat gewone Drupal-adminpagina's ongemoeid blijven. De body-padding-top (compenseert de fixed menubalk + Drupal admin-toolbar) blijft ongemoeid; de menubalk-positie wordt door CiviCRM's eigen drupal-displace-JS beheerd. ======================================================================== */ body.page-civicrm .dialog-off-canvas-main-canvas { margin-top: 0 !important; } /* De fixed CiviCRM-menubalk (top: 40px, z-index 1000) begint links op x=0 en viel daardoor over de onderrand van het Drupal admin-toolbar-logo (x 12-52, y 12-52) heen — een offset-mismatch met de Gin admin-toolbar. We laten de menubalk-inhoud rechts van de logo-zone beginnen (56px), zodat het logo vrij blijft. box-sizing houdt de balk op 100% breedte (geen horizontale overflow). De verticale positie/body-padding wordt door CiviCRM's JS beheerd en blijft ongemoeid. */ body.page-civicrm #civicrm-menu { padding-left: 56px !important; box-sizing: border-box !important; } /* De sticky #header (z-index 1030, hierboven) lag óver de vaste CiviCRM- menubalk en haar uitklapmenu's: in de stand "onder het CMS-menu" zet core (crm-menubar.css, body.crm-menubar-below-cms-menu, vanaf 768px) #civicrm-menu op z-index 1000, het submenu komt op 1001; gemeten op next 08-09-2026. Het logo bedekte daardoor de bovenste items van elk uitklapmenu (bij "Beheer": Api Explorer, Beheerpaneel, Gegevens en schermen), die zo onklikbaar waren. Zodra de menubalk er is (body.crm-menubar-visible, alleen voor ingelogde beheerders) zetten we de header er net onder; 999 blijft ruim boven de pagina-inhoud en boven de Drupal-admin-toolbar (501), dus verder verandert er niets aan de stapeling. !important omdat de #header-regel dat ook heeft. */ body.crm-menubar-visible #header { z-index: 999 !important; } /* D7 (Porto-thema) word-rotator opnieuw opgebouwd in pure CSS, zonder de originele JS-plugin: de HTML (geport uit D7) bevat al de losse woorden als aparte 's in .word-rotate-items (bv. "zomerkamp!" "kinderkamp!" "brugkamp!" "tienerkamp!" "jeugdkamp!"). Elke span krijgt dezelfde 10s-keyframe-animatie met een gestaffelde animation-delay (2s uit elkaar voor 5 woorden), zodat er precies 1 woord tegelijk zichtbaar is en ze elkaar in-en-uit faden — hetzelfde effect als D7, zonder JS-library. */ .word-rotate { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; min-width: 260px; } /* GEEN position:relative hier: .word-rotate-items zelf heeft hoogte 0 (enige inhoud is absoluut gepositioneerd) en zakt als inline-block anders via baseline-uitlijning ~30px weg binnen de regelhoogte van .word-rotate — de spans (positie relatief aan de dichtstbijzijnde positioned ancestor) vielen daardoor grotendeels buiten de overflow:hidden-clip. Spans positioneren nu relatief aan .word-rotate zelf (top:0/left:0 daarvan). */ .word-rotate-items { display: inline-block; width: 100%; } .word-rotate-items > span { position: absolute; top: 0; left: 0; white-space: nowrap; opacity: 0; animation: ozk-word-rotate-cycle 10s infinite; } .word-rotate-items > span:nth-child(1) { animation-delay: 0s; } .word-rotate-items > span:nth-child(2) { animation-delay: 2s; } .word-rotate-items > span:nth-child(3) { animation-delay: 4s; } .word-rotate-items > span:nth-child(4) { animation-delay: 6s; } .word-rotate-items > span:nth-child(5) { animation-delay: 8s; } /* Korte fades (28-08-2026). Met 4%/16% duurde in- en uitfaden elk 0,4s van de 2s die een woord aan de beurt is: gemeten stond de kop 32% van de tijd niet vol zichtbaar, en 22% van de tijd onder de helft. Die kop is sinds vandaag de h1 van de homepage, dus half doorzichtig is er een te vaak. Nu 0,2s in en 0,2s uit; volledig uitfaden blijft nodig, want de woorden staan absoluut op dezelfde plek en zouden elkaar anders overlappen. */ @keyframes ozk-word-rotate-cycle { 0% { opacity: 0; } 2% { opacity: 1; } 18% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } } /* Groepsfoto beeldvullend onder de titel. Er zitten twee dingen in de weg: 1. Barrio (bootstrap_barrio/css/components/field.css) zet vanaf 560px breed `.node .field--type-image { float: left; margin: 0 1em 0 0 }`. De wrapper wordt daardoor floated + width:auto, dus shrink-to-fit, en blijft 1em smaller dan de body-tekst eronder - de foto lijnt links wel uit met de tekst maar rechts niet. Zelfde valkuil als bij de article-teaser, zie de toelichting bij .node--type-article...field--name-field-image in ozk-d7-parity-extra.css: float:none is noodzakelijk, niet cosmetisch. 2. De overlay wordt gerenderd op 1920 px breed en de image-formatter zet die maat als width/height-attribuut in de markup. Zonder max-width liep de foto de contentkolom uit, met een horizontale scrollbalk op elk scherm onder 1920 px. height:auto houdt de 16:9 van de overlay intact. Gescoped op de groepsfoto-node: het floatgedrag van afbeeldingen in andere contenttypes (article-teasers hebben hun eigen flex-layout) blijft zoals het is. field_extraimages krijgt alleen de schaalbescherming - die style levert max 1300 px en overschrijdt de contentkolom dus ook. */ .node--type-groepsfoto .field--name-field-groepsfoto { float: none; width: 100%; margin-right: 0; } .node--type-groepsfoto .field--name-field-groepsfoto img, .node--type-groepsfoto .field--name-field-extraimages img { display: block; max-width: 100%; height: auto; } /* Overzicht /groepsfotos (view views_groepsfotos, bootstrap-grid col-md-4 / col-sm-6 / col-12). De thumbnails komen uit ozk_groepsfoto_720x405 - 720 px zodat ze scherp zijn op een 2x-scherm, want de kolom is maximaal ~366 px breed. Zonder deze regel zet de formatter dat als width-attribuut en loopt elke thumbnail zijn kolom uit. width:100% i.p.v. max-width:100%: de foto moet de kolom juist vullen - met de vorige style (medium, 220 px) bleven de thumbnails kleiner dan hun kolom en stond het grid rommelig. */ .view-views-groepsfotos .views-field-field-groepsfoto img { display: block; width: 100%; height: auto; } /* ======================================================================== Kampdata-weergave - view event_kenmerken, alle vijf microdata-displays (algemeen / nextyear / tkjk / top / typekamp; rechter sidebar op o.a. /kampen). De selector matcht ze alle vijf via de display-id-class. Weeknummer vooraan, daarnaast twee datumtegels met de weekdag afgekort voor de maand. Randvoorwaarde is de breedte: die sidebar is op desktop maar ~249 px. Daarom staat alles op nowrap en is de weekdag afgekort ("za"/"vr") in plaats van een eigen regel ("zaterdag t/m vrijdag") - dat brak eerder over drie regels. De kalenderweek staat als klein grijs "wk 30" onder het weeknummer; als roze badge rechts liep hij 60 px buiten de kolom. De schema.org-microdata staat onaangeroerd in .ozk-microdata-bron in dezelfde veld-rewrite; zoekmachines lezen microdata ook in display:none-elementen. Alle opmaak hier en niet inline: Drupal's Xss-filter stript style-attributen uit view-output. .view-content draagt ook Bootstrap's .row; door de tussenlagen op display:contents te zetten wordt elke .ozk-kampweek een direct grid-item en stapelen de kampweken netjes onder elkaar. */ /* Eén omhullende box om de titel én alle kampweken samen; de weken worden onderling gescheiden door een dunne lijn i.p.v. elk een eigen kader. De kop "Kampen 2027" is een view-header (geen blocklabel), dus die valt vanzelf binnen de box zodra de rand op de view zelf staat. .view-header en .view-content dragen allebei margin-left:-15px van Bootstrap's .row-class, waardoor ze links buiten hun blok uitstaken. Die marges gaan op 0: de box hoort op de blokrand te staan, gelijk met het quotes-blok eronder (gemeten 949 desktop / 12 mobiel). */ /* Onder iets ruimer dan boven: de kop pakt met zijn line-height al lucht, waardoor een gelijke padding onderaan optisch krapper oogt. */ /* Rand paars i.p.v. grijs #d3d3d3 (besluit Richard, 1 aug 2026). Grijs was de enige "kleur" die niets betekende; paars #663399 is de huisstijlkleur zonder eigen baan en markeert nu de omrande boxen — zie de memory huisstijl-kleursemantiek-banen. Zelfde wijziging op .ozk-cadeaubox (r.1487), die bewust dezelfde rand en padding deelt. */ /* Zijpadding 13px, niet 30px (besluit Richard 16-8-2026: "titel moet meer naar links om goed uit te lijnen, kijk ook in menu blok"). De blokken in deze kolom beginnen op 934 en zetten hun tekst op 949 — de kopbalk van een menublok heeft 15px padding, en de menu-items lijnen daaronder. Deze box heeft een eigen rand van 2px, dus 2 + 13 = 15 brengt kop én weken op exact diezelfde 949. Met de oude 30px stond alles hier 17px naar rechts (gemeten op 966), waardoor de box uit de kolomlijn viel. Verticaal blijft het ruim: 26px boven, 34px onder. */ /* DE SELECTOR IS BEWUST GENERIEK — NIET SPECIFIEK MAKEN OP ÉÉN DISPLAY. Nagemeten 16-8-2026: álle vijf de microdata-displays van de view event_kenmerken renderen de kampweek-opmaak (`ozk-kampweek` zit in de veldconfig van alle vijf), en ze staan alle vijf in gebruik: microdata_typekamp layout_kampen (/kinderkamp, /brugkamp, ...) microdata_top layout_kampen microdata_algemeen layout_leiding, layout_ouders, layout_overons, layout_vrienden microdata_nextyear, microdata_tkjk (elders ingebed) De comment verderop dat "de andere vier nog de oude tabelweergave tonen" is ACHTERHAALD; dat was ooit zo maar geldt niet meer. Een poging deze regels op `microdata_typekamp` te beperken haalde op 16-8-2026 de rand, de padding én de kopbalk weg bij de boxen op /kampen, /leiding, /ouders, /overons en /vrienden (gemeten: rand 0px, padding 0px). Wil je één display anders, voeg dan een extra regel toe in plaats van deze te versmallen. */ [class*="view-display-id-microdata_"] { border: 2px solid #663399; padding: 26px 13px 34px; } /* VERVALLEN 16-8-2026 — de verschuiving hoort niet meer hier. Deze box schoof zelf 15px naar links om op één lijn te komen met de sidebarkoppen, die toen elk hun eigen `margin-left:-15px` droegen (superfish-ozk.css §2). Sinds 1 aug 2026 draagt het BLOK die verschuiving — `ozk-blokken.css` r.54 zet `.col-lg-3 .block { margin-left:-15px }` op álle blokken in de kolom, juist zodat kop, paneel en omrande boxen op één lijn liggen. Daardoor kwam de -15px hier dubbel op: gemeten 16-8-2026 stond deze box op 919 terwijl de menublokken in dezelfde kolom op 934 begonnen, dus 15px links buiten zijn eigen blok (feedback Richard: "staat te veel naar links"). De regel is daarom leeg; de box volgt nu de blokrand, met zijn eigen 30px binnenpadding als leesruimte — net als de cadeaubox in de kolom ernaast. */ /* De structurele -15px hoort nu op de box hierboven, niet meer op de inhoud. Twee bestaande regels zetten hem op de inhoud en moeten voor déze display wijken (de andere vier microdata-displays houden ze, want die tonen nog de oude tabelweergave): - superfish-ozk.css §2: `.col-lg-3 h2 { margin-left:-15px !important }` voor koppen die BOVEN hun blok hangen - deze kop staat nu ín de box; - ozk-d7-parity-extra.css r207: `margin-left:-15px; width:calc(100%+15px)` op .view-content.row, via een selector die op alle vijf displays matcht. Vandaar !important: het overruled een !important, geen luiheid. */ [class*="view-display-id-microdata_"] .view-header, [class*="view-display-id-microdata_"] .view-content.row { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; } /* DE KOP IS EEN VOLLE BALK IN HET HUISSTIJLGRIJS (besluit Richard 16-8-2026). Zelfde vorm als de blokkopbalken elders (Rambla 1.05rem als chrome, .55rem verticale padding), maar met #3c3c3b — het grijs uit de ontwerpersmail van 2015 dat ook het footervlak draagt. Daarmee heeft de site drie kopbalkkleuren, elk met een eigen betekenis: paars #663399 navigatie (menublokken, kampkaarten: de kaart ís een link) blauw #006E83 informatie (CTA-kaarten, Leeftijdscriteria) grijs #3c3c3b neutrale feiten (deze box: weeknummers en data) Wit haalt op grijs 11,04:1 — het ruimste van de drie. De negatieve marges zijn exact de binnenpadding van de box (26px boven, 30px links/rechts, zie r.1396), zodat de balk van rand tot rand loopt en de bovenkant afsluit binnen de paarse rand. Die padding is op elke breedte gelijk, dus één set marges volstaat. !important is hier nodig, niet luiheid: superfish-ozk.css §2 zet met !important zowel `margin-left:-15px` ALS `color:#343a40` op élke `.col-lg-3 h2`, en ozk-d7-parity-extra.css doet hetzelfde op de rij eronder. Zonder `!important` op de kleur werd de titel #343a40 op #3c3c3b — contrast 1,05:1, oftewel volledig onleesbaar (gemeten 16-8-2026). */ [class*="view-display-id-microdata_"] .view-header h2 { background: #3c3c3b; color: #ffffff !important; font-family: Rambla, Arial, Helvetica, sans-serif; font-size: 1.15rem; font-weight: 400; line-height: 1.3; margin: -26px -13px 20px !important; padding: .6rem 13px; width: auto !important; } /* Gelijke witruimte rondom: de eerste en laatste rij leveren hun eigen verticale padding in, zodat rondom alleen de 16 px van de box overblijft. */ [class*="view-display-id-microdata_"] .views-row:last-child .ozk-kampweek { padding-bottom: 0; } [class*="view-display-id-microdata_"] .view-content.row { display: grid; grid-template-columns: 1fr; margin: 0; } [class*="view-display-id-microdata_"] .views-row, [class*="view-display-id-microdata_"] .views-row > div, [class*="view-display-id-microdata_"] .views-row > div > span { display: contents; } [class*="view-display-id-microdata_"] .ozk-microdata-bron { display: none; } /* Twee kolommen: het weeknummer neemt precies zijn eigen breedte, de rest is voor de periode. Die staat gecentreerd in de ruimte NAAST het weeknummer - niet in de hele box. Centreren over de volle boxbreedte levert namelijk 10 px wit links en 80 px rechts op: wiskundig het midden, maar optisch links-zwaar doordat links het weeknummer staat en rechts niets. */ /* Geen zijpadding: die zit al op de box. De scheidingslijn loopt daardoor van rand tot rand binnen de box. */ .ozk-kampweek { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 10px 0; } /* Scheidingslijn tussen de kampweken; niet boven de eerste. */ [class*="view-display-id-microdata_"] .views-row ~ .views-row .ozk-kampweek { border-top: 1px solid #e3e3e3; } /* Tegels tegen de rechterkant van de kolom; de padding van de box blijft dus als marge staan. */ .ozk-kampweek-periode { display: flex; align-items: center; justify-self: end; gap: 10px; } /* Weeknummer vooraan, datumtegels tegen de rechterrand (margin-right:auto) zodat de box over de volle kolombreedte gevuld is. De tegels lijnen daardoor ook onderling uit tussen week 1 en week 2. Underline weg - twee onderstreepte links onder elkaar maakt de smalle kolom onrustig; hover brengt hem terug. */ .ozk-kampweek-nr { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; } /* Zelfde typografische opbouw als een datumtegel: klein grijs label boven, groot halfvet eronder. Zo leest het weeknummer als derde tegel mee. */ .ozk-kampweek-kal { font-size: 11px; font-weight: 600; color: #8a8a8a; letter-spacing: .02em; } .ozk-kampweek-nr a { font-size: 19px; font-weight: 600; line-height: 1.15; text-decoration: none; } .ozk-kampweek-nr a:hover { text-decoration: underline; } /* Datumtegels: vierkant, grijs vlak tegen de witte box. Maand en weekdag klein halfvet boven het dagcijfer (volgt de typografische schaal klein=halfvet). */ .ozk-kampweek-datum { flex: none; width: 46px; text-align: center; background: #f0f0f0; padding: 3px 0 5px; } .ozk-kampweek-datum-m { display: block; font-size: 11px; font-weight: 600; color: #8a8a8a; letter-spacing: .02em; white-space: nowrap; } .ozk-kampweek-datum-d { display: block; font-size: 19px; font-weight: 600; line-height: 1.15; color: #333; } .ozk-kampweek-pijl { flex: none; color: #bbb; } /* 992-1199 px: de zijkolom is hier het smalst (219 px i.p.v. 264 daarboven). Met de normale maten komt de inhoud 17 px tekort, dus tegels, tussenruimte en padding een slag compacter. Deze query staat bewust ná de basisregels: bij gelijke specificiteit wint de laatste, en eerder in het blok verloor `width: 42px` van de `width: 52px` hierboven. */ @media (min-width: 992px) and (max-width: 1199.98px) { [class*="view-display-id-microdata_"] { padding: 14px 14px 22px; } .ozk-kampweek-datum { width: 42px; } .ozk-kampweek-periode { gap: 6px; } } /* ======================= einde kampdata-weergave ======================= */ /* ======================================================================== */ /* Cadeau-tekst op de /aanmelden-pagina's */ /* ======================================================================== */ /* De wervende alinea ("Iedereen verdient een Onvergetelijk Zomerkamp!") staat onderaan de tweede kolom in een eigen omkaderde box met dezelfde rand en padding als de kampdata-box in de zijbalk hierboven, zodat de pagina één kadervorm kent. De class staat in de blok-body zelf, niet op de blok-wrapper: van de twee varianten (u-vorm kk/bk, jij-vorm tk/jk/top) rendert de niet-zichtbare variant tóch een lege `div.block-block-content…` in de DOM. Een class op die wrapper zou daar een lege omrande box tekenen. Geen eigen margin-bottom: de blok-wrapper in de kolom heeft er al 28 px, gelijk aan de andere blokken erboven. */ /* Paarse rand, gelijk met de kampweken-box hierboven (r.1313) — zie de toelichting daar. */ .ozk-cadeaubox { border: 2px solid #663399; padding: 26px 30px 34px; } /* De laatste alinea levert zijn onder-marge in, zodat rondom alleen de padding van de box zelf overblijft (anders 34 + 16 px onderaan). */ .ozk-cadeaubox > :last-child { margin-bottom: 0; } /* Zelfde compacte maat als de kampdata-box in het smalste kolombereik. */ @media (min-width: 992px) and (max-width: 1199.98px) { .ozk-cadeaubox { padding: 14px 14px 22px; } } /* ======================================================================== */ /* Core Layout Builder-secties (intra-dashboards, ~30 nodes onder /intra). De core-layouts layout--twocol/threecol/fourcol-section zetten kolommen als flex-items van exact 50%/33%/25% NAAST elkaar, zonder gutter. Een views-tabel die breder is dan zijn kolom steekt daardoor over de buurkolom heen (overflow: visible) — zichtbaar als "overlappende blokken" op o.a. /intra/keuken/start. Bootstrap-secties (blb_*) hebben dit probleem niet (eigen col-*-padding) en blijven hier buiten schot. */ .layout--twocol-section, .layout--threecol-section, .layout--fourcol-section { row-gap: 28px; /* 28px = de blok-onderlingemarge elders in het thema */ column-gap: 0; /* GEEN kolom-gap: core zet flex-basis 50%/33%/25% op de regio's en flex-wrap: wrap op de sectie; 50% + 50% + 28px is meer dan 100%, dus de tweede kolom viel ONDER de eerste (gezien 02-09-2026 op /intra/jk1/start: intro-blok onder de eventkaart, rechterkolom leeg). De tussenruimte tussen de kolommen komt van de 15px padding in ozk-intra-chrome.css. */ margin-bottom: 28px; /* ruimte tussen opeenvolgende secties */ } /* Kolommen mogen krimpen onder de content-minimumbreedte (min-width: 0), en een tabel die dan alsnog niet past scrollt BINNEN zijn eigen kolom in plaats van over de volgende kolom te vallen. */ .layout--twocol-section > .layout__region, .layout--threecol-section > .layout__region, .layout--fourcol-section > .layout__region { flex-grow: 1; /* lege regio's worden niet gerenderd: laat de gevulde kolommen die ruimte opvullen (bij een volle sectie valt er niets te groeien en blijven de 50/33/25%-verhoudingen intact) */ min-width: 0; overflow-x: auto; } /* Aanvulling op het blok hierboven (05-08-2026, mobiel-overflow /intra): 1) de volle-breedte-sectie (layout--onecol) viel buiten de overflow-fix; de "Overzicht Hoofdkeuken"-tabel (event_kenmerken, 9 kolommen, ~950px) duwde op mobiel de hele pagina breed. Gescoped op intra-nodes omdat layout--onecol site-breed ook in gewone node-displays voorkomt en een scroll-container daar bijwerkingen kan hebben (sticky/dropdowns). NB body-class is hier node--type-intra (bario), niet page-node-type-*. */ .node--type-intra .layout--onecol > .layout__region { overflow-x: auto; } /* 2) dichtgeklapte superfish-submenu's (.sf-hidden) horen 1x1px + clip te zijn (library-CSS), maar minstens één exemplaar ontsnapt daaraan en maakte 59px paginabreedte op mobiel. Klassiek superfish-verbergpatroon als vangnet: ver buiten beeld parkeren. Superfish haalt de klasse bij hover/openen weg, dus het uitklappen blijft gewoon werken. */ ul.sf-menu ul.sf-hidden { left: -99999em !important; top: -99999em !important; } /* 2b) ...en vóórdat superfish-JS heeft gedraaid hebben de submenu's HELEMAAL geen class, dus ook geen .sf-hidden: de regel hierboven grijpt dan niet en het submenu staat op left:0. Gemeten 17-09-2026 op 390px: het intranetmenu (block-bario-sub-sf-intranet) liep tot 485px door, precies 95px paginabreedte te veel. Het is alles-of-niets — met JS uit hebben 0 van de 10 submenu's een class, erna alle 10 — dus het treft elke pagina zolang de plugin nog niet klaar is. Deze regel raakt uitsluitend die pre-init toestand: zodra superfish .sf-hidden zet, matcht :not([class]) niet meer en verandert er niets. Zonder !important, zodat de hover-regel in superfish-ozk.css (li:hover > ul { display:block !important }) altijd wint. */ ul.sf-menu li > ul:not([class]) { display: none; } /* Naamrij (ozk-flexbox--naam, webforms + portaalformulieren). Onder 1200px houden voornaam en tussenvoegsel elkaar vast op één regel en zakt alleen de achternaam naar zijn eigen regel; tussen 768 en 1200px staat de rij in een halve kolom van 340-460px en liep "Jouw voornaam" anders over drie regels. Bases 40%+25%+100%: de som > 100% dwingt de achternaam te breken; met basis 0+0+100% wrapt er NIETS en krimpen de eerste twee naar nul (gemeten 16-08-2026). Op positie (nth-child), niet op .webform-flex--N: die klasse is het #flex-getal uit de webform en geen plaats. 48 formulieren staan op 3-2-4, dus een regel op --2/--1/--3 zette daar de voornaam op 100%, liet het tussenvoegsel een eigen regel vullen en de achternaam op de halve breedte (29-09-2026, webform_1641). */ @media (max-width: 1199.98px) { .ozk-flexbox--naam { flex-wrap: wrap; } .ozk-flexbox--naam > .webform-flex { min-width: 0; } .ozk-flexbox--naam > .webform-flex:nth-child(1) { flex: 2 1 40%; } .ozk-flexbox--naam > .webform-flex:nth-child(2) { flex: 1 1 25%; } .ozk-flexbox--naam > .webform-flex:nth-child(3) { flex: 1 1 100%; } } /* Onder 768px zet webform de flexbox op block en de velden zonder zijmarge; de rij krijgt daarom geen negatieve marge (die stak 8px buiten de kolom) maar een gap. */ @media (max-width: 767.98px) { /* De velden zelf dragen hier al 16px ondermarge; de rij (en de wrapper eromheen) krijgt van webform .mb-3 nog eens 16px (!important), dus 0 !important om op 16px uit te komen. */ .ozk-flexbox--naam, .webform-flexbox:has(> .webform-flex > .webform-flex--container > .ozk-flexbox--naam) { margin: 0 !important; } .ozk-flexbox--naam { display: flex; gap: 0 1em; } } /* Uitlijning vanaf 768px (geneste flexbox): zie ozk-formulieren.css, sectie naambalk. */ /* ========================================================================== History Timeline (D7 parity) ========================================================================== */ ul.history { margin: 25px 0; padding: 0; list-style: none; } ul.history li { margin: 30px 0; padding: 0; clear: both; position: relative; min-height: 160px; } ul.history li:after { content: ""; display: table; clear: both; } ul.history li .thumb { background: transparent url('../images/history-thumb.png') no-repeat 0 0; width: 227px; height: 160px; margin: 0; padding: 0; float: left; } ul.history li .thumb img { border-radius: 150px; margin: 7px 8px; width: 145px; height: 145px; object-fit: cover; } ul.history li .featured-box { text-align: left; margin-left: 225px; margin-bottom: 25px; min-height: 120px; background: #ffffff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); border: 1px solid #e2e8f0; border-top: 3.5px solid #a83f5e; padding: 18px 22px; } ul.history li .featured-box .box-content { display: flex; flex-direction: column; color: #475569; font-size: 0.95rem; line-height: 1.6; } ul.history li .featured-box h4 { margin: 0 0 8px 0; font-size: 1.25rem; font-weight: 700; color: #1e293b; } ul.history li .featured-box p, ul.history li .featured-box .history-desc { margin: 0 0 8px 0; color: #475569; font-size: 0.95rem; line-height: 1.6; } ul.history li .featured-box p:last-child, ul.history li .featured-box .history-desc:last-child { margin-bottom: 0; } @media (max-width: 767px) { ul.history li .thumb { float: none; margin: 0 auto 15px auto; } ul.history li .featured-box { margin-left: 0; } } /* ========================================================================== Campaign Landing Pages & Featured Boxes (Contrast & Mobile Optimization) ========================================================================== */ .featured-box { background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 12px !important; margin-bottom: 1.5rem !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; text-align: left; } .featured-box:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important; } .featured-box .box-content { padding: 1.5rem !important; background: transparent !important; } .featured-box h4 { font-size: 1.25rem !important; font-weight: 700 !important; color: #004767 !important; margin-bottom: 0.75rem !important; line-height: 1.35 !important; } .featured-box p { font-size: 0.98rem !important; line-height: 1.65 !important; color: #1e293b !important; /* Crisp, dark slate for high contrast */ margin-bottom: 1rem !important; } .featured-box p:last-child { margin-bottom: 0 !important; } /* E-paper & Outline CTA Buttons inside Featured Box */ .featured-box .btn-outline-primary { border: 2px solid #a83f5e !important; color: #a83f5e !important; background-color: #ffffff !important; font-weight: 700 !important; font-size: 1.05rem !important; transition: all 0.2s ease-in-out !important; } .featured-box .btn-outline-primary:hover, .featured-box .btn-outline-primary:focus { background-color: #a83f5e !important; border-color: #a83f5e !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(168, 63, 94, 0.25) !important; } /* Standout Bottom Conversion Card (Deep OZK Blue with Pure White Text & Gold Button) */ .featured-box.featured-box-secundary, .featured-box-secundary { background: linear-gradient(135deg, #004767 0%, #002b3d 100%) !important; border: 1px solid #001f2d !important; border-radius: 12px !important; color: #ffffff !important; box-shadow: 0 8px 24px rgba(0, 71, 103, 0.25) !important; } .featured-box.featured-box-secundary .box-content, .featured-box-secundary .box-content { padding: 2.25rem 1.75rem !important; text-align: center !important; background: transparent !important; } .featured-box.featured-box-secundary h4, .featured-box-secundary h4 { color: #ffffff !important; font-size: 1.5rem !important; font-weight: 700 !important; margin-bottom: 0.85rem !important; text-align: center !important; } .featured-box.featured-box-secundary p, .featured-box-secundary p { color: #f8fafc !important; /* Pure crisp bright text */ font-size: 1.05rem !important; line-height: 1.6 !important; margin-bottom: 1.5rem !important; text-align: center !important; } /* Full-width Touch-Friendly Buttons for Mobile Conversion */ .btn-full { display: block !important; width: 100% !important; text-align: center !important; padding: 0.9rem 1.5rem !important; font-size: 1.08rem !important; font-weight: 700 !important; border-radius: 8px !important; min-height: 48px !important; line-height: 1.4 !important; white-space: normal !important; word-wrap: break-word !important; } .featured-box-secundary .btn-primary, .featured-box.featured-box-secundary .btn-primary { background-color: #f5c518 !important; border-color: #f5c518 !important; color: #002738 !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(245, 197, 24, 0.4) !important; } .featured-box-secundary .btn-primary:hover, .featured-box-secundary .btn-primary:focus, .featured-box.featured-box-secundary .btn-primary:hover, .featured-box.featured-box-secundary .btn-primary:focus { background-color: #deb10f !important; border-color: #deb10f !important; color: #001924 !important; box-shadow: 0 6px 18px rgba(245, 197, 24, 0.55) !important; } @media (max-width: 576px) { .featured-box .box-content { padding: 1.25rem !important; } .featured-box-secundary .box-content, .featured-box.featured-box-secundary .box-content { padding: 1.75rem 1.25rem !important; } .featured-box h4 { font-size: 1.15rem !important; } .featured-box-secundary h4, .featured-box.featured-box-secundary h4 { font-size: 1.35rem !important; } .btn-full { padding: 0.85rem 1rem !important; font-size: 1.02rem !important; } } /* ========================================================================== 2x2 Grid USP Kaarten op partnerpagina's (Exact screenshot styling) ========================================================================== */ .landing-usps-grid { display: flex !important; flex-wrap: wrap !important; } .landing-usps-grid > .col-6 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; } .landing-usps-grid .featured-box, .landing-usps-grid .landing-usp-card { background: #ffffff !important; border: 1px solid #cbd5e1 !important; border-radius: 12px !important; margin-bottom: 0 !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important; transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; text-align: left; height: 100% !important; display: flex !important; flex-direction: column !important; } .landing-usps-grid .featured-box:hover, .landing-usps-grid .landing-usp-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important; } .landing-usps-grid .featured-box .box-content, .landing-usps-grid .landing-usp-card .box-content { padding: 1.5rem !important; background: transparent !important; height: 100% !important; display: flex !important; flex-direction: column !important; } .landing-usps-grid .featured-box h4, .landing-usps-grid .landing-usp-title { font-size: 1.25rem !important; font-weight: 700 !important; color: #004767 !important; margin-bottom: 0.5rem !important; line-height: 1.35 !important; display: flex !important; align-items: center !important; } .landing-usps-grid .featured-box h4 svg, .landing-usps-grid .landing-usp-title svg { width: 24px !important; height: 24px !important; min-width: 24px !important; fill: #C13C62 !important; flex-shrink: 0 !important; } .landing-usps-grid .featured-box p, .landing-usps-grid .landing-usp-text { font-size: 0.98rem !important; line-height: 1.65 !important; color: #1e293b !important; margin-bottom: 0 !important; } @media (max-width: 575.98px) { .landing-usps-grid { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; margin-left: -4px !important; margin-right: -4px !important; } .landing-usps-grid > .col-6 { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding-left: 4px !important; padding-right: 4px !important; margin-bottom: 8px !important; } .landing-usps-grid .featured-box, .landing-usps-grid .landing-usp-card { border-radius: 8px !important; } .landing-usps-grid .featured-box .box-content, .landing-usps-grid .landing-usp-card .box-content { padding: 10px 8px !important; } .landing-usps-grid .featured-box h4, .landing-usps-grid .landing-usp-title { font-size: 0.88rem !important; margin-bottom: 6px !important; line-height: 1.25 !important; } .landing-usps-grid .featured-box h4 svg, .landing-usps-grid .landing-usp-title svg { width: 18px !important; height: 18px !important; min-width: 18px !important; } .landing-usps-grid .featured-box p, .landing-usps-grid .landing-usp-text { font-size: 0.78rem !important; line-height: 1.35 !important; color: #495057 !important; } } /* Quotes carrousel knop: paars outline (#663399) met border-radius: 4px */ .quotes-slider-box .quotes-next-btn, .quotes-slider-box button.quotes-next-btn { border: 1px solid #663399 !important; color: #663399 !important; background-color: transparent !important; border-radius: 4px !important; font-size: 0.82rem !important; font-weight: 600 !important; padding: 4px 12px !important; line-height: 1.4 !important; box-shadow: none !important; cursor: pointer !important; transition: all 0.2s ease-in-out !important; } .quotes-slider-box .quotes-next-btn:hover, .quotes-slider-box button.quotes-next-btn:hover { background-color: #663399 !important; color: #ffffff !important; border-color: #663399 !important; } /* ========================================================================== WCAG 2.1 / 2.2 AA ACCESSIBILITY ENHANCEMENTS ========================================================================== */ /* 1. Skip-to-content Link (Naar hoofdinhoud) */ a.visually-hidden-focusable:focus, a.visually-hidden-focusable:active { position: fixed !important; top: 12px !important; left: 12px !important; z-index: 999999 !important; display: inline-block !important; width: auto !important; height: auto !important; padding: 12px 22px !important; background-color: #004767 !important; color: #ffffff !important; font-size: 1.05rem !important; font-weight: 700 !important; text-decoration: underline !important; border-radius: 8px !important; border: 3px solid var(--ozk-paars-focus-donker, #c3a1e8) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important; clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: normal !important; } /* 2. Zichtbare Focus-Ring voor Toetsenbord-Navigatie (WCAG 2.4.7 Focus Visible). Paars sinds 29-09-2026 (Richard: rustiger dan roze, nu de verzendknoppen groen zijn); daarvoor roze (25-09-2026). */ :focus-visible { outline: 3px solid var(--ozk-paars, #663399) !important; outline-offset: 3px !important; border-radius: 4px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, [role="button"]:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--ozk-paars, #663399) !important; outline-offset: 3px !important; } /* Op donkere vlakken de lichte focustint: OZK-paars haalt daar geen 3:1 (zie --ozk-paars-focus-donker in ozk-knoppen.css). */ .site-footer :focus-visible, a.visually-hidden-focusable:focus-visible { outline-color: var(--ozk-paars-focus-donker, #c3a1e8) !important; } /* Eén focusrand op velden (besluit Richard 25-09-2026): Bootstrap tekent bij focus ook nog een blauwe rand plus een blauwe gloed van 4px, binnen de paarse ring hierboven. De rand blijft zoals hij zonder focus is. */ .form-control:focus, .form-select:focus { border-color: var(--bs-border-color, #dee2e6); box-shadow: none; } /* Voorkom storende focus-ringen bij gewone muisklikken */ :focus:not(:focus-visible) { outline: none; } /* 3. Respecteer bewegingsgevoeligheid (WCAG 2.3.3 Animation from Interactions) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* 4. Toegankelijke Formulier Foutmeldingen & Validatie (WCAG 3.3.1 / 3.3.2) */ .form-item--error-message, .form-item .error, .form-control.is-invalid + .invalid-feedback, .webform-submission-form .alert-danger, .messages--error { font-weight: 600 !important; color: #990026 !important; /* > 7:1 contrast ratio tegen wit */ margin-top: 6px !important; } .form-control.is-invalid, .form-item input.error, .form-item select.error, .form-item textarea.error { border: 2px solid #a8002a !important; background-color: #fffafb !important; } /* Eén sterretje bij verplichte velden, in ozkroze. bootstrap_barrio tekent het verplicht-teken als achtergrondafbeelding (images/required.svg, form.css en webform.css) in hetzelfde ::after; met onze tekst erbij stonden er twee (Richard 27-09-2026). Daarom de afbeelding uit. line-height 1: de ::after is een inline-block (van barrio) en droeg op 1.1em een eigen regelhoogte van 28px, dus elk verplicht label werd 3px hoger dan een niet-verplicht label ernaast en de velden in een rij stonden trapsgewijs (tussenvoegsel, toevoeging; 29-09-2026). */ .form-required::after, .js-form-required::after { content: " *" !important; line-height: 1 !important; color: #c13c61 !important; font-weight: 700 !important; font-size: 1.1em !important; background-image: none !important; width: auto !important; height: auto !important; margin: 0 !important; vertical-align: baseline !important; }