/* ============================================================ CUSTOM CSS Abbo kindcentra (YOOtheme) ============================================================ */ /* ============================================================ 1. FONTS Adobe Fonts. Deze @import moet bovenaan staan, vóór alle andere regels, anders laadt de browser de lettertypen niet. ============================================================ */ @import url("https://use.typekit.net/nfo5fki.css"); /* ============================================================ VARIABELEN: kleuren, lettertypen en kleur-svg's Eén bestand voor alle Abbo-sites. custom.js zet op het attribuut data-site (op basis van de domeinnaam); het blok [data-site="..."] zet dan de kleuren van die locatie. Zonder data-site gelden de Abbo-kleuren. Kleuren testen op elke site: ?kleurtest=kiezelrijk Rollen: primair = knoppen/footer/menu, primair-zacht = lichte variant, accent = sierletter in koppen, 1 t/m 4 = themakleuren voor kaarten en banden (met witte tekst, dus geen lichte kleuren zoals geel). Regel: primair moet verschillen van 1 t/m 4, want knoppen staan op die kaarten en banden. Tekst en lichtblauw zijn voor alle sites gelijk. ============================================================ */ :root { --kleur-tekst: #41225a; --kleur-licht: #ebf5fc; --kleur-primair: #643687; --kleur-primair-zacht: #9a7cb0; --kleur-accent: #d93a5a; --kleur-1: #59b2e7; --kleur-2: #a0d683; --kleur-3: #f5ac2e; --kleur-4: #d93a5a; --font-kop: all-round-gothic, helvetica, sans-serif; --font-accent: "ff-providence-sans-web-pro", helvetica, sans-serif; --font-tekst: 'Plus Jakarta Sans', helvetica, sans-serif; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%2359b2e7'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23a0d683'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23643687'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%23a0d683'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%2359b2e7'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); --svg-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.6 37.6'%3E%3Cpath fill='%2341225a' d='M7.1 35.3c-.1-2.3-1-22.5 0-26C8 6.2 7.1.5 7.1.5L9.6 0c0 .3 1 6.3 0 9.9-.7 2.4-.3 16.4 0 25.2l-2.5.2z'/%3E%3Cpath fill='%2341225a' d='M8.6 37.6c-.9 0-2.9-.9-8.6-6.7l1.8-1.8C4 31.3 6.7 33.7 8 34.7c1.1-2.2 4.5-4.6 6.2-5.7l1.4 2.1c-2.7 1.8-5.3 4.2-5.4 5 0 .6-.4 1.2-.9 1.4-.2 0-.4.1-.7.1z'/%3E%3C/svg%3E"); } [data-site="kiezelrijk"], [data-site="blueprint"] { /* Blueprint (master voor locaties) gebruikt de Kiezelrijk-kleuren; een kloon krijgt via de domeinnaam zijn eigen blok. */ /* Gemeten op kiezelrijk.nl: tekst, knoppen en footer blauw; themakleuren groen, oranje, blauw, geel. */ --kleur-tekst: #006b8c; --kleur-bovenkop: #d93a5a; /* bovenkop in blokken (schrijfletter), gemeten op kiezelrijk.nl */ --kleur-primair: #006b8c; --kleur-primair-zacht: #66a6ba; --kleur-accent: #dd663b; --kleur-knop: #006b8c; --kleur-headerknop: #fed27a; --kleur-headerknop-tekst: #006b8c; --kleur-1: #70b294; --kleur-2: #dd663b; --kleur-3: #006b8c; --kleur-4: #fed27a; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%2370b294'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23dd663b'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23006b8c'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%23dd663b'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%2370b294'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%2366a6ba' fill='%2366a6ba' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%2366a6ba' fill='%2366a6ba' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); --svg-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.6 37.6'%3E%3Cpath fill='%23006b8c' d='M7.1 35.3c-.1-2.3-1-22.5 0-26C8 6.2 7.1.5 7.1.5L9.6 0c0 .3 1 6.3 0 9.9-.7 2.4-.3 16.4 0 25.2l-2.5.2z'/%3E%3Cpath fill='%23006b8c' d='M8.6 37.6c-.9 0-2.9-.9-8.6-6.7l1.8-1.8C4 31.3 6.7 33.7 8 34.7c1.1-2.2 4.5-4.6 6.2-5.7l1.4 2.1c-2.7 1.8-5.3 4.2-5.4 5 0 .6-.4 1.2-.9 1.4-.2 0-.4.1-.7.1z'/%3E%3C/svg%3E"); } [data-site="kiemkade"] { --kleur-primair: #13504f; --kleur-primair-zacht: #89a7a7; --kleur-accent: #13504f; --kleur-1: #ac8cc0; --kleur-2: #ac8cc0; --kleur-3: #ac8cc0; --kleur-4: #ac8cc0; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23ac8cc0'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23ac8cc0'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%2313504f'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%23ac8cc0'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%23ac8cc0'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%2389a7a7' fill='%239a7cb0' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); } [data-site="montessori"] { --kleur-primair: #d12e01; --kleur-primair-zacht: #e89680; --kleur-accent: #0072bc; --kleur-1: #0072bc; --kleur-2: #0072bc; --kleur-3: #0072bc; --kleur-4: #0072bc; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%230072bc'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%230072bc'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23d12e01'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%230072bc'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%230072bc'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%23e89680' fill='%239a7cb0' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); } [data-site="krabbenkooi"] { --kleur-primair: #f16522; --kleur-primair-zacht: #f8b290; --kleur-accent: #f16522; --kleur-1: #1497db; --kleur-2: #1497db; --kleur-3: #1497db; --kleur-4: #1497db; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%231497db'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%231497db'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23f16522'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%231497db'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%231497db'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%23f8b290' fill='%239a7cb0' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); } [data-site="rodeschouw"] { --kleur-primair: #d91425; --kleur-primair-zacht: #ec8992; --kleur-accent: #d91425; --kleur-1: #008aca; --kleur-2: #008aca; --kleur-3: #008aca; --kleur-4: #008aca; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23008aca'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23008aca'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23d91425'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%23008aca'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%23008aca'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%23ec8992' fill='%239a7cb0' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); } [data-site="aanloop"] { --kleur-primair: #0072bc; --kleur-primair-zacht: #7fb8dd; --kleur-accent: #f16622; --kleur-1: #f16622; --kleur-2: #93c24a; --kleur-3: #f16622; --kleur-4: #93c24a; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23f16622'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%2393c24a'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%230072bc'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%2393c24a'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%23f16622'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%237fb8dd' fill='%239a7cb0' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); } [data-site="zeeridder"] { --kleur-primair: #347b9b; --kleur-primair-zacht: #99bdcd; --kleur-accent: #f178a0; --kleur-1: #5ec3b5; --kleur-2: #f178a0; --kleur-3: #5ec3b5; --kleur-4: #f178a0; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%235ec3b5'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23f178a0'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23347b9b'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%23f178a0'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%235ec3b5'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%2399bdcd' fill='%239a7cb0' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); } [data-site="kompas"] { --kleur-primair: #71b151; --kleur-primair-zacht: #b8d8a8; --kleur-accent: #71b151; --kleur-1: #5dc3b5; --kleur-2: #5dc3b5; --kleur-3: #5dc3b5; --kleur-4: #5dc3b5; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%235dc3b5'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%235dc3b5'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%2371b151'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%235dc3b5'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%235dc3b5'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%23b8d8a8' fill='%239a7cb0' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); } [data-site="dorpsstraat"] { --kleur-primair: #643687; --kleur-primair-zacht: #9a7cb0; --kleur-accent: #d93a5a; --kleur-1: #59b2e7; --kleur-2: #a0d683; --kleur-3: #f5ac2e; --kleur-4: #d93a5a; --svg-blob-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%2359b2e7'/%3E%3C/svg%3E"); --svg-blob-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23a0d683'/%3E%3C/svg%3E"); --svg-blob-primair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23643687'/%3E%3C/svg%3E"); --svg-boog-k2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' fill='%23a0d683'/%3E%3C/svg%3E"); --svg-boog-om-k1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 142 67'%3E%3Cpath d='M51.874.009C31.177.243 13.533 3.3 0 8.532 22.068 3.1 48.659 2.808 70.587 6.434c41.809 6.912 66.057 26.378 60.587 52.987A26.464 26.464 0 01128.341 67c7.086-5.737 11.927-12.7 13.409-20.949C145.854 23.2 98.775-.522 51.874.009' transform='rotate(180 71 33.5)' fill='%2359b2e7'/%3E%3C/svg%3E"); --svg-krul-zacht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.18 94.93'%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' stroke-width='1' d='M48.53,49.7c-6.11,0-12.09-2.48-16.01-6.82-5.03-5.77-6.71-13.53-4.53-20.82,.33-1.58,1-3.04,1.65-4.46,.29-.63,.58-1.26,.83-1.89l.16-.33c.27-.47,.54-.95,.81-1.43,2.64-4.67,5.63-9.96,11-12.48h0c5.86-2.75,12.14-1.17,18.07,.68,2.55,.73,4.95,1.95,7.09,3.6,4.16,2.98,7.11,8.08,8.1,14.01,2.59,11.05-.66,15.67-8.88,21.83l-.64,.46c-3.92,2.79-8.35,5.95-13.33,7.22l-.15,.03c-1.38,.26-2.78,.39-4.17,.39Zm-13.48-31.97c-.26,.66-.56,1.31-.87,1.97-.57,1.24-1.11,2.42-1.32,3.47l-.06,.24c-1.72,5.66-.43,11.7,3.46,16.16,3.56,3.94,9.76,5.9,15.42,4.85,4.04-1.05,7.87-3.78,11.58-6.42l.6-.42c6.85-5.13,9.07-7.74,6.95-16.73l-.03-.17c-.77-4.68-3-8.64-6.12-10.86l-.08-.06c-1.65-1.28-3.5-2.22-5.51-2.8-5.04-1.58-10.27-2.93-14.5-.94h0c-3.93,1.84-6.39,6.2-8.77,10.42-.25,.44-.49,.87-.74,1.3Z'%3E%3C/path%3E%3Cpath stroke='%239a7cb0' fill='%239a7cb0' d='M4.12,94.93l-4.12-2.84c7.12-10.33,17.11-22.99,31.39-29.25,12.44-5.84,30.34-6.88,42.17,4.01,3.56,3.03,6.36,6.86,9.07,10.56,1.44,1.97,2.8,3.83,4.25,5.56,2.44,2.24,4.56,4.79,6.3,7.61l-4.25,2.64c-1.53-2.47-3.4-4.71-5.54-6.66l-.23-.24c-1.61-1.91-3.12-3.97-4.57-5.96-2.54-3.48-5.18-7.08-8.3-9.73l-.08-.07c-10.12-9.36-25.75-8.33-36.75-3.17-13.18,5.77-22.6,17.74-29.34,27.53Z'%3E%3C/path%3E%3C/svg%3E"); } /* Sectiestijlen uit het thema (Primary = footer, Secondary = hero op de home) volgen de locatiekleuren */ .uk-section-primary { background-color: var(--kleur-primair); } .uk-section-secondary { background-color: var(--kleur-2); } .ab-ft-footer:not(#_) { background-color: var(--kleur-primair); } /* ============================================================ 2. NAVIGATIE ============================================================ */ /* Navbar-container: witte balk met afgeronde onderhoeken */ .uk-navbar-container .uk-container { background: #ffffff; border-radius: 0 0 44.304px 44.304px; } /* Logo: hangt iets over de navbar heen met blob-shape erachter */ .uk-logo { margin-bottom: -50px; margin-left: 20px; margin-top: 10px; } a.uk-logo::after { content: ""; position: absolute; z-index: -1; height: 150px; width: 182px; background-image: url(../../../images/template/shape-white.svg); background-size: contain; background-repeat: no-repeat; } /* Nav-items: tekst en pijltje naast elkaar in een rij */ .uk-navbar-nav > li > a { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; column-gap: 4px; position: relative; overflow: visible; } /* Krullend onderstreepje: absoluut gepositioneerd onder de linktekst */ .uk-navbar-nav > li > a .nav-underline { display: block; position: absolute; left: 0; bottom: 34px; width: 76px; /* vaste lengte, gelijk voor alle menu-items */ max-width: none; height: auto; aspect-ratio: 86.072 / 2.997; /* hoogte volgt breedte, zodat de lijn altijd links begint */ margin-top: 4px; opacity: 0; pointer-events: none; /* Fade-in van het lijntje (inclusief delay) */ transition: opacity 0.8s ease-in-out 0.2s; } .uk-navbar-nav > li > a .nav-underline path { fill: none; stroke: var(--kleur-tekst); stroke-width: 2; stroke-miterlimit: 10; stroke-dasharray: 400; stroke-dashoffset: 400; vector-effect: non-scaling-stroke; /* Tekenen gebeurt met de animatie hieronder (drawSlower, 10s lineair) */ } /* Actief item: lijn zichtbaar en volledig getekend */ .uk-navbar-nav > li.uk-active > a .nav-underline, .uk-navbar-nav > li > a:hover .nav-underline { opacity: 1; } .uk-navbar-nav > li.uk-active > a .nav-underline path, .uk-navbar-nav > li > a:hover .nav-underline path { animation: abbo-draw-slower 10s linear forwards; } @keyframes abbo-draw-slower { 0% { stroke-dashoffset: 400; } 50% { stroke-dashoffset: 200; } 60% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } /* ============================================================ 3. BUTTONS & UI-COMPONENTEN ============================================================ */ /* Basisstijl van alle buttons: tekst recht, achtergrond is een ellips (border-radius 47%) die -4 graden gedraaid staat en op hover naar -1 graad draait. De kleur komt uit --abbo-btn (per variant hieronder). */ .uk-button { --abbo-btn: var(--kleur-primair); position: relative; z-index: 0; min-width: 0; height: 70px; line-height: 68px; background: transparent !important; border: 1px solid transparent !important; border-radius: 0; color: #fff; transition: none; } .uk-button-primary { --abbo-btn: var(--kleur-knop, var(--kleur-2)); } .uk-button-secondary { --abbo-btn: var(--kleur-licht); } .uk-button-default, .uk-button-default:hover, .uk-button-primary, .uk-button-primary:hover { color: #fff; } .uk-button-secondary, .uk-button-secondary:hover { color: var(--kleur-tekst); } /* Ellips-achtergrond */ .uk-button::before { content: ""; position: absolute; top: 0; left: 0; right: -5px; bottom: -3px; width: auto; height: auto; background: var(--abbo-btn); border-radius: 47%; transform: rotate(-4deg); transition: transform 0.25s; z-index: -1; opacity: 1; pointer-events: none; } .uk-button:hover::before { transform: rotate(-1deg); } /* Witte lijntjes: klein lijntje linksonder, dubbel lijntje rechtsboven (alleen op hover) */ .uk-button::after { content: ""; position: absolute; top: 4px; bottom: -9px; left: -21px; right: -50px; width: auto; height: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.93 11.78'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-miterlimit='10' stroke-width='2px' d='M16.72,10.26c-1-.17-1.94-.11-2.84,.18-1.34,.43-15.15-.28-12.23-10.08'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.97 47.01'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-miterlimit='10' stroke-width='2px' d='M.98,.78c1.31,1.65,2.82,2.88,4.53,3.67,2.56,1.2,22.73,21.52,6.59,32.72'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-miterlimit='10' stroke-width='2px' d='M27.23,27.8c.35,.95,.87,1.74,1.57,2.37,1.05,.95,7.33,13.26-2.62,15.63'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 25px 25px, 45px 45px; background-position: left 0 top 48px, right 0 top 0; opacity: 0; transform: none; transition: opacity 0.3s ease-in-out; pointer-events: none; } .uk-button:hover::after { opacity: 1; } .uk-button:hover { transform: none; } /* Kleine button-variant */ .uk-button-small { min-width: 0; height: 70px; line-height: 68px; font-size: 18px; } /* Cookie-/consent-buttons: standaard pill-vorm, geen blob-hover */ button[data-consent-button], .uk-button[data-consent-button] { border-radius: 30px; } .uk-button[data-consent-button]:hover { transform: rotate(0deg); } .uk-button[data-consent-button]:hover::before, .uk-button[data-consent-button]:hover::after { opacity: 0; } /* Modal en notificaties: afgeronde hoeken */ .uk-modal-dialog { border-radius: 30px; } .uk-notification-message { border-radius: 30px; } /* Secties en tegels: afgeronde hoeken */ .uk-section-muted { border-radius: 70px; } .uk-tile-primary, .uk-tile-secondary { border-radius: 50px; } /* ============================================================ 4. KINDCENTRA-SLIDER ============================================================ */ @media (min-width:768px) { /* Minimale breedte per slide-tegel */ .fs-grid.kindcentra-slider .uk-tile { min-width: 600px; } /* Afbeelding en tekst verticaal uitlijnen in het slider-grid */ .fs-grid.kindcentra-slider .uk-slider-items .uk-grid { display: flex; align-items: center; } /* ---- Foto in de kindcentra-slider: hover-zoom met behoud van afronding ---- */ /* De kolom die de foto bevat fungeert als masker met afgeronde hoeken. De wrapper sluit strak om de foto zodat er geen "lege" zijkant is. */ .fs-grid.kindcentra-slider .uk-slider-items .uk-width-3-4\@m { overflow: hidden; border-radius: 50px; -webkit-mask-image: -webkit-radial-gradient(white, black); display: block; width: -moz-max-content; width: max-content; max-width: 100%; margin-left: auto; line-height: 0; will-change: transform; } .fs-grid.kindcentra-slider .uk-slider-items .uk-width-3-4\@m picture { display: block; line-height: 0; } /* Foto zelf: geen float meer, zoomt vanuit het midden */ .fs-grid.kindcentra-slider .el-image.uk-border-rounded { float: none; display: block; max-width: 100%; height: auto; transition: transform 0.6s ease; transform-origin: center center; } /* Hover-zoom op de foto */ .fs-grid.kindcentra-slider .uk-slider-items .uk-width-3-4\@m:hover .el-image.uk-border-rounded { transform: scale(1.08); } /* ---- Slidenav-knoppen ---- */ .uk-slidenav-container { display: flex; flex-direction: column-reverse; } .uk-slidenav svg { width: 25px !important; height: auto; } .uk-position-center-right { right: 50px; } .uk-slidenav { margin-bottom: 30px; } /* Blob achter previous-knop */ .uk-slidenav-container .uk-slidenav-previous::before { content: ""; position: absolute; top: 65%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 40px; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 153'%3E%3Cpath d='M151.683.014C118.77.4 90.712 5.457 69.193 14.121c-33.34 8.544-60.188 24.77-68.011 50.435-11.3 37.072 60.223 82.42 136.39 87.8 69.085 4.882 119.694-11.56 135.706-41.471 11.268-9.5 18.966-21.017 21.323-34.673C301.129 38.4 226.265-.864 151.683.014' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Blob achter next-knop */ .uk-slidenav-container .uk-slidenav-next::before { content: ""; position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 40px; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 153'%3E%3Cpath d='M151.683.014C118.77.4 90.712 5.457 69.193 14.121c-33.34 8.544-60.188 24.77-68.011 50.435-11.3 37.072 60.223 82.42 136.39 87.8 69.085 4.882 119.694-11.56 135.706-41.471 11.268-9.5 18.966-21.017 21.323-34.673C301.129 38.4 226.265-.864 151.683.014' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* ---- Logo-blokje (sliderlogo) met blob-achtergrond ---- */ .sliderlogo { position: relative; display: inline-block; } .sliderlogo::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 160px; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 153'%3E%3Cpath d='M151.683.014C118.77.4 90.712 5.457 69.193 14.121c-33.34 8.544-60.188 24.77-68.011 50.435-11.3 37.072 60.223 82.42 136.39 87.8 69.085 4.882 119.694-11.56 135.706-41.471 11.268-9.5 18.966-21.017 21.323-34.673C301.129 38.4 226.265-.864 151.683.014' fill='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } .sliderlogo img { position: relative; z-index: 2; } /* ---- BELANGRIJK: sliderlogo en het logo-img mogen NOOIT zoomen ---- */ .sliderlogo, .sliderlogo img, .sliderlogo picture, .sliderlogo .el-image { transition: none !important; transform: translate(0, 0) !important; } /* De blob-achtergrond mag z'n eigen translate behouden */ .sliderlogo::before { transform: translate(-50%, -50%) !important; } /* Geen hover-effect op het logo */ .sliderlogo:hover img, .sliderlogo:hover .el-image, .fs-grid.kindcentra-slider .uk-slider-items .uk-width-3-4\@m:hover .sliderlogo .el-image { transform: none !important; } } /* einde @media (min-width: 768px) */ /* ============================================================ KENMERKEN-ICONEN: blob afwisselend groen/paars, wit icoon. Redacteur kiest per kenmerk het icoon (veld kenmerk-icoon). ============================================================ */ .kk-icoon{ display:flex;align-items:center;justify-content:center;width:78px;height:65px;background:var(--svg-blob-k2) center/contain no-repeat} .uk-grid>*:nth-child(2n) .kk-icoon{ background-image:var(--svg-blob-primair)} .kk-icoon::after{ content:"";display:block;width:30px;height:30px;background-position:center;background-repeat:no-repeat;background-size:contain} .kk-smiley::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.13 35.58' fill='%23fff'%3E%3Cpath d='M20.34 35.58c-3.9 0-7.95-1.14-11.72-3.92C3.28 27.73.39 23.33.04 18.58-.46 11.95 4.21 7.2 4.41 7l.2-.16c.56-.37 13.93-9.020 24.76-6.32 4.14 1.03 7.36 3.58 9.55 7.58 4.12 7.48 2.39 16.16-4.4 22.1-3.58 3.14-8.73 5.38-14.19 5.38zM6.09 8.86c-.58.63-3.95 4.53-3.56 9.56.31 3.98 2.85 7.760 7.57 11.23 7.97 5.88 17.18 3.57 22.78-1.33 4.67-4.09 8.13-11.23 3.85-19.02-1.85-3.36-4.53-5.5-7.96-6.35C19.5.63 7.41 8.03 6.09 8.86z'%3E%3C/path%3E%3Cellipse cx='14.87' cy='13.21' rx='3' ry='2.5'%3E%3C/ellipse%3E%3Cellipse cx='25.87' cy='13.21' rx='3' ry='2.5'%3E%3C/ellipse%3E%3Cpath d='M20.35 25.94c-.93 0-1.84-.1-2.73-.29-5.81-1.25-8.71-6.11-8.83-6.32l2.16-1.26s2.5 4.14 7.22 5.14c3.61.76 7.63-.42 11.970-3.52l1.45 2.04c-3.92 2.8-7.7 4.21-11.25 4.21z'%3E%3C/path%3E%3C/svg%3E")} .kk-boek::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.5 35.9' fill='%23fff'%3E%3Cpath d='M5 35.9l-.2-1.2C-.5 6.4-.2 6 .3 5.4L.7 5h.5C2.4 4.8 15.4 2.1 24 .3l1.3-.3.3 1.2c1.8 8.2 6 27.5 6 28.5 0 1.2 0 2.1-25.3 6l-1.3.2zM2.6 7.3C3 10.9 5.3 24 7 33.1c8.1-1.3 19-3.2 21.9-4-.6-3.3-3.4-16.5-5.5-26.1C9.7 5.8 4.6 6.9 2.6 7.3zm-1 .1h-.3c.1.1.2.1.3 0z'%3E%3C/path%3E%3Cpath d='M10 33.8c-.3-1.1-2-6.5-2-8.4 0-1.2-2.5-12.7-4.1-19.7l2.4-.5c.7 3.1 4.1 18.5 4.1 20.3 0 1.1 1.1 5.3 1.9 7.6l-2.3.7zM11.6 13.7l-.7-2.4c.7-.2 7-2.1 9.4-2.1v2.5c-1.8 0-6.9 1.4-8.7 2zM13.4 29.7l-.2-2.5c3.9-.4 8.5-1.1 9.3-1.7l1.8 1.8c-1.3 1.2-6.6 2-10.9 2.4z'%3E%3C/path%3E%3C/svg%3E")} .kk-oog::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47.9 23.8' fill='%23fff'%3E%3Cpath d='M20.25 23.804c-20 0-20.2-16.1-20.2-16.3v-.7l.5-.3c.2-.1 21-14.4 39.5 0 6.3 4.9 8.7 8.6 7.7 11.6-1.7 4.7-11.3 5.7-27.5 5.7zm-17.7-15.7c.2 2.8 2.2 13.2 17.7 13.2 7.7 0 23.7 0 25.1-4 .3-1-.1-3.5-6.9-8.8-15.6-12.2-32.6-2.5-35.9-.4z'%3E%3C/path%3E%3Cpath d='M23.75 18.504c-4.1 0-7.5-2.9-7.5-6.5s3.4-6.5 7.5-6.5 7.5 2.9 7.5 6.5-3.4 6.5-7.5 6.5zm0-10.5c-2.8 0-5 1.8-5 4s2.2 4 5 4 5-1.8 5-4-2.2-4-5-4z'%3E%3C/path%3E%3C/svg%3E")} .kk-klok::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37.1 37.5' fill='%23fff'%3E%3Cpath d='M27.675 24.354c-1.1-.6-6.9-1.3-10.6-1.7l-1.1-.1v-11.3h2.5v9c2.7.3 8.7 1 10.3 1.9l-1.1 2.2z'%3E%3C/path%3E%3Cpath d='M21.275 37.454c-3.7 0-7.2-1-10.5-3.2-8.5-5.5-12.7-16.4-9.8-26 1.2-4 3.5-6.5 6.8-7.7 10.2-3.4 26.8 8.4 27.5 8.9l-1.5 2c-.1-.1-16.2-11.5-25.3-8.4-2.5.8-4.2 2.8-5.2 6-2.5 8.5 1.2 18.3 8.8 23.2 7.2 4.6 15.7 3.5 23.4-3.2l1.6 1.9c-5 4.3-10.5 6.5-15.8 6.5z'%3E%3C/path%3E%3Cpath d='M36.575 13.454h-10.3v-2.5h7.8v-8.7h2.5z'%3E%3C/path%3E%3C/svg%3E")} /* ============================================================ 5. DECORATIEVE SVG-ELEMENTEN ============================================================ */ /* --- Banner-lijntjes --- */ .banner-lines svg { height: 52px; width: 67px; } .banner-lines path { animation: draw 10s linear forwards; stroke-dasharray: 400; stroke-dashoffset: 400; } /* --- Muzieknoten --- */ .music-notes svg { width: 70px; height: 70px; } /* Eerste noot: iets naar beneden geplaatst */ .music-notes svg:first-child { position: relative; margin-top: 50px; } .music-notes svg:first-child path { animation: drawOutline 10s linear forwards; stroke-dasharray: 600; stroke-dashoffset: 600; } /* Tweede noot: overlapt de eerste iets */ .music-notes svg:last-child { position: relative; margin-top: -60px; } .music-notes svg:last-child path { animation: drawOutline 10s linear forwards; stroke-dasharray: 400; stroke-dashoffset: 400; } /* --- Zon-icoon met gestapelde animatie per path --- */ .sun { height: 100px; width: 100px; } .sun svg { width: 100%; height: 100%; fill: var(--kleur-tekst); } .sun path { animation: drawOutline 10s linear forwards; stroke-dasharray: 500; stroke-dashoffset: 500; } .sun path:nth-child(1) { animation-delay: 0.3s; } .sun path:nth-child(2) { animation-delay: 1.0s; } .sun path:nth-child(3) { animation-delay: 1.2s; } .sun path:nth-child(4) { animation-delay: 1.4s; } .sun path:nth-child(5) { animation-delay: 1.6s; } .sun path:nth-child(6) { animation-delay: 1.8s; } .sun path:nth-child(7) { animation-delay: 2.0s; } /* --- Scroll-pijltje (bounce-animatie na delay) --- */ .scrollto { color: #fff; text-align: center; text-decoration: none; outline: none; display: block; margin-left: 50%; margin-right: 50%; width: 100%; } .scrollto svg { display: block; width: 50px; height: 50px; animation: bounce_scroll 3.5s infinite; animation-delay: 2s; } .scrollto path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 15s linear forwards; } /* ============================================================ 6. KEYFRAME-ANIMATIES ============================================================ */ /* Lijn tekenen (kort) */ @keyframes draw { 0% { stroke-dashoffset: 400; } 30% { stroke-dashoffset: 300; } 40% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } } /* Lijn tekenen (langer pad) */ @keyframes draw2 { 0% { stroke-dashoffset: 600; } 30% { stroke-dashoffset: 400; } 60% { stroke-dashoffset: 300; } 100% { stroke-dashoffset: 0; } } /* Lijn tekenen (outline-stijl) */ @keyframes drawOutline { 0% { stroke-dashoffset: 500; } 30% { stroke-dashoffset: 300; } 40% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } } /* Lijn tekenen met fill-inloop */ @keyframes drawImage { 0% { stroke-dashoffset: 600; } 30% { stroke-dashoffset: 300; fill: transparent; } 50% { stroke-dashoffset: 200; fill: var(--kleur-primair-zacht); } 60% { stroke-dashoffset: 100; fill: var(--kleur-primair-zacht); } 100% { stroke-dashoffset: 0; fill: var(--kleur-primair-zacht); } } /* Lijn tekenen (traag) */ @keyframes drawSlower { 0% { stroke-dashoffset: 400; } 50% { stroke-dashoffset: 200; } 60% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } /* Scroll-pijltje: zachte bounce */ @keyframes bounce_scroll { 40%, 70%, 100% { transform: translate(0, 0); } 55%, 85% { transform: translate(0, 0.171875em); } } /* Lichte schommelbeweging */ @keyframes wiggle { 0% { transform: rotate(-6deg); } 100% { transform: rotate(3deg); } } /* Zwaar schommelen (links-rechts) */ @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } /* Licht schommelen (links-rechts) */ @keyframes wobble2 { 0% { transform: translateX(0%); } 15% { transform: translateX(-15%) rotate(-3deg); } 30% { transform: translateX(10%) rotate(2deg); } 45% { transform: translateX(-5%) rotate(-2deg); } 60% { transform: translateX(5%) rotate(1deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } /* Doordraaien */ @keyframes spin { to { transform: rotate(360deg); } } /* Fade in */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Inzoomen */ @keyframes zoomImage { from { transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes zoomItem { 0% { opacity: 0; transform: scale(0.8); } 80% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } /* Fade in van boven naar beneden (met aanpasbare offset via CSS-var) */ @keyframes fadeInDownTransform { 0% { opacity: 0; transform: var(--transform, translateX(0)) translateY(calc(var(--animation-offset, 50px) * -1)); } to { opacity: 1; transform: var(--transform, translateX(0)) translateY(0); } } /* Fade in van boven (vaste offset) */ @keyframes fadeInDownCustom { 0% { opacity: 0; transform: var(--transform, translateX(0)) translateY(-20px); } to { opacity: 1; transform: var(--transform, translateX(0)) translateY(0); } } /* Fade in van onder naar boven */ @keyframes fadeInUpTransform { 0% { opacity: 0; transform: var(--transform, translateX(0)) translateY(var(--animation-offset, 50px)); } to { opacity: 1; transform: var(--transform, translateX(0)) translateY(0); } } /* Fade in vanuit links (positie-gebaseerd) */ @keyframes fadeInRightPosition { 0% { opacity: 0; left: calc(var(--animation-offset, 50px) * -1); } to { opacity: 1; left: 0; } } /* Fade in vanuit rechts (transform-gebaseerd) */ @keyframes fadeInLeftTransform { 0% { opacity: 0; transform: var(--transform, translateY(0)) translateX(var(--animation-offset, 50px)); } to { opacity: 1; transform: var(--transform, translateY(0)) translateX(0); } } /* Medewerker-kaart: groene lijn animatie */ @keyframes employeeLineGreen { 0% { top: 43px; right: 0; opacity: 0; } 30% { top: 60px; right: 0; opacity: 0; } 100% { top: 86px; right: 48px; opacity: 1; } } /* Medewerker-kaart: blauwe lijn animatie */ @keyframes employeeLineBlue { 0% { bottom: 48px; left: 22px; opacity: 0; } 30% { bottom: 60px; left: 57px; opacity: 0; } 100% { bottom: 82px; left: 57px; opacity: 1; } } /* Referentie-kaart: groene lijn animatie */ @keyframes referenceLineGreen { 0% { top: -50px; right: -50px; opacity: 0; } 30% { top: -30px; right: -30px; opacity: 0; } 100% { top: 0; right: 0; opacity: 1; } } /* Referentie-kaart: blauwe lijn animatie */ @keyframes referenceLineBlue { 0% { bottom: -45px; left: -36px; opacity: 0; } 30% { bottom: -25px; left: -16px; opacity: 0; } 100% { bottom: 5px; left: -6px; opacity: 1; } } /* Header: tussen 1200 en 1400 px past het menu anders niet op één regel. Navbar-gap is een stijlvariabele die alleen via de customizer compileert; daarom hier. */ @media (min-width:1200px) and (max-width: 1399px) { .tm-header .uk-navbar-nav { gap: 18px; } .tm-header .uk-navbar-nav > li > a { font-size: 16px; } } /* ============================================================ TEKSTOPMAAK IN EDITORVELDEN ============================================================ */ .el-content > ul:not([class]), .uk-panel > ul:not([class]) { list-style: none; padding: 0; margin: 0 0 10px; text-align: left; } .el-content > ul:not([class]) > li, .uk-panel > ul:not([class]) > li { position: relative; padding: 0 0 0 1em; } .el-content > ul:not([class]) > li::before, .uk-panel > ul:not([class]) > li::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 0; } .el-content > ul:not([class]):last-child, .uk-panel > ul:not([class]):last-child { margin-bottom: 0; } .el-content > p:not([class]), .uk-panel > p:not([class]) { margin: 0 0 24px; } .el-content > p:last-child, .uk-panel > p:last-child { margin-bottom: 0; } .el-content > h2:not([class]), .uk-panel > h2:not([class]) { font-family:var(--font-tekst); font-size: 1.5em; line-height: 1.6; font-weight: 700; margin: 0 0 15px; } .el-content h3:not([class]), .uk-panel > ul h3:not([class]), .uk-panel > h3:not([class]) { font-family:var(--font-tekst); font-size: 1.17em; line-height: 1.6; font-weight: 700; margin: 0; } .el-content a:not([class]), .uk-panel > p a:not([class]), .uk-panel > ul a:not([class]) { text-decoration: underline; } /* ============================================================ TEAM: eerste 24 medewerkers (+3 vacaturekaarten), rest na 'Ontmoet alle mensen'. Bij een actief functiefilter altijd alles tonen. ============================================================ */ .bk-team:not(.abbo-alle):not(:has(.el-nav > li.uk-active:not(:first-child))) .uk-grid > div:has(.abbo-meer) { display: none; } .abbo-meer-knop { text-align: center; margin-top: 30px; } .uk-panel:has(.bk-team.abbo-alle) .abbo-meer-knop, .uk-panel:has(.bk-team .el-nav > li.uk-active:not(:first-child)) .abbo-meer-knop { display: none; } /* Team: vacaturekaart (paarse kop met silhouet en smiley) en chevron filterknop */ .bk-team .abbo-cta::before { content: none; } /* VACATUREKAART: de hele kaart is een link naar /vacature */ .bk-team .abbo-cta > a.uk-card { position: relative; display: block; height: 100%; padding: 0; border-radius: 2.6vw; overflow: hidden; background: #fff; box-shadow: none; text-align: left; color: var(--kleur-tekst); text-decoration: none; } .bk-team .abbo-cta > a.uk-card::before { content: ''; display: block; height: 340px; background: var(--svg-boog-k2) 111.5px 86px / 142px 62px no-repeat, var(--svg-boog-om-k1) 57px 196px / 142px 62px no-repeat, var(--svg-krul-zacht) 102px 120px / 98px 100px no-repeat, var(--kleur-primair); } .bk-team .abbo-cta > a.uk-card::after { content: ''; position: absolute; left: 40px; top: 300px; width: 78px; height: 65px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.13 35.58' fill='%23fff'%3E%3Cpath d='M20.34 35.58c-3.9 0-7.95-1.14-11.72-3.92C3.28 27.73.39 23.33.04 18.58-.46 11.95 4.21 7.2 4.41 7l.2-.16c.56-.37 13.93-9.02 24.76-6.32 4.14 1.03 7.36 3.58 9.55 7.58 4.12 7.48 2.39 16.16-4.4 22.1-3.58 3.14-8.73 5.38-14.19 5.38zM6.09 8.86c-.58.63-3.95 4.53-3.56 9.56.31 3.98 2.85 7.76 7.57 11.23 7.97 5.88 17.18 3.57 22.78-1.33 4.67-4.09 8.13-11.23 3.85-19.02-1.85-3.36-4.53-5.5-7.96-6.35C19.5.63 7.41 8.03 6.09 8.86z'%3E%3C/path%3E%3Cellipse cx='14.87' cy='13.21' rx='3' ry='2.5'%3E%3C/ellipse%3E%3Cellipse cx='25.87' cy='13.21' rx='3' ry='2.5'%3E%3C/ellipse%3E%3Cpath d='M20.35 25.94c-.93 0-1.84-.1-2.73-.29-5.81-1.25-8.71-6.11-8.83-6.32l2.16-1.26s2.5 4.14 7.22 5.14c3.61.76 7.63-.42 11.97-3.52l1.45 2.04c-3.92 2.8-7.7 4.21-11.25 4.21z'%3E%3C/path%3E%3C/svg%3E") 22px 15px / 34px 34px no-repeat, var(--svg-blob-k2) 0 0 / 78px 65px no-repeat; } .bk-team .abbo-cta > a.uk-card > .el-title { padding: 40px 40px 0; margin: 0; } .bk-team .abbo-cta > a.uk-card > .el-meta { padding: 0 40px 40px; margin: 0; } @media (max-width:959px) { .bk-team .abbo-cta > a.uk-card { border-radius: 30px; } } .bk-team .el-nav > li.uk-active > a::before { content:'';position:absolute;right:18px;top:50%;width:14px;height:9px;margin-top:-4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2341225a' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat } /* Citaatblok in editortekst: gewone tekst, licht ingesprongen */ .el-content > blockquote, .uk-panel > blockquote { font-size: inherit; line-height: inherit; font-style: normal; margin: 0 0 16px; padding: 0 13px; border: 0; color: inherit; } .el-content > blockquote p, .uk-panel > blockquote p { margin: 0; } /* Gedeelde vormen (blob) */ :root { --abbo-blob-wit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23ffffff'/%3E%3C/svg%3E"); --abbo-blob-groen: var(--svg-blob-k2); --abbo-blob-paars: var(--svg-blob-primair); } /* BLOK-ACHTERGROND: veld "Achtergrond" per blok (lichtblauw = standaard, wit) */ .uk-section-muted:has(.bk-bg-wit) { overflow-x: clip; isolation: isolate; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit) { position: relative; margin-top: 200px !important; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit)::before { content: ''; position: absolute; z-index: -1; top: -100px; bottom: calc(-100px - 2.6vw); left: 50%; width: 100vw; transform: translateX(-50%); background: #fff; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit)::after { content: ''; position: absolute; z-index: -1; top: -100px; height: 2.6vw; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--kleur-licht); border-radius: 0 0 2.6vw 2.6vw; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit):first-child, .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit) + .uk-grid:has(.bk-bg-wit) { margin-top: 100px !important; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit):first-child::after, .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit) + .uk-grid:has(.bk-bg-wit)::after { display: none; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit) + .uk-grid:not(:has(.bk-bg-wit)):not(:has(.bk-type-tijdlijn)) { position: relative; margin-top: 200px !important; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit) + .uk-grid:not(:has(.bk-bg-wit)):not(:has(.bk-type-tijdlijn))::after { content: ''; position: absolute; z-index: -1; top: -100px; height: 2.6vw; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--kleur-licht); border-radius: 2.6vw 2.6vw 0 0; } @media (max-width:959px) { .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit), .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit) + .uk-grid:not(:has(.bk-bg-wit)) { margin-top: 120px !important; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit):first-child, .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit) + .uk-grid:has(.bk-bg-wit) { margin-top: 60px !important; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit)::before { top: -60px; bottom: -90px; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit)::after, .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit) + .uk-grid:not(:has(.bk-bg-wit))::after { top: -60px; height: 30px; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit)::after { border-radius: 0 0 30px 30px; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit) + .uk-grid:not(:has(.bk-bg-wit))::after { border-radius: 30px 30px 0 0; } } .uk-section-muted>.uk-container>.uk-grid:has(.bk-type-tijdlijn):has(.bk-bg-wit) { margin-bottom: 75px; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-type-tijdlijn):has(.bk-bg-wit)::before { bottom: -175px; } @media (max-width:959px) { .uk-section-muted>.uk-container>.uk-grid:has(.bk-type-tijdlijn):has(.bk-bg-wit) { margin-bottom: 0; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-type-tijdlijn):has(.bk-bg-wit)::before { bottom: -60px; } } /* Blokkensectie direct onder een band zonder foto (zonder introtekst rendert het Pagina-template geen intro-sectie): schuift 2.6vw over de band */ .ab-pg-header-zonder-foto + .uk-section-muted { margin-top: -2.6vw; position: relative; } .ab-pg-header-zonder-foto + .uk-section-muted:has(> .uk-container > .uk-grid:first-child .bk-bg-wit) { background: linear-gradient(#fff, #fff) 0 0 / 100% calc(2.6vw + 2px) no-repeat, var(--kleur-licht); } @media (max-width:959px) { .ab-pg-header-zonder-foto + .uk-section-muted { margin-top: -20px; } .ab-pg-header-zonder-foto + .uk-section-muted:has(> .uk-container > .uk-grid:first-child .bk-bg-wit) { background: linear-gradient(#fff, #fff) 0 0 / 100% 22px no-repeat, var(--kleur-licht); } } .ab-pg-header-zonder-foto + .uk-section-muted > .uk-container { padding-top: 2.6vw; } @media (max-width:959px) { .ab-pg-header-zonder-foto + .uk-section-muted > .uk-container { padding-top: 20px; } } /* Twee halve witte blokken naast elkaar: alleen het eerste tekent de witte band, anders bedekt de band van het tweede blok (eigen stacking context door de animatie) de eerste kaart */ .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit):has(.bk-breedte-half) + .uk-grid:has(.bk-bg-wit):has(.bk-breedte-half)::before { display: none; } @media (min-width:960px) { .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit):has(.bk-breedte-half):has(+ .uk-grid .bk-bg-wit)::before { left: calc(100% + 15px); } } /* Band zonder foto met introtekst (bijv. contact): lichtblauwe rand 50px */ @media (min-width:960px) { #tm-main:has(.hk-intro) .uk-section-muted > .uk-container > .uk-grid:first-child:has(.bk-bg-wit) { margin-top: 113px !important; } } /* Halve kaart zonder foto: knop links uitgelijnd */ .uk-section-muted > .uk-container > .uk-grid:has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img, .bk-media iframe, .bk-media video)) .bk-card .el-title + div { text-align: left; } /* Halve kaart zonder foto (bijv. contact): 92% breed, padding 50, knop 30px onder de titel */ .uk-section-muted > .uk-container > .uk-grid:has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img, .bk-media iframe, .bk-media video)) .bk-card { margin: 0 4%; padding: 50px !important; } .uk-section-muted > .uk-container > .uk-grid:has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img, .bk-media iframe, .bk-media video)) .bk-card .el-title { margin-bottom: 0; } .uk-section-muted > .uk-container > .uk-grid:has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img, .bk-media iframe, .bk-media video)) .bk-card .el-title + div { margin-top: 30px !important; } .uk-section-muted > .uk-container > .uk-grid:has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img, .bk-media iframe, .bk-media video)) .bk-card .el-link { margin-top: 0; } /* Header-kleur "Geen header": geen band en geen intro, pagina begint met de blokken (bijv. Onze kindcentra) */ /* Geen header: de sectie is onzichtbaar, maar de h1 blijft beschikbaar voor zoekmachines en schermlezers */ .uk-section:has(.hk-geen) { height: 0; padding: 0 !important; margin: 0; overflow: hidden; border: 0; } .uk-section:has(.hk-geen) + .uk-section + .uk-section-muted, .uk-section:has(.hk-geen) + .uk-section-muted { margin-top: 93px; } @media (max-width:959px) { .uk-section:has(.hk-geen) + .uk-section + .uk-section-muted, .uk-section:has(.hk-geen) + .uk-section-muted { margin-top: 110px; } } /* Na halve witte blokken (zonder foto) is de witte ruimte onder de kaarten 50px, dus 150px tot het volgende lichtblauwe blok */ @media (min-width:960px) { .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit):has(.bk-breedte-half) + .uk-grid:not(:has(.bk-bg-wit)):not(:has(.bk-type-tijdlijn)) { margin-top: 150px !important; } .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit):has(.bk-breedte-half)::before { bottom: calc(-50px - 2.6vw); } } /* Pagina met headerfoto maar zonder introtekst (bijv. Tarieven, Beleid): geen witte intro, de kop blijft alleen voor schermlezers/SEO */ #intro:not(:has(.geen-header)):not(:has(.uk-text-large)) { position: absolute; width: 1px; height: 1px; padding: 0 !important; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Tussenkoppen in de lopende tekst van pagina's zonder headerfoto */ #intro:has(.geen-header) .uk-text-large h2:not([class]) { font-family:var(--font-accent); font-size: 40px; line-height: 64px; font-weight: 600; color: var(--kleur-accent); margin: 32px 0 15px; } @media (max-width:959px) { #intro:has(.geen-header) .uk-text-large h2:not([class]) { font-size: 30px; line-height: 1.3; } } /* HK-GEEN-PAD: geen extra bovenruimte in het eerste lichtblauwe blok bij header-kleur "Geen header" */ @media (min-width:960px) { .uk-section:has(.hk-geen) + .uk-section + .uk-section-muted > .uk-container, .uk-section:has(.hk-geen) + .uk-section-muted > .uk-container { padding-top: 0; } } @media (max-width:959px) { .uk-section:has(.hk-geen) + .uk-section + .uk-section-muted > .uk-container, .uk-section:has(.hk-geen) + .uk-section-muted > .uk-container { padding-top: 110px; } } /* H2-FIRST: eerste tussenkop in de intro zonder bovenmarge */ #intro:has(.geen-header) .uk-text-large h2:not([class]):first-child { margin-top: 0; } /* HM-CLIP: kindcentra-slider op de home veroorzaakt geen horizontale scrollbalk */ .uk-section:has(.hm-kindcentra) { overflow-x: clip; } /* HK-GEEN-PADTOP: bij "Geen header" begint het lichtblauwe vlak onder de headerbalk */ @media (min-width:960px) { .uk-section:has(.hk-geen) + .uk-section + .uk-section-muted, .uk-section:has(.hk-geen) + .uk-section-muted { margin-top: 93px; } } @media (max-width:959px) { .uk-section:has(.hk-geen) + .uk-section + .uk-section-muted > .uk-container, .uk-section:has(.hk-geen) + .uk-section-muted > .uk-container { padding-top: 110px; } } @media (max-width:959px) { .uk-section:has(.hk-geen) + .uk-section + .uk-section-muted, .uk-section:has(.hk-geen) + .uk-section-muted { margin-top: 0; } } /* HM-CENTER: tekst in de kindcentra-slider gecentreerd */ .hm-kindcentra .el-content { text-align: center !important; } /* TIJDLIJN-NAV: pijlknoppen van tijdlijn en partners-slider als blob naast de slider */ @media (min-width:960px) { :is(.bk-tijdlijn,.bk-partners) .uk-position-center-left, :is(.bk-tijdlijn,.bk-partners) .uk-position-center-right { position: static !important; transform: none; display: block !important; margin: 0; } :is(.bk-tijdlijn,.bk-partners) .el-slidenav svg { display: none; } :is(.bk-tijdlijn,.bk-partners) .el-slidenav::after { content: ""; width: 9px; height: 20px; background: var(--svg-pijl) center/contain no-repeat; transform: rotate(-90deg); } :is(.bk-tijdlijn,.bk-partners) .el-slidenav.uk-slidenav-previous::after { transform: rotate(90deg); } } /* PARTNERS-LOGO: vaste logomaat in de partnerkaarten */ .bk-partners .el-image { width: 151px !important; height: 70px !important; max-height: none !important; object-fit: contain; } /* TEAMFILTER-FIJN: ruimte voor het chevron-icoon in de teamfilterknoppen */ .bk-team .el-nav > li:not(.uk-active) > a { padding-left: 50px !important; padding-right: 45px !important; } .bk-team .el-nav > li:not(.uk-active) > a::before { left: 21px !important; } /* ABBO-ANIMATIES: inkomende animaties (.abbo-a -> .abbo-v). Klassen worden gezet door custom.js (ABBO ANIMATIES). Zonder JS of met 'minder beweging' blijft alles gewoon zichtbaar. */ .abbo-a.abbo-up, .abbo-a.abbo-zoom, .abbo-a.abbo-cardl, .abbo-a.abbo-cardr { opacity: 0; } .abbo-a.abbo-up.abbo-v { animation: abboUp 1.2s ease both; } .abbo-a.abbo-zoom.abbo-v { animation: abboZoom 1s ease .5s both; } .abbo-a.abbo-img.abbo-v { animation: abboZoomImg 2s ease both; } .abbo-a.abbo-cardr.abbo-v { animation: abboFromRight 2s ease .5s both; } .abbo-a.abbo-cardl.abbo-v { animation: abboFromLeft 2s ease .5s both; } .abbo-a.abbo-icon.abbo-v { animation: abboWobble 3s ease infinite; } .uk-grid > :nth-child(2) > * .abbo-icon.abbo-v, .uk-grid > :nth-child(2) .abbo-icon.abbo-v { animation-delay: 4s; } .uk-grid > :nth-child(3) .abbo-icon.abbo-v { animation-delay: 6s; } .uk-grid > :nth-child(4) .abbo-icon.abbo-v { animation-delay: 8s; } .bk-ervaringen.abbo-v .el-image { animation: abboZoomImg 2s ease both; } .bk-ervaringen.abbo-v .el-item > .uk-grid > *:last-child::after { animation: abboArcGreen 2s ease both; } .bk-ervaringen.abbo-v .el-item > .uk-grid > *:last-child::before { animation: abboArcBlue 2s ease both; } @keyframes abboUp { 0% { opacity: 0; translate: 0 50px; } 100% { opacity: 1; translate: 0 0; } } @keyframes abboZoom { 0% { opacity: 0; scale: .8; } 80% { opacity: 1; } 100% { opacity: 1; scale: 1; } } @keyframes abboZoomImg { 0% { scale: .8; } 100% { scale: 1; } } @keyframes abboFromRight { 0% { opacity: 0; translate: 50px 0; } 100% { opacity: 1; translate: 0 0; } } @keyframes abboFromLeft { 0% { opacity: 0; translate: -50px 0; } 100% { opacity: 1; translate: 0 0; } } @keyframes abboWobble { 0% { translate: 0; rotate: 0deg; } 15% { translate: -15% 0; rotate: -3deg; } 30% { translate: 10% 0; rotate: 2deg; } 45% { translate: -5% 0; rotate: -2deg; } 60% { translate: 5% 0; rotate: 1deg; } 75% { translate: -5% 0; rotate: -1deg; } 100% { translate: 0; rotate: 0deg; } } @keyframes abboArcGreen { 0% { translate: 50px -50px; opacity: 0; } 30% { translate: 30px -30px; opacity: 0; } 100% { translate: 0 0; opacity: 1; } } @keyframes abboArcBlue { 0% { translate: -30px 50px; opacity: 0; } 30% { translate: -10px 30px; opacity: 0; } 100% { translate: 0 0; opacity: 1; } } @media (prefers-reduced-motion:reduce) { .abbo-a { opacity: 1 !important; animation: none !important; } } /* HEADER-PADDING: witte balk 1396 breed; logo 71px en Contact 50px van de rand. Tussen 1200 en 1400 schaalt de ruimte mee zodat het menu op één regel blijft. */ @media (min-width:1200px) { .tm-header .uk-navbar-container > .uk-container, .tm-header .uk-navbar-container .uk-container { max-width: 1396px; box-sizing: border-box; padding-left: clamp(15px, calc((100vw - 1200px) / 4 + 15px), 51px); padding-right: clamp(15px, calc((100vw - 1200px) / 4 + 15px), 50px); } } /* HM-FADE: kindcentra-slider op de home wisselt met een fade in plaats van te schuiven (script in custom.js). */ .hm-kindcentra .uk-slider-items { display: grid; transform: none; } .hm-kindcentra .uk-slider-items > * { grid-area: 1 / 1; width: 100%; transform: none; transition: opacity .6s ease !important; } .hm-kindcentra .uk-slider-items > *:not(.abbo-cur) { opacity: 0; pointer-events: none; z-index: 0; } .hm-kindcentra .uk-slider-items > .abbo-cur { opacity: 1; z-index: 1; } .hm-kindcentra [uk-slider-item] { visibility: visible; opacity: 1; pointer-events: auto; } /* HM-KNOPPEN-GAP: twee knoppen naast elkaar 50px uit elkaar. */ .hm-knoppen > .uk-grid, .hm-knoppen .uk-grid { margin-left: 0; column-gap: 50px; row-gap: 20px; justify-content: center; } .hm-knoppen .uk-grid > * { padding-left: 0; margin-top: 0; } /* KNOP-LIJNTJES: de lijntjes bij hover worden getekend (stroke-animatie 10s) in plaats van in te faden. De svg's worden door custom.js (ABBO ANIMATIES) in elke .uk-button gezet; ::after blijft als terugval zonder JS. */ .uk-button:has(.abbo-btnlines)::after { display: none; } .uk-button .abbo-btnlines { position: absolute; opacity: 0; pointer-events: none; overflow: visible; z-index: 1; } .uk-button .abbo-bl1 { top: 52px; left: -21px; width: 25px; height: 25px; } .uk-button .abbo-bl2 { top: 4px; right: -50px; width: 45px; height: 45px; } .uk-button .abbo-btnlines path { fill: none; stroke: #fff; stroke-width: 2px; stroke-miterlimit: 10; stroke-dasharray: 400; stroke-dashoffset: 400; } .uk-button:hover .abbo-btnlines, .uk-button:focus-visible .abbo-btnlines { opacity: 1; } .uk-button:hover .abbo-btnlines path, .uk-button:focus-visible .abbo-btnlines path { animation: abboDraw 10s ease forwards; } @keyframes abboDraw { 0% { stroke-dashoffset: 400; } 30% { stroke-dashoffset: 300; } 40% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } } @media (prefers-reduced-motion:reduce) { .uk-button:hover .abbo-btnlines path { animation: none; stroke-dashoffset: 0; } } /* BK-MARKER: verborgen class-labels uit velden (templates Home en Pagina) */ .bk-marker, .bk-markers { display: none; } /* HK-HERO-HOME: achtergrondkleur hero Home via veld "Kleur van de header" (Automatisch = groen) */ .uk-section:has(.hk-kleur-1){ background:var(--kleur-1)}.uk-section:has(.hk-kleur-2){ background:var(--kleur-2)}.uk-section:has(.hk-kleur-3){ background:var(--kleur-3)}.uk-section:has(.hk-kleur-4){ background:var(--kleur-4)}.uk-section:has(.hk-licht){ background:var(--kleur-licht)}.uk-section:has(.hk-wit){ background:#fff} /* HM-BLOK: Home-blokken (sectie herhaald per blok uit het Home-artikel). Opeenvolgende lichtblauwe blokken vormen een doorlopend vlak met afgeronde hoeken alleen aan begin en eind. */ .hm-blok { display: flow-root; } .hm-blok:has(.bt-intro) > .uk-container { padding-left: 15px !important; padding-right: 15px !important; } .hm-blok:has(.bk-ach-lichtblauw) + .hm-blok:has(.bk-ach-lichtblauw) { border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; } .hm-blok:has(.bk-ach-lichtblauw):has(+ .hm-blok .bk-ach-lichtblauw) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; } /* HM-KNOP-OUTLINE-MOBIEL: op mobiel staan de knoppen onder de kaart op wit, dus outline-knop in paars */ @media (max-width:959px) { .hm-knoppen .hm-knop-outline.uk-button, .hm-knoppen .hm-knop-outline .uk-button { color: var(--kleur-primair); } .hm-knoppen .hm-knop-outline.uk-button::before, .hm-knoppen .hm-knop-outline .uk-button::before { border-color: var(--kleur-primair) !important; } } /* TEAM-PLACEHOLDER: teamlid zonder foto krijgt een grijs vlak met het Abbo-logo op 50% */ .bk-team .el-item:not(.abbo-cta):not(:has(img))::before { content: ""; display: block; width: 100%; aspect-ratio: 308 / 340; background: linear-gradient(rgba(246,245,244,.5), rgba(246,245,244,.5)), url("/images/template/logo.svg") center / 125px auto no-repeat, #f6f5f4; } /* HEADER-SIER: sierelement naast de headerfoto (veld "Sierelement bij de headerfoto", Pagina-template) */ .hdr-sier-wrap { position: relative; } .hdr-sier { position: absolute; pointer-events: none; z-index: 2; } .hdr-sier svg { display: block; overflow: visible; } .hdr-zon { top: 119px; right: 566px; width: 100px; height: 100px; } .hdr-zon svg { width: 100%; height: 100%; } .hdr-zon path { stroke-dasharray: 500; stroke-dashoffset: 500; animation: abboDrawOutline 10s linear forwards; } .hdr-zon path:nth-child(1) { animation-delay: .3s; } .hdr-zon path:nth-child(2) { animation-delay: 1s; } .hdr-zon path:nth-child(3) { animation-delay: 1.2s; } .hdr-zon path:nth-child(4) { animation-delay: 1.4s; } .hdr-zon path:nth-child(5) { animation-delay: 1.6s; } .hdr-zon path:nth-child(6) { animation-delay: 1.8s; } .hdr-zon path:nth-child(7) { animation-delay: 2s; } .hdr-muziek { top: 95px; right: 557px; width: 70px; height: 70px; } .hdr-muziek svg { position: absolute; width: 70px; height: 70px; } .hdr-muziek svg:first-child { top: 0; right: 0; } .hdr-muziek svg:first-child path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: abboDraw2 10s ease forwards; } .hdr-muziek svg:last-child { top: 50px; right: 74px; } .hdr-muziek svg:last-child path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: abboDraw 10s ease 1.2s forwards; } @keyframes abboDrawOutline { 0% { stroke-dashoffset: 500; } 30% { stroke-dashoffset: 300; } 40% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } } @keyframes abboDraw2 { 0% { stroke-dashoffset: 600; } 30% { stroke-dashoffset: 400; } 60% { stroke-dashoffset: 300; } 100% { stroke-dashoffset: 0; } } @media (max-width:959px) { .hdr-sier { display: none; } } @media (prefers-reduced-motion:reduce) { .hdr-sier path { animation: none !important; stroke-dashoffset: 0 !important; } } /* TEAM-LINKTEKST: hele vacaturekaart is de link (show_link aan voor panel_link), losse linktekst verbergen */ /* PARTNERS-SLIDER-FIX: pijlen staan 100px boven de slider; uk-slider-container knipt die weg (geen klik). Overflow zichtbaar + clip-path die alleen de bovenkant vrijlaat. Kaart 302x165, logo max 151x70. */ .bk-partners.uk-slider-container { overflow: visible; clip-path: inset(-120px 0 -10px 0); position: relative; z-index: 3; } .bk-partners .el-slidenav { z-index: 4; } .bk-partners .uk-slider-items .el-item { width: 100%; } .bk-partners .uk-slider-items .uk-card { display: flex; align-items: center; justify-content: center; height: 165px; padding: 0 30px; box-sizing: border-box; border-radius: 2.6vw; box-shadow: none; background: #fff; } .bk-partners .uk-slider-items .uk-card > * { margin: 0; } .bk-partners .el-image { max-height: 70px; max-width: 151px; width: auto; height: auto; object-fit: contain; } @media (max-width:959px) { .bk-partners .uk-slider-items .uk-card { border-radius: 30px; } } /* EM-KLEUR: cursieve tekst erft de tekstkleur (UIkit standaard = roze #f0506e). */ em, i:not([class]) { color: inherit; } /* === VACATURES (overzicht cat 18 + lijst per soort cat 31/32) === */ .vac-header{ position:relative;background:var(--kleur-1);padding:268px 0 150px!important} .vac-header h1{ position:relative;margin:0;color:#fff;font-size:55px;line-height:66px;font-weight:700} .vac-header h1 span{ display:block;margin-top:5px;font-family:var(--font-accent);font-size:60px;line-height:72px;font-weight:700;color:var(--kleur-tekst)} .vac-header h1::before{ content:'';position:absolute;left:-50px;top:-42px;width:67px;height:52px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.92 18.91'%3E%3Cpath stroke='%23fff' fill='none' stroke-width='3' d='M52.88,3.91c-2.11,.06-4.020-.31-5.72-1.11-2.56-1.2-31.1-3.58-29.3,15.99'/%3E%3Cpath stroke='%23fff' fill='none' stroke-width='3' d='M15.31,1.18c-.95,.34-1.89,.45-2.82,.32-1.4-.19-14.87,2.91-10.29,12.05'/%3E%3C/svg%3E") center/contain no-repeat} .vac-header .abbo-scrollto{ position:absolute;left:calc(50% - 19px);bottom:50px;width:38px;height:38px;display:block;z-index:4} .vac-header .abbo-scrollto svg{ display:block;width:38px;height:38px;animation:bounce_scroll 3.5s infinite 2s} .vac-intro{ background:#fff;margin-top:-20px;border-radius:2.6vw 2.6vw 0 0;position:relative;z-index:1;padding:83px 0 67px!important} .vac-intro .uk-panel{ max-width:900px;margin:0 0 0 138px;text-align:center;font-size:18px;line-height:28.8px;color:var(--kleur-tekst)} .vac-intro .uk-panel>h2{ margin:0 0 15px;font-family:var(--font-accent);font-size:40px;line-height:64px;font-weight:600;color:var(--kleur-accent)} .vac-intro p{ margin:0} .vac-keuze{ background:var(--kleur-licht);border-radius:2.6vw 2.6vw 0 0;padding:100px 0 61px!important;position:relative;z-index:1} .vac-tegels>.uk-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-left:0} .vac-tegels>.uk-grid>*{ width:auto;padding-left:0;margin-top:0} .vac-tegels .el-image{ display:block;width:100%;height:507px;object-fit:cover;border-radius:2.6vw} .vac-tegels .el-title{ position:relative;margin:-11px 23px 0 28px!important;padding:50px 50px 0;background:var(--kleur-2);border-radius:2.6vw 2.6vw 0 0;font-family:var(--font-kop);font-size:30px;line-height:36px;font-weight:500;color:#fff;text-transform:none} .vac-tegels .el-title+div{ margin:0 23px 0 28px!important;padding:30px 50px 50px;background:var(--kleur-2);border-radius:0 0 2.6vw 2.6vw;text-align:left} .vac-lijst-sectie{ margin-top:-17px;background:var(--kleur-licht);border-radius:2.6vw;padding:100px 0!important} .vac-lijst-kop{ margin:0;text-align:center;font-family:var(--font-kop);font-size:40px;line-height:48px;font-weight:700;color:var(--kleur-tekst)} .vac-lijst-kop span{ display:block;margin-top:5px;font-family:var(--font-accent);font-weight:600;color:var(--kleur-accent)} .vac-lijst-kop span:empty{ display:none} .vac-kaarten{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin:30px 0 0!important} .vac-kaarten>.vac-kaart{ position:relative;width:auto;margin:0;padding:0 0 40px;background:#fff;border-radius:2.6vw;overflow:hidden} .vac-kaart>*:not(.vac-kaart-foto){ margin-left:30px;margin-right:30px} .vac-kaart:has(.vac-kaart-tekst)>*:not(.vac-kaart-foto){ margin-left:40px!important;margin-right:40px!important} .vac-kaart::after{ content:'';position:absolute;left:40px;top:191px;width:78px;height:65px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.13 35.58' fill='%23fff'%3E%3Cpath d='M20.34 35.58c-3.9 0-7.95-1.14-11.72-3.92C3.28 27.73.39 23.33.04 18.58-.46 11.95 4.21 7.2 4.41 7l.2-.16c.56-.37 13.93-9.02 24.76-6.32 4.14 1.03 7.36 3.58 9.55 7.58 4.12 7.48 2.39 16.16-4.4 22.1-3.58 3.14-8.73 5.38-14.19 5.38zM6.09 8.86c-.58.63-3.95 4.53-3.56 9.56.31 3.98 2.85 7.76 7.57 11.23 7.97 5.88 17.18 3.57 22.78-1.33 4.67-4.09 8.13-11.23 3.85-19.02-1.85-3.36-4.53-5.5-7.96-6.35C19.5.63 7.41 8.03 6.09 8.86z'%3E%3C/path%3E%3Cellipse cx='14.87' cy='13.21' rx='3' ry='2.5'%3E%3C/ellipse%3E%3Cellipse cx='25.87' cy='13.21' rx='3' ry='2.5'%3E%3C/ellipse%3E%3Cpath d='M20.35 25.94c-.93 0-1.84-.1-2.73-.29-5.81-1.25-8.71-6.11-8.83-6.32l2.16-1.26s2.5 4.14 7.22 5.14c3.61.76 7.63-.42 11.97-3.52l1.45 2.04c-3.92 2.8-7.7 4.21-11.25 4.21z'%3E%3C/path%3E%3C/svg%3E") 22px 15px / 34px 34px no-repeat, var(--svg-blob-k2) 0 0 / 78px 65px no-repeat} .vac-kaart-foto{ margin:0} .vac-kaart-foto img{ display:block;width:100%;height:235px;object-fit:cover} .vac-kaart-titel{ margin-top:40px;margin-bottom:0;font-family:var(--font-kop);font-size:23px;line-height:27.6px;font-weight:500;color:var(--kleur-tekst);text-transform:none} .vac-kaart-meta{ margin-top:30px;margin-bottom:0} .vac-kaart-meta>li{ position:relative;margin:0;padding-left:15px;font-size:18px;line-height:28.8px;color:#937e9d} .vac-kaart-meta>li::before{ content:'';position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--kleur-2)} .vac-kaart-tekst{ margin-top:0;font-size:18px;line-height:28.8px;color:#937e9d} .vac-kaart-tekst h4{ margin:0;font-family:inherit;font-size:18px;line-height:28.8px;font-weight:500;color:var(--kleur-tekst);text-transform:none} .vac-kaart .vac-kaart-tekst>p{ margin:30px 0 0} .vac-kaart-link{ margin-top:30px;margin-bottom:0} .vac-kaart-link .uk-button{ display:inline-block;vertical-align:top;height:auto;min-height:0;padding:0;border:0!important;line-height:28.8px;padding:0;border:0;background:none;font-size:18px;line-height:28.8px;font-weight:500;color:var(--kleur-tekst);text-decoration:underline;text-transform:none;letter-spacing:0;text-align:left} .vac-kaart-link .uk-button::before,.vac-kaart-link .uk-button::after{ display:none} @media (max-width:959px){ .vac-header{ padding:180px 0 90px!important} .vac-header h1{ font-size:36px!important;line-height:1.2} .vac-header h1 span{ font-size:40px;line-height:48px} .vac-header h1::before,.vac-header .abbo-scrollto{ display:none} .vac-tegels>.uk-grid,.vac-kaarten{ grid-template-columns:minmax(0,1fr)} .vac-tegels .el-image{ height:auto;aspect-ratio:633/507;border-radius:30px} .vac-tegels .el-title{ margin:-11px 15px 0!important;padding:30px 25px 0;font-size:24px;line-height:30px;border-radius:30px 30px 0 0} .vac-tegels .el-title+div{ margin:0 15px!important;padding:20px 25px 30px;text-align:center;border-radius:0 0 30px 30px} .vac-keuze{ padding:60px 0 50px!important;border-radius:30px 30px 0 0} .vac-kaarten>.vac-kaart{ border-radius:30px} .vac-lijst-sectie{ margin-top:0;padding:60px 0!important;border-radius:30px} .vac-lijst-kop{ font-size:30px!important;line-height:36px} .vac-intro .uk-panel>h2{ font-size:30px;line-height:44px}.vac-intro .uk-panel{ margin:0 auto} } /* vacature-detail: logo's kindcentra (subform Logo's) als witte kaart over de foto */ .vac-logos{ position:absolute!important;right:41px;bottom:1px;width:232px;margin:0!important;padding:30px;box-sizing:border-box;background:#fff;border-radius:25px;z-index:2} .vac-logos>.uk-grid{ display:block;margin:0!important} .vac-logos>.uk-grid>*{ width:100%!important;padding:0!important;margin:0!important} .vac-logos .el-image{ display:block;width:171px;max-width:100%;height:auto;margin:0} @media (max-width:959px){.vac-logos{ position:relative!important;right:auto;bottom:auto;margin:-50px 20px 0 auto!important}} /* vacatures: animaties (klassen gezet door custom.js, VACATURES; zonder JS alles zichtbaar) */ .vac-a.vac-down,.vac-a.vac-up,.vac-a.vac-right,.vac-a.vac-zoom,.vac-a.vac-zoomimg{ opacity:0} .vac-a.vac-down.vac-v{ animation:vacDown 1s ease both} .vac-a.vac-up.vac-v{ animation:vacUp 1.2s ease both} .vac-a.vac-img.vac-v{ animation:vacZoomImg 2s ease both} .vac-a.vac-right.vac-v{ animation:vacRight 2s ease both} .vac-a.vac-zoom.vac-v{ animation:vacZoom 1s ease both} .vac-a.vac-zoomimg.vac-v{ animation:vacZoomImgFade 1.2s ease both} @keyframes vacZoomImgFade{0%{ scale:.8}100%{ opacity:1;scale:1}} @keyframes vacDown{0%{ opacity:0;translate:0 -20px}100%{ opacity:1;translate:0 0}} @keyframes vacUp{0%{ opacity:0;translate:0 50px}100%{ opacity:1;translate:0 0}} @keyframes vacRight{0%{ opacity:0;translate:50px 0}100%{ opacity:1;translate:0 0}} @keyframes vacZoom{0%{ opacity:0;scale:.8}80%{ opacity:1}100%{ opacity:1;scale:1}} @keyframes vacZoomImg{0%{ scale:.8}100%{ scale:1}} @keyframes vacDraw{0%{ stroke-dashoffset:400}30%{ stroke-dashoffset:300}40%{ stroke-dashoffset:200}100%{ stroke-dashoffset:0}} .vac-tegels .el-title,.vac-tegels .el-title+div{ transform:translateY(var(--vp,0px))} .vac-tegels .el-title:not(.vac-a),.vac-tegels .el-title.vac-klaar{ box-shadow:0 2px 0 var(--kleur-2)} /* naadje dichten pas na de inschuif-animatie, anders dubbele laag (streep) tijdens het infaden */ .vac-header h1::before,.vac-det-header h1::before{ content:none} .vac-swirl{ position:absolute;left:-48px;top:-42px;width:67px;height:52px;overflow:visible;pointer-events:none} .vac-swirl path{ fill:none;stroke:#fff;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:400;stroke-dashoffset:400;animation:vacDraw 10s linear .5s both} .vac-swirl path+path{ animation-delay:1.5s} :is(.vac-header,.vac-det-header) .abbo-scrollto path{ stroke-dasharray:400;stroke-dashoffset:400;animation:vacDraw 15s linear both} :is(.vac-header,.vac-det-header) .abbo-scrollto path+path{ animation-delay:1.8s} .vac-kaart::after{ animation:abboWobble 3s ease infinite} .vac-kaart:has(.vac-kaart-tekst)::after{ animation-duration:2s} .vac-kaart-foto{ overflow:hidden} .vac-kaart-foto img{ transition:transform .6s} .vac-kaart:hover .vac-kaart-foto img{ transform:scale(1.1)} /* Partneroverzicht: dezelfde kaarten als de vacatures, met een logo in plaats van een foto */ .prt-kaart-logo{ display:flex;align-items:center;justify-content:center;height:235px;padding:30px 40px 70px;box-sizing:border-box;border-bottom:2px solid var(--kleur-licht)} .prt-kaart-logo a,.prt-kaart-logo picture{ display:contents} .prt-kaart-logo img{ width:auto;height:auto;max-width:100%;max-height:120px;object-fit:contain} .prt-kaart:hover .prt-kaart-logo img{ transform:scale(1.05)} .vac-kaart .prt-kaart-tekst{ margin-top:12px!important} .vac-kaart-link .uk-button{ position:static} .vac-kaart-link .uk-button::after{ display:block!important;content:'';position:absolute;inset:0;z-index:3;width:auto;height:auto;margin:0;background:none;border:0;transform:none;opacity:1} @media (max-width:959px){.vac-swirl{ display:none}} @media (prefers-reduced-motion:reduce){.vac-a{ opacity:1!important;animation:none!important}.vac-swirl path,:is(.vac-header,.vac-det-header) .abbo-scrollto path{ animation:none!important;stroke-dashoffset:0}.vac-kaart::after{ animation:none}} /* === einde VACATURES === */ /* === SOLLICITEREN (RSForm 5 "Sollicitatieformulier" op /solliciteren) === */ div#intro.uk-section:has(#userForm){ padding-top:13px!important} #intro:has(#userForm)>.uk-container{ max-width:1296px;padding:0 72px} .uk-section:has(#userForm) .uk-grid>*:has(>.uk-panel>#userForm){ width:100%;max-width:none} .uk-panel:has(>#userForm){ max-width:none!important;text-align:left;font-size:18px;line-height:28.8px} #userForm{ padding:45px 50px;background:#fff;border-radius:2.6vw} #userForm>h2{ margin:0 0 30px!important;font-family:var(--font-kop)!important;font-size:20px!important;line-height:24px!important;font-weight:700!important;color:var(--kleur-tekst)!important;text-transform:none;letter-spacing:0} #intro #userForm .uk-grid,#userForm .uk-grid{ display:flex;flex-direction:row;flex-wrap:wrap;margin:0 0 0 -48px} #intro #userForm .uk-grid>*,#userForm .uk-grid>*{ flex:none;padding-left:48px;margin:0} #intro #userForm .uk-grid>.uk-width-1-1,#userForm .uk-grid>.uk-width-1-1{ width:100%} #intro #userForm .uk-grid>.uk-width-1-2\@m,#userForm .uk-grid>.uk-width-1-2\@m{ width:50%} #userForm .rsform-block{ margin:0 0 10px!important} #userForm .uk-form-label{ display:block;margin:0;padding:15px 10px 15px 0;font-size:15px;line-height:18.75px;font-weight:400;color:var(--kleur-tekst)} #userForm .formRequired{ font-weight:400;margin-left:4px} #userForm .uk-input,#userForm .uk-select{ height:51px;padding:15px;border:1px solid #cfe0ed;border-radius:10px;background-color:#fff;font-size:15px;line-height:18.75px;font-weight:400;color:var(--kleur-tekst)} #userForm .uk-select{ padding-right:30px} #userForm .uk-input:focus,#userForm .uk-select:focus{ border-color:var(--kleur-1);outline:2px solid var(--kleur-1);outline-offset:0} #userForm .rsform-type-fileupload .uk-form-label{ margin-bottom:-1px} #userForm .rsform-type-fileupload .uk-form-custom{ display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:106px;padding:25px 35px;box-sizing:border-box;border:1px solid #cfe0ed;border-radius:10px;text-align:center;cursor:pointer} #userForm .rsform-type-fileupload .uk-form-custom::before{ content:"Kies bestand";font-size:16px;line-height:24px;color:var(--kleur-tekst)} #userForm .rsform-type-fileupload .uk-form-custom::after{ content:"Max. 16 MB";font-size:14px;line-height:22.4px;color:rgba(65,34,90,.3)} #userForm .rsform-type-fileupload .uk-form-custom .uk-button{ display:none} #userForm .rsform-type-fileupload .uk-form-custom .uk-input{ order:3;height:auto;width:100%;padding:0;border:0;background:none;text-align:center;font-size:14px;color:var(--kleur-tekst)} #userForm .rsform-type-fileupload .uk-form-custom .uk-input:placeholder-shown{ display:none} #userForm .rsform-type-fileupload .uk-form-custom:has(.uk-input:not(:placeholder-shown))::after{ display:none} #userForm .rsform-type-fileupload .uk-form-custom:focus-within{ outline:2px solid var(--kleur-1)} #userForm .rsform-block-privacy{ padding:20px 0 5px;margin:0!important} #userForm .rsform-block-privacy label{ font-size:14px;line-height:22.4px;color:var(--kleur-tekst)} #userForm .rsform-block-privacy .uk-checkbox{ width:17px;height:17px;margin:-2px 12px 0 0;border:1px solid #cfe0ed;border-radius:3px;background-color:#fff} #userForm .rsform-block-privacy .uk-checkbox:checked{ background-color:var(--kleur-primair);border-color:var(--kleur-primair)} #userForm .rsform-block-privacy a{ color:inherit;text-decoration:underline} #userForm .rsform-block-verzenden{ text-align:right} /* Formulier in de artikeltekst van een pagina (Contact onderwijs/kinderopvang): lichtblauwe kaart */ .ab-pg-intro-tekst #userForm{ background:var(--kleur-licht);border-radius:40px;padding:50px;font-size:16px;line-height:1.6;text-align:left} .ab-pg-intro-tekst:not(#_):has(#userForm){ max-width:none} .ab-pg-intro-tekst #userForm{ margin-top:30px} @media (max-width:959px){.ab-pg-intro-tekst #userForm{ padding:30px 20px;border-radius:25px}} #userForm #verzenden::before{ background:var(--kleur-primair)} @media (max-width:959px){#intro:has(#userForm)>.uk-container{ padding:0 15px}#userForm{ padding:30px 20px;border-radius:30px}#intro #userForm .uk-grid>.uk-width-1-2\@m,#userForm .uk-grid>.uk-width-1-2\@m{ width:100%}} /* === einde SOLLICITEREN === */ /* KAART-POPUP (contact): adres, telefoon en tekstlink naar de website (nieuw venster) */ .bk-kaart .el-item .el-title{ margin-bottom:6px!important} .bk-kaart .el-item .el-content,.bk-kaart .el-item .el-meta{ margin-top:0!important;font-size:14px;line-height:20px;color:var(--kleur-tekst)} .bk-kaart .el-item .el-link{ display:inline-block;margin-top:4px;font-size:14px;color:var(--kleur-primair);text-decoration:underline} /* Geen lichtblauwe balk bovenin witte vlakken (hele site): wit eerste blok begint direct onder de band, en geen lichtblauwe afrondingsstrook boven een wit blok */ .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit)::after { display: none; } .uk-section-muted:has(> .uk-container > .uk-grid:first-child .bk-bg-wit) { background: linear-gradient(#fff, #fff) 0 0 / 100% 400px no-repeat, var(--kleur-licht) !important; } /* === DOWNLOAD-ICOON (generiek) === */ :root{--abbo-ico-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.3 19.8'%3E%3Cpath d='M12.534 19.746c-2.8 0-5.3-.1-6.2-.4-1.7-.6-4.8-.2-5.8 0l-.5-2.5c.5-.1 4.5-.8 7.1 0 1.5.5 10.9.3 17.1-.1l.1 2.5c-1.6.3-7.2.5-11.8.5zM11.429 12.546c-.4-3.6-.7-8.3.2-9.6.2-.4.1-1.5-.2-2.1l2.3-.9c.1.3 1 2.7-.1 4.4-.3.7-.1 4.7.2 8l-2.4.2z'/%3E%3Cpath d='M12.829 14.646c-.8 0-2.4-.8-6.9-5.5l1.7-1.7c1.6 1.6 3.5 3.4 4.6 4.2 1-1.6 3.3-3.4 4.8-4.4l1.4 2.1c-2 1.4-4 3.2-4.2 3.8 0 .6-.3 1.1-.9 1.3-.1.1-.3.2-.5.2z'/%3E%3C/svg%3E");--abbo-ico-download-wit:url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.3 19.8'%3E%3Cpath d='M12.534 19.746c-2.8 0-5.3-.1-6.2-.4-1.7-.6-4.8-.2-5.8 0l-.5-2.5c.5-.1 4.5-.8 7.1 0 1.5.5 10.9.3 17.1-.1l.1 2.5c-1.6.3-7.2.5-11.8.5zM11.429 12.546c-.4-3.6-.7-8.3.2-9.6.2-.4.1-1.5-.2-2.1l2.3-.9c.1.3 1 2.7-.1 4.4-.3.7-.1 4.7.2 8l-2.4.2z'/%3E%3Cpath d='M12.829 14.646c-.8 0-2.4-.8-6.9-5.5l1.7-1.7c1.6 1.6 3.5 3.4 4.6 4.2 1-1.6 3.3-3.4 4.8-4.4l1.4 2.1c-2 1.4-4 3.2-4.2 3.8 0 .6-.3 1.1-.9 1.3-.1.1-.3.2-.5.2z'/%3E%3C/svg%3E");--abbo-blob-blauw:var(--svg-blob-k1)} /* knop naar een document: icoon voor de tekst */ .bk-card a.el-link:is([href$=".pdf" i],[href$=".doc" i],[href$=".docx" i],[href$=".xlsx" i])::before{ background-image:var(--abbo-ico-download-wit);background-repeat:no-repeat;background-position:26px 50%;background-size:20px 17px} /* kop met blauw blobje + downloadicoon: kaart met documentknop en de kop boven een downloadlijst */ :has(> * > .bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card:has(a.el-link:is([href$=".pdf" i],[href$=".doc" i],[href$=".docx" i])) .el-title,h2:has(+.bk-downloads),h3:has(+.bk-downloads),h2:has(+.ab-pg-downloads-tekst){ position:relative} :has(> * > .bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card:has(a.el-link:is([href$=".pdf" i],[href$=".doc" i],[href$=".docx" i])) .el-title::before,h2:has(+.bk-downloads)::before,h3:has(+.bk-downloads)::before,h2:has(+.ab-pg-downloads-tekst)::before{ content:"";position:absolute;left:0;top:50%;width:78px;height:65px;margin-top:-32.5px;background:var(--abbo-ico-download-wit) 50% 46%/30px 25px no-repeat,var(--abbo-blob-blauw) 0 0/100% 100% no-repeat} /* downloadlijst: zelfde icoon in plaats van het dunne UIkit-pijltje */ .bk-downloads .el-image.uk-icon{ display:inline-block;width:20px;height:17px} .bk-downloads .el-image.uk-icon svg{ display:block;width:20px;height:17px} @media (max-width:959px){:has(> * > .bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card:has(a.el-link:is([href$=".pdf" i],[href$=".doc" i],[href$=".docx" i])) .el-title::before,h2:has(+.bk-downloads)::before,h3:has(+.bk-downloads)::before,h2:has(+.ab-pg-downloads-tekst)::before{ width:62px;height:52px;margin-top:-26px;background-size:24px 20px,100% 100%}} /* === TIJDLIJN: zachte overgang in plaats van schuivende kaarten met gat ertussen === */ .bk-tijdlijn .uk-slider-items>*{ opacity:0;transition:opacity .45s ease} .bk-tijdlijn .uk-slider-items>.uk-active{ opacity:1} @media (prefers-reduced-motion:reduce){.bk-tijdlijn .uk-slider-items>*{ transition:none}} /* === COOKIEBALK === */ /* COOKIEBALK-BREEDTE: iets breder, ruimte rechts van Accepteren voor de hover-lijntjes */ @media (min-width:640px){.tm-consent{ width:640px!important}} .tm-consent [data-consent-button=accept]{ margin-right:24px} /* COOKIE-POPUP-KNOPPEN: knoppen in balk en instellingen-popup houden hun kleur bij hover/focus (anders wit op wit) */ [data-consent-button].uk-button:is(:hover,:focus-visible)::before{ opacity:1!important;visibility:visible!important} [data-consent-button].uk-button:is(:hover,:focus-visible){ color:#fff!important} .tm-consent .uk-notification-message>.uk-grid{ justify-content:flex-start;align-items:center;text-align:left;gap:12px 36px;margin-left:0} .tm-consent .uk-notification-message>.uk-grid>*{ flex:none;width:auto;padding-left:0;margin-top:0} .tm-consent [data-consent-button=accept]{ width:auto;padding-left:30px;padding-right:30px} .tm-consent [data-consent-button=accept]::before,.tm-consent [data-consent-button=accept]:hover::before,.tm-consent [data-consent-button=accept]:focus-visible::before{ background-color:var(--kleur-primair)!important;opacity:1!important;visibility:visible!important} .tm-consent [data-consent-button=accept]:hover,.tm-consent [data-consent-button=accept]:focus-visible{ color:#fff!important;background-color:transparent!important} .tm-consent .uk-button-text{ background:none;border:0!important;padding:0;min-height:0;height:auto;line-height:1.5;font-size:16px;font-weight:500;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap;transform:none} .tm-consent .uk-button-text::before,.tm-consent .uk-button-text::after{ display:none} .tm-consent .uk-button-text:hover,.tm-consent .uk-button-text:focus-visible{ text-decoration-thickness:2px;color:#fff!important} @media (max-width:639px){.tm-consent{ left:10px;right:10px;width:auto;bottom:72px;margin:0}.tm-consent .uk-notification-message>.uk-grid{ gap:12px 22px}.tm-consent .uk-notification-message>.uk-grid>:first-child{ width:100%}.tm-consent [data-consent-button=accept]{ width:100%!important}} /* === MOBIEL: geen horizontale overloop (sierelementen, sliders) === */ .tm-page{ overflow-x:clip} /* === MOBIEL: leesbaarheid en uitlijning (generiek, alle sites) === */ /* lijst met locaties/links: pijltje altijd rechts uitgelijnd */ .bk-locaties a.uk-link-toggle{ display:flex;align-items:center;gap:12px} .bk-locaties a.uk-link-toggle>.uk-grid{ flex:1;min-width:0} .bk-locaties a.uk-link-toggle::after{ flex:none;margin-left:auto} /* telefoonnummers nooit afbreken */ a[href^="tel:"]{ white-space:nowrap} /* ervaringen/quotes in sierletter: regels niet over elkaar */ .bk-ervaringen .el-title{ line-height:1.25!important} @media (max-width:959px){ /* intro onder de header: minder lege ruimte */ div#intro.uk-section:not(:has(#userForm)){ padding-top:40px!important} /* rechts uitgelijnde tekst is op mobiel slecht leesbaar */ .uk-panel.uk-text-right,.uk-text-right.uk-text-large{ text-align:left!important} /* home-blokken zonder zijmarge: zelfde 15px als de rest */ .hm-blok .uk-container:is(.uk-padding-remove,.uk-padding-remove-horizontal){ padding-left:15px!important;padding-right:15px!important} .hm-knoppen>.uk-grid{ justify-content:center;flex-wrap:nowrap} .hm-knoppen .uk-button{ padding-left:22px;padding-right:22px} .bk-ervaringen .el-title{ font-size:24px!important;line-height:1.3!important} /* gekleurde kaarten: links uitlijnen leest beter dan gecentreerd */ .tm-page .bk-card.uk-text-center{ text-align:left!important} .tm-page .bk-card .btgrid .row{ flex-wrap:nowrap!important} .tm-page .bk-card .btgrid .col{ width:auto!important} /* knoppen: tekst altijd binnen de vorm */ .tm-page .uk-button{ white-space:nowrap} /* kaart (Google Maps): toestemmingsmelding niet onder de locatiekaart laten vallen */ .tm-page .bk-locatielijst{ margin-top:16px!important} /* koppen: alleen lange woorden afbreken, niet 'op-nemen' */ h1,h2,h3,.uk-h3,.uk-card-title{ hyphenate-limit-chars:12 5 5} } /* BANNER-LINES-MOBIEL: sierlijntjes bij de paginatitel volledig in beeld en niet onder het logo */ @media (max-width:959px){.tm-page .uk-position-relative:has(>.banner-lines){ left:-11px!important;transform:translateY(var(--bl-y,0px))}body:not(:has(.hm-blok)) .uk-position-relative:has(>.banner-lines){--bl-y:8px}body:has([id^="page#"]) .uk-position-relative:has(>.banner-lines){--bl-y:56px}} /* HM-GENEST-MOBIEL: geneste container in home-blokken geen extra zijmarge, alles op 15 px */ @media (max-width:959px){.hm-blok .uk-container .uk-container{ padding-left:0!important;padding-right:0!important}} /* HM-DOTS: stipjes op de foto van de kindcentra-slider (mobiel, max 5 zichtbaar) */ .hm-dots{ display:none} @media (max-width:959px){.hm-dots{ display:flex;position:absolute;left:0;right:0;z-index:3;justify-content:center;align-items:center;gap:10px;height:12px;pointer-events:none}.hm-dots>span{ display:none;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 3px rgba(0,0,0,.35);transition:transform .3s ease,background-color .3s ease}.hm-dots>span.hm-dot-v{ display:block}.hm-dots>span.hm-dot-on{ background:#fff}.hm-dots>span.hm-dot-klein{ transform:scale(.6)}} /* TIJDLIJN-NAV-MOBIEL: jaartallen boven de tijdlijn (onder de kop), anders grote lege ruimte door de hoogste slide */ @media (max-width:959px){:has(> .bk-tijdlijn){ display:flex;flex-direction:column}:has(> .bk-tijdlijn)>*{ order:0}:has(> .bk-tijdlijn)>.bk-tijdlijn{ order:2}} /* === MOBIEL MENU (header + dialog) === */ @media (max-width:1199px){ /* header: alleen Contact naast de menuknop, hamburger in lichtblauwe blob */ .tm-header-mobile .uk-navbar-right{ gap:18px;align-items:center} .tm-header-mobile .uk-navbar-right>.uk-navbar-item{ padding:0;min-height:0} .tm-header-mobile .uk-navbar-right .uk-margin{ margin:0} .tm-header-mobile .uk-navbar-right .uk-grid{ margin-left:0} .tm-header-mobile .uk-navbar-right .uk-grid>*{ padding-left:0} .tm-header-mobile .uk-navbar-right .uk-button{ padding:0 18px;line-height:52px;height:54px;font-size:16px} .tm-header-mobile .uk-navbar-toggle{ width:62px;height:52px;min-height:52px;padding:0;justify-content:center;color:var(--kleur-tekst);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23ebf5fc'/%3E%3C/svg%3E") center/contain no-repeat} .tm-header-mobile .uk-navbar-toggle:hover{ color:var(--kleur-primair)} .tm-header-mobile .uk-navbar-toggle-icon svg>line{ stroke-width:2} /* dialog: paars, links uitgelijnd, grote items; Onze kindcentra + Contact als gewone menu-items */ #tm-dialog-mobile,#tm-dialog-mobile .uk-modal-dialog{ background:var(--kleur-primair);border-radius:0} #tm-dialog-mobile .uk-modal-dialog{ min-height:100vh;min-height:100dvh} #tm-dialog-mobile .uk-modal-body{ min-height:0} #tm-dialog-mobile .uk-close{ color:#fff;left:30px;right:auto;top:30px} #tm-dialog-mobile .uk-modal-body{ width:100%;box-sizing:border-box;padding:110px 30px 40px} #tm-dialog-mobile .uk-margin-auto-vertical{ text-align:left;width:100%} #tm-dialog-mobile .uk-nav-center{ text-align:left} #tm-dialog-mobile .uk-nav-default>li>a,#tm-dialog-mobile .el-item>.uk-button{ display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:27px;line-height:1.3;font-weight:500;letter-spacing:-.5px;color:#fff;padding:10px 0;margin:0;text-decoration:none;text-align:left;height:auto;background:none;border:0!important;box-shadow:none;transform:none} #tm-dialog-mobile .el-item>.uk-button::before,#tm-dialog-mobile .el-item>.uk-button::after{ display:none} #tm-dialog-mobile .uk-nav-default>li>a:hover,#tm-dialog-mobile .uk-nav-default>li.uk-active>a,#tm-dialog-mobile .el-item>.uk-button:hover{ color:var(--kleur-2)!important} #tm-dialog-mobile .uk-nav-default .uk-nav-sub{ display:none} #tm-dialog-mobile .uk-margin-auto-vertical>.uk-grid{ margin-left:0} #tm-dialog-mobile .uk-margin-auto-vertical>.uk-grid>*{ padding-left:0} #tm-dialog-mobile .uk-margin-auto-vertical>.uk-grid>*+*{ margin-top:0} #tm-dialog-mobile .uk-panel .uk-margin{ margin:0} #tm-dialog-mobile .uk-panel:not(:has(.mm-social)) .uk-grid.uk-child-width-auto{ display:block;margin-left:0} #tm-dialog-mobile .uk-panel:not(:has(.mm-social)) .uk-grid.uk-child-width-auto>*{ padding-left:0;margin-top:0} #tm-dialog-mobile .uk-grid-margin{ margin-top:0} /* volg ons ook online */ #tm-dialog-mobile .mm-social{ margin-top:60px;text-align:left} #tm-dialog-mobile .mm-social-kop{ font-family:var(--font-kop);font-size:20px;font-weight:600;color:#fff;margin:0 0 15px} #tm-dialog-mobile .mm-social .uk-grid{ display:flex;flex-wrap:nowrap;margin-left:-5px} #tm-dialog-mobile .mm-social .uk-grid>*{ padding-left:5px;margin-top:0;width:auto} #tm-dialog-mobile .mm-social .uk-icon-button{ width:62px;height:52px;border-radius:0;color:var(--kleur-primair);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat} #tm-dialog-mobile .mm-social .uk-icon-button svg{ width:26px;height:26px} #tm-dialog-mobile .mm-social .uk-icon-button:hover{ color:var(--kleur-2)} } /* HM-SLIDER-HOOGTE: kindcentra-slider op mobiel zo hoog als de actieve slide (niet de langste), minder witruimte eronder */ @media (max-width:959px){.hm-kindcentra .uk-slider-items{ align-items:start}.hm-kindcentra .uk-slider-items>*:not(.abbo-cur){ position:absolute;top:0;left:0;width:100%}} /* MOBIEL-HEADER-SMAL: op heel smalle schermen (<360) past Contact + hamburger naast het logo */ @media (max-width:359px){.tm-header-mobile .uk-navbar-right{ gap:8px!important;flex-wrap:nowrap}.tm-header-mobile .uk-navbar-right .uk-button{ padding:0 12px!important;font-size:15px!important}.tm-header-mobile .uk-navbar-toggle{ padding-left:0;padding-right:0}} .tm-header-mobile .uk-navbar-right{ flex-wrap:nowrap} /* KAARTPOPUP-ADRESREGEL: postcode + plaats (custom.js) */ .el-adresregel{ font-size:14px;line-height:1.5;margin-top:2px} /* Kopniveau 3 op mobiel: YOOtheme heeft voor h3 geen aparte mobiele maat */ @media (max-width: 959px) { h3, .uk-h3 { font-size: 28px; } } /* ===================================================================== ELEMENT-CSS VAN DE YOOTHEME-TEMPLATES Elk blok hoort bij een element met de genoemde class (Builder > element > Geavanceerd > Class). ":not(#_)" houdt de specificiteit op id-niveau (zoals YOOtheme-element-CSS); niet weghalen. ===================================================================== */ /* ---------- Template: Home (HOHx9C2D) ---------- */ /* Header [section] */ .ab-hm-header:not(#_) { border-radius:0 } .ab-hm-header:not(#_) .ab-hm-headerfoto { margin-bottom:20px } @media (min-width:960px) { .ab-hm-header:not(#_) { padding:0 } .ab-hm-header:not(#_)>.uk-container { position:relative;min-height:max(707px,calc(75vh - 93px));padding-top:93px;display:flex;flex-direction:column;justify-content:center } .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child { margin-left:0;flex-wrap:nowrap;margin-top:0 } .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>* { padding-left:0 } .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:first-child { width:auto;max-width:562px;flex:none;margin:30px 0 } .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:first-child>.uk-panel { position:static } .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:last-child { position:absolute;top:50%;right:50px;width:555px;margin:0;transform:translateY(-50%) } .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:last-child .ab-hm-header:not(#_), .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:last-child .uk-panel>* { margin:0 } .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:last-child img { width:555px;height:596px;object-fit:contain } .ab-hm-header:not(#_)>.uk-container>.uk-grid:nth-child(2) { position:absolute;left:calc(50% + 11px);bottom:112px;margin:0 } .ab-hm-header:not(#_)>.uk-container>.uk-grid:nth-child(2)>* { padding-left:0 } .ab-hm-header:not(#_)>.uk-container>.uk-grid:nth-child(2) * { margin:0 } } @media (max-width:959px) { .ab-hm-header:not(#_) { padding-top:120px } } /* Header [row] */ .ab-hm-header-row:not(#_) { margin-bottom:-38px } /* Header > Icoon sun [html] */ @media (max-width:768px) { .ab-hm-icoon-sun:not(#_) { margin-top: -100px } } /* Header [headline] */ .ab-hm-header-headline:not(#_) { color:#fff;font-size:66px;line-height:1.2;font-weight:600;margin:0 } .ab-hm-header-headline:not(#_) span { font-family:var(--font-accent);font-size:76px;line-height:1.2;font-weight:700;text-shadow:none;color:var(--kleur-primair);display:block;padding-top:15px;white-space:nowrap } @media (max-width:959px) { .ab-hm-header-headline:not(#_) { font-size:40px!important } .ab-hm-header-headline:not(#_) span { font-size:44px!important;white-space:normal } } /* Header [button] */ /* ook: Header [button] */ .ab-hm-header-button:not(#_), .ab-pg-header-button:not(#_) { margin-top:30px!important;margin-bottom:0 } /* Header > Icoon scrollto [html] */ /* ook: Header > Icoon scrollto [html] */ .ab-hm-icoon-scrollto:not(#_), .ab-team-icoon-scrollto:not(#_) { height: 38px; transition: all .3s ease-in-out } .ab-hm-icoon-scrollto:not(#_) .scrollto svg, .ab-team-icoon-scrollto:not(#_) .scrollto svg { animation: bounce_scroll 3.5s ease-in-out infinite; animation-delay: 2s } /* Blokken (herhaald per blok in het Home-artikel) [section] */ .ab-hm-blokken:not(#_) .bk-markers, .ab-hm-blokken:not(#_) .bk-marker { display:none } .ab-hm-blokken:not(#_) .bk-marker-anker { margin:0;height:0;overflow:hidden } .ab-hm-blokken:not(#_) .bk-marker-anker+* { margin-top:0!important } .ab-hm-blokken:not(#_):has(.bt-intro,.bt-kindcentra)>.uk-container>.bk-markers+* { margin-top:0 } .ab-hm-blokken:not(#_):has(.bk-ach-wit) { background:#fff } .ab-hm-blokken:not(#_):has(.bk-ach-lichtblauw) { background:var(--kleur-licht);border-radius:70px } .ab-hm-blokken:not(#_):has(.bk-ach-lichtblauw)+.ab-hm-blokken:not(#_):has(.bk-ach-lichtblauw) { border-top-left-radius:0;border-top-right-radius:0;padding-top:0 } .ab-hm-blokken:not(#_):has(.bk-ach-lichtblauw):has(+.ab-hm-blokken:not(#_) .bk-ach-lichtblauw) { border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0 } .ab-hm-blokken:not(#_):has(.bt-intro)>.uk-container { padding-left:15px;padding-right:15px } @media (min-width:960px) { .ab-hm-blokken:not(#_):has(.bt-intro) { padding-top:36px;padding-bottom:94px } .ab-hm-blokken:not(#_):has(.bt-intro)>.uk-container { max-width:1020px } .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid { margin-left:0 } .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid>* { padding-left:0 } .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid>*:first-child .uk-text-large { padding-right:40px;font-size:20px;line-height:32px;margin:0 } .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid>*:last-child { position:relative } .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid>*:last-child h2 { width:auto;font-size:35px;line-height:42px;font-weight:700;margin:0;padding-top:10px } .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid>*:last-child h2 span { display:block;font-size:40px!important;line-height:48px;font-weight:600;margin-top:5px } .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid>*:last-child .uk-button { position:relative;margin:16px 0 0 } /* knop onder de kop */ .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid>*:last-child .uk-panel>*:last-child { margin:0!important } } @media (min-width:960px) { .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-pos-rechts) .uk-grid>*:has(.el-image) { margin-left:auto!important } .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-pos-rechts) .uk-grid>*:not(:has(.el-image)) { left:0;right:auto } } .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-kleur-kleur-1) [class*=uk-tile-] { background:var(--kleur-1) } .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-kleur-kleur-2) [class*=uk-tile-] { background:var(--kleur-2) } .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-kleur-kleur-3) [class*=uk-tile-] { background:var(--kleur-3) } .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-kleur-kleur-4) [class*=uk-tile-] { background:var(--kleur-4) } .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-kleur-licht) [class*=uk-tile-] { background:var(--kleur-licht);color:var(--kleur-tekst) } .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-kleur-wit) [class*=uk-tile-] { background:#fff;color:var(--kleur-tekst) } .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-kleur-licht,.bk-kleur-wit) [class*=uk-tile-] :is(h2,h3,.el-title,.el-content) { color:var(--kleur-tekst) } /* Blokken (herhaald per blok in het Home-artikel) [headline] */ /* ook: Blokken (herhaald per blok in het Home-artikel) [headline] | Intro [headline] | (zonder naam) [headline] */ .ab-hm-blokken-headline:not(#_) span, .ab-hm-blokken-headline-2:not(#_) span, .ab-team-intro-headline:not(#_) span, .ab-team-headline:not(#_) span { font-size: 42px; line-height: 1.2; font-weight: bold; } /* Blokken (herhaald per blok in het Home-artikel) [headline] */ .ab-hm-blokken-headline-3:not(#_) { font-weight:700;margin:30px auto 0;max-width:1296px } .ab-hm-blokken-headline-3:not(#_) span { font-size:40px;line-height:48px;font-weight:600;display:block;margin-top:5px } .ab-hm-blokken-headline-3:not(#_) span:empty { margin:0;height:0;line-height:0 } @media (max-width:959px) { .ab-hm-blokken-headline-3:not(#_) { margin-top:0!important } .ab-hm-blokken-headline-3:not(#_) span { font-size:30px!important;line-height:1.2 } .ab-hm-blokken-headline-3:not(#_) span:empty { display:inline;margin:0 } .ab-hm-blokken-headline-3:not(#_) span:empty::after { content:' ' } } /* Blokken (herhaald per blok in het Home-artikel) > Kindcentra slider [panel-slider] */ .ab-hm-kindcentra-slider:not(#_) { position:relative;max-width:1296px;margin:-20px auto 0;padding:0 15px;box-sizing:content-box;overflow:visible } .ab-hm-kindcentra-slider:not(#_) .uk-slider-items>* { transition:opacity .4s ease } .ab-hm-kindcentra-slider:not(#_) .uk-slider-items>*:not(.uk-active) { opacity:0;pointer-events:none } .ab-hm-kindcentra-slider:not(#_) .el-item { position:relative;padding:0;background:none;box-shadow:none } .ab-hm-kindcentra-slider:not(#_) .el-item>.uk-grid { margin-left:0;flex-wrap:nowrap;min-height:643px } .ab-hm-kindcentra-slider:not(#_) .el-item>.uk-grid>* { padding-left:0 } .ab-hm-kindcentra-slider:not(#_) .el-item>.uk-grid>*:first-child { width:50vw;flex:none;margin-left:auto;margin-right:calc((min(1296px,100vw - 60px) - 100vw)/2);order:2 } .ab-hm-kindcentra-slider:not(#_) .el-image { display:block;width:100%;height:643px;object-fit:cover;border-radius:2.6vw } .ab-hm-kindcentra-slider:not(#_) .el-item>.uk-grid>*:last-child { position:absolute;left:0;top:32px;bottom:32px;width:55%;box-sizing:border-box;padding:60px 40px 20px;border-radius:2.6vw;background:var(--kleur-2);color:#fff;text-align:center;z-index:1 } .ab-hm-kindcentra-slider:not(#_) .uk-slider-items>*:nth-child(even) .el-item>.uk-grid>*:last-child { background:var(--kleur-1) } .ab-hm-kindcentra-slider:not(#_) .el-meta { position:relative;width:295px;height:153px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 295 153.21'%3E%3Cpath d='M151.683.014C118.77.4 90.712 5.457 69.193 14.121c-33.34 8.544-60.188 24.77-68.011 50.435-11.3 37.072 60.223 82.42 136.39 87.8 69.085 4.882 119.694-11.56 135.706-41.471 11.268-9.5 18.966-21.017 21.323-34.673C301.129 38.4 226.265-.864 151.683.014' fill='%23fff'/%3E%3C/svg%3E") center/295px 153px no-repeat } .ab-hm-kindcentra-slider:not(#_) .el-meta::before, .ab-hm-kindcentra-slider:not(#_) .el-meta::after { content:'';position:absolute;width:80px;height:50px;background:center/contain no-repeat;pointer-events:none } .ab-hm-kindcentra-slider:not(#_) .el-meta::before { left:247px;top:-33px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55.471 44.903'%3E%3Cpath d='M.057,24q-.58-4.442,4.76-6.451,8.932-7.968,18.4-15.283C27.787-.713,29.1.153,34,.022' transform='translate(21 20)' fill='none' stroke='%23fefefe' stroke-miterlimit='10' stroke-width='2.5'/%3E%3Cpath d='M0,40l.707-.075A143.183,143.183,0,0,1,11.452,20.506C16.251,13,21.82,7.033,27,0' fill='none' stroke='%23fefefe' stroke-miterlimit='10' stroke-width='2.5'/%3E%3C/svg%3E") } .ab-hm-kindcentra-slider:not(#_) .el-meta::after { left:-50px;top:94px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39.7 53.2'%3E%3Cpath d='M30.2,18.5c-1.5,1.6-3.5,1.8-5.9,0.5c-5.8-0.7-11.5-1.5-17.1-2.6c-3.8-1-3.9-2.2-6.2-4.7' fill='none' stroke='%23fefefe' stroke-miterlimit='10' stroke-width='2.5'/%3E%3Cpath d='M38.3,33.6l-0.4-0.3c-5.1,1.5-10.4,2.6-15.6,3.3c-6.3,0.9-12.2,0.7-18.4,1.2' fill='none' stroke='%23fefefe' stroke-miterlimit='10' stroke-width='2.5'/%3E%3C/svg%3E") } .ab-hm-kindcentra-slider:not(#_) .el-meta img { width:219px;max-width:219px;height:auto;max-height:none } .ab-hm-kindcentra-slider:not(#_) .el-title { font-size:23px;line-height:27.6px;font-weight:700;color:#fff;margin:25px 0 15px!important } .ab-hm-kindcentra-slider:not(#_) .el-content { font-size:18px;line-height:28.8px;text-align:left;margin:0!important } .ab-hm-kindcentra-slider:not(#_) .el-content * { color:#fff } .ab-hm-kindcentra-slider:not(#_) .el-link { margin-top:30px } .ab-hm-kindcentra-slider:not(#_) .uk-position-center-left, .ab-hm-kindcentra-slider:not(#_) .uk-position-center-right { position:static!important;transform:none;display:block!important;margin:0 } .ab-hm-kindcentra-slider:not(#_) .el-slidenav { position:absolute;right:3px;left:auto;transform:none;width:61px;height:50px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;color:var(--kleur-tekst);background:var(--abbo-blob-wit) center/contain no-repeat;z-index:2 } .ab-hm-kindcentra-slider:not(#_) .el-slidenav svg { display:none } .ab-hm-kindcentra-slider:not(#_) .el-slidenav::after { content:'';width:9px;height:20px;background:var(--svg-pijl) center/contain no-repeat;transform:rotate(-90deg) } .ab-hm-kindcentra-slider:not(#_) .el-slidenav.uk-slidenav-previous::after { transform:rotate(90deg) } .ab-hm-kindcentra-slider:not(#_) .el-slidenav.uk-slidenav-next { top:264px } .ab-hm-kindcentra-slider:not(#_) .el-slidenav.uk-slidenav-previous { top:324px } .ab-hm-kindcentra-slider:not(#_) .el-slidenav:hover::after { opacity:.7 } @media (max-width:959px) { .ab-hm-kindcentra-slider:not(#_) { margin-top:20px!important;padding:0;touch-action:pan-y } .ab-hm-kindcentra-slider:not(#_) .uk-slider-items { margin-left:0 } .ab-hm-kindcentra-slider:not(#_) .uk-slider-items>* { padding-left:0 } .ab-hm-kindcentra-slider:not(#_) .el-item>.uk-grid { flex-wrap:wrap;min-height:0 } .ab-hm-kindcentra-slider:not(#_) .el-item>.uk-grid>* { width:100%!important;margin-right:0!important } .ab-hm-kindcentra-slider:not(#_) .el-item>.uk-grid>*:first-child { order:0;margin-left:0 } .ab-hm-kindcentra-slider:not(#_) .el-image { height:auto;aspect-ratio:4/3;border-radius:30px } .ab-hm-kindcentra-slider:not(#_) .el-item>.uk-grid>*:last-child { position:relative;top:auto;bottom:auto;width:calc(100% - 32px);margin:-40px 16px 0!important;padding:30px 20px;border-radius:30px } .ab-hm-kindcentra-slider:not(#_) .el-meta::before, .ab-hm-kindcentra-slider:not(#_) .el-meta::after { display:none } .ab-hm-kindcentra-slider:not(#_) .el-meta { width:250px;height:130px;background-size:250px 130px } .ab-hm-kindcentra-slider:not(#_) .el-meta img { width:180px } .ab-hm-kindcentra-slider:not(#_) .el-slidenav { display:none } } /* Blokken (herhaald per blok in het Home-artikel) [row] */ @media (min-width:960px) { .ab-hm-blokken-row:not(#_) { margin-top:100px!important } .ab-hm-blokken-row:not(#_)>.uk-grid { position:relative;width:100%;margin-left:0 } .ab-hm-blokken-row:not(#_)>.uk-grid>* { padding-left:0;margin-left:0 } .ab-hm-blokken-row:not(#_)>.uk-grid>*:has(.el-image) { width:60%;flex:none } .ab-hm-blokken-row:not(#_)>.uk-grid>*:not(:first-child):has(.el-image) { margin-left:auto!important } .ab-hm-blokken-row:not(#_)>.uk-grid>*:not(:has(.el-image)) { position:absolute;right:0;top:50%;transform:translateY(-50%);width:50%;padding:40px!important;box-sizing:border-box;z-index:1 } .ab-hm-blokken-row:not(#_)>.uk-grid>*:first-child:not(:has(.el-image)) { right:auto;left:0 } .ab-hm-blokken-row:not(#_) .el-image { width:100%;height:623px;object-fit:cover;border-radius:2.6vw;display:block } .ab-hm-blokken-row:not(#_)>.uk-grid>*>.uk-panel>* { margin:0 } .ab-hm-blokken-row:not(#_) [class*=uk-tile-] { min-height:535px;padding:120px 55px;box-sizing:border-box;border-radius:2.6vw;text-align:center } .ab-hm-blokken-row:not(#_) .el-title { font-size:30px;line-height:1.2;font-weight:500;margin:0 0 40px!important } .ab-hm-blokken-row:not(#_) .el-content { margin:0!important } .ab-hm-blokken-row:not(#_) .el-content p:last-child { margin-bottom:0 } .ab-hm-blokken-row:not(#_) .el-link { margin-top:60px } .ab-hm-blokken-row:not(#_)>.uk-grid>*:has(.hm-knoppen)>.uk-panel { position:relative } .ab-hm-blokken-row:not(#_)>.uk-grid>*:has(.hm-knoppen) [class*=uk-tile-] { padding-bottom:250px!important } .ab-hm-blokken-row:not(#_) .hm-knoppen { position:absolute;left:0;right:0;bottom:120px;margin:0;display:flex;justify-content:center;gap:50px;z-index:2 } .ab-hm-blokken-row:not(#_) .hm-knoppen>* { margin:0;padding:0 } } .ab-hm-blokken-row:not(#_) .hm-knop-outline.uk-button::before, .ab-hm-blokken-row:not(#_) .hm-knop-outline .uk-button::before { background:transparent;border:2px solid #fff;box-sizing:border-box } @media (max-width:959px) { .ab-hm-blokken-row:not(#_) .hm-knoppen { margin-top:40px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap } } /* Blokken (herhaald per blok in het Home-artikel) [column] */ @media (min-width:768px) { .ab-hm-blokken-column:not(#_) { margin-left: -245px } } /* Blokken (herhaald per blok in het Home-artikel) [headline] */ .ab-hm-blokken-headline-4:not(#_) { font-weight:700;margin-left:auto;margin-right:auto } .ab-hm-blokken-headline-4:not(#_) span { display:block;font-size:40px;line-height:48px;font-weight:600;margin-top:5px } @media (max-width:959px) { .ab-hm-blokken-headline-4:not(#_) span { font-size:30px!important;line-height:1.2 } } /* Blokken (herhaald per blok in het Home-artikel) [text] */ .ab-hm-blokken-text:not(#_) { max-width:560px;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:60px } /* Blokken (herhaald per blok in het Home-artikel) [panel-slider] */ .ab-hm-blokken-panel-slider:not(#_) { position:relative;margin:0 auto;max-width:1296px } .ab-hm-blokken-panel-slider:not(#_) .el-item.uk-card.uk-card-default { width:calc(100% - 130px);box-sizing:border-box;padding:40px;border-radius:2.6vw;box-shadow:none;background:#fff;text-align:left } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid { margin-left:0;flex-wrap:nowrap;align-items:flex-start } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>* { padding-left:0 } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>*:first-child { width:326px;flex:none } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>*:last-child { position:relative;padding:40px 40px 0 94px } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>*:last-child::before, .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>*:last-child::after { content:'';position:absolute;width:142px;height:62px;background:center/contain no-repeat;pointer-events:none } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>*:last-child::before { left:48px;top:122px;background-image:var(--svg-boog-om-k1) } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>*:last-child::after { left:618px;top:0;background-image:var(--svg-boog-k2) } .ab-hm-blokken-panel-slider:not(#_) .el-image { display:block;width:326px;height:298px;object-fit:cover;border-radius:2.6vw } .ab-hm-blokken-panel-slider:not(#_) .el-title { position:relative;z-index:1;font-family:var(--font-accent);font-size:28px;line-height:.9;font-weight:600;color:var(--kleur-tekst);margin:0 } .ab-hm-blokken-panel-slider:not(#_) .el-meta { position:relative;z-index:1;font-size:20px;line-height:24px;font-weight:500;color:var(--kleur-tekst);padding-top:20px;margin:0!important;text-transform:none;letter-spacing:normal } .ab-hm-blokken-panel-slider:not(#_) .uk-position-center-left, .ab-hm-blokken-panel-slider:not(#_) .uk-position-center-right { position:static!important;transform:none;display:block!important;margin:0 } .ab-hm-blokken-panel-slider:not(#_) .el-slidenav { position:absolute;right:0;left:auto;transform:none;width:61px;height:50px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;color:var(--kleur-tekst);background:var(--abbo-blob-wit) center/contain no-repeat;z-index:2 } .ab-hm-blokken-panel-slider:not(#_) .el-slidenav svg { display:none } .ab-hm-blokken-panel-slider:not(#_) .el-slidenav::after { content:'';width:9px;height:20px;background:var(--svg-pijl) center/contain no-repeat;transform:rotate(-90deg) } .ab-hm-blokken-panel-slider:not(#_) .el-slidenav.uk-slidenav-previous::after { transform:rotate(90deg) } .ab-hm-blokken-panel-slider:not(#_) .el-slidenav.uk-slidenav-next { top:143px } .ab-hm-blokken-panel-slider:not(#_) .el-slidenav.uk-slidenav-previous { top:213px } .ab-hm-blokken-panel-slider:not(#_) .el-slidenav:hover::after { opacity:.7 } @media (max-width:1199px) { .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>*:last-child::after { left:auto;right:0 } } @media (max-width:959px) { .ab-hm-blokken-panel-slider:not(#_) .el-item.uk-card.uk-card-default { width:100%;border-radius:30px;padding:20px } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid { flex-wrap:wrap } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>* { width:100%!important;padding:20px 0 0!important } .ab-hm-blokken-panel-slider:not(#_) .el-image { width:100%;height:auto } .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>*:last-child::before, .ab-hm-blokken-panel-slider:not(#_) .el-item>.uk-grid>*:last-child::after { display:none } .ab-hm-blokken-panel-slider:not(#_) .el-slidenav { display:none!important } } /* ---------- Template: Pagina (1wPtQcoy) ---------- */ /* Header [section] */ .ab-pg-header:not(#_) { border-radius:0 } .ab-pg-header:not(#_):has(.hk-kleur-1) { background:var(--kleur-1) } .ab-pg-header:not(#_):has(.hk-kleur-2) { background:var(--kleur-2) } .ab-pg-header:not(#_):has(.hk-kleur-3) { background:var(--kleur-3) } .ab-pg-header:not(#_):has(.hk-kleur-4) { background:var(--kleur-4) } .ab-pg-header:not(#_):has(.hk-licht) { background:var(--kleur-licht) } .ab-pg-header:not(#_):has(.hk-wit) { background:#fff } @media (min-width:960px) { .ab-pg-header:not(#_) { padding:0;min-height:0 } .ab-pg-header:not(#_)>.uk-container { position:relative;min-height:max(707px,calc(75vh - 93px));padding-top:93px;display:flex;flex-direction:column;justify-content:center } .ab-pg-header:not(#_)>.uk-container>.uk-grid { margin-left:0;flex-wrap:nowrap } .ab-pg-header:not(#_)>.uk-container>.uk-grid>* { padding-left:0 } .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:first-child { width:auto;max-width:calc(100% - 580px);flex:none;margin:30px 0 } .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:first-child>.uk-panel { position:static } .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:last-child { position:absolute;top:50%;right:50px;width:555px;margin:0;transform:translateY(-50%) } .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:last-child>.uk-panel { display:block } } @media (max-width:959px) { .ab-pg-header:not(#_) { padding-top:120px } } /* Header > Icoon banner-lines [html] */ .ab-pg-icoon-banner-lines:not(#_) { margin:0 } .ab-pg-icoon-banner-lines:not(#_) svg { display:block;width:67px;height:52px } /* Header > Slogan [headline] */ .ab-pg-slogan:not(#_) { color:#fff;font-weight:600;line-height:1.2;margin:0 } .ab-pg-slogan:not(#_) span { font-family:var(--font-accent);font-size:76px;line-height:1.2;font-weight:700;text-shadow:none;color:var(--kleur-primair);display:block;padding-top:15px;white-space:nowrap } .ab-pg-slogan:not(#_) span:empty { padding:0;height:0 } @media (max-width:959px) { .ab-pg-slogan:not(#_) span { font-size:44px!important;white-space:normal } } /* Header > Scroll-pijl [html] */ .ab-pg-scroll-pijl:not(#_) { position:absolute;left:calc(50% + 11px);bottom:112px;margin:0;width:38px;height:38px;z-index:4 } .ab-pg-scroll-pijl:not(#_) a { display:block;width:38px;height:38px } .ab-pg-scroll-pijl:not(#_) svg { display:block;width:38px;height:38px;animation:bounce_scroll 3.5s infinite 2s } /* Header [column] */ .ab-pg-header-column:not(#_) > * { position:relative } /* Header > Headerfoto [image] */ /* ook: Header zonder foto > Headerfoto [image] */ .ab-pg-headerfoto:not(#_), .ab-pg-headerfoto-2:not(#_) { margin:0!important } .ab-pg-headerfoto:not(#_) .el-image, .ab-pg-headerfoto-2:not(#_) .el-image { display:block;width:555px;height:596px;max-width:100%;object-fit:contain } @media (max-width:959px) { .ab-pg-headerfoto:not(#_) .el-image, .ab-pg-headerfoto-2:not(#_) .el-image { height:auto } } /* Header > Sierelement: zon [html] */ /* ook: Header > Sierelement: muzieknoten [html] */ .ab-pg-sierelement-zon:not(#_), .ab-pg-sierelement-muzieknoten:not(#_) { margin:0;height:0 } /* Header zonder foto [section] */ .ab-pg-header-zonder-foto:not(#_) { border-radius:0;position:relative;background:var(--kleur-1) } .ab-pg-header-zonder-foto:not(#_):has(.hk-kleur-1) { background:var(--kleur-1) } .ab-pg-header-zonder-foto:not(#_):has(.hk-kleur-2) { background:var(--kleur-2) } .ab-pg-header-zonder-foto:not(#_):has(.hk-kleur-3) { background:var(--kleur-3) } .ab-pg-header-zonder-foto:not(#_):has(.hk-kleur-4) { background:var(--kleur-4) } .ab-pg-header-zonder-foto:not(#_):has(.hk-licht) { background:var(--kleur-licht) } .ab-pg-header-zonder-foto:not(#_):has(.hk-wit) { background:#fff } .ab-pg-header-zonder-foto:not(#_)>.uk-container>.uk-grid { margin-left:0 } .ab-pg-header-zonder-foto:not(#_)>.uk-container>.uk-grid>* { padding-left:0;width:100% } .ab-pg-header-zonder-foto:not(#_) .uk-panel { position:static } @media (min-width:960px) { .ab-pg-header-zonder-foto:not(#_) { padding:226px 0 150px;min-height:0 } .ab-pg-header-zonder-foto:not(#_):has(.hk-intro) { padding-bottom:67px!important } } @media (max-width:959px) { .ab-pg-header-zonder-foto:not(#_) { padding:133px 0 150px } .ab-pg-header-zonder-foto:not(#_):has(.hk-intro) { padding-bottom:110px!important } } /* Header zonder foto > Icoon banner-lines [html] */ .ab-pg-icoon-banner-lines-2:not(#_) { margin:0 0 -10px } .ab-pg-icoon-banner-lines-2:not(#_) svg { display:block;width:67px;height:52px } /* Header zonder foto > Paginatitel [headline] */ .ab-pg-paginatitel:not(#_) { color:#fff;font-weight:700;margin:0;max-width:583px;overflow-wrap:break-word } @media (max-width:959px) { .ab-pg-paginatitel:not(#_) { hyphens:auto } } /* Header zonder foto > Paginakop in band [headline] */ .ab-pg-paginakop-in-band:not(#_) { color:#fff;font-weight:700;margin:0;max-width:583px;overflow-wrap:break-word } .ab-pg-paginakop-in-band:not(#_) span { display:block;font-family:var(--font-accent);font-size:60px;line-height:72px;font-weight:700;color:var(--kleur-tekst);margin-top:5px;text-shadow:none } @media (max-width:959px) { .ab-pg-paginakop-in-band:not(#_) { hyphens:auto } .ab-pg-paginakop-in-band:not(#_) span { font-size:44px!important;line-height:1.2 } } /* Header zonder foto > Introtekst in band [text] */ .ab-pg-introtekst-in-band:not(#_) { font-size:20px;line-height:32px;color:#fff;max-width:583px;margin:30px 0 0 } .ab-pg-introtekst-in-band:not(#_) * { color:#fff } .ab-pg-introtekst-in-band:not(#_) p:last-child { margin-bottom:0 } /* Header zonder foto > Scroll-pijl [html] */ .ab-pg-scroll-pijl-2:not(#_) { position:absolute;left:calc(50% - 19px);bottom:50px;margin:0;width:38px;height:38px;z-index:4 } .ab-pg-scroll-pijl-2:not(#_) a { display:block;width:38px;height:38px } .ab-pg-scroll-pijl-2:not(#_) svg { display:block;width:38px;height:38px;animation:bounce_scroll 3.5s infinite 2s } /* Paginakop en intro [section] */ @media (min-width:960px) { .ab-pg-paginakop-en-intro:not(#_):not(:has(.geen-header)) { padding-top:63px;padding-bottom:67px } .ab-pg-paginakop-en-intro:not(#_):not(:has(.geen-header))>.uk-container { max-width:1020px } .ab-pg-paginakop-en-intro:not(#_):not(:has(.geen-header)) .uk-grid { margin-left:0 } .ab-pg-paginakop-en-intro:not(#_):not(:has(.geen-header)) .uk-grid>* { padding-left:0 } .ab-pg-paginakop-en-intro:not(#_):not(:has(.geen-header)) .uk-grid>*:first-child .uk-text-large { padding-right:40px } } @media (max-width:959px) { .ab-pg-paginakop-en-intro:not(#_) { padding-top:110px } } .ab-pg-paginakop-en-intro:not(#_):has(.geen-header) { position:relative;z-index:1;background:#fff;margin-top:-2.6vw;border-radius:2.6vw 2.6vw 0 0;padding:100px 0 calc(30px + 2.6vw) } .ab-pg-paginakop-en-intro:not(#_):has(.geen-header)>.uk-container { max-width:1020px } .ab-pg-paginakop-en-intro:not(#_):has(.geen-header) .uk-grid { margin-left:0;flex-direction:column-reverse } .ab-pg-paginakop-en-intro:not(#_):has(.geen-header) .uk-grid > * { width:100%;flex:none;padding-left:0 } .ab-pg-paginakop-en-intro:not(#_):has(.geen-header) [class*=uk-text-right], .ab-pg-paginakop-en-intro:not(#_):has(.geen-header) .uk-panel { text-align:left!important } .ab-pg-paginakop-en-intro:not(#_):has(.geen-header) .uk-text-large { font-size:18px;line-height:1.6;max-width:900px } .ab-pg-paginakop-en-intro:not(#_):has(.geen-header) .btgrid { margin-bottom:29px } /* Paginakop en intro > Intro tekst [text] */ .ab-pg-intro-tekst:not(#_) { font-size:20px;line-height:1.6;margin:0 } .ab-pg-intro-tekst:not(#_) p:last-child { margin-bottom:0 } /* Paginakop en intro > Paginakop [headline] */ .ab-pg-paginakop:not(#_) { font-weight:700;margin:0 } .ab-pg-paginakop:not(#_) span { font-size:40px;line-height:1.2;font-weight:600;display:block;margin-top:5px } @media (max-width:959px) { .ab-pg-paginakop:not(#_) span { font-size:30px!important } } /* Paginakop en intro > Paginakop (titel als fallback) [headline] */ .ab-pg-paginakop-2:not(#_) { font-weight:700;margin:0 } .ab-pg-paginakop-2:not(#_) span { font-size:40px!important;line-height:1.2;font-weight:600;display:block;margin-top:5px } /* Blokken [section] */ .ab-pg-blokken:not(#_) { border-radius:2.6vw;background:var(--kleur-licht);padding:0 0 100px } .ab-pg-blokken:not(#_) > .uk-container { display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:30px } .ab-pg-blokken:not(#_) > .uk-container > * { flex:0 0 auto;margin-left:0 } @media (max-width:959px) { .ab-pg-blokken:not(#_) { border-radius:30px;padding-bottom:60px!important } } /* Blokken > Blok (herhaald per subform-rij) [row] */ .ab-pg-blok:not(#_) { width:100%;margin-top:100px;margin-left:0 } .ab-pg-blok:not(#_)>* { padding-left:0 } .ab-pg-blok:not(#_)>*>* { margin-top:0!important;margin-bottom:0 } .ab-pg-blok:not(#_) .uk-panel>.uk-grid { margin-top:0 } @media (min-width:960px) { .ab-pg-blok:not(#_):has(.bk-breedte-half) { width:calc(50% - 15px);padding:0;margin-bottom:-50px } } @media (min-width:960px) { .ab-pg-blok:not(#_):has(.bk-pos-rechts) .bk-row { flex-direction:row-reverse } .ab-pg-blok:not(#_):not(:has(.bk-breedte-half)) .bk-row>.bk-media { width:60%;flex:none } .ab-pg-blok:not(#_):not(:has(.bk-breedte-half)) .bk-row { position:relative } .ab-pg-blok:not(#_):not(:has(.bk-breedte-half)) .bk-row>.bk-tekst { position:absolute;right:0;top:50%;transform:translateY(-50%);width:50%;margin:0;padding:40px;box-sizing:border-box;z-index:1 } .ab-pg-blok:not(#_):not(:has(.bk-breedte-half)):has(.bk-pos-rechts) .bk-row>.bk-tekst { right:auto;left:0 } .ab-pg-blok:not(#_):not(:has(.bk-breedte-half)) .bk-card { min-height:535px;padding:120px 55px;box-sizing:border-box } .ab-pg-blok:not(#_):has(.bk-breedte-half) .bk-row { flex-direction:column } .ab-pg-blok:not(#_):has(.bk-breedte-half) .bk-row > * { width:100% } .ab-pg-blok:not(#_):has(.bk-breedte-half) .bk-tekst { margin:0 4%;width:92%!important;position:relative;top:-150px;z-index:1 } .ab-pg-blok:not(#_):has(.bk-breedte-half) .bk-card { padding:50px } .ab-pg-blok:not(#_):has(.bk-breedte-half) .bk-card .el-title { margin-bottom:30px!important } } @media (min-width:960px) { .ab-pg-blok:not(#_):has(.bk-breedte-half) { align-self:stretch } .ab-pg-blok:not(#_):has(.bk-breedte-half)>* { display:flex;flex-direction:column } .ab-pg-blok:not(#_):has(.bk-breedte-half)>*>.uk-panel:last-child { flex:1 } .ab-pg-blok:not(#_):has(.bk-breedte-half):not(:has(.bk-media img)) { margin-bottom:0 } .ab-pg-blok:not(#_):has(.bk-breedte-half) .uk-panel>.bk-row:not(:has(.bk-media img)) { height:100% } .ab-pg-blok:not(#_):has(.bk-breedte-half) .bk-row:not(:has(.bk-media img)) :is(.bk-tekst,.bk-tekst>.uk-panel,.bk-card) { height:100%;box-sizing:border-box } } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card { transform:none!important;padding:50px;text-align:left!important;box-shadow:none;display:flex;flex-direction:column } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card .el-title { font-size:35px;line-height:42px;font-weight:700;padding:11px 0 12px 98px;margin:0 0 30px } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card .el-content { font-size:20px;line-height:32px;margin:0 } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card .el-link { margin:0!important;padding-left:58px } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card .el-content+div { display:flex;justify-content:space-between;align-items:center;margin:30px 0 0!important;padding-top:50px;border-top:1px solid #e3e3e3 } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card .el-content+div:has(a[href$='.pdf' i])::before { content:'PDF Document';font-size:14px;line-height:22.4px;white-space:nowrap } .ab-pg-blok:not(#_) .bk-row:not(:has(.bk-media img, .bk-media iframe, .bk-media video)) .bk-media { display:none } .ab-pg-blok:not(#_) .bk-row:not(:has(.bk-media img, .bk-media iframe, .bk-media video)) .bk-tekst { width:100%!important;margin:0!important;position:static;transform:none;padding:0 } .ab-pg-blok:not(#_) .bk-card { border-radius:2.6vw;color:#fff;text-align:center } .ab-pg-blok:not(#_) .bk-card .el-title { font-size:30px;line-height:1.2;font-weight:500;margin:0 0 40px!important } .ab-pg-blok:not(#_) .bk-card .el-meta { font-family:var(--font-accent);font-size:40px;line-height:1.2;font-weight:600;color:var(--kleur-accent);text-transform:none;letter-spacing:normal;margin:0 0 15px } .ab-pg-blok:not(#_) .bk-card .el-content { margin:0!important } .ab-pg-blok:not(#_) .bk-card .el-content p:last-child { margin-bottom:0 } .ab-pg-blok:not(#_) .bk-card .el-link, .ab-pg-blok:not(#_) .bk-card .uk-margin-medium-top { margin-top:60px } .ab-pg-blok:not(#_) .bk-card :is(h2,h3,.uk-h3,a:not(.uk-button)) { color:#fff } .ab-pg-blok:not(#_) .bk-card :is(h2,h3,.uk-h3) { hyphens:auto;hyphenate-limit-chars:12 5 5;overflow-wrap:break-word;word-break:normal } .ab-pg-blok:not(#_):has(.bk-kleur-kleur-1) .bk-card, .ab-pg-blok:not(#_):has(.bk-kleur-auto):nth-child(even) .bk-card { background:var(--kleur-1) } .ab-pg-blok:not(#_):has(.bk-kleur-kleur-2) .bk-card, .ab-pg-blok:not(#_):has(.bk-kleur-auto):nth-child(odd) .bk-card { background:var(--kleur-2) } .ab-pg-blok:not(#_):has(.bk-kleur-kleur-3) .bk-card { background:var(--kleur-3) } .ab-pg-blok:not(#_):has(.bk-kleur-kleur-4) .bk-card { background:var(--kleur-4) } .ab-pg-blok:not(#_):has(.bk-kleur-licht) .bk-card { background:var(--kleur-licht) } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-card { background:#fff;box-shadow:0 10px 30px rgba(65,34,90,.08) } .ab-pg-blok:not(#_):has(.bk-kleur-licht,.bk-kleur-wit) .bk-card, .ab-pg-blok:not(#_):has(.bk-kleur-licht,.bk-kleur-wit) .bk-card :not(.uk-button) { color:var(--kleur-tekst) } .ab-pg-blok:not(#_) .bk-card :is(.el-title,.el-meta) span { font-family:var(--font-accent);display:block } .ab-pg-blok:not(#_) .bk-tijdlijn .uk-card, .ab-pg-blok:not(#_) .bk-nieuws .uk-card, .ab-pg-blok:not(#_) .bk-vacatures .uk-card, .ab-pg-blok:not(#_) .bk-kindcentra .uk-card { border-radius:30px } .ab-pg-blok:not(#_) .bk-ervaringen .el-title { font-family:var(--font-accent);font-weight:bold } .ab-pg-blok:not(#_) .bk-downloads a { color:var(--kleur-tekst) } .ab-pg-blok:not(#_):has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img,.bk-media iframe,.bk-media video)) .bk-card .el-title { margin-bottom:0!important } .ab-pg-blok:not(#_):has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img,.bk-media iframe,.bk-media video)) .bk-card .el-link { margin-top:0!important } .ab-pg-blok:not(#_) .bk-locaties .el-image { color:#fff!important } .ab-pg-blok:not(#_) .bk-locaties .el-image svg path, .ab-pg-blok:not(#_) .bk-locaties .el-image svg circle { stroke:#fff } @media (max-width:959px) { .ab-pg-blok:not(#_) { margin-top:50px } .ab-pg-blok:not(#_) .bk-card { border-radius:30px;padding:28px 24px;text-align:left } .ab-pg-blok:not(#_) .bk-tekst { margin:-40px 16px 0 } .ab-pg-blok:not(#_) .bk-card :is(h2,h3,.uk-h3) { font-size:1.35rem;line-height:1.25 } .ab-pg-blok:not(#_) .bk-card .el-title, .ab-pg-blok:not(#_):has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img,.bk-media iframe,.bk-media video)) .bk-card .el-title { margin-bottom:16px!important } .ab-pg-blok:not(#_) .bk-card .el-meta { font-size:28px } .ab-pg-blok:not(#_) .bk-card .el-link, .ab-pg-blok:not(#_) .bk-card .uk-margin-medium-top, .ab-pg-blok:not(#_):has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img,.bk-media iframe,.bk-media video)) .bk-card .el-link { margin-top:28px!important } .ab-pg-blok:not(#_) .bk-card .btgrid .row { display:flex;align-items:baseline;gap:16px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.35) } .ab-pg-blok:not(#_) .bk-card .btgrid .col:first-child { flex:1;min-width:0 } .ab-pg-blok:not(#_) .bk-card .btgrid .col:last-child { flex:none;white-space:nowrap;text-align:right } .ab-pg-blok:not(#_) .bk-card .btgrid p { margin:0 } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card { padding:28px 24px!important } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card .el-title { font-size:26px;line-height:32px;padding:10px 0 10px 76px;margin:0 0 20px!important;hyphens:manual } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card .el-content { font-size:17px;line-height:1.6 } .ab-pg-blok:not(#_):has(.bk-kleur-wit) .bk-row:not(:has(.bk-media img)) .bk-card .el-content+div { flex-wrap:wrap;gap:16px;margin-top:24px!important;padding-top:24px } .ab-pg-blok:not(#_) .bk-ervaringen .uk-card { padding:20px } } /* Blokken > Blok (herhaald per subform-rij) > Tekstblok > Blokfoto [image] */ .ab-pg-blokfoto:not(#_) { margin:0 } .ab-pg-blokfoto:not(#_) .el-image { border-radius:2.6vw;width:100%;height:auto;display:block } @media (max-width:959px) { .ab-pg-blokfoto:not(#_) .el-image { border-radius:30px } } /* Blokken > Blok (herhaald per subform-rij) > Kenmerken > Blokkop [headline] */ .ab-pg-blokkop:not(#_) { font-weight:700;margin:0 0 85px } .ab-pg-blokkop:not(#_) span { font-size:40px;line-height:48px;font-weight:600;display:inline-block;vertical-align:top;padding-left:10px } @media (max-width:959px) { .ab-pg-blokkop:not(#_) { margin-bottom:60px!important } .ab-pg-blokkop:not(#_) span { font-size:30px!important;line-height:36px } } /* Blokken > Blok (herhaald per subform-rij) > Kenmerken > Kenmerken [grid] */ .ab-pg-kenmerken:not(#_) { margin:0 } .ab-pg-kenmerken:not(#_) .el-item.uk-card { position:relative;overflow:visible;background:#fff;border-radius:2.6vw;padding:70px 43px 43px;box-shadow:none;text-align:left } .ab-pg-kenmerken:not(#_) .el-title { font-family:var(--font-kop);font-size:23px;line-height:1.2;font-weight:700;color:var(--kleur-tekst);margin:0 } .ab-pg-kenmerken:not(#_) .el-content { position:absolute;top:-29px;left:40px;margin:0!important } @media (max-width:959px) { .ab-pg-kenmerken:not(#_) .el-item.uk-card { border-radius:30px } } /* Blokken > Blok (herhaald per subform-rij) > Tijdlijn > Blokkop [headline] */ .ab-pg-blokkop-2:not(#_) { font-weight:700;margin:0 0 50px } .ab-pg-blokkop-2:not(#_) span { font-size:40px;line-height:48px;font-weight:600;display:inline-block;vertical-align:top;padding-left:10px } @media (max-width:959px) { .ab-pg-blokkop-2:not(#_) { margin-bottom:40px!important } .ab-pg-blokkop-2:not(#_) span { font-size:30px!important;line-height:36px } } /* Blokken > Blok (herhaald per subform-rij) > Tijdlijn > Tijdlijn [panel-slider] */ .ab-pg-tijdlijn:not(#_) { position:relative;margin:0 } .ab-pg-tijdlijn:not(#_) .el-item.uk-card.uk-card-default { display:grid;grid-template-columns:50px 587px 1fr;grid-template-rows:1fr auto auto auto;min-height:614px;padding:0;background:none;box-shadow:none;border-radius:0;color:#fff;text-align:center } .ab-pg-tijdlijn:not(#_) .el-item::before { content:"";grid-column:2;grid-row:2/5;background:var(--kleur-1);border-radius:2.6vw;z-index:1 } .ab-pg-tijdlijn:not(#_) .el-item>picture { display:contents } /* YOOtheme zet jpg/png in een (webp/avif); zo blijft de foto zelf het grid-item */ .ab-pg-tijdlijn:not(#_) .el-image { grid-area:1/1/5/4;align-self:start;width:calc(100% - 130px);height:539px;object-fit:cover;border-radius:2.6vw } .ab-pg-tijdlijn:not(#_) .el-item>:not(.el-image) { grid-column:2;position:relative;z-index:2;background:none;margin:0!important } .ab-pg-tijdlijn:not(#_) .el-title { grid-row:2;font-family:var(--font-accent);font-size:40px;line-height:48px;font-weight:700;color:#fff;padding:44px 40px 0 } .ab-pg-tijdlijn:not(#_) .el-meta { grid-row:3;font-family:var(--font-kop);font-size:30px;line-height:36px;font-weight:600;color:#fff;text-transform:none;letter-spacing:normal;padding:4px 40px 0 } .ab-pg-tijdlijn:not(#_) .el-content { grid-row:4;padding:24px 90.7px 40px;font-size:18px;line-height:28.8px;color:#fff } .ab-pg-tijdlijn:not(#_) .el-content>:first-child { margin-top:0 } .ab-pg-tijdlijn:not(#_) .el-content>:last-child { margin-bottom:0 } .ab-pg-tijdlijn:not(#_) .el-content ul { text-align:left } .ab-pg-tijdlijn:not(#_) .el-content li+li { margin-top:4px } .ab-pg-tijdlijn:not(#_) .el-slidenav { position:absolute;right:0;left:auto;transform:none;width:61px;height:50px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;color:var(--kleur-tekst);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23ebf5fc'/%3E%3C/svg%3E") center/contain no-repeat } .ab-pg-tijdlijn:not(#_) .el-slidenav.uk-slidenav-next { top:219px } .ab-pg-tijdlijn:not(#_) .el-slidenav.uk-slidenav-previous { top:279px } .ab-pg-tijdlijn:not(#_) .el-slidenav svg { width:12px;height:auto } @media (max-width:959px) { .ab-pg-tijdlijn:not(#_) .el-item.uk-card.uk-card-default { grid-template-columns:16px 1fr 16px;grid-template-rows:auto auto auto auto 1fr;min-height:0;align-content:start } .ab-pg-tijdlijn:not(#_) .el-image { grid-area:1/1/2/4;width:100%;height:auto;aspect-ratio:4/3 } .ab-pg-tijdlijn:not(#_) .el-item::before { grid-row:2/5;margin-top:-40px;border-radius:30px } .ab-pg-tijdlijn:not(#_) .el-title { margin-top:-40px;padding:30px 24px 0;font-size:34px;line-height:40px } .ab-pg-tijdlijn:not(#_) .el-meta { padding:2px 24px 0;font-size:26px;line-height:32px } .ab-pg-tijdlijn:not(#_) .el-content { padding:18px 24px 30px } .ab-pg-tijdlijn:not(#_) .el-slidenav { display:none } } /* Blokken > Blok (herhaald per subform-rij) > Tijdlijn > Jaartallen-navigatie [html] */ .ab-pg-jaartallen-navigatie:not(#_) { margin:-41px 0 0;position:relative;z-index:2;padding-left:675px } .ab-pg-jaartallen-navigatie:not(#_) .abbo-jaren { display:flex;flex-wrap:wrap;gap:8px 25px } .ab-pg-jaartallen-navigatie:not(#_) button { position:relative;flex:none;background:none;border:0;padding:0 0 4px;font:inherit;font-size:18px;line-height:28.8px;font-weight:500;color:var(--kleur-primair-zacht);cursor:pointer;white-space:nowrap } .ab-pg-jaartallen-navigatie:not(#_) button.uk-active, .ab-pg-jaartallen-navigatie:not(#_) button:hover { color:var(--kleur-tekst) } .ab-pg-jaartallen-navigatie:not(#_) button::after { content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease } .ab-pg-jaartallen-navigatie:not(#_) button.uk-active::after { transform:scaleX(1) } .ab-pg-jaartallen-navigatie:not(#_) button:focus-visible { outline:2px solid var(--kleur-tekst);outline-offset:3px } @media (max-width:959px) { .ab-pg-jaartallen-navigatie:not(#_) { padding-left:0;margin:0 0 24px!important;order:1 } .ab-pg-jaartallen-navigatie:not(#_) .abbo-jaren { gap:6px 18px;justify-content:center } .ab-pg-jaartallen-navigatie:not(#_) button { font-size:16px;line-height:26px } } /* Blokken > Blok (herhaald per subform-rij) > Downloads [fragment] */ .ab-pg-downloads:not(#_) { background:#fff;border-radius:2.6vw;padding:50px;box-sizing:border-box } @media (max-width:959px) { .ab-pg-downloads:not(#_) { border-radius:30px;padding:30px } } /* Blokken > Blok (herhaald per subform-rij) > Downloads > Blokkop [headline] */ .ab-pg-blokkop-3:not(#_) { font-weight:700;margin:0;padding:11px 0 12px 98px;min-height:65px;box-sizing:border-box;position:relative } .ab-pg-blokkop-3:not(#_) span { font-size:40px;line-height:42px;font-weight:600;padding-left:10px;display:inline-block;vertical-align:top } @media (max-width:959px) { .ab-pg-blokkop-3:not(#_) { padding:9px 0 9px 76px;min-height:52px } .ab-pg-blokkop-3:not(#_) span { font-size:30px!important;line-height:34px;padding-left:6px } } /* Blokken > Blok (herhaald per subform-rij) > Downloads > Downloads [list] */ .ab-pg-downloads-2:not(#_) { background:none;padding:0;border-radius:0;margin:30px 0 0;border-top:2px solid var(--kleur-tekst) } .ab-pg-downloads-2:not(#_)>li { margin:0;padding:0;border-bottom:1px solid #e3e3e3 } .ab-pg-downloads-2:not(#_)>li>a, .ab-pg-downloads-2:not(#_)>li>div { display:block;min-height:70px } .ab-pg-downloads-2:not(#_) .uk-grid { margin-left:0;min-height:70px;align-items:center;padding:12px 0;box-sizing:border-box } .ab-pg-downloads-2:not(#_) .uk-grid>* { padding-left:0 } .ab-pg-downloads-2:not(#_) .uk-grid>div:not(.uk-width-auto) { order:1;flex:1;min-width:0;width:auto;padding-right:20px } .ab-pg-downloads-2:not(#_) .uk-grid>.uk-width-auto { order:2;margin-left:auto;width:72px;display:flex;justify-content:center } .ab-pg-downloads-2:not(#_) .el-content { font-size:18px;line-height:1.3;font-weight:500;color:var(--kleur-tekst);overflow-wrap:anywhere } .ab-pg-downloads-2:not(#_) .el-content span { text-decoration:none } .ab-pg-downloads-2:not(#_) a[href$='.pdf' i] .el-content>span::after { content:'.pdf' } .ab-pg-downloads-2:not(#_) a[href$='.docx' i] .el-content>span::after { content:'.docx' } .ab-pg-downloads-2:not(#_) a[href$='.doc' i] .el-content>span::after { content:'.doc' } .ab-pg-downloads-2:not(#_) a[href$='.xlsx' i] .el-content>span::after { content:'.xlsx' } .ab-pg-downloads-2:not(#_) .el-image { color:var(--kleur-tekst) } .ab-pg-downloads-2:not(#_) a:hover .el-content { color:var(--kleur-primair) } @media (max-width:959px) { .ab-pg-downloads-2:not(#_) .uk-grid>.uk-width-auto { width:40px } .ab-pg-downloads-2:not(#_) .el-content { font-size:16px } } /* Blokken > Blok (herhaald per subform-rij) > Ervaringen > Blokkop [headline] */ .ab-pg-blokkop-4:not(#_) { font-weight:700;margin:0 0 50px } .ab-pg-blokkop-4:not(#_) span { font-size:40px;line-height:48px;font-weight:600;display:block;margin-top:5px } @media (max-width:959px) { .ab-pg-blokkop-4:not(#_) { margin-bottom:30px!important } .ab-pg-blokkop-4:not(#_) span { font-size:30px!important;line-height:1.2 } } /* Blokken > Blok (herhaald per subform-rij) > Ervaringen > Ervaringen [panel-slider] */ .ab-pg-ervaringen:not(#_) { position:relative;margin:0;max-width:1296px } .ab-pg-ervaringen:not(#_) .el-item.uk-card.uk-card-default { width:calc(100% - 130px);box-sizing:border-box;padding:40px;border-radius:2.6vw;box-shadow:none;background:#fff;text-align:left } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid { margin-left:0;flex-wrap:nowrap;align-items:flex-start } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>* { padding-left:0 } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>*:first-child { width:326px;flex:none } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>*:last-child { position:relative;padding:40px 40px 0 94px } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>*:last-child::before, .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>*:last-child::after { content:'';position:absolute;width:142px;height:62px;background:center/contain no-repeat;pointer-events:none } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>*:last-child::before { left:48px;top:122px;background-image:var(--svg-boog-om-k1) } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>*:last-child::after { left:618px;top:0;background-image:var(--svg-boog-k2) } .ab-pg-ervaringen:not(#_) .el-image { display:block;width:326px;height:298px;object-fit:cover;border-radius:2.6vw } .ab-pg-ervaringen:not(#_) .el-title { position:relative;z-index:1;font-family:var(--font-accent);font-size:28px;line-height:.9;font-weight:600;color:var(--kleur-tekst);margin:0 } .ab-pg-ervaringen:not(#_) .el-meta { position:relative;z-index:1;font-size:20px;line-height:24px;font-weight:500;color:var(--kleur-tekst);padding-top:20px;margin:0!important;text-transform:none;letter-spacing:normal } .ab-pg-ervaringen:not(#_) .uk-position-center-left, .ab-pg-ervaringen:not(#_) .uk-position-center-right { position:static!important;transform:none;display:block!important;margin:0 } .ab-pg-ervaringen:not(#_) .el-slidenav { position:absolute;right:0;left:auto;transform:none;width:61px;height:50px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;color:var(--kleur-tekst);background:var(--abbo-blob-wit) center/contain no-repeat;z-index:2 } .ab-pg-ervaringen:not(#_) .el-slidenav svg { display:none } .ab-pg-ervaringen:not(#_) .el-slidenav::after { content:'';width:9px;height:20px;background:var(--svg-pijl) center/contain no-repeat;transform:rotate(-90deg) } .ab-pg-ervaringen:not(#_) .el-slidenav.uk-slidenav-previous::after { transform:rotate(90deg) } .ab-pg-ervaringen:not(#_) .el-slidenav.uk-slidenav-next { top:143px } .ab-pg-ervaringen:not(#_) .el-slidenav.uk-slidenav-previous { top:213px } .ab-pg-ervaringen:not(#_) .el-slidenav:hover::after { opacity:.7 } @media (max-width:1199px) { .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>*:last-child::after { left:auto;right:0 } } @media (max-width:959px) { .ab-pg-ervaringen:not(#_) .el-item.uk-card.uk-card-default { width:100%;border-radius:30px;padding:20px } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid { flex-wrap:wrap } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>* { width:100%!important;padding:20px 0 0!important } .ab-pg-ervaringen:not(#_) .el-image { width:100%;height:auto } .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>*:last-child::before, .ab-pg-ervaringen:not(#_) .el-item>.uk-grid>*:last-child::after { display:none } .ab-pg-ervaringen:not(#_) .el-slidenav { display:none!important } } /* Blokken > Blok (herhaald per subform-rij) > Team > Blokkop [headline] */ .ab-pg-blokkop-5:not(#_) { font-weight:700;margin:21px 0 61px 10px;max-width:calc(100% - 240px) } .ab-pg-blokkop-5:not(#_) span { font-size:40px;line-height:48px;font-weight:600;display:inline-block;vertical-align:top;padding-left:10px } @media (max-width:959px) { .ab-pg-blokkop-5:not(#_) { max-width:none;margin:0 0 30px!important} .ab-pg-blokkop-5:not(#_) span { font-size:30px!important;line-height:1.2 } } /* Blokken > Blok (herhaald per subform-rij) > Team > Team [grid] */ .ab-pg-team:not(#_) { position:relative;margin:0 } .ab-pg-team:not(#_) .uk-grid>div>.el-item, .ab-pg-team:not(#_) .uk-grid>div>a>.el-item { height:100% } .ab-pg-team:not(#_) .el-item.uk-card.uk-card-default { border-radius:2.6vw;overflow:hidden;padding:0;box-shadow:none;background:#fff;text-align:left } .ab-pg-team:not(#_) .el-item .uk-card-media-top, .ab-pg-team:not(#_) .el-item .el-image { border-radius:0 } .ab-pg-team:not(#_) .el-image { display:block;width:100%;height:340px;object-fit:cover } .ab-pg-team:not(#_) .el-item>.el-title { padding:40px 40px 0 } .ab-pg-team:not(#_) .el-item>.el-meta { padding:0 40px 40px } .ab-pg-team:not(#_) .el-title { font-family:var(--font-kop);font-size:23px;line-height:1.2;font-weight:700;color:var(--kleur-tekst);margin:0!important } .ab-pg-team:not(#_) .el-meta { font-size:20px;line-height:32px;font-weight:500;color:var(--kleur-tekst);margin:0!important;text-transform:none;letter-spacing:normal } .ab-pg-team:not(#_) .abbo-cta { display:block } .ab-pg-team:not(#_) .el-nav { position:absolute;top:-130px;left:calc(100% - 229.5px);width:300px;margin:0;padding:70px 0 0;z-index:5;list-style:none;display:block } .ab-pg-team:not(#_) .el-nav>li { display:none;margin:0;padding:0 } .ab-pg-team:not(#_) .el-nav>li.uk-active { display:block;position:absolute;top:0;left:9px;width:210.5px } .ab-pg-team:not(#_) .el-nav>li.uk-active>a { position:relative;z-index:0;display:flex;align-items:center;justify-content:center;height:70px;padding:15px 44px;box-sizing:border-box;font-size:18px;line-height:16px;font-weight:500;color:var(--kleur-tekst);text-transform:none;white-space:nowrap } .ab-pg-team:not(#_) .el-nav>li.uk-active>a::after { content:'';position:absolute;inset:0;background:#fff;border-radius:47%;transform:rotate(-3deg);z-index:-1 } .ab-pg-team:not(#_) .el-nav:is(:hover,:focus-within)>li:not(.uk-active) { display:block;background:#fff;padding:0 15px;margin:0!important } .ab-pg-team:not(#_) .el-nav:is(:hover,:focus-within)>li:not(.uk-active):nth-child(2), .ab-pg-team:not(#_) .el-nav:is(:hover,:focus-within)>li.uk-active+li:not(.uk-active):first-child { padding-top:15px;border-radius:40px 40px 0 0 } .ab-pg-team:not(#_) .el-nav:is(:hover,:focus-within)>li:not(.uk-active):last-child { padding-bottom:15px;border-radius:0 0 40px 40px } .ab-pg-team:not(#_) .el-nav>li:not(.uk-active)>a { position:relative;display:block;padding:6px 10px 6px 38px;font-size:18px;line-height:18px;font-weight:500;color:var(--kleur-tekst);text-transform:none } .ab-pg-team:not(#_) .el-nav>li:not(.uk-active)>a::before { content:'';position:absolute;left:11px;top:6px;width:17px;height:17px;border:1px solid #cfc6d6;border-radius:3px;background:#fff;box-sizing:border-box;transition:background .2s,border-color .2s } .ab-pg-team:not(#_) .el-nav>li:not(.uk-active)>a:hover::before { background:var(--kleur-2);border-color:var(--kleur-2) } .ab-pg-team:not(#_) .uk-grid { margin-top:0 } @media (max-width:959px) { .ab-pg-team:not(#_) .el-nav { position:relative;top:0;left:0;margin:0 0 30px!important } .ab-pg-team:not(#_) .el-item.uk-card.uk-card-default { border-radius:30px } } /* Blokken > Blok (herhaald per subform-rij) > Kindcentra > Blokkop [headline] */ .ab-pg-blokkop-6:not(#_) { font-weight:700;margin:50px 0 50px!important } .ab-pg-blokkop-6:not(#_) span { font-size:40px;line-height:48px;font-weight:600;display:block;margin-top:5px } @media (max-width:959px) { .ab-pg-blokkop-6:not(#_) { margin-top:0!important } .ab-pg-blokkop-6:not(#_) span { font-size:30px!important;line-height:1.2 } } /* Blokken > Blok (herhaald per subform-rij) > Kindcentra > Kindcentra (grid met logo) [grid] */ .ab-pg-kindcentra:not(#_) { margin:0!important } .ab-pg-kindcentra:not(#_)>.uk-grid { margin-left:-30px } .ab-pg-kindcentra:not(#_)>.uk-grid>* { padding-left:30px;display:flex } .ab-pg-kindcentra:not(#_)>.uk-grid>*>* { flex:1;display:flex;flex-direction:column } .ab-pg-kindcentra:not(#_)>.uk-grid>.uk-grid-margin { margin-top:30px } .ab-pg-kindcentra:not(#_) .el-item>.uk-card { border-radius:2.6vw;background:#fff;box-shadow:none;padding:0;text-align:center;position:relative;flex:1;display:flex;flex-direction:column;color:inherit;text-decoration:none } .ab-pg-kindcentra:not(#_) .uk-card>picture { display:block;position:relative;margin:0;overflow:hidden;border-radius:2.6vw 2.6vw 0 0 } .ab-pg-kindcentra:not(#_) .el-image { width:100%;height:auto;aspect-ratio:412/235;object-fit:cover;display:block;transition:transform .6s } .ab-pg-kindcentra:not(#_) .uk-card:hover .el-image, .ab-pg-kindcentra:not(#_) .uk-card:focus-visible .el-image { transform:scale(1.1) } .ab-pg-kindcentra:not(#_) .el-content { position:relative;margin:0!important;padding:40px;flex:1;display:flex;align-items:center;justify-content:center } .ab-pg-kindcentra:not(#_) .el-content::before { content:'';position:absolute;left:40px;top:-34px;width:78px;height:65px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 14'%3E%3Cpath d='M0 7h32M26 1l6 6-6 6' fill='none' stroke='%2341225a' stroke-width='1.6'/%3E%3C/svg%3E") center/34px 14px no-repeat,var(--abbo-blob-wit) center/contain no-repeat;transition:transform .3s ease;z-index:2 } .ab-pg-kindcentra:not(#_) .uk-card:hover .el-content::before { transform:translateX(6px) } .ab-pg-kindcentra:not(#_) .el-title { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important } .ab-pg-kindcentra:not(#_) .kc-logo { display:block;margin:0 auto;width:219px;max-width:100%;height:auto } @media (max-width:959px) { .ab-pg-kindcentra:not(#_) .uk-card>picture { border-radius:30px 30px 0 0 } .ab-pg-kindcentra:not(#_) .el-item>.uk-card { border-radius:30px } } /* Blokken > Blok (herhaald per subform-rij) > Kaart met locaties [row] */ .ab-pg-kaart-met-locaties-row:not(#_) { margin-left:0;position:relative;margin-bottom:72px } .ab-pg-kaart-met-locaties-row:not(#_)>* { padding-left:0 } .ab-pg-kaart-met-locaties-row:not(#_)>*:first-child { width:100%;flex:none } .ab-pg-kaart-met-locaties-row:not(#_)>*>* { margin-top:0!important } .ab-pg-kaart-met-locaties-row:not(#_)>*:last-child { z-index:1;background:var(--kleur-primair);border-radius:2.6vw;padding:80px;box-sizing:border-box } @media (min-width:960px) { .ab-pg-kaart-met-locaties-row:not(#_) { display:grid;grid-template-columns:55% 45%;align-items:start;margin-bottom:-15px!important } .ab-pg-kaart-met-locaties-row:not(#_)>*:first-child { grid-column:1/-1;grid-row:1 } .ab-pg-kaart-met-locaties-row:not(#_)>*:last-child { grid-column:2;grid-row:1;width:auto;margin-top:120px;position:relative } } @media (max-width:959px) { .ab-pg-kaart-met-locaties-row:not(#_) { margin-bottom:0!important } .ab-pg-kaart-met-locaties-row:not(#_)>*:last-child { position:relative;top:auto;width:calc(100% - 32px);margin:-40px 16px 0;padding:40px 30px;border-radius:30px } } /* Blokken > Blok (herhaald per subform-rij) > Kaart met locaties > Blokkop [headline] */ .ab-pg-blokkop-7:not(#_) { font-weight:700;padding-top:28px;margin:0 0 43px!important } .ab-pg-blokkop-7:not(#_) span { font-size:40px;line-height:48px;font-weight:600;display:inline;padding-left:10px } @media (max-width:959px) { .ab-pg-blokkop-7:not(#_) { padding-top:0 } .ab-pg-blokkop-7:not(#_) span { font-size:30px!important } } /* Blokken > Blok (herhaald per subform-rij) > Kaart met locaties > Kaart kindcentra [map] */ .ab-pg-kaart-kindcentra:not(#_) { border-radius:2.6vw;overflow:hidden;width:60%;margin:0;position:relative;z-index:0 } @media (max-width:959px) { .ab-pg-kaart-kindcentra:not(#_) { width:100%!important;height:400px;border-radius:30px } } /* Blokken > Blok (herhaald per subform-rij) > Kaart met locaties > Adresgegevens voor kaartpopup (onzichtbaar, niet aanpassen) [grid] */ .ab-pg-adresgegevens-voor-kaartpopup:not(#_) { display:none } /* Blokken > Blok (herhaald per subform-rij) > Kaart met locaties > Locatielijst > Lijstkop (bovenkop) [headline] */ .ab-pg-lijstkop:not(#_) { font-size:20px;line-height:32px;font-weight:500;color:#fff;margin:0;padding-bottom:15px;font-family:inherit } /* Blokken > Blok (herhaald per subform-rij) > Kaart met locaties > Locatielijst > Locaties [list] */ .ab-pg-locaties:not(#_) { margin:0 } .ab-pg-locaties:not(#_)>li { margin:0;padding:20px 0;border-top:0;border-bottom:3px solid #835e9f } .ab-pg-locaties:not(#_) a { display:flex;align-items:center;justify-content:space-between;color:#fff!important;font-size:18px;line-height:21.6px;font-weight:500;text-decoration:none } .ab-pg-locaties:not(#_) a::after { content:'';width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-right:6px } .ab-pg-locaties:not(#_) .uk-icon, .ab-pg-locaties:not(#_) [uk-icon] { color:#fff;margin-right:6px } /* Blokken > Blok (herhaald per subform-rij) > Partners > Blokkop [headline] */ .ab-pg-blokkop-8:not(#_) { font-weight:700;margin:0 0 50px;max-width:calc(100% - 160px) } .ab-pg-blokkop-8:not(#_) span { font-size:40px;line-height:48px;font-weight:600;display:block;margin-top:5px } @media (max-width:959px) { .ab-pg-blokkop-8:not(#_) { max-width:none;margin-bottom:30px!important } .ab-pg-blokkop-8:not(#_) span { font-size:30px!important;line-height:1.2 } } /* Blokken > Blok (herhaald per subform-rij) > Partners > Partners slider [panel-slider] */ .ab-pg-partners-slider:not(#_) { position:relative;margin:0!important } .ab-pg-partners-slider:not(#_) .uk-slider-items .el-item { width:100% } .ab-pg-partners-slider:not(#_) .uk-slider-items .uk-card { display:flex;align-items:center;justify-content:center;height:165px;min-height:165px;padding:0 30px;box-sizing:border-box;border-radius:2.6vw;box-shadow:none;background:#fff } .ab-pg-partners-slider:not(#_) .uk-slider-items .uk-card>* { margin:0 } .ab-pg-partners-slider:not(#_) .el-image { max-height:70px;max-width:151px;width:auto;height:auto;object-fit:contain;margin:0 } .ab-pg-partners-slider:not(#_) .el-slidenav { position:absolute;top:-100px;bottom:auto;left:auto;transform:none;width:61px;height:50px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;color:var(--kleur-tekst);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat } .ab-pg-partners-slider:not(#_) .el-slidenav.uk-slidenav-previous { right:71px } .ab-pg-partners-slider:not(#_) .el-slidenav.uk-slidenav-next { right:0 } .ab-pg-partners-slider:not(#_) .el-slidenav svg { width:12px;height:auto } .ab-pg-partners-slider:not(#_) .el-slidenav:hover { color:var(--kleur-2) } @media (max-width:959px) { .ab-pg-partners-slider:not(#_) .uk-slider-items .uk-card { border-radius:30px } } /* Blokken > Blok (herhaald per subform-rij) > Nieuws > Blokkop [headline] */ /* ook: Blokken > Blok (herhaald per subform-rij) > Vacatures > Blokkop [headline] */ .ab-pg-blokkop-9:not(#_) span, .ab-pg-blokkop-10:not(#_) span { font-size:42px!important;line-height:1.2;font-weight:bold;display:block } @media (max-width:959px) { .ab-pg-blokkop-9:not(#_) span, .ab-pg-blokkop-10:not(#_) span { font-size:30px!important } } /* ---------- Template: Onze Kindcentra (MECg5o7k) ---------- */ /* Overzicht [section] */ .ab-kc-overzicht:not(#_) { padding-top:170px } @media (max-width:959px) { .ab-kc-overzicht:not(#_) { padding-top:120px } } /* Overzicht > Titel categorie [headline] */ .ab-kc-titel-categorie:not(#_) span { font-family:var(--font-accent);color:var(--kleur-accent);display:block } /* Overzicht > Artikelen [grid] */ .ab-kc-artikelen:not(#_) .uk-card { border-radius:30px;overflow:hidden } .ab-kc-artikelen:not(#_) .el-image { aspect-ratio:16/10;object-fit:cover;width:100% } /* ---------- Template: Team (OlK14tMf) ---------- */ /* Header [headline] */ .ab-team-header-headline:not(#_) span { font-family:var(--font-accent); font-size: 76px !important; line-height: 1.2; font-weight: bold; text-shadow: none; color: var(--kleur-primair) } /* ---------- Template: Nieuwsbericht (AxclgRjZ) ---------- */ /* (zonder naam) [section] */ .ab-nws-section:not(#_) { background:var(--kleur-licht);padding:180px 0 40px!important } .ab-nws-section:not(#_)>.uk-container>.uk-grid { margin-left:0;justify-content:space-between;flex-wrap:nowrap } .ab-nws-section:not(#_)>.uk-container>.uk-grid>* { padding-left:0 } .ab-nws-section:not(#_)>.uk-container>.uk-grid>*:first-child { width:527px;flex:none } .ab-nws-section:not(#_)>.uk-container>.uk-grid>*:last-child { width:633px;flex:none;padding-top:70px } @media (max-width:959px) { .ab-nws-section:not(#_) { padding:130px 0 40px!important } .ab-nws-section:not(#_)>.uk-container>.uk-grid { flex-wrap:wrap } .ab-nws-section:not(#_)>.uk-container>.uk-grid>* { width:100%!important;padding-top:0!important } .ab-nws-section:not(#_)>.uk-container>.uk-grid>*:last-child { margin-top:30px } } /* Terug naar nieuws [html] */ .ab-nws-terug-naar-nieuws:not(#_) { margin:0!important;height:70px;display:flex;align-items:center } .ab-nws-terug-naar-nieuws:not(#_) .abbo-terug { display:inline-flex;align-items:center;gap:20px;font-size:18px;line-height:1;font-weight:500;color:var(--kleur-tekst);text-decoration:none } .ab-nws-terug-naar-nieuws:not(#_) .abbo-terug svg { transform:rotate(90deg);transition:transform .3s } .ab-nws-terug-naar-nieuws:not(#_) .abbo-terug:hover svg { transform:rotate(90deg) translateY(4px) } /* Nieuwsfoto [image] */ .ab-nws-nieuwsfoto:not(#_) { margin:0!important } .ab-nws-nieuwsfoto:not(#_) .el-image { display:block;width:527px;max-width:100%;height:auto;border-radius:2.6vw } @media (max-width:959px) { .ab-nws-nieuwsfoto:not(#_) .el-image { border-radius:30px } } /* Deel bericht [html] */ .ab-nws-deel-bericht:not(#_) { margin:20px 0 0!important } .ab-nws-deel-bericht:not(#_) .abbo-deel { display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:0;font:inherit;font-size:16px;font-weight:500;color:var(--kleur-tekst);cursor:pointer } .ab-nws-deel-bericht:not(#_) .abbo-deel i { display:flex;align-items:center;justify-content:center;width:61px;height:50px;background:var(--svg-blob-k2) center/contain no-repeat } .ab-nws-deel-bericht:not(#_) .abbo-deel:hover span { text-decoration:underline } /* Titel [headline] */ .ab-nws-titel:not(#_) { font-weight:700;color:var(--kleur-tekst);margin:0 0 30px!important } /* Berichttekst [text] */ .ab-nws-berichttekst:not(#_) { margin:0!important;font-size:18px;line-height:28.8px;color:var(--kleur-tekst) } .ab-nws-berichttekst:not(#_)>p:first-child { font-size:20px;line-height:32px } .ab-nws-berichttekst:not(#_) p, .ab-nws-berichttekst:not(#_) figure, .ab-nws-berichttekst:not(#_) ul { margin:0 0 40px } .ab-nws-berichttekst:not(#_)>*:last-child { margin-bottom:0 } .ab-nws-berichttekst:not(#_) img { display:block;max-width:500px;width:100%;height:auto } /* ---------- Template: Vacature (OzGwpqO1) ---------- */ /* (zonder naam) [section] */ .ab-vac-section:not(#_) { position:relative;background:var(--kleur-1);padding:218px 0 calc(100px + 2.6vw)!important } .ab-vac-section:not(#_)>.uk-container>.uk-grid { margin-left:0;flex-wrap:nowrap;justify-content:space-between;align-items:center } .ab-vac-section:not(#_)>.uk-container>.uk-grid>* { padding-left:0 } .ab-vac-section:not(#_)>.uk-container>.uk-grid>*:first-child { width:778px;flex:none } .ab-vac-section:not(#_)>.uk-container>.uk-grid>*:first-child { display:flex;flex-wrap:wrap;align-items:center } .ab-vac-section:not(#_)>.uk-container>.uk-grid>*:first-child>* { flex:0 0 100% } .ab-vac-section:not(#_)>.uk-container>.uk-grid>*:first-child>*:nth-child(n+3) { flex:0 0 auto } .ab-vac-section:not(#_)>.uk-container>.uk-grid>*:first-child>*:nth-child(3)+* { margin-left:40px!important } .ab-vac-section:not(#_)>.uk-container>.uk-grid>*:nth-child(2) { width:518px;flex:none;padding-bottom:50px;position:relative } .ab-vac-section:not(#_) .uk-panel { position:static } .ab-vac-section:not(#_) h1 { position:relative;max-width:776px } .ab-vac-section:not(#_) .abbo-scrollto { bottom:calc(75px + 2.6vw)!important } @media (max-width:959px) { .ab-vac-section:not(#_) { padding:180px 0 90px!important } .ab-vac-section:not(#_)>.uk-container>.uk-grid { flex-wrap:wrap } .ab-vac-section:not(#_)>.uk-container>.uk-grid>* { width:100%!important } .ab-vac-section:not(#_)>.uk-container>.uk-grid>*:nth-child(2) { margin-top:40px;padding-bottom:0 } .ab-vac-section:not(#_) .abbo-scrollto { display:none!important } } /* Vacaturetitel [headline] */ .ab-vac-vacaturetitel:not(#_) { color:#fff;font-weight:700;margin:0;overflow-wrap:break-word } @media (max-width:959px) { .ab-vac-vacaturetitel:not(#_) { hyphens:auto } } /* Vacature-gegevens [list] */ .ab-vac-vacature-gegevens:not(#_) { margin:33px 0 0!important } .ab-vac-vacature-gegevens:not(#_)>ul, .ab-vac-vacature-gegevens:not(#_).uk-list { display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0 } .ab-vac-vacature-gegevens:not(#_) li { margin:0;padding:0;font-size:18px;line-height:28.8px;color:#fff;display:flex;align-items:center } .ab-vac-vacature-gegevens:not(#_) li+li::before { content:'\2022';color:#fff;margin:0 6px;position:static;width:auto;height:auto;background:none } .ab-vac-vacature-gegevens:not(#_) li * { color:#fff } /* Solliciteer direct [button] */ .ab-vac-solliciteer-direct:not(#_) { margin:60px 0 0 } /* Delen + scroll-pijl [html] */ .ab-vac-delen-scroll-pijl:not(#_) { margin:60px 0 0 } .ab-vac-delen-scroll-pijl:not(#_):nth-child(3) { margin-top:52px!important } .ab-vac-delen-scroll-pijl:not(#_) .vac-deel { display:flex;align-items:center;justify-content:center;width:61px;height:50px;border:0;padding:0;cursor:pointer;background:var(--abbo-blob-wit) center/contain no-repeat } .ab-vac-delen-scroll-pijl:not(#_) .abbo-scrollto { position:absolute;left:calc(50% - 19px);bottom:50px;width:38px;height:38px;display:block;z-index:4 } .ab-vac-delen-scroll-pijl:not(#_) .abbo-scrollto svg { display:block;width:38px;height:38px;animation:bounce_scroll 3.5s infinite 2s } /* Vacaturefoto [image] */ .ab-vac-vacaturefoto:not(#_) { margin:0 } .ab-vac-vacaturefoto:not(#_) .el-image { display:block;width:518px;max-width:100%;height:324px;object-fit:cover;border-radius:2.6vw } @media (max-width:959px) { .ab-vac-vacaturefoto:not(#_) .el-image { height:auto;border-radius:30px } } /* (zonder naam) [section] */ .ab-vac-section-2:not(#_) { background:var(--kleur-licht);margin-top:-2.6vw;border-radius:2.6vw 2.6vw 0 0;position:relative;z-index:1;padding:35px 0 110px!important } .ab-vac-section-2:not(#_) .uk-container>.uk-grid { margin-left:0 } .ab-vac-section-2:not(#_) .uk-container>.uk-grid>* { max-width:1106px;padding-left:0 } .ab-vac-section-2:not(#_) .uk-panel>:empty { display:none } .ab-vac-section-2:not(#_) .uk-panel>:last-child, .ab-vac-section-2:not(#_) .uk-panel>:has(+ :empty:last-child) { margin-bottom:0 } @media (max-width:959px) { .ab-vac-section-2:not(#_) { margin-top:-30px;border-radius:30px 30px 0 0;padding:40px 0 80px!important } } /* Vacaturetekst [text] */ .ab-vac-vacaturetekst:not(#_) { margin:0;font-size:18px;line-height:28.8px;color:var(--kleur-tekst) } .ab-vac-vacaturetekst:not(#_) p, .ab-vac-vacaturetekst:not(#_) ul { margin:0 0 24px } .ab-vac-vacaturetekst:not(#_) ul { padding-left:0 } .ab-vac-vacaturetekst:not(#_)>*:last-child { margin-bottom:0 } /* Solliciteer direct (onderaan) [button] */ .ab-vac-solliciteer-direct-2:not(#_) { margin:50px 0 0 } @media (max-width:959px) { .ab-vac-solliciteer-direct-2:not(#_) { margin-top:32px!important } } /* ---------- Template: Partner (detail) (syiCVzdl) ---------- */ /* Partner [section] */ .ab-prt-partner:not(#_) { padding-top:180px!important;padding-bottom:40px!important;border-radius:0 } @media (max-width:959px) { .ab-prt-partner:not(#_) { padding-top:130px!important;padding-bottom:40px } } /* Partner > Terug > Terug-link [html] */ .ab-prt-terug-link:not(#_) { margin:0 } .ab-prt-terug-link:not(#_) .pt-terug { display:inline-flex;align-items:center;gap:12px;height:70px;box-sizing:border-box;font-size:18px;line-height:16px;font-weight:500;color:var(--kleur-tekst);text-decoration:none } .ab-prt-terug-link:not(#_) .pt-terug:hover { color:var(--kleur-primair) } .ab-prt-terug-link:not(#_) .pt-terug svg { width:30px;height:auto } /* Partner > Logo en tekst [row] */ .ab-prt-logo-en-tekst:not(#_) { margin-top:0 } @media (min-width:960px) { .ab-prt-logo-en-tekst:not(#_) { margin-left:0;justify-content:space-between;flex-wrap:nowrap } .ab-prt-logo-en-tekst:not(#_)>* { padding-left:0 } .ab-prt-logo-en-tekst:not(#_)>*:first-child { width:527px;flex:none } .ab-prt-logo-en-tekst:not(#_)>*:last-child { width:633px;flex:none } } /* Partner > Logo en tekst > Logo partner [image] */ .ab-prt-logo-partner:not(#_) { display:flex;align-items:center;justify-content:center;height:372px;background:#fff;border-radius:2.6vw;margin:0 } .ab-prt-logo-partner:not(#_) .el-image { width:auto;height:auto;max-width:260px;max-height:200px;object-fit:contain } @media (max-width:959px) { .ab-prt-logo-partner:not(#_) { height:240px;border-radius:30px } .ab-prt-logo-partner:not(#_) .el-image { max-width:200px } } /* Partner > Logo en tekst > Naar de website [button] */ .ab-prt-naar-de-website:not(#_) { margin-top:30px!important } /* Partner > Logo en tekst > Naam partner [headline] */ .ab-prt-naam-partner:not(#_) { font-family:var(--font-kop);font-weight:700;color:var(--kleur-tekst);margin:0 0 30px } @media (max-width:959px) { .ab-prt-naam-partner:not(#_) { margin-top:30px!important } } /* Partner > Logo en tekst > Tekst partner [text] */ .ab-prt-tekst-partner:not(#_) { margin:0;font-size:18px;line-height:28.8px } .ab-prt-tekst-partner:not(#_)>p:first-child { font-size:20px;line-height:32px } .ab-prt-tekst-partner:not(#_) p { margin:0 0 40px } .ab-prt-tekst-partner:not(#_) ul { list-style:none;padding-left:0;margin:0 0 10px } .ab-prt-tekst-partner:not(#_) ul li { position:relative;padding-left:22px } .ab-prt-tekst-partner:not(#_) ul li::before { content:'';position:absolute;left:2px;top:11px;width:7px;height:7px;border-right:2px solid var(--kleur-tekst);border-top:2px solid var(--kleur-tekst);transform:rotate(45deg) } .ab-prt-tekst-partner:not(#_)>*:last-child { margin-bottom:0 } /* Andere partners [section] */ .ab-prt-andere-partners:not(#_) { padding-top:100px;padding-bottom:100px } @media (max-width:959px) { .ab-prt-andere-partners:not(#_) { padding-top:60px!important;padding-bottom:60px!important } } /* Andere partners > Kop (beschrijving categorie Partners) [headline] */ .ab-prt-kop:not(#_) { font-weight:700;margin:0 0 50px } .ab-prt-kop:not(#_) span { font-size:40px;line-height:48px;font-weight:600;display:block;margin-top:5px } .ab-prt-kop:not(#_) span:empty { display:none } @media (max-width:959px) { .ab-prt-kop:not(#_) { margin-bottom:30px!important } .ab-prt-kop:not(#_) span { font-size:30px!important;line-height:1.2 } } /* Andere partners > Andere partners [grid] */ .ab-prt-andere-partners-2:not(#_) .uk-card { display:flex;align-items:center;justify-content:center;height:165px;min-height:165px;box-sizing:border-box;padding:0 30px;border-radius:2.6vw;box-shadow:none;background:#fff;border:1px solid #e6e6e6 } .ab-prt-andere-partners-2:not(#_) .uk-card>* { margin:0!important } .ab-prt-andere-partners-2:not(#_) .el-image { max-height:70px;max-width:180px;width:auto;height:auto;object-fit:contain;margin:0 } @media (max-width:959px) { .ab-prt-andere-partners-2:not(#_) .uk-card { border-radius:30px;height:120px;min-height:120px } } /* ---------- Footer-builder (YOOtheme > Layout > Footer) ---------- */ /* Footer [section] */ @media (min-width:768px) { .ab-ft-footer:not(#_) { border-radius:2.6vw 2.6vw 0 0 } } .ab-ft-footer:not(#_) { padding-bottom:0 } @media (min-width:960px) { .ab-ft-footer:not(#_) { padding-top:135px } } @media (min-width:1340px) { .ab-ft-footer:not(#_) > .uk-container { max-width:1296px;padding-left:0;padding-right:0 } } /* Footer [headline] */ /* ook: Footer [headline] | Footer [headline] */ .ab-ft-footer-headline:not(#_), .ab-ft-footer-headline-2:not(#_), .ab-ft-footer-headline-3:not(#_) { font-size:25px;line-height:1.2;margin:0 0 15px } /* Footer [nav] */ .ab-ft-footer-nav:not(#_) li > a { position: relative; display: inline-block; padding: 1px 10px 1px 0; text-decoration: none; transition: padding 0.3s ease-in-out } .ab-ft-footer-nav:not(#_) li > a::before { content: ""; position: absolute; left: -10px; top: 50%; width: 7px; height: 12px; margin-top: -6px; background: url("data:image/svg+xml;utf8,") no-repeat center / contain; opacity: 0; visibility: hidden; transition: 0.3s ease-in-out } .ab-ft-footer-nav:not(#_) li > a:hover { padding-left: 12px; padding-right: 0 } .ab-ft-footer-nav:not(#_) li > a:hover::before { opacity: 1; visibility: visible; left: 0 } .ab-ft-footer-nav:not(#_) li > a { font-size: 18px; line-height: 1.6 } .ab-ft-footer-nav:not(#_) { margin:0 } .ab-ft-footer-nav:not(#_) .uk-grid { margin-left:-14px } .ab-ft-footer-nav:not(#_) .uk-grid>* { padding-left:14px } /* Footer [social] */ .ab-ft-footer-social:not(#_) { margin:0 } .ab-ft-footer-social:not(#_) .uk-grid { margin-left:-5px } .ab-ft-footer-social:not(#_) .uk-grid>* { padding-left:5px } .ab-ft-footer-social:not(#_) .uk-icon-button { width:62px;height:52px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;color:var(--kleur-primair) } .ab-ft-footer-social:not(#_) .uk-icon-button svg { width:26px;height:26px } .ab-ft-footer-social:not(#_) .uk-icon-button:hover { background-color:transparent;color:var(--kleur-2) } /* Footer [button] */ /* ook: Footer [fragment] */ .ab-ft-footer-button:not(#_), .ab-ft-footer-fragment:not(#_) { margin:0 } /* Footer [row] */ .ab-ft-footer-row:not(#_) { position:relative;margin-top:135px;padding:30px 0;border-top:1px solid #fff } .ab-ft-footer-row:not(#_)>*:first-child { width:100% } .ab-ft-footer-row:not(#_)>*:last-child { position:absolute;right:-15px;top:-63px;width:120px;padding:0 } @media (max-width:959px) { .ab-ft-footer-row:not(#_) { margin-top:60px!important } .ab-ft-footer-row:not(#_)>*:last-child { position:static } } /* Footer [divider] */ /* Footer [row] */ @media (min-width:960px) { .ab-ft-footer-row-2:not(#_)>*:first-child { width:648px;flex:none } .ab-ft-footer-row-2:not(#_)>*:last-child { width:324px;flex:none } } /* Footer [copyright] */ .ab-ft-footer-copyright:not(#_) .el-copyright::first-letter { text-transform: uppercase } .ab-ft-footer-copyright:not(#_), .ab-ft-footer-copyright:not(#_) * { font-size: 14px } .ab-ft-footer-copyright:not(#_) { gap: 0 15px } @media (min-width:960px) { .ab-ft-footer-copyright:not(#_) { flex-wrap: nowrap } } .ab-ft-footer-copyright:not(#_) ul { margin: 0; padding: 0; display: flex; gap: 0 15px; list-style: none } .ab-ft-footer-copyright:not(#_) .el-copyright { white-space: nowrap } .ab-ft-footer-copyright:not(#_) ul { flex-wrap: wrap; row-gap: 6px } /* Footer [column] */ .ab-ft-footer-column:not(#_) > * { display: inline; margin: 0 } .ab-ft-footer-column:not(#_), .ab-ft-footer-column:not(#_) * { font-size: 14px; line-height: 1.6 } .ab-ft-footer-column:not(#_) > * > *, .ab-ft-footer-column:not(#_) a { display: inline; color: inherit } /* Footer [image] */ .ab-ft-footer-image:not(#_) { position:relative;margin:0;width:120px;height:114px } .ab-ft-footer-image:not(#_)::after { content:'';position:absolute;top:0;left:0;width:133px;height:120px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 50'%3E%3Cpath d='M31.365 0c-6.806.127-12.607 1.776-17.057 4.6C7.414 7.4 1.862 12.692.244 21.068c-2.336 12.1 12.453 26.9 28.2 28.655C42.733 51.316 53.2 45.95 56.509 36.188a22.632 22.632 0 004.409-11.315C62.267 12.533 46.787-.282 31.365 0' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;z-index:0 } .ab-ft-footer-image:not(#_) .el-link, .ab-ft-footer-image:not(#_) picture, .ab-ft-footer-image:not(#_) img { position:relative;z-index:1;display:block;width:120px;height:114px } /* SIERLETTER-ACCENT: lettertype en kleur van het *accent*-deel (span) in de koppen van alle templates */ .ab-hm-blokken-headline:not(#_) span, .ab-hm-blokken-headline-2:not(#_) span, .ab-team-intro-headline:not(#_) span, .ab-team-headline:not(#_) span, .ab-hm-blokken-headline-3:not(#_) span, .ab-hm-blokken-headline-4:not(#_) span, .ab-pg-paginakop:not(#_) span, .ab-pg-paginakop-2:not(#_) span, .ab-pg-blokkop:not(#_) span, .ab-pg-blokkop-2:not(#_) span, .ab-pg-blokkop-3:not(#_) span, .ab-pg-blokkop-4:not(#_) span, .ab-pg-blokkop-5:not(#_) span, .ab-pg-blokkop-6:not(#_) span, .ab-pg-blokkop-7:not(#_) span, .ab-pg-blokkop-8:not(#_) span, .ab-pg-blokkop-9:not(#_) span, .ab-pg-blokkop-10:not(#_) span, .ab-prt-kop:not(#_) span { font-family:var(--font-accent); text-shadow:none; color:var(--kleur-accent) } /* LOCATIE-HEADER (alle locaties, niet Abbo): paginaheader zoals de live locatiesites. Foto over de volle breedte (max 900px hoog) met donker verloop links, paginatitel wit, sierelementen links- en rechtsonder (per site: images/template/locatie/sier-links.png en sier-rechts.png), Abbo-badge onderaan in het midden (images/template/locatie/abbo-badge.png), inhoud schuift 44px over de foto. data-site wordt door custom.js gezet op basis van de domeinnaam. */ @media (min-width:960px){ [data-site] .ab-pg-header:not(#_){background:#000!important;padding:0;overflow:visible;position:relative} [data-site] .ab-pg-header:not(#_)>.uk-container{position:static;min-height:0;height:min(100vh,900px);padding-top:103px;box-sizing:border-box;justify-content:center} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:first-child{position:static;z-index:auto;max-width:none} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:first-child>.uk-panel>*{position:relative;z-index:3} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:last-child{position:absolute;inset:0;width:100%;height:100%;transform:none;z-index:0;overflow:hidden} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:last-child>.uk-panel, [data-site] .ab-pg-header:not(#_) .ab-pg-headerfoto, [data-site] .ab-pg-header:not(#_) .ab-pg-headerfoto picture{display:block;width:100%;height:100%} [data-site] .ab-pg-header:not(#_) .ab-pg-headerfoto .el-image{width:100%;height:100%;max-width:none;object-fit:cover} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:last-child::after{content:"";position:absolute;inset:0 50% 0 0;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none} [data-site] .ab-pg-header:not(#_) .ab-pg-slogan, [data-site] .ab-pg-header:not(#_) .ab-pg-slogan *{color:#fff;font-family:"Plus Jakarta Sans",helvetica,sans-serif;font-size:60px;font-weight:700;line-height:1.2;text-shadow:0 0 15px rgba(0,0,0,.15);letter-spacing:0} [data-site] .ab-pg-header:not(#_)::before, [data-site] .ab-pg-header:not(#_)::after{content:"";position:absolute;bottom:0;z-index:2;pointer-events:none;background:no-repeat bottom/contain} [data-site] .ab-pg-header:not(#_)::before{left:0;width:507px;height:580px;bottom:-20px;background-image:url(../../../images/template/locatie/sier-links.png);background-position:left bottom} [data-site] .ab-pg-header:not(#_)::after{right:-75px;width:593px;height:298px;background-image:url(../../../images/template/locatie/sier-rechts.png);background-position:right bottom} [data-site] .ab-pg-header:not(#_)>.uk-container::after{content:"";position:absolute;left:50%;bottom:-48px;width:180px;height:160px;transform:translateX(-50%);border-radius:100%;background:#fff url(../../../images/template/locatie/abbo-badge.png) center 18px/140px auto no-repeat;z-index:4} [data-site] .ab-pg-header:not(#_) .ab-pg-scroll-pijl{position:absolute!important;left:max(15px,calc((100vw - 1326px)/2 + 15px));bottom:-8px;top:auto;transform:none;z-index:4} [data-site] .ab-pg-header:not(#_) .ab-pg-scroll-pijl *{color:#fff;stroke:#fff} [data-site] .ab-pg-header:not(#_)+.ab-pg-paginakop-en-intro{position:relative;z-index:3;margin-top:-44px;border-radius:44px 44px 0 0} } @media (max-width:959px){ [data-site] .ab-pg-header:not(#_){background:#000!important;position:relative;padding:0!important;overflow:visible} [data-site] .ab-pg-header:not(#_)>.uk-container{position:static;min-height:560px;padding-top:110px;padding-bottom:110px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid{margin:0} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:first-child{position:static;padding:0} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:first-child>.uk-panel>*{position:relative;z-index:3} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:last-child{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;z-index:0;overflow:hidden} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:last-child>.uk-panel, [data-site] .ab-pg-header:not(#_) .ab-pg-headerfoto, [data-site] .ab-pg-header:not(#_) .ab-pg-headerfoto picture{display:block;width:100%;height:100%;margin:0!important} [data-site] .ab-pg-header:not(#_) .ab-pg-headerfoto .el-image{width:100%;height:100%;max-width:none;object-fit:cover} [data-site] .ab-pg-header:not(#_)>.uk-container>.uk-grid>*:last-child::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.1));pointer-events:none} [data-site] .ab-pg-header:not(#_) .ab-pg-slogan, [data-site] .ab-pg-header:not(#_) .ab-pg-slogan *{color:#fff;font-family:"Plus Jakarta Sans",helvetica,sans-serif;font-size:36px;font-weight:700;line-height:1.2;text-shadow:0 0 15px rgba(0,0,0,.15)} [data-site] .ab-pg-header:not(#_)::before, [data-site] .ab-pg-header:not(#_)::after{content:"";position:absolute;bottom:0;z-index:2;pointer-events:none;background:no-repeat bottom/contain} [data-site] .ab-pg-header:not(#_)::before{left:0;width:180px;height:206px;bottom:-8px;background-image:url(../../../images/template/locatie/sier-links.png);background-position:left bottom} [data-site] .ab-pg-header:not(#_)::after{right:-30px;width:210px;height:106px;background-image:url(../../../images/template/locatie/sier-rechts.png);background-position:right bottom} [data-site] .ab-pg-header:not(#_)>.uk-container::after{content:"";position:absolute;left:50%;bottom:-36px;width:110px;height:98px;transform:translateX(-50%);border-radius:100%;background:#fff url(../../../images/template/locatie/abbo-badge.png) center 11px/86px auto no-repeat;z-index:4} [data-site] .ab-pg-header:not(#_)+.ab-pg-paginakop-en-intro{position:relative;z-index:3;margin-top:-30px;border-radius:30px 30px 0 0;padding-top:90px!important} } /* LOCATIE-HOME-HERO (alle locaties, niet Abbo): home-banner zoals de live locatiesites. Slideshow over de volle breedte (element .ab-hm-slideshow in de Home-template): slide 1 = volledige artikelafbeelding, slide 2 = intro-afbeelding van het Home-artikel (alleen als die gevuld is). De hoofdsite heeft de slideshow uitgeschakeld in de Home-template, de locaties de herofoto en de sier-rij. Kop en knoppen wit links op de foto, sier en Abbo-badge zoals de paginaheader. */ [data-site] .ab-hm-header:not(#_){background:#000!important;padding:0!important;overflow:visible;position:relative;border-radius:0} [data-site] .ab-hm-header:not(#_)>.uk-container{position:static;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child{margin:0} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:first-child{position:static;padding:0;max-width:640px} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:first-child>.uk-panel>*{position:relative;z-index:3} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:last-child{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;transform:none;z-index:0;overflow:hidden} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:last-child>.uk-panel{position:absolute;inset:0} [data-site] .ab-hm-header:not(#_) .ab-hm-slideshow{position:absolute;inset:0;margin:0!important} [data-site] .ab-hm-header:not(#_) .ab-hm-slideshow>.uk-position-relative{height:100%} [data-site] .ab-hm-header:not(#_) .ab-hm-slideshow .uk-slideshow-items{height:100%!important;min-height:0!important} [data-site] .ab-hm-header:not(#_) .ab-hm-slideshow .el-image{width:100%!important;height:100%!important;max-width:none;object-fit:cover!important} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:last-child::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 60%);pointer-events:none;z-index:1} [data-site] .ab-hm-header:not(#_) .bk-marker{display:none} [data-site] .ab-hm-header:not(#_) .ab-hm-header-headline, [data-site] .ab-hm-header:not(#_) .ab-hm-header-headline span{color:#fff;font-family:"Plus Jakarta Sans",helvetica,sans-serif;font-weight:700;line-height:1.2;text-shadow:0 0 15px rgba(0,0,0,.15);letter-spacing:0;display:inline;padding:0;white-space:normal} [data-site] .ab-hm-header:not(#_)::before, [data-site] .ab-hm-header:not(#_)::after{content:"";position:absolute;bottom:0;z-index:2;pointer-events:none;background:no-repeat bottom/contain} [data-site] .ab-hm-header:not(#_)::before{background-image:url(../../../images/template/locatie/sier-links.png);background-position:left bottom;left:0} [data-site] .ab-hm-header:not(#_)::after{background-image:url(../../../images/template/locatie/sier-rechts.png);background-position:right bottom} [data-site] .ab-hm-header:not(#_)>.uk-container::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-radius:100%;background:#fff url(../../../images/template/locatie/abbo-badge.png) no-repeat;z-index:4} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:nth-child(2){position:absolute;left:max(15px,calc((100vw - 1326px)/2 + 15px));bottom:-8px;margin:0;z-index:4} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:nth-child(2) *{color:#fff;stroke:#fff;margin:0} [data-site] .ab-hm-header:not(#_)+*{position:relative;z-index:3} @media (min-width:960px){ [data-site] .ab-hm-header:not(#_)>.uk-container{min-height:0;height:min(100vh,900px);padding-top:103px} [data-site] .ab-hm-header:not(#_) .ab-hm-header-headline, [data-site] .ab-hm-header:not(#_) .ab-hm-header-headline span{font-size:60px} [data-site] .ab-hm-header:not(#_)::before{width:507px;height:580px;bottom:-20px} [data-site] .ab-hm-header:not(#_)::after{right:-75px;width:593px;height:298px} [data-site] .ab-hm-header:not(#_)>.uk-container::after{bottom:-48px;width:180px;height:160px;background-position:center 18px;background-size:140px auto} [data-site] .ab-hm-header:not(#_)+*{margin-top:-44px;border-radius:44px 44px 0 0} } @media (max-width:959px){ [data-site] .ab-hm-header:not(#_)>.uk-container{min-height:560px;padding-top:110px;padding-bottom:110px} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:first-child{padding:0 20px} [data-site] .ab-hm-header:not(#_) .ab-hm-header-headline, [data-site] .ab-hm-header:not(#_) .ab-hm-header-headline span{font-size:36px!important} [data-site] .ab-hm-header:not(#_)::before{width:180px;height:206px;bottom:-8px} [data-site] .ab-hm-header:not(#_)::after{right:-30px;width:210px;height:106px} [data-site] .ab-hm-header:not(#_)>.uk-container::after{bottom:-36px;width:110px;height:98px;background-position:center 11px;background-size:86px auto} [data-site] .ab-hm-header:not(#_)+*{margin-top:-30px;border-radius:30px 30px 0 0;padding-top:90px!important} } /* LOCATIE-MENUBALK (alle locaties, niet Abbo): menubalk zoals de live locatiesites. Witte balk van 103px met afgeronde onderhoeken, liggend locatielogo zonder blob (custom.js wisselt het logo naar images/template/locatie/logo-locatie.png), menu, Contact-knop als pil en zoeken op één regel. De knop "Onze kindcentra" is alleen voor de hoofdsite. Kleur van de Contact-knop: --kleur-headerknop en --kleur-headerknop-tekst in het blok van de locatie. */ [data-site] a.uk-logo::after{display:none} [data-site] .tm-header .uk-logo{margin:0;padding:0 20px 0 0} [data-site] .tm-header .uk-logo img{width:auto;height:60px;max-width:220px;object-fit:contain} [data-site] .tm-header .uk-navbar-container .uk-container{height:103px} /* Menubalk-schaduw zoals live: alleen als de header sticky is (gescrold) */ [data-site] .tm-header .uk-navbar-container .uk-container{transition:box-shadow .15s ease-in-out} [data-site] .tm-header .uk-navbar-sticky .uk-container,[data-site] .tm-header-mobile .uk-navbar-sticky .uk-container{box-shadow:0 0 30px rgba(0,0,0,.15)} [data-site] .tm-header .uk-navbar{min-height:103px;height:103px;align-items:center} [data-site] .tm-header .uk-navbar-left,[data-site] .tm-header .uk-navbar-right{height:103px;flex-wrap:nowrap;align-items:center} [data-site] .tm-header .uk-navbar-nav{gap:0} [data-site] .tm-header .uk-navbar-nav>li>a{height:103px;min-height:103px;padding:0 15px;white-space:nowrap;color:var(--kleur-tekst);font-size:17px} [data-site] .tm-header .uk-navbar-right>.uk-navbar-item{min-height:103px;padding:0 0 0 15px} [data-site] .tm-header .uk-navbar-right>.uk-navbar-item:has(.tm-zoeken){order:2;padding:0;margin-left:-30px} [data-site] .tm-header .uk-navbar-right>.uk-navbar-item>.uk-grid,[data-site] .tm-header .uk-navbar-right>.uk-navbar-item .uk-grid>*{margin:0;padding:0} [data-site] .tm-header .uk-navbar-item .uk-button-primary{--abbo-btn:var(--kleur-headerknop,var(--kleur-knop));color:var(--kleur-headerknop-tekst,#fff)!important;height:58px;line-height:56px;padding:0 25px;font-size:18px} .tm-header .tm-zoeken{display:inline-flex;align-items:center;justify-content:center;width:36px;height:46px;margin-left:10px;color:var(--kleur-tekst)} @media (min-width:1200px) and (max-width:1399px){ [data-site] .tm-header .uk-navbar-nav>li>a{padding:0 12px;font-size:16px} } @media (max-width:1199px){ [data-site] .tm-header-mobile .uk-navbar-container .uk-container{height:70px;border-radius:0 0 30px 30px} [data-site] .tm-header-mobile .uk-navbar{height:70px;min-height:70px;align-items:center} [data-site] .tm-header-mobile .uk-navbar-left{min-width:0;flex:1 1 auto} [data-site] .tm-header-mobile .uk-logo{margin:0;padding:0 10px 0 5px;min-height:70px} [data-site] .tm-header-mobile .uk-logo img{width:auto!important;height:40px!important;max-width:100%;object-fit:contain;object-position:left center} [data-site] .tm-header-mobile .uk-navbar-right{gap:6px;flex:none} [data-site] .tm-header-mobile .uk-navbar-right .uk-button-primary{--abbo-btn:var(--kleur-headerknop,var(--kleur-knop));color:var(--kleur-headerknop-tekst,#fff)!important;height:40px;line-height:38px;padding:0 16px;font-size:15px} [data-site] .tm-header-mobile .uk-navbar-toggle{width:62px;height:52px;min-height:52px} /* hamburger in de lichtblauwe blob (achtergrond uit de basisregel) */ } /* LOCATIE-TYPOGRAFIE EN KNOPPEN (alle locaties, niet Abbo): zoals de live locatiesites. Tekst en koppen in de tekstkleur van de locatie (de gecompileerde YOOtheme-stijl zet ze op Abbo-paars), het *accent* in koppen zonder sierletter (live gebruikt één letter en kleur per kop), knoppen als pil van 58px met echte achtergrondkleur (geen ::before/::after zoals de Abbo-ellips), bij hover groen (kleur 1). */ [data-site] body{color:var(--kleur-tekst)} :where([data-site]) h1,:where([data-site]) h2,:where([data-site]) h3,:where([data-site]) h4,:where([data-site]) h5,:where([data-site]) h6,:where([data-site]) .uk-h1,:where([data-site]) .uk-h2,:where([data-site]) .uk-h3,:where([data-site]) .uk-h4{color:var(--kleur-tekst)} [data-site] :is(h1,h2,h3,h4,h5,h6,.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,.el-title,.el-meta) span:not([class]){font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;color:inherit!important;text-shadow:none!important;padding:0!important;margin:0!important} [data-site] .uk-button:not(.uk-button-text):not(.uk-button-link){height:58px;line-height:58px;padding:0 25px} [data-site] .uk-button:not(.uk-button-text):not(.uk-button-link){background:var(--abbo-btn)!important;border-radius:30px;transition:background-color .3s} [data-site] .uk-button:not(.uk-button-text):not(.uk-button-link):is(:hover,:focus-visible){background:var(--kleur-1)!important} [data-site] .uk-button::before,[data-site] .uk-button::after{display:none!important} /* LOCATIE-BLOKKEN EN PAGINAHEADER-HOOGTE (alle locaties, niet Abbo): maten van de live locatiesites. Kaartkop 28/34 vet, kaarttekst gecentreerd (ook in halve kaarten zonder foto), headerfoto 57,5% van de schermbreedte (max 900px). */ [data-site] .ab-pg-blok:not(#_) .bk-card .el-title{font-size:28px;line-height:34px;font-weight:700;margin-bottom:30px!important} [data-site] .uk-section-muted>.uk-container>.uk-grid:has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img,.bk-media iframe,.bk-media video)) .bk-card .el-title+.el-content{text-align:center} [data-site] .ab-pg-blok:not(#_):has(.bk-breedte-half):not(:has(.bk-kleur-wit)) .bk-row:not(:has(.bk-media img,.bk-media iframe,.bk-media video)) .bk-card .el-title{margin-bottom:30px!important} @media (min-width:960px){ [data-site] .ab-pg-header:not(#_)>.uk-container,[data-site] .ab-hm-header:not(#_)>.uk-container{height:clamp(520px,calc(100vh - 300px),800px)} [data-site] .ab-pg-header:not(#_) .ab-pg-headerfoto .el-image,[data-site] .ab-hm-header:not(#_) .ab-hm-slideshow .el-image{object-position:50% 20%!important} [data-site] .ab-pg-header:not(#_)+.ab-pg-paginakop-en-intro{padding-top:127px!important} } [data-site] .ab-pg-blok:not(#_):has(.bk-breedte-vol) .bk-row:not(:has(.bk-media img,.bk-media iframe,.bk-media video)) .bk-card{padding-left:95px!important;padding-right:95px!important} [data-site] .ab-pg-blok:not(#_):has(.bk-breedte-half) .bk-row:not(:has(.bk-media img,.bk-media iframe,.bk-media video)) .bk-card{padding-left:40px!important;padding-right:40px!important} /* Home-hero locaties: kop over twee regels en bolletjes rechts (zoals live) */ @media (min-width:960px){ [data-site] .ab-hm-header:not(#_) .ab-hm-header-headline{max-width:420px!important;display:block!important} [data-site] .ab-hm-header:not(#_)>.uk-container>.uk-grid:first-child>*:first-child{margin-left:-15px} } [data-site] .ab-hm-slideshow .uk-dotnav{position:relative;z-index:5} [data-site] .ab-hm-slideshow .uk-dotnav>*>*{width:12px;height:12px;border:1px solid var(--kleur-1);background:transparent} [data-site] .ab-hm-slideshow .uk-dotnav>.uk-active>*{background:var(--kleur-1)} /* Paginakop locaties: accent loopt door op dezelfde regel (live breekt alleen natuurlijk af) */ [data-site] .ab-pg-paginakop:not(#_) span{display:inline!important} /* Knop in een blauwe kaart (kleur 3) is groen, zoals live; anders valt hij weg tegen de kaart */ [data-site] .ab-pg-blok:not(#_):has(.bk-kleur-kleur-3) .bk-card .uk-button{--abbo-btn:var(--kleur-1)} [data-site] .ab-pg-blok:not(#_):has(.bk-kleur-kleur-3) .bk-card .uk-button:is(:hover,:focus-visible){background:var(--kleur-knop,var(--kleur-2))!important} /* LOCATIE-PARTNERS (categorieblog Partners): zoals live een pagina met headerfoto, intro + paginakop (uit de categorie: afbeelding, omschrijving, titel) en halve gekleurde kaarten met alleen titel en knop. Kleuren lopen door: blauw, oranje, groen, geel. In de locatie-template staan de vacature-header, de lijstkop, kaartfoto en kaarttekst uitgeschakeld; de hoofdsite heeft eigen logokaarten. */ [data-site] .prt-lijst-sectie:not(#_){background:var(--kleur-licht);padding:150px 0 90px} [data-site] .prt-kaarten:not(#_){display:grid;grid-template-columns:1fr 1fr;column-gap:81px;row-gap:60px;width:min(1245px,calc(100vw - 30px));position:relative;left:50%;transform:translateX(-50%);margin:0!important} [data-site] .prt-kaarten:not(#_)>.prt-kaart{width:auto!important;max-width:none!important;margin:0!important;padding:60px 40px!important;border-radius:2.6vw;background:var(--kleur-3);text-align:center;box-shadow:none} [data-site] .prt-kaarten:not(#_)>.prt-kaart:nth-child(4n+2){background:var(--kleur-2)} [data-site] .prt-kaarten:not(#_)>.prt-kaart:nth-child(4n+3){background:var(--kleur-1)} [data-site] .prt-kaarten:not(#_)>.prt-kaart:nth-child(4n+4){background:var(--kleur-4)} [data-site] .prt-kaarten:not(#_) .prt-kaart-titel{font-family:var(--font-kop);font-size:28px;line-height:34px;font-weight:700;color:#fff;margin:0 0 30px;padding:0} [data-site] .prt-kaarten:not(#_) .prt-kaart-link{text-align:left;position:static} [data-site] .prt-kaarten:not(#_) .prt-kaart-link .uk-button{display:inline-block;height:58px;line-height:58px;padding:0 25px;border-radius:30px;background:var(--kleur-knop,var(--kleur-2))!important;color:#fff!important;font-size:18px;text-decoration:none;transition:background-color .3s} [data-site] .prt-kaarten:not(#_) .prt-kaart-link .uk-button:is(:hover,:focus-visible){background:var(--kleur-1)!important} [data-site] .prt-kaarten:not(#_)>.prt-kaart:nth-child(4n+1) .prt-kaart-link .uk-button{background:var(--kleur-1)!important} [data-site] .prt-kaarten:not(#_)>.prt-kaart:nth-child(4n+1) .prt-kaart-link .uk-button:is(:hover,:focus-visible){background:var(--kleur-knop,var(--kleur-2))!important} @media (max-width:959px){[data-site] .prt-kaarten:not(#_){grid-template-columns:1fr;row-gap:30px} [data-site] .prt-lijst-sectie:not(#_){padding:90px 0 60px}} [data-site] .prt-kaarten:not(#_)>.prt-kaart{height:auto!important;min-height:0!important;display:block!important} [data-site] .prt-kaarten:not(#_)>.prt-kaart>*{margin-left:0!important;margin-right:0!important;width:auto!important;max-width:none!important} [data-site] .prt-kaarten:not(#_)>.prt-kaart>.prt-kaart-titel{margin:0 0 30px!important} [data-site] .prt-kaarten:not(#_)>.prt-kaart>.prt-kaart-link{margin:0!important} [data-site] .prt-kaarten:not(#_)>.prt-kaart::after{display:none!important} /* LOCATIE-MENU-STREEPJE EN DROPDOWN (alle locaties): zoals de live locatiesites. Recht streepje 2px onder de tekst (groeit van links bij hover), pijltje (angle-down) in de rechterpadding, dropdown 288px, radius 20, 10px padding, items 17px met 37px regelafstand, direct onder de tekst. */ [data-site] .tm-header .uk-navbar-nav>li>a{column-gap:0} [data-site] .tm-header .uk-navbar-nav>li>a .uk-navbar-parent-icon{position:absolute;right:0;top:50%;width:11px;height:11px;margin:0;transform:translateY(-50%);display:flex;align-items:center;justify-content:center} [data-site] .tm-header .uk-navbar-nav>li>a .uk-navbar-parent-icon svg{width:10px;height:10px} [data-site] .tm-header .uk-navbar-nav>li>a .uk-navbar-parent-icon svg polyline{stroke-width:2.6} [data-site] .tm-header .uk-navbar-nav>li>a::after{content:'';position:absolute;left:15px;right:calc(100% - 15px);top:calc(50% + 17.6px);height:2px;background:currentColor;visibility:hidden;transition:right .3s ease-in-out,visibility .3s} [data-site] .tm-header .uk-navbar-nav>li:is(:hover,.uk-active,.uk-open)>a::after{right:15px;visibility:visible} [data-site] .tm-header .uk-navbar-dropdown:not(#_){width:288px!important;min-width:288px;padding:0!important;border-radius:0!important;box-shadow:none!important;background:none!important} [data-site] .tm-header .uk-navbar-dropdown:not(#_) .uk-navbar-dropdown-nav{position:relative;left:40px;top:-33px;background:#fff;border-radius:20px;padding:10px;box-shadow:0 5px 10px rgba(0,0,0,.05)} [data-site] .tm-header .uk-navbar-dropdown:not(#_) .uk-navbar-dropdown-nav>li{padding:5px} [data-site] .tm-header .uk-navbar-dropdown:not(#_) .uk-navbar-dropdown-nav>li>a{padding:0 15px;min-height:0;font-family:"Plus Jakarta Sans",helvetica,sans-serif;font-size:17px;line-height:27.2px;font-weight:500;color:var(--kleur-tekst)!important;background:none} [data-site] .tm-header .uk-navbar-dropdown:not(#_) .uk-navbar-dropdown-nav>li>a:hover{text-decoration:underline} [data-site] .tm-header .uk-navbar-dropdown:not(#_) .uk-navbar-dropdown-nav>li>a::before,[data-site] .tm-header .uk-navbar-dropdown:not(#_) .uk-navbar-dropdown-nav>li>a::after{display:none} @media (min-width:1200px) and (max-width:1399px){ [data-site] .tm-header .uk-navbar-nav>li>a::after{left:12px;right:calc(100% - 12px)} [data-site] .tm-header .uk-navbar-nav>li:is(:hover,.uk-active,.uk-open)>a::after{right:12px} } /* LOCATIE-FOOTER (alle locaties): zoals de live locatiesites. Kop locatie in Jakarta 22px, menu in twee kolommen (rijgewijs), witte ronde social-knoppen, groene pil-knop, onderregel copyright links en adres op één regel rechts, Abbo-badge ("deel van abbo") gecentreerd op de bovenrand in plaats van rechtsonder. */ [data-site] .ab-ft-footer:not(#_){position:relative;z-index:10;overflow:visible;padding-top:175px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-headline{font-family:"Plus Jakarta Sans",helvetica,sans-serif;font-size:22px;line-height:26px;font-weight:700;margin:0 0 15px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-headline-2{margin:0 0 12px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-nav .uk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,301px));column-gap:9px;row-gap:10px;margin:0} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-nav .uk-grid>*,[data-site] .ab-ft-footer:not(#_) .ab-ft-footer-nav .uk-grid ul{display:contents} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-nav li{margin:0;padding:0} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-nav li>a{font-size:18px;line-height:31px;padding-top:0;padding-bottom:0} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-social .uk-grid{margin-left:-12px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-social .uk-grid>*{padding-left:12px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-social .uk-icon-button{width:55px;height:55px;border-radius:50%;background:#fff;color:var(--kleur-3)} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-social .uk-icon-button:hover{background:#fff;color:var(--kleur-2)} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-social .uk-icon-button svg{width:22px;height:22px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-button .uk-button{--abbo-btn:var(--kleur-1);background:var(--kleur-1)!important;color:#fff!important} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-row{position:static;margin-top:75px!important} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-row-2,[data-site] .ab-ft-footer:not(#_) .ab-ft-footer-fragment,[data-site] .ab-ft-footer:not(#_) .ab-ft-footer-row>*{margin-top:0!important} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-row>*:last-child{position:absolute;left:50%;top:-37px;right:auto;width:140px;padding:0;transform:translateX(-50%)} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-image{width:140px;height:116px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-image :is(.el-link,picture,img){width:140px;height:116px;object-fit:contain} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-image::after{width:180px;height:160px;top:-23px;left:-21px;background:#fff!important;border-radius:50%;-webkit-mask:none;mask:none} @media (min-width:960px){ [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-row-2>*:first-child{width:648px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-row-2>*:last-child{width:648px} } /* LOCATIE-LINKS IN TEKST: links in lopende tekst in de tekstkleur (live), niet Abbo-paars; in gekleurde kaarten wit. */ [data-site] #tm-main a:not([class]),[data-site] .uk-section a:not([class]){color:inherit} /* LOCATIE-HOME-BLOKKEN (alle locaties): tekstblokken op Home zoals de live locatiesites. Eén gekleurde kaart: kop, tekst, daaronder foto of YouTube-video, dan de knop. Halve blokken naast elkaar. */ [data-site] .ab-hm-blokken:has(.bt-tekst){--card:var(--kleur-3)} [data-site] .ab-hm-blokken:has(.bt-tekst):has(.bk-kleur-kleur-1){--card:var(--kleur-1)} [data-site] .ab-hm-blokken:has(.bt-tekst):has(.bk-kleur-kleur-2){--card:var(--kleur-2)} [data-site] .ab-hm-blokken:has(.bt-tekst):has(.bk-kleur-kleur-4){--card:var(--kleur-4)} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokken-row{max-width:1296px;margin-top:0!important;padding-left:0;padding-right:0} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokken-row>.uk-grid{display:flex!important;flex-direction:column;flex-wrap:nowrap;align-items:center;margin:0!important;width:100%;box-sizing:border-box;padding:60px 95px;border-radius:2.6vw;background:var(--card);color:#fff;text-align:center} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokken-row>.uk-grid>*, [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokken-row>.uk-grid>*>.uk-panel.uk-width-1-1{display:contents} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) [class*=uk-tile-]{display:contents} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) [class*=uk-tile-]>*{order:1;width:100%} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) [class*=uk-tile-]>*:has(>.el-link){order:3;width:auto;margin:30px 0 0!important} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .el-title{font-size:28px;line-height:34px;font-weight:700;margin:0 0 30px!important;color:#fff} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .el-content{margin:0!important} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .uk-margin:has(>picture,>img){order:2;width:400px;max-width:100%;margin:30px auto 0!important;transform:none!important} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .el-image{border-radius:0!important;width:100%;height:auto} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokvideo{order:2;width:100%;aspect-ratio:500/270;height:auto;margin:0!important} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .uk-margin:has(>.uk-button),[data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .uk-button-group,[data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) *:has(>.el-item>.uk-button){order:3;margin:30px 0 0!important} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst):has(.bk-kleur-kleur-3) .uk-button{--abbo-btn:var(--kleur-1)} /* halve blokken naast elkaar */ [data-site] #tm-main:has(>.ab-hm-blokken .bk-br-half){display:flex;flex-wrap:wrap;align-items:stretch} [data-site] #tm-main:has(>.ab-hm-blokken .bk-br-half)>*{width:100%} @media (min-width:960px){ [data-site] .ab-hm-blokken:not(#_):has(.bk-br-half){width:50%;display:flex;flex-direction:column} [data-site] .ab-hm-blokken:not(#_):has(.bk-br-half) .ab-hm-blokken-row{flex:1;display:flex;width:100%;max-width:none;box-sizing:border-box;padding:0 15px 0 max(65px,calc(100% - 648px))!important} [data-site] .ab-hm-blokken:not(#_):has(.bk-br-half)+.ab-hm-blokken:not(#_):has(.bk-br-half) .ab-hm-blokken-row{padding:0 max(65px,calc(100% - 648px)) 0 15px!important} [data-site] .ab-hm-blokken:not(#_):has(.bk-br-half) .ab-hm-blokken-row>.uk-grid{flex:1;padding:65px;justify-content:flex-start} [data-site] .ab-hm-blokken:not(#_):has(.bk-br-half):has(.ab-hm-blokvideo) .ab-hm-blokken-row>.uk-grid{padding:65px} } [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokvideo{align-self:stretch;width:auto!important;max-width:none} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokvideo iframe{display:block;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:500/270;border:0} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokken-row{margin-bottom:60px!important} [data-site] .ab-hm-blokken:not(#_):has(.bt-kindcentra) :is(h1,h2,h3,.uk-h2,.uk-h3):not([uk-slider] *){text-align:left!important;font-size:40px;line-height:48px;max-width:1296px;margin-left:auto!important;margin-right:auto!important} /* Ateliers-slider: tekstkaart en kop op dezelfde linkerlijn als live (contentbreedte max 1296px) */ @media(min-width:960px){[data-site] .ab-hm-kindcentra-slider:not(#_){margin-left:max(-15px,calc((100% - 1326px) / 2));margin-right:max(-15px,calc((100% - 1326px) / 2))}} [data-site] .ab-hm-blokken:not(#_):has(.bt-kindcentra) :is(h1,h2,h3,.uk-h2,.uk-h3):not([uk-slider] *) span{display:inline!important;font:inherit!important} @media (min-width:960px){ [data-site] .ab-hm-blokken:not(#_):has(.bk-br-half)>.uk-container{width:100%;max-width:none;flex:1;display:flex;flex-direction:column;padding:0} [data-site] .ab-hm-blokken:not(#_):has(.bk-br-half)>.uk-container>.bk-markers{flex:none} } [data-site] .ab-hm-blokken:not(#_):has(.bt-kindcentra) .uk-container{padding-left:65px!important;padding-right:65px!important;max-width:none} @media (max-width:959px){[data-site] .ab-hm-blokken:not(#_):has(.bt-kindcentra) .uk-container{padding-left:15px!important;padding-right:15px!important}} [data-site] .ab-hm-blokken:not(#_):has(.bt-kindcentra) .uk-container .uk-container{padding-left:0!important;padding-right:0!important} [data-site] .ab-pg-blok:not(#_):has(.bt-kindcentra) :is(h1,h2,h3,.uk-h2,.uk-h3):not([uk-slider] *){text-align:left!important;font-size:40px;line-height:48px;max-width:none} /* LOCATIE-TABELLEN: tabellen in blokken en tekst (team, leerlingenzorg, schooltijden) zoals live: kolommen naast elkaar, geen kaders. */ [data-site] #tm-main :is(.el-content,.uk-panel) table{width:100%;border-collapse:collapse;margin:0 0 20px;text-align:inherit;table-layout:fixed} [data-site] #tm-main :is(.el-content,.uk-panel) table :is(td,th){padding:0 15px;vertical-align:top;border:0;background:none;color:inherit;font-size:inherit;line-height:29px} [data-site] #tm-main :is(.el-content,.uk-panel) table td>p{margin:0} [data-site] #tm-main :is(.el-content,.uk-panel) table tr+tr td{padding-top:0} [data-site] #tm-main :is(.el-content,.uk-panel) table :is(td,th):first-child{padding-left:0} [data-site] #tm-main :is(.el-content,.uk-panel) table :is(td,th):last-child{padding-right:0} [data-site] #tm-main :is(.el-content,.uk-panel) table:has(td:nth-child(3)){width:auto;margin-left:auto;margin-right:auto;table-layout:auto} [data-site] #tm-main :is(.el-content,.uk-panel) table:has(td:nth-child(3)) :is(td,th){padding:6.5px 15px} /* LOCATIE-BOVENKOP: bovenkop boven de blokkop in de schrijfletter (Adobe ff-providence-sans-web-pro, licentie akkoord 5 nov), 40/48, 600, in --kleur-bovenkop van de locatie (zoals live). */ [data-site] #tm-main :is(.ab-pg-blok,.ab-hm-blokken) .el-meta{font-family:var(--font-accent);font-size:40px;line-height:48px;font-weight:600;color:var(--kleur-bovenkop,var(--kleur-accent))!important;text-transform:none;letter-spacing:0;margin:0!important} [data-site] #tm-main :is(.ab-pg-blok,.ab-hm-blokken) .el-meta+.el-title{margin-top:15px!important} /* LOCATIE-ANIMATIES (alle locaties): laadanimaties zoals live (custom.js zet kz-a/kz-in). Geen parallax in blokken. Animaties gebruiken translate/scale (los van transform), zodat ze niet botsen met UIkit. */ [data-site] :is(.ab-pg-blok,.ab-hm-blokken) [uk-parallax]{transform:none!important} @keyframes kzDown{from{opacity:0;translate:0 -20px}to{opacity:1;translate:0 0}} @keyframes kzUp{from{opacity:0;translate:0 50px}to{opacity:1;translate:0 0}} @keyframes kzLeft{from{opacity:0;translate:50px 0}to{opacity:1;translate:0 0}} @keyframes kzZoom{from{scale:.8}to{scale:1}} [data-site] .kz-a:is(.kz-down,.kz-up,.kz-left):not(.kz-in){opacity:0} [data-site] .kz-a.kz-in.kz-down{animation:kzDown 1s ease var(--kz-d,.3s) both!important} [data-site] .kz-a.kz-in.kz-up{animation:kzUp 1.2s ease both!important} [data-site] .kz-a.kz-in.kz-left{animation:kzLeft 2s ease .5s both!important} [data-site] .kz-a.kz-zoom:not(.kz-in){scale:.8} [data-site] .kz-a.kz-in.kz-zoom{animation:kzZoom 2s ease both!important} @media (prefers-reduced-motion:reduce){[data-site] .kz-a{animation:none!important;opacity:1!important;translate:none!important;scale:none!important}} /* BLOKKEN MET FOTO (volle breedte, alle sites): kaart in de normale flow i.p.v. absoluut gecentreerd. Zo bepaalt de hoogste van foto en kaart de hoogte van het blok en valt een lange kaart nooit over het vorige of volgende blok (bijv. Beleid kinderopvang). Kaart overlapt de foto horizontaal 10% (zoals live). */ @media (min-width:960px){ .ab-pg-blok:not(#_):not(:has(.bk-breedte-half)) .bk-row:has(.bk-media img,.bk-media iframe,.bk-media video){align-items:center} .ab-pg-blok:not(#_):not(:has(.bk-breedte-half)) .bk-row:has(.bk-media img,.bk-media iframe,.bk-media video)>.bk-tekst{position:relative;top:auto;right:auto;left:auto;transform:none;flex:none;width:50%;margin:0 0 0 -10%;padding-top:0;padding-bottom:0} .ab-pg-blok:not(#_):not(:has(.bk-breedte-half)):has(.bk-pos-rechts) .bk-row:has(.bk-media img,.bk-media iframe,.bk-media video)>.bk-tekst{margin:0 -10% 0 0} } /* Paginakop locaties: *accent*-deel in de accentkleur van de locatie (live: "Beleid kinderopvang" twee kleuren). De redacteur bepaalt het met *sterretjes* in het veld Paginakop; zonder sterretjes is de kop één kleur. */ [data-site] .ab-pg-paginakop:not(#_) span:not([class]){color:var(--kleur-accent)!important} /* Halve blokken met witte achtergrond: de witte band loopt over de hele breedte (niet alleen achter de halve kolom). Zoals live (Educto-logo). */ @media (min-width:960px){.uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit):has(.bk-breedte-half)::before{left:calc(100% + 15px)}} /* Locaties: lichtblauwe band eindigt met ronde hoeken boven een wit blok (live). */ [data-site] .uk-section-muted>.uk-container>.uk-grid:not(:first-child):has(.bk-bg-wit)::after{display:block} [data-site] .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit)+.uk-grid:has(.bk-bg-wit)::after{display:none} @media (min-width:960px){[data-site] .uk-section-muted>.uk-container>.uk-grid:has(.bk-bg-wit):has(.bk-breedte-half)::after{left:calc(100% + 15px)}} /* Home-intro locaties: zelfde plek en opmaak als live (tekst rechts uitgelijnd links, kop rechts; *accent* = nieuwe regel, zelfde grootte en kleur). */ @media (min-width:960px){[data-site] .ab-hm-blokken:not(#_):has(.bt-intro){padding-top:136px}} [data-site] .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid>*:last-child h2 span{display:block;font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important;margin:0!important;color:inherit!important} @media (min-width:960px){[data-site] .ab-hm-blokken:not(#_):has(.bt-intro) .uk-grid>*:last-child h2{padding-top:0}} /* LOCATIE-HOME-DECORATIES: lijntekening links en kiezel rechts bij de intro (live .decorations). Afbeeldingen per locatie in images/template/locatie/ (deco-lijn.png, deco-kiezel.png); ontbreekt een bestand, dan zie je niets. */ @media (min-width:960px){ [data-site] .ab-hm-blokken:not(#_):has(.bt-intro){position:relative;overflow:visible} [data-site] .ab-hm-blokken:not(#_):has(.bt-intro)::before{content:'';position:absolute;left:-85px;top:173px;width:659px;height:619px;background:url(../../../images/template/locatie/deco-lijn.png) 0 0/100% 100% no-repeat;pointer-events:none} [data-site] .ab-hm-blokken:not(#_):has(.bt-intro)::after{content:'';position:absolute;left:calc(674px + 39.29%);top:233px;width:526px;height:260px;background:url(../../../images/template/locatie/deco-kiezel.png) 0 0/100% 100% no-repeat;pointer-events:none} [data-site] .ab-hm-blokken:has(.bt-intro)~.ab-hm-blokken{position:relative;z-index:4} [data-site] #tm-main:has(.bt-intro){overflow-x:clip} } /* ========================================================================== ZOEKRESULTATEN (template "Zoekresultaten", com_finder.search) Gekleurd vlak achter de header, witte resultaatkaarten met "Meer"-knop. ========================================================================== */ [data-site] .ab-zk:not(#_){background:var(--kleur-accent);margin-top:-103px;padding:278px 0 150px} [data-site] .ab-zk-titel:not(#_){font-family:var(--font-kop);font-size:55px;line-height:66px;font-weight:700;color:#fff;margin:0 0 30px} [data-site] .ab-zk-form{display:flex;align-items:stretch;gap:10px;max-width:854px;margin:70px 0 0} [data-site] .ab-zk-input{flex:1;min-width:0;height:58px;box-sizing:border-box;margin:0;padding:15px;border:0;border-bottom:1px solid #e3e3e3;border-radius:0;background:#fff;color:var(--kleur-tekst);font:400 15px/18.75px var(--font-tekst);-webkit-appearance:none;appearance:none} [data-site] .ab-zk-input::placeholder{color:var(--kleur-tekst);opacity:.6} [data-site] .ab-zk-input:focus-visible{outline:3px solid var(--kleur-4,#fff);outline-offset:2px} [data-site] .ab-zk-knop{flex:none;min-width:100px;height:58px;margin:0;padding:0 25px;border:0;border-radius:30px;background:var(--kleur-knop,var(--kleur-primair));color:#fff;font:500 18px/16px var(--font-tekst);cursor:pointer} [data-site] .ab-zk-knop:hover{filter:brightness(1.1)} [data-site] .ab-zk-rij:not(#_){margin-top:30px} [data-site] .ab-zk-lijst:not(#_){margin:0;max-width:744px} [data-site] .ab-zk-lijst:not(#_) .uk-grid>*+*{margin-top:30px} [data-site] .ab-zk-leeg:not(#_){max-width:744px;box-sizing:border-box} [data-site] .ab-zk-lijst:not(#_) .el-item{background:#fff;padding:40px;border-radius:0;color:var(--kleur-tekst)} [data-site] .ab-zk-lijst:not(#_) .el-title{font-family:var(--font-kop);font-size:28px;line-height:33.6px;font-weight:700;color:var(--kleur-tekst);margin:0 0 30px!important} [data-site] .ab-zk-lijst:not(#_) .el-content{font-size:18px;line-height:28.8px;margin:0!important} [data-site] .ab-zk-lijst:not(#_) .el-content mark{background:none;color:inherit;font-weight:700} [data-site] .ab-zk-lijst:not(#_) .el-link{margin:30px 0 0!important;height:58px;line-height:58px;padding:0 25px;border-radius:30px} [data-site] .ab-zk-leeg:not(#_){background:#fff;padding:40px;margin:0;color:var(--kleur-tekst)} [data-site] .ab-zk-rij:has(.ab-zk-lijst) .ab-zk-leeg{display:none} @media(max-width:959px){ [data-site] .ab-zk:not(#_){margin-top:-70px;padding:130px 0 120px} [data-site] .ab-zk-titel:not(#_){font-size:34px;line-height:1.2} [data-site] .ab-zk-form{margin-top:30px} [data-site] .ab-zk-lijst:not(#_) .el-item,[data-site] .ab-zk-leeg:not(#_){padding:25px} [data-site] .ab-zk-lijst:not(#_) .el-title{font-size:23px;line-height:1.2;margin-bottom:15px!important} } /* ========================================================================== MOBIEL MENU: tweede niveau uitklappen (knop naast elk hoofditem, zie custom.js) ========================================================================== */ #tm-dialog-mobile .uk-nav-default>li.uk-parent{position:relative} #tm-dialog-mobile .uk-nav-default>li.uk-parent>a{padding-right:56px} #tm-dialog-mobile .mm-sub-knop{position:absolute;right:0;top:0;width:48px;height:48px;padding:0;margin:0;border:0;background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center} #tm-dialog-mobile .mm-sub-knop::before{content:'';width:12px;height:12px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s ease} #tm-dialog-mobile .kz-open>.mm-sub-knop::before{transform:translateY(3px) rotate(-135deg)} #tm-dialog-mobile .mm-sub-knop:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:8px} #tm-dialog-mobile .uk-nav-default>li.kz-open>.uk-nav-sub{display:block;padding:4px 0 14px 18px} #tm-dialog-mobile .uk-nav-default>li.kz-open>.uk-nav-sub a{display:block;padding:5px 0;text-decoration:none;font-family:var(--font-tekst);font-size:18px;line-height:1.4;font-weight:500;color:#fff} #tm-dialog-mobile .uk-nav-default>li.kz-open>.uk-nav-sub a:hover,#tm-dialog-mobile .uk-nav-sub li.uk-active>a{color:var(--kleur-2)} /* MOBIEL: home-tekstblokken en footer op smalle schermen */ @media (max-width:959px){ [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokken-row>.uk-grid{padding:40px 25px;border-radius:30px} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .el-title{font-size:23px;line-height:1.2;margin-bottom:20px!important} [data-site] .ab-hm-blokken:not(#_):has(.bt-tekst) .ab-hm-blokken-row{margin-bottom:30px!important} [data-site] .ab-hm-blokken:not(#_):has(.bt-kindcentra) :is(h1,h2,h3,.uk-h2,.uk-h3):not([uk-slider] *){font-size:28px;line-height:1.2} } /* footer-badge ("deel van Abbo") ook op mobiel tonen, iets kleiner */ @media (max-width:959px){ [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-row>*:last-child,[data-site] .ab-ft-footer:not(#_) .ab-ft-footer-image{display:block!important} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-row>*:last-child{width:110px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-image,[data-site] .ab-ft-footer:not(#_) .ab-ft-footer-image :is(.el-link,picture,img){width:110px;height:91px} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-image::after{width:142px;height:126px;top:-18px;left:-16px} [data-site] .ab-ft-footer:not(#_){padding-top:130px} } @media (max-width:639px){ [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-nav .uk-grid{grid-template-columns:minmax(0,1fr);row-gap:4px} } /* MOBIEL: tekstblokken zonder foto op pagina's (bijv. "Dit maakt ... bijzonder!") minder zijpadding */ @media (max-width:959px){ [data-site] .ab-pg-blok:not(#_):has(.bk-breedte-vol) .bk-row:not(:has(.bk-media img,.bk-media iframe,.bk-media video)) .bk-card{padding-left:25px!important;padding-right:25px!important} } /* MOBIEL: intro onder een headerfoto begint onder de "deel van abbo"-badge (de algemene 40px-regel voor #intro won hier) */ @media (max-width:959px){ [data-site] .ab-pg-header+div#intro.uk-section:not(#_){padding-top:90px!important} } /* MOBIEL: headerknoppen op Home naast elkaar en compacter */ @media (max-width:959px){ [data-site] .ab-hm-header-button:not(#_)>.uk-grid,[data-site] .ab-hm-header-button:not(#_).uk-grid{display:flex;flex-wrap:wrap;gap:10px;margin-left:0} [data-site] .ab-hm-header-button:not(#_) .uk-grid>*{padding-left:0;margin-top:0!important} [data-site] .ab-hm-header-button:not(#_) .uk-button{height:48px;line-height:46px;padding:0 18px;font-size:16px} } /* KOP ZONDER FOTO (locaties): standaard in de accentkleur van de locatie (live: oranje band), tenzij de redacteur een kleur kiest */ [data-site] .ab-pg-header-zonder-foto:not(#_):not(:has(.hk-kleur-1,.hk-kleur-2,.hk-kleur-3,.hk-kleur-4,.hk-licht,.hk-wit)){background:var(--kleur-accent)} /* FORMULIERPAGINA'S (contact onderwijs/kinderopvang): intro-afbeelding links, formulier als witte kaart rechts. De afbeelding is de "Intro-afbeelding" van het artikel; het Pagina-template toont hem alleen als de artikeltekst een RSForm bevat (conditie). */ [data-site] .ab-pg-paginakop-en-intro:not(#_):has(#userForm){background:var(--kleur-licht);padding:70px 0 100px!important} [data-site] .ab-pg-paginakop-en-intro:has(#userForm) .uk-panel:has(>#userForm),[data-site] .ab-pg-intro-tekst:has(#userForm){margin:0} [data-site] .ab-pg-intro-tekst #userForm{background:#fff;border-radius:2.6vw;padding:45px 50px;margin-top:0} [data-site] .ab-pg-paginakop-en-intro:has(#userForm) .ab-pg-intro-beeld:not(#_){margin:0!important} [data-site] .ab-pg-paginakop-en-intro:has(#userForm) .ab-pg-intro-beeld img{display:block;width:100%;height:auto} @media (min-width:960px){ [data-site] #intro.ab-pg-paginakop-en-intro:has(#userForm):has(.ab-pg-intro-beeld)>.uk-container{max-width:1326px;padding:0 15px;box-sizing:border-box} [data-site] .ab-pg-paginakop-en-intro:has(#userForm) .uk-grid>*:has(>.ab-pg-intro-beeld){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:30px;align-items:center;width:100%} [data-site] .ab-pg-paginakop-en-intro:has(#userForm) .uk-grid>*:has(>.ab-pg-intro-beeld)>*{grid-row:1;margin:0!important} [data-site] .ab-pg-paginakop-en-intro:has(#userForm) .uk-grid>*:has(>.ab-pg-intro-beeld)>:not(.ab-pg-intro-beeld):not(:has(#userForm)){position:absolute} [data-site] .ab-pg-paginakop-en-intro:has(#userForm) .ab-pg-intro-beeld:not(#_){grid-column:1} [data-site] .ab-pg-paginakop-en-intro:has(#userForm) .uk-grid>*:has(>.ab-pg-intro-beeld)>:has(#userForm){grid-column:2} } @media (max-width:959px){ [data-site] .ab-pg-paginakop-en-intro:not(#_):has(#userForm){padding:40px 0 60px!important} [data-site] .ab-pg-paginakop-en-intro:has(#userForm) .ab-pg-intro-beeld:not(#_){width:220px;margin:0 auto 20px!important} [data-site] .ab-pg-intro-tekst #userForm{padding:30px 20px;border-radius:30px} } /* Locaties: geen banner-lines-sierlijn in de kop zonder foto (live heeft die niet) */ /* Kop zonder foto (locaties): scroll-pijl verder van de onderrand, want de volgende sectie schuift met zijn ronde hoek over de band */ [data-site] .ab-pg-scroll-pijl-2:not(#_){bottom:90px} [data-site] .ab-pg-header-zonder-foto:not(#_):not(:has(.hk-intro)){padding-bottom:190px} @media (max-width:959px){ [data-site] .ab-pg-scroll-pijl-2:not(#_){bottom:65px} [data-site] .ab-pg-header-zonder-foto:not(#_):not(:has(.hk-intro)){padding-bottom:165px} } /* MOBIEL: in "Paginakop en intro" de paginakop boven de introtekst */ @media (max-width:959px){ [data-site] .ab-pg-paginakop-en-intro:not(#_) .uk-grid:has(>*>.ab-pg-paginakop){display:flex;flex-direction:column} [data-site] .ab-pg-paginakop-en-intro:not(#_) .uk-grid>*:has(>.ab-pg-paginakop){order:-1;margin-top:0!important} [data-site] .ab-pg-paginakop-en-intro:not(#_) .uk-grid>*:has(>.ab-pg-paginakop)+*{margin-top:20px!important} [data-site] .ab-pg-paginakop-en-intro:not(#_) .uk-grid>*:has(>.ab-pg-intro-tekst){margin-top:20px!important} } /* FOOTER SOCIALS (locaties): hover in kleur 1, zoals live (geen wiebel-animatie, besluit Jeroen) */ [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-social .uk-icon-button{transition:color .25s} [data-site] .ab-ft-footer:not(#_) .ab-ft-footer-social .uk-icon-button:hover{color:var(--kleur-1)} /* ===== Team kinderopvang per groep (blok-type team-kinderopvang), 5 nov ===== */ [data-site] .ab-pg-teamgroep:not(#_){margin-top:60px} [data-site] .ab-pg-teamgroep:not(#_) + .ab-pg-teamgroep{margin-top:50px} [data-site] .ab-pg-teamgroep-kop:not(#_){font-family:var(--font-kop);font-size:28px;line-height:1.2;margin:0 0 25px} [data-site] .ab-pg-teamgroep-grid:not(#_) .uk-grid{margin-left:-20px} [data-site] .ab-pg-teamgroep-grid:not(#_) .uk-grid>*{padding-left:20px} [data-site] .ab-pg-teamgroep-grid:not(#_) .uk-grid>.uk-grid-margin{margin-top:20px} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-item{background:#fff;border-radius:2.6vw;overflow:hidden;display:flex;flex-direction:column;padding-bottom:28px} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-image{display:block;width:100%;height:340px;object-fit:cover;object-position:center top;border-radius:2.6vw 2.6vw 0 0;margin:0} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-title{font-family:var(--font-kop);font-size:23px;line-height:1.2;margin:22px 25px 0} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-meta{font-family:var(--font-kop);font-size:23px;line-height:1.2;text-transform:none;letter-spacing:0;margin:2px 25px 0!important} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-title{margin-top:22px!important} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-image.kz-a{scale:1!important;animation:none!important;opacity:1!important} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-link{margin:14px 25px 0;color:var(--kleur-1);font-weight:700} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-item:not(:has(.el-image))::before{content:"";display:block;height:340px;background:var(--kleur-1);opacity:.15;border-radius:2.6vw 2.6vw 0 0} @media (max-width:959px){ [data-site] .ab-pg-teamgroep-grid:not(#_) .el-item{border-radius:25px} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-image,[data-site] .ab-pg-teamgroep-grid:not(#_) .el-item:not(:has(.el-image))::before{border-radius:25px 25px 0 0} } @media (max-width:639px){ [data-site] .ab-pg-teamgroep:not(#_){margin-top:40px} [data-site] .ab-pg-teamgroep-kop:not(#_){font-size:24px} [data-site] .ab-pg-teamgroep-grid:not(#_) .uk-grid{margin-left:-12px} [data-site] .ab-pg-teamgroep-grid:not(#_) .uk-grid>*{width:50%;padding-left:12px} [data-site] .ab-pg-teamgroep-grid:not(#_) .uk-grid>.uk-grid-margin{margin-top:12px} [data-site] .ab-pg-teamgroep-grid:not(#_) .uk-grid>:nth-child(-n+2){margin-top:0} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-item{border-radius:18px;padding-bottom:16px} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-image,[data-site] .ab-pg-teamgroep-grid:not(#_) .el-item:not(:has(.el-image))::before{height:190px;border-radius:18px 18px 0 0} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-title,[data-site] .ab-pg-teamgroep-grid:not(#_) .el-meta{font-size:16px;margin-left:14px!important;margin-right:14px!important} [data-site] .ab-pg-teamgroep-grid:not(#_) .el-title{margin-top:12px!important} } /* DOWNLOADS-BLOK (alle sites): kop met blauw blobje en downloadicoon ervoor (zie regels hierboven), daaronder de tekst van het blok. Een lijst met links in die tekst krijgt de opmaak van de downloadlijst van de hoofdsite: lijn boven, per document een rij met een downloadicoon rechts. */ .ab-pg-downloads-tekst:not(#_){margin-top:30px!important} .ab-pg-downloads-tekst:not(#_)>p{font-size:18px;line-height:1.5;margin:0 0 20px} .ab-pg-downloads-tekst:not(#_)>ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--kleur-tekst)} .ab-pg-downloads-tekst:not(#_)>ul+p{margin-top:30px} .ab-pg-downloads-tekst:not(#_)>ul>li{margin:0;padding:0;border-bottom:1px solid #e3e3e3;position:static} .ab-pg-downloads-tekst:not(#_)>ul>li::before{display:none} .ab-pg-downloads-tekst:not(#_)>ul>li>a{display:flex;align-items:center;justify-content:space-between;min-height:70px;padding:12px 0;box-sizing:border-box;font-size:18px;line-height:1.3;font-weight:500;color:var(--kleur-tekst);text-decoration:none;overflow-wrap:anywhere} .ab-pg-downloads-tekst:not(#_)>ul>li>a::after{content:"";flex:0 0 20px;width:20px;height:17px;margin:0 26px 0 46px;background:currentColor;-webkit-mask:var(--abbo-ico-download) 50%/contain no-repeat;mask:var(--abbo-ico-download) 50%/contain no-repeat} .ab-pg-downloads-tekst:not(#_)>ul>li>a:hover{color:var(--kleur-primair)} @media (max-width:959px){ .ab-pg-downloads-tekst:not(#_)>ul>li>a{font-size:16px} .ab-pg-downloads-tekst:not(#_)>ul>li>a::after{margin:0 10px 0 30px} .ab-pg-downloads-tekst:not(#_)>p{font-size:16px} } /* lange kop in een Downloads-blok mag op mobiel afbreken in plaats van buiten de kaart te lopen */ .ab-pg-blokkop-3:not(#_){overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}