/* ================================================================ BARADA CUSTOM.CSS — VERSIE 8.62 (15-09-2026) ---------------------------------------------------------------- Welke versie staat live? Twee manieren om te checken: 1. Open dit bestand: regel 1 toont het nummer. 2. Op de site: rechtermuisknop > Inspecteren > Console, typ: getComputedStyle(document.body).getPropertyValue('--barada-versie') ---------------------------------------------------------------- WIJZIGINGSLOG 8.62 (15-09-2026) Kennisbank: productfoto's op gelijke verhouding, kaarten lijnen nu uit. 8.61 (15-09-2026) Kennisbank: overzichtspagina met alle zelfstudieopleidingen (J2Commerce productlijst). 8.60 (15-09-2026) Zijbalk: nieuw roze blok 'Zelfstudie opleidingen' (moduleclass ba-zelfstudie). 8.59 (14-09-2026) Contactfoto's: nieuwe foto's in twee rijen (3 liggend, 4 staand) met bijschrift. 8.58 14-09 Uitklapmenu (desktop) in de huisstijl: witte kaart met oranje bovenrand, ronde hoeken en schaduw; items op 1 regel (geen afbreken, breedte past zich aan), 14px gewicht 400 donkerbruin, dunne scheidingslijnen, hover/actief zachtoranje vlak. 8.57 14-09 Leestijd-marker (.ba-leestijd) voor lange tekstartikelen: klein, zandkleurig, met klokje. Een artikel met .ba-leestijd krijgt dezelfde witte kaart + foto-met-titel als een artikel met .ba-feiten (kopie van de 8.0.x/8.18-regels). Kop 4 in artikelen: gewicht 400 (was 300) en ruimte erboven. 8.56 14-09 Leesbaarheid artikelteksten: lettergewicht 300 naar 400 (tekst oogt donkerbruin i.p.v. lichtgrijs), regellengte max 800px, meer ruimte tussen alinea's/lijstpunten/boven koppen. Grootte en regelafstand ongewijzigd. Plus: JUX-blok "Aankomende opleiding" in artikel als nette kaart (foto links, titel/datum/knop rechts; mobiel gestapeld). 8.55 14-09 Leeslijst "Lees meer over…" (.ba-leesmeer, o.a. artikel 68) als kaartjes met pijl in een grid. 8.54 14-09 Contactkaart: de drie knoppen gestapeld op volle breedte. 8.53 14-09 Nieuw bij Barada uitgelijnd: zijmarge 16px, JUX-grijs/schaduw en roze datumrand weg, geen lijn onder de titels, egaal datumblokje. 8.52 14-09 Nieuw bij Barada: compacter (datumblok 45px, regels 62px), datum oranje, geen onderstreping. 8.51 14-09 Agenda (JUX grid): INFO-knop binnen de kaart met marge; module "Zoek opleiding" in huisstijl (velden, kalender-icoon, knop); nieuwe module "Nieuw bij Barada!" (JUX sidebar, id 289) opgemaakt met datumblokje en ondertitel. Oude statische module 57 uit. 8.50 14-09 Contactpagina (artikel 79, .ba-contact): contactkaart naast kaart, knoppenrij, OV/auto-blok, drie foto's in een rij; mobiel gestapeld. 8.49 14-09 Rand WhatsApp-knop dunner (1px). 8.48 14-09 WhatsApp-knop wit met oranje rand en oranje tekst i.p.v. groen (hover: oranje gevuld, witte tekst). 8.47 14-09 WhatsApp-knop (.ba-over-knop-wa, groen met icoon) naast de CTA-knoppen op Over-ons; herbruikbaar op andere pagina's. 8.46 14-09 Over-ons (artikel 35, .ba-over): feitenblok "Barada in het kort", responsieve video, fotogrid, portret afgerond, CTA-blok met knoppen naar kennismaking en stel-je-vraag. 8.45 14-09 Datumkiezer van BA Forms in huisstijl: wit met zachte schaduw, oranje "vandaag", ronde dagcellen met hover, zandkleurige dag- namen en verleden dagen, oranje navigatie- en Vandaag-knop. 8.44 14-09 BA Forms opgeschoond: roze hover-laag en icoon-schuifanimatie van de verzendknop uit (tekst blijft staan, hover donkeroranje), kalender-icoon naast de placeholder, velden binnen .ba-kennis op volle breedte, iets meer ruimte tussen velden. 8.43 14-09 Huisstijl voor ALLE BA Forms-formulieren (o.a. zomer- en nieuwjaars- bijeenkomst): warme kaart, afgeronde velden met oranje focus, oranje radio/checkbox, oranje knop met witte tekst, mobiel volle breedte. Binnen .ba-kennis blijft de kaart van 8.41. 8.42 14-09 Stel-je-vraag (artikel 40) in dezelfde .ba-kennis-opmaak (variant .ba-vraag met stippen i.p.v. vinkjes); grijze BA Forms-achtergrond binnen .ba-kennis-kaart uit. 8.41 14-09 Kennismakingspagina (artikel 41): opmaak voor .ba-kennis (gratis- blok, drie vinkjes, formulierkaart, oranje knop met witte tekst). Lichtvlek achtergrond beperkt tot de bovenste helft zodat de onderkant/footer donker blijft. Footerlinks (module 112, kolom Informatie/Algemeen) elk op een eigen regel. 8.40 14-09 Schuine lichtstreep (8.39) vervangen door een grote, wazige lichtvlek die in 48 s traag over het bovenste deel drijft; zoom en blur uit 8.39 blijven. 8.39 14-09 Achtergrond "achter glas": foto zoomt heel langzaam (60s heen en weer), sluier krijgt 2px blur (niet op mobiel) en een zachte lichtreflectie die elke 22s schuin overtrekt. Sluier zelf (8.36) ongewijzigd; uit bij verminderde beweging. 8.38 14-09 Opleidingen-overzicht (JUX lijst): INFO/prijs-knop gecentreerd onder de kaart en op natuurlijke breedte; alleen op de lijstpagina (body.view-events), eventpagina ongewijzigd. 8.37 13-09 Homepage-animatie: blokken faden in bij scrollen (js/custom.js), kaarten en lijstitems tillen licht op bij hover; uit bij verminderde beweging. 8.36 13-09 Sluier bovenin sterker (60 > 70%, een derde 40%), onderin ongewijzigd; reistijd bij Openbaar vervoer (footer) kleiner. 8.35 13-09 Knoppen smaller: INFO in agenda-kaarten 62% en links, In winkelwagen (J2Commerce) op eigen breedte met ruimte naast het aantal-veld; op mobiel blijven ze volle breedte. 8.34 13-09 Hoofdmenu smaller: 14px, letterafstand 1.2 > 0.6px, items 0 9px (menu ca. 920 > 800px breed). 8.33 13-09 Hoofdmenu: compacter (15px, gewicht 400), gecentreerd naast het logo, blokje achter Kennisbank/Informatie vervangen door subtiel chevron, hover-lijn 1px, altijd op een regel. 8.32 13-09 Sluier bovenin sterker (45% > 60%, op een derde 28%); de onderste helft blijft ongefilterd. 8.31 13-09 Verloop van de sluier steiler: bovenin 45%, op een derde nog 20%, onderste helft vrijwel ongefilterd (0%). 8.30 11-09 Sluier als verloop: bovenin 45% beige, onderin bijna niets (5%), zodat de foto onderaan doorkomt. 8.29 11-09 De beige sluier (8.23/8.25/8.27) was nooit zichtbaar: een oude regel uit de gouden-gloed-animatie zette body::after met !important op content:none. Nu overschreven; de sluier staat op 55% en is voor het eerst echt te zien. 8.28 11-09 De oranje koppen van het agendablok en het blogblok zijn nu altijd even hoog (124px op desktop), ook als de titel van het agendablok over twee regels loopt. 8.27 11-09 Beige sluier over de achtergrondfoto nog sterker (58% > 74%); de foto is nu alleen nog een zachte gloed. 8.26 11-09 Slider: de kop van de eerste slide is (voor SEO) een H1 en zag er daardoor anders uit dan de andere vier. Nu krijgen H1 en H2 in de slider dezelfde opmaak. 8.25 11-09 De beige sluier over de achtergrondfoto sterker gezet (38% > 58%), zodat het beeld rustiger wordt en de blokken beter naar voren komen. 8.24 11-09 Startpagina: de blokken stonden op desktop tegen elkaar aan en het Nine Star Ki-blok viel over het oranje blok eronder heen (de blogkaart eiste de hele kolomhoogte op). Nu overal 30px lucht tussen de rijen, het Nine Star Ki-blok netjes onder de blogs en het beige randje iets duidelijker. 8.23 11-09 De startpagina is rustiger gemaakt. De video is er tijdelijk uit, het Nine Star Ki-blok staat nu op die plek en de klantervaringen lopen over de volle breedte. Alle kolommen kregen hetzelfde dunne beige randje en over de achtergrondfoto ligt een lichte beige sluier. 8.22 03-09 De plus-, min- en prullenbakknopjes in de winkelwagen bleven leeg: J2Commerce vraagt om icoontjes uit een Font Awesome-set die op deze site niet compleet is. Vervangen door gewone tekens, die altijd werken. 8.21 03-09 Laatste punten op de bestelbevestiging: het groene vinkje is oranje geworden, het besteloverzicht ernaast staat op zacht oranje en het landkaartje bij het afleveradres is verborgen. Dat kaartje heeft bij een online opleiding geen functie; wil je het terug, haal dan de regel met leaflet-map-container weg. 8.20 03-09 De webshop is overgezet naar J2Commerce 6. Die heeft nieuwe klassenamen (j2commerce- in plaats van j2store-), dus de huisstijl is opnieuw opgebouwd voor het koopblok, de winkelwagen, de afrekenpagina en de bestelbevestiging. De oude j2store-opmaak blijft staan zolang de oude winkel nog geinstalleerd is. 8.19 02-09 J2Store zet het koopblok twee keer onder een verkoopartikel. Het tweede blok mist de knop Meer info en is dus een dubbele. We tonen alleen het eerste. Let op: dit is een pleister op de opmaak, de oorzaak zit in J2Store zelf. 8.18 02-09 Een opleidings- of verkoopartikel ziet er nu net zo uit als een belevingsevent: de foto vult de hele breedte van de kaart en de titel ligt eroverheen, wit en in kapitalen, met dezelfde donkere verloop- waas. Ook de opsommingen krijgen dezelfde vinkjes. Dit gaat vanzelf: elk artikel met een feitenblok (de tabel met class ba-feiten) en een artikelfoto krijgt deze opmaak, dus ook elk nieuw artikel. 8.17 02-09 De drie elementkaartjes waren aan de hoge kant. Tekst en binnenmarge iets compacter, kopjes wat rustiger gespatieerd en het vervolgblok sluit strakker aan op de rekentool. 8.16 02-09 De pagina Nine Star Ki karakteranalyse berekenen is opnieuw ingedeeld. Het sfeerbeeld draagt nu de kop en een knop naar de rekentool, de drie elementen staan als kaartjes naast elkaar, het blok met de opleidingen is naar onder de uitkomst verplaatst en op mobiel loopt er een knop Bereken je reeks mee. Alleen opmaak: aan de teksten zelf is niets veranderd, ze zijn alleen anders geplaatst. 8.15 02-09 De lichte vlakken stonden op een koel grijsblauw. Vervangen door #fdfaf6, een warme roomtint die bij het zand en het oranje past. Dezelfde kleur staat nu ook in de rekentool (nsk/css/style.css), zodat het kader naadloos in de pagina opgaat. 8.14 02-09 Klantervaringen: kop staat nu gecentreerd en de knop Beoordeel ons op Google staat naast de sterren in plaats van eronder. Blok weer 44px lager (510 -> 466). 8.13 02-09 Klantervaringen compacter: reviewtekst 15px, maximaal vier regels (daarna Lees meer), kaartrand 18px en het cijfer 4,9 iets kleiner. Het blok werd daarmee 617 -> 510 pixels hoog. 8.12 02-09 Klantervaringen: de reviewtekst stond op 15px met een krappe regelafstand en de Google-knop week af van de andere knoppen. Tekst nu 16,5px zoals de rest van de site, knop in hoofdletters met letterafstand. 8.11 02-09 Nine Star Ki-banner: de kop stond in Georgia terwijl de rest van de site Lato gebruikt, en liep qua grootte vast op #sp-component h2 (21px). Kop, kicker en knop volgen nu de huisstijl van de andere blokken. 8.10 02-09 Kennisbank en Workshops zijn nu altijd even hoog, ook als de ene lijst een regel langer is dan de andere. De knop staat in beide kaarten tegen de onderkant, zodat ze op een lijn staan. 8.9 02-09 Homepage-agenda: onderin de kaart staat nu de knop Bekijk de agenda, zodat de kolom niet meer leeg eindigt als er weinig data in staan. De knop Alle blogs is verhuisd naar de oranje balk van het blogblok, met een pijl die opzij springt bij hover. De HTML staat in module 108 (agenda) en 271 (blogs). 8.8 02-09 Nine Star Ki-banner staat nu naast de klantervaringen in een gedeeld blok: links de banner, rechts de reviews. Op mobiel onder elkaar, eerst de reviews en daarna de banner. De HTML staat in module Klantervaringen (219). 8.7 04-08 Klantervaringen: de reviewkaartjes waren massief oranje met witte letters. Nu doorschijnend glas (wit met een vleugje oranje, vervaagde achtergrond) met de gewone donkerbruine tekst en een groot aanhalingsteken in de hoek. Daardoor drukt het blok minder en loopt het mee met de zandkleurige achtergrond. Terug naar massief oranje? Haal blok 8.7-a hieronder weg; de opmaak van versie 7.x pakt het dan weer op. Ook nieuw: de CTA-banner "Ontdek jouw Nine Star Ki Karakter" (blok 8.7-b). De HTML daarvoor staat in de module "Home - CTA Nine Star Ki". 8.6.3 04-08 Na de update naar J2Commerce v4 is het aantalveld in de winkelwagen een "number"-veld geworden in plaats van een "text"-veld. Daardoor viel het buiten onze opmaak. Nu telt het weer mee. 8.6.2 04-08 Het kruisje om iets uit de winkelwagen te halen stond onder het aantalveld; het staat nu ernaast op dezelfde regel. 8.6.1 04-08 Correctie: het tweekoloms-raster van de afrekenpagina sloeg ook op de winkelwagen, waardoor het kopje "Winkelwagen totalen" naast de tabel belandde in plaats van erboven. Het raster geldt nu alleen op de afrekenpagina. 8.6 04-08 Winkelwagen en afrekenen (J2Store) in de huisstijl. De knoppen waren oranje, geel, groen en rood door elkaar; nu is er een oranje knop voor de hoofdactie en witte knoppen met oranje rand voor de rest. Tabellen zijn zachte kaarten met een oranje kopregel geworden. Op de afrekenpagina: de grijze balken zijn oranje, het formulier staat in twee kolommen (een op mobiel), en het rode sterretje bij verplichte velden staat nu ACHTER het label in plaats van op een eigen regel. Op mobiel wordt de winkelwagentabel onder elkaar gezet - anders viel de kolom met het bedrag buiten beeld. 8.5 04-08 Boekingspagina: de titel van de opleiding staat nu in een oranje kopbalk met "OPLEIDING" als onderregel - dezelfde opzet als de blokken op de homepage. Ook: de tekst op de boekingspagina stond op 14 en 15 pixels terwijl de rest van de site 16,5 gebruikt. Dat is nu overal gelijkgetrokken. Meegenomen voordeel: op een iPhone zoomt het scherm niet meer in zodra je een veld aantikt (dat gebeurt onder de 16 pixels). 8.4.1 04-08 De balk bovenaan (het glaseffect) is witter gemaakt: in de normale stand van 45 naar 72 procent wit, en gescrold van 65 naar 86 procent. Nog witter? Verander het laatste getal in de twee regels bij "glaseffect". 8.4 04-08 De boekingspagina in de huisstijl en het formulier opnieuw ingedeeld. De kopjes OPLEIDING en JOUW GEGEVENS zijn nu oranje balken, net als de panelen elders op de site, met een witte kaart eronder. Het formulier staat op de computer in twee kolommen: naam naast e-mail, postcode naast stad, telefoon naast geboortedatum. Straatnaam en dieetwensen lopen over de volle breedte. Het label staat boven het invulveld in plaats van ernaast, want dat leest prettiger en scheelt op mobiel de halve breedte. Op mobiel staat alles onder elkaar met invulvelden van 46 pixels hoog, zodat je ze goed kunt aantikken. 8.3 04-08 Drie dingen op de belevings-/eventpagina's: 1. De titel en de datumregel op de foto liepen bij een lange titel over de onderrand heen. Er is nu vaste ruimte voor een titel van drie regels; de datumregel staat altijd even ver van de onderkant van de foto, hoe lang de titel ook is. 2. Het eerste feitenblokje kreeg een oranje balk. Dat kwam door de algemene tabelopmaak (eerste rij wordt een gekleurde kopbalk). Die opmaak slaat de feitentabel nu over. 3. De veelgestelde vragen vouwen soepel open en dicht. Zet in de tekst open achter
karamel dat bij beige past met meer tussenstappen, marmer duidelijker zichtbaar 5.1 02-08 Achtergrondverloop aan het scherm gekoppeld (beige -> bruin nu zichtbaar in beeld, onderin altijd bruin), bovenkant nog lichter, marmer-accenten schermvullend 5.0 02-08 Roze exclusief voor het beleven-blok en het woord "beleven"; oranje feller (#f2793a); nieuwe luxe achtergrond: geanimeerd verloop beige -> warm bruin met bewegende gouden marmer-accenten 4.1 02-08 Tekstlinks in content overal oranje (waren nog blauw) 4.0 02-08 Roze site-breed vervangen door oranje (via variabelen), NIEUW-badge en footerkoppen oranje, cookieknop oranje, vaste tekstschaal op alle pagina's 3.3 02-08 Agendapagina: knoppen in huisstijl-oranje + radius, contentvlak afgeronde hoeken 3.2 02-08 Datumblokjes gelijk formaat, footerkoppen oranje 3.1 02-08 Witte kaart om de video verwijderd (video zwevend) 3.0 02-08 Header altijd wit + donkerbruine tekst, typografie gelijkgetrokken (--ba-fs-*), paneelrand oranje, CTA-banner via Page Builder, klantervaringen gevuld, logo 3.5x, alle knoppen/links oranje, eigen achtergrondfoto met waas 2.x 01-08 Nieuwe kleuren (#e5804c / #d1667b), headerfix, achtergrondfoto baradabackground.jpg, gelijke vlakken 1.x 31-07 Nieuwe homepage-opzet, kolommen, agenda, variabelen ================================================================ */ body { --barada-versie: "8.62"; } /* ################################################################ BARADA — CENTRALE KLEUREN & INSTELLINGEN (2026) ---------------------------------------------------------------- Alle kleuren van de site staan hieronder één keer gedefinieerd. Wil je een kleur aanpassen? Verander alleen de waarde hier — de hele site (knoppen, panelen, agenda, webshop) kleurt mee. ################################################################ */ :root { /* --- Roze: bestaande opleidingen / online aanbod --- */ --ba-roze: #c62f43; /* donker roze, iets warmer richting koraal */ --ba-roze-licht: #d84a56; /* hoofdroze, iets warmer richting koraal */ --ba-roze-accent: #cf3a4c; /* koppen h3 / paneltitels, warmer */ --ba-roze-inset: #df6b82; /* randlijn in rood paneel */ --ba-roze-fel: #fe6367; /* hover plus/min-icoontjes boeking */ --ba-roze-pastel: #f4d1cf; /* lichtroze knoppen */ --ba-roze-pastel-hover: #f1c5c3; /* hover van lichtroze knoppen */ --ba-roze-pastel-licht: #f7dddc; /* extra lichte knop (mod-custom109) */ --ba-roze-tabelkop: #f9e8e7; /* tabelkoppen winkelwagen */ --ba-roze-zacht: #faeef1; /* zachte achtergrond (icoon-rondjes) */ /* --- Oranje: belevingsworkshops, live op locatie (NIEUW) --- */ --ba-oranje: #e87a58; /* hoofdkleur beleving */ --ba-oranje-donker: #c95c3a; /* hover / tekst op lichte vlakken */ --ba-oranje-zacht: #fdeee8; /* zachte achtergrond (icoon-rondjes) */ /* --- Tekst --- */ --ba-tekst: #4b5052; /* standaard tekstkleur */ --ba-grijs-tekst: #452f22; /* zeer donkerbruin voor ondertitels/kleine tekst */ /* --- Vormgeving nieuwe homepage-blokken --- Ronder & zachter (variant A/C) of strak (variant B): zet de drie radius-waarden op 0 voor de strakke look. */ --ba-radius: 6px; /* hoeken van witte kaarten */ --ba-radius-knop: 6px; /* hoeken van knoppen */ --ba-radius-datum: 5px; /* hoeken van datum-blokjes */ --ba-schaduw: 0 4px 22px rgba(0,0,0,.07); /* schaduw onder kaarten */ /* --- Kleurverlopen (van licht naar donker, diagonaal) --- */ --ba-verloop-roze: linear-gradient(135deg, #d84a56, #c62f43); --ba-verloop-oranje: linear-gradient(135deg, #e87a58, #c95c3a); } /* Zorg dat het menu altijd boven de blur uitkomt */ .offcanvas { z-index: 1060 !important; visibility: visible !important; } .offcanvas-backdrop { z-index: 1050 !important; } /* ================================================ Barada.nl – J2Store stijl correcties Van toepassing op: - /informatie/test (productpagina) - /component/j2store/carts (winkelwagen) Plak dit in: Template > Custom CSS ================================================ */ /* -------------------------------------------------- WITTE ACHTERGROND – winkelwagenpagina Zorgt voor leesbaarheid over de achtergrondafbeelding -------------------------------------------------- */ .j2store-cart, #akeeba-renderjoomla > .j2store { background-color: #ffffff !important; padding: 30px 40px !important; border-radius: 0 !important; } /* -------------------------------------------------- 1. "Bewerk" knop (admin edit knop, zichtbaar als ingelogd) -------------------------------------------------- */ a.btn.btn-link.jmodedit, a.jmodedit { display: inline-block; padding: 0px 15px !important; min-height: 40px !important; line-height: 40px !important; background-color: var(--ba-roze-pastel) !important; color: var(--ba-tekst) !important; border: none !important; border-radius: 0 !important; font-family: Lato, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer; transition: background-color 0.15s ease; } a.btn.btn-link.jmodedit:hover, a.jmodedit:hover { background-color: var(--ba-roze-pastel-hover) !important; color: var(--ba-tekst) !important; text-decoration: none !important; } /* -------------------------------------------------- 2. "Voeg toe aan winkelwagen" knop (productpagina) -------------------------------------------------- */ input.j2store-cart-button, .j2store-addtocart-form input[type="submit"] { appearance: none !important; display: inline-block !important; padding: 0px 15px !important; min-height: 40px !important; height: 40px !important; line-height: 40px !important; background-color: var(--ba-roze-licht) !important; color: rgb(255, 255, 255) !important; border: none !important; border-radius: 0 !important; font-family: Lato, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; text-transform: uppercase !important; box-shadow: none !important; cursor: pointer; transition: background-color 0.15s ease; } input.j2store-cart-button:hover, .j2store-addtocart-form input[type="submit"]:hover { background-color: var(--ba-roze) !important; color: rgb(255, 255, 255) !important; } /* -------------------------------------------------- 3. "Ga verder met winkelen" – blauw → lichtroze -------------------------------------------------- */ .j2store-bs input.btn-primary:not(.j2store-cart-button), .j2store-bs a.btn-primary:not(.j2store-cart-button) { background-color: var(--ba-roze-pastel) !important; color: var(--ba-tekst) !important; border: none !important; border-radius: 0 !important; padding: 0px 15px !important; min-height: 40px !important; height: 40px !important; line-height: 40px !important; font-family: Lato, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; text-transform: uppercase !important; box-shadow: none !important; cursor: pointer; transition: background-color 0.15s ease; } .j2store-bs input.btn-primary:not(.j2store-cart-button):hover, .j2store-bs a.btn-primary:not(.j2store-cart-button):hover { background-color: var(--ba-roze-pastel-hover) !important; color: var(--ba-tekst) !important; } /* -------------------------------------------------- 4. "Herberekenen" – geel → lichtroze -------------------------------------------------- */ .j2store-bs input.btn-warning, .j2store-bs a.btn-warning, .j2store-bs button.btn-warning { background-color: var(--ba-roze-pastel) !important; color: var(--ba-tekst) !important; border: none !important; border-radius: 0 !important; padding: 0px 15px !important; min-height: 40px !important; height: 40px !important; line-height: 40px !important; font-family: Lato, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; text-transform: uppercase !important; box-shadow: none !important; cursor: pointer; transition: background-color 0.15s ease; } .j2store-bs input.btn-warning:hover, .j2store-bs a.btn-warning:hover { background-color: var(--ba-roze-pastel-hover) !important; color: var(--ba-tekst) !important; } /* -------------------------------------------------- 5. "Ga naar afrekenen" – groen → Barada donkerroze -------------------------------------------------- */ .j2store-bs input.btn-success, .j2store-bs a.btn-success, .j2store-bs button.btn-success { background-color: var(--ba-roze-licht) !important; color: rgb(255, 255, 255) !important; border: none !important; border-radius: 0 !important; padding: 0px 20px !important; min-height: 40px !important; height: 40px !important; line-height: 40px !important; font-family: Lato, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; text-transform: uppercase !important; box-shadow: none !important; cursor: pointer; transition: background-color 0.15s ease; } .j2store-bs input.btn-success:hover, .j2store-bs a.btn-success:hover { background-color: var(--ba-roze) !important; color: rgb(255, 255, 255) !important; } /* -------------------------------------------------- 6. Verwijder-knopje (× icoon naast product in winkelwagen) -------------------------------------------------- */ .j2store-bs .btn-danger, .j2store-bs a.j2store-remove { background-color: var(--ba-roze-licht) !important; color: rgb(255, 255, 255) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; transition: background-color 0.15s ease; } .j2store-bs .btn-danger:hover, .j2store-bs a.j2store-remove:hover { background-color: var(--ba-roze) !important; } /* -------------------------------------------------- 7. Hoeveelheidsveld (quantity input) – beide pagina's -------------------------------------------------- */ .j2store-bs input.input-mini, .j2store-addtocart-form input.input-mini, .j2store input.form-control.input-mini { font-family: Lato, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: var(--ba-tekst) !important; background-color: rgb(255, 255, 255) !important; border: 1px solid var(--ba-roze-pastel) !important; border-radius: 0 !important; height: 40px !important; line-height: 40px !important; padding: 0px 8px !important; box-shadow: none !important; text-align: center; } .j2store-bs input.input-mini:focus, .j2store-addtocart-form input.input-mini:focus { border-color: var(--ba-roze-licht) !important; outline: none !important; box-shadow: none !important; } /* -------------------------------------------------- 8. Winkelwagen tabel – randen en kleuren -------------------------------------------------- */ .j2store-bs .j2store-cart-table, .j2store-bs .table-bordered { border-color: var(--ba-roze-pastel) !important; font-family: Lato, sans-serif !important; font-size: 15px !important; font-weight: 300 !important; color: var(--ba-tekst) !important; } .j2store-bs .j2store-cart-table th, .j2store-bs .table-bordered th { background-color: var(--ba-roze-tabelkop) !important; color: var(--ba-tekst) !important; font-family: Lato, sans-serif !important; font-weight: 700 !important; font-size: 15px !important; text-transform: uppercase !important; letter-spacing: 0.03em; border-color: var(--ba-roze-pastel) !important; padding: 10px 8px !important; } .j2store-bs .j2store-cart-table td, .j2store-bs .table-bordered td { border-color: var(--ba-roze-pastel) !important; color: var(--ba-tekst) !important; font-family: Lato, sans-serif !important; font-weight: 300 !important; vertical-align: middle !important; padding: 10px 8px !important; } /* -------------------------------------------------- 9. Algemene j2store tekststijl -------------------------------------------------- */ .j2store, .j2store-product-wrapper, .j2store-product-block-wrapper { font-family: Lato, sans-serif !important; font-weight: 300 !important; color: var(--ba-tekst) !important; } .j2store .sale-price, .j2store .product-price { font-family: Lato, sans-serif !important; font-weight: 700 !important; font-size: 21px !important; color: var(--ba-tekst) !important; } /* #sp-header, #sp-header .logo-area .logo-image { height: auto; } .tm-panel-subtitle { margin-top: -7px; color: #DB9; font-size: 12px; } */ .burger-icon { margin-top: 15px; margin-right: 60px !important; } .offcanvas-menu { position: fixed; top: 0; left: -300px; /* hidden */ width: 300px; height: 100%; background: #fff; box-shadow: 2px 0 10px rgba(0,0,0,0.2); z-index: 1050; overflow-y: auto; transition: left 0.3s ease-in-out; } .offcanvas-menu.active { left: 0; } .offcanvas-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; z-index: 1040; transition: opacity 0.3s ease-in-out; } .offcanvas-overlay.active { opacity: 1; visibility: visible; } .close-offcanvas { display: none; padding: 15px; font-size: 18px; color: #333; text-decoration: none; } /* Submenu base */ .offcanvas-menu ul.menu-child { padding-left: 15px !important; /* background: #fafafa;*/ /* border-left: 2px solid #ddd;*/ margin: 0; } /* Parent item */ .offcanvas-menu li.menu-parent > a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: #333; padding: 12px 15px; } /* The little arrow toggler */ .offcanvas-menu .menu-toggler { display: inline-block; margin-left: 8px; transition: transform 0.3s ease; position: relative; width: 10px; height: 10px; } .offcanvas-menu .menu-toggler::before { content: "▸"; font-size: 14px; } .offcanvas-menu .menu-toggler.active::before { content: "▾"; } /* Animate submenu open/close */ .offcanvas-menu ul.menu-child.open { overflow: hidden !important; display: block !important; } .offcanvas-menu ul.menu-child.open li{margin-bottom: 10px;} .nl-panel-red .sp-module-content, .panel-red { background-color: var(--ba-roze-licht); border: 15px solid var(--ba-roze-licht); min-width: 100%; min-height: 250px; box-shadow: 0 0 0 1px var(--ba-roze-inset) inset !important; color: #e1eaec; padding: 30px; text-align: center !important; content: ""; display: table; text-decoration: none; line-height: 20px; } .sp-module-content { font-size: 14px; line-height: 20px !important; } #sp-header { display: flex; margin-bottom: 15px; } #sp-menu ul.sp-megamenu-parent>li.active:hover>a, #sp-menu ul.sp-megamenu-parent>li.active>a, #sp-menu ul.sp-megamenu-parent>li:hover>a { background-color: rgba(0, 0, 0, 0); color: var(--ba-roze); } .tm-overlay img, .tm-overlay p { -webkit-transition: opacity .35s, -webkit-transform .35s; } body { background: #310000; } label { font-weight: 300; font-size: 18px; } /*body background*/ .background-wrapper { position: relative; overflow: hidden; } .ba-background { position: absolute; height: 150vh; width: 100%; background-image: url("../images/body_default.jpg"); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } .ba-background::after { content: ''; position: absolute; top: 0; right: 0; bottom: -2px; left: 0; background-image: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 70%, #310000 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 70%, #310000 100%); } /* #sp-logo { margin-top: -44px; margin-bottom: -60px; margin-left: -34px; } */ #sp-logo { margin-top: -44px !important; margin-bottom: -60px !important; margin-left: -34px; height: 0; /* So it doesn't add vertical space */ overflow: visible; z-index: 10; display: inline-block; } /* #sp-logo lottie-player { width: 350px !important; height: 120px !important; display: block !important; margin: 0 !important; padding: 0 !important; } */ #sp-component { position: relative; } /* .body-wrapper { position: absolute; height: 100vh; width: 100%; background-image: url("../images/body_default.jpg"); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; } .body-wrapper::after { content: ''; position: absolute; top: 0; right: 0; bottom: -2px; left: 0; background-image: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 70%, #310000 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 70%, #310000 100%); } .body-innerwrapper { position: relative; z-index: 1; } */ /*body background*/ #sp-main-body { padding: 30px 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; font-family: Lato; font-weight: 300; text-transform: uppercase; } h3 { color: var(--ba-roze-accent); font-size: 20px; line-height: 27px; } h4 { color: #999; font-size: 18px; line-height: 24px; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover, a { color: var(--ba-roze); } #sp-right .sp-module { margin-top: 30px; border: 0 solid #f3f3f3; padding: 30px; border-radius: 3px; } #sp-header { box-shadow: none; } .header-sticky { background-color: #FEFCFB !important; } .header-sticky .text-left{ padding-top: 10px !important;} .header-sticky .text-right{padding-top: 10px !important;} /* .header-sticky { background-image: url("../images/body_default.jpg")!important; background-repeat: no-repeat!important; background-position: 50% 0!important; background-size: cover!important; } */ #sp-header.header-sticky { height: 68px; } /* #sp-header .logo-area { display: inline-block; } */ #sp-menu { margin-top: 5px; margin-left: 12px; } } #sp-menu ul.sp-megamenu-parent { float: none; } #sp-menu ul.sp-megamenu-parent>li>a, #sp-menu ul.sp-megamenu-parent>li>span { box-sizing: border-box; text-decoration: none; height: 40px; line-height: 36px; color: var(--ba-tekst); font-size: 18px; font-family: Lato; font-weight: 300; border: 0 solid transparent; text-transform: uppercase; } #sp-menu ul.sp-megamenu-parent>li>a { color: var(--ba-tekst); } #sp-menu ul.sp-megamenu-parent>li:hover>a { outline: 0; } #sp-menu ul.sp-megamenu-parent .sp-dropdown li.sp-menu-item, .barada-home-conteent .sppb-article-info-wrap, .jux-event-item { text-align: left; } .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { background: #fff; } .sp-megamenu-parent .sp-dropdown li.sp-menu-item>a, .sp-megamenu-parent .sp-mega-group>li>a { color: #252525; } /* menu item*/ .text-left { text-align: right; } .sp-megamenu-parent > li { padding: 0 10px; } .sp-megamenu-parent > li > span { padding: 0; } #sp-menu ul.sp-megamenu-parent>li.sp-has-child a::after { left: -7px; } #sp-menu ul.sp-megamenu-parent > li > a { position: relative; display: inline-block !important; padding: 0; margin: 0; } #sp-menu ul.sp-megamenu-parent > li > a::after { content: ""; position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(to right, rgba(216,79,117,0.1), rgba(216,79,117,0.4), rgba(216,79,117,0.9)); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease; border-radius: 2px; } #sp-menu ul.sp-megamenu-parent > li > a:hover::after, #sp-menu ul.sp-megamenu-parent > li.active > a::after { transform: scaleX(1); } .burger-icon { margin-top: 15px; } /* menu item */ #sp-social { margin-top: 8px; } #sp-social span, .uk-panel-box p i { font-size: 30px; } .uk-hidden-small { font-size: 24px; line-height: 32px; } #sp-component .sp-column { background: #fdfaf6; padding: 40px 40px; } .home-page #sp-component .sp-column { padding: 0 40px 40px; } #jux-booking-new .jux-payment-center { float: none!important; } .jux-booking, .panel-red h4 { font-size: 18px; } #jux-event-detail .jux-booking .jux-event-prices .jux_prices .jux-price1{margin-bottom: 15px;} #jux-event-detail .jux-booking .jux-event-prices .jux_prices .jux_price_quantity { width: 48px; height: 30px; margin-right: 10px; font-size: 18px; text-align: center; } #jux-event-detail .jux-booking .jux-event-prices{height: auto;} #jux-event-detail .jux-booking .jux-event-prices .jux_prices .jux-fa.jux-fa-plus { position: absolute; left: 53px; top: 0; padding: 0 3px 1px; color: #ddd; cursor: pointer; background: var(--ba-roze-licht)!important; } #jux-event-detail .jux-booking .jux-event-prices .jux_prices i:hover { color: #fff!important; background: var(--ba-roze-fel)!important; } #jux-event-detail .jux-booking .jux-event-prices .jux_prices .jux-fa.jux-fa-minus { position: absolute; left: 53px; top: 16px; padding: 0 3px; background: #ddd; cursor: pointer; } #jux_eventon_event_list .jux-owl-demo .jux-eventon.item .jux-event-content .jux-eveton-wrap .jux-eventon-date .jux-event-list-1 { line-height: 24px!important; } #jux-event-detail .jux-booking .jux-billing { float: right; font-size: 18px; color: rgb(255, 255, 255); margin-top: 10px; height: 44px; text-transform: uppercase; background: none 0px 0px repeat scroll var(--ba-roze-licht); border-width: medium; border-style: none; border-color: initial; border-image: initial; text-decoration: none; transition: 0.3s; } #jux-event-detail .jux-booking .jux-billing:hover {border-radius: 0;} /* Style tab headings */ [data-rlta-element="button-list"] [data-rlta-element="button"]{ display: block !important; padding: 0 !important; margin: 0 10px !important; border-radius: 0 !important; border: 0 !important; } [data-rlta-element="button-list"] [data-rlta-element="heading"] { font-size: 16px !important; font-weight: 300 !important; padding: 8px 15px !important; background-color: var(--ba-roze-licht); color: #fff; margin: 0; border-bottom: 0px solid transparent; transition: all 0.3s ease; cursor: pointer; } /* Highlight active tab */ [data-rlta-element="button"][data-rlta-state="open"] [data-rlta-element="heading"] { background-color: var(--ba-roze-licht); color: #fff; border-bottom: 0px solid var(--ba-roze-licht); } #jux_eventon_event_grid .jux-event-title h1{margin-bottom: 25px;padding-top: 0;} #jux_eventon_event_grid .jux-owl-demo .jux-eventon.item .jux-loop-item-wrap{height: auto;} /* Event Grid */ #jux_eventon_event_grid .jux-owl-demo .jux-eventon.item .jux-loop-item-wrap .jux-thumb-holder{min-height: 125px;} #jux_eventon_event_grid .jux-owl-demo .jux-eventon.item .jux-loop-item-wrap .jux-eventon-readmore-jux-buynow{position: relative;} #jux_eventon_event_grid .jux-owl-demo .jux-eventon.item .jux-loop-item-wrap .jux-eveton-wrap .jux-eventon-date{border: 0px;} #jux_eventon_event_grid .jux-owl-demo .jux-eventon.item .jux-loop-item-wrap .jux-eveton-wrap{min-height: 240px;} #jux_eventon_event_grid .jux-owl-demo .jux-eventon.item .jux-loop-item-wrap .jux-eventon-readmore-jux-buynow{position: absolute;} #jux_eventon_event_grid .jux-owl-demo .jux-eventon.item .jux-loop-item-wrap .jux-thumb-holder .jux-start-event .jux-event-list-1 { padding-bottom: 0px; padding-top: 4px; font-size: 35px; line-height: 25px; } #jux_eventon_event_grid .jux-owl-demo .jux-eventon.item .jux-loop-item-wrap .jux-eventon-readmore-jux-buynow a{background: var(--ba-roze-licht);color: #fff;} .page-header {margin: 0; border: 0;} .page-header h1{ font-size: 24px; line-height: 32px; } #form-booking-event .jux-booking-information .control-group div.controls input { height: 36px; font-size: 18px; } .bottom_payment_hr{margin-top: 26px;} .jux-terms{ display: block; min-height: 50px; margin-top: 30px; } #form-booking-event .jux-bynow { float: right; margin-top: 15px; } #form-booking-event .jux-bynow button{ background: var(--ba-roze-licht); color: #fff; font-size: 18px; line-height: 40px; text-transform: uppercase; border-radius: 0px; border: 1px solid transparent; padding: 0 20px; } #form-booking-event .jux-bynow button:hover{ border-radius: 0px; } #realty-search-vertical .box-right .search-button .btn{ background-color: var(--ba-roze-licht) !important; color: #fff; border-bottom: 1px solid var(--ba-roze-licht) !important; font-size: 15px; text-transform: uppercase; } .jux-payment{background-color: var(--ba-roze-licht) !important; color: #fff; border-radius: 0;} .jux-payment:hover{border-radius: 0 !important;} .nl-panel-red { padding: 0!important; } .nl-panel-red .sp-module-content, .panel-red { background-color: var(--ba-roze-licht); border: 15px solid var(--ba-roze-licht); min-width: 100%; min-height: 250px; box-shadow: 0 0 0 1px var(--ba-roze-inset) inset!important; color: #e1eaec; padding: 30px; text-align: center!important; content: ""; display: table; text-decoration: none; } .sppb-readmore, .uk-button { -webkit-appearance: none; margin: 0; overflow: visible; display: inline-block; box-sizing: border-box; padding: 0 12px; vertical-align: middle; min-height: 30px; text-align: center; text-decoration: none; border: none; } .uk-button { font: inherit; color: var(--ba-tekst); text-transform: none; background: var(--ba-roze-pastel); line-height: 30px; font-size: 1rem; text-transform: uppercase; } /* .sppb-readmore, .tm-button-align-bottom { color: #fff; background: linear-gradient(to right, #d65a74, #f78da7); border: none; cursor: pointer; transition: background 0.3s ease; } */ .sppb-readmore, .tm-button-align-bottom { color: #fff; background: var(--ba-roze-licht); border: none; cursor: pointer; transition: background 0.3s ease; } #mod-custom109 .tm-button-align-bottom { background: var(--ba-roze-pastel-licht) !important; color: var(--ba-tekst); } #mod-custom109 .tm-button-align-bottom:hover { background-color: var(--ba-roze-pastel) !important; color: var(--ba-tekst); outline: none; text-decoration: none; } .uk-panel-box .sppb-addon-content .sppb-img-responsive { margin-bottom: 15px; } /* .sppb-readmore, .tm-button-align-bottom { background: var(--ba-roze-licht); color: #fff; } */ .sppb-readmore { font: inherit; text-transform: none; line-height: 30px; font-size: 1rem; text-transform: uppercase; } .sppb-readmore:hover, .uk-button:focus, .uk-button:hover { background-color: var(--ba-roze-pastel); color: var(--ba-tekst); outline: 0; text-decoration: none; } .uk-button.uk-active, .uk-button:active { background-color: var(--ba-roze-pastel-hover); color: var(--ba-tekst); } .uk-button-large { min-height: 40px; padding: 0 15px; line-height: 40px; font-size: 16px; } .slideshow-button.uk-button-large { padding: 0; } .panel-red h3 { font-size: 19px; } .panel-red p { font-size: 14px!important; line-height: 22px!important; FONT-WEIGHT: 300; } .uk-panel-header { padding: 40px; background: #fdfaf6; } .uk-panel-box .sppb-addon-content { padding: 40px; background: #fdfaf6; color: #240000; text-align: center; } .uk-panel-header h3 { padding-bottom: 10px!important; border-bottom: 1px solid #e2e3e4!important; color: var(--ba-tekst); margin-bottom: 0!important; } .uk-panel-title { color: var(--ba-roze-accent); font-size: 20px; font-weight: 300; line-height: 27px; margin-bottom: 15px; margin-top: 0; text-transform: uppercase; } .uk-panel-title a { color: var(--ba-roze-accent); text-decoration: none; } .tm-button-align-bottom { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; min-height: 50px; font-size: 14px; line-height: 50px; } .barada-home-conteent .sppb-article-img-wrap { float: right; } .sppb-article-info-wrap h3 { font-size: 20px; line-height: 22px; font-weight: 400; color: #53524d; } .sppb-article-info-wrap h3 a { color: #53524d!important; } .home-content .sppb-addon-article-layout .sppb-addon-article { padding: 40px; background: #fdfaf6; color: #240000; min-height: 520px; } .home-content .sppb-article-info-wrap h3 { padding: 15px 0; margin-bottom: 0; } .tm-overlay { position: relative; z-index: 1; overflow: hidden; cursor: pointer; } .tm-overlay img { position: relative; display: block; width: -webkit-calc(100% + 60px); width: calc(100% + 60px); max-width: none; min-height: 100.9%; transition: opacity .35s, transform .35s; -webkit-transform: translate3d(-50px, 0, 0); -ms-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } .tm-overlay:hover img { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .tm-overlay p { position: absolute; top: 50px; left: 50px; right: 50px; margin: 0; color: #fff!important; font-size: 14px; transition: opacity .35s, transform .35s; -webkit-transform: translate3d(-10px, 0, 0); -ms-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); opacity: 0; } .tm-overlay h2, .tm-overlay h3, .tm-overlay h4 { position: absolute; bottom: 50px; left: 50px; right: 50px; margin: 0; color: #fff!important; font-size: 22px; } .tm-overlay .tm-overlay-caption::before { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; content: ''; -webkit-transition: opacity .35s, -webkit-transform .35s; transition: opacity .35s, transform .35s; -webkit-transform: translate3d(-20px, 0, 0); -ms-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); opacity: 0; border: 1px solid #fff; } .tm-overlay:hover .tm-overlay-caption::before, .tm-overlay:hover p { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .es-module h1 { color: #fff; font-size: 24px; line-height: 32px; } .sp-module-content { font-size: 14px; line-height: 32px; } #sp-footer .container-inner { border: none; } #sp-bottom .mod-custom h2 { color: var(--ba-roze-licht); font-size: 20px; line-height: 22px; font-weight: 400; } #sp-bottom a { color: #fff; } .slideshow-button span { position: relative; z-index: 1; -webkit-transition: .3s; transition: .3s; line-height: 16px; color: var(--ba-tekst); border: 2px solid #fff; background: 0 0!important; } .slideshow-button span:focus, .slideshow-button span:hover { color: var(--ba-tekst)!important; background: 0 0!important; } .tm-button-secondary:after { position: absolute; z-index: -1; top: 0; left: 0; width: 0; height: 100%; content: ''; -webkit-transition: .3s; transition: .3s; } .tm-button-secondary.uk-button-mini { height: 16px; line-height: 16px; } .tm-button-secondary.uk-button-small { height: 21px; line-height: 21px; } .tm-button-secondary.uk-button-large { height: 36px; line-height: 36px; } .tm-button-secondary.uk-active:after, .tm-button-secondary:active:after, .tm-button-secondary:hover:after { width: 100%} .tm-button-secondary.uk-active:after, .tm-button-secondary:active:after { color: var(--ba-tekst); background: #e1eaec; } .tm-button-secondary:after, .wk-slideshow-organic .caption .tm-button-secondary.uk-active:after, .wk-slideshow-organic .caption .tm-button-secondary:active:after { color: #240000; background: #fff; } .wk-slideshow-organic .caption .tm-button-secondary:focus, .wk-slideshow-organic .caption .tm-button-secondary:hover { color: #240000; } #jux-eventon-event-sidebar .jux-event-item ul li .thumb-holder span.event-date span.month { background-color: var(--ba-roze-licht); border-color: var(--ba-roze-licht); } #jux-eventon-event-sidebar .jux-event-item ul li .thumb-holder span.event-date span.day { color: var(--ba-roze-licht); } #jux-eventon-event-sidebar .jux-event-item ul { margin: 0; padding: 0; } #jux-eventon-event-sidebar .jux-event-item ul li { display: flex; height: 90px; margin-bottom: 10px; padding: 10px; box-sizing: border-box; background-color: #f9f9f9; border-radius: 6px; overflow: hidden; min-width: 185px; text-align: center; } #jux-eventon-event-sidebar .jux-event-item ul li h4 a { color: #999 !important; } .tm-panel-subtitle { margin-top: -15px; color: #999; } #sp-bottom, #sp-footer, #sp-header, .home-page #sp-component .sp-column, .layout-blog #sp-component .sp-column, .tm-button-secondary:focus, .tm-button-secondary:hover, .uk-button .sp-slider-btn-text { background: 0 0; } @media only screen and (max-width:360px) { .logo-image { max-width: 65%} .offcanvas-toggler-right { position: absolute; top: 10px; right: 0; } #sp-component .sp-column { padding: 0; } }.gx-5 { --bs-gutter-x: 3rem!important; } .layout-blog #sp-component .sp-column{padding: 0;} .article-list .article{ padding: 40px; background: #fdfaf6; border: 0px; border-radius: 0px; } .article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery{ margin: 0px; border-radius: 0px; } .article-list .article .article-intro-image{float: right; margin-left: 15px;} .article-list .cols-2 .article{min-height: 560px;} .pagination-wrapper {text-align: center;display: block;width: 100%;} .pagination-wrapper .pagination{display: inline-block;--bs-pagination-font-size: 14px;} .pagination-wrapper .pagination li{display: inline-block;} .pagination-wrapper .pagination li .page-link{padding: 5px; margin: 0; display: inline;} .pagination-wrapper .pagination li span{} .pagination>.active>a, .pagination>.active>span{background-color: var(--ba-roze-licht);border-color: var(--ba-roze-licht);color: #fff;} .pagination>.active>a:hover, .pagination>.active>span:hover{background-color: var(--ba-roze-licht);border-color: var(--ba-roze-licht);color: #fff;} .article-list .article .uk-panel-title { padding-bottom: 10px; border-bottom: 1px solid #e2e3e4; color: var(--ba-tekst); } .article-list .article .list-group li{border: none; background: transparent;} .jux-event-title h1{padding-top: 20px;} /* Medium Layout: 1280px. */ @media only screen and (min-width: 992px) and (max-width: 1200px) { } @media only screen and (max-width: 991px) { #sp-header { margin-bottom: 0px !important; height: 110px; } } /* Tablet Layout: 768px. */ @media only screen and (min-width: 768px) and (max-width: 991px) { } /* Mobile Layout lower than: 320px. */ @media only screen and (max-width: 767px) { } /* Wide Mobile Layout: 480px. */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { } @media only screen and (max-width:480px) { #sp-logo{ text-align: center; } #offcanvas-toggler{position: absolute; right: 0; top: 20px; z-index: 999991;} #sp-header.header-sticky { height: 96px; } .home-page #sp-component .sp-column { padding: 0 0px 40px; } #sp-menu{padding-top: 0 !important;} .sp-slider-content-align-center{display: none;} } @media only screen and (max-width:414px) { } @media only screen and (max-width:375px) { } @media only screen and (max-width:360px) { } @media only screen and (max-width:320px) { } /* ################################################################ NIEUWE HOMEPAGE 2026 — blokken (.ba-…) ---------------------------------------------------------------- Hoort bij de HTML uit "ba-homepage-blokken.html". Plak die HTML in SP Page Builder via een Custom-HTML-addon (of Joomla Custom-module). Kleuren en hoeken komen uit :root. ################################################################ */ /* ---------- 1. Introtekst met lees-meer ---------- */ .ba-intro { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); max-width: 1100px; margin: 0 auto 30px; padding: 44px 40px 36px; text-align: center; font-family: Lato, sans-serif; color: var(--ba-tekst); } .ba-accentlijn { width: 56px; height: 3px; margin: 0 auto 22px; background: linear-gradient(90deg, var(--ba-roze), var(--ba-oranje)); border-radius: 2px; } .ba-intro h1 { font-family: Lato, sans-serif; font-size: 28px; font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: var(--ba-tekst); margin: 0 0 8px; } .ba-intro h1 b { font-weight: 700; color: var(--ba-oranje-donker); } .ba-subkop { font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ba-roze); margin-bottom: 20px; } .ba-intro p { font-size: 16px; line-height: 1.8; font-weight: 300; max-width: 760px; margin: 0 auto 12px; } /* Lees meer / lees minder — werkt zonder JavaScript (
) */ details.ba-leesmeer summary { list-style: none; cursor: pointer; display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ba-roze); margin-top: 6px; } details.ba-leesmeer summary::-webkit-details-marker { display: none; } details.ba-leesmeer .minder { display: none; } details.ba-leesmeer[open] .minder { display: inline; } details.ba-leesmeer[open] .meer { display: none; } details.ba-leesmeer[open] summary { margin-bottom: 10px; } /* ---------- 2. Twee kolommen: online (roze) & beleving (oranje) ---------- */ .ba-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 1100px; margin: 0 auto 30px; font-family: Lato, sans-serif; } .ba-kolom { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); overflow: hidden; display: flex; flex-direction: column; } .ba-kolomkop { padding: 24px 30px 20px; color: #fff; text-align: center; } .ba-kolom.online .ba-kolomkop { background: linear-gradient(135deg, var(--ba-roze), var(--ba-roze-licht)); } .ba-kolom.live .ba-kolomkop { background: linear-gradient(135deg, var(--ba-oranje), var(--ba-oranje-donker)); } .ba-kolomkop h2 { font-family: Lato, sans-serif; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin: 0 0 4px; } .ba-kolomkop small { font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; opacity: .9; } .ba-kolominhoud { padding: 12px 26px 28px; flex: 1; display: flex; flex-direction: column; } a.ba-item, .ba-item { display: flex; align-items: center; gap: 16px; padding: 16px 8px; border-bottom: 1px solid #f3ede8; text-decoration: none; color: var(--ba-tekst); } .ba-item:last-of-type { border-bottom: none; } .ba-bol { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; } .ba-kolom.online .ba-bol { background: var(--ba-roze-zacht); } .ba-kolom.live .ba-bol { background: var(--ba-oranje-zacht); } .ba-item strong { display: block; font-size: 14.5px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 3px; } .ba-kolom.online .ba-item strong { color: var(--ba-roze); } .ba-kolom.live .ba-item strong { color: var(--ba-oranje-donker); } .ba-item small { color: #888; font-size: 13px; line-height: 1.5; font-weight: 300; } .ba-chev { margin-left: auto; color: #d8cfc8; font-size: 18px; } .ba-tag { margin-left: auto; white-space: nowrap; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ba-oranje-donker); background: var(--ba-oranje-zacht); border: 1px dashed var(--ba-oranje); padding: 3px 10px; border-radius: var(--ba-radius-datum); } a.ba-kolomknop { display: block; margin: 20px auto 0; width: max-content; padding: 12px 28px; border-radius: var(--ba-radius-knop); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: background .2s ease; } .ba-kolom.online a.ba-kolomknop { background: var(--ba-roze-licht); } .ba-kolom.online a.ba-kolomknop:hover { background: var(--ba-roze); color: #fff; } .ba-kolom.live a.ba-kolomknop { background: var(--ba-oranje); } .ba-kolom.live a.ba-kolomknop:hover { background: var(--ba-oranje-donker); color: #fff; } /* ---------- 3. Agenda (volle breedte, kleur = soort) ---------- */ .ba-agenda { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); max-width: 1100px; margin: 0 auto 30px; padding: 30px 34px; font-family: Lato, sans-serif; color: var(--ba-tekst); } .ba-agenda-kop { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; } .ba-agenda h2 { font-family: Lato, sans-serif; font-size: 20px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; margin: 0; color: var(--ba-tekst); } .ba-legenda { display: flex; gap: 18px; font-size: 13px; color: #666; } .ba-legenda span { display: flex; align-items: center; gap: 7px; } .ba-stip { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .ba-stip.o { background: var(--ba-oranje); } .ba-stip.r { background: var(--ba-roze-licht); } .ba-rij { display: flex; align-items: center; gap: 20px; padding: 14px 4px; border-bottom: 1px solid #f3ede8; } .ba-rij:last-child { border-bottom: none; } .ba-datum { flex-shrink: 0; width: 54px; text-align: center; color: #fff; padding: 6px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 1.5; border-radius: var(--ba-radius-datum); } .ba-rij.o .ba-datum { background: var(--ba-oranje); } .ba-rij.r .ba-datum { background: var(--ba-roze-licht); } .ba-datum b { display: block; font-size: 17px; } .ba-rij strong { font-size: 14px; letter-spacing: .8px; text-transform: uppercase; display: block; margin-bottom: 2px; color: var(--ba-tekst); } .ba-rij small { color: #999; font-size: 13px; font-weight: 300; } .ba-waar { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; } .ba-rij.o .ba-waar { color: var(--ba-oranje-donker); } .ba-rij.r .ba-waar { color: var(--ba-roze-licht); } /* ---------- Mobiel ---------- */ @media only screen and (max-width: 840px) { .ba-kolommen { grid-template-columns: 1fr; } .ba-intro { padding: 32px 22px 28px; } .ba-intro h1 { font-size: 22px; letter-spacing: 2.5px; } .ba-agenda { padding: 24px 18px; } .ba-waar { display: none; } } /* ################################################################ MODULE-HULPKLASSEN ---------------------------------------------------------------- Meegeven via: Joomla-module > Geavanceerd > Moduleklasse, of SP Page Builder addon/rij > Advanced > CSS Class. ################################################################ */ /* Oranje variant van het bestaande rode paneel (nl-panel-red) */ .nl-panel-oranje { padding: 0 !important; } .nl-panel-oranje .sp-module-content, .panel-oranje { background-color: var(--ba-oranje); border: 15px solid var(--ba-oranje); min-width: 100%; min-height: 250px; box-shadow: 0 0 0 1px var(--ba-oranje-donker) inset !important; color: #fff; padding: 30px; text-align: center !important; content: ""; display: table; text-decoration: none; line-height: 20px; } .nl-panel-oranje h3, .panel-oranje h3 { color: #fff; } /* Witte kaart in de stijl van de nieuwe homepage-blokken */ .ba-module-kaart { background: #fff !important; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 30px !important; color: var(--ba-tekst); } /* Agenda-module (JUX EventOn) met oranje datumblokjes, voor modules die alleen belevings-activiteiten op locatie tonen */ .ba-agenda-oranje #jux-eventon-event-sidebar .jux-event-item ul li .thumb-holder span.event-date span.month, .ba-agenda-oranje .jux-event-item ul li .thumb-holder span.event-date span.month { background-color: var(--ba-oranje) !important; border-color: var(--ba-oranje) !important; } .ba-agenda-oranje #jux-eventon-event-sidebar .jux-event-item ul li .thumb-holder span.event-date span.day, .ba-agenda-oranje .jux-event-item ul li .thumb-holder span.event-date span.day { color: var(--ba-oranje-donker) !important; } /* -------------------------------------------------- Nieuwe kolommen: laat ze het hele blok vullen. De addon/module-wrapper eromheen krijgt normaal een witte achtergrond + padding (oude blok-stijl); die zetten we uit zodra er een .ba-kolom in staat. -------------------------------------------------- */ .sppb-addon-content:has(.ba-kolom), .sppb-addon:has(> .sppb-addon-content .ba-kolom), .uk-panel-box:has(.ba-kolom), .sp-module:has(.ba-kolom), .home-page #sp-component .sp-column .sppb-addon-content:has(.ba-kolom), .sppb-addon-content:has(.ba-intro), .sppb-addon:has(.ba-intro), .uk-panel-box:has(.ba-intro), .sp-module:has(.ba-intro), .sppb-addon-content:has(.ba-agenda), .sppb-addon:has(.ba-agenda), .uk-panel-box:has(.ba-agenda), .sp-module:has(.ba-agenda) { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; } /* Kolom vult de volledige breedte en hoogte van zijn vak */ .ba-kolom { width: 100%; height: 100%; } .sppb-addon-wrapper:has(.ba-kolom), .sppb-addon:has(.ba-kolom), .sppb-addon-content:has(.ba-kolom) { height: 100%; } /* -------------------------------------------------- Hover-effecten nieuwe homepage-blokken -------------------------------------------------- */ .ba-kolom { transition: transform .25s ease, box-shadow .25s ease; } .ba-kolom:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.13); } .ba-item { border-radius: var(--ba-radius-datum); transition: background .2s ease, transform .2s ease; } .ba-kolom.online a.ba-item:hover { background: var(--ba-roze-zacht); transform: translateX(5px); } .ba-kolom.live a.ba-item:hover { background: var(--ba-oranje-zacht); transform: translateX(5px); } .ba-kolom.online a.ba-item:hover .ba-chev { color: var(--ba-roze); } .ba-kolom.live a.ba-item:hover .ba-chev { color: var(--ba-oranje-donker); } /* ################################################################ AFWERKING SITE-BREED (radius, leesbaarheid, hover) ################################################################ */ /* ---------- Zachte hoeken op panelen en kaarten ---------- */ .uk-panel-box .sppb-addon-content, .uk-panel-header, .home-content .sppb-addon-article-layout .sppb-addon-article, .article-list .article, .nl-panel-red .sp-module-content, .panel-red, .nl-panel-oranje .sp-module-content, .panel-oranje, #sp-right .sp-module, .j2store-cart, #akeeba-renderjoomla > .j2store, #jux-eventon-event-sidebar .jux-event-item ul li { border-radius: var(--ba-radius) !important; overflow: hidden; } /* ---------- Zachte hoeken op knoppen ---------- */ .sppb-readmore, .uk-button, input.j2store-cart-button, .j2store-addtocart-form input[type="submit"], .j2store-bs input.btn-primary, .j2store-bs a.btn-primary, .j2store-bs input.btn-warning, .j2store-bs a.btn-warning, .j2store-bs button.btn-warning, .j2store-bs input.btn-success, .j2store-bs a.btn-success, .j2store-bs button.btn-success, .j2store-bs .btn-danger, .j2store-bs a.j2store-remove, a.btn.btn-link.jmodedit, a.jmodedit, #form-booking-event .jux-bynow button, .jux-payment, #jux-event-detail .jux-booking .jux-billing, .pagination .page-link, #realty-search-vertical .box-right .search-button .btn { border-radius: var(--ba-radius-knop) !important; } /* knop die onderaan een paneel vastplakt: alleen onderhoeken rond */ .tm-button-align-bottom { border-radius: 0 0 var(--ba-radius) var(--ba-radius) !important; } /* invoervelden */ .j2store-bs input.input-mini, .j2store-addtocart-form input.input-mini, .j2store input.form-control.input-mini { border-radius: var(--ba-radius-datum) !important; } /* ---------- Leesbaardere grijze tekst ---------- */ h4 { color: var(--ba-grijs-tekst); } .tm-panel-subtitle { color: var(--ba-grijs-tekst); } .ba-item small { color: var(--ba-grijs-tekst); } .ba-rij small { color: var(--ba-grijs-tekst); } .ba-legenda { color: var(--ba-grijs-tekst); } .ba-intro p { color: var(--ba-tekst); } #jux-eventon-event-sidebar .jux-event-item ul li h4 a { color: var(--ba-grijs-tekst) !important; } /* ---------- Hover met schaduw op knoppen (site-breed) ---------- */ .sppb-readmore, .uk-button, a.ba-kolomknop, input.j2store-cart-button, .j2store-bs .btn-success { transition: background .2s ease, box-shadow .2s ease, transform .2s ease; } .sppb-readmore:hover, .uk-button:hover, a.ba-kolomknop:hover, input.j2store-cart-button:hover, .j2store-bs .btn-success:hover { box-shadow: 0 6px 16px rgba(198, 40, 75, .25); transform: translateY(-1px); } .ba-kolom.live a.ba-kolomknop:hover { box-shadow: 0 6px 16px rgba(238, 153, 64, .35); } /* -------------------------------------------------- Achtergrondfoto vult de VOLLEDIGE paginahoogte (stond vast op 150vh, waardoor bij langere pagina's onderaan de donkerrode ondergrond zichtbaar werd) -------------------------------------------------- */ .ba-background { height: 100%; min-height: 150vh; } /* ################################################################ CORRECTIES (versie 31-07): - vaste dropschaduw op ALLE knoppen (geen hover-gloed/lift meer) - teksten in de nieuwe blokken links uitgelijnd ################################################################ */ /* ---------- Dropschaduw op alle knoppen, altijd zichtbaar ---------- */ .sppb-readmore, .uk-button, a.ba-kolomknop, input.j2store-cart-button, .j2store-addtocart-form input[type="submit"], .j2store-bs input.btn-primary, .j2store-bs a.btn-primary, .j2store-bs input.btn-warning, .j2store-bs a.btn-warning, .j2store-bs button.btn-warning, .j2store-bs input.btn-success, .j2store-bs a.btn-success, .j2store-bs button.btn-success, a.btn.btn-link.jmodedit, a.jmodedit, #form-booking-event .jux-bynow button, .jux-payment, #jux-event-detail .jux-booking .jux-billing, #realty-search-vertical .box-right .search-button .btn, .slideshow-button { box-shadow: 0 3px 8px rgba(49, 0, 0, 0.22) !important; transform: none !important; } /* bij hover alleen een fractie dieper, geen gloed of verplaatsing */ .sppb-readmore:hover, .uk-button:hover, a.ba-kolomknop:hover, input.j2store-cart-button:hover, .j2store-bs .btn-success:hover { box-shadow: 0 5px 12px rgba(49, 0, 0, 0.30) !important; transform: none !important; } /* ---------- Teksten in de nieuwe blokken links uitlijnen ---------- */ .ba-kolom, .ba-kolominhoud, .ba-item, .ba-item span { text-align: left !important; } .ba-kolomkop { text-align: center; } /* alleen de gekleurde kop blijft gecentreerd */ /* ################################################################ INTRO, VIDEO & KLANTERVARINGEN (versie 31-07 b) ################################################################ */ /* "kennis" in roze in de introtitel */ .ba-intro h1 .rz { color: var(--ba-roze); font-weight: 700; } /* minder witruimte onder het intro-blok */ .ba-intro { margin-bottom: 0; } /* ---------- Videoblok ---------- */ .ba-video { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 26px; } .ba-video h2 { font-family: Lato, sans-serif; font-size: 20px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--ba-tekst); margin: 0 0 18px; text-align: center; } .ba-video-frame { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--ba-radius-datum); } .ba-video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ---------- Klantervaringen (Elfsight Google Reviews) ---------- */ .ba-reviews { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 30px 34px; } .ba-reviews h2 { font-family: Lato, sans-serif; font-size: 20px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--ba-tekst); margin: 0 0 18px; text-align: center; } /* wrappers om video/reviews ook transparant maken */ .sppb-addon-content:has(.ba-video), .sppb-addon:has(.ba-video), .uk-panel-box:has(.ba-video), .sp-module:has(.ba-video), .sppb-addon-content:has(.ba-reviews), .sppb-addon:has(.ba-reviews), .uk-panel-box:has(.ba-reviews), .sp-module:has(.ba-reviews) { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; } /* ################################################################ HEADER, LOGO & NIEUWE ACHTERGROND (versie 31-07 c) ################################################################ */ /* ---------- Glas-effect op de meescrollende header ---------- */ #sp-header.header-sticky, .header-sticky { background: rgba(255, 253, 251, 0.65) !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 2px 18px rgba(49, 0, 0, 0.10); } /* ---------- Logo netjes verticaal gecentreerd in de balk ---------- */ #sp-logo { margin: 0 !important; height: auto !important; display: flex !important; align-items: center; } #sp-logo img, #sp-logo .logo-image { max-height: 70px; width: auto; } #sp-header { align-items: center; } /* ---------- Nieuwe achtergrondfoto (dolfijnen bij zonsondergang) Staat in Mediabeheer: /images/zonbarada.jpg LET OP: bij livegang (site in de hoofdmap) wordt dit url("/images/zonbarada.jpg") ---------- */ .ba-background { background-image: url("../../../images/zonbarada.jpg"); /* ^ relatief pad: komt na Helix-compilatie uit op /2026/images/zonbarada.jpg en werkt straks op de live site (hoofdmap) automatisch ook */ } /* ################################################################ KLEURVERLOOP OVERAL (zelfde verloop op alle gekleurde vlakken) Egaal maken? Zet in :root beide --ba-verloop-… variabelen op bijv. linear-gradient(#d84a56, #d84a56) (2x dezelfde kleur). ################################################################ */ /* Roze vlakken */ .sppb-readmore, .tm-button-align-bottom, input.j2store-cart-button, .j2store-addtocart-form input[type="submit"], .j2store-bs input.btn-success, .j2store-bs a.btn-success, .j2store-bs button.btn-success, .j2store-bs .btn-danger, .j2store-bs a.j2store-remove, #form-booking-event .jux-bynow button, .jux-payment, #jux-event-detail .jux-booking .jux-billing, #realty-search-vertical .box-right .search-button .btn, .nl-panel-red .sp-module-content, .panel-red, .ba-kolom.online .ba-kolomkop, .ba-kolom.online a.ba-kolomknop, .ba-rij.r .ba-datum, #jux-eventon-event-sidebar .jux-event-item ul li .thumb-holder span.event-date span.month { background-image: var(--ba-verloop-roze) !important; } /* Oranje vlakken */ .nl-panel-oranje .sp-module-content, .panel-oranje, .ba-kolom.live .ba-kolomkop, .ba-kolom.live a.ba-kolomknop, .ba-rij.o .ba-datum { background-image: var(--ba-verloop-oranje) !important; } /* hover: iets donkerder verloop via de bestaande hoverkleuren */ .sppb-readmore:hover, .j2store-bs .btn-success:hover, .ba-kolom.online a.ba-kolomknop:hover { background-image: linear-gradient(135deg, #c62f43, #b02539) !important; } .ba-kolom.live a.ba-kolomknop:hover { background-image: linear-gradient(135deg, #c95c3a, #b04a2c) !important; } /* ################################################################ CORRECTIE: GEEN VERLOOP, GEEN VERSPRINGENDE BLOKKEN - alle vlakken weer egaal (verloop-variabelen op één kleur) - dropschaduw op elk vlak, ook de witte blokken - kaarten verspringen niet meer bij hover (alleen de items ín het blok houden hun effect) ################################################################ */ :root { --ba-verloop-roze: linear-gradient(#d84a56, #d84a56); --ba-verloop-oranje: linear-gradient(#e87a58, #e87a58); } /* hover-tinten weer egaal */ .sppb-readmore:hover, .j2store-bs .btn-success:hover, .ba-kolom.online a.ba-kolomknop:hover { background-image: linear-gradient(#c62f43, #c62f43) !important; } .ba-kolom.live a.ba-kolomknop:hover { background-image: linear-gradient(#c95c3a, #c95c3a) !important; } /* kaarten: vaste schaduw, geen beweging; hover alleen iets diepere schaduw */ .ba-kolom, .ba-kolom:hover { transform: none !important; } .ba-kolom:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12); } /* dropschaduw op alle overige vlakken (witte blokken, panelen, zijbalk-items) */ .uk-panel-box .sppb-addon-content, .uk-panel-header, .home-content .sppb-addon-article-layout .sppb-addon-article, .article-list .article, .nl-panel-red .sp-module-content, .panel-red, .nl-panel-oranje .sp-module-content, .panel-oranje, #jux-eventon-event-sidebar .jux-event-item ul li { box-shadow: var(--ba-schaduw); } /* ################################################################ NIEUWE OPZET HOMEPAGE (contentplan Diana) ################################################################ */ /* Intro + Highlights naast elkaar (in één module) */ .ba-introgrid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; max-width: 1100px; margin: 0 auto; } .ba-introgrid .ba-intro { margin: 0; max-width: none; } /* USP-lijst in het introblok */ .ba-intro ul.ba-usps { text-align: left; max-width: 640px; margin: 10px auto 0; padding: 0; list-style: none; } .ba-intro ul.ba-usps li { position: relative; padding: 7px 0 7px 30px; font-size: 15.5px; line-height: 1.6; color: var(--ba-tekst); } .ba-intro ul.ba-usps li::before { content: "✓"; position: absolute; left: 4px; color: var(--ba-oranje); font-weight: 900; } /* Highlights-kader */ .ba-highlights { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 26px 28px; display: flex; flex-direction: column; } .ba-highlights h2 { font-family: Lato, sans-serif; font-size: 18px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--ba-tekst); margin: 0 0 16px; text-align: center; } a.ba-hl { display: block; text-align: center; padding: 12px 16px; margin-bottom: 10px; border-radius: var(--ba-radius-knop); background: var(--ba-oranje); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; box-shadow: 0 3px 8px rgba(49, 0, 0, 0.18); transition: background .2s ease; } a.ba-hl:hover { background: var(--ba-oranje-donker); color: #fff; } /* Ondertitel bij agenda/blogs */ .ba-agenda-sub, .ba-blogs-sub { text-align: center; color: var(--ba-grijs-tekst); font-style: italic; margin: -6px 0 14px; } /* Blogs en informatie */ .ba-blogs { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 30px 34px; font-family: Lato, sans-serif; color: var(--ba-tekst); } .ba-blogs h2 { font-family: Lato, sans-serif; font-size: 20px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--ba-tekst); margin: 0 0 6px; text-align: center; } .ba-blogs a.ba-item strong { color: var(--ba-roze); } .ba-blogs a.ba-item:hover { background: var(--ba-roze-zacht); transform: translateX(5px); } /* wrappers transparant */ .sppb-addon-content:has(.ba-introgrid), .sppb-addon:has(.ba-introgrid), .uk-panel-box:has(.ba-introgrid), .sp-module:has(.ba-introgrid), .sppb-addon-content:has(.ba-blogs), .sppb-addon:has(.ba-blogs), .uk-panel-box:has(.ba-blogs), .sp-module:has(.ba-blogs) { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; } @media only screen and (max-width: 840px) { .ba-introgrid { grid-template-columns: 1fr; } } /* ################################################################ GELIJKHEID: kopjes, hovers, kolomhoogtes (versie 31-07 d) ################################################################ */ /* ---------- Alle blok-kopjes dezelfde opmaak ---------- */ .ba-agenda h2, .ba-blogs h2, .ba-video h2, .ba-highlights h2 { font-family: Lato, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ba-tekst); text-align: center; margin: 0 0 14px; } /* zijbalk-kopjes (Aankomende opleidingen etc.) in dezelfde maat */ #sp-right .sp-module h3, .sp-module h3, .uk-panel-title { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; line-height: 1.4 !important; } /* ---------- Hover overal identiek (roze én oranje) ---------- */ a.ba-item, a.ba-rij, a.ba-hl { transition: background .2s ease, transform .2s ease; } .ba-kolom.online a.ba-item:hover, .ba-blogs a.ba-item:hover, a.ba-rij.r:hover { background: var(--ba-roze-zacht); transform: translateX(5px); } .ba-kolom.live a.ba-item:hover, a.ba-rij.o:hover { background: var(--ba-oranje-zacht); transform: translateX(5px); } a.ba-rij { text-decoration: none; color: var(--ba-tekst); border-radius: var(--ba-radius-datum); } /* ---------- Kolommen exact even hoog, knop altijd onderaan ---------- */ .sppb-addon-content:has(.ba-kolom) .mod-custom, .mod-custom:has(> .ba-kolom) { height: 100%; } .ba-kolominhoud a.ba-kolomknop { margin-top: auto !important; } .ba-kolominhoud { padding-top: 14px; } .ba-kolominhoud a.ba-item:last-of-type { margin-bottom: 14px; } /* ################################################################ LAATSTE STIJLREGELS (winnen van alles hierboven): - gekleurde vlakken: volledig egaal, GEEN schaduw, GEEN verloop - hover: verloop naar LICHTERE tinten (nooit donkerder) ################################################################ */ /* egaal + schaduwloos op alle gekleurde elementen */ .sppb-readmore, .uk-button, .tm-button-align-bottom, a.ba-kolomknop, a.ba-hl, input.j2store-cart-button, .j2store-addtocart-form input[type="submit"], .j2store-bs input.btn-primary, .j2store-bs a.btn-primary, .j2store-bs input.btn-warning, .j2store-bs a.btn-warning, .j2store-bs button.btn-warning, .j2store-bs input.btn-success, .j2store-bs a.btn-success, .j2store-bs button.btn-success, .j2store-bs .btn-danger, .j2store-bs a.j2store-remove, a.btn.btn-link.jmodedit, a.jmodedit, #form-booking-event .jux-bynow button, .jux-payment, #jux-event-detail .jux-booking .jux-billing, #realty-search-vertical .box-right .search-button .btn, .ba-kolomkop, .ba-datum, .ba-tag, .nl-panel-red .sp-module-content, .panel-red, .nl-panel-oranje .sp-module-content, .panel-oranje { background-image: none !important; box-shadow: none !important; transform: none !important; } /* hover: verloop naar lichtere tinten */ .sppb-readmore:hover, .uk-button:hover, input.j2store-cart-button:hover, .j2store-bs .btn-success:hover, .ba-kolom.online a.ba-kolomknop:hover { background-image: linear-gradient(135deg, #d84a56, #ef7d87) !important; color: #fff !important; } .ba-kolom.live a.ba-kolomknop:hover, a.ba-hl:hover { background-image: linear-gradient(135deg, #e87a58, #f6a98d) !important; color: #fff !important; } /* ################################################################ UITLIJNING & HOVER OVERAL (na "laatste stijlregels") ---------------------------------------------------------------- Centraal instelbaar: zet --ba-uitlijning op left / center en alle kopjes + teksten in de vlakken volgen automatisch. ################################################################ */ :root { --ba-uitlijning: left; } /* ---------- Alle kopjes in vlakken links ---------- */ .ba-kolomkop, .ba-kolomkop h2, .ba-kolomkop small, .ba-agenda-kop, .ba-agenda-kop h2, .ba-agenda h2, .ba-blogs h2, .ba-blogs > p, .ba-highlights h2, .ba-video h2, .ba-reviews h2, .ba-intro h1, .ba-intro .ba-subkop, .ba-intro p, .ba-leesmeer p, #sp-left .sp-module h3, #sp-right .sp-module h3, .sp-module h3, .uk-panel-title { text-align: var(--ba-uitlijning) !important; } /* accentlijn en lees-meer netjes mee naar links */ .ba-intro .ba-accentlijn { margin-left: 0; margin-right: auto; } .ba-leesmeer summary { text-align: var(--ba-uitlijning); } details.ba-leesmeer { text-align: var(--ba-uitlijning); } /* itemteksten in de kolommen altijd links */ .ba-item, .ba-item span, .ba-rij, .ba-rij span { text-align: left; } /* ---------- Hetzelfde hover-effect in ALLE vlakken ---------- */ /* highlights-knoppen: zelfde beweging als items */ a.ba-hl { transition: background .2s ease, background-image .2s ease, transform .2s ease; } a.ba-hl:hover { transform: translateX(5px) !important; } /* belevingsoverzicht-rijen en blogitems: zelfde effect als kolommen */ a.ba-rij { transition: background .2s ease, transform .2s ease; } .ba-blogs a.ba-item { transition: background .2s ease, transform .2s ease; } /* zijbalk-modules (aankomende opleidingen/workshops/reizen): zelfde zachte hover op elke rij */ #sp-left .sp-module li:hover, #sp-right .sp-module li:hover, #sp-left .sp-module .latestnews > div:hover, #sp-right .sp-module .latestnews > div:hover { background: var(--ba-roze-zacht); border-radius: var(--ba-radius-datum); transition: background .2s ease; } /* ################################################################ VERSIE 01-08: HEADERFIX + GELIJKE KOPHOOGTES + ACHTERGROND ---------------------------------------------------------------- 1) Header gerepareerd: het logo (animatie-speler) is van zichzelf 197px hoog en drukte het menu uit de balk. Nu vast op 110px, netjes gecentreerd in een balk van 80px. 2) Kolomkoppen (roze/oranje balken) altijd even hoog. 3) Achtergrond: foto alleen bovenaan, vloeit uit naar oranje. De kleur pas je aan met --ba-bg-kleur hieronder. ################################################################ */ :root { /* De kleur waar de foto in uitvloeit (en de rest van de pagina). Zachter maken? bijv. #f6b28e of #fdeee8. Feller? var(--ba-oranje) */ --ba-bg-kleur: #ef9d76; } /* ---------- 1. Header & logo ---------- */ #sp-header { height: 80px !important; overflow: visible; } #sp-header #sp-logo { height: 80px !important; margin: 0 !important; display: flex !important; align-items: center !important; } #sp-logo a { height: 110px !important; display: flex !important; align-items: center !important; } #sp-logo lottie-player { height: 110px !important; width: 110px !important; } #sp-header.header-sticky { height: 80px !important; } /* ---------- 2. Kolomkoppen even hoog ---------- */ .ba-kolomkop { min-height: 96px; display: flex; flex-direction: column; justify-content: center; } /* ---------- 3. Foto bovenaan, uitvloeiend naar oranje ---------- */ .ba-background { background-color: var(--ba-bg-kleur) !important; background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,0) 38vh, var(--ba-bg-kleur) 105vh, var(--ba-bg-kleur) 100%), url("../../../images/zonbarada.jpg") !important; background-repeat: no-repeat, no-repeat !important; background-position: 50% 0, 50% 0 !important; background-size: 100% 100%, 100% 110vh !important; } /* donker verloop onderaan (oud ontwerp) uitzetten */ .ba-background::after { display: none !important; } /* ################################################################ VERSIE 01-08 b: EIGEN ACHTERGRONDFOTO (baradabackground.jpg) met lichte waas + zachte blur eroverheen. - Waas lichter/donkerder: --ba-bg-waas hieronder - Meer/minder blur: --ba-bg-blur (0px = geen blur) ################################################################ */ :root { --ba-bg-waas: rgba(255, 250, 246, 0.45); --ba-bg-blur: 5px; } .ba-background { background-color: #d9553f !important; /* toon van de foto, voor tijdens laden */ background-image: url("../../../images/baradabackground.jpg") !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: cover !important; background-attachment: fixed; } /* lichte waas + blur over de foto (kaarten blijven er scherp bovenop) */ .ba-background::after { content: '' !important; display: block !important; position: absolute; top: 0; right: 0; bottom: -2px; left: 0; background: var(--ba-bg-waas) !important; background-image: none !important; -webkit-backdrop-filter: blur(var(--ba-bg-blur)); backdrop-filter: blur(var(--ba-bg-blur)); } /* ################################################################ VERSIE 01-08 c: header definitief — alles in één balk van 96px (logo, menu en social-icoon netjes verticaal gecentreerd) ################################################################ */ #sp-header, #sp-header.header-sticky { height: 96px !important; } #sp-header #sp-logo { height: 96px !important; } #sp-logo a { height: 96px !important; } #sp-logo lottie-player { height: 92px !important; width: 92px !important; } #sp-header .row { height: 96px !important; } #sp-header #sp-menu { padding-top: 0 !important; margin-top: 0 !important; display: flex !important; align-items: center !important; } #sp-header #sp-menu > nav { width: 100%; } #sp-header #sp-social { padding-top: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end; } /* logo iets groter in beeld (animatie heeft veel witruimte om zich heen) */ #sp-logo lottie-player { transform: scale(1.7); transform-origin: left center; } /* achtergrond begint helemaal bovenaan (oude ontwerp liet hem 752px zakken, waardoor bij scrollen donkerrood doorschemerde) */ .ba-background { top: 0 !important; left: 0 !important; } /* ################################################################ VERSIE 01-08 d: NIEUWE KLEUREN + FOTO OP HET LICHTE MIDDEN ---------------------------------------------------------------- - Oranje overal naar #e5804c - Roze zachter en minder dominant: #d1667b - Achtergrondfoto uitgelijnd op de lichte horizon in het midden (ander deel zien? pas --ba-bg-positie aan: 0% = bovenkant foto, 100% = onderkant) ################################################################ */ :root { --ba-roze: #d1667b; --ba-roze-licht: #dd8296; --ba-roze-accent: #d1667b; --ba-oranje: #e5804c; --ba-oranje-donker: #c4602f; --ba-verloop-roze: linear-gradient(#d1667b, #d1667b); --ba-verloop-oranje: linear-gradient(#e5804c, #e5804c); --ba-bg-positie: 50% 62%; } .ba-background { background-position: var(--ba-bg-positie) !important; } /* hover: verloop naar lichtere tinten van de nieuwe kleuren */ .sppb-readmore:hover, .uk-button:hover, input.j2store-cart-button:hover, .j2store-bs .btn-success:hover, .ba-kolom.online a.ba-kolomknop:hover { background-image: linear-gradient(135deg, #dd8296, #ecb0bd) !important; color: #fff !important; } .ba-kolom.live a.ba-kolomknop:hover, a.ba-hl:hover { background-image: linear-gradient(135deg, #e5804c, #f2ab82) !important; color: #fff !important; } /* ################################################################ VERSIE 01-08 e: logo groter + facebook-icoon terug naar rechts (de social-kolom viel op een tweede regel onder de balk) ################################################################ */ #sp-header .row { flex-wrap: nowrap !important; } #sp-logo lottie-player { transform: scale(2.4) !important; /* groter/kleiner? pas dit getal aan */ transform-origin: left center !important; margin-left: 14px; } /* ################################################################ VERSIE 02-08: GROTE RONDE ---------------------------------------------------------------- 1) Header: bovenaan wit menu, gescrold witte balk + donkerbruine tekst; active & hover overal oranje 2) Alle knoppen en links site-breed oranje (#e5804c) 3) Promopaneel rechts naast de slideshow: oranje 4) Alle vlakken per rij even hoog 5) Video als afgeronde kaart 6) Klantervaringen-kaartjes (.ba-quotes) 7) CTA-banner onderaan (.ba-cta) ################################################################ */ /* ---------- 1a. Bovenaan (nog niet gescrold): wit menu ---------- */ #sp-header:not(.header-sticky) { background: transparent; } #sp-header:not(.header-sticky) .sp-megamenu-parent > li > a { color: #ffffff !important; } #sp-header:not(.header-sticky) #sp-social a { color: #ffffff; } /* ---------- 1b. Gescrold (sticky): witte balk, donkerbruine tekst ---------- */ #sp-header.header-sticky, .header-sticky { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 2px 14px rgba(69, 47, 34, 0.10) !important; } #sp-header.header-sticky .sp-megamenu-parent > li > a { color: #452f22 !important; /* zeer donkerbruin */ } #sp-header.header-sticky #sp-social a { color: #452f22; } /* ---------- 1c. Active & hover in het menu: oranje ---------- */ #sp-header .sp-megamenu-parent > li.active > a, #sp-header .sp-megamenu-parent > li > a:hover, #sp-header .sp-megamenu-parent > li.active > a:hover, #sp-header #sp-social a:hover { color: var(--ba-oranje) !important; } #sp-header .sp-megamenu-parent > li.active > a { border-color: var(--ba-oranje) !important; } .sp-megamenu-parent > li.active > a::after, .sp-megamenu-parent > li.active > a::before { background: var(--ba-oranje) !important; border-color: var(--ba-oranje) !important; } /* ---------- 2a. Alle knoppen oranje ---------- */ .sppb-readmore, .uk-button, .tm-button-align-bottom, a.ba-kolomknop, .ba-kolom.online a.ba-kolomknop, a.ba-hl, input.j2store-cart-button, .j2store-addtocart-form input[type="submit"], .j2store-bs input.btn-primary, .j2store-bs a.btn-primary, .j2store-bs input.btn-warning, .j2store-bs a.btn-warning, .j2store-bs button.btn-warning, .j2store-bs input.btn-success, .j2store-bs a.btn-success, .j2store-bs button.btn-success, #form-booking-event .jux-bynow button, .jux-payment, #realty-search-vertical .box-right .search-button .btn, .sppb-btn, .btn.btn-primary { background: var(--ba-oranje) !important; background-image: none !important; border-color: var(--ba-oranje) !important; color: #fff !important; } /* hover: verloop naar lichter oranje (nooit donkerder) */ .sppb-readmore:hover, .uk-button:hover, .tm-button-align-bottom:hover, a.ba-kolomknop:hover, .ba-kolom.online a.ba-kolomknop:hover, a.ba-hl:hover, input.j2store-cart-button:hover, .j2store-bs .btn-success:hover, .j2store-bs .btn-primary:hover, .sppb-btn:hover, .btn.btn-primary:hover { background-image: linear-gradient(135deg, #e5804c, #f2ab82) !important; color: #fff !important; } /* ---------- 2b. Alle tekstlinks oranje ---------- */ #sp-main-body a:not(.ba-kolomknop):not(.ba-hl):not(.sppb-readmore):not(.uk-button):not(.btn):not(.ba-rij):not(.jmodedit), #sp-left a, #sp-right a, .ba-kolom .ba-item strong, .ba-blogs a.ba-item, .ba-blogs a.ba-item strong { color: var(--ba-oranje-donker); } #sp-main-body a:hover { color: var(--ba-oranje); } .ba-kolom.online .ba-item strong { color: var(--ba-oranje-donker); } .ba-kolom.live .ba-item strong { color: var(--ba-oranje-donker); } /* ---------- 2c. Hover-vlakjes overal in zacht oranje ---------- */ .ba-kolom.online a.ba-item:hover, .ba-blogs a.ba-item:hover, a.ba-rij.r:hover, a.ba-rij.o:hover, #sp-left .sp-module .latestnews > div:hover, #sp-right .sp-module .latestnews > div:hover { background: var(--ba-oranje-zacht) !important; } /* ---------- 3. Promopaneel rechts naast de slideshow: oranje ---------- */ .nl-panel-red .sp-module-content, .panel-red, .sppb-addon-content:has(#s5textrotatecls_otr), .sppb-addon-module:has(#s5textrotatecls_otr) { background: var(--ba-oranje) !important; background-image: none !important; } /* ---------- 4. Vlakken per rij even hoog ---------- */ .sppb-row { align-items: stretch; } .sppb-addon-wrapper:has(.ba-agenda), .sppb-addon-wrapper:has(.ba-blogs), .sppb-addon-wrapper:has(.ba-video), .sppb-addon-wrapper:has(.ba-reviews), .sppb-addon-wrapper:has(.ba-quotes), .sppb-addon-wrapper:has(.ba-kolom), .sppb-addon-wrapper:has(.ba-agenda) .sppb-addon, .sppb-addon-wrapper:has(.ba-blogs) .sppb-addon, .sppb-addon-wrapper:has(.ba-reviews) .sppb-addon, .sppb-addon-wrapper:has(.ba-quotes) .sppb-addon, .sppb-addon:has(.ba-agenda) .sppb-addon-content, .sppb-addon:has(.ba-blogs) .sppb-addon-content, .sppb-addon:has(.ba-reviews) .sppb-addon-content, .sppb-addon:has(.ba-quotes) .sppb-addon-content, .sp-module:has(.ba-agenda), .sp-module:has(.ba-blogs), .sp-module:has(.ba-reviews), .sp-module:has(.ba-quotes), .mod-custom:has(> .ba-agenda), .mod-custom:has(> .ba-blogs), .mod-custom:has(> .ba-reviews), .mod-custom:has(> .ba-quotes) { height: 100%; } .ba-agenda, .ba-blogs, .ba-reviews, .ba-quotes { height: 100%; box-sizing: border-box; } /* ---------- 5. Video als afgeronde kaart ---------- */ .sppb-addon-wrapper:has(iframe[src*="vimeo"]), .sppb-addon-wrapper:has(iframe[src*="youtube"]) { background: #ffffff; padding: 14px; border-radius: var(--ba-radius); height: 100%; box-sizing: border-box; } .sppb-addon iframe[src*="vimeo"], .sppb-addon iframe[src*="youtube"], .ba-video iframe { border-radius: var(--ba-radius); overflow: hidden; display: block; } /* slideshow zelf ook zachte hoeken */ #sp-slider, .sp-slider, [id*="slideshow"], .camera_wrap { border-radius: var(--ba-radius); overflow: hidden; } /* ---------- 6. Klantervaringen-kaartjes ---------- */ .ba-quotes { display: flex; flex-direction: column; gap: 14px; background: #fff; border-radius: var(--ba-radius); padding: 26px 28px; } .ba-quotes h2 { font-size: 19px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ba-grijs-tekst, #452f22); text-align: left; margin: 0 0 4px; } .ba-quote { background: var(--ba-oranje-zacht); border-radius: var(--ba-radius); padding: 16px 18px; } .ba-quote .sterren { color: var(--ba-oranje); font-size: 15px; letter-spacing: 3px; } .ba-quote p { margin: 6px 0 8px; font-style: italic; color: var(--ba-tekst); line-height: 1.55; } .ba-quote .wie { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ba-oranje-donker); } /* ---------- 7. CTA-banner onderaan ---------- */ .ba-cta { background: var(--ba-oranje); border-radius: var(--ba-radius); padding: 40px 34px; text-align: center; color: #fff; } .ba-cta h2 { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: 1px; margin: 0 0 8px; } .ba-cta p { color: #fff; opacity: .92; margin: 0 auto 20px; max-width: 640px; } .ba-cta .ba-cta-knoppen { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } a.ba-cta-knop { display: inline-block; padding: 13px 28px; border-radius: var(--ba-radius-knop); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; transition: background .2s ease; } a.ba-cta-knop.vol { background: #fff; color: var(--ba-oranje-donker) !important; } a.ba-cta-knop.rand { background: transparent; color: #fff !important; border: 2px solid #fff; } a.ba-cta-knop.vol:hover { background: #fff7f2; } a.ba-cta-knop.rand:hover { background: rgba(255,255,255,.15); } /* witte wrapper er omheen uitschakelen */ .sppb-addon-content:has(> div > .ba-cta), .mod-custom:has(> .ba-cta) { background: transparent !important; padding: 0 !important; } /* ################################################################ VERSIE 02-08 b: logo flink groter (groter/kleiner? pas het getal in scale() aan) ################################################################ */ #sp-logo lottie-player { transform: scale(3.1) !important; transform-origin: left center !important; margin-left: 30px; } /* knoppen ín het oranje promopaneel: wit met oranje tekst (anders onzichtbaar) */ .panel-red .uk-button, .nl-panel-red .uk-button, .sppb-addon-content:has(#s5textrotatecls_otr) .uk-button, .panel-oranje .uk-button, .nl-panel-oranje .uk-button { background: #ffffff !important; background-image: none !important; color: var(--ba-oranje-donker) !important; border-color: #ffffff !important; } .panel-red .uk-button:hover, .nl-panel-red .uk-button:hover, .sppb-addon-content:has(#s5textrotatecls_otr) .uk-button:hover { background: #fff3ec !important; background-image: none !important; color: var(--ba-oranje-donker) !important; } /* ################################################################ VERSIE 02-08 c: puntjes op de i - logo nog iets groter (scale 3.5) - video verticaal gecentreerd (geen witruimte er onder) - "Bewerk"-knopjes (alleen zichtbaar voor beheerders) onopvallend - CTA-banner: nette ruimte boven/onder ################################################################ */ #sp-logo lottie-player { transform: scale(3.5) !important; transform-origin: left center !important; margin-left: 38px; } /* video netjes in het midden van zijn witte kaart */ .sppb-addon-wrapper:has(iframe[src*="vimeo"]), .sppb-addon-wrapper:has(iframe[src*="youtube"]) { display: flex; flex-direction: column; justify-content: center; } .sppb-addon-wrapper:has(iframe[src*="vimeo"]) > .sppb-addon, .sppb-addon-wrapper:has(iframe[src*="youtube"]) > .sppb-addon { width: 100%; } /* beheerdersknopjes (Bewerk) doorzichtig maken — bezoekers zien ze nooit */ a.btn.btn-link.jmodedit, a.jmodedit { background: transparent !important; opacity: .25; } a.btn.btn-link.jmodedit:hover, a.jmodedit:hover { opacity: 1; } /* CTA-banner: lucht boven en onder */ #sp-content-bottom .ba-cta, .ba-cta { margin: 26px 0 34px; } /* ################################################################ VERSIE 02-08 d: HEADER ALTIJD WIT + PANEELRAND + TYPOGRAFIE ---------------------------------------------------------------- 1) Header altijd wit met donkerbruine tekst (ook bovenaan) 2) Roze rand (15px) om het promopaneel -> oranje (naadloos) 3) Typografie gelijkgetrokken: --ba-fs-kop = alle sectiekoppen --ba-fs-tekst = alle lopende tekst --ba-fs-klein = subregels en kleine teksten ################################################################ */ /* ---------- 1. Header altijd wit ---------- */ #sp-header, #sp-header:not(.header-sticky), #sp-header.header-sticky { background: #ffffff !important; box-shadow: 0 2px 14px rgba(69, 47, 34, 0.10) !important; } #sp-header .sp-megamenu-parent > li > a, #sp-header:not(.header-sticky) .sp-megamenu-parent > li > a { color: #452f22 !important; } #sp-header #sp-social a, #sp-header:not(.header-sticky) #sp-social a { color: #452f22 !important; } /* active & hover blijven oranje (staat hierboven al) */ #sp-header .sp-megamenu-parent > li.active > a, #sp-header .sp-megamenu-parent > li > a:hover, #sp-header #sp-social a:hover { color: var(--ba-oranje) !important; } /* ---------- 2. Paneelrand van roze naar oranje ---------- */ .sppb-column:has(#s5textrotatecls_otr) { border-color: var(--ba-oranje) !important; } /* ---------- 3. Typografie gelijk ---------- */ :root { --ba-fs-kop: 19px; /* sectiekoppen */ --ba-fs-tekst: 16.5px; /* lopende tekst - HELE site */ --ba-fs-klein: 13px; /* subregels */ } /* alle sectiekoppen exact gelijk */ .sp-module h2, .sp-module h3, .uk-panel-title, .ba-kolomkop h2, .ba-agenda-kop h2, .ba-blogs > h2, .ba-quotes h2, .ba-highlights h2, #s5textrotatecls_otr h1, #s5textrotatecls_otr h2, #s5textrotatecls_otr h3, .panel-red h2, .panel-red h3, .nl-panel-red h2, .nl-panel-red h3, .ba-cta h2 { font-size: var(--ba-fs-kop) !important; font-weight: 700 !important; letter-spacing: 2.5px !important; line-height: 1.45 !important; text-transform: uppercase; } /* alle lopende tekst gelijk */ #sp-main-body p, .sp-module p, .sppb-addon-text, .ba-intro p, #s5textrotatecls_otr p, .panel-red p, .ba-cta p, .ba-quote p { font-size: var(--ba-fs-tekst) !important; line-height: 1.65 !important; } /* 8.2: lopende tekst in de donkerbruine huisstijlkleur (#3a0800). Bewust NIET als algemene regel over de hele site: op de oranje balken en in de slideshow staat de tekst wit, en die moet wit blijven. Daarom alleen op de plekken waar gewone leestekst staat: artikelen, event-pagina's en de zijkolommen. */ #sp-component .article-details, #sp-component .article-details p, #sp-component .article-details li, #sp-component .article-details td, #sp-component .article-details h1, #sp-component .com-content-article p, #sp-component .com-content-article li, #jux-event-detail p, #jux-event-detail li, #jux-event-detail td, .article-info, .article-info span, .article-info a, .com-content-article__body p, .com-content-article__body li { color: var(--ba-tekst) !important; } /* kleine teksten/subregels gelijk */ .ba-item small, .ba-rij small, .ba-kolomkop small, .ba-waar, .ba-legenda span, .ba-subkop, #sp-left .sp-module li, #sp-left .sp-module a, #sp-right .sp-module li, #sp-right .sp-module a { font-size: var(--ba-fs-klein) !important; line-height: 1.5 !important; } /* item-titels in de kolommen en blogs gelijk */ .ba-item strong, .ba-rij strong, .ba-blogs a.ba-item { font-size: 14.5px !important; letter-spacing: 1px !important; } /* intro-kop vast formaat */ .ba-intro h1 { font-size: 30px !important; letter-spacing: 3px !important; } /* ################################################################ VERSIE 3.1: witte kaart om de video weg — video zwevend op de achtergrond, alleen de video zelf met afgeronde hoeken. Witte kaart terug? Zet background weer op #ffffff en padding 14px. ################################################################ */ .sppb-addon-wrapper:has(iframe[src*="vimeo"]), .sppb-addon-wrapper:has(iframe[src*="youtube"]) { background: transparent !important; padding: 0 !important; } /* ################################################################ VERSIE 3.2: datumblokjes gelijk + footer in oranje ################################################################ */ /* alle datumblokjes exact even groot (ook "VOLGT" zonder cijfer) */ .ba-datum { width: 54px !important; min-width: 54px !important; min-height: 54px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; } /* footer: alle koppen en accenten van roze naar oranje */ #sp-bottom h1, #sp-bottom h2, #sp-bottom h3, #sp-bottom h4, #sp-footer h1, #sp-footer h2, #sp-footer h3, #sp-footer h4, #sp-bottom .sp-module-title, #sp-footer .sp-module-title, #sp-bottom strong, #sp-footer strong { color: var(--ba-oranje-donker) !important; } #sp-bottom a:hover, #sp-footer a:hover { color: var(--ba-oranje) !important; } /* ################################################################ VERSIE 3.3: agendapagina — knoppen in huisstijl + vlak met radius ################################################################ */ /* INFO / GRATIS-knoppen (JUX EventOn) gelijk aan alle andere knoppen */ .jux-eventon-button a, .jux-eventon-button-winona a, #jux-eventon .jux-eventon-button a { background: var(--ba-oranje) !important; background-image: none !important; color: #ffffff !important; border: 0 !important; border-radius: var(--ba-radius-knop) !important; letter-spacing: 2px; text-transform: uppercase; } .jux-eventon-button a span, .jux-eventon-button-winona a span { color: #ffffff !important; } .jux-eventon-button a:hover, .jux-eventon-button-winona a:hover { background-image: linear-gradient(135deg, #e5804c, #f2ab82) !important; color: #ffffff !important; } /* groot contentvlak op (o.a.) de agendapagina: afgeronde hoeken */ #sp-component .sp-column { border-radius: var(--ba-radius); overflow: hidden; } /* ################################################################ VERSIE 4.0: ROZE OVERAL VERVANGEN DOOR ORANJE + VASTE TEKSTSCHAAL ---------------------------------------------------------------- De hele roze familie wijst nu naar oranje tinten. Roze ooit terug? Zet deze variabelen terug naar de waarden uit versie 3.x. ################################################################ */ :root { --ba-roze: #e5804c; --ba-roze-licht: #ea915f; --ba-roze-accent: #c4602f; --ba-roze-pastel: #f9ddc9; --ba-roze-pastel-hover: #f6d2b8; --ba-roze-pastel-licht: #fbe7d8; --ba-roze-tabelkop: #fdeee8; --ba-roze-zacht: #fdeee8; --ba-roze-inset: #ec9a70; --ba-roze-fel: #e5804c; --ba-verloop-roze: linear-gradient(#e5804c, #e5804c); } /* footerkoppen (menu-headings) en modulekoppen: oranje */ .sp-menu-heading, #sp-bottom span.sp-menu-heading, #sp-footer span, #sp-bottom h2 span, #sp-bottom h3 span { color: var(--ba-oranje-donker) !important; } /* hardgecodeerde oude roodtinten (o.a. de NIEUW-badge) */ [style*="d6425f" i], [style*="da3d5d" i], [style*="c62f43" i], [style*="d84a56" i] { color: var(--ba-oranje-donker) !important; } span[style*="background"][style*="d6425f" i] { background: var(--ba-oranje) !important; color: #fff !important; } /* cookiemelding-knoppen in huisstijl */ .cpnb-button, #cpnb-accept-btn-m, .cpnb-m-enableAllButton { background: var(--ba-oranje) !important; border-color: var(--ba-oranje) !important; color: #fff !important; border-radius: var(--ba-radius-knop) !important; } /* vaste tekstschaal op ALLE pagina's (contentgedeelte) */ #sp-component h1 { font-size: 30px !important; line-height: 1.3 !important; } #sp-component h2 { font-size: 21px !important; line-height: 1.4 !important; } #sp-component h3 { font-size: 18.5px !important; line-height: 1.45 !important; } #sp-component h4 { font-size: 16px !important; } #sp-component p, #sp-component li, #sp-component td { font-size: var(--ba-fs-tekst) !important; line-height: 1.65 !important; } /* ################################################################ VERSIE 4.1: tekstlinks in content overal oranje ################################################################ */ #sp-component a:not(.btn):not(.uk-button):not(.sppb-readmore):not(.sppb-btn):not(.jmodedit), #sp-component a:not([class]):hover { color: var(--ba-oranje-donker); } #sp-component a:not(.btn):not(.uk-button):not(.sppb-readmore):not(.sppb-btn):not(.jmodedit):hover { color: var(--ba-oranje); } /* ################################################################ VERSIE 5.0: ROZE ALLEEN VOOR "BELEVEN" + FELLER ORANJE + LUXE GEANIMEERDE ACHTERGROND ---------------------------------------------------------------- - Alles oranje, BEHALVE het beleven-blok en het woord "beleven" (die krijgen het roze accent: --ba-beleven-roze) - Oranje feller: --ba-oranje hieronder - Achtergrond: verloop van licht beige naar warm bruin; het middelpunt beweegt non-stop, de onderzijde blijft altijd bruin. Gouden marmer-accenten bewegen er doorheen (soft-light). ################################################################ */ :root { --ba-oranje: #f2793a; /* feller oranje */ --ba-oranje-donker: #d05f22; --ba-oranje-zacht: #fdeee2; --ba-beleven-roze: #d1667b; /* het roze accent voor beleven */ --ba-beleven-roze-licht:#e6a2b1; --ba-beige: #f7efe0; /* bovenkant achtergrond */ --ba-bruin: #6f4128; /* onderkant achtergrond */ --ba-goud: 212, 175, 55; /* marmer-goud (rgb) */ } /* ---------- hover-verlopen op het fellere oranje ---------- */ .sppb-readmore:hover, .uk-button:hover, .tm-button-align-bottom:hover, a.ba-kolomknop:hover, a.ba-hl:hover, .sppb-btn:hover, input.j2store-cart-button:hover, .j2store-bs .btn-success:hover, .j2store-bs .btn-primary:hover, .jux-eventon-button a:hover { background-image: linear-gradient(135deg, #f2793a, #f9a06b) !important; color: #fff !important; } /* ---------- het beleven-blok: roze ---------- */ .ba-kolom.live .ba-kolomkop { background: var(--ba-beleven-roze) !important; background-image: none !important; } .ba-kolom.live a.ba-kolomknop { background: var(--ba-beleven-roze) !important; background-image: none !important; border-color: var(--ba-beleven-roze) !important; } .ba-kolom.live a.ba-kolomknop:hover { background-image: linear-gradient(135deg, var(--ba-beleven-roze), var(--ba-beleven-roze-licht)) !important; } .ba-kolom.live .ba-item strong { color: var(--ba-beleven-roze) !important; } .ba-kolom.live a.ba-item:hover { background: #faeef1 !important; } /* ---------- het woord "beleven" roze, "kennis" oranje ---------- */ .ba-intro h1 b { color: var(--ba-beleven-roze) !important; } .ba-intro h1 .rz { color: var(--ba-oranje) !important; } /* ---------- luxe achtergrond: verloop + gouden marmer ---------- */ .ba-background { background-color: var(--ba-bruin) !important; background-image: linear-gradient(180deg, rgba(111,65,40,0) 72%, var(--ba-bruin) 100%), linear-gradient(180deg, var(--ba-beige) 0%, #e9d2ab 36%, #b07a4d 72%, var(--ba-bruin) 100%) !important; background-size: 100% 100%, 100% 175% !important; background-position: 50% 0%, 50% 0% !important; background-repeat: no-repeat, no-repeat !important; background-attachment: scroll !important; animation: ba-verloop 18s ease-in-out infinite alternate; } @keyframes ba-verloop { 0% { background-position: 50% 0%, 50% 0%; } 100% { background-position: 50% 0%, 50% 100%; } } /* gouden marmer-accenten, non-stop in beweging */ .ba-background::after { content: '' !important; display: block !important; position: absolute; top: 0; right: 0; bottom: -2px; left: 0; background-color: transparent !important; background-image: radial-gradient(55% 38% at 18% 22%, rgba(var(--ba-goud), .30), transparent 62%), radial-gradient(45% 30% at 78% 45%, rgba(var(--ba-goud), .24), transparent 60%), radial-gradient(60% 42% at 40% 78%, rgba(240, 205, 110, .22), transparent 65%), radial-gradient(35% 25% at 90% 85%, rgba(200, 160, 60, .20), transparent 60%) !important; background-size: 170% 170% !important; mix-blend-mode: soft-light; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: ba-marmer 28s ease-in-out infinite alternate; } @keyframes ba-marmer { 0% { background-position: 0% 0%; } 50% { background-position: 100% 40%; } 100% { background-position: 30% 100%; } } /* rustig aan voor wie animaties uit heeft staan */ @media (prefers-reduced-motion: reduce) { .ba-background, .ba-background::after { animation: none !important; } } /* ################################################################ VERSIE 5.1: verloop gekoppeld aan het SCHERM (niet aan de paginahoogte) — daardoor zie je het verloop nu echt, en blijft de onderkant van je beeld altijd warm bruin. Bovenkant lichter. ################################################################ */ :root { --ba-beige: #fcf9f2; /* nóg lichter startpunt bovenin */ } .ba-background { background-image: linear-gradient(180deg, rgba(111, 65, 40, 0) 62%, var(--ba-bruin) 96%), linear-gradient(180deg, var(--ba-beige) 0%, #eedcbc 42%, #b8815a 75%, var(--ba-bruin) 100%) !important; background-attachment: fixed, fixed !important; background-size: 100% 100%, 100% 165% !important; } /* marmer-accenten schermvullend laten bewegen */ .ba-background::after { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; background-size: 150% 150% !important; } /* ################################################################ VERSIE 5.2: ACHTERGROND DEFINITIEF — SCROLL-VAST, KARAMEL, MARMER ---------------------------------------------------------------- Getest in de browser vóór plaatsing (ook op scrollen). Techniek: het verloop en het marmer zitten op schermvaste lagen (position: fixed) in plaats van background-attachment: fixed — dat laatste schakelt Chrome uit bij animaties, waardoor de achtergrond bij het scrollen "verdween". - Kleuren: --ba-beige (boven) t/m --ba-bruin (onder, karamel) - Marmer sterker/zachter: de alpha-waarden in ::after - Tempo: seconden in @keyframes ba-verloop2 / ba-marmer2 ################################################################ */ :root { --ba-bruin: #8a6238; /* warm karamelbruin, past bij het beige */ } .ba-background { background: #efe3cd !important; /* vangnet als lagen nog laden */ animation: none !important; } /* laag 1: het verloop, vast aan het scherm, met bewegend middelpunt */ .ba-background::before { content: '' !important; position: fixed !important; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(180deg, rgba(255,252,245,0) 0%, rgba(255,252,245,.55) 30%, rgba(255,252,245,0) 60%), linear-gradient(180deg, #fcf9f2 0%, #f3e7cf 30%, #e3caa5 55%, #c9a276 78%, #a87b50 92%, var(--ba-bruin) 100%); background-size: 100% 220%, 100% 100%; background-position: 50% 0%, 50% 0%; background-repeat: no-repeat; animation: ba-verloop2 14s ease-in-out infinite alternate; } @keyframes ba-verloop2 { 0% { background-position: 50% 0%, 50% 0%; } 100% { background-position: 50% 100%, 50% 0%; } } /* laag 2: gouden marmer-accenten, non-stop in beweging */ .ba-background::after { content: '' !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; background-color: transparent !important; background-image: radial-gradient(55% 38% at 18% 22%, rgba(212,175,55,.30), transparent 62%), radial-gradient(45% 30% at 78% 45%, rgba(199,158,50,.26), transparent 60%), radial-gradient(60% 42% at 40% 78%, rgba(228,190,95,.28), transparent 65%), radial-gradient(35% 25% at 90% 15%, rgba(212,175,55,.22), transparent 60%), radial-gradient(28% 20% at 8% 70%, rgba(232,198,110,.24), transparent 60%) !important; background-size: 150% 150% !important; mix-blend-mode: normal !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: ba-marmer2 22s ease-in-out infinite alternate !important; } @keyframes ba-marmer2 { 0% { background-position: 0% 0%; } 50% { background-position: 100% 40%; } 100% { background-position: 30% 100%; } } @media (prefers-reduced-motion: reduce) { .ba-background::before, .ba-background::after { animation: none !important; } } /* ################################################################ VERSIE 5.3: KLEUREN OMGEDRAAID Kennisbank = roze | Workshops en opleidingen = oranje ################################################################ */ /* Workshops en opleidingen (rechts): oranje */ .ba-kolom.live .ba-kolomkop { background: var(--ba-oranje) !important; background-image: none !important; } .ba-kolom.live a.ba-kolomknop { background: var(--ba-oranje) !important; background-image: none !important; border-color: var(--ba-oranje) !important; } .ba-kolom.live a.ba-kolomknop:hover { background-image: linear-gradient(135deg, #f2793a, #f9a06b) !important; } .ba-kolom.live .ba-item strong { color: var(--ba-oranje-donker) !important; } .ba-kolom.live a.ba-item:hover { background: var(--ba-oranje-zacht) !important; } /* Kennisbank (links): roze */ .ba-kolom.online .ba-kolomkop { background: var(--ba-beleven-roze) !important; background-image: none !important; } .ba-kolom.online a.ba-kolomknop { background: var(--ba-beleven-roze) !important; background-image: none !important; border-color: var(--ba-beleven-roze) !important; } .ba-kolom.online a.ba-kolomknop:hover { background-image: linear-gradient(135deg, var(--ba-beleven-roze), var(--ba-beleven-roze-licht)) !important; } .ba-kolom.online .ba-item strong { color: var(--ba-beleven-roze) !important; } .ba-kolom.online a.ba-item:hover { background: #faeef1 !important; } /* ################################################################ VERSIE 5.4: ACHTERGROND OP BODY-NIVEAU (DEFINITIEVE TECHNIEK) ---------------------------------------------------------------- De verloop- en marmerlagen hangen nu rechtstreeks aan als schermvaste lagen met negatieve z-index. Dit is de standaard- techniek die op alle browsers en mobiel werkt; hij staat volledig los van de oude .ba-background/wrapper-constructie (die is uit). ################################################################ */ html { background: #efe3cd !important; } body { background: transparent !important; } .ba-background { display: none !important; } /* laag 1: verloop, licht beige -> karamelbruin, ademend middelpunt */ body::before { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; background-image: linear-gradient(180deg, rgba(255,252,245,0) 0%, rgba(255,252,245,.55) 30%, rgba(255,252,245,0) 60%), linear-gradient(180deg, #fcf9f2 0%, #f3e7cf 30%, #e3caa5 55%, #c9a276 78%, #a87b50 92%, var(--ba-bruin, #8a6238) 100%); background-size: 100% 220%, 100% 100%; background-position: 50% 0%, 50% 0%; background-repeat: no-repeat; animation: ba-body-verloop 14s ease-in-out infinite alternate; } /* laag 2: gouden marmer-accenten, non-stop in beweging */ body::after { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(55% 38% at 18% 22%, rgba(212,175,55,.30), transparent 62%), radial-gradient(45% 30% at 78% 45%, rgba(199,158,50,.26), transparent 60%), radial-gradient(60% 42% at 40% 78%, rgba(228,190,95,.28), transparent 65%), radial-gradient(35% 25% at 90% 15%, rgba(212,175,55,.22), transparent 60%), radial-gradient(28% 20% at 8% 70%, rgba(232,198,110,.24), transparent 60%); background-size: 150% 150%; animation: ba-body-marmer 22s ease-in-out infinite alternate; } @keyframes ba-body-verloop { 0% { background-position: 50% 0%, 50% 0%; } 100% { background-position: 50% 100%, 50% 0%; } } @keyframes ba-body-marmer { 0% { background-position: 0% 0%; } 50% { background-position: 100% 40%; } 100% { background-position: 30% 100%; } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none !important; } } /* ################################################################ VERSIE 5.5: PARALLAX + ZICHTBAAR GOUD-MARMER + #3a0800 ---------------------------------------------------------------- - Bij het scrollen schuift het verloop in een ander tempo mee (scroll-gedreven animatie; browsers zonder ondersteuning tonen het verloop gewoon stilstaand — nooit kapot) - Marmer-goud flink duidelijker, blijft continu bewegen - Onderste kleur van het verloop: #3a0800 - Fontkleur overal: #3a0800 ################################################################ */ :root { --ba-donker: #3a0800; /* diepste kleur onderin + fontkleur */ --ba-tekst: #3a0800; --ba-grijs-tekst: #3a0800; } /* fontkleur */ body, #sp-component, #sp-main-body { color: var(--ba-donker); } #sp-header .sp-megamenu-parent > li > a, #sp-header:not(.header-sticky) .sp-megamenu-parent > li > a, #sp-header.header-sticky .sp-megamenu-parent > li > a { color: var(--ba-donker) !important; } #sp-header #sp-social a { color: var(--ba-donker) !important; } #sp-header .sp-megamenu-parent > li.active > a, #sp-header .sp-megamenu-parent > li > a:hover { color: var(--ba-oranje) !important; } /* verloop: extra bewegingsruimte + donker slot op #3a0800 */ body::before { background-image: linear-gradient(180deg, rgba(255,252,245,0) 0%, rgba(255,252,245,.5) 30%, rgba(255,252,245,0) 60%), linear-gradient(180deg, #fcf9f2 0%, #f3e7cf 26%, #e3caa5 46%, #c9a276 64%, #96683c 80%, #5f3315 91%, var(--ba-donker) 100%) !important; background-size: 100% 220%, 100% 170% !important; background-position: 50% 0%, 50% 0%; /* parallax: gekoppeld aan de scrollpositie van de pagina */ animation: ba-parallax 1s linear both; animation-timeline: scroll(root); } @keyframes ba-parallax { from { background-position: 50% 0%, 50% 0%; } to { background-position: 50% 100%, 50% 100%; } } /* marmer: duidelijk aanwezig, blijft op tijd-animatie doorlopen */ body::after { background-image: radial-gradient(50% 34% at 16% 20%, rgba(214, 172, 66, .48), transparent 60%), radial-gradient(42% 28% at 80% 42%, rgba(198, 152, 44, .42), transparent 58%), radial-gradient(55% 38% at 38% 76%, rgba(233, 192, 88, .45), transparent 62%), radial-gradient(30% 22% at 92% 12%, rgba(214, 172, 66, .36), transparent 58%), radial-gradient(26% 18% at 6% 66%, rgba(240, 204, 106, .40), transparent 58%), radial-gradient(34% 24% at 60% 8%, rgba(226, 184, 78, .32), transparent 60%) !important; background-size: 140% 140% !important; animation: ba-body-marmer 20s ease-in-out infinite alternate !important; } /* browsers zonder scroll-animaties: verloop rustig laten staan */ @supports not (animation-timeline: scroll()) { body::before { animation: ba-body-verloop 14s ease-in-out infinite alternate; } } /* ################################################################ VERSIE 5.6: FOTO-ACHTERGROND MET PARALLAX ---------------------------------------------------------------- De foto Barada2026achtergrond.jpg (mistige bergen bij zonsopkomst) vult het scherm en glijdt bij het scrollen langzaam mee (parallax). Terug naar het geanimeerde verloop van 5.5? Verwijder deze sectie. Het goud-marmer blijft er subtiel overheen bewegen. ################################################################ */ body::before { background-image: url("../../../images/Barada2026achtergrond1.jpg") !important; background-size: cover !important; background-position: 50% 0% !important; background-repeat: no-repeat !important; background-color: #efe3cd; /* parallax: de foto pant langzaam mee met de scrollpositie */ animation: ba-foto-parallax 1s linear both; animation-timeline: scroll(root); } @keyframes ba-foto-parallax { from { background-position: 50% 0%; } to { background-position: 50% 100%; } } /* browsers zonder scroll-animatie: foto rustig gecentreerd */ @supports not (animation-timeline: scroll()) { body::before { animation: none; background-position: 50% 30% !important; } } /* ################################################################ VERSIE 5.7: FOTO 100% BREED + PARALLAX VIA SCRIPT ---------------------------------------------------------------- Het scrollen stuurt de variabele --ba-scroll (0 = bovenaan, 1 = onderaan) via de module "Achtergrond parallax (script)". De foto pant daarmee van boven- naar onderkant: je ziet de HELE afbeelding tijdens het scrollen, op 100% schermbreedte. ################################################################ */ body::before { background-size: 100% auto !important; background-position: 50% calc(var(--ba-scroll, 0) * 100%) !important; animation: none !important; } /* op staande schermen (mobiel) toch vullend, anders valt er een gat */ @media (orientation: portrait) { body::before { background-size: cover !important; } } /* ################################################################ VERSIE 5.8: MARMER-ANIMATIE UIT De bewegende goudlaag is uitgeschakeld. De foto met het parallax-scrolleffect (5.7) blijft ongewijzigd. Marmer ooit terug? Verwijder deze sectie. ################################################################ */ body::after { content: none !important; animation: none !important; } /* ################################################################ VERSIE 5.9: EIGEN SLIDESHOW (.ba-slides) ---------------------------------------------------------------- 6 slides, elk volledig klikbaar met titel, tekst en knop. Teksten bewerken: module "Home SLIDESHOW (ba)". Tempo: 36s hieronder = 6 slides x 6 seconden. Stil bij muis erop (animation-play-state: paused). ################################################################ */ .ba-slides { position: relative; height: 430px; border-radius: var(--ba-radius); overflow: hidden; background: #2b1a10; } .ba-slides .ba-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; background-size: cover; background-position: center; opacity: 0; text-decoration: none; animation: ba-slide-fade 36s infinite; animation-timing-function: ease-in-out; } /* ---------------------------------------------------------------- TIMING: past zich vanzelf aan het aantal slides aan (4 t/m 10). Voeg je een slide toe of haal je er een weg? Dan hoeft hier NIETS te veranderen - elke slide krijgt automatisch 7,5 seconden. ---------------------------------------------------------------- */ /* elke volgende slide start 7,5 seconden later */ .ba-slides .ba-slide:nth-child(1) { animation-delay: 0s; } .ba-slides .ba-slide:nth-child(2) { animation-delay: 7.5s; } .ba-slides .ba-slide:nth-child(3) { animation-delay: 15s; } .ba-slides .ba-slide:nth-child(4) { animation-delay: 22.5s; } .ba-slides .ba-slide:nth-child(5) { animation-delay: 30s; } .ba-slides .ba-slide:nth-child(6) { animation-delay: 37.5s; } .ba-slides .ba-slide:nth-child(7) { animation-delay: 45s; } .ba-slides .ba-slide:nth-child(8) { animation-delay: 52.5s; } .ba-slides .ba-slide:nth-child(9) { animation-delay: 60s; } .ba-slides .ba-slide:nth-child(10) { animation-delay: 67.5s; } /* het juiste ritme per aantal slides */ .ba-slides:has(.ba-slide:nth-child(4)):not(:has(.ba-slide:nth-child(5))) .ba-slide { animation-name: ba-slide-fade-4; animation-duration: 30s; } .ba-slides:has(.ba-slide:nth-child(5)):not(:has(.ba-slide:nth-child(6))) .ba-slide { animation-name: ba-slide-fade-5; animation-duration: 37.5s; } .ba-slides:has(.ba-slide:nth-child(6)):not(:has(.ba-slide:nth-child(7))) .ba-slide { animation-name: ba-slide-fade-6; animation-duration: 45s; } .ba-slides:has(.ba-slide:nth-child(7)):not(:has(.ba-slide:nth-child(8))) .ba-slide { animation-name: ba-slide-fade-7; animation-duration: 52.5s; } .ba-slides:has(.ba-slide:nth-child(8)):not(:has(.ba-slide:nth-child(9))) .ba-slide { animation-name: ba-slide-fade-8; animation-duration: 60s; } .ba-slides:has(.ba-slide:nth-child(9)):not(:has(.ba-slide:nth-child(10))) .ba-slide { animation-name: ba-slide-fade-9; animation-duration: 67.5s; } .ba-slides:has(.ba-slide:nth-child(10)) .ba-slide { animation-name: ba-slide-fade-10; animation-duration: 75s; } /* ---------------------------------------------------------------- OVERVLOEIEN (crossfade) De nieuwe slide komt in 1,5 seconde BOVENOP de vorige tevoorschijn. De vorige blijft daarbij gewoon volledig zichtbaar en verdwijnt pas als hij helemaal bedekt is. Daardoor zie je nooit een donker gat tussen twee foto's - ze lopen echt in elkaar over. ---------------------------------------------------------------- */ @keyframes ba-slide-fade-4 { 0% { opacity: 0; z-index: 3; } 5% { opacity: 1; z-index: 3; } 25% { opacity: 1; z-index: 2; } 30% { opacity: 1; z-index: 2; } 30.5% { opacity: 0; z-index: 1; } 100% { opacity: 0; z-index: 1; } } @keyframes ba-slide-fade-5 { 0% { opacity: 0; z-index: 3; } 4% { opacity: 1; z-index: 3; } 20% { opacity: 1; z-index: 2; } 24% { opacity: 1; z-index: 2; } 24.5% { opacity: 0; z-index: 1; } 100% { opacity: 0; z-index: 1; } } @keyframes ba-slide-fade-6 { 0% { opacity: 0; z-index: 3; } 3.3333% { opacity: 1; z-index: 3; } 16.6667% { opacity: 1; z-index: 2; } 20% { opacity: 1; z-index: 2; } 20.5% { opacity: 0; z-index: 1; } 100% { opacity: 0; z-index: 1; } } @keyframes ba-slide-fade-7 { 0% { opacity: 0; z-index: 3; } 2.8571% { opacity: 1; z-index: 3; } 14.2857% { opacity: 1; z-index: 2; } 17.1429% { opacity: 1; z-index: 2; } 17.6429% { opacity: 0; z-index: 1; } 100% { opacity: 0; z-index: 1; } } @keyframes ba-slide-fade-8 { 0% { opacity: 0; z-index: 3; } 2.5% { opacity: 1; z-index: 3; } 12.5% { opacity: 1; z-index: 2; } 15% { opacity: 1; z-index: 2; } 15.5% { opacity: 0; z-index: 1; } 100% { opacity: 0; z-index: 1; } } @keyframes ba-slide-fade-9 { 0% { opacity: 0; z-index: 3; } 2.2222% { opacity: 1; z-index: 3; } 11.1111% { opacity: 1; z-index: 2; } 13.3333% { opacity: 1; z-index: 2; } 13.8333% { opacity: 0; z-index: 1; } 100% { opacity: 0; z-index: 1; } } @keyframes ba-slide-fade-10 { 0% { opacity: 0; z-index: 3; } 2% { opacity: 1; z-index: 3; } 10% { opacity: 1; z-index: 2; } 12% { opacity: 1; z-index: 2; } 12.5% { opacity: 0; z-index: 1; } 100% { opacity: 0; z-index: 1; } } } .ba-slides:hover .ba-slide { animation-play-state: paused; } /* leesbaarheid: warme donkere gloed onderin */ .ba-slides .ba-slide::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(58,8,0,0) 35%, rgba(58,8,0,.62) 100%); } .ba-slides .ba-slide-inhoud { position: absolute; left: 36px; right: 36px; bottom: 30px; z-index: 2; color: #fff; max-width: 620px; text-align: left; } .ba-slides .ba-slide-inhoud h2 { color: #fff !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; margin: 0 0 6px; text-transform: none; } .ba-slides .ba-slide-inhoud p { color: #fff !important; opacity: .94; margin: 0 0 14px; font-size: var(--ba-fs-tekst) !important; line-height: 1.5 !important; } .ba-slides .ba-slide-knop { display: inline-block; padding: 11px 22px; background: var(--ba-oranje); color: #fff; border-radius: var(--ba-radius-knop); font-size: 12.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; transition: background .2s ease; } .ba-slides .ba-slide:hover .ba-slide-knop { background-image: linear-gradient(135deg, #f2793a, #f9a06b); } /* witte wrapper om de module heen uitschakelen */ .sppb-addon-content:has(.ba-slides), .mod-custom:has(> .ba-slides) { background: transparent !important; padding: 0 !important; } @media (prefers-reduced-motion: reduce) { /* rustiger tempo voor wie bewegende beelden vervelend vindt: elke slide blijft twee keer zo lang staan */ .ba-slides:has(.ba-slide:nth-child(4)):not(:has(.ba-slide:nth-child(5))) .ba-slide { animation-duration: 60s; } .ba-slides:has(.ba-slide:nth-child(5)):not(:has(.ba-slide:nth-child(6))) .ba-slide { animation-duration: 75s; } .ba-slides:has(.ba-slide:nth-child(6)):not(:has(.ba-slide:nth-child(7))) .ba-slide { animation-duration: 90s; } .ba-slides:has(.ba-slide:nth-child(7)):not(:has(.ba-slide:nth-child(8))) .ba-slide { animation-duration: 105s; } .ba-slides:has(.ba-slide:nth-child(8)):not(:has(.ba-slide:nth-child(9))) .ba-slide { animation-duration: 120s; } .ba-slides:has(.ba-slide:nth-child(9)):not(:has(.ba-slide:nth-child(10))) .ba-slide { animation-duration: 135s; } .ba-slides:has(.ba-slide:nth-child(10)) .ba-slide { animation-duration: 150s; } } /* ################################################################ VERSIE 6.1: PROMOPANEEL / HIGHLIGHTS-ROTATOR OPMAAK ---------------------------------------------------------------- De oranje rotator (Lezingen / Belevingsavond / Spanje reis) kreeg een nette, rustige opmaak: gecentreerd, wit accentlijntje boven de titel, lichte subtitel en een witte knop met oranje tekst. Werkt voor de home (module 246) en de zijbalk (module 149). ################################################################ */ #s5textrotatecls_otr, .panel-red .s5textrotatecls, .nl-panel-red .s5textrotatecls { text-align: center; } #s5textrotatecls_otr { padding: 10px 8px; } /* accentlijntje + titel */ #s5textrotatecls_otr .uk-panel-title-n { font-size: 22px !important; font-weight: 800 !important; letter-spacing: 3px !important; text-transform: uppercase; line-height: 1.35 !important; margin: 16px 0 4px !important; } #s5textrotatecls_otr .uk-panel-title-n::before { content: ''; display: block; width: 44px; height: 3px; margin: 0 auto 16px; background: rgba(255, 255, 255, 0.65); border-radius: 2px; } #s5textrotatecls_otr .uk-panel-title-n span { color: #ffffff !important; } /* subtitel: licht, met ruimte */ #s5textrotatecls_otr .tm-panel-subtitle { color: #ffe3d2 !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase; margin: 6px 0 0 !important; } /* lopende tekst */ #s5textrotatecls_otr p { color: #ffffff !important; opacity: 0.95; } /* knop: wit met oranje tekst */ #s5textrotatecls_otr .uk-button { background: #ffffff !important; background-image: none !important; color: var(--ba-oranje-donker) !important; border: none !important; border-radius: var(--ba-radius-knop, 8px); font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase; padding: 12px 26px !important; } #s5textrotatecls_otr .uk-button:hover { background: #fff7f2 !important; background-image: none !important; color: var(--ba-oranje-donker) !important; } /* ################################################################ VERSIE 6.2: PROMOPANEEL HOOGTE-FIX ---------------------------------------------------------------- De ticker had een vaste hoogte (inline 248px) waardoor de knop onderaan werd afgeknipt. Hoogte nu automatisch meegroeiend, en de losse witregel (eerste
) boven de tekst verbergen. ################################################################ */ #s5textrotatecls_otr { height: auto !important; min-height: 250px; } #s5textrotatecls_otr p > br:first-child { display: none; } /* ################################################################ VERSIE 6.3: JUX-EVENTBLOK ALS BELEVINGSOVERZICHT ---------------------------------------------------------------- De automatische JUX EventOn-lijsten (module "Home BELEVINGSOVERZICHT (JUX - automatisch)", linkerkolom homepage) in dezelfde stijl als het handgemaakte Belevingsoverzicht: witte kaart, oranje datumblokjes, nette rijen. De module-inhoud is een .ba-jux wrapper met daarin {loadposition event/work/reizen}. ################################################################ */ /* witte kaart, zoals .ba-agenda */ .ba-jux { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 24px 22px; font-family: Lato, sans-serif; color: var(--ba-tekst); } .ba-jux .ba-agenda-kop { margin-bottom: 6px; justify-content: center; } .ba-jux .ba-agenda-sub { margin: 0 0 12px; } /* categoriekopjes (Opleidingen / Workshops / Reizen) */ .ba-jux h3.ba-jux-kop { font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase; color: var(--ba-oranje-donker); margin: 18px 0 4px; text-align: center; } .ba-jux h3.ba-jux-kop a { color: var(--ba-oranje-donker) !important; text-decoration: none; } .ba-jux h3.ba-jux-kop a:hover { color: var(--ba-oranje) !important; } /* JUX-eigen kaders/schaduwen uitschakelen */ .ba-jux .jux-event-item { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } .ba-jux [id="jux-eventon-event-sidebar"] { width: 100% !important; } .ba-jux [id="jux-eventon-event-sidebar"] ul { list-style: none; margin: 0; padding: 0; } .ba-jux .jux-event-item ul, .ba-jux .jux-event-item li { background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; margin: 0 !important; } /* rijen zoals .ba-rij */ .ba-jux .jux-event-item li { display: flex; align-items: center; gap: 10px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 60px; overflow: visible !important; padding: 9px 4px !important; border: none !important; border-bottom: 1px solid #f3ede8 !important; border-radius: var(--ba-radius-datum); transition: background .2s ease; } .ba-jux .jux-event-item li:last-child { border-bottom: none !important; } .ba-jux .jux-event-item li:hover { background: var(--ba-oranje-zacht); } .ba-jux .thumb-holder { flex-shrink: 0; margin: 0; } /* oranje datumblokje, zoals .ba-datum */ .ba-jux .event-date { width: 46px !important; min-width: 46px !important; min-height: 46px !important; background: var(--ba-oranje); color: #fff; border-radius: var(--ba-radius-datum); text-align: center; box-sizing: border-box; padding: 5px 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; } .ba-jux .event-date span, .ba-jux .event-date .month, .ba-jux .event-date .day { background: transparent !important; border: none !important; box-shadow: none !important; color: #fff !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ba-jux .event-date .month { font-size: 10px !important; font-weight: 700; text-transform: uppercase; line-height: 1.4; } .ba-jux .event-date .day { font-size: 15px !important; font-weight: 700; line-height: 1.2; } /* eventtitels: max 3 regels, dan ... */ .ba-jux .jux-event-item h4 { margin: 0; line-height: 1.4; flex: 1 1 auto; min-width: 0; } .ba-jux .jux-event-item h4 a { font-size: 12px !important; font-weight: 600; letter-spacing: .5px !important; text-transform: uppercase; color: var(--ba-tekst) !important; text-decoration: none; text-align: left !important; overflow-wrap: anywhere; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden !important; } .ba-jux .jux-event-item h4 a:hover { color: var(--ba-oranje-donker) !important; } /* lege opvulparagrafen verbergen */ .ba-jux > p:empty { display: none; } /* ################################################################ VERSIE 6.4: HIGHLIGHTS-KOP, JUX-FIXES, ACHTERGROND-START, KLANTERVARINGEN IN HUISSTIJL ################################################################ */ /* ---------- a. "Highlights" boven het promopaneel ---------- Tekst aanpassen? Verander het woord tussen de aanhalingstekens. */ #s5textrotatecls_otr::before { content: "Highlights"; display: block; text-align: center; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; opacity: .85; margin: 4px 0 2px; } /* ---------- b. JUX-Belevingsoverzicht: strak + hover ---------- */ /* grijze buitenkaart van de Page Builder-kolom uitschakelen */ .sppb-addon-content:has(.ba-jux) { background: transparent !important; padding: 0 !important; box-shadow: none !important; } /* hovereffect zoals de rest van de site (wint nu van de reset) */ .ba-jux .jux-event-item li:hover { background: var(--ba-oranje-zacht) !important; } .ba-jux .jux-event-item li { cursor: pointer; } /* ---------- c. Achtergrondfoto: bovenste 200px overslaan ---------- De foto schuift 200px boven de bovenrand van het scherm, zodat het (te lichte) begin van de foto nooit zichtbaar is. Meer of minder overslaan? Pas beide 200px-waarden aan. */ body::before { top: -200px !important; height: calc(100vh + 200px) !important; } /* ---------- d. Klantervaringen (Google-reviewwidget) ---------- */ /* voorbeeld-quotes verbergen; de echte Google-reviews blijven */ .ba-quotes .ba-quote { display: none; } /* reviewkaartjes in zacht oranje met huisstijl-radius */ .ba-quotes .es-review-background-container { background: var(--ba-oranje-zacht) !important; border-radius: var(--ba-radius) !important; box-shadow: none !important; border: none !important; } .ba-quotes .es-google-review { border-radius: var(--ba-radius) !important; } /* sterren in oranje (reviews en de grote koprij) */ .ba-quotes .es-rating-item-filled, .ba-quotes .es-rating-item-filled svg, .ba-quotes .es-rating-item-filled svg *, .ba-quotes .es-rating-stars-item-filled, .ba-quotes .es-rating-stars-item-filled svg, .ba-quotes .es-rating-stars-item-filled svg * { fill: var(--ba-oranje) !important; color: var(--ba-oranje) !important; } /* koprij: cijfer en aantal in donkerbruin, Lato */ .ba-quotes .es-rating-value, .ba-quotes .es-header-rating-reviews-count { color: var(--ba-tekst) !important; } .ba-quotes .es-header-rating * { font-family: Lato, sans-serif !important; } /* knop "Beoordeel ons op Google" in oranje */ .ba-quotes .es-button-base-container { background: var(--ba-oranje) !important; border-radius: var(--ba-radius-knop, 8px) !important; border: none !important; } .ba-quotes .es-button-base-container * { color: #fff !important; } /* reviewteksten en namen in huisstijl */ .ba-quotes .es-review-content, .ba-quotes .es-review-content * { color: var(--ba-tekst) !important; font-family: Lato, sans-serif !important; } .ba-quotes .es-review-author-name { color: var(--ba-tekst) !important; font-weight: 700 !important; font-family: Lato, sans-serif !important; } .ba-quotes .es-review-info-date { color: var(--ba-grijs-tekst) !important; opacity: .7; } .ba-quotes .es-text-shortener-control { color: var(--ba-oranje-donker) !important; font-weight: 600; } /* carrousel-bolletjes en pijlen in oranje */ .ba-quotes .es-bullets-control-item { background: var(--ba-oranje) !important; } .ba-quotes .es-carousel-arrow-control-container svg, .ba-quotes .es-carousel-arrow-control-container svg * { fill: var(--ba-oranje-donker) !important; } /* ################################################################ VERSIE 6.5: NIEUWE ACHTERGROND + UITLIJNING ################################################################ */ /* ---------- a. Nieuwe achtergrondfoto ---------- */ body::before { background-image: url("../../../images/barada2027bg.jpg") !important; } /* ---------- b. Kennisbank/Workshops: koppen altijd even hoog ---------- De subtekst links loopt over twee regels; door beide koppen dezelfde minimale hoogte te geven eindigen de kaarten weer op dezelfde lijn. */ .ba-kolomkop { min-height: 116px !important; } /* ---------- c. Intro-kaart vult zijn kolom ---------- De introgrid had twee vakken (400px + 200px); het tweede vak is leeg sinds de losse highlights-kaart is vervallen. Nu een vak dat de hele kolom vult, en de kaart is even hoog als het Belevingsoverzicht. */ .ba-introgrid { grid-template-columns: 1fr !important; height: 100%; } .sppb-addon-wrapper:has(.ba-introgrid), .sppb-addon-wrapper:has(.ba-introgrid) .clearfix, .sppb-addon-wrapper:has(.ba-introgrid) .sppb-addon, .sppb-addon:has(.ba-introgrid) .sppb-addon-content, .mod-custom:has(> .ba-introgrid) { height: 100%; } .ba-intro { width: 100% !important; max-width: 100% !important; height: 100% !important; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } /* ---------- d. Video op gelijke hoogte met de blogs-kaart ---------- */ .sppb-addon-wrapper:has(iframe[src*="vimeo"]), .sppb-addon-wrapper:has(iframe[src*="youtube"]) { justify-content: flex-start !important; } /* ################################################################ VERSIE 6.6: GLAZEN HEADER, ORANJE FACEBOOK, AGENDA BELEVINGSOVERZICHT MET ORANJE KOPBALK ################################################################ */ /* ---------- a. Header: glaseffect ---------- Normale stand: licht doorschijnend glas. Gescrold (sticky): witter glas met meer blur. */ /* Witter of juist doorschijnender? Verander alleen het laatste getal hieronder: 1 is helemaal wit, 0 is volledig doorzichtig. */ #sp-header, #sp-header:not(.header-sticky) { background: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(10px) saturate(1.4) !important; backdrop-filter: blur(10px) saturate(1.4) !important; box-shadow: 0 2px 14px rgba(69, 47, 34, 0.08) !important; } #sp-header.header-sticky { background: rgba(255, 255, 255, 0.86) !important; -webkit-backdrop-filter: blur(22px) saturate(1.6) !important; backdrop-filter: blur(22px) saturate(1.6) !important; box-shadow: 0 4px 22px rgba(69, 47, 34, 0.12) !important; } /* ---------- b. Facebook-icoon in oranje ---------- */ #sp-header #sp-social a, #sp-header:not(.header-sticky) #sp-social a, #sp-header.header-sticky #sp-social a { color: var(--ba-oranje) !important; } #sp-header #sp-social a:hover { color: var(--ba-oranje-donker) !important; } /* ---------- c. Agenda belevingsoverzicht: oranje kopbalk ---------- Zelfde opzet als de kaart "Workshops en opleidingen": oranje balk met witte kop + subregel, alles links uitgelijnd. */ .ba-jux { padding: 0 !important; overflow: hidden; } .ba-jux .ba-jux-header { background: var(--ba-oranje); color: #fff; padding: 20px 24px; min-height: 116px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .ba-jux .ba-jux-header h2 { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; line-height: 1.45 !important; text-transform: uppercase; color: #fff !important; margin: 0 !important; text-align: left; } .ba-jux .ba-jux-header small { font-size: 13px !important; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-align: left; line-height: 1.5; } .ba-jux .ba-jux-body { padding: 16px 22px 22px; } /* categoriekopjes links uitlijnen */ .ba-jux h3.ba-jux-kop { text-align: left !important; } /* vangnet: oude gecentreerde kop/sub (mocht die ooit terugkomen) */ .ba-jux > .ba-agenda-kop, .ba-jux > .ba-agenda-sub { display: none; } /* ################################################################ VERSIE 6.7: BLOGS MET KOPBALK + VIDEO ERONDER, RIJEN GELIJK, SLIDESHOW GROEIT MEE MET PROMOPANEEL ################################################################ */ /* ---------- a1. Kolom met blogs + video: nette flex-kolom ---------- Eerdere height:100%-regels van blogs en video botsten zodra ze samen in een kolom staan (inhoud liep over de CTA heen). */ .sppb-column-addons:has(.ba-blogs):has(.sppb-addon-video) { display: flex; flex-direction: column; gap: 30px; height: 100%; } .sppb-column-addons:has(.ba-blogs):has(.sppb-addon-video) > .sppb-addon-wrapper { height: auto !important; } .sppb-column-addons:has(.ba-blogs):has(.sppb-addon-video) > .sppb-addon-wrapper:has(.ba-blogs) { flex: 1 1 auto; min-height: 0; } .sppb-column-addons:has(.ba-blogs):has(.sppb-addon-video) > .sppb-addon-wrapper:has(.sppb-addon-video) { flex: 0 0 auto; } /* ---------- a2. Blogs-kaart met oranje kopbalk ---------- */ .ba-blogs { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; } .ba-blogs .ba-blogs-header { background: var(--ba-oranje); color: #fff; padding: 20px 24px; min-height: 116px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 6px; } .ba-blogs .ba-blogs-header h2 { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; line-height: 1.45 !important; text-transform: uppercase; color: #fff !important; margin: 0 !important; text-align: left; } .ba-blogs .ba-blogs-header small { font-size: 13px !important; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-align: left; line-height: 1.5; } .ba-blogs .ba-blogs-body { padding: 16px 22px 22px; flex: 1 1 auto; display: flex; flex-direction: column; } /* vangnet voor oude opmaak */ .ba-blogs > .ba-blogs-sub, .ba-blogs > h2 { display: none; } /* ---------- b. Agenda belevingsoverzicht vult zijn kolom ---------- */ .sppb-addon-wrapper:has(.ba-jux), .sppb-addon-wrapper:has(.ba-jux) .clearfix, .sppb-addon-wrapper:has(.ba-jux) .sppb-addon, .sppb-addon:has(.ba-jux) .sppb-addon-content { height: 100%; } .ba-jux { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; } .ba-jux .ba-jux-body { flex: 1 1 auto; } /* ---------- c. Slideshow even hoog als het promopaneel ---------- */ .sppb-addon-wrapper:has(.ba-slides), .sppb-addon-wrapper:has(.ba-slides) .clearfix, .sppb-addon-wrapper:has(.ba-slides) .sppb-addon, .sppb-addon:has(.ba-slides) .sppb-addon-content, .mod-custom:has(> .ba-slides), .sppb-column-addons:has(.ba-slides) { height: 100%; } .ba-slides { height: 100% !important; min-height: 430px; } /* ################################################################ VERSIE 6.8: CORRECTIE HOOGTEKETEN AGENDA BELEVINGSOVERZICHT De mod-custom-laag zat niet in de height-keten van 6.7b, waardoor de kaart niet meegroeide tot de onderkant van de video. ################################################################ */ .mod-custom:has(> .ba-jux) { height: 100%; } /* ################################################################ VERSIE 6.9: EVENT- EN BOEKINGSPAGINA'S IN DE NIEUWE STIJL ---------------------------------------------------------------- KLEUR PER PAGINA INSTELLEN: Standaard is alles oranje. Wil je een pagina in het oude roze? Ga in Joomla naar Menu's -> het menu-item -> tab "Paginaweergave" -> veld "Pagina klasse" en typ daar: ba-roze Alle accenten (koppen, lijntjes, knoppen, vlakken) op die pagina worden dan roze in plaats van oranje. Verder hoeft er niets te veranderen; deze opzet werkt op elke event- en boekingspagina. ################################################################ */ /* ---------- Accentkleur ---------- */ :root { --ba-accent: #f2793a; --ba-accent-donker: #d05f22; --ba-accent-zacht: #fdeee2; } body.ba-roze, .ba-roze { --ba-accent: #d1667b; --ba-accent-donker: #b44f63; --ba-accent-zacht: #f7e6ea; } /* ---------- Secties (voorheen tabbladen) altijd open ---------- De tabbladen zijn omgezet naar secties onder elkaar. Alle tekst staat nu in de pagina, wat veel beter is voor Google en AI, en scheelt de bezoeker klikken (zeker op mobiel). */ [data-rlta-element="panel"] { display: block !important; height: auto !important; overflow: visible !important; background: transparent !important; border: none !important; padding: 0 0 6px !important; } [data-rlta-element="button"] { pointer-events: none; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; width: auto !important; margin: 30px 0 12px !important; } [data-rlta-element="button"]::before { content: ""; display: block; width: 44px; height: 3px; background: var(--ba-accent); border-radius: 2px; margin-bottom: 10px; } [data-rlta-element="heading"] { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; line-height: 1.45 !important; text-transform: uppercase; color: var(--ba-accent-donker) !important; background: transparent !important; padding: 0 !important; border: none !important; margin: 0 !important; } [data-rlta-element="button"] [class*="icon"], [data-rlta-element="button"] svg { display: none !important; } /* ---------- Eventpagina: kaart en typografie ---------- */ .com-jux-eventon #sp-component .sp-column, body:has(#form-booking-event) #sp-component .sp-column { background: transparent !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; } #jux-event-detail { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 30px 34px; } #jux-event-detail .jux-event-title h1 { font-size: 26px !important; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ba-tekst); margin: 18px 0 8px; line-height: 1.35; } #jux-event-detail .jux-event-img img { border-radius: var(--ba-radius); width: 100%; height: auto; } #jux-event-detail .jux-event-icon { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 6px; font-size: 13.5px; color: var(--ba-tekst); } #jux-event-detail .jux-event-icon i { color: var(--ba-accent) !important; } #jux-event-detail p, #jux-event-detail li { font-size: 15.5px !important; line-height: 1.7 !important; color: var(--ba-tekst); } #jux-event-detail h2, #jux-event-detail .jux-event-descri h3:not([data-rlta-element]) { color: var(--ba-accent-donker) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 1.5px; text-transform: uppercase; margin: 22px 0 8px; } #jux-event-detail ul { padding-left: 22px; } /* ---------- Direct boeken (onderaan de eventpagina) ---------- */ .jux-booking { background: var(--ba-accent-zacht); border-radius: var(--ba-radius); padding: 24px 26px; margin-top: 26px; } .jux-booking::before { content: "Direct boeken"; display: block; font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ba-accent-donker); margin-bottom: 12px; } .jux-booking #item-form { display: flex; flex-direction: column; gap: 16px; } .jux-booking .jux-event-prices, .jux-booking .jux-total, .jux-booking .jux_prices { float: none !important; width: auto !important; margin: 0 !important; } .jux-booking .jux-event-prices { margin-bottom: 0 !important; } .jux-booking .clearfix { display: none !important; } .jux-booking .jux_prices { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .jux-booking .jux_prices label { width: 100%; margin: 0 0 2px !important; font-size: 14px !important; font-weight: 700; color: var(--ba-tekst); letter-spacing: .5px; } .jux-booking .jux_prices > span { font-size: 14px; color: var(--ba-tekst); opacity: .85; } /* aantalteller als nette min/plus-balk */ .jux-booking .jux-price1 { position: relative; display: inline-flex !important; align-items: center; background: #fff; border: 1px solid #e8d9cd; border-radius: 10px; overflow: hidden; height: 44px; } .jux-booking .jux-price1 .jux_price_quantity { border: none !important; border-radius: 0 !important; width: 46px !important; height: 42px !important; order: 2; background: transparent; text-align: center; font-weight: 700; font-size: 15px; } .jux-booking .jux-price1 .jux-fa, .jux-booking .jux-price1 .jux-fa-plus, .jux-booking .jux-price1 .jux-fa-minus { position: static !important; display: flex !important; align-items: center; justify-content: center; width: 40px; height: 42px; font-size: 15px; background: var(--ba-accent-zacht) !important; color: var(--ba-accent-donker) !important; border: none !important; cursor: pointer; transition: background .15s ease; } .jux-booking .jux-price1 .jux-fa:hover { background: var(--ba-accent) !important; color: #fff !important; } .jux-booking .jux-price1 .jux-fa-minus { order: 1; } .jux-booking .jux-price1 .jux-fa-plus { order: 3; } /* totaalregel + boekknop */ .jux-booking .jux-total { display: flex; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 700; color: var(--ba-tekst); margin-top: 4px !important; padding-top: 14px !important; border-top: 1px solid rgba(58, 8, 0, .12); } .jux-booking .jux-total .total-price, .jux-booking .jux-total span { color: var(--ba-accent-donker) !important; } .jux-booking .jux-total p:empty { display: none; } .jux-booking input.jux-billing { float: none !important; display: block; width: auto !important; margin: 0 !important; background: var(--ba-accent) !important; background-image: none !important; border: none !important; color: #fff !important; border-radius: var(--ba-radius-knop, 8px) !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase; padding: 14px 30px !important; cursor: pointer; transition: filter .2s ease; } .jux-booking input.jux-billing:hover { filter: brightness(1.08); } /* ---------- Zijkolom ---------- */ #sp-right .sp-module { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 24px 22px; margin: 0 0 30px !important; border: none !important; } #sp-right .sp-module:first-child { margin-top: 0 !important; } #sp-right .sp-module.nl-panel-red { background: var(--ba-accent) !important; padding: 0 !important; overflow: hidden; } #sp-right .sp-module.nl-panel-red .sp-module-content { background: transparent !important; border: none !important; margin: 0 !important; padding: 26px 22px !important; } #sp-right .sp-module.nl-panel-red .mod-custom { background: transparent !important; } #sp-right .sp-module > h3, #sp-right .sp-module .sp-module-title { font-size: 15px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase; color: var(--ba-accent-donker) !important; margin: 0 0 12px !important; text-align: left !important; } #sp-right .uk-panel-header .uk-panel-title { text-align: left !important; } #sp-right .sp-module ul { list-style: none; margin: 0; padding: 0; } #sp-right .sp-module .sp-module-content p { margin: 0 !important; } #sp-right .sp-module .sp-module-content a:not(.jmodedit):not(.uk-button):not(.btn), #sp-right .sp-module li a { display: block; padding: 9px 2px; font-size: 13.5px !important; font-weight: 600; letter-spacing: .5px; color: var(--ba-tekst) !important; text-decoration: none; border-bottom: 1px solid #f3ede8; transition: background .2s ease, color .2s ease; } #sp-right .sp-module .sp-module-content a:not(.jmodedit):not(.uk-button):not(.btn):hover, #sp-right .sp-module li a:hover { color: var(--ba-accent-donker) !important; background: var(--ba-accent-zacht); border-radius: 8px; } #sp-right .sp-module .sp-module-content > p:last-of-type a, #sp-right .sp-module li:last-child a { border-bottom: none; } /* oranje paneel in de zijkolom (Belevingsavond) */ #sp-right .nl-panel-red .sp-module-content a:not(.uk-button) { display: inline !important; border: none !important; padding: 0 !important; color: #fff !important; } #sp-right .nl-panel-red h3, #sp-right .nl-panel-red .uk-panel-title-n, #sp-right .nl-panel-red .uk-panel-title-n span { color: #fff !important; } #sp-right .nl-panel-red .tm-panel-subtitle { color: rgba(255, 255, 255, .88) !important; } #sp-right .nl-panel-red p { color: #fff !important; } #sp-right .nl-panel-red .uk-button { background: #fff !important; background-image: none !important; color: var(--ba-accent-donker) !important; border: none !important; border-radius: var(--ba-radius-knop, 8px) !important; font-weight: 700 !important; letter-spacing: 2px !important; padding: 12px 24px !important; } #sp-right .nl-panel-red .uk-button:hover { background: #fff7f2 !important; color: var(--ba-accent-donker) !important; } /* ---------- Boekingspagina (stap 2) ---------- */ #form-booking-event { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 30px 34px; } #form-booking-event .page-header { border: none !important; margin: 0 0 6px !important; padding: 0 !important; } #form-booking-event .page-header h1 { font-size: 24px !important; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ba-tekst); margin: 0; line-height: 1.35; } #form-booking-event .blue { background: transparent !important; margin: 26px 0 0 !important; padding: 0 !important; } #form-booking-event .blue::before { content: ""; display: block; width: 44px; height: 3px; background: var(--ba-accent); border-radius: 2px; margin-bottom: 10px; } #form-booking-event .blue h3 { font-size: 17px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase; color: var(--ba-accent-donker) !important; margin: 0 !important; } #form-booking-event hr { display: none !important; } #form-booking-event .control-group:has(.bottom_payment_hr) { display: none; } /* overzicht van de boeking */ #form-booking-event .infor-order { background: var(--ba-accent-zacht); border-radius: var(--ba-radius); padding: 18px 20px; margin-top: 14px; } #form-booking-event .infor-order .control-group { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid rgba(58, 8, 0, .08); margin: 0; } #form-booking-event .infor-order .control-group:last-child { border-bottom: none; } #form-booking-event .infor-order .control-label { width: 170px; flex: 0 0 auto; font-weight: 700; font-size: 14px; color: var(--ba-tekst); text-align: left !important; float: none !important; margin: 0 !important; } #form-booking-event .infor-order .controls { flex: 1 1 200px; margin: 0 !important; font-size: 14.5px; color: var(--ba-tekst); } #form-booking-event .infor-order .controls span { color: var(--ba-accent-donker) !important; font-weight: 700; } /* invulvelden */ #form-booking-event .jux-booking-information { margin-top: 14px; } #form-booking-event .jux-booking-information .control-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px !important; } #form-booking-event .jux-booking-information .control-label { width: 170px; flex: 0 0 auto; text-align: left !important; float: none !important; margin: 0 !important; font-size: 14px; font-weight: 600; color: var(--ba-tekst); } #form-booking-event .jux-booking-information .controls { flex: 1 1 260px; margin: 0 !important; } #form-booking-event .jux-booking-information input, #form-booking-event .jux-booking-information select, #form-booking-event .jux-booking-information textarea { width: 100% !important; height: 46px; box-sizing: border-box; border: 1px solid #e8d9cd !important; border-radius: 10px !important; padding: 10px 14px !important; font-size: 15px !important; background: #fff; color: var(--ba-tekst); box-shadow: none !important; } #form-booking-event .jux-booking-information input:focus, #form-booking-event .jux-booking-information textarea:focus { border-color: var(--ba-accent) !important; outline: none; } #form-booking-event .star { color: var(--ba-accent-donker); } /* voorwaarden en de knop onderaan */ #form-booking-event .form-horizontal { display: flex; flex-direction: column; } #form-booking-event .jux-terms { order: 90; margin: 18px 0 0; font-size: 14px; color: var(--ba-tekst); } #form-booking-event .jux-terms a { color: var(--ba-accent-donker) !important; font-weight: 600; text-decoration: underline; } #form-booking-event .jux-terms input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ba-accent); margin-right: 8px; vertical-align: -3px; } #form-booking-event .jux-bynow { order: 91; float: none !important; width: 100% !important; margin-top: 16px !important; } #form-booking-event .jux-bynow button, #form-booking-event .jux-bynow .btn, #form-booking-event .jux-bynow .btn-success { width: 100%; background: var(--ba-accent) !important; background-color: var(--ba-accent) !important; background-image: none !important; --bs-btn-bg: var(--ba-accent); --bs-btn-hover-bg: var(--ba-accent-donker); --bs-btn-border-color: var(--ba-accent); --bs-btn-hover-border-color: var(--ba-accent-donker); --bs-btn-active-bg: var(--ba-accent-donker); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; border: none !important; border-color: var(--ba-accent) !important; color: #fff !important; border-radius: var(--ba-radius-knop, 8px) !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase; padding: 15px 34px !important; font-size: 13px !important; cursor: pointer; } #form-booking-event .jux-bynow button:hover { filter: brightness(1.08); } /* ---------- Mobiel (80% van de bezoekers) ---------- */ @media (max-width: 767px) { #jux-event-detail { padding: 18px 18px 22px !important; border-radius: 14px; } #jux-event-detail .jux-event-title h1 { font-size: 22px !important; letter-spacing: 1.2px !important; line-height: 1.3 !important; margin: 14px 0 6px !important; } #jux-event-detail p, #jux-event-detail li { font-size: 16px !important; line-height: 1.75 !important; } #jux-event-detail h2, #jux-event-detail .jux-event-descri h3:not([data-rlta-element]) { font-size: 15px !important; margin: 20px 0 6px !important; } #jux-event-detail .jux-event-icon { font-size: 14px; gap: 6px 14px; } [data-rlta-element="heading"] { font-size: 17px !important; letter-spacing: 1.8px !important; } [data-rlta-element="button"] { margin: 26px 0 10px !important; } .jux-booking { padding: 18px 16px !important; border-radius: 14px; } .jux-booking input.jux-billing { width: 100% !important; text-align: center; padding: 16px 10px !important; } .jux-booking .jux-price1 { height: 48px; } .jux-booking .jux-price1 .jux_price_quantity { height: 46px !important; width: 52px !important; font-size: 16px !important; } .jux-booking .jux-price1 .jux-fa { width: 46px; height: 46px; font-size: 16px; } #sp-right .sp-module { padding: 20px 18px; margin-bottom: 20px !important; } #sp-right .sp-module .sp-module-content a:not(.jmodedit):not(.uk-button):not(.btn), #sp-right .sp-module li a { padding: 12px 2px; font-size: 15px !important; } #form-booking-event { padding: 18px 18px 22px !important; border-radius: 14px; } #form-booking-event .page-header h1 { font-size: 20px !important; letter-spacing: 1.2px; } #form-booking-event .infor-order .control-label, #form-booking-event .jux-booking-information .control-label { width: 100%; } #form-booking-event .jux-booking-information input, #form-booking-event .jux-booking-information select { height: 50px; font-size: 16px !important; } #form-booking-event .jux-bynow button { width: 100%; padding: 17px 10px !important; } } /* ################################################################ VERSIE 7.0: CORRECTIE KOP "DIRECT BOEKEN" Het besteloverzicht op de boekingspagina gebruikt dezelfde klasse .jux-booking; daar hoort die kop niet te staan. ################################################################ */ #form-booking-event .jux-booking::before { content: none !important; } /* ################################################################ VERSIE 7.1: KLEUR PER PAGINA - HIER AANPASSEN ---------------------------------------------------------------- Standaard is elke pagina ORANJE. Wil je een pagina of een heel menu-onderdeel in het oude ROZE? Er zijn twee manieren: MANIER 1 (per menu-onderdeel, hier in de CSS): Zoek het nummer van het menu-item op (in de adresbalk staat &Itemid=102, of vraag het even) en zet dat nummer in de lijst hieronder. Voorbeeld: menu-item 145 en 160 in het roze: body.itemid-145, body.itemid-160 { ... } Vul de nummers in bij de regel die begint met "body.itemid-". Meerdere nummers scheiden met een komma. MANIER 2 (per losse pagina, in Joomla zelf): Menu's -> het menu-item -> tab "Paginaweergave" -> veld "Pagina klasse" -> typ daar: ba-roze Beide manieren werken; kies wat je het handigst vindt. ################################################################ */ /* --- Zet hier de menu-nummers die roze moeten worden --- */ /* (voorbeeld staat uitgeschakeld; haal de comment-tekens weg en vul je eigen nummers in zodra je een pagina roze wilt maken) body.itemid-999, body.itemid-998 { --ba-accent: #d1667b; --ba-accent-donker: #b44f63; --ba-accent-zacht: #f7e6ea; } */ /* ################################################################ VERSIE 7.2: SECTIEKOPPEN ZONDER STREEP + VEELGESTELDE VRAGEN ---------------------------------------------------------------- BELANGRIJK - hoe je secties maakt in een event of artikel: Zet boven elk onderdeel een kop van het type "Kop 2" en geef die in de editor de klasse ba-sectie (of plak in de Code-weergave:

JOUW KOPTEKST

). De tekst eronder is dan gewoon zichtbaar - geen tabbladen meer. Dat leest prettiger, werkt beter op mobiel en zoekmachines en AI kunnen de hele tekst lezen (bij tabbladen bleef die verborgen). VEELGESTELDE VRAGEN toevoegen? Kopieer het blok uit een bestaande pagina en pas de vragen en antwoorden aan. De opmaak volgt vanzelf. ################################################################ */ /* streepje boven de koppen weg (oude tabblad-opmaak en boekingspagina) */ [data-rlta-element="button"]::before { content: none !important; } #form-booking-event .blue::before { content: none !important; } /* sectiekoppen in de tekst */ #jux-event-detail h2.ba-sectie { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; line-height: 1.45 !important; text-transform: uppercase; color: var(--ba-accent-donker) !important; margin: 34px 0 14px !important; padding: 0 0 10px !important; border-bottom: 2px solid var(--ba-accent-zacht); } #jux-event-detail h2.ba-sectie:first-child { margin-top: 6px !important; } @media (max-width: 767px) { #jux-event-detail h2.ba-sectie { font-size: 17px !important; letter-spacing: 1.8px !important; margin: 28px 0 12px !important; } .ba-faq-item { padding: 14px 16px; } .ba-faq-vraag { font-size: 16px !important; } .ba-faq-antwoord p { font-size: 16px !important; } } /* ################################################################ VERSIE 7.3: UITKLAPBARE VRAGEN + TABELLEN IN DE HUISSTIJL ---------------------------------------------------------------- De vragen zijn gemaakt met
en . Dat is gewone HTML: het werkt zonder extra software, is toegankelijk, en de antwoorden blijven leesbaar voor Google en AI (in tegenstelling tot tabbladen, waar tekst verborgen raakt). Een vraag toevoegen? Kopieer in de Code-weergave een blok:
Jouw vraag?

Jouw antwoord.

Zet open achter
Duur8 lesdagen
Investering1795,- BTW-vrij
LocatieDe Meern
ErkenningCRKBO
SUBREGELS ZIJMODULES: de tekst onder de koptitel staat hieronder in de CSS (zoek op "De nieuwste opleidingen"). Een module erbij? Voeg een regel toe met het module-nummer, bijvoorbeeld: #sp-right .sp-module:has(#mod-custom99) .mod-custom > h3::after { content: "Jouw subregel"; } ################################################################ */ /* ---------- a. Foto als sfeerbeeld met de titel eroverheen ---------- */ #jux-event-detail .jux-images-gallert { position: relative; } #jux-event-detail .jux-event-img { position: relative; border-radius: var(--ba-radius); overflow: hidden; } #jux-event-detail .jux-event-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 8, 0, 0) 35%, rgba(58, 8, 0, .72) 100%); pointer-events: none; } #jux-event-detail .jux-event-img img { display: block; width: 100%; height: 380px; object-fit: cover; border-radius: var(--ba-radius); } #jux-event-detail .jux-icon-description { position: relative; margin-top: -110px; z-index: 2; padding: 0 26px 0; } #jux-event-detail .jux-event-title h1 { color: #fff !important; text-shadow: 0 2px 12px rgba(58, 8, 0, .5); margin: 0 0 10px !important; } #jux-event-detail .jux-event-icon { color: #fff !important; text-shadow: 0 1px 8px rgba(58, 8, 0, .5); margin-bottom: 18px !important; } #jux-event-detail .jux-event-icon i { color: #fff !important; opacity: .9; } #jux-event-detail .jux-event-descri { background: #fff; border-radius: var(--ba-radius); position: relative; z-index: 2; padding: 4px 0 0; margin-top: 14px; } /* ---------- b. Kerngegevens-balk ---------- */ .ba-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 20px 0 4px; } .ba-feit { background: var(--ba-accent-zacht); border-radius: var(--ba-radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; } .ba-feit-label { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ba-accent-donker); opacity: .85; } .ba-feit-waarde { font-size: 15px; font-weight: 700; color: var(--ba-tekst); line-height: 1.3; } /* ---------- c. Opsommingen met vinkjes ---------- */ #jux-event-detail ul { list-style: none !important; padding-left: 0 !important; margin: 10px 0 16px !important; } #jux-event-detail ul li { position: relative; padding-left: 30px; margin-bottom: 8px; } #jux-event-detail ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ba-accent-zacht); box-shadow: inset 0 0 0 1.5px var(--ba-accent); } #jux-event-detail ul li::after { content: ""; position: absolute; left: 5px; top: 12px; width: 6px; height: 3px; border-left: 2px solid var(--ba-accent-donker); border-bottom: 2px solid var(--ba-accent-donker); transform: rotate(-45deg); } /* meer lucht tussen de secties */ #jux-event-detail h2.ba-sectie { margin-top: 40px !important; } #jux-event-detail h2.ba-sectie:first-of-type { margin-top: 26px !important; } /* ---------- d. Zijmodules met kopbalk ---------- */ #sp-right .sp-module { padding: 0 !important; overflow: hidden; position: relative; } #sp-right .sp-module > .sp-module-content { padding: 0 !important; } #sp-right .sp-module .mod-custom { padding: 0 !important; } /* beheerdersknop uit de flow */ #sp-right .sp-module > a.jmodedit { position: absolute !important; top: 4px; right: 4px; z-index: 5; margin: 0 !important; } /* witte module: gekleurde balk met witte letters */ #sp-right .sp-module > h3.sp-module-title, #sp-right .sp-module:not(.nl-panel-red) .mod-custom > h3 { background: var(--ba-accent) !important; margin: 0 !important; padding: 17px 22px 15px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase; line-height: 1.4 !important; text-align: left !important; display: block; } #sp-right .sp-module > h3.sp-module-title, #sp-right .sp-module > h3.sp-module-title span, #sp-right .sp-module:not(.nl-panel-red) .mod-custom > h3, #sp-right .sp-module:not(.nl-panel-red) .mod-custom > h3 span { color: #fff !important; } /* subregel onder de koptitel */ #sp-right .sp-module > h3.sp-module-title::after, #sp-right .sp-module:not(.nl-panel-red) .mod-custom > h3::after { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, .85); line-height: 1.45; } #sp-right .sp-module:has(#mod-custom57) .mod-custom > h3::after { content: "De nieuwste opleidingen op een rij"; } #sp-right .sp-module:has(#tip-42) > h3.sp-module-title::after { content: "Ontdek wat er allemaal mogelijk is"; } /* inhoud onder de balk */ #sp-right .sp-module:not(.nl-panel-red) .mod-custom > *:not(h3), #sp-right .sp-module > .sp-module-content > ul { padding-left: 22px; padding-right: 22px; } #sp-right .sp-module > .sp-module-content > ul { padding-top: 8px; padding-bottom: 10px; } #sp-right .sp-module:not(.nl-panel-red) .mod-custom > p:first-of-type { padding-top: 12px; } #sp-right .sp-module:not(.nl-panel-red) .mod-custom > p:last-of-type { padding-bottom: 14px; } #sp-right .sp-module:not(.nl-panel-red) .mod-custom p br { display: none; } #sp-right .sp-module p:empty { display: none; } /* gekleurd paneel: witte kop met gekleurde letters */ #sp-right .nl-panel-red .mod-custom > h3 { background: #fff !important; margin: 0 !important; padding: 17px 22px 4px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase; text-align: left !important; line-height: 1.4 !important; } #sp-right .nl-panel-red .mod-custom > h3 span { color: var(--ba-accent-donker) !important; } #sp-right .nl-panel-red .mod-custom > h4 { background: #fff !important; margin: 0 !important; padding: 0 22px 16px !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: 1.4px !important; text-transform: uppercase; text-align: left !important; color: var(--ba-accent-donker) !important; opacity: .8; line-height: 1.45 !important; } #sp-right .nl-panel-red .mod-custom > p { padding: 0 22px; text-align: left !important; } #sp-right .nl-panel-red .mod-custom > p:nth-of-type(1) { padding-top: 18px; } #sp-right .nl-panel-red .mod-custom > p:last-of-type { padding-bottom: 20px; } /* ---------- e. Mobiel: boekbalk onderaan + compactere hero ---------- */ @media (min-width: 768px) { .ba-sticky-boek { display: none; } } @media (max-width: 767px) { #jux-event-detail .jux-event-img img { height: 260px; } #jux-event-detail .jux-icon-description { margin-top: -90px; padding: 0 14px; } .ba-feiten { grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 2px; } .ba-feit { padding: 11px 12px; } .ba-feit-waarde { font-size: 14px; } body.com-jux-eventon { padding-bottom: 78px; } .ba-sticky-boek { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -4px 20px rgba(58, 8, 0, .12); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; } .ba-sticky-boek .ba-sticky-prijs { font-size: 15px; font-weight: 700; color: var(--ba-tekst); line-height: 1.2; flex: 0 0 auto; } .ba-sticky-boek .ba-sticky-prijs small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: .6; } .ba-sticky-boek a { flex: 1 1 auto; text-align: center; background: var(--ba-accent); color: #fff !important; text-decoration: none; border-radius: var(--ba-radius-knop, 8px); padding: 14px 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; } } /* ################################################################ VERSIE 7.5: CORRECTIE KOPBALK GEKLEURD PANEEL Een oudere regel gaf de inhoud van het paneel nog een marge, waardoor de witte kopbalk niet tot de rand liep. ################################################################ */ #sp-right .sp-module.nl-panel-red .sp-module-content { padding: 0 !important; } /* ################################################################ VERSIE 7.6: VASTE WITRUIMTES (VERTICAAL RITME) ---------------------------------------------------------------- Hiervoor verschilde de ruimte per plek (soms 8px, soms 14px, soms 22px, soms 40px). Nu heeft elke overgang een vaste maat, zodat de pagina rustig oogt hoe je hem ook vult: sectiekop 40px erboven, 16px eronder tussenkop h2 30px erboven, 10px eronder kopje h3 24px erboven, 8px eronder alinea 12px eronder opsomming 12px erboven, 18px eronder tabel 16px erboven, 20px eronder Wil je het luchtiger of compacter? Pas de getallen hieronder aan. ################################################################ */ #jux-event-detail .jux-event-descri > div > *:first-child { margin-top: 0 !important; } #jux-event-detail h2.ba-sectie { margin: 40px 0 16px !important; } #jux-event-detail h2.ba-sectie:first-of-type { margin-top: 30px !important; } #jux-event-detail h2:not(.ba-sectie) { margin: 30px 0 10px !important; } #jux-event-detail h3 { margin: 24px 0 8px !important; } #jux-event-detail p { margin: 0 0 12px !important; } #jux-event-detail ul { margin: 12px 0 18px !important; } #jux-event-detail ul li { margin-bottom: 8px !important; } #jux-event-detail ul li:last-child { margin-bottom: 0 !important; } #jux-event-detail table { margin: 16px 0 20px !important; } #jux-event-detail .ba-feiten { margin: 20px 0 8px !important; } #jux-event-detail .ba-faq { margin: 6px 0 0 !important; } #jux-event-detail .jux-booking { margin-top: 34px !important; } /* lege alinea's geven geen dubbele ruimte meer */ #jux-event-detail p:empty { display: none; } /* LET OP: hier stond een regel die alinea's met alleen een regeleinde verborg. Die verborg ook alinea's MET tekst (losse tekst telt niet mee voor ":only-child"). Weggehaald - lege alinea's haal je uit de tekst. */ /* ################################################################ VERSIE 7.7: ZIJMODULES + KNOPPENRIJ ONDER DE PRIJS ---------------------------------------------------------------- 1) ZIJMODULES (rechterkolom) Elke alinea krijgt dezelfde ruimte eronder (14px). Staat er een knop onder de tekst, dan komt daar 22px ruimte boven, zodat de knop nooit meer tegen de tekst aan plakt. Zet in de module een knop-alinea zo neer:

Reserveer je plek

2) KNOPPENRIJ ONDER DE PRIJS (belevings-/opleidingspagina's) Links "Boek nu" (oranje, 40%), rechts "Meer info" (wit met oranje rand) die WhatsApp opent. De knoppen worden neergezet door de module "Systeem - Meer info knop (WhatsApp)". Wil je het telefoonnummer of de tekst wijzigen? Dat staat in die module, niet in dit bestand. ################################################################ */ /* ---------- 1) Zijmodules: vaste witruimtes ---------- */ #sp-right .sp-module .sp-module-content p { margin: 0 0 14px !important; } #sp-right .sp-module .sp-module-content p:last-child { margin-bottom: 0 !important; } #sp-right .sp-module .sp-module-content p.ba-paneel-knop { margin-top: 22px !important; margin-bottom: 0 !important; } #sp-right .sp-module .sp-module-content .uk-button { margin-top: 0 !important; } #sp-right .sp-module .sp-module-content p:empty { display: none; } /* (zie 7.9.3: dezelfde regel verborg ook alinea's met tekst) */ /* ---------- 2) Knoppenrij: Boek nu + Meer info ---------- */ .ba-knoppenrij { display: flex !important; gap: 12px; align-items: stretch; flex-wrap: wrap; margin: 0 !important; } .ba-knoppenrij input.jux-billing { flex: 0 0 40% !important; width: 40% !important; max-width: 40% !important; min-height: 52px !important; padding: 0 14px !important; margin: 0 !important; line-height: 1.2 !important; font-size: 14px !important; transition: filter .2s ease, transform .15s ease !important; } .ba-knoppenrij input.jux-billing:hover { filter: brightness(1.08); transform: translateY(-2px); } .ba-knop-info { flex: 1 1 0 !important; min-height: 52px; display: flex !important; align-items: center; justify-content: center; padding: 0 14px; background: #fff !important; color: var(--ba-accent-donker) !important; border: 2px solid var(--ba-accent) !important; border-radius: var(--ba-radius-knop, 8px) !important; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; text-align: center; text-decoration: none !important; transition: background .2s ease, color .2s ease, transform .15s ease; } .ba-knop-info:hover, .ba-knop-info:focus { background: var(--ba-accent) !important; color: #fff !important; transform: translateY(-2px); text-decoration: none !important; } /* ---------- Mobiel: knoppen onder elkaar, volle breedte ---------- */ @media (max-width: 767px) { .ba-knoppenrij { flex-direction: column; gap: 10px; } .ba-knoppenrij input.jux-billing, .ba-knop-info { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; min-height: 54px; } } /* ---------- Hulpmodule zonder eigen weergave ---------- */ #sp-footer1 .ba-scripts, .sp-module.ba-scripts { display: none !important; } /* ################################################################ VERSIE 7.9: KLANTERVARINGEN IN ORANJE + GELIJKE WITRUIMTE ---------------------------------------------------------------- 1) De reviewkaartjes van de Google-widget worden oranje met witte letters, zoals de andere gekleurde blokken op de site. De koprij erboven (cijfer, sterren, knop) blijft licht - anders zou het een oranje vlak van boven tot onder worden. Wil je terug naar zacht oranje met bruine tekst? Verwijder dit hele blok; de opmaak van versie 6.4 pakt het dan weer op. 2) De CTA-banner had 26px lucht boven en 34px eronder, plus 15px extra boven de klantervaringen. Nu overal even veel: 50px. ################################################################ */ /* ---------- 1) Reviewkaartjes: oranje met witte letters ---------- */ .ba-quotes .es-review-background-container { background: var(--ba-oranje) !important; border-radius: var(--ba-radius) !important; border: none !important; box-shadow: 0 6px 18px rgba(58, 8, 0, .12) !important; } /* alle tekst in het kaartje wit */ .ba-quotes .es-review-background-container, .ba-quotes .es-review-background-container p, .ba-quotes .es-review-background-container span, .ba-quotes .es-review-background-container div, .ba-quotes .es-review-background-container a, .ba-quotes .es-review-background-container .es-review-content, .ba-quotes .es-review-background-container .es-review-content *, .ba-quotes .es-review-background-container .es-review-author-name { color: #fff !important; } /* datum en "Geplaatst op Google" iets zachter, maar wel wit */ .ba-quotes .es-review-background-container .es-review-info-date, .ba-quotes .es-review-background-container .es-review-source, .ba-quotes .es-review-background-container .es-review-source * { color: rgba(255, 255, 255, .8) !important; opacity: 1 !important; } /* "Lees meer" duidelijk aanklikbaar */ .ba-quotes .es-review-background-container .es-text-shortener-control { color: #fff !important; font-weight: 700 !important; text-decoration: underline !important; } /* sterren IN het kaartje wit (de koprij houdt oranje sterren) */ .ba-quotes .es-review-background-container .es-rating-item-filled, .ba-quotes .es-review-background-container .es-rating-item-filled svg, .ba-quotes .es-review-background-container .es-rating-item-filled svg *, .ba-quotes .es-review-background-container .es-rating-stars-item-filled, .ba-quotes .es-review-background-container .es-rating-stars-item-filled svg, .ba-quotes .es-review-background-container .es-rating-stars-item-filled svg * { fill: #fff !important; color: #fff !important; } /* het Google-logo en het vinkje rustiger op oranje */ .ba-quotes .es-review-background-container svg { opacity: .9; } /* profielrondje krijgt een dun wit randje zodat het bij het kaartje hoort */ .ba-quotes .es-review-background-container img, .ba-quotes .es-review-background-container .es-review-avatar { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); } /* ---------- 2) Gelijke witruimte rond de CTA-banner ---------- */ /* De blokken op de pagina staan 30px uit elkaar; de banner doet nu mee in datzelfde ritme. Meer lucht gewenst? Zet hier bijvoorbeeld margin: 20px 0 - dan wordt het 50px boven en onder. */ #sp-content-bottom .ba-cta, .ba-cta { margin: 0 !important; } #sp-main-body .sppb-section:has(.ba-quotes) { padding-top: 0 !important; } /* ---------- 3) Knop onder de kolomkaarten: lucht en geen streep ---------- Het laatste item hield zijn onderstreepje (de regel ".ba-item:last-of-type" keek naar het laatste , en dat is de knop zelf). Nu pakken we het item dat direct voor de knop staat. */ .ba-item:has(+ .ba-kolomknop) { border-bottom: none !important; } /* de ruimte zetten we ONDER het laatste item: de knop zelf wordt met "margin-top: auto" naar beneden geduwd (zodat beide kaarten even hoog eindigen), dus een marge boven de knop zou nooit aankomen. */ .ba-item:has(+ .ba-kolomknop) { margin-bottom: 26px !important; } /* ################################################################ MOBIEL: EEN VASTE TUSSENRUIMTE VAN 30px ---------------------------------------------------------------- Op de telefoon stapelen alle blokken onder elkaar. De Page Builder gaf elke rij en kolom zijn eigen marges mee, waardoor de ene overgang 0px was en de andere 60px. Hieronder halen we die marges weg en zetten we de ruimte op EEN plek: de tussenruimte (row-gap) van de stapel. Elke overgang is nu precies even groot. Luchtiger of compacter? Verander alle 30px hieronder in hetzelfde nieuwe getal. Diana kan gerust blokken toevoegen of weghalen - de ruimte klopt vanzelf. ################################################################ */ @media (max-width: 767px) { /* 1. alle eigen marges en padding van de Page Builder-lagen weg */ #sp-main-body .sppb-section, #sp-main-body .sppb-row, #sp-main-body .sppb-row-column, #sp-main-body [class*="sppb-col-"], #sp-main-body .sppb-column, #sp-main-body .sppb-column-addons, #sp-main-body .sppb-addon-wrapper { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* 2. de ruimte komt van de stapel zelf */ #sp-main-body .page-content, #sp-main-body .sppb-row, #sp-main-body .sppb-row-column, #sp-main-body .sppb-column-addons { display: flex !important; flex-direction: column !important; row-gap: 30px !important; } /* 3. bovenaan wat lucht onder het menu */ #sp-main-body .page-content > .sppb-section:first-child { padding-top: 10px !important; } /* 4. de CTA-banner haalt zijn ruimte uit de stapel, niet uit marges */ .ba-cta { margin: 0 !important; } } /* ################################################################ VERSIE 7.9.2: AFGERONDE HOEKEN OP DE VIDEO De introvideo had nog rechte hoeken terwijl alle kaarten eromheen afgerond zijn. De "overflow: hidden" zorgt ervoor dat ook de videospeler zelf netjes binnen de ronding blijft. ################################################################ */ .sppb-addon-video .sppb-video-block, .sppb-addon-video .sppb-embed-responsive { border-radius: var(--ba-radius) !important; overflow: hidden !important; } .sppb-addon-video iframe, .sppb-addon-video video { border-radius: var(--ba-radius) !important; } /* ################################################################ VERSIE 7.9.3: CORRECTIES ZIJKOLOM, TUSSENKOPJES EN VIDEO ################################################################ */ /* ---------- a. Subregel gekleurd paneel: geen roze zweem ---------- De balk was wit met opacity .8, waardoor het oranje van het paneel erdoorheen scheen. Nu een dekwitte balk met een zachte oranje letter. */ #sp-right .nl-panel-red .mod-custom > h4 { opacity: 1 !important; color: rgba(208, 95, 34, .75) !important; } /* ---------- b. Subregels in de kopbalken passen op een regel ---------- */ #sp-right .sp-module > h3.sp-module-title::after, #sp-right .sp-module:not(.nl-panel-red) .mod-custom > h3::after { letter-spacing: 1.2px; } #sp-right .sp-module:has(#tip-42) > h3.sp-module-title::after { content: "Bekijk wat er mogelijk is"; } /* ---------- c. Tussenkopjes in de opleidingsteksten ---------- De kopjes zijn wat groter, oranje en met extra lucht erboven, zodat in een oogopslag duidelijk is waar een nieuw onderdeel begint. Geen streepje of balkje ervoor - dat vond Kos niet mooi. De grote sectiekoppen (h2.ba-sectie) houden hun lijn eronder, zo blijft het verschil tussen hoofd- en tussenkop zichtbaar. */ #jux-event-detail h3, #jux-event-detail h2:not(.ba-sectie) { margin: 30px 0 12px !important; padding-left: 0 !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase; color: var(--ba-accent-donker) !important; line-height: 1.35 !important; } /* geen streepje of balkje voor de kopjes */ #jux-event-detail h3::before, #jux-event-detail h2:not(.ba-sectie)::before { content: none !important; } /* ---------- d. Video: afronding die de speler niet kan negeren ---------- De video komt van een andere website (Vimeo) en tekent zichzelf in een eigen laag. Die laag trekt zich niet altijd iets aan van gewone afgeronde hoeken; clip-path knipt hem wel af. */ .sppb-addon-video .sppb-video-block, .sppb-addon-video .sppb-embed-responsive { border-radius: var(--ba-radius) !important; overflow: hidden !important; clip-path: inset(0 round var(--ba-radius)) !important; contain: paint; } .sppb-addon-video iframe, .sppb-addon-video video { border-radius: var(--ba-radius) !important; } /* ################################################################ VERSIE 7.9.6: DESKTOP - EEN VASTE TUSSENRUIMTE VAN 30px ---------------------------------------------------------------- De Page Builder houdt de blokken al 30px uit elkaar. Sommige rijen hadden daarnaast nog eigen onderruimte meegekregen, waardoor die overgang 60px werd. Die eigen ruimte halen we weg, zodat er overal precies een tussenruimte overblijft. Luchtiger of compacter? De maat staat bij de Page Builder zelf (row-gap 30px); mobiel regel je in het blok "MOBIEL" hierboven. ################################################################ */ @media (min-width: 768px) { #sp-main-body .sppb-column-addons > .sppb-section { padding-top: 0 !important; padding-bottom: 0 !important; } } /* ################################################################ VERSIE 7.9.9: KOOPBLOK ONLINE TRAININGEN (J2STORE) ---------------------------------------------------------------- Een artikel dat als product verkocht wordt (Behandel als product = Ja) krijgt onderaan automatisch het koopblok van J2Store. Hieronder krijgt dat blok exact dezelfde opmaak als het boekingsblok op de belevingspagina's, zodat kopen overal hetzelfde voelt. De knop "Meer info" ernaast wordt neergezet door de module "Systeem - Meer info knop (WhatsApp)". ################################################################ */ .j2store-product-wrapper { background: var(--ba-oranje-zacht) !important; border-radius: var(--ba-radius) !important; padding: 26px 28px 28px !important; margin-top: 34px !important; } .j2store-product-wrapper::before { content: "Direct kopen"; display: block; font-size: 19px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ba-accent-donker); margin-bottom: 14px; } .j2store-product-wrapper .product-price-container { margin-bottom: 16px; } .j2store-product-wrapper .sale-price { font-size: 24px !important; font-weight: 700 !important; color: var(--ba-accent-donker) !important; } /* rij met aantal, koopknop en 'Meer info' */ .j2store-product-wrapper .j2store-add-to-cart { display: flex !important; gap: 12px; align-items: stretch; flex-wrap: wrap; } .j2store-product-wrapper .product-qty { flex: 0 0 84px; } .j2store-product-wrapper .product-qty input { height: 52px !important; text-align: center; background: #fff !important; border: 1px solid rgba(58, 8, 0, .18) !important; border-radius: var(--ba-radius-knop, 8px) !important; } .j2store-product-wrapper input.j2store-cart-button { flex: 0 0 40% !important; min-height: 52px !important; padding: 0 22px !important; background: var(--ba-accent) !important; background-image: none !important; border: none !important; color: #fff !important; border-radius: var(--ba-radius-knop, 8px) !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase; font-size: 14px !important; cursor: pointer; transition: filter .2s ease, transform .15s ease !important; } .j2store-product-wrapper input.j2store-cart-button:hover { filter: brightness(1.08); transform: translateY(-2px); } .j2store-product-wrapper .ba-knop-info { flex: 1 1 0 !important; } /* op mobiel alles onder elkaar */ @media (max-width: 767px) { .j2store-product-wrapper { padding: 22px 18px 24px !important; } .j2store-product-wrapper .j2store-add-to-cart { flex-direction: column; gap: 10px; } .j2store-product-wrapper .product-qty, .j2store-product-wrapper input.j2store-cart-button, .j2store-product-wrapper .ba-knop-info { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; } } /* ################################################################ VERSIE 8.0: FEITENBLOKJES ALS TABEL (makkelijker te vullen) ---------------------------------------------------------------- Zo ziet de tabel eruit in de tekstbewerker - elk vakje is apart aan te klikken, dus je typt nooit meer per ongeluk in het kopje: +----------------+---------------------+ | Wat kost het | 1075,- BTW-vrij | | Locatie | Online | | Inbegrepen | 1 belevingsdag | +----------------+---------------------+ In de HTML: ... De linkerkolom (th) wordt het kleine oranje kopje, de rechter (td) de dikke waarde eronder. Een rij erbij of eraf mag gewoon; de blokjes verdelen zich vanzelf over de breedte. ################################################################ */ table.ba-feiten { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: 12px !important; width: 100% !important; margin: 20px 0 4px !important; border: none !important; background: none !important; box-shadow: none !important; overflow: visible !important; border-radius: 0 !important; } table.ba-feiten tbody, table.ba-feiten thead { display: contents !important; background: none !important; } table.ba-feiten tr { display: flex !important; flex-direction: column; gap: 3px; background: var(--ba-accent-zacht) !important; border-radius: var(--ba-radius) !important; padding: 14px 16px !important; border: none !important; } table.ba-feiten th, table.ba-feiten td { display: block !important; border: none !important; padding: 0 !important; background: none !important; text-align: left !important; } table.ba-feiten th { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: var(--ba-accent-donker) !important; opacity: .85; } table.ba-feiten td { font-size: 15px !important; font-weight: 700 !important; color: var(--ba-tekst) !important; line-height: 1.3 !important; } /* op mobiel onder elkaar */ @media (max-width: 767px) { table.ba-feiten, div.ba-feiten { grid-template-columns: 1fr !important; } } /* ################################################################ VERSIE 8.0.1: FEITENTABEL OOK OP DE BELEVINGSPAGINA'S Gewone tabellen in een beleving krijgen een oranje kopbalk en hoofdletters. De feitentabel is geen gewone tabel, dus die regels moeten daar niet gelden. ################################################################ */ #jux-event-detail table.ba-feiten, .com-content-article table.ba-feiten { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: 12px !important; border: none !important; background: none !important; box-shadow: none !important; overflow: visible !important; } #jux-event-detail table.ba-feiten tr, .com-content-article table.ba-feiten tr { display: flex !important; flex-direction: column; gap: 3px; background: var(--ba-accent-zacht) !important; border-radius: var(--ba-radius) !important; padding: 14px 16px !important; border: none !important; } #jux-event-detail table.ba-feiten th, .com-content-article table.ba-feiten th { display: block !important; background: none !important; border: none !important; padding: 0 !important; text-align: left !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: var(--ba-accent-donker) !important; opacity: .85; line-height: 1.4 !important; } #jux-event-detail table.ba-feiten td, .com-content-article table.ba-feiten td { display: block !important; background: none !important; border: none !important; padding: 0 !important; text-align: left !important; font-size: 15px !important; font-weight: 700 !important; text-transform: none !important; color: var(--ba-tekst) !important; line-height: 1.3 !important; } #jux-event-detail table.ba-feiten tr:nth-child(odd), #jux-event-detail table.ba-feiten tr:nth-child(even) { background: var(--ba-accent-zacht) !important; } @media (max-width: 767px) { #jux-event-detail table.ba-feiten, .com-content-article table.ba-feiten { grid-template-columns: 1fr !important; } } /* ################################################################ VERSIE 8.0.2: FOTO BOVENAAN EEN ARTIKEL ALS BANNER Joomla toont de artikelfoto op ware grootte. Bij een staande of grote foto duwt dat de tekst ver naar beneden. Hieronder maken we er een banner van: volle breedte, vaste hoogte, en het beeld wordt netjes bijgesneden in plaats van uitgerekt. ################################################################ */ .article-details figure.item-image, .article-details figure.article-full-image, .com-content-article figure.item-image { float: none !important; width: 100% !important; margin: 0 0 24px !important; padding: 0 !important; } .article-details figure.item-image img, .article-details figure.article-full-image img, .com-content-article figure.item-image img { width: 100% !important; height: 320px !important; object-fit: cover !important; object-position: center 40% !important; border-radius: var(--ba-radius) !important; display: block !important; box-shadow: var(--ba-schaduw); } .article-details figure.item-image figcaption, .com-content-article figure.item-image figcaption { font-size: 13px; color: var(--ba-grijs-tekst); padding-top: 8px; } @media (max-width: 767px) { .article-details figure.item-image img, .article-details figure.article-full-image img, .com-content-article figure.item-image img { height: 200px !important; } } /* ################################################################ VERSIE 8.0.3: WITTE KAART OM EEN OPLEIDINGSARTIKEL Alleen voor artikelen met een feitenblok bovenaan (de opleidings- en trainingspagina's). Blogs en gewone artikelen raken we niet aan. ################################################################ */ #sp-component .article-details:has(.ba-feiten) { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 30px 34px 36px !important; } #sp-component .article-details:has(.ba-feiten) .page-header h1, #sp-component .article-details:has(.ba-feiten) h1 { margin-top: 8px !important; } @media (max-width: 767px) { #sp-component .article-details:has(.ba-feiten) { padding: 20px 18px 26px !important; } } /* ################################################################ VERSIE 8.1: OPMAAK VOOR TEKSTARTIKELEN ---------------------------------------------------------------- Gemaakt voor "Barada Zielsmissie en Hartverlangen", maar bruikbaar voor elk lang tekstartikel. HOE GEBRUIK JE DIT? Zet in de Code-weergave de hele tekst tussen
...
Dan komt de tekst op een witte kaart met een prettige leesbreedte. Verder kun je deze bouwstenen gebruiken:

KOP

een sectiekop

...

de openingszin, iets groter
  • ...
    • lijst met oranje bolletjes
    ...
    zacht vlak voor een uitleg
    ...
    blokje per onderwerp ################################################################ */ /* --- sectiekoppen werkten alleen op de event-pagina's; nu ook in gewone artikelen (dus ook op de online training) --- */ #sp-component .article-details h2.ba-sectie, #sp-component .com-content-article h2.ba-sectie, .ba-artikel h2.ba-sectie { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; line-height: 1.45 !important; text-transform: uppercase; color: var(--ba-accent-donker) !important; margin: 40px 0 16px !important; padding: 0 0 10px !important; border-bottom: 2px solid var(--ba-accent-zacht); } #sp-component .article-details h2.ba-sectie:first-child, .ba-artikel h2.ba-sectie:first-child { margin-top: 10px !important; } #sp-component .article-details h2.ba-sectie::before { content: none !important; } /* --- witte kaart om het artikel --- */ #sp-component .article-details:has(.ba-artikel) { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 30px 40px 44px !important; /* prettige leesbreedte: de kaart staat gecentreerd en wordt niet breder dan 900px, anders lopen de regels te ver door */ max-width: 900px; margin-left: auto !important; margin-right: auto !important; } #sp-component .article-details:has(.ba-artikel) .page-header h1, #sp-component .article-details:has(.ba-artikel) h1 { margin-top: 8px !important; } /* --- leesbare tekst --- */ #sp-component .ba-artikel { max-width: 100%; } #sp-component .ba-artikel p { font-size: var(--ba-fs-tekst) !important; line-height: 1.7 !important; margin: 0 0 18px !important; color: var(--ba-tekst) !important; } /* de openingszin: huisstijlmaat van een kop, maar niet in hoofdletters en gewoon donkerbruin - net als de introzinnen op de homepage */ #sp-component .ba-artikel p.ba-lead { font-size: var(--ba-fs-kop) !important; line-height: 1.6 !important; font-weight: 500; color: var(--ba-tekst) !important; margin-bottom: 8px !important; } /* --- lijst met oranje bolletjes --- */ #sp-component .ba-artikel ul.ba-lijst { list-style: none !important; padding: 0 !important; margin: 0 0 22px !important; } #sp-component .ba-artikel ul.ba-lijst li { position: relative; padding-left: 26px; margin: 0 0 10px; font-size: var(--ba-fs-tekst) !important; line-height: 1.7; color: var(--ba-tekst) !important; } #sp-component .ba-artikel ul.ba-lijst li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--ba-accent); } #sp-component .ba-artikel ul.ba-lijst-ruim li { margin-bottom: 15px; } /* --- zacht vlak voor een uitleg / een los onderwerp --- */ #sp-component .ba-uitleg, #sp-component .ba-concept { background: var(--ba-accent-zacht); border-radius: var(--ba-radius); padding: 20px 24px; margin: 4px 0 16px; } #sp-component .ba-uitleg p:last-child, #sp-component .ba-concept p:last-child { margin-bottom: 0 !important; } #sp-component .ba-concept strong { color: var(--ba-accent-donker); } @media (max-width: 767px) { #sp-component .article-details:has(.ba-artikel) { padding: 20px 18px 28px !important; max-width: 100%; } #sp-component .article-details h2.ba-sectie, .ba-artikel h2.ba-sectie { font-size: 17px !important; letter-spacing: 1.8px !important; margin: 30px 0 13px !important; } #sp-component .ba-artikel p { font-size: 16px !important; } #sp-component .ba-artikel p.ba-lead { font-size: 17px !important; } #sp-component .ba-artikel ul.ba-lijst li { font-size: 16px; } #sp-component .ba-uitleg, #sp-component .ba-concept { padding: 16px 18px; } } /* 8.1.1 - de template zet op menu-pagina's een lichtgrijs vlak achter de inhoud. Bij een tekstartikel zie je dan een grijze balk achter de witte kaart. Alleen daar halen we dat vlak weg. */ #sp-component .sp-column:has(.ba-artikel) { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; } /* ################################################################ VERSIE 8.3: EVENTPAGINA - KOP OP DE FOTO, FEITENTABEL, VRAGEN ################################################################ */ /* --- a. titel + datumregel altijd netjes binnen de foto --- Er is vaste ruimte voor drie regels titel. De titel plakt aan de ONDERkant van die ruimte, dus een korte titel staat op precies dezelfde hoogte als een lange. Wil je de tekst hoger of lager? Verander alleen de margin-top hieronder. */ #jux-event-detail .jux-event-title { display: flex !important; align-items: flex-end !important; min-height: 122px; } #jux-event-detail .jux-icon-description { margin-top: -188px !important; } #jux-event-detail .jux-event-img::after { background: linear-gradient(180deg, rgba(58,8,0,0) 26%, rgba(58,8,0,.78) 100%) !important; } /* --- b. de feitentabel is geen gewone tabel --- */ #jux-event-detail table.ba-feiten tr:first-child td, #jux-event-detail table.ba-feiten thead td, #jux-event-detail table.ba-feiten tr td { background: none !important; background-color: transparent !important; color: var(--ba-tekst) !important; text-transform: none !important; letter-spacing: 0 !important; } #jux-event-detail table.ba-feiten tr:nth-child(even) td { background: none !important; } #jux-event-detail table.ba-feiten th { background: none !important; color: var(--ba-accent-donker) !important; } /* --- c. vragen soepel open- en dichtvouwen --- */ details.ba-faq-item { interpolate-size: allow-keywords; } details.ba-faq-item[open] > .ba-faq-antwoord { animation: ba-faq-open .3s ease both; } @keyframes ba-faq-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @supports (interpolate-size: allow-keywords) { details.ba-faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .32s ease, content-visibility .32s allow-discrete; } details.ba-faq-item[open]::details-content { block-size: auto; } } @media (max-width: 767px) { #jux-event-detail .jux-event-title { min-height: 96px; } #jux-event-detail .jux-icon-description { margin-top: -166px !important; } } /* ################################################################ VERSIE 8.4: BOEKINGSPAGINA ---------------------------------------------------------------- Twee kolommen op de computer, een kolom op mobiel. Welke velden over de volle breedte lopen staat onderaan dit blok: nu zijn dat straatnaam, dieetwensen en elk veld met een groot tekstvak. Komt er een nieuw lang veld bij? Zet de veldnaam erbij in dat rijtje. ################################################################ */ /* --- oranje kopbalk boven elk blok --- */ #form-booking-event .blue { background: var(--ba-accent) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 2.2px !important; text-transform: uppercase !important; padding: 15px 22px !important; margin: 0 !important; border: none !important; border-radius: var(--ba-radius) var(--ba-radius) 0 0 !important; } #form-booking-event .blue h3 { margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: #fff !important; } #form-booking-event .blue::before, #form-booking-event .blue::after { content: none !important; } #form-booking-event hr { display: none !important; } /* --- witte kaart onder elke kopbalk --- */ #form-booking-event .infor-order, #form-booking-event .jux-booking-information { background: #fff !important; border: 1px solid var(--ba-accent-zacht) !important; border-top: none !important; border-radius: 0 0 var(--ba-radius) var(--ba-radius) !important; padding: 6px 22px 18px !important; margin: 0 0 26px !important; } #form-booking-event .infor-order .jux-booking { background: transparent !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } #form-booking-event .infor-order .jux-booking::before { content: none !important; } /* --- het overzicht van de opleiding --- */ #form-booking-event .infor-order .control-group { display: flex !important; gap: 16px; padding: 12px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--ba-accent-zacht); } #form-booking-event .infor-order .control-group:last-child { border-bottom: none; } #form-booking-event .infor-order .control-label { flex: 0 0 34%; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; font-weight: 700 !important; color: var(--ba-accent-donker) !important; } #form-booking-event .infor-order .controls { flex: 1 1 auto; margin: 0 !important; } /* --- het invulformulier: twee kolommen --- */ #form-booking-event .jux-booking-information { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 22px; padding-top: 18px !important; } #form-booking-event .jux-booking-information .control-group { display: block !important; margin: 0 0 14px !important; padding: 0 !important; border: none !important; } #form-booking-event .jux-booking-information .control-label { display: block !important; float: none !important; width: auto !important; margin: 0 0 6px !important; padding: 0 !important; text-align: left !important; font-weight: 700 !important; font-size: 14px !important; color: var(--ba-tekst) !important; } #form-booking-event .jux-booking-information .controls { margin-left: 0 !important; } #form-booking-event .jux-booking-information input, #form-booking-event .jux-booking-information select, #form-booking-event .jux-booking-information textarea { width: 100% !important; min-height: 46px; box-sizing: border-box; } /* deze velden lopen over de volle breedte */ #form-booking-event .jux-booking-information .control-group:has(input[id^="zj_address"]), #form-booking-event .jux-booking-information .control-group:has(input[id^="zj_dieetwensen"]), #form-booking-event .jux-booking-information .control-group:has(textarea) { grid-column: 1 / -1; } #form-booking-event .jux-terms { margin: 4px 0 18px !important; } #form-booking-event .jux-bynow input, #form-booking-event .jux-bynow .btn { width: 100% !important; } @media (max-width: 767px) { #form-booking-event .jux-booking-information { grid-template-columns: 1fr; } #form-booking-event .infor-order .control-group { display: block !important; } #form-booking-event .infor-order .control-label { margin-bottom: 3px !important; } #form-booking-event .blue { padding: 13px 16px !important; } #form-booking-event .infor-order, #form-booking-event .jux-booking-information { padding: 6px 16px 16px !important; } } /* ################################################################ VERSIE 8.5: BOEKINGSPAGINA - ORANJE KOP + TEKSTGROOTTE ---------------------------------------------------------------- De titel van de opleiding staat in een oranje balk met daaronder het woord OPLEIDING als kleine onderregel, net als bij de blokken op de homepage (grote witte kop + subregel op oranje). ################################################################ */ #form-booking-event .page-header { background: var(--ba-accent) !important; border: none !important; border-radius: var(--ba-radius) var(--ba-radius) 0 0 !important; padding: 20px 22px 7px !important; margin: 0 !important; } #form-booking-event .page-header h1 { color: #fff !important; margin: 0 !important; padding: 0 !important; font-size: 22px !important; line-height: 1.3 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; font-weight: 700 !important; } /* het eerste kopje (OPLEIDING) sluit aan op de titel erboven en wordt zo de onderregel van diezelfde oranje balk */ #form-booking-event form.form-horizontal > .blue:first-child { border-radius: 0 !important; padding: 0 22px 17px !important; color: rgba(255, 255, 255, .92) !important; } /* tekstgrootte gelijk aan de rest van de site */ #form-booking-event .infor-order .control-label, #form-booking-event .infor-order .controls, #form-booking-event .jux-booking-information .control-label, #form-booking-event .jux-terms, #form-booking-event .jux-terms a, #form-booking-event .jux-booking-information input, #form-booking-event .jux-booking-information select, #form-booking-event .jux-booking-information textarea { font-size: var(--ba-fs-tekst) !important; } @media (max-width: 767px) { #form-booking-event .page-header { padding: 16px 16px 6px !important; } #form-booking-event .page-header h1 { font-size: 18px !important; letter-spacing: 1.2px !important; } #form-booking-event form.form-horizontal > .blue:first-child { padding: 0 16px 14px !important; } } /* ################################################################ VERSIE 8.6: WINKELWAGEN EN AFREKENEN (J2STORE) ---------------------------------------------------------------- J2Store levert standaard Bootstrap-knoppen in vier kleuren en kale tabellen. Hieronder wordt dat teruggebracht tot de huisstijl: een oranje knop voor de hoofdactie (afrekenen, verder), witte knoppen met oranje rand voor de rest. ################################################################ */ /* --- kopjes --- */ #sp-component .j2store h3 { font-size: 19px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--ba-accent-donker) !important; margin: 28px 0 14px !important; padding: 0 0 10px !important; border-bottom: 2px solid var(--ba-accent-zacht) !important; } /* de balken op de afrekenpagina (waren grijs) */ #sp-component .j2store .checkout-heading { background: var(--ba-accent) !important; color: #fff !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 2.2px !important; text-transform: uppercase !important; padding: 14px 20px !important; margin: 22px 0 18px !important; border: none !important; border-radius: var(--ba-radius) !important; } #sp-component .j2store .checkout-heading span, #sp-component .j2store .checkout-heading a { color: #fff !important; font-size: inherit !important; letter-spacing: inherit !important; } /* --- tabellen als zachte kaart --- */ #sp-component .j2store table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid var(--ba-accent-zacht) !important; border-radius: var(--ba-radius) !important; overflow: hidden !important; margin: 0 0 18px !important; background: #fff !important; } #sp-component .j2store table th { background: var(--ba-accent) !important; color: #fff !important; font-size: 12px !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; font-weight: 700 !important; padding: 13px 16px !important; border: none !important; text-align: left !important; } #sp-component .j2store table td { padding: 14px 16px !important; border: none !important; border-top: 1px solid var(--ba-accent-zacht) !important; color: var(--ba-tekst) !important; font-size: var(--ba-fs-tekst) !important; vertical-align: middle !important; background: transparent !important; } #sp-component .j2store table tr:first-child td { border-top: none !important; } #sp-component .j2store table td input[type="text"] { width: 78px !important; text-align: center; display: inline-block !important; } /* --- de totalen onderaan de winkelwagen --- */ #sp-component .j2store .cart-footer th { background: transparent !important; color: var(--ba-accent-donker) !important; text-align: right !important; font-size: var(--ba-fs-tekst) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 700 !important; border-top: 1px solid var(--ba-accent-zacht) !important; padding: 14px 16px !important; } #sp-component .j2store .cart-footer tr:first-child th, #sp-component .j2store .cart-footer tr:first-child td { border-top: none !important; } #sp-component .j2store .cart-footer tr:last-child th, #sp-component .j2store .cart-footer tr:last-child td { background: var(--ba-accent-zacht) !important; font-size: 19px !important; font-weight: 700 !important; color: var(--ba-accent-donker) !important; } /* --- het formulier op de afrekenpagina --- Let op: alleen op de AFREKENpagina (.j2store.checkout). De winkelwagen gebruikt dezelfde .span6 maar mag geen raster worden, anders komt het kopje "Winkelwagen totalen" naast de tabel te staan in plaats van erboven. */ #sp-component .j2store.checkout .span6 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 22px; } /* J2Store zet regeleindes tussen de velden; die zouden in een raster een leeg vakje opeisen */ #sp-component .j2store.checkout .span6 > br { display: none !important; } #sp-component .j2store.checkout .span6 > .control-group { margin: 0 0 14px !important; } #sp-component .j2store.checkout .span6 > .control-group .controls { margin: 0 !important; } #sp-component .j2store .control-label { display: flex !important; align-items: baseline; gap: 4px; flex-wrap: wrap; margin: 0 0 6px !important; font-weight: 700 !important; font-size: 15px !important; color: var(--ba-tekst) !important; } #sp-component .j2store .control-label label { margin: 0 !important; order: 1; font-weight: inherit !important; } #sp-component .j2store .control-label .j2store_field_required { order: 2; color: var(--ba-roze) !important; } #sp-component .j2store input[type="text"], #sp-component .j2store input[type="email"], #sp-component .j2store input[type="tel"], #sp-component .j2store input[type="password"], #sp-component .j2store select, #sp-component .j2store textarea { width: 100% !important; min-height: 46px; box-sizing: border-box; font-size: var(--ba-fs-tekst) !important; } /* --- knoppen --- */ #sp-component .j2store .btn, #sp-component .j2store button.btn, #sp-component .j2store input.btn { border-radius: var(--ba-radius-knop) !important; font-size: 14px !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; font-weight: 700 !important; padding: 13px 24px !important; border: 2px solid var(--ba-accent) !important; box-shadow: none !important; line-height: 1.2 !important; background: #fff !important; color: var(--ba-accent-donker) !important; text-shadow: none !important; height: auto !important; } #sp-component .j2store .btn:hover { background: var(--ba-accent-zacht) !important; } /* de hoofdactie: oranje */ #sp-component .j2store .btn-success, #sp-component .j2store.checkout .btn-primary { background: var(--ba-accent) !important; color: #fff !important; border-color: var(--ba-accent) !important; } #sp-component .j2store .btn-success:hover, #sp-component .j2store.checkout .btn-primary:hover { background: var(--ba-accent-donker) !important; border-color: var(--ba-accent-donker) !important; } #sp-component .j2store input.btn { margin: 0 8px 10px 0 !important; } /* het kruisje om iets uit de winkelwagen te halen */ #sp-component .j2store a.j2store-remove, #sp-component .j2store a.btn-danger { background: transparent !important; border: none !important; color: var(--ba-accent-donker) !important; padding: 2px 6px !important; opacity: .55; width: auto !important; font-size: 20px !important; letter-spacing: 0 !important; } #sp-component .j2store a.j2store-remove::before { content: "\00D7"; line-height: 1; } #sp-component .j2store a.j2store-remove:hover { opacity: 1; background: transparent !important; } @media (max-width: 767px) { #sp-component .j2store.checkout .span6 { grid-template-columns: 1fr; } #sp-component .j2store .btn { width: 100% !important; font-size: 13px !important; letter-spacing: 1px !important; padding: 13px 12px !important; } #sp-component .j2store input.btn { margin: 0 0 10px !important; } #sp-component .j2store table th, #sp-component .j2store table td { padding: 11px 10px !important; font-size: 15px !important; } #sp-component .j2store table th { font-size: 11px !important; letter-spacing: 1px !important; } #sp-component .j2store .cart-footer th { font-size: 15px !important; } #sp-component .j2store .cart-footer tr:last-child th, #sp-component .j2store .cart-footer tr:last-child td { font-size: 17px !important; } #sp-component .j2store table td input[type="text"] { width: 62px !important; } /* de winkelwagen onder elkaar: anders valt de kolom met het bedrag buiten beeld */ #sp-component .j2store .j2store-cart-table thead { display: none !important; } #sp-component .j2store .j2store-cart-table, #sp-component .j2store .j2store-cart-table tbody, #sp-component .j2store .j2store-cart-table tr, #sp-component .j2store .j2store-cart-table td { display: block !important; width: 100% !important; } #sp-component .j2store .j2store-cart-table tr { border-top: 1px solid var(--ba-accent-zacht) !important; padding: 12px 0 !important; } #sp-component .j2store .j2store-cart-table tr:first-child { border-top: none !important; } #sp-component .j2store .j2store-cart-table td { border-top: none !important; padding: 3px 14px !important; text-align: left !important; } #sp-component .j2store .j2store-cart-table td:last-child { font-weight: 700 !important; color: var(--ba-accent-donker) !important; font-size: 17px !important; padding-top: 8px !important; } } /* 8.6.2 - het kruisje naast het aantalveld in plaats van eronder */ #sp-component .j2store .j2store-cart-table td .product-qty { display: inline-block !important; vertical-align: middle !important; margin: 0 !important; } #sp-component .j2store .j2store-cart-table td .product-qty input[type="text"] { display: inline-block !important; margin: 0 !important; vertical-align: middle !important; float: none !important; } #sp-component .j2store .j2store-cart-table td a.j2store-remove { vertical-align: middle !important; margin-left: 8px !important; } /* 8.6.3 - J2Commerce v4 gebruikt een number-veld voor het aantal */ #sp-component .j2store table td input[type="number"] { width: 78px !important; text-align: center; display: inline-block !important; margin: 0 !important; vertical-align: middle !important; float: none !important; } #sp-component .j2store input[type="number"] { min-height: 46px; box-sizing: border-box; font-size: var(--ba-fs-tekst) !important; } @media (max-width: 767px) { #sp-component .j2store table td input[type="number"] { width: 62px !important; } } /* ################################################################ VERSIE 8.7-a: KLANTERVARINGEN ALS GLAS ---------------------------------------------------------------- De kaartjes waren massief oranje met witte letters. Dat drukte zwaar op de pagina. Nu zijn ze doorschijnend: wit met een vleugje oranje, met een vervaagde achtergrond erachter (glaseffect) en de gewone donkerbruine tekst. In de hoek staat een groot aanhalingsteken - geen plaatje maar een letterteken, dus het is altijd scherp en kost geen laadtijd. Minder of meer glas? Pas de twee getallen in de eerste regel background aan: hoger is dekkender. ################################################################ */ .ba-quotes .es-review-background-container { position: relative !important; background: linear-gradient(150deg, rgba(255,255,255,.62), rgba(253,238,226,.46)) !important; -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35); border: 1px solid rgba(255,255,255,.6) !important; border-radius: var(--ba-radius) !important; box-shadow: 0 8px 26px rgba(58, 8, 0, .10) !important; overflow: hidden !important; } .ba-quotes .es-review-background-container::before { content: "\201C"; position: absolute; top: -26px; right: 12px; font-family: Georgia, "Times New Roman", serif; font-size: 96px; line-height: 1; color: var(--ba-oranje); opacity: .18; pointer-events: none; } /* tekst weer donkerbruin in plaats van wit */ .ba-quotes .es-review-background-container, .ba-quotes .es-review-background-container p, .ba-quotes .es-review-background-container span, .ba-quotes .es-review-background-container div, .ba-quotes .es-review-background-container a, .ba-quotes .es-review-background-container .es-review-content, .ba-quotes .es-review-background-container .es-review-content *, .ba-quotes .es-review-background-container .es-review-author-name { color: var(--ba-tekst) !important; } .ba-quotes .es-review-background-container .es-review-author-name { font-weight: 700 !important; } .ba-quotes .es-review-background-container .es-review-info-date, .ba-quotes .es-review-background-container .es-review-source, .ba-quotes .es-review-background-container .es-review-source * { color: var(--ba-grijs-tekst) !important; opacity: .7 !important; } .ba-quotes .es-review-background-container .es-text-shortener-control { color: var(--ba-oranje-donker) !important; font-weight: 700 !important; text-decoration: underline !important; } /* sterren in het kaartje weer oranje */ .ba-quotes .es-review-background-container .es-rating-item-filled, .ba-quotes .es-review-background-container .es-rating-item-filled svg, .ba-quotes .es-review-background-container .es-rating-item-filled svg *, .ba-quotes .es-review-background-container .es-rating-stars-item-filled, .ba-quotes .es-review-background-container .es-rating-stars-item-filled svg, .ba-quotes .es-review-background-container .es-rating-stars-item-filled svg * { color: var(--ba-oranje) !important; fill: var(--ba-oranje) !important; } /* ################################################################ VERSIE 8.7-b: CTA-BANNER NINE STAR KI KARAKTER ---------------------------------------------------------------- Hoort bij de module "Home - CTA Nine Star Ki". De HTML staat daar; hieronder alleen de opmaak. Zelfde glaseffect als de klantervaringen, met een serif-kop en een pilvormige knop. Tekst aanpassen doe je in de module, niet hier. ################################################################ */ .ba-nsk-cta { position: relative; overflow: hidden; padding: 40px 38px 42px; border-radius: var(--ba-radius); background: linear-gradient(150deg, rgba(255,255,255,.66), rgba(253,238,226,.5)); -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); border: 1px solid rgba(255,255,255,.62); box-shadow: 0 10px 30px rgba(58, 8, 0, .10); text-align: center; } /* zachte oranje gloed rechtsboven, puur decoratief */ .ba-nsk-cta::after { content: ""; position: absolute; top: -70px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(242,121,58,.22), rgba(242,121,58,0) 70%); pointer-events: none; } .ba-nsk-cta > * { position: relative; z-index: 1; } .ba-nsk-cta .ba-nsk-boven { margin: 0 0 10px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 3px !important; text-transform: uppercase; color: var(--ba-oranje-donker) !important; } .ba-nsk-cta h2 { margin: 0 0 14px !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 32px !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ba-tekst) !important; } .ba-nsk-cta .ba-nsk-tekst { max-width: 560px; margin: 0 auto 26px !important; font-size: var(--ba-fs-tekst) !important; line-height: 1.7 !important; color: var(--ba-tekst) !important; } .ba-nsk-cta .ba-nsk-knop { display: inline-block; padding: 15px 38px; border-radius: 999px; background: var(--ba-oranje); color: #fff !important; font-size: 14px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none !important; box-shadow: 0 6px 18px rgba(242, 121, 58, .34); transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } .ba-nsk-cta .ba-nsk-knop:hover, .ba-nsk-cta .ba-nsk-knop:focus { background: var(--ba-oranje-donker); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(242, 121, 58, .42); } @media (prefers-reduced-motion: reduce) { .ba-nsk-cta .ba-nsk-knop { transition: none; } .ba-nsk-cta .ba-nsk-knop:hover { transform: none; } } @media (max-width: 767px) { .ba-nsk-cta { padding: 30px 20px 32px; } .ba-nsk-cta h2 { font-size: 25px !important; } .ba-nsk-cta .ba-nsk-knop { display: block; padding: 15px 20px; } } /* ################################################################ 8.8 KLANTERVARINGEN + NINE STAR KI-BANNER IN EEN BLOK ---------------------------------------------------------------- De module Klantervaringen (id 219) bevat een omhulsel .ba-ervaringen-rij met daarin .ba-nsk-cta en .ba-quotes. Desktop: twee kolommen naast elkaar, even hoog. Mobiel (tot 991px): onder elkaar, eerst de reviews, dan de banner, zodat de uitnodiging na het vertrouwen komt. ################################################################ */ #sp-component .ba-ervaringen-rij, .ba-ervaringen-rij { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 34px; align-items: stretch; } .ba-ervaringen-rij > .ba-nsk-cta { margin: 0 !important; width: auto !important; max-width: none !important; display: flex; flex-direction: column; justify-content: center; padding: 44px 36px !important; background: linear-gradient(150deg, rgba(255,255,255,.80), rgba(253,238,226,.64)) !important; } .ba-ervaringen-rij > .ba-quotes { margin: 0 !important; min-width: 0; } @media (max-width: 991px) { #sp-component .ba-ervaringen-rij, .ba-ervaringen-rij { grid-template-columns: 1fr; gap: 26px; } .ba-ervaringen-rij > .ba-quotes { order: 1; } .ba-ervaringen-rij > .ba-nsk-cta { order: 2; padding: 34px 24px !important; } } /* ################################################################ 8.9 AGENDAKNOP EN BLOGKOPLINK ---------------------------------------------------------------- .ba-jux-knopbalk knop onderaan de agendakaart (module 108). .ba-kop-link Alle blogs in de oranje kopbalk (module 271), met .ba-pijl die 6px opzij schuift bij hover. Op mobiel zakt de koplink onder de tekst in de balk. ################################################################ */ .ba-jux-body { display: flex; flex-direction: column; } .ba-jux-knopbalk { margin-top: auto; padding-top: 26px; text-align: center; } .ba-blogs-header { position: relative; } .ba-blogs-header .ba-kop-link { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 9px; color: #fff !important; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none !important; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.45); } .ba-blogs-header .ba-kop-link .ba-pijl { display: inline-block; transition: transform .22s ease; } .ba-blogs-header .ba-kop-link:hover, .ba-blogs-header .ba-kop-link:focus-visible { border-bottom-color: #fff; } .ba-blogs-header .ba-kop-link:hover .ba-pijl, .ba-blogs-header .ba-kop-link:focus-visible .ba-pijl { transform: translateX(6px); } .ba-blogs .ba-blogs-body { padding-bottom: 22px !important; } @media (max-width: 767px) { .ba-blogs-header .ba-kop-link { position: static; transform: none; margin-top: 12px; } } @media (prefers-reduced-motion: reduce) { .ba-blogs-header .ba-kop-link .ba-pijl { transition: none; } } /* ################################################################ 8.10 KOLOMKAARTEN EVEN HOOG (.ba-kolom) ---------------------------------------------------------------- De witte kaart vulde zijn kolom niet, dus de kortste lijst eindigde hoger dan de langste. De hele keten (Page Builder addon > module > kaart) krijgt nu hoogte 100%, en de knop wordt met margin-top auto naar de onderkant geduwd. ################################################################ */ .sppb-addon-wrapper:has(.ba-kolom) .clearfix, .sppb-addon-wrapper:has(.ba-kolom) .sppb-addon, .sppb-addon-wrapper:has(.ba-kolom) .sppb-addon-content, .sppb-addon-wrapper:has(.ba-kolom) .mod-custom, .sppb-addon-wrapper:has(.ba-kolom) .ba-kolom { height: 100%; } .ba-kolom { display: flex; flex-direction: column; } .ba-kolom .ba-kolominhoud { flex: 1 1 auto; } .ba-kolom .ba-kolominhoud .ba-kolomknop { margin-top: auto !important; } /* ################################################################ 8.11 TYPOGRAFIE NINE STAR KI-BANNER IN HUISSTIJL ---------------------------------------------------------------- Alles met #sp-component ervoor, anders winnen de algemene regels (#sp-component h2 en #sp-component p) met !important. ################################################################ */ #sp-component .ba-nsk-cta h2, .ba-nsk-cta h2 { font-family: Lato, Helvetica, Arial, sans-serif !important; font-size: 21px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; line-height: 1.35 !important; margin: 0 0 16px !important; } #sp-component .ba-nsk-cta .ba-nsk-boven, .ba-nsk-cta .ba-nsk-boven { font-size: 12px !important; letter-spacing: 2.5px !important; margin: 0 0 10px !important; } #sp-component .ba-nsk-cta .ba-nsk-knop, .ba-nsk-cta .ba-nsk-knop { border-radius: 6px !important; font-size: 12px !important; letter-spacing: 2px !important; padding: 13px 30px !important; } /* ################################################################ 8.12 TYPOGRAFIE KLANTERVARINGEN (Elfsight) ---------------------------------------------------------------- LET OP: Elfsight geeft zijn elementen automatisch gegenereerde klassenamen (sc-hash). Daarom mikken we op het herkenbare deel van de naam. Na een grote update van de widget kan dit stuk opnieuw afgesteld moeten worden. ################################################################ */ .ba-quotes [class*="ShortenedTextComponent"] { font-size: 15px !important; line-height: 1.5 !important; display: -webkit-box !important; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden !important; } .ba-quotes [class*="AuthorName"] { font-size: 14.5px !important; } .ba-quotes .es-review-background-container { padding: 18px !important; } .ba-quotes [class*="RatingValue__Container"] { font-size: 22px !important; } /* kop gecentreerd en de Google-knop naast de sterren */ .ba-quotes h2 { text-align: center !important; } .ba-quotes [class*="HeaderContainer__Inner"] { flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 20px !important; flex-wrap: wrap; } .ba-quotes [class*="HeaderWriteReviewButton__Component"] { margin: 0 !important; width: auto !important; flex: 0 0 auto !important; } .ba-quotes [class*="ButtonBase__Ellipsis"] { font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 2px !important; } /* ================================================================ v8.16 (02-09-2026) — PAGINA NINE STAR KI KARAKTERTEST ---------------------------------------------------------------- Sfeerbeeld met de kop en een knop erover, de drie elementen als kaartjes naast elkaar, een vervolgblok onder de rekentool en een meelopende knop op mobiel. Uitsluitend opmaak. ================================================================ */ /* ---- sfeerbeeld met tekst erover ---- */ .ba-nsk-hero { position: relative; border-radius: 6px; overflow: hidden; margin: 0 0 28px; } .ba-nsk-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 42%; margin: 0; border-radius: 0; } .ba-nsk-hero-tekst { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 34px 30px; background: linear-gradient(to top, rgba(58,8,0,.80) 0%, rgba(58,8,0,.44) 55%, rgba(58,8,0,0) 100%); } .ba-nsk-hero-boven { display: block; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #fdeee2; margin: 0 0 8px; } #sp-component .ba-nsk-hero h2, .ba-nsk-hero h2 { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #fff !important; margin: 0 0 20px; line-height: 1.25; text-shadow: 0 2px 14px rgba(58,8,0,.45); } /* ---- de knop die naar de rekentool springt ---- */ .ba-nsk-actieknop { display: inline-block; background: #f2793a; color: #fff !important; border-radius: 6px; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 13px 30px; text-decoration: none !important; box-shadow: 0 6px 18px rgba(242,121,58,.32); transition: background-color .2s ease, transform .2s ease; } .ba-nsk-actieknop:hover, .ba-nsk-actieknop:focus { background: #d05f22; color: #fff !important; transform: translateY(-2px); } /* ---- de drie elementen als kaartjes ---- */ .ba-nsk-elementen { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin: 26px 0 30px; } .ba-nsk-element { display: flex; flex-direction: column; background: #fff; border: 1px solid #fdeee2; border-radius: 6px; padding: 24px 22px; box-shadow: 0 4px 18px rgba(58,8,0,.05); transition: transform .22s ease, box-shadow .22s ease; } .ba-nsk-element:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(58,8,0,.09); } .ba-nsk-cijfer { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fdeee2; color: #d05f22; font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 14px; flex: 0 0 auto; } #sp-component .ba-nsk-element h4, .ba-nsk-element h4 { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #3a0800; margin: 0 0 10px; line-height: 1.5; } .ba-nsk-element p { font-size: 15px; line-height: 1.7; color: #3a0800; margin: 0; } /* ---- vervolgblok onder de uitkomst ---- */ .ba-nsk-vervolg { background: #fdeee2; border-radius: 6px; padding: 34px 32px; margin: 36px 0 12px; } #sp-component .ba-nsk-vervolg h3, .ba-nsk-vervolg h3 { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #3a0800; margin: 0 0 14px; } .ba-nsk-vervolg p { color: #3a0800; } .ba-nsk-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 22px; } .ba-nsk-kaart { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; background: #fff; border-radius: 6px; padding: 22px; text-decoration: none !important; color: #3a0800 !important; box-shadow: 0 4px 16px rgba(58,8,0,.06); transition: transform .22s ease, box-shadow .22s ease; } .ba-nsk-kaart:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(58,8,0,.10); } .ba-nsk-kaart strong { font-size: 16px; line-height: 1.45; font-weight: 700; color: #3a0800; } .ba-nsk-kaartknop { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #d05f22; } .ba-nsk-kaartknop .ba-pijl { display: inline-block; transition: transform .22s ease; } .ba-nsk-kaart:hover .ba-pijl { transform: translateX(5px); } /* ---- het anker krijgt lucht boven zich ---- */ #nsk_berekening { display: block; scroll-margin-top: 110px; } /* ---- meelopende knop, alleen op mobiel ---- */ .ba-nsk-sticky { display: none; } @media (max-width: 767px) { .ba-nsk-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(253,250,246,.97); box-shadow: 0 -4px 20px rgba(58,8,0,.14); transform: translateY(140%); transition: transform .32s ease; pointer-events: none; } .ba-nsk-sticky.ba-zichtbaar { transform: none; pointer-events: auto; } .ba-nsk-sticky .ba-nsk-actieknop { display: block; text-align: center; padding: 14px 20px; box-shadow: none; } } /* ---- mobiel ---- */ @media (max-width: 767px) { .ba-nsk-hero img { aspect-ratio: 16 / 11; } .ba-nsk-hero-tekst { padding: 30px 20px 22px; } #sp-component .ba-nsk-hero h2, .ba-nsk-hero h2 { font-size: 19px; letter-spacing: 2px; margin: 0 0 16px; } .ba-nsk-elementen { grid-template-columns: 1fr; gap: 14px; margin: 22px 0 26px; } .ba-nsk-vervolg { padding: 26px 20px; } .ba-nsk-kaarten { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ba-nsk-element, .ba-nsk-kaart, .ba-nsk-actieknop, .ba-nsk-sticky, .ba-nsk-kaartknop .ba-pijl { transition: none !important; } } /* ================================================================ v8.17 (02-09-2026) — kaartjes wat compacter ================================================================ */ .ba-nsk-element { padding: 22px 20px; } .ba-nsk-cijfer { width: 32px; height: 32px; font-size: 14px; margin: 0 0 12px; } #sp-component .ba-nsk-element h4, .ba-nsk-element h4 { letter-spacing: 1.2px; margin: 0 0 9px; } .ba-nsk-element p { font-size: 14.8px; line-height: 1.64; } .ba-nsk-elementen { gap: 18px; margin: 24px 0 28px; } .ba-nsk-vervolg { margin-top: 26px; } .ba-nsk-hero img { object-position: center 36%; } /* ################################################################ VERSIE 8.18 (02-09-2026) HET OPLEIDINGS- EN VERKOOPARTIKEL KRIJGT DE KOP OP DE FOTO, NET ALS EEN BELEVINGSEVENT ---------------------------------------------------------------- WANNEER GEBEURT DIT VANZELF? Bij elk artikel dat twee dingen heeft: 1. een feitenblok bovenaan -> de tabel met class "ba-feiten" 2. een artikelfoto -> het veld Afbeeldingen, volledig Voldoet een artikel daaraan, dan wordt de foto vanzelf de banner van de kaart en ligt de titel er wit overheen. Nieuwe artikelen hoeven dus niets extra te krijgen. Wil je deze opmaak juist NIET bij een artikel? Laat de artikelfoto dan leeg, of gebruik geen ba-feiten-tabel. ################################################################ */ #sp-component .article-details:has(.ba-feiten):has(> figure) { position: relative; } /* ---------- a. De foto vult de kaart tot aan de rand ---------- */ #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.article-full-image, #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.item-image { position: relative; margin: -30px -34px 0 !important; width: auto !important; padding: 0 !important; border-radius: var(--ba-radius) var(--ba-radius) 0 0; overflow: hidden; } #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.article-full-image::after, #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.item-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 8, 0, 0) 35%, rgba(58, 8, 0, .72) 100%); pointer-events: none; } #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.article-full-image img, #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.item-image img { height: 380px !important; border-radius: 0 !important; box-shadow: none !important; } /* ---------- b. De titel ligt onderin de foto ---------- */ #sp-component .article-details:has(.ba-feiten):has(> figure) .article-header, #sp-component .article-details:has(.ba-feiten):has(> figure) .page-header { position: absolute; top: 0; left: 0; right: 0; height: 380px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 34px 26px !important; margin: 0 !important; border: 0 !important; background: none !important; z-index: 2; pointer-events: none; } #sp-component .article-details:has(.ba-feiten):has(> figure) .article-header h1, #sp-component .article-details:has(.ba-feiten):has(> figure) .page-header h1 { color: #fff !important; font-size: 26px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; text-shadow: 0 2px 12px rgba(58, 8, 0, .5); } #sp-component .article-details:has(.ba-feiten):has(> figure) .article-header .article-info, #sp-component .article-details:has(.ba-feiten):has(> figure) .article-header .article-info * { color: #fff !important; text-shadow: 0 1px 8px rgba(58, 8, 0, .5); } /* ---------- c. Opsommingen met dezelfde vinkjes als het event ---------- */ #sp-component .article-details:has(.ba-feiten) ul:not(.ba-lijst):not([class*="j2store"]) { list-style: none !important; padding-left: 0 !important; margin: 10px 0 16px !important; } #sp-component .article-details:has(.ba-feiten) ul:not(.ba-lijst):not([class*="j2store"]) > li { position: relative; padding-left: 30px; margin-bottom: 8px; } #sp-component .article-details:has(.ba-feiten) ul:not(.ba-lijst):not([class*="j2store"]) > li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ba-accent-zacht); box-shadow: inset 0 0 0 1.5px var(--ba-accent); } #sp-component .article-details:has(.ba-feiten) ul:not(.ba-lijst):not([class*="j2store"]) > li::after { content: ""; position: absolute; left: 5px; top: 12px; width: 6px; height: 3px; border-left: 2px solid var(--ba-accent-donker); border-bottom: 2px solid var(--ba-accent-donker); transform: rotate(-45deg); } /* ---------- d. Mobiel: lagere banner, kleinere titel ---------- */ @media (max-width: 767px) { #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.article-full-image, #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.item-image { margin: -20px -18px 0 !important; } #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.article-full-image img, #sp-component .article-details:has(.ba-feiten):has(> figure) > figure.item-image img { height: 260px !important; } #sp-component .article-details:has(.ba-feiten):has(> figure) .article-header, #sp-component .article-details:has(.ba-feiten):has(> figure) .page-header { height: 260px; padding: 0 18px 20px !important; } #sp-component .article-details:has(.ba-feiten):has(> figure) .article-header h1, #sp-component .article-details:has(.ba-feiten):has(> figure) .page-header h1 { font-size: 19px !important; letter-spacing: 1.6px !important; } } /* ################################################################ VERSIE 8.19 (02-09-2026) — DUBBEL KOOPBLOK J2Store plaatst het koopblok twee keer onder het artikel. Het tweede exemplaar is een kale kopie zonder de knop Meer info. Hieronder verbergen we alles na het eerste blok. ################################################################ */ #sp-component .article-details .j2store-product-wrapper ~ .j2store-product-wrapper { display: none !important; } /* ################################################################ VERSIE 8.20 (03-09-2026) — WEBSHOP J2COMMERCE 6 IN DE HUISSTIJL ---------------------------------------------------------------- Geldt voor: het koopblok onder een opleidingsartikel, de winkelwagen (/component/j2commerce/carts), de afrekenpagina (/component/j2commerce/checkout) en de bestelbevestiging. De oudere j2store-opmaak hierboven laten staan zolang de oude winkel nog op de site staat. ################################################################ */ /* ---------- a. Alles op een witte kaart ---------- */ #sp-component .j2commerce, #sp-component .j2commerce-cart { background: #fff; border-radius: var(--ba-radius); box-shadow: 0 6px 30px rgba(58, 8, 0, .07); padding: 34px; margin-bottom: 30px; color: var(--ba-tekst); font-family: 'Lato', Helvetica, Arial, sans-serif; } #sp-component .j2commerce .j2commerce-cart { background: none; box-shadow: none; padding: 0; margin-bottom: 0; } /* ---------- b. Koppen van de afrekenstappen ---------- */ #sp-component .j2commerce .checkout-heading { background: none !important; border: 0 !important; border-bottom: 1px solid #f2e4d9 !important; border-radius: 0 !important; padding: 0 0 10px !important; margin: 28px 0 20px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 2px; text-transform: uppercase; color: var(--ba-accent-donker) !important; box-shadow: none !important; } #sp-component .j2commerce .checkout-heading:first-of-type { margin-top: 0 !important; } #sp-component .j2commerce .checkout-heading a, #sp-component .j2commerce .checkout-heading span, #sp-component .j2commerce .checkout-heading button { color: var(--ba-accent-donker) !important; text-decoration: none !important; font-size: 12px; letter-spacing: 1.6px; } #sp-component .j2commerce .checkout-logout a { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ba-accent-donker) !important; } /* ---------- c. Invulvelden ---------- */ #sp-component .j2commerce input[type="text"], #sp-component .j2commerce input[type="email"], #sp-component .j2commerce input[type="tel"], #sp-component .j2commerce input[type="password"], #sp-component .j2commerce input[type="number"], #sp-component .j2commerce select, #sp-component .j2commerce-cart select { height: 46px; border: 1px solid #ecd9cb; border-radius: var(--ba-radius); background-color: #fff; color: var(--ba-tekst); font-size: 15.5px; box-shadow: none; padding: 0 12px; } #sp-component .j2commerce textarea { border: 1px solid #ecd9cb; border-radius: var(--ba-radius); color: var(--ba-tekst); font-size: 15.5px; padding: 12px; box-shadow: none; } #sp-component .j2commerce input:focus, #sp-component .j2commerce select:focus, #sp-component .j2commerce textarea:focus { border-color: var(--ba-accent); box-shadow: 0 0 0 3px rgba(242, 121, 58, .15); outline: none; } #sp-component .j2commerce label { font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #8a6f60; margin-bottom: 5px; } /* ---------- d. Knoppen ---------- */ #sp-component .j2commerce .btn, #sp-component .j2commerce button[type="submit"], #sp-component .j2commerce input[type="submit"], #sp-component .j2commerce-cart .btn, #sp-component .cart-checkout-button, #sp-component .j2commerce-cart-button { background: var(--ba-accent) !important; border: 0 !important; border-radius: var(--ba-radius) !important; color: #fff !important; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2px; text-transform: uppercase; padding: 13px 28px !important; box-shadow: 0 6px 18px rgba(242, 121, 58, .26); transition: background-color .2s ease, transform .2s ease; } #sp-component .j2commerce .btn:hover, #sp-component .j2commerce button[type="submit"]:hover, #sp-component .cart-checkout-button:hover, #sp-component .j2commerce-cart-button:hover { background: var(--ba-accent-donker) !important; color: #fff !important; transform: translateY(-1px); } /* de plus- en minknopjes en het kruisje blijven klein en rustig */ #sp-component .j2commerce-qty-minus, #sp-component .j2commerce-qty-plus, #sp-component .j2commerce-qty-controls .btn, #sp-component .cart-line-remove .btn, #sp-component .j2commerce-remove-ajax { background: #fff !important; color: var(--ba-accent-donker) !important; border: 1px solid #ecd9cb !important; box-shadow: none !important; padding: 0 12px !important; font-size: 15px !important; letter-spacing: 0; } #sp-component .j2commerce-qty-input { border: 1px solid #ecd9cb !important; border-radius: var(--ba-radius); text-align: center; } /* tweede knop, zoals Verder winkelen, in een rustige uitvoering */ #sp-component .cart-continue-shopping-button .btn, #sp-component .cart-continue-shopping-button a { background: #fff !important; color: var(--ba-accent-donker) !important; border: 1px solid var(--ba-accent) !important; box-shadow: none !important; } #sp-component .cart-continue-shopping-button .btn:hover, #sp-component .cart-continue-shopping-button a:hover { background: var(--ba-accent-zacht) !important; color: var(--ba-accent-donker) !important; } /* ---------- e. Winkelwagen: tabel ---------- */ #sp-component .j2commerce-cart-table thead th { background: var(--ba-accent); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; border: 0; padding: 13px 16px; } #sp-component .j2commerce-cart-table thead th:first-child { border-radius: var(--ba-radius) 0 0 0; } #sp-component .j2commerce-cart-table thead th:last-child { border-radius: 0 var(--ba-radius) 0 0; } #sp-component .j2commerce-cart-table td { border-color: #f6ebe3; padding: 16px; vertical-align: middle; color: var(--ba-tekst); } #sp-component .cart-product-name { font-size: 16px; font-weight: 700; color: var(--ba-tekst); } #sp-component .cart-product-unit-price { font-size: 13px; color: #8a6f60; } #sp-component .cart-line-subtotal { font-weight: 700; } /* ---------- f. Totalen ---------- */ #sp-component .cart-totals-block, #sp-component .j2commerce-checkout-sidecart, #sp-component .j2commerce-checkout-sidebar .bg-light, #sp-component .j2commerce-checkout-sidebar .rounded { background: var(--ba-accent-zacht) !important; border: 0 !important; border-radius: var(--ba-radius) !important; } #sp-component .cart-totals-block table, #sp-component .cart-totals-block td { border: 0 !important; background: none !important; } #sp-component .cart-totals-block tr:last-child td { font-size: 18px; font-weight: 700; color: var(--ba-accent-donker); } #sp-component .checkout-sidebar-item, #sp-component .j2commerce-checkout-sidebar .list-group-item { background: none !important; border-color: rgba(58, 8, 0, .08) !important; color: var(--ba-tekst); } /* ---------- g. Koopblok onder een artikel ---------- */ #sp-component .j2commerce-product-item { background: var(--ba-accent-zacht); border-radius: var(--ba-radius); padding: 26px 28px 28px; margin: 30px 0 10px; } #sp-component .j2commerce-product-item::before { content: "Direct kopen"; display: block; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ba-accent-donker); margin-bottom: 14px; } #sp-component .j2commerce-product-price { font-size: 26px !important; font-weight: 700; color: var(--ba-accent-donker); line-height: 1.2; } #sp-component .j2commerce-product-sku, #sp-component .j2commerce-product-stock { display: none; } #sp-component .j2commerce-addtocart-form { margin-top: 16px; } #sp-component .j2commerce-cart-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } #sp-component .j2commerce-add-to-cart input[type="number"], #sp-component .j2commerce-add-to-cart input[type="text"] { max-width: 80px; text-align: center; } #sp-component .j2commerce-checkout-link a { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ba-accent-donker) !important; } /* ---------- h. Bestelbevestiging ---------- */ #sp-component .j2commerce .card, #sp-component .j2commerce .list-group-item { border-color: #f6ebe3; border-radius: var(--ba-radius); } #sp-component .j2commerce .badge, #sp-component .j2commerce .alert-success { background: var(--ba-accent-zacht) !important; color: var(--ba-accent-donker) !important; border: 0 !important; border-radius: var(--ba-radius); } #sp-component .j2commerce h1, #sp-component .j2commerce h2, #sp-component .j2commerce h3, #sp-component .j2commerce h4 { font-family: 'Lato', Helvetica, Arial, sans-serif; color: var(--ba-tekst); letter-spacing: 1.4px; } /* ---------- i. Mobiel ---------- */ @media (max-width: 767px) { #sp-component .j2commerce, #sp-component .j2commerce-cart { padding: 22px 18px 26px; } #sp-component .j2commerce .checkout-heading { font-size: 12.5px !important; margin: 22px 0 16px !important; } #sp-component .j2commerce-product-item { padding: 20px 18px 22px; } #sp-component .j2commerce-product-price { font-size: 22px !important; } #sp-component .j2commerce .btn, #sp-component .cart-checkout-button, #sp-component .j2commerce-cart-button { width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { #sp-component .j2commerce .btn, #sp-component .j2commerce-cart-button, #sp-component .cart-checkout-button { transition: none !important; } } /* ================================================================ v8.21 (03-09-2026) — bestelbevestiging afgewerkt ================================================================ */ #sp-component .j2c-check-circle { background: var(--ba-accent) !important; } #sp-component .j2c-sidebar-bg { background: var(--ba-accent-zacht) !important; border-radius: var(--ba-radius); } #sp-component .j2c-block-status-banner { border: 0 !important; border-left: 4px solid var(--ba-accent) !important; border-radius: var(--ba-radius); } #sp-component .j2c-block-status-banner .alert-heading { font-size: 19px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ba-tekst) !important; } /* het landkaartje bij het adres heeft bij een online opleiding geen functie */ #sp-component .leaflet-map-container { display: none !important; } /* ================================================================ v8.22 (03-09-2026) — knopjes in de winkelwagen krijgen een teken De icoontjes fa-minus, fa-plus en fa-trash bestaan niet in de Font Awesome-set van deze site en bleven daardoor leeg. ================================================================ */ #sp-component .j2commerce-qty-minus .fa-minus, #sp-component .j2commerce-qty-plus .fa-plus, #sp-component .j2commerce-remove-ajax .fa-trash { display: none !important; } #sp-component .j2commerce-qty-minus::after, #sp-component .j2commerce-qty-plus::after, #sp-component .j2commerce-remove-ajax::after { font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1; display: inline-block; } #sp-component .j2commerce-qty-minus::after { content: "\2212"; } #sp-component .j2commerce-qty-plus::after { content: "+"; } #sp-component .j2commerce-remove-ajax::after { content: "\00D7"; font-size: 20px; color: var(--ba-accent-donker); opacity: .55; } #sp-component .j2commerce-remove-ajax:hover::after { opacity: 1; } #sp-component .j2commerce-remove-ajax { color: var(--ba-accent-donker) !important; } /* ############################################################ 8.23 STARTPAGINA — RUSTIGER BEELD ------------------------------------------------------------ De video is tijdelijk uit de rechterkolom gehaald; op die plek staat nu het Nine Star Ki-blok. De klantervaringen lopen daardoor over de volle breedte. Verder: overal hetzelfde dunne beige randje om de kolommen en een lichte beige sluier over de achtergrondfoto, zodat het geheel rustiger oogt. ############################################################ */ /* De achtergrondfoto zit op body::before (z-index -2). Deze laag ligt daar net boven en onder alle inhoud: een dun beige waas. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(245, 235, 219, .38); pointer-events: none; } /* Het dunne beige randje om alle kolommen. We gebruiken outline en geen border: zo verschuift er niets in de opmaak en blijven bestaande schaduwen gewoon staan. */ #sp-main-body .ba-kolom, #sp-main-body .ba-jux, #sp-main-body .ba-blogs, #sp-main-body .ba-quotes { outline: 1px solid rgba(198, 170, 132, .38); outline-offset: -1px; } /* Op de donkere en oranje blokken valt hetzelfde randje beter op in een lichtere beigetint. */ #sp-main-body .ba-slides, #sp-main-body .ba-cta, #sp-main-body .sppb-column.panel-red { outline: 1px solid rgba(255, 248, 238, .45); outline-offset: -1px; } /* Het Nine Star Ki-blok staat nu in een moduleblok van de paginabouwer. Zo n blok heeft standaard een wit vlak met ruimte eromheen; dat halen we weg, zodat de kaart zelf weer los op de achtergrond ligt. */ .sppb-addon-module .sppb-addon-content:has(.ba-nsk-cta) { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; } /* ############################################################ 8.24 STARTPAGINA — LUCHT TUSSEN DE BLOKKEN ------------------------------------------------------------ Op desktop stonden de rijen (Kennisbank, Agenda, Klaar om te beleven, Klantervaringen) zonder tussenruimte op elkaar; op mobiel was dat al goed geregeld. Daarnaast eiste de blogkaart de volledige kolomhoogte op (height:100% uit een eerdere versie), waardoor het Nine Star Ki-blok eronder over het oranje blok heen viel. Beide hier opgelost. ############################################################ */ @media (min-width: 768px) { /* 30px lucht tussen de rijen op de startpagina */ body.home-page #sp-main-body .sppb-column-addons > .sppb-section + .sppb-section { margin-top: 30px; } /* en tussen de blogkaart en het Nine Star Ki-blok */ body.home-page #sp-main-body .sppb-addon-wrapper:has(.ba-nsk-cta) { margin-top: 30px; } } /* De blogkaart mag niet meer de hele kolom vullen zodra er een Nine Star Ki-blok onder staat; de agendakolom links rekt zich vanzelf mee tot dezelfde hoogte. */ .sppb-column-addons:has(.ba-nsk-cta) .sppb-addon-wrapper:has(.ba-blogs) { height: auto; } /* Het beige randje om de witte kaarten iets duidelijker (8.23 was te subtiel om op te vallen). */ #sp-main-body .ba-kolom, #sp-main-body .ba-jux, #sp-main-body .ba-blogs, #sp-main-body .ba-quotes { outline-color: rgba(198, 170, 132, .55); } /* ############################################################ 8.25 ACHTERGRONDSLUIER STERKER ------------------------------------------------------------ De sluier uit 8.23 overschrijven: van 38% naar 58% dekking. Wil je hem later lichter of zwaarder, dan hoef je alleen dit getal (.58) aan te passen. ############################################################ */ body::after { background: rgba(245, 235, 219, .74); } /* ############################################################ 8.26 SLIDER — EERSTE KOP GELIJK AAN DE REST ------------------------------------------------------------ Het script dat een enkele H1 per pagina afdwingt maakt van de kop op de eerste slide een H1. Die viel daardoor onder de algemene H1-opmaak (dun, hoofdletters). Hier krijgen H1 en H2 in de slider precies dezelfde stijl. ############################################################ */ #sp-component .ba-slides .ba-slide-inhoud h1, #sp-component .ba-slides .ba-slide-inhoud h2 { margin: 0 0 6px; font-family: Lato, sans-serif; font-size: 21px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: none !important; color: #fff !important; } /* ############################################################ 8.28 AGENDA- EN BLOGKOP EVEN HOOG ------------------------------------------------------------ De titel van het agendablok loopt over twee regels, waardoor die oranje kop hoger werd dan die van het blogblok ernaast. Beide koppen krijgen op desktop dezelfde minimale hoogte; de inhoud staat er al verticaal gecentreerd in. ############################################################ */ @media (min-width: 992px) { #sp-main-body .ba-jux-header, #sp-main-body .ba-blogs-header { min-height: 124px; } } /* ############################################################ 8.29 BEIGE SLUIER — NU ECHT ZICHTBAAR ------------------------------------------------------------ Een eerdere versie (de uitgezette gouden-gloed-animatie) heeft body::after met !important op content:none staan. Daardoor werd de sluier uit 8.23, 8.25 en 8.27 nooit getekend. Deze regel wint van die oude en zet alles expliciet. De dekking (het getal .55) is de enige knop om aan te draaien. ############################################################ */ body::after { content: "" !important; animation: none !important; position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background-image: none !important; background-color: rgba(245, 235, 219, .55) !important; } /* ############################################################ 8.30 SLUIER MET VERLOOP ------------------------------------------------------------ Overschrijft de vlakke sluier van 8.29: bovenin 45% beige, halverwege 28%, onderin 5%. De drie getallen zijn de knoppen. ############################################################ */ body::after { background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(245, 235, 219, .45) 0%, rgba(245, 235, 219, .28) 50%, rgba(245, 235, 219, .05) 100%) !important; } /* ############################################################ 8.31 SLUIER: ONDERKANT VRIJWEL ONGEFILTERD ------------------------------------------------------------ Overschrijft 8.30. Bovenin 45%, op 35% hoogte nog 20%, vanaf 60% hoogte niets meer: de onderste helft toont de foto puur. ############################################################ */ body::after { background-image: linear-gradient(to bottom, rgba(245, 235, 219, .45) 0%, rgba(245, 235, 219, .20) 35%, rgba(245, 235, 219, 0) 60%, rgba(245, 235, 219, 0) 100%) !important; } /* ############################################################ 8.32 SLUIER BOVENIN STERKER ------------------------------------------------------------ Overschrijft 8.31. Bovenin 60%, op 35% hoogte 28%, vanaf 60% hoogte niets meer. Alleen de eerste twee getallen zijn anders. ############################################################ */ body::after { background-image: linear-gradient(to bottom, rgba(245, 235, 219, .60) 0%, rgba(245, 235, 219, .28) 35%, rgba(245, 235, 219, 0) 60%, rgba(245, 235, 219, 0) 100%) !important; } /* ============================================================ 8.33 — HOOFDMENU: compacter, gecentreerd, subtiele chevron en dunne hover-lijn (13-09-2026) ============================================================ */ @media (min-width: 992px) { /* menu netjes in het midden van de ruimte naast het logo */ #sp-header #sp-menu .sp-megamenu-wrapper { display: flex; justify-content: center; width: 100%; padding: 0; } #sp-header #sp-menu ul.sp-megamenu-parent { display: flex; flex-wrap: nowrap; width: max-content; max-width: 100%; margin: 0; padding: 0; } #sp-header #sp-menu ul.sp-megamenu-parent > li { padding: 0 11px; } #sp-header #sp-menu ul.sp-megamenu-parent > li > a, #sp-header #sp-menu ul.sp-megamenu-parent > li > span { position: relative; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 1.2px !important; color: var(--ba-tekst) !important; transition: color .25s ease; } #sp-header #sp-menu ul.sp-megamenu-parent > li > a:hover, #sp-header #sp-menu ul.sp-megamenu-parent > li > span:hover, #sp-header #sp-menu ul.sp-megamenu-parent > li.active > a { color: var(--ba-oranje) !important; } /* oude dikke hover-lijn (a::after) uit; nieuwe dunne lijn via ::before */ #sp-header #sp-menu ul.sp-megamenu-parent > li:not(.sp-has-child) > a::after { display: none !important; } #sp-header #sp-menu ul.sp-megamenu-parent > li > a::before, #sp-header #sp-menu ul.sp-megamenu-parent > li > span::before { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: linear-gradient(to right, rgba(242,121,58,.15), rgba(242,121,58,.85)); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease; pointer-events: none; } #sp-header #sp-menu ul.sp-megamenu-parent > li.sp-has-child > a::before, #sp-header #sp-menu ul.sp-megamenu-parent > li.sp-has-child > span::before { right: 16px; } #sp-header #sp-menu ul.sp-megamenu-parent > li > a:hover::before, #sp-header #sp-menu ul.sp-megamenu-parent > li > span:hover::before, #sp-header #sp-menu ul.sp-megamenu-parent > li.active > a::before { transform: scaleX(1); } /* Font Awesome-blokje vervangen door een subtiel chevron (CSS, geen font) */ body.ltr #sp-header .sp-megamenu-parent > li.sp-has-child > span::after, body.ltr #sp-header .sp-megamenu-parent > li.sp-has-child > a::after { font-family: inherit !important; content: "" !important; float: none !important; display: inline-block !important; position: static !important; width: 6px !important; height: 6px !important; margin: 0 0 3px 8px !important; border: 0 !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: rotate(45deg) !important; opacity: .55 !important; vertical-align: middle !important; background: none !important; transition: transform .25s ease !important; font-weight: 400 !important; line-height: 0 !important; } body.ltr #sp-header .sp-megamenu-parent > li.sp-has-child:hover > span::after, body.ltr #sp-header .sp-megamenu-parent > li.sp-has-child:hover > a::after { transform: rotate(225deg) !important; margin-bottom: -1px !important; } } /* smallere desktops: iets kleiner zodat alles op een regel blijft */ @media (min-width: 1200px) and (max-width: 1399px) { #sp-header #sp-menu ul.sp-megamenu-parent > li { padding: 0 7px; } #sp-header #sp-menu ul.sp-megamenu-parent > li > a, #sp-header #sp-menu ul.sp-megamenu-parent > li > span { font-size: 13.5px !important; letter-spacing: .9px !important; } } @media (min-width: 992px) and (max-width: 1199px) { #sp-header #sp-menu ul.sp-megamenu-parent > li { padding: 0 5px; } #sp-header #sp-menu ul.sp-megamenu-parent > li > a, #sp-header #sp-menu ul.sp-megamenu-parent > li > span { font-size: 12px !important; letter-spacing: .7px !important; } } /* ============================================================ 8.34 — HOOFDMENU smaller: 14px, minder letterafstand (13-09-2026) ============================================================ */ @media (min-width: 1400px) { #sp-header #sp-menu ul.sp-megamenu-parent > li { padding: 0 9px; } #sp-header #sp-menu ul.sp-megamenu-parent > li > a, #sp-header #sp-menu ul.sp-megamenu-parent > li > span { font-size: 14px !important; letter-spacing: .6px !important; } body.ltr #sp-header .sp-megamenu-parent > li.sp-has-child > span::after, body.ltr #sp-header .sp-megamenu-parent > li.sp-has-child > a::after { margin-left: 6px !important; } } @media (min-width: 1200px) and (max-width: 1399px) { #sp-header #sp-menu ul.sp-megamenu-parent > li { padding: 0 7px; } #sp-header #sp-menu ul.sp-megamenu-parent > li > a, #sp-header #sp-menu ul.sp-megamenu-parent > li > span { font-size: 13px !important; letter-spacing: .5px !important; } } @media (min-width: 992px) and (max-width: 1199px) { #sp-header #sp-menu ul.sp-megamenu-parent > li { padding: 0 5px; } #sp-header #sp-menu ul.sp-megamenu-parent > li > a, #sp-header #sp-menu ul.sp-megamenu-parent > li > span { font-size: 12px !important; letter-spacing: .4px !important; } } /* ============================================================ 8.35 — KNOPPEN SMALLER: agenda-kaarten (INFO) en J2Commerce 'In winkelwagen' (13-09-2026) ============================================================ */ /* INFO-knop in de eventkaarten: niet meer kaartbreed, links uitgelijnd */ #sp-main-body .jux-eventon-readmore-jux-buynow { padding: 0 20px 20px; text-align: left; } #sp-main-body .jux-eventon-readmore-jux-buynow a { display: inline-block !important; width: 62% !important; min-width: 150px; padding: 10px 24px !important; } /* 'In winkelwagen' (J2Commerce): eigen breedte in plaats van de hele regel */ #sp-main-body .j2commerce-cart-buttons .input-group { width: auto !important; max-width: 100%; } #sp-main-body .j2commerce-cart-button.flex-fill { flex: 0 0 auto !important; width: auto !important; min-width: 280px; margin-left: 10px; padding-left: 40px !important; padding-right: 40px !important; } @media (max-width: 575px) { #sp-main-body .jux-eventon-readmore-jux-buynow a { width: 100% !important; } #sp-main-body .j2commerce-cart-button.flex-fill { min-width: 0; flex: 1 1 auto !important; } } /* ============================================================ 8.36 — SLUIER BOVENIN STERKER (60% > 70%, op een derde 40%), onderste helft blijft ongefilterd; footer OV-regel (13-09-2026) ============================================================ */ body::after { background-image: linear-gradient(to bottom, rgba(245, 235, 219, .70) 0%, rgba(245, 235, 219, .40) 35%, rgba(245, 235, 219, 0) 60%, rgba(245, 235, 219, 0) 100%) !important; } /* Openbaar vervoer in de footer: reistijd kleiner en lichter op eigen regel */ #sp-footer .ba-ov-tijd, #sp-bottom .ba-ov-tijd { display: block; font-size: .82em; opacity: .8; letter-spacing: .2px; margin-top: 2px; } /* ============================================================ 8.37 — HOMEPAGE-ANIMATIE: blokken faden zacht in bij scrollen, kaarten tillen licht op bij hover (13-09-2026). Hoort bij js/custom.js. ============================================================ */ body.home-page .ba-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; will-change: opacity, transform; } body.home-page .ba-reveal.ba-in { opacity: 1; transform: none; } #sp-main-body #jux_eventon_event_grid .jux-loop-item-wrap, #sp-main-body .ba-kolom li, #sp-main-body .ba-nsk-cta { transition: transform .25s ease, box-shadow .25s ease; } #sp-main-body #jux_eventon_event_grid .jux-loop-item-wrap:hover, #sp-main-body .ba-nsk-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(58, 8, 0, .10); } #sp-main-body .ba-kolom li:hover { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { body.home-page .ba-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } #sp-main-body .jux-loop-item-wrap, #sp-main-body .ba-kolom li, #sp-main-body .ba-nsk-cta { transition: none !important; transform: none !important; } } /* ======== 8.38 (14-09-2026) Opleidingen-overzicht: INFO-knop gecentreerd ======== Alleen de JUX-lijstweergave (body.view-events); de losse eventpagina (body.view-event) houdt de 8.35-knopbreedte. */ body.view-events #sp-main-body .jux-loop-item .jux-eventon-readmore-jux-buynow { text-align: center !important; padding: 6px 0 4px; } body.view-events #sp-main-body .jux-loop-item .jux-eventon-readmore-jux-buynow a { display: inline-block !important; width: auto !important; min-width: 0 !important; padding: 10px 32px !important; } /* ======== 8.39 (14-09-2026) Achtergrond achter glas: langzame zoom, blur, lichtreflectie ======== body::before = de foto (barada2027bg.jpg), body::after = de sluier uit 8.36. - Foto: zeer langzame zoom heen en weer (transform, GPU-vriendelijk). - Sluier: zelfde verloop als 8.36, plus (8.40) een grote wazige lichtvlek die in 48 s traag heen en weer drijft, en 2px blur (alleen vanaf 768px; op mobiel weggelaten om accu/prestaties te sparen). - Uitschakelen: zet hieronder animation op none of verwijder dit blok. */ @keyframes ba-glas-drift { 0% { transform: scale(1) translateY(0); } 100% { transform: scale(1.045) translateY(-0.6%); } } @keyframes ba-glas-licht { 0% { background-position: 10% 0%, 0 0; } 50% { background-position: 80% 12%, 0 0; } 100% { background-position: 10% 0%, 0 0; } } body::before { transform-origin: 50% 25%; animation: ba-glas-drift 60s ease-in-out infinite alternate !important; will-change: transform; } body::after { /* 8.40: zachte lichtvlek i.p.v. streep */ background-image: radial-gradient(ellipse 55% 40% at center, rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 70%), linear-gradient(to bottom, rgba(245,235,219,.70) 0%, rgba(245,235,219,.40) 35%, rgba(245,235,219,0) 60%, rgba(245,235,219,0) 100%) !important; background-size: 120% 50%, 100% 100% !important; /* 8.41: vlek alleen bovenste helft */ background-repeat: no-repeat !important; animation: ba-glas-licht 48s ease-in-out infinite !important; } @media (min-width: 768px) { body::after { -webkit-backdrop-filter: blur(2px) saturate(1.05); backdrop-filter: blur(2px) saturate(1.05); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none !important; } } /* ======== 8.41 (14-09-2026) Kennismakingspagina: .ba-kennis (artikel 41) ======== Alleen actief binnen .ba-kennis; andere pagina's en BA Forms elders ongewijzigd. */ .ba-kennis h3 { margin-bottom: 10px; } .ba-kennis .ba-kennis-intro { font-size: 1.05em; margin-bottom: 22px; } .ba-kennis .ba-kennis-gratis { background: #fdeee2; border-left: 4px solid #f2793a; border-radius: 6px; padding: 20px 24px 16px; margin: 0 0 28px; } .ba-kennis .ba-kennis-gratis p { margin: 0 0 14px; } .ba-kennis .ba-kennis-gratis p:last-child { margin-bottom: 0; } .ba-kennis .ba-kennis-usp { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; } .ba-kennis .ba-kennis-usp li { position: relative; padding-left: 30px; font-weight: 600; color: #3a0800; line-height: 1.35; } .ba-kennis .ba-kennis-usp li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #f2793a; } .ba-kennis .ba-kennis-usp li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .ba-kennis .ba-kennis-stappen a { color: #d05f22; font-weight: 600; white-space: nowrap; } .ba-kennis .ba-kennis-form { background: #fdfaf6; border: 1px solid #f1e6da; border-radius: 6px; padding: 24px 26px 8px; } .ba-kennis .ba-kennis-formkop { font-size: 1.15em; letter-spacing: .5px; text-transform: uppercase; color: #d05f22; margin: 0 0 14px; } .ba-kennis .ba-form-field-item input[type="text"], .ba-kennis .ba-form-field-item input[type="email"], .ba-kennis .ba-form-field-item textarea { border-radius: 6px !important; border-color: #e6d9cb !important; background: #fff !important; } .ba-kennis .ba-form-field-item input:focus, .ba-kennis .ba-form-field-item textarea:focus { border-color: #f2793a !important; box-shadow: 0 0 0 3px rgba(242,121,58,.15) !important; } .ba-kennis .ba-form-submit-btn { background: #f2793a !important; color: #fff !important; border-radius: 6px !important; padding: 14px 34px !important; letter-spacing: .5px; transition: background .2s, transform .2s; } .ba-kennis .ba-form-submit-btn:hover { background: #d05f22 !important; transform: translateY(-1px); } .ba-kennis .ba-form-submit-btn .ba-form-submit-title, .ba-kennis .ba-form-submit-btn i { color: #fff !important; } @media (max-width: 767px) { .ba-kennis .ba-kennis-usp { grid-template-columns: 1fr; } .ba-kennis .ba-kennis-form { padding: 18px 16px 4px; } .ba-kennis .ba-form-submit-btn { width: 100% !important; text-align: center; } } /* ======== 8.41 Footerlinks (module 112 in sp-bottom3) elk op een eigen regel ======== De links in dit custom-HTML-blok staan inline met wisselende
    ; hier krijgt elke link een eigen regel, de losse
    worden genegeerd. */ #sp-bottom3 .mod-custom p > a { display: block; padding: 3px 0; } #sp-bottom3 .mod-custom p > a:empty { display: none; } #sp-bottom3 .mod-custom p > br { display: none; } /* ======== 8.42 (14-09-2026) Stel-je-vraag + verfijning formulierkaart ======== .ba-vraag = variant van .ba-kennis (artikel 40): contactopties met stip. */ .ba-kennis .ba-form-page { background: transparent !important; padding: 0 !important; } .ba-kennis .ba-form-page h3 { color: #d05f22; letter-spacing: .5px; margin-bottom: 4px; } .ba-vraag .ba-kennis-usp li { font-weight: 500; } .ba-vraag .ba-kennis-usp li::before { width: 10px; height: 10px; left: 5px; top: 7px; } .ba-vraag .ba-kennis-usp li::after { display: none; } .ba-vraag .ba-kennis-usp a { color: #d05f22; font-weight: 600; white-space: nowrap; } /* ======== 8.43 (14-09-2026) Huisstijl BA Forms (sitebreed) ======== Geldt voor elk formulier van Balbooa Forms (.com-baforms-wrapper). Formulierinstellingen in de component blijven staan; dit overschrijft alleen kleuren/vormen. Binnen .ba-kennis (8.41/8.42) is de binnenkaart transparant zodat er geen dubbele kaart ontstaat. */ .com-baforms-wrapper .ba-form-page { background: #fdfaf6 !important; border: 1px solid #f1e6da; border-radius: 6px !important; padding: 26px 28px 14px !important; } .com-baforms-wrapper .ba-form-text-field h2, .com-baforms-wrapper .ba-form-text-field h3 { color: #d05f22; letter-spacing: .4px; margin-bottom: 6px; } .com-baforms-wrapper .ba-form-field-item input[type="text"], .com-baforms-wrapper .ba-form-field-item input[type="email"], .com-baforms-wrapper .ba-form-field-item input[type="tel"], .com-baforms-wrapper .ba-form-field-item input[type="number"], .com-baforms-wrapper .ba-form-field-item textarea, .com-baforms-wrapper .ba-form-field-item select { border: 1px solid #e6d9cb !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; } .com-baforms-wrapper .ba-form-field-item input[type="text"], .com-baforms-wrapper .ba-form-field-item input[type="email"], .com-baforms-wrapper .ba-form-field-item input[type="tel"], .com-baforms-wrapper .ba-form-field-item select { min-height: 42px !important; padding: 8px 12px !important; } .com-baforms-wrapper .ba-form-field-item textarea { padding: 10px 12px !important; } .com-baforms-wrapper .ba-form-field-item input:focus, .com-baforms-wrapper .ba-form-field-item textarea:focus, .com-baforms-wrapper .ba-form-field-item select:focus { border-color: #f2793a !important; box-shadow: 0 0 0 3px rgba(242,121,58,.15) !important; } .com-baforms-wrapper label.ba-form-checkbox > input + span, .com-baforms-wrapper label.ba-form-radio > input + span::before { background: #fff !important; border: 2px solid #e6d9cb !important; } .com-baforms-wrapper label.ba-form-checkbox > input + span { border-radius: 4px !important; } .com-baforms-wrapper label.ba-form-checkbox > input:checked + span, .com-baforms-wrapper label.ba-form-radio > input:checked + span::before { background: #f2793a !important; border-color: #f2793a !important; } .com-baforms-wrapper .ba-form-submit-btn { background: #f2793a !important; color: #fff !important; border-radius: 6px !important; padding: 14px 34px !important; letter-spacing: .5px; transition: background .2s, transform .2s; } .com-baforms-wrapper .ba-form-submit-btn:hover { background: #d05f22 !important; transform: translateY(-1px); } .com-baforms-wrapper .ba-form-submit-btn .ba-form-submit-title, .com-baforms-wrapper .ba-form-submit-btn i { color: #fff !important; } .ba-kennis .ba-form-page { background: transparent !important; border: 0 !important; padding: 0 !important; } @media (max-width: 767px) { .com-baforms-wrapper .ba-form-page { padding: 18px 16px 8px !important; } .com-baforms-wrapper .ba-form-submit-btn { width: 100% !important; text-align: center; } } /* ======== 8.44 (14-09-2026) BA Forms: knop-hover, kalender-icoon, uitlijning ======== */ .com-baforms-wrapper .ba-form-submit-btn::before, .com-baforms-wrapper .ba-form-submit-btn::after { display: none !important; } /* roze hover-laag weg */ .com-baforms-wrapper .ba-form-submit-btn i { display: none !important; } /* geen schuivend icoon */ .com-baforms-wrapper .ba-form-submit-btn .ba-form-submit-title { opacity: 1 !important; transform: none !important; visibility: visible !important; position: static !important; display: inline !important; } .com-baforms-wrapper .ba-form-submit-btn { text-align: center; line-height: 1.2; } .com-baforms-wrapper .ba-form-field-item.ba-form-calendar-field input[type="text"] { padding-left: 44px !important; } .com-baforms-wrapper .ba-form-calendar-field .ba-icon-calendar { color: #b9a28e !important; left: 14px !important; } .com-baforms-wrapper .ba-form-field-item { margin-bottom: 14px; } .ba-kennis .ba-form-page { margin: 0 !important; width: 100% !important; } /* ======== 8.45 (14-09-2026) BA Forms datumkiezer (kalender-popup) in huisstijl ======== */ .forms-calendar-wrapper .ba-forms-calendar { background: #fff !important; border: 1px solid #f1e6da; border-radius: 8px !important; box-shadow: 0 14px 40px rgba(58,8,0,.16) !important; color: #3a0800 !important; } .forms-calendar-wrapper .ba-forms-calendar-title { color: #3a0800 !important; letter-spacing: .3px; } .forms-calendar-wrapper .forms-calendar-btn { background: #fdeee2 !important; border-radius: 6px !important; color: #d05f22 !important; } .forms-calendar-wrapper .forms-calendar-btn i { background: transparent !important; color: #d05f22 !important; border-radius: 6px; } .forms-calendar-wrapper .forms-calendar-btn:hover { background: #f2793a !important; } .forms-calendar-wrapper .forms-calendar-btn:hover i { color: #fff !important; } .forms-calendar-wrapper .ba-event-calendar-day-name { color: #b9a28e !important; font-weight: 700; } .forms-calendar-wrapper .ba-date-cell { color: #3a0800 !important; border-radius: 50% !important; transition: background .15s; } .forms-calendar-wrapper .ba-date-cell:hover { background: #fdeee2 !important; color: #d05f22 !important; } .forms-calendar-wrapper .ba-date-cell.ba-previous-date, .forms-calendar-wrapper .ba-date-cell.disabled-date { color: #cbbfb3 !important; } .forms-calendar-wrapper .ba-date-cell.ba-curent-date { background: #f2793a !important; color: #fff !important; font-weight: 700; } .forms-calendar-wrapper .ba-date-cell.ba-selected-date, .forms-calendar-wrapper .ba-date-cell.ba-active-date, .forms-calendar-wrapper .ba-date-cell.selected { background: #d05f22 !important; color: #fff !important; } .forms-calendar-wrapper .ba-forms-today-btn { background: #fdeee2 !important; color: #d05f22 !important; border-radius: 6px !important; font-weight: 700; letter-spacing: .3px; } .forms-calendar-wrapper .ba-forms-today-btn:hover { background: #f2793a !important; color: #fff !important; } /* ======== 8.46 (14-09-2026) Over-ons pagina (.ba-over, artikel 35) ======== */ .ba-over h3 { margin-top: 34px; } .ba-over .ba-over-feiten { background: #fdeee2; border-left: 4px solid #f2793a; border-radius: 6px; padding: 18px 24px 6px; margin: 26px 0 8px; } .ba-over .ba-over-feiten h3 { margin: 0 0 12px; font-size: 1.05em; letter-spacing: .5px; text-transform: uppercase; color: #d05f22; } .ba-over .ba-over-feiten dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin: 0; } .ba-over .ba-over-feiten dl > div { padding-bottom: 10px; border-bottom: 1px solid rgba(208,95,34,.15); } .ba-over .ba-over-feiten dt { font-size: .78em; letter-spacing: .8px; text-transform: uppercase; color: #b9784f; font-weight: 700; margin-bottom: 2px; } .ba-over .ba-over-feiten dd { margin: 0; color: #3a0800; line-height: 1.45; } .ba-over .ba-over-video { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(58,8,0,.15); margin: 0 0 10px; } .ba-over .ba-over-video iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; } .ba-over .ba-over-lijst li { margin-bottom: 6px; } .ba-over .ba-over-lijst a { color: #d05f22; font-weight: 600; } .ba-over .ba-over-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 560px; margin: 22px 0 10px; } .ba-over .ba-over-fotos img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6px 18px rgba(58,8,0,.12); display: block; } .ba-over .ba-over-trainer::after { content: ""; display: block; clear: both; } .ba-over .ba-over-portret { float: right; width: 260px; max-width: 45%; height: auto; margin: 0 0 14px 22px; border-radius: 8px; box-shadow: 0 6px 18px rgba(58,8,0,.15); border: 0 !important; } .ba-over .ba-over-cta { background: #fdfaf6; border: 1px solid #f1e6da; border-radius: 6px; padding: 22px 26px 12px; margin: 30px 0 0; } .ba-over .ba-over-cta p { margin: 0 0 14px; } .ba-over .ba-over-knop { display: inline-block; background: #f2793a; color: #fff !important; border-radius: 6px; padding: 12px 26px; font-weight: 600; letter-spacing: .4px; text-decoration: none; margin: 0 10px 8px 0; transition: background .2s, transform .2s; } .ba-over .ba-over-knop:hover { background: #d05f22; transform: translateY(-1px); } .ba-over .ba-over-knop-licht { background: #fdeee2; color: #d05f22 !important; } .ba-over .ba-over-knop-licht:hover { background: #f2793a; color: #fff !important; } @media (max-width: 767px) { .ba-over .ba-over-feiten dl { grid-template-columns: 1fr; } .ba-over .ba-over-portret { float: none; max-width: 100%; width: 100%; margin: 0 0 14px; } .ba-over .ba-over-fotos { max-width: 100%; } } /* ======== 8.47 (14-09-2026) WhatsApp-knop ======== Gebruik: … WhatsApp */ .ba-over-knop.ba-over-knop-wa { background: #fff; color: #d05f22 !important; border: 1px solid #f2793a; padding: 11px 25px; } /* 8.49 */ .ba-over-knop.ba-over-knop-wa:hover { background: #f2793a; color: #fff !important; } .ba-over-knop .ba-wa-icoon { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; } /* ======== 8.50 (14-09-2026) Contactpagina (.ba-contact, artikel 79) ======== */ .ba-contact .ba-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: stretch; margin: 6px 0 10px; } .ba-contact .ba-contact-kaart { background: #fdfaf6; border: 1px solid #f1e6da; border-radius: 6px; padding: 22px 26px 10px; } .ba-contact .ba-contact-kaart h3 { margin: 0 0 12px; font-size: 1.05em; letter-spacing: .5px; text-transform: uppercase; color: #d05f22; } .ba-contact .ba-contact-kaart p { margin: 0 0 14px; line-height: 1.55; } .ba-contact .ba-contact-kaart a { color: #d05f22; font-weight: 600; } .ba-contact .ba-contact-knoppen { margin-top: 6px; } .ba-contact .ba-contact-knoppen .ba-over-knop { margin: 0 8px 8px 0; padding: 11px 20px; } .ba-contact .ba-contact-map { border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(58,8,0,.15); min-height: 320px; } .ba-contact .ba-contact-map iframe { width: 100% !important; height: 100% !important; min-height: 320px; display: block; border: 0; } .ba-contact .ba-contact-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } .ba-contact .ba-contact-fotos img { aspect-ratio: 4 / 3; object-fit: cover; } .ba-contact h3 { margin-top: 30px; } @media (max-width: 767px) { .ba-contact .ba-contact-grid { grid-template-columns: 1fr; } .ba-contact .ba-contact-fotos { grid-template-columns: 1fr 1fr; } .ba-contact .ba-contact-map { min-height: 260px; } } /* ======== 8.51 (14-09-2026) Agenda-grid knoppen, Zoek opleiding, Nieuw bij Barada (module 289) ======== */ /* JUX grid-kaarten (agenda): knop stond absoluut op links-onder zonder marge */ #sp-main-body .jux-loop-item-wrap .jux-eventon-readmore-jux-buynow { left: 15px !important; right: 15px !important; bottom: 15px !important; padding: 0 !important; text-align: left !important; } #sp-main-body .jux-loop-item-wrap .jux-eventon-readmore-jux-buynow a { display: inline-block !important; width: auto !important; min-width: 0 !important; padding: 10px 28px !important; letter-spacing: 1px; } #sp-main-body .jux-loop-item-wrap .jux-eveton-wrap { padding-bottom: 70px !important; } /* Zoek opleiding (JUX search, formulier #ZJSearchForm) */ .sp-module:has(#ZJSearchForm) .sp-module-content { background: #fff; padding: 14px; border-radius: 0 0 6px 6px; } #ZJSearchForm .keyword-field input.keyword, #ZJSearchForm .contract-field select, #ZJSearchForm .published-field input.datepicker { font-size: 14px !important; padding: 8px 12px !important; height: 42px !important; border: 1px solid #e6d9cb !important; border-radius: 6px !important; background: #fff !important; color: #3a0800; box-shadow: none !important; width: 100%; } #ZJSearchForm .keyword-field input.keyword:focus, #ZJSearchForm select:focus, #ZJSearchForm input.datepicker:focus { border-color: #f2793a !important; box-shadow: 0 0 0 3px rgba(242,121,58,.15) !important; outline: none; } #ZJSearchForm .published-field input.datepicker { padding-right: 36px !important; } #ZJSearchForm .published-field .jux-fa, #ZJSearchForm .jux-font-date i { color: #b9a28e !important; } #ZJSearchForm .keyword-field, #ZJSearchForm .contract-field, #ZJSearchForm .published-field { margin-bottom: 10px; } #ZJSearchForm .search-button input.btn { width: 100%; padding: 12px 20px !important; font-size: 14px !important; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; border-radius: 6px !important; background: #f2793a !important; border-color: #f2793a !important; transition: background .2s; } #ZJSearchForm .search-button input.btn:hover { background: #d05f22 !important; border-color: #d05f22 !important; } /* Nieuw bij Barada! (JUX events module, sidebar-layout, moduleclass ba-nieuw) */ .ba-nieuw .sp-module-title::after { content: "De nieuwste opleidingen op een rij"; display: block; font-size: .72em; letter-spacing: .8px; opacity: .9; margin-top: 2px; text-transform: uppercase; } .ba-nieuw #jux-eventon-event-sidebar ul { list-style: none; margin: 0; padding: 0; } .ba-nieuw #jux-eventon-event-sidebar li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1e6da; text-align: left; margin: 0; } .ba-nieuw #jux-eventon-event-sidebar li:last-child { border-bottom: 0; } .ba-nieuw .thumb-holder { flex: 0 0 46px; margin: 0 !important; } .ba-nieuw .event-date { display: block; background: #fdeee2; border-radius: 6px; text-align: center; padding: 5px 0; color: #d05f22; line-height: 1.1; } .ba-nieuw .event-date .month { display: block; font-size: .65em; text-transform: uppercase; letter-spacing: .5px; } .ba-nieuw .event-date .day { display: block; font-size: 1.1em; font-weight: 700; } .ba-nieuw h4 { margin: 0; font-size: .95em; text-transform: none; letter-spacing: 0; text-align: left; line-height: 1.3; } .ba-nieuw h4 a { color: #3a0800; font-weight: 700; } .ba-nieuw h4 a:hover { color: #d05f22; } /* ======== 8.52 (14-09-2026) Nieuw bij Barada: compacter ======== */ .ba-nieuw #jux-eventon-event-sidebar li { padding: 8px 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; } .ba-nieuw .thumb-holder { height: auto !important; line-height: 1; } .ba-nieuw .event-date { padding: 5px 0 !important; } .ba-nieuw .event-date > span, .ba-nieuw .event-date .month, .ba-nieuw .event-date .day { padding: 0 !important; display: block; line-height: 1.1; } .ba-nieuw .event-date .month, .ba-nieuw .event-date .day { color: #d05f22 !important; } .ba-nieuw h4 a { padding: 0 !important; text-decoration: none !important; } /* ======== 8.53 (14-09-2026) Nieuw bij Barada: uitlijning en JUX-restjes weg ======== */ .ba-nieuw #jux-eventon-event-sidebar li { background: transparent !important; box-shadow: none !important; padding: 10px 16px !important; border-bottom: 1px solid #f1e6da !important; } .ba-nieuw #jux-eventon-event-sidebar li:last-child { border-bottom: 0 !important; } .ba-nieuw .event-date { background: #fdeee2 !important; border: 0 !important; border-radius: 6px !important; width: 44px; } .ba-nieuw .event-date .month, .ba-nieuw .event-date .day { background: transparent !important; border: 0 !important; color: #d05f22 !important; width: auto; } .ba-nieuw h4 a { border: 0 !important; text-decoration: none !important; } /* ======== 8.54 (14-09-2026) Contactkaart: knoppen gestapeld ======== */ .ba-contact .ba-contact-knoppen { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .ba-contact .ba-contact-knoppen .ba-over-knop { display: block; width: 100%; text-align: center; margin: 0 !important; padding: 12px 16px !important; box-sizing: border-box; } /* ======== 8.55 (14-09-2026) Leeslijst .ba-leesmeer (gerelateerde artikelen) ======== */ .ba-leesmeer { margin-top: 34px; } .ba-leesmeer h3 { margin-bottom: 14px; } .ba-leesmeer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .ba-leesmeer li { margin: 0; } .ba-leesmeer li a { display: block; position: relative; background: #fdfaf6; border: 1px solid #f1e6da; border-left: 4px solid #f2793a; border-radius: 6px; padding: 14px 44px 14px 16px; color: #3a0800; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; } .ba-leesmeer li a::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #d05f22; border-top: 2px solid #d05f22; transform: translateY(-50%) rotate(45deg); } .ba-leesmeer li a:hover { background: #fdeee2; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(58,8,0,.10); color: #d05f22; } /* ==== 8.56 Leesbaarheid artikelteksten ==== */ [itemprop=articleBody] p,[itemprop=articleBody] li{font-weight:400;color:#3a0800} [itemprop=articleBody] p,[itemprop=articleBody] ul,[itemprop=articleBody] ol,[itemprop=articleBody] h2,[itemprop=articleBody] h3,[itemprop=articleBody] h4{max-width:800px} [itemprop=articleBody] p{margin:0 0 16px} [itemprop=articleBody] li{margin-bottom:6px} [itemprop=articleBody] h3{margin:34px 0 12px;line-height:1.3} [itemprop=articleBody] h2{margin:40px 0 14px;line-height:1.3} /* Uitzonderingen: eigen blokken houden hun eigen opmaak/breedte */ [itemprop=articleBody] .ba-kennis p,[itemprop=articleBody] .ba-over p,[itemprop=articleBody] .ba-contact p,[itemprop=articleBody] .ba-leesmeer li,[itemprop=articleBody] .jux-owl-demo p{max-width:none} [itemprop=articleBody] .ba-kennis h3,[itemprop=articleBody] .ba-over h3,[itemprop=articleBody] .ba-contact h3,[itemprop=articleBody] .ba-leesmeer h3{max-width:none} [itemprop=articleBody] .ba-leesmeer li{margin-bottom:0} /* ==== 8.56 JUX-blok "Aankomende opleiding" in artikel als kaart ==== */ [itemprop=articleBody] .jux-owl-demo .jux-col-md-6{width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important} [itemprop=articleBody] .jux-owl-demo .jux-loop-item{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:center;background:#fdfaf6;border:1px solid #f1e6da;border-radius:8px;padding:16px;margin:0 0 10px;max-width:760px;box-shadow:none} [itemprop=articleBody] .jux-owl-demo .jux-eveton-image img{width:100%;height:150px;object-fit:cover;border-radius:6px;display:block} [itemprop=articleBody] .jux-owl-demo .jux-eventon-title a{font-size:1.15em;font-weight:700;color:#3a0800;text-decoration:none} [itemprop=articleBody] .jux-owl-demo .jux-eventon-date{margin:6px 0 12px;color:#7a4a2e} [itemprop=articleBody] .jux-owl-demo .jux-eventon-readmore-jux-buynow{padding:0!important;text-align:left!important;margin:0!important;position:static!important} [itemprop=articleBody] .jux-owl-demo .jux-eventon-readmore-jux-buynow a{display:inline-block!important;width:auto!important;min-width:0!important;padding:10px 26px!important;letter-spacing:1px;margin:0!important} @media (max-width:640px){[itemprop=articleBody] .jux-owl-demo .jux-loop-item{grid-template-columns:1fr;gap:12px}[itemprop=articleBody] .jux-owl-demo .jux-eveton-image img{height:180px}} /* ################################################################ VERSIE 8.57 (14-09-2026) — LEESTIJD-MARKER + KAART ZONDER FEITEN Gebruik in een artikel:

    Leestijd ± 15 minuten

    bovenaan de tekst. Het artikel krijgt dan dezelfde witte kaart en foto-met-titel als een artikel met een feitentabel (.ba-feiten). De regels hieronder zijn een kopie van de .ba-feiten-regels met :has(.ba-leestijd) als voorwaarde. ################################################################ */ #sp-component .article-details:has(.ba-leestijd) { background: #fff; border-radius: var(--ba-radius); box-shadow: var(--ba-schaduw); padding: 30px 34px 36px !important; } #sp-component .article-details:has(.ba-leestijd) .page-header h1, #sp-component .article-details:has(.ba-leestijd) h1 { margin-top: 8px !important; } @media (max-width: 767px) { #sp-component .article-details:has(.ba-leestijd) { padding: 20px 18px 26px !important; } } /* ################################################################ VERSIE 8.18 (02-09-2026) HET OPLEIDINGS- EN VERKOOPARTIKEL KRIJGT DE KOP OP DE FOTO, NET ALS EEN BELEVINGSEVENT ---------------------------------------------------------------- WANNEER GEBEURT DIT VANZELF? Bij elk artikel dat twee dingen heeft: 1. een feitenblok bovenaan -> de tabel met class "ba-feiten" 2. een artikelfoto -> het veld Afbeeldingen, volledig Voldoet een artikel daaraan, dan wordt de foto vanzelf de banner van de kaart en ligt de titel er wit overheen. Nieuwe artikelen hoeven dus niets extra te krijgen. Wil je deze opmaak juist NIET bij een artikel? Laat de artikelfoto dan leeg, of gebruik geen ba-feiten-tabel. ################################################################ */ #sp-component .article-details:has(.ba-leestijd):has(> figure) { position: relative; } /* ---------- a. De foto vult de kaart tot aan de rand ---------- */ #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.article-full-image, #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.item-image { position: relative; margin: -30px -34px 0 !important; width: auto !important; padding: 0 !important; border-radius: var(--ba-radius) var(--ba-radius) 0 0; overflow: hidden; } #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.article-full-image::after, #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.item-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 8, 0, 0) 35%, rgba(58, 8, 0, .72) 100%); pointer-events: none; } #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.article-full-image img, #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.item-image img { height: 380px !important; border-radius: 0 !important; box-shadow: none !important; } /* ---------- b. De titel ligt onderin de foto ---------- */ #sp-component .article-details:has(.ba-leestijd):has(> figure) .article-header, #sp-component .article-details:has(.ba-leestijd):has(> figure) .page-header { position: absolute; top: 0; left: 0; right: 0; height: 380px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 34px 26px !important; margin: 0 !important; border: 0 !important; background: none !important; z-index: 2; pointer-events: none; } #sp-component .article-details:has(.ba-leestijd):has(> figure) .article-header h1, #sp-component .article-details:has(.ba-leestijd):has(> figure) .page-header h1 { color: #fff !important; font-size: 26px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; text-shadow: 0 2px 12px rgba(58, 8, 0, .5); } #sp-component .article-details:has(.ba-leestijd):has(> figure) .article-header .article-info, #sp-component .article-details:has(.ba-leestijd):has(> figure) .article-header .article-info * { color: #fff !important; text-shadow: 0 1px 8px rgba(58, 8, 0, .5); } /* ---------- c. Opsommingen met dezelfde vinkjes als het event ---------- */ #sp-component .article-details:has(.ba-leestijd) ul:not(.ba-lijst):not([class*="j2store"]) { list-style: none !important; padding-left: 0 !important; margin: 10px 0 16px !important; } #sp-component .article-details:has(.ba-leestijd) ul:not(.ba-lijst):not([class*="j2store"]) > li { position: relative; padding-left: 30px; margin-bottom: 8px; } #sp-component .article-details:has(.ba-leestijd) ul:not(.ba-lijst):not([class*="j2store"]) > li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ba-accent-zacht); box-shadow: inset 0 0 0 1.5px var(--ba-accent); } #sp-component .article-details:has(.ba-leestijd) ul:not(.ba-lijst):not([class*="j2store"]) > li::after { content: ""; position: absolute; left: 5px; top: 12px; width: 6px; height: 3px; border-left: 2px solid var(--ba-accent-donker); border-bottom: 2px solid var(--ba-accent-donker); transform: rotate(-45deg); } /* ---------- d. Mobiel: lagere banner, kleinere titel ---------- */ @media (max-width: 767px) { #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.article-full-image, #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.item-image { margin: -20px -18px 0 !important; } #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.article-full-image img, #sp-component .article-details:has(.ba-leestijd):has(> figure) > figure.item-image img { height: 260px !important; } #sp-component .article-details:has(.ba-leestijd):has(> figure) .article-header, #sp-component .article-details:has(.ba-leestijd):has(> figure) .page-header { height: 260px; padding: 0 18px 20px !important; } #sp-component .article-details:has(.ba-leestijd):has(> figure) .article-header h1, #sp-component .article-details:has(.ba-leestijd):has(> figure) .page-header h1 { font-size: 19px !important; letter-spacing: 1.6px !important; } } /* ---- de marker zelf ---- */ #sp-component [itemprop=articleBody] p.ba-leestijd{display:flex;align-items:center;gap:7px;margin:2px 0 24px!important;font-size:12.5px!important;letter-spacing:.8px!important;text-transform:uppercase;color:#b9a28e!important;font-weight:400!important;max-width:none} #sp-component [itemprop=articleBody] p.ba-leestijd::before{content:"";flex:0 0 auto;width:13px;height:13px;border:1.5px solid #b9a28e;border-radius:50%;box-sizing:border-box;background:linear-gradient(#b9a28e,#b9a28e) 50% 30%/1.5px 4px no-repeat,linear-gradient(#b9a28e,#b9a28e) 58% 50%/4px 1.5px no-repeat} /* ---- kop 4 in artikelen: 400 i.p.v. 300, en lucht erboven ---- */ [itemprop=articleBody] h4{font-weight:400!important;margin:26px 0 10px!important;line-height:1.35} [itemprop=articleBody] h4 strong{font-weight:400} /* ==== 8.58 Uitklapmenu desktop in de huisstijl ==== */ @media (min-width:992px){ .sp-megamenu-parent > li.sp-has-child > .sp-dropdown.sp-dropdown-main{width:auto!important;min-width:280px;padding-top:12px} .sp-megamenu-parent .sp-dropdown.sp-dropdown-main .sp-dropdown-inner{background:#fff!important;border:1px solid #f1e6da!important;border-top:3px solid #f2793a!important;border-radius:6px!important;box-shadow:0 12px 30px rgba(58,8,0,.10)!important;padding:8px 0!important} .sp-megamenu-parent .sp-dropdown .sp-dropdown-items > li.sp-menu-item{border:0!important;margin:0!important} .sp-megamenu-parent .sp-dropdown .sp-dropdown-items > li.sp-menu-item > a,.sp-megamenu-parent .sp-dropdown .sp-dropdown-items > li.sp-menu-item > span{display:block!important;white-space:nowrap!important;padding:10px 24px!important;font-size:14px!important;font-weight:400!important;line-height:1.35!important;color:#3a0800!important;letter-spacing:.2px;border-radius:0!important;transition:background .15s,color .15s} .sp-megamenu-parent .sp-dropdown .sp-dropdown-items > li.sp-menu-item + li.sp-menu-item > a,.sp-megamenu-parent .sp-dropdown .sp-dropdown-items > li.sp-menu-item + li.sp-menu-item > span{border-top:1px solid #f7efe7!important} .sp-megamenu-parent .sp-dropdown .sp-dropdown-items > li.sp-menu-item > a:hover,.sp-megamenu-parent .sp-dropdown .sp-dropdown-items > li.sp-menu-item.active > a{background:#fdeee2!important;color:#d05f22!important} } /* ################################################################ 8.59 (14-09-2026) CONTACTFOTO'S — 7 nieuwe foto's Rij 1: drie liggende foto's (leslokaal, terras, tuin) — elk 4/12 Rij 2: vier staande foto's (lunchruimte, keuken, lounge, toilet) — elk 3/12 Mobiel (<=767px): liggend over de volle breedte, staand twee naast elkaar. ################################################################ */ .ba-contact .ba-contact-fotos { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; } .ba-contact .ba-contact-fotos figure { margin: 0; grid-column: span 3; min-width: 0; } .ba-contact .ba-contact-fotos figure.ba-foto-liggend { grid-column: span 4; } .ba-contact .ba-contact-fotos figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 8px; box-shadow: 0 6px 18px rgba(58,8,0,.12); } .ba-contact .ba-contact-fotos figure.ba-foto-liggend img { aspect-ratio: 4 / 3; } .ba-contact .ba-contact-fotos figcaption { margin: 8px 0 0; font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; color: #b9a28e; line-height: 1.3; } @media (max-width: 767px) { .ba-contact .ba-contact-fotos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .ba-contact .ba-contact-fotos figure.ba-foto-liggend { grid-column: span 6; } } /* ################################################################ 8.60 (15-09-2026) ZELFSTUDIE OPLEIDINGEN - zijbalkblok (moduleclass: ba-zelfstudie) ---------------------------------------------------------------- Menu-module die de kinderen van het menu-item "Kennisbank" toont. Zelfde vorm als het oranje blok .ba-nieuw, maar in het roze van de Kennisbank-kolom op de homepage. LET OP: --ba-roze wordt verderop in dit bestand door een latere :root opnieuw gezet en rekent inmiddels oranje uit. Daarom staat het roze hier als eigen variabele op het blok zelf, zodat de cascade hem niet kan overschrijven. ################################################################ */ .ba-zelfstudie { --zs-roze: #d1667b; /* zelfde roze als .ba-kolomkop op de homepage */ --zs-roze-donker: #b9536a; /* hover op de links */ --zs-roze-zacht: #f9e9ec; /* zachte achtergrond bij hover */ --zs-lijn: #f3dde2; /* scheidingslijn tussen de items */ } /* ---------- kopbalk ---------- De gedeelde regel #sp-right .sp-module > h3.sp-module-title zet de hele vorm (padding, lettergrootte, spatiering) al met !important, en de achtergrond via --ba-accent. Alleen de kleur hoeft hier dus overschreven: zelfde kracht, een tikje meer specificiteit. */ #sp-right .sp-module.ba-zelfstudie > h3.sp-module-title { background: var(--zs-roze) !important; color: #fff !important; } .ba-zelfstudie .sp-module-title::after { content: "In je eigen tempo online leren"; display: block; margin-top: 2px; font-size: .72em; letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.85); } /* ---------- lijst met opleidingen ---------- */ .ba-zelfstudie .sp-module-content { background: #fff; padding: 4px 22px 8px; } .ba-zelfstudie ul.mod-menu { list-style: none; margin: 0; padding: 0; } .ba-zelfstudie ul.mod-menu > li { margin: 0; } /* De zijbalk legt zelf al een lijn onder elke link. Die kleuren we mee in plaats van er een tweede lijn op de li naast te zetten - anders staan er twee dunne lijntjes op elkaar en blijft er onder het laatste item een streepje hangen. */ #sp-right .sp-module.ba-zelfstudie .sp-module-content ul.mod-menu > li > a { border-bottom: 1px solid var(--zs-lijn) !important; } #sp-right .sp-module.ba-zelfstudie .sp-module-content ul.mod-menu > li:last-child > a { border-bottom: 0 !important; } .ba-zelfstudie ul.mod-menu > li > a { display: block; padding: 12px 0; text-align: left; line-height: 1.35; font-weight: 600; color: var(--ba-tekst); text-decoration: none; transition: color .18s ease; } /* De zijbalk zet linkkleur en hover-achtergrond met !important via een zware selector (#sp-right .sp-module .sp-module-content a:not(...)). Die verslaan lukt alleen door dezelfde vorm te spiegelen en er .ba-zelfstudie bij te zetten; anders slaat de oranje hover door. */ #sp-right .sp-module.ba-zelfstudie .sp-module-content a:not(.jmodedit):not(.uk-button):not(.btn):hover, #sp-right .sp-module.ba-zelfstudie .sp-module-content a:not(.jmodedit):not(.uk-button):not(.btn):focus { background: var(--zs-roze-zacht) !important; color: var(--zs-roze-donker) !important; } /* De pagina waar de bezoeker nu is: alleen de tekst in het roze. Bewust geen bolletje ervoor - dat oogde onrustig. */ #sp-right .sp-module.ba-zelfstudie .sp-module-content ul.mod-menu > li.current > a { color: var(--zs-roze) !important; } /* ---------- mobiel iets compacter ---------- */ @media (max-width: 767px) { .ba-zelfstudie .sp-module-title { padding: 15px 18px 13px; } .ba-zelfstudie .sp-module-content { padding: 4px 18px 6px; } } /* ################################################################ 8.61 (15-09-2026) KENNISBANK - overzicht van alle zelfstudieopleidingen ---------------------------------------------------------------- Het menu-item Kennisbank toont de J2Commerce-productlijst van categorie "Zelfstudie opleidingen". Zet je een nieuwe opleiding in die categorie en maak je er een product van, dan verschijnt hij hier vanzelf - er hoeft niets handmatig bijgewerkt te worden. ################################################################ */ /* De subcategorie-knop herhaalt alleen de paginatitel erboven. */ .j2commerce-product-list .j2commerce-subcategory-nav { display: none; } .j2commerce-product-list .j2commerce-category-title { margin-bottom: 4px; } /* ---------- de kaarten ---------- */ .j2commerce-product-list .j2commerce-product-item { display: flex; flex-direction: column; height: 100%; padding: 22px; background: #fff; border: 1px solid #f0e6df; border-radius: var(--ba-radius, 6px); box-shadow: 0 4px 22px rgba(0,0,0,.05); transition: box-shadow .2s ease, transform .2s ease; } .j2commerce-product-list .j2commerce-product-item:hover { box-shadow: 0 10px 30px rgba(0,0,0,.09); transform: translateY(-2px); } .j2commerce-product-list .j2commerce-product-title { font-size: 16px !important; line-height: 1.35; margin: 0 0 10px; } /* ---------- knop binnen de kaart houden ---------- De sitebrede knopstijl zet een vaste breedte, waardoor de knop buiten de kaart viel. Hier mag hij meeschalen met de kolom. */ .j2commerce-product-list .j2commerce-cart-buttons .input-group { width: 100%; } .j2commerce-product-list .j2commerce-cart-button { width: auto !important; min-width: 0 !important; flex: 1 1 auto; margin-left: 10px; white-space: nowrap; } .j2commerce-product-list .qty-input { flex: 0 0 64px; max-width: 64px; } @media (max-width: 767px) { .j2commerce-product-list .j2commerce-product-item { padding: 18px; } } /* ---------- 8.62: productfoto's gelijktrekken ---------- De originelen hebben verschillende verhoudingen (liggend en staand), waardoor de kaarten ongelijk werden. Met een vaste verhouding en object-fit staat alles weer op één lijn. */ .j2commerce-product-list .j2commerce-product-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; margin-bottom: 14px; } /* ==== BA2026-REIS-START ==== */ .ba-reis-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; background:#fdf3ec; border:1px solid #f3ddcd; border-radius:12px; padding:24px 28px; margin:26px 0 30px; } .ba-reis-cta-tekst{ display:flex; flex-direction:column; gap:4px; flex:1 1 240px; min-width:0; } .ba-reis-cta-tekst strong{ font-size:19px; line-height:1.3; color:#3a0800; } .ba-reis-cta-tekst span{ font-size:15px; line-height:1.4; color:#6b4a3a; } a.ba-cta, a.ba-cta:link, a.ba-cta:visited{ display:inline-block; background:#f2793a; color:#fff !important; border:0; border-radius:6px; padding:14px 28px; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-decoration:none !important; white-space:nowrap; box-shadow:0 3px 12px rgba(242,121,58,.32); transition:background-color .18s ease, transform .18s ease; } a.ba-cta:hover, a.ba-cta:focus{ background:#d05f22; color:#fff !important; transform:translateY(-1px); } .ba-reis-fotos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin:30px 0 10px; } .ba-reis-fotos a{ display:block; line-height:0; } .ba-reis-fotos img{ width:100% !important; height:200px !important; object-fit:cover; border-radius:10px; display:block; margin:0 !important; float:none !important; } .ba-reis-hero img{ border-radius:12px; display:block; width:100%; height:auto; } @media (max-width:600px){ .ba-reis-cta{ padding:20px; } a.ba-cta{ width:100%; text-align:center; white-space:normal; letter-spacing:1.4px; } .ba-reis-fotos img{ height:170px !important; } } /* ==== BA2026-REIS-EIND ==== */ /* ==== BA2026-BOEKNU-CSS-START ==== */ .ba-boeknu{ margin:0 0 24px !important; } .ba-boeknu a.ba-cta{ font-size:14px; padding:15px 34px; } form.j2commerce-addtocart-form, .j2commerce-product-item, [id^="j2commerce-addtocart-form"]{ scroll-margin-top:140px; } .ba-boeknu-licht{ box-shadow:0 0 0 3px rgba(208,95,34,.45); border-radius:10px; transition:box-shadow .3s ease; } @media (max-width:600px){ .ba-boeknu a.ba-cta{ width:100%; text-align:center; } } /* ==== BA2026-BOEKNU-CSS-EIND ==== */ /* ===== BA2026-WINKELWAGEN ===== */ /* De module rendert een leeg omhulsel als de wagen leeg is; daarom hangt alles aan .j2commerce-cart-module */ .sp-module.ba-winkelwagen{display:none;} .sp-module.ba-wagen-knop{display:none;} .sp-module.ba-winkelwagen:has(.j2commerce-cart-summary){display:block;position:fixed;right:22px;bottom:165px;z-index:9990;width:300px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #f0ddd0;border-bottom:none;border-radius:14px 14px 0 0;box-shadow:0 10px 34px rgba(58,8,0,.18);padding:16px 18px 6px;margin:0;max-height:none;overflow:visible;} body:has(.j2commerce-cart-summary) .sp-module.ba-wagen-knop{display:block;position:fixed;right:22px;bottom:104px;z-index:9991;width:300px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #f0ddd0;border-top:none;border-radius:0 0 14px 14px;box-shadow:0 10px 34px rgba(58,8,0,.18);padding:0 18px 16px;margin:0;} .sp-module.ba-winkelwagen .sp-module-title{display:none;} .sp-module.ba-winkelwagen > .jmodedit, .sp-module.ba-wagen-knop > .jmodedit, .sp-module.ba-winkelwagen > [id^='tip-'], .sp-module.ba-wagen-knop > [id^='tip-']{display:none !important;} .ba-winkelwagen .j2commerce-cart-summary{font-size:14px;color:#3a0800;margin-bottom:10px !important;border-bottom:1px solid #f4e7dd;padding-bottom:8px;} .ba-winkelwagen .j2commerce-cart-item-list{max-height:190px;overflow:auto;font-size:13px;} .ba-winkelwagen .list-group-item{border-color:#f4e7dd;padding-top:8px;padding-bottom:8px;} .ba-winkelwagen .j2commerce-minicart-item .d-flex.justify-content-between.align-items-center.mt-1{display:none !important;} .ba-winkelwagen table{font-size:13px;margin-bottom:10px;} .ba-winkelwagen table tr:last-child th,.ba-winkelwagen table tr:last-child td{padding-bottom:0;} .ba-wagen-knop .ba-wagen-cta{margin:0;} .ba-wagen-knop a.ba-cta{display:block;text-align:center;width:100%;padding:12px 10px;font-size:12px;} @media (max-width:600px){.sp-module.ba-winkelwagen:has(.j2commerce-cart-summary){right:12px;left:12px;bottom:150px;width:auto;} body:has(.j2commerce-cart-summary) .sp-module.ba-wagen-knop{right:12px;left:12px;bottom:94px;width:auto;}} /* ===== EINDE BA2026-WINKELWAGEN ===== */ /* ===== BA2026-SLIDE-ROZE ===== */ .ba-slide.ba-slide-roze .ba-slide-knop{background:#d1667b !important;border-color:#d1667b !important;color:#fff !important;} .ba-slide.ba-slide-roze:hover .ba-slide-knop{background:#b9536a !important;border-color:#b9536a !important;} /* ===== EINDE BA2026-SLIDE-ROZE ===== */ /* ===== BA2026-GEEN-TUSSENTOTAAL ===== */ /* de regel Tussentotaal weglaten: prijzen zijn incl. btw, dus tussentotaal en totaal zijn gelijk */ table.cart-footer tbody tr:first-child, table.cart-footer > tr:first-child{display:none !important;} .j2commerce-cart-module table tbody tr:first-child{display:none !important;} /* ===== EINDE BA2026-GEEN-TUSSENTOTAAL ===== */ /* ===== BA2026-PRODUCT ===== */ .j2c-product-detail-info{display:flex;flex-direction:column;} .j2c-product-detail-info > .product-title{order:1;margin-bottom:6px;} .j2c-product-detail-info > .product-sdesc{order:2;margin-bottom:20px !important;} .j2c-product-detail-info > .sku-price-container{order:3;margin-bottom:20px !important;} .j2c-product-detail-info > .stock-brand-container{order:4;display:none !important;} .j2c-product-detail-info > .j2commerce-addtocart-form{order:5;margin-bottom:0 !important;} .j2c-product-detail-info .product-sdesc h2{font-size:15px !important;letter-spacing:2px;text-transform:uppercase;margin:0 !important;font-weight:500;color:#a8785c !important;} .j2c-product-detail-info .product-sdesc h2 br{display:none;} .j2c-product-detail-info .product-sdesc h2 strong{font-weight:700;color:#d05f22 !important;} .j2c-product-detail-info .ba-boeknu{display:none !important;} .j2c-product-detail-info .sku-price-container{display:block !important;} .j2c-product-detail-info .sku-price-container > [class*='col-']{width:100% !important;max-width:100% !important;flex:0 0 auto !important;} .j2c-product-detail-info .j2commerce-product-price-container{margin-bottom:4px !important;} .j2c-product-detail-info .j2commerce-product-price{font-size:30px;font-weight:700;color:#3a0800;} .j2c-product-detail-info .product-sku{text-align:left !important;font-size:12px;letter-spacing:1px;} .j2c-product-detail-info .product-add-to-cart-group .count-input{display:none !important;} .j2c-product-detail-info .product-add-to-cart-group{display:block !important;} .j2c-product-detail-info .j2commerce-cart-button{width:100% !important;border-radius:999px !important;padding:15px 24px !important;font-size:13px;letter-spacing:2px;text-transform:uppercase;background:#d05f22 !important;border-color:#d05f22 !important;color:#fff !important;} .j2c-product-detail-info .j2commerce-cart-button:hover{background:#b64f18 !important;border-color:#b64f18 !important;} /* ===== EINDE BA2026-PRODUCT ===== */ /* ===== BA2026-BOEKNU-IN-FOTO ===== */ /* De knop Boek nu ligt rechtsonder in de sfeerfoto, tegenover de titel */ #sp-component .article-details:has(.ba-feiten):has(> figure) .ba-boeknu, #sp-component .article-details:has(.ba-leestijd):has(> figure) .ba-boeknu{position:absolute;top:0;left:0;right:0;height:380px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:0 34px 34px !important;margin:0 !important;max-width:none !important;width:auto !important;z-index:3;pointer-events:none;} #sp-component .article-details:has(.ba-feiten):has(> figure) .ba-boeknu a.ba-cta, #sp-component .article-details:has(.ba-leestijd):has(> figure) .ba-boeknu a.ba-cta{pointer-events:auto;box-shadow:0 6px 20px rgba(58,8,0,.45);} @media (max-width:767px){#sp-component .article-details:has(.ba-feiten):has(> figure) .ba-boeknu, #sp-component .article-details:has(.ba-leestijd):has(> figure) .ba-boeknu{position:static;height:auto;display:block;padding:0 !important;margin:0 0 22px !important;}} /* titel houdt ruimte vrij voor de knop */ #sp-component .article-details:has(.ba-boeknu):has(> figure) .article-header h1{padding-right:176px !important;} /* boeknu-titelruimte */ @media (max-width:767px){#sp-component .article-details:has(.ba-boeknu):has(> figure) .article-header h1{padding-right:0 !important;}} /* ===== EINDE BA2026-BOEKNU-IN-FOTO ===== */ /* ===== BA2026-EVENT-BOEKNU ===== */ /* Boek nu-knop rechtsonder in de sfeerfoto van een evenement (desktop). Op mobiel blijft dezelfde knop de vaste balk onderaan. */ @media (min-width:768px){ #jux-event-detail .jux-icon-description{position:relative;} #jux-event-detail .ba-sticky-boek{display:flex !important;position:absolute;top:-22px;right:23px;transform:translateY(-100%);z-index:5;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;margin:0;border:0;width:auto;max-width:none;align-items:center;} #jux-event-detail .ba-sticky-boek .ba-sticky-prijs{display:none !important;} #jux-event-detail .ba-sticky-boek a{display:inline-block;background:#f2793a;color:#fff !important;border:0;border-radius:6px;padding:14px 28px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none !important;white-space:nowrap;box-shadow:0 6px 20px rgba(58,8,0,.45);transition:background-color .18s ease, transform .18s ease;} #jux-event-detail .ba-sticky-boek a:hover{background:#d05f22;transform:translateY(-1px);} #jux-event-detail .jux-event-title{padding-right:190px;} } /* ===== EINDE BA2026-EVENT-BOEKNU ===== */ /* ===== BA2026-AGENDA ===== */ /* knoppen op de agendakaarten (GRATIS / INFO) */ #sp-component .jux-eventon-button > a{display:inline-block;font-size:12px !important;font-weight:700 !important;letter-spacing:2px !important;line-height:1 !important;text-transform:uppercase;padding:13px 26px !important;border-radius:6px !important;background:#f2793a !important;border:0 !important;color:#fff !important;text-decoration:none !important;box-shadow:0 3px 12px rgba(242,121,58,.32);transition:background-color .18s ease, transform .18s ease;} #sp-component .jux-eventon-button > a:hover, #sp-component .jux-eventon-button > a:focus{background:#d05f22 !important;color:#fff !important;transform:translateY(-1px);} /* blok ZOEK OPLEIDING - binnenruimte, want padding op .sp-module-content wordt elders overschreven */ .sp-module:has(#realty-search-vertical){overflow:hidden;box-shadow:0 8px 26px rgba(58,8,0,.10);} #ZJSearchForm{display:block;padding:18px 20px 20px;} #ZJSearchForm .jux-search-form > div{margin:0 0 12px !important;} #ZJSearchForm .jux-search-form > .clearfix{margin:0 !important;} #ZJSearchForm .box-right{margin-top:4px;} #ZJSearchForm input.btn{width:100% !important;font-size:12px !important;font-weight:700 !important;letter-spacing:2px !important;text-transform:uppercase;padding:14px 20px !important;border:0 !important;border-radius:6px !important;background:#f2793a !important;color:#fff !important;box-shadow:0 3px 12px rgba(242,121,58,.32);transition:background-color .18s ease;} #ZJSearchForm input.btn:hover{background:#d05f22 !important;} @media (max-width:991px){#ZJSearchForm{padding:16px 16px 18px;}} /* ===== EINDE BA2026-AGENDA ===== */ /* ===== BA2026-BLOG ===== */ /* Overzichtskaarten: foto bovenin, volle breedte, gelijke hoogte */ #sp-component .blog .article .article-intro-image, #sp-component .blog .article a > .article-intro-image{float:none !important;display:block !important;width:100% !important;max-width:none !important;margin:0 0 20px !important;padding:0 !important;height:230px;border-radius:8px;overflow:hidden;} #sp-component .blog .article .article-intro-image img{width:100% !important;height:100% !important;object-fit:cover;display:block;border-radius:0 !important;margin:0 !important;} #sp-component .blog .article > a{display:block;} #sp-component .blog .article .article-header{margin:0 0 10px;} /* leestijd hoort bij het artikel zelf, niet op het overzicht */ #sp-component .blog .article .ba-leestijd{display:none !important;} /* Lees meer-knop in de huisstijl */ #sp-component .blog .article a.uk-button{display:inline-block;font-size:12px !important;font-weight:700 !important;letter-spacing:2px !important;line-height:1 !important;text-transform:uppercase;padding:13px 26px !important;border-radius:6px !important;background:#f2793a !important;color:#fff !important;border:0 !important;text-decoration:none !important;box-shadow:0 3px 12px rgba(242,121,58,.32);transition:background-color .18s ease, transform .18s ease;} #sp-component .blog .article a.uk-button:hover, #sp-component .blog .article a.uk-button:focus{background:#d05f22 !important;color:#fff !important;transform:translateY(-1px);} @media (max-width:767px){#sp-component .blog .article .article-intro-image{height:180px;}} /* ===== EINDE BA2026-BLOG ===== */ /* ===== BA2026-GEEN-OVERZICHTKOP ===== */ /* JUX EventOn zet boven de lijst een generieke kop "Overzicht"; die is overbodig */ #jux_eventon_event_list > .jux-event-title{display:none !important;} /* ===== EINDE BA2026-GEEN-OVERZICHTKOP ===== */ /* ===== BA2026-MEER-WETEN ===== */ /* Verwijsblok van een event naar het vaste artikel. Gebruik in een event:

    korte zin

    Lees alles over ...

    */ #sp-component .ba-meer{margin:30px 0 34px;padding:24px 26px;background:#fffaf5;border:1px solid #f0ddd0;border-left:4px solid #f2793a;border-radius:10px;} #sp-component .ba-meer p{margin:0 0 16px !important;max-width:none;} #sp-component .ba-meer p:last-child{margin:0 !important;} #sp-component .ba-meer a{display:inline-block;background:#f2793a;color:#fff !important;border:0;border-radius:6px;padding:13px 26px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none !important;box-shadow:0 3px 12px rgba(242,121,58,.32);transition:background-color .18s ease, transform .18s ease;} #sp-component .ba-meer a:hover,#sp-component .ba-meer a:focus{background:#d05f22;color:#fff !important;transform:translateY(-1px);} @media (max-width:767px){#sp-component .ba-meer{padding:18px 18px 20px;}#sp-component .ba-meer a{display:block;text-align:center;}} /* ===== EINDE BA2026-MEER-WETEN ===== */ /* ===== BA2026-STICKY-ZIJKANT (v3: bovenste zijbalkblok loopt mee tot het einde van het artikel) ===== */ @media (min-width:992px){ /* De zijkolom is standaard net zo hoog als haar eigen inhoud; daardoor stopte het meelopen halverwege. Alleen de rij mét de zijbalk wordt uitgerekt, zodat sticky over de hele artikellengte werkt. */ #sp-main-body > .container > .container-inner > .row{align-items:stretch;} /* Deze wrappers hebben overflow staan; daardoor blijft sticky hangen. Alleen de horizontale kant wordt afgeknipt. */ .body-innerwrapper,.background-wrapper,.body-wrapper{overflow-x:clip;overflow-y:visible;} #sp-right{position:static;max-height:none;overflow:visible;align-self:stretch;} #sp-right > .sp-column{height:100%;} /* De hele kolom vastzetten gaf afgeknipte blokken op lage schermen. Nu blijft alleen het eerste blok staan. */ #sp-right .sp-module:first-child{position:sticky;top:110px;z-index:5;max-height:calc(100vh - 130px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#e6d9cb transparent;} #sp-right .sp-module:first-child::-webkit-scrollbar{width:6px;} #sp-right .sp-module:first-child::-webkit-scrollbar-thumb{background:#e6d9cb;border-radius:3px;} #sp-right .sp-module:first-child::-webkit-scrollbar-track{background:transparent;} } /* ===== EINDE BA2026-STICKY-ZIJKANT ===== */ /* ===== BA2026-PRAKTISCH-RUSTIG ===== */ /* In de praktische tabel van een event is de eerste rij gewoon inhoud (de datums), geen kopregel. Alleen de labels links (th) blijven oranje. */ #jux-event-detail table:not(.ba-feiten) tr:first-child td, #jux-event-detail table:not(.ba-feiten) tr:first-child td p, #jux-event-detail table:not(.ba-feiten) tr:first-child td strong, #jux-event-detail table:not(.ba-feiten) tr:first-child td span{ background:transparent !important; color:var(--ba-tekst) !important; font-weight:400 !important; letter-spacing:normal !important; text-transform:none !important; font-size:15px !important; line-height:1.6 !important; } #jux-event-detail table:not(.ba-feiten) tr:first-child td{ border-bottom:1px solid #f3ede8 !important; } /* ===== EINDE BA2026-PRAKTISCH-RUSTIG ===== */ /* ===== BA2026-REISFOTOS ===== */ /* Fotogalerij van de coachingsreis: drie op een rij, allemaal even groot. */ #sp-component .ba-reis-fotos{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:14px !important;margin:34px 0 10px !important;max-width:none !important;} #sp-component .ba-reis-fotos figure, #sp-component .ba-reis-fotos a{margin:0 !important;padding:0 !important;display:block;border-radius:8px;overflow:hidden;background:#f3ede8;line-height:0;} #sp-component .ba-reis-fotos img{width:100% !important;height:190px !important;object-fit:cover;display:block;margin:0 !important;border-radius:0 !important;transition:transform .35s ease;} #sp-component .ba-reis-fotos figure:hover img, #sp-component .ba-reis-fotos a:hover img{transform:scale(1.04);} @media (max-width:991px){#sp-component .ba-reis-fotos{grid-template-columns:repeat(2,1fr) !important;}#sp-component .ba-reis-fotos img{height:170px !important;}} @media (max-width:575px){#sp-component .ba-reis-fotos{grid-template-columns:1fr !important;}#sp-component .ba-reis-fotos img{height:200px !important;}} /* ===== EINDE BA2026-REISFOTOS ===== */ /* ===== BA2026-LEESBAARHEID ===== */ /* 1. Regellengte en tekstgrootte. De regels waren ongeveer 98 tekens; prettig lezen is 60-75. Grotere letter + smallere tekstkolom geeft ongeveer 75 tekens. */ #sp-component .article-details p, #sp-component .article-details li, #jux-event-detail .jux-event-description p, #jux-event-detail .jux-event-description li{ font-size:17.5px !important; line-height:1.72 !important; } #sp-component .article-details p, #sp-component .article-details ul, #sp-component .article-details ol, #sp-component .article-details blockquote{ max-width:680px !important; } #sp-component .article-details p{margin-bottom:20px !important;} /* blokken die de volle breedte nodig hebben blijven ongemoeid */ #sp-component .article-details .ba-feiten, #sp-component .article-details table, #sp-component .article-details .ba-meer, #sp-component .article-details .ba-meer p, #sp-component .article-details .ba-faq, #sp-component .article-details .ba-faq p, #sp-component .article-details .ba-reis-fotos, #sp-component .article-details .ba-reis-cta, #sp-component .article-details .ba-boeknu, #sp-component .article-details figure, #sp-component .article-details .ba-leestijd{max-width:none !important;} /* 2. Koppen duidelijker onderscheiden van de lopende tekst. H2 (sectiekop) blijft in hoofdletters, H3 en H4 niet: die lezen sneller in gewone schrijfwijze. */ #sp-component .article-details h3{ font-size:21px !important; font-weight:600 !important; text-transform:none !important; letter-spacing:0 !important; line-height:1.35 !important; margin-top:48px !important; margin-bottom:14px !important; } #sp-component .article-details h4{ font-size:17.5px !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; color:var(--ba-tekst) !important; margin-top:30px !important; margin-bottom:10px !important; } @media (max-width:767px){ #sp-component .article-details p, #sp-component .article-details li{font-size:17px !important;} #sp-component .article-details h3{font-size:19.5px !important;margin-top:36px !important;} } /* ===== EINDE BA2026-LEESBAARHEID ===== */ /* ===== BA2026-HIGHLIGHTS (kaart op de homepage: tekst verticaal midden, nettere regelafbreking) ===== */ #s5textrotatecls_otr > .s5textrotatecls{height:100%;align-content:center;} #s5textrotatecls_otr p br:first-child{display:none;} #s5textrotatecls_otr h3,#s5textrotatecls_otr h4,#s5textrotatecls_otr p{text-wrap:balance;} #s5textrotatecls_otr p{max-width:30ch;margin-left:auto;margin-right:auto;line-height:1.5;} #s5textrotatecls_otr p:has(> a){max-width:none;} /* ===== EINDE BA2026-HIGHLIGHTS ===== */ /* ===== BA2026-KERNBLOK (In het kort) ===== */ #sp-component .ba-kern{margin:26px 0 34px;padding:22px 26px 8px;background:#fff6ef;border:1px solid #f3ded0;border-radius:12px;max-width:none !important;} #sp-component .ba-kern .ba-kern-kop{margin:0 0 14px !important;font-size:12px !important;font-weight:700 !important;letter-spacing:2px;text-transform:uppercase;color:#d05f22 !important;max-width:none !important;} #sp-component .ba-kern ul{list-style:none !important;margin:0 !important;padding:0 !important;max-width:none !important;} #sp-component .ba-kern li{position:relative;padding:0 0 0 28px;margin:0 0 12px !important;font-size:16.5px !important;line-height:1.6 !important;} #sp-component .ba-kern li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:#f2793a;} #sp-component .ba-kern li:last-child{margin-bottom:16px !important;} @media (max-width:767px){#sp-component .ba-kern{padding:18px 18px 6px;}#sp-component .ba-kern li{font-size:16px !important;}} /* ===== EINDE BA2026-KERNBLOK ===== */ /* ===== BA2026-INHOUDSOPGAVE ===== */ #sp-component .ba-inhoud{margin:24px 0 34px;padding:20px 24px 16px;background:#fbf7f3;border:1px solid #efe3d8;border-radius:12px;max-width:none !important;} #sp-component .ba-inhoud .ba-inhoud-kop{margin:0 0 12px !important;font-size:12px !important;font-weight:700 !important;letter-spacing:2px;text-transform:uppercase;color:#8a6a55 !important;max-width:none !important;} #sp-component .ba-inhoud ul{list-style:none !important;margin:0 !important;padding:0 !important;max-width:none !important;columns:2;column-gap:34px;} #sp-component .ba-inhoud li{margin:0 0 9px !important;padding:0 0 0 16px;position:relative;break-inside:avoid;font-size:16px !important;line-height:1.45 !important;} #sp-component .ba-inhoud li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:1px;background:#d9c6b6;} #sp-component .ba-inhoud a{color:var(--ba-tekst) !important;text-decoration:none !important;border-bottom:1px solid transparent;} #sp-component .ba-inhoud a:hover,#sp-component .ba-inhoud a:focus{color:#d05f22 !important;border-bottom-color:#d05f22;} #sp-component .article-details h2[id],#sp-component .article-details h3[id]{scroll-margin-top:120px;} @media (max-width:767px){#sp-component .ba-inhoud ul{columns:1;}#sp-component .ba-inhoud{padding:16px 18px 12px;}} /* ===== EINDE BA2026-INHOUDSOPGAVE ===== */ /* ===== BA2026-CTA-ZIJ (aankomende opleiding: kaart in de zijbalk, vaste balk op mobiel) ===== */ .sp-module.ba-cta-zij-mod{background:#fffaf5;border:1px solid #f0ddd0;border-top:4px solid #f2793a;border-radius:10px;box-shadow:0 8px 26px rgba(58,8,0,.10);} #sp-right .sp-module.ba-cta-zij-mod{overflow:visible !important;box-shadow:0 8px 26px rgba(58,8,0,.10);} .sp-module.ba-cta-zij-mod > .sp-module-title{margin:0 !important;padding:16px 18px 0 !important;background:none !important;font-size:12px !important;font-weight:700 !important;letter-spacing:2px !important;text-transform:uppercase;color:#d05f22 !important;line-height:1.45 !important;} #sp-right .ba-cta-zij-mod .sp-module-content{padding:16px 18px 18px !important;background:#fffaf5 !important;overflow:visible !important;} .ba-cta-zij-mod .jux-event-item,.ba-cta-zij-mod #jux-eventon-event-sidebar{overflow:visible !important;height:auto !important;} .ba-cta-zij-mod .jux-event-item ul{list-style:none !important;margin:0 !important;padding:0 !important;} .ba-cta-zij-mod .jux-event-item li{display:flex !important;flex-wrap:wrap;align-items:flex-start;gap:12px;overflow:visible !important;height:auto !important;min-height:0 !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;} .ba-cta-zij-mod .jux-event-item li + li{margin-top:16px !important;padding-top:16px !important;border-top:1px solid #f3e6da !important;} .ba-cta-zij-mod .thumb-holder{flex:0 0 auto;margin:0 !important;padding:0 !important;} .ba-cta-zij-mod .event-date{display:block;width:50px;border:1px solid #f0ddd0;border-radius:6px;overflow:hidden;text-align:center;background:#fff;} .ba-cta-zij-mod .event-date .month{display:block;background:#f2793a;color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 0;} .ba-cta-zij-mod .event-date .day{display:block;font-size:19px;font-weight:700;color:var(--ba-tekst);padding:4px 0 5px;line-height:1;} .ba-cta-zij-mod h4{flex:1 1 130px;min-width:0;margin:0 !important;padding:0 !important;font-size:15px !important;line-height:1.35 !important;text-transform:none !important;letter-spacing:0 !important;} .ba-cta-zij-mod h4 a{display:block;color:var(--ba-tekst) !important;font-weight:700;text-decoration:none !important;padding:0 !important;} .ba-cta-zij-mod h4 a::after{content:"Bekijk data en inschrijven";display:block;margin-top:12px;background:#f2793a;color:#fff;border-radius:6px;padding:12px 14px;text-align:center;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;box-shadow:0 3px 12px rgba(242,121,58,.32);transition:background-color .18s ease;} .ba-cta-zij-mod h4 a:hover::after,.ba-cta-zij-mod h4 a:focus::after{background:#d05f22;} @media (max-width:991px){ .sp-module.ba-cta-zij-mod{position:fixed !important;left:0;right:0;bottom:0;top:auto !important;z-index:999;margin:0 !important;border:0;border-top:1px solid #f0ddd0;border-radius:0;box-shadow:0 -4px 18px rgba(58,8,0,.14);max-height:none !important;} .sp-module.ba-cta-zij-mod > .sp-module-title{display:none !important;} #sp-right .ba-cta-zij-mod .sp-module-content{padding:9px 12px !important;padding-bottom:calc(9px + env(safe-area-inset-bottom)) !important;background:rgba(255,255,255,.97) !important;} .ba-cta-zij-mod .jux-event-item li + li{display:none !important;} .ba-cta-zij-mod .jux-event-item li{flex-wrap:nowrap !important;align-items:center;gap:10px;} .ba-cta-zij-mod .event-date{width:42px;} .ba-cta-zij-mod .event-date .day{font-size:16px;padding:3px 0 4px;} .ba-cta-zij-mod h4{flex:1 1 auto;font-size:13px !important;line-height:1.25 !important;} .ba-cta-zij-mod h4 a{display:flex;align-items:center;justify-content:space-between;gap:10px;} .ba-cta-zij-mod h4 a::after{content:"Inschrijven";margin:0;flex:0 0 auto;white-space:nowrap;padding:11px 14px;font-size:10.5px;letter-spacing:1.5px;} body:has(.ba-cta-zij-mod){padding-bottom:88px;} } /* ===== EINDE BA2026-CTA-ZIJ ===== */ /* ===== BA2026-VERDER (lees ook - interne links onderaan een artikel) ===== */ #sp-component .ba-verder{margin:36px 0 10px;padding:22px 26px 10px;background:#fbf7f3;border:1px solid #efe3d8;border-radius:12px;max-width:none !important;} #sp-component .ba-verder .ba-verder-kop{margin:0 0 14px !important;font-size:12px !important;font-weight:700 !important;letter-spacing:2px;text-transform:uppercase;color:#8a6a55 !important;max-width:none !important;} #sp-component .ba-verder ul{list-style:none !important;margin:0 !important;padding:0 !important;max-width:none !important;} #sp-component .ba-verder li{margin:0 0 12px !important;padding:0 0 0 22px;position:relative;font-size:16.5px !important;line-height:1.55 !important;} #sp-component .ba-verder li::before{content:"\203A";position:absolute;left:3px;top:0;color:#f2793a;font-size:18px;line-height:1.4;} #sp-component .ba-verder a{color:#d05f22 !important;font-weight:700;text-decoration:none !important;border-bottom:1px solid transparent;} #sp-component .ba-verder a:hover,#sp-component .ba-verder a:focus{border-bottom-color:#d05f22;} #sp-component .ba-verder .ba-verder-uitleg{color:#6b574a;font-weight:400;} @media (max-width:767px){#sp-component .ba-verder{padding:18px 18px 8px;}#sp-component .ba-verder li{font-size:16px !important;}} /* ===== EINDE BA2026-VERDER ===== */ /* ===== BA2026-ACCENT (rustpunten: kernzin per hoofdstuk in lange artikelen) ===== */ #sp-component .ba-accent{position:relative;margin:46px 0;padding:30px 36px 30px 62px;background:linear-gradient(135deg,#fff7f0 0%,#fdeadc 100%);border-left:4px solid #f2793a;border-radius:0 14px 14px 0;box-shadow:0 10px 30px rgba(58,8,0,.07);overflow:hidden;} #sp-component .ba-accent::before{content:"\201C";position:absolute;left:16px;top:6px;font-family:Georgia,"Times New Roman",serif;font-size:80px;line-height:1;color:#f2793a;opacity:.3;pointer-events:none;} #sp-component .ba-accent::after{content:"";position:absolute;right:-50px;bottom:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(242,121,58,.14),rgba(242,121,58,0) 70%);pointer-events:none;} #sp-component .ba-accent-label{position:relative;z-index:1;margin:0 0 9px !important;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#b0714a;} #sp-component .ba-accent-tekst{position:relative;z-index:1;margin:0 !important;max-width:36ch;font-size:20px;line-height:1.5;font-weight:600;color:var(--ba-tekst);text-wrap:balance;} @media (max-width:767px){ #sp-component .ba-accent{margin:32px 0;padding:24px 20px 24px 46px;} #sp-component .ba-accent::before{font-size:58px;left:12px;top:4px;} #sp-component .ba-accent-tekst{font-size:17px;max-width:none;} } /* Zachte fade-in terwijl het blok in beeld scrollt. Alleen in browsers die dit kennen, en nooit bij gebruikers die bewegingen hebben uitgezet. */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ #sp-component .ba-accent{animation:ba-accent-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%;} @keyframes ba-accent-in{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}} } } /* ===== EINDE BA2026-ACCENT ===== */ /* ===== BA2026-AGENDA-INTRO v2 - beige introblok boven de opleidingen/agenda-lijst ===== */ #sp-component .ba-agenda-intro{margin:4px 0 34px;padding:28px 34px 30px;background:linear-gradient(180deg,#fdf7ef 0%,#f8ead9 100%);border:1px solid rgba(201,92,58,.16);border-radius:var(--ba-radius);box-shadow:var(--ba-schaduw);text-align:center;} #sp-component .ba-agenda-intro .sp-module{margin:0;} #sp-component .ba-agenda-intro .sp-module-content{padding:0;} #sp-component .ba-agenda-lead{margin:0 auto 12px !important;max-width:56ch;font-size:19px;line-height:1.6;font-weight:500;color:var(--ba-tekst);text-wrap:pretty;} #sp-component .ba-agenda-sub{font-style:normal !important;margin:0 auto !important;max-width:56ch;font-size:15.5px;line-height:1.65;color:var(--ba-grijs-tekst);text-wrap:pretty;} #sp-component .ba-agenda-sub a{color:var(--ba-oranje-donker);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;} #sp-component .ba-agenda-sub a:hover{color:var(--ba-roze);} @media (max-width:767px){#sp-component .ba-agenda-intro{padding:22px 20px 24px;margin-bottom:26px;}#sp-component .ba-agenda-lead{font-size:17px;}#sp-component .ba-agenda-sub{font-size:15px;}} /* ===== BA2026-LIJSTKOP — de paginakop boven de lijst weer tonen (heeft nu een betekenisvolle tekst) ===== */ #jux_eventon_event_list > .jux-event-title{display:block !important;} #jux_eventon_event_list > .jux-event-title h1{text-align:center;padding-top:0;margin:0 0 18px;line-height:1.2;color:var(--ba-tekst);text-wrap:balance;} @media (max-width:767px){#jux_eventon_event_list > .jux-event-title h1{font-size:26px;margin-bottom:14px;}} /* ===== BA2026-ZELFSTUDIE-ONDER — roze zelfstudieblok onderaan de agenda ===== */ #sp-component .ba-agenda-onder{margin:46px 0 6px;} #sp-component .ba-zs-blok{--zs-roze:#d1667b;--zs-roze-donker:#b9536a;--zs-lijn:#f3dde2;background:#fff;border-radius:var(--ba-radius);overflow:hidden;box-shadow:var(--ba-schaduw);} #sp-component .ba-zs-kop{background:var(--zs-roze);padding:18px 26px 16px;text-align:center;} #sp-component .ba-zs-titel{margin:0 !important;color:#fff !important;font-size:22px;line-height:1.25;letter-spacing:1.5px;text-transform:uppercase;} #sp-component .ba-zs-sub{margin:5px 0 0 !important;font-size:12.5px;letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.9);} #sp-component .ba-zs-inhoud{padding:6px 26px 18px;} #sp-component .ba-zs-inhoud ul.mod-menu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;} #sp-component .ba-zs-inhoud ul.mod-menu > li{margin:0;} #sp-component .ba-zs-inhoud ul.mod-menu > li > a{display:block;padding:15px 0;border-bottom:1px solid var(--zs-lijn);color:var(--ba-tekst);font-weight:600;font-size:15.5px;line-height:1.35;text-decoration:none;transition:color .18s ease;} #sp-component .ba-zs-inhoud ul.mod-menu > li > a:hover{color:var(--zs-roze-donker);} #sp-component .ba-zs-inhoud ul.mod-menu > li:nth-last-child(-n+2) > a{border-bottom:0;} @media (max-width:767px){#sp-component .ba-agenda-onder{margin-top:34px;}#sp-component .ba-zs-kop{padding:16px 18px 14px;}#sp-component .ba-zs-titel{font-size:19px;}#sp-component .ba-zs-inhoud{padding:2px 18px 14px;}#sp-component .ba-zs-inhoud ul.mod-menu{grid-template-columns:1fr;}#sp-component .ba-zs-inhoud ul.mod-menu > li:nth-last-child(-n+2) > a{border-bottom:1px solid var(--zs-lijn);}#sp-component .ba-zs-inhoud ul.mod-menu > li:last-child > a{border-bottom:0;}} /* ===== BA2026-EVENT-RADIUS — afgeronde hoeken op de eventblokken ===== */ #jux_eventon_event_list .jux-loop-item{border-radius:var(--ba-radius);overflow:hidden;} #jux_eventon_event_grid .jux-loop-item{border-radius:var(--ba-radius);} #jux_eventon_event_grid .jux-loop-item-wrap{border-radius:var(--ba-radius);overflow:hidden;} #sp-component .jux-loop-item .jux-thumb-holder{border-radius:var(--ba-radius) var(--ba-radius) 0 0;} /* ===== BA2026-EVENT-RADIUS v2 — ook de foto en het witte vlak afronden ===== */ #jux_eventon_event_list .jux-loop-item .jux-eveton-image, #jux_eventon_event_list .jux-loop-item .jux-eveton-image a, #jux_eventon_event_list .jux-loop-item .jux-eveton-image img{border-radius:var(--ba-radius) var(--ba-radius) 0 0;} #jux_eventon_event_list .jux-loop-item .jux-eventon-title{border-radius:var(--ba-radius) var(--ba-radius) 0 0;} #jux_eventon_event_list .jux-loop-item .jux-event-content{border-radius:0 0 var(--ba-radius) var(--ba-radius);} #jux_eventon_event_grid .jux-loop-item .jux-thumb-holder, #jux_eventon_event_grid .jux-loop-item .jux-thumb-holder img{border-radius:var(--ba-radius) var(--ba-radius) 0 0;}
Wat kost het1075,- BTW-vrij