:root { /* Basis kleuren */ --oranje: #F29200; --geel: #FABA00; --grijs: #C9C9C9; --zwart: #383838; --oranje-knop: #F05D14; /* Pastel achtergrond kleuren */ /* hier die pastel kleuren */ --pastel-perzik: #FFCC99; --pastel-perzik-licht: #FFD8A8; --pastel-geel-licht: #FFE680; --pastel-tarwe: #F5DEB3; --pastel-oranje-bg: #FFF2E6; --pastel-bg-zacht: #FFFAF0; /* Typografie */ --font-familie: "Nunito Sans", sans-serif; --font-size-klein: 16px; --font-size-knop: 18px; --font-size-h3: 26px; --font-size-quote: 28px; --font-size-h2: 36px; --font-size-h1: 44px; --font-size-hero: 56px; --line-height-klein: 22px; --line-height-knop: 26px; --line-height-h3: 32px; --line-height-quote: 40px; --line-height-h2: 48px; --line-height-h1: 66px; --line-height-hero: 70px; /* Supermenu: open vs. sluiten (sluiten trager = rustiger bij navigatie) */ --mega-open-duration: 280ms; --mega-close-duration: 480ms; --mega-ease-open: cubic-bezier(0.4, 0, 0.2, 1); --mega-ease-close: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { :root { --mega-open-duration: 0.01ms; --mega-close-duration: 0.01ms; } } @font-face { font-family: 'Nunito'; src: url('../fonts/Nunito-Regular.woff2') format('woff2'), url('../fonts/Nunito-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'NunitoBold'; src: url('../fonts/Nunito-Bold.woff2') format('woff2'), url('../fonts/Nunito-Bold.woff') format('woff'); font-weight: 500; font-style: normal; } html, body { font-size: 18px; font-family: Nunito; overflow-x: hidden !important; color: var(--zwart); } /* Voorkom transitions tijdens page load/unload — géén padding/marges hier: die zouden bij elke geneste node optellen en een zichtbare “schok” geven zodra .preload van wordt gehaald. Bij uitgaande links vanuit megamenu zet script.js geen .preload (anders knapt het supermenu dicht zonder animatie). */ html.preload *, html.preload *::before, html.preload *::after { transition: none !important; animation: none !important; } /* ============================================= GLOBAAL — overflow fix (voorkomt horizontaal scrollen) ============================================= */ * { box-sizing: border-box; } /* Voorkom dat brede elementen de pagina uitrekken */ .footer, .artikel-header, .om-baan.baan-type-1, .socket { max-width: 100vw !important; } .om-baan { position: relative; padding: 3.055555rem 0 0 0; } h1, h2, h3, h4, h5, h6 { font-family: 'NunitoBold'; } h1 { font-size: 2.94rem !important; line-height: 3.6rem !important; } h2 { font-size: 2.44rem !important; line-height: 2.8rem !important;; } h3 { font-size: 1.44rem !important; } .projecten h3, .projecten h4, .projecten h5, .projecten h6, .com-content-article__body h3, .com-content-article__body h4, .com-content-article__body h5, .com-content-article__body h6{ margin-top: 2rem; } p { } .gx-custom { --bs-gutter-x: 2.888888888888889rem; } a { font-size: 1.05rem; color: var(--zwart); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(0, 0, 0, 0.3); } /*blockquote {*/ /* padding: 1rem 1rem 0.1rem 1rem;*/ /* !*quotes: "“" "”" "‘" "’";*!*/ /* font-size: 1.2em;*/ /* position: relative;*/ /*}*/ /*blockquote::before {*/ /* content: "";*/ /* border-left: 3px solid var(--oranje-knop);*/ /* position: absolute;*/ /* height: 100%;*/ /* left: 0;*/ /* top: 0;*/ /*}*/ /* blockquote::before, blockquote::after { font-size: 2em; color: grey; } blockquote::before { content: open-quote; } blockquote::after { content: close-quote; } */ */ .om-baan ul, .artikel-header ul { list-style-position: outside; padding-left: 1rem; } .project-secties ul, .com-content-article__body ul { list-style-position: outside; padding-left: 1rem; } .project-rechts { margin-top: 4rem; } /* buttons */ .btn-primary a { color: white; text-decoration: none; } .btn-primary:hover a, .btn-primary a:hover { color: var(--oranje-knop); } .btn-primary { display: inline-flex !important; cursor: pointer; align-items: center !important; gap: 0.8rem !important; background-color: var(--oranje-knop) !important; border: solid var(--oranje-knop) 1px; color: white !important; font-weight: 700 !important; padding: 0.3rem 1.11rem !important; border-radius: 6px !important; text-decoration: none !important; width: fit-content !important; transition: background-color 0.2s ease !important; font-size: 1.05rem; } .btn-primary:hover { background: white !important; color: var(--oranje-knop) !important; border: solid var(--oranje-knop) 1px; cursor: pointer; } .btn-primary:after { content: ""; display: inline-block; width: 10px; height: 11px; margin-left: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23ffffff'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; } .btn-primary:hover:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23f05d14'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23f05d14'/%3E%3C/g%3E%3C/svg%3E"); } .btn-secondary { background: transparent; border: solid var(--zwart) 2px; border-radius: 6px; color: var(--zwart); font-size: 19px; padding: 4px 25px; transition: 0.3s; align-items: center; justify-content: center; font-weight: 600; text-decoration: none; } .mod-articles-category-button { margin-top: 0.7rem !important; } .btn-secondary:hover { background: var(--zwart) !important; color: white !important; cursor: pointer; } .btn-secondary:after { content: ""; display: inline-block; width: 10px; height: 11px; margin-left: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23000000'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; transition: 0.3s; } .btn-secondary:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23ffffff'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"); } .btn-tertiary, .nieuws-nav-link--prev { font-weight: 600; color: var(--zwart); text-decoration: none; align-items: center; transition: 0.5s; } .btn-tertiary:hover, .nieuws-nav-link--prev:hover { color: var(--oranje-knop); text-decoration: underline; } img.prev { rotate: 180deg; } .btn-tertiary::after { content: ""; display: inline-block; width: 10px; height: 11px; margin-left: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23000000'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; transition: 0.3s; } .btn-tertiary:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cg transform='translate(9.872) rotate(90)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' fill='%23F05D14'/%3E%3C/g%3E%3C/svg%3E"); } ul, ol { padding-left: 16px; list-style-position: outside; } img { border-radius: 10px; } .oranje-tekst { color: var(--oranje-knop); } /*Scroll to top */ .scroll-top { display: none; width: 50px; height: 50px; position: fixed; left: 30px; bottom: 120px; cursor: pointer; border-radius: 10px; z-index: 25; } /* ============================================= WCAG — SKIP LINK ============================================= */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--zwart); color: var(--wit); padding: 12px 20px; z-index: 9999; font-weight: 700; text-decoration: none; border-radius: 0 0 8px 0; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ============================================= WCAG — GLOBALE FOCUS STIJLEN ============================================= */ :focus-visible { outline: 3px solid #005FCC; outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* ============================================= Baan stylen ============================================= */ .artikel-header.honingraat-header-rechts { width: auto; background-repeat: no-repeat; background-image: url(/images/honingraat/honingraat.png); background-position: right; background-size: 333px; } .artikel-header.honingraat-header-links { width: auto; background-repeat: no-repeat; background-image: url(/images/honingraat/honingraat-hero.png); background-position: left; background-size: 333px; } .honingraat-honingraat-doorzichtig-v1.honingraat-positie-links::before, .honingraat-honingraat-doorzichtig-v2.honingraat-positie-links::before, .honingraat-honingraat-doorzichtig-v3.honingraat-positie-links::before, .honingraat-honingraat.honingraat-positie-links::before { background-repeat: no-repeat; background-position: right; content: ""; position: absolute; transform: rotate(-180deg); width: 541px; height: 446px; z-index: -1; } .honingraat-honingraat-doorzichtig-v1.honingraat-positie-links::before { background-image: url(/images/honingraat/honingraat-variant1.png); transform: rotate(0deg); background-position: left; top: 0; } .honingraat-honingraat-doorzichtig-v2.honingraat-positie-links::before { background-image: url(/images/honingraat/honingraat-variant2.png); transform: rotate(0deg); left: 0; background-position: left; height: 484px; } .honingraat-honingraat-doorzichtig-v3.honingraat-positie-links::before { background-image: url("/images/honingraat/honingraat-variant3.png"); } .honingraat-honingraat.honingraat-positie-links::before { background-image: url("/images/honingraat/honingraat.png"); } /*Rechts*/ .honingraat-honingraat-doorzichtig-v1.honingraat-positie-rechts::before, .honingraat-honingraat-doorzichtig-v2.honingraat-positie-rechts::before, .honingraat-honingraat-doorzichtig-v3.honingraat-positie-rechts::before, .honingraat-honingraat.honingraat-positie-rechts::before { background-repeat: no-repeat; background-position: left; content: ""; position: absolute; transform: rotate(180deg); width: 541px; height: 446px; z-index: -1; } .honingraat-honingraat-doorzichtig-v1.honingraat-positie-rechts::before { background-image: url("/images/honingraat/honingraat-variant1.png"); right: 0px; } .honingraat-honingraat-doorzichtig-v2.honingraat-positie-rechts::before { background-image: url("/images/honingraat/honingraat-variant2.png"); right: 0; height: 484px; } .honingraat-honingraat-doorzichtig-v3.honingraat-positie-rechts::before { background-image: url(/images/honingraat/honingraat-variant3.png); background-position: right; height: 484px; transform: rotate(0); right: 0; } .honingraat-honingraat.honingraat-positie-rechts::before { background-image: url("/images/honingraat/honingraat.png"); transform: rotate(0deg); background-position: right; } /*Samen werken aan oplossingen honingraat*/ .baan-style-licht-oranje { background-color: #FFF3E8; z-index: 1; padding: 3rem; } .honingraat-honingraat.honingraat-positie-rechts::before { top: -60px; width: 100%; right: 0; height: 446px; } /* Focus op donkere achtergronden (socket, gradient kaartjes) */ .socket nav.footermenu ul li a:focus-visible, ul.mod-articles-items.mod-articles-grid.grid-cols-2 .mod-articles-title a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 4px; } /* Focus op ronde knoppen */ footer.container a[href*="linkedin"]:focus-visible { outline: 3px solid #005FCC; outline-offset: 4px; border-radius: 8px; } .com-tags-kalender-link:focus-visible { outline: 3px solid #005FCC; outline-offset: 4px; border-radius: 20px; } /* Overlay op de pagina achter het menu */ body::after { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 500; opacity: 0; visibility: hidden; pointer-events: none; /* Sluiten: zelfde tempo als .mod-menu__sub (langzamer dan openen) */ transition: opacity var(--mega-close-duration) var(--mega-ease-close), visibility 0ms linear var(--mega-close-duration); } body:has(button.mod-menu__toggle-sub[aria-expanded="true"])::after { background: rgb(0 0 0 / 66%); opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--mega-open-duration) var(--mega-ease-open), visibility 0ms linear 0ms; } /* ============================================= HEADER / NAVBAR ============================================= */ .header { display: grid; grid-template-columns: 85px 1fr; grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; z-index: 132; position: relative; } .header-video.ratio.ratio-16x9 { border-radius: 25px; overflow: hidden; width: 512px; height: 275px; } .header .logo { grid-area: 1 / 1 / 3 / 2; } .header .menu { grid-area: 2 / 2 / 3 / 3; display: flex; justify-content: flex-end; align-items: center; margin-top: 1rem; } .header nav.topmenu { grid-area: 1 / 2 / 2 / 3; margin-top: 30px; } header.site-header.autohide:has(button.mod-menu__toggle-sub[aria-expanded="true"]) .header { background: #fff2e6; transition: background 0.3s ease, padding 0.3s ease; } header.site-header.autohide:has(button.mod-menu__toggle-sub[aria-expanded="true"]) { background: #fff2e6; } /* header wordt de positie-anker */ .site-header { position: relative; } .site-header .header { position: unset; } /* Ruimte reserveren als hoofdheader fixed is (koppeling met AutoHide in script.js) */ .site-header-spacer[data-for="mainHeader"] { display: block; width: 100%; height: 0; overflow: hidden; pointer-events: none; } .site-header-spacer[data-for="mainHeader"].active { height: var(--element-height, 170px); } /* li.deeper.parent mag NIET position:relative zijn */ .nav-item.deeper.parent { position: static; } /* De submenu breekt uit naar header-breedte*/ /* Override Joomla's eigen display:none op .mod-menu__sub */ .mod-menu__sub { display: block !important; /* altijd zichtbaar in DOM */ position: absolute; left: -3px; right: 0; width: 100vw; top: 100%; z-index: 1000; background: #fff; /* Paneel zelf scrollbaar als inhoud niet in viewport past */ max-height: calc(100dvh - 170px); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; /* Naar dicht: langzamer + zachte curve (sync met body::after) */ transition: opacity var(--mega-close-duration) var(--mega-ease-close), transform var(--mega-close-duration) var(--mega-ease-close), visibility 0ms linear var(--mega-close-duration); } .mod-menu__toggle-sub[aria-expanded="true"] + .mod-menu__sub { /* geen display: block meer nodig */ visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity var(--mega-open-duration) var(--mega-ease-open), transform var(--mega-open-duration) var(--mega-ease-open), visibility 0ms linear 0ms; } /* Topmenu: Contact | Prikbord */ ul#mod-menu140 { display: flex; align-items: center; justify-content: flex-end; margin-right: 25px; gap: 0; list-style: none; padding: 0; margin-bottom: 10px; } ul#mod-menu140 li { display: flex; align-items: center; } li.nav-item.item-194 { padding-right: 20px; margin-right: 20px; position: relative; } li.nav-item.item-194::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 12px; /* hoogte van het lijntje */ width: 2px; background-color: var(--zwart); /* of var(--grijs) */ } ul#mod-menu140 li a { color: var(--zwart); text-decoration: none; } ul#mod-menu140 li a:hover { color: var(--oranje-knop); } /* Hoofdmenu */ ul#mod-menu1 { display: flex; justify-content: space-around; width: 80%; } ul#mod-menu1 > li > a, ul#mod-menu1 > li > button.mod-menu__toggle-sub { color: var(--zwart); text-decoration: none; font-weight: 700; font-size: 24px; display: inline-flex; align-items: center; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; transition: 0.3s; border-bottom: solid transparent 1px; } /* Pijltje naar beneden */ ul#mod-menu1 > li > a::after, ul#mod-menu1 > li > button.mod-menu__toggle-sub::after { content: ""; display: inline-block; width: 19px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; margin-top: 5px; margin-left: 4px; transition: 0.3s; } ul#mod-menu1 > li > a:hover::after, ul#mod-menu1 > li > button.mod-menu__toggle-sub:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='none' stroke='%23E85C00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); } ul#mod-menu1 > li > a:hover, ul#mod-menu1 > li > button.mod-menu__toggle-sub:hover { color: var(--oranje-knop); border-bottom: solid var(--oranje-knop) 1px; } /* Actief menu item */ ul#mod-menu1 > li.active > a, ul#mod-menu1 > li.active > button.mod-menu__toggle-sub, ul#mod-menu1 > li > button.mod-menu__toggle-sub[aria-expanded="true"] { background-color: transparent; color: var(--oranje-knop) !important; border-bottom: solid var(--oranje-knop) 1px !important; position: relative; } /* Pijltje oranje bij actief/open */ ul#mod-menu1 > li.active > a::after, ul#mod-menu1 > li.active > button.mod-menu__toggle-sub::after, ul#mod-menu1 > li > button.mod-menu__toggle-sub[aria-expanded="true"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' fill='none' stroke='%23E85C00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important; } /* ::before verwijderen */ ul#mod-menu1 > li.active > a::before, ul#mod-menu1 > li.active > button.mod-menu__toggle-sub::before, ul#mod-menu1 > li > button.mod-menu__toggle-sub[aria-expanded="true"]::before { display: none; } .header .logo img { width: auto; height: auto; max-width: 8.5rem; margin-top: 2rem; position: absolute; z-index: 999; transform: scale(1); transform-origin: top left; opacity: 1; transition: transform 0.64s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.64s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease; } /* HEADER - hogere z-index dan megamenu */ header.site-header { position: relative; z-index: 1000; overflow: visible; /* zodat megamenu zichtbaar blijft buiten header */ background: #fff; transition: all 0.3s ease; height: 170px; } /* Auto-hide / sticky: klassen zet AutoHide (script.js). Zonder deze regels deed .is-hidden niets. */ header.site-header.autohide.is-sticky { position: fixed; top: 0; left: 0; right: 0; width: 100%; box-sizing: border-box; transform: translate3d(0, 0, 0); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.38s ease; box-shadow: 0 1px 0 rgba(56, 56, 56, 0.08); } header.site-header.autohide.is-sticky.is-hidden { transform: translate3d(0, -100%, 0); box-shadow: none; pointer-events: none; } /* Zorg dat er geen "mini puntje" van het overhangende logo zichtbaar blijft. */ header.site-header.autohide.is-sticky.is-hidden .header .logo img { transform: translateY(-170%) scale(0.82); margin-top: 0; opacity: 0; transition: transform 0.24s cubic-bezier(0.4, 0, 1, 1), margin-top 0.24s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s linear; } /* Bij terugkomst op scroll omhoog weer zichtbaar in overhangende positie. */ header.site-header.autohide.is-sticky:not(.is-hidden) .header .logo img { opacity: 1; } @media (prefers-reduced-motion: reduce) { header.site-header.autohide.is-sticky { transition: none; } } header.site-header.autohide:has(button.mod-menu__toggle-sub[aria-expanded="true"]) .header .logo img { transform: scale(0.65); } .header .menu li { padding: 0 0.55rem; } #searchButton { width: 50px; cursor: pointer; margin-left: 15px; display: block; overflow: hidden; white-space: nowrap; } #searchButton::before { content: " "; background-image: url(../images/search.svg); background-size: contain; width: 22px; height: 22px; float: left; background-repeat: no-repeat; } #finderModal .js-finder-searchform { position: absolute; } #search-result-list a.result__title-link { color: var(--zwart); text-decoration: underline; font-size: 1.2rem; font-weight: bold; } #search-result-list a.result__title-link:hover { color: var(--oranje-knop); } .com-finder__explained a { color: var(--oranje-knop); } .img-fluid { width: 512px; height: 271px; object-fit: cover; border-radius: 20px; } .header-image { width: 100%; margin-top: 15px; } /* */ /*.row.mod-articles-items.mod-articles-grid.grid-cols-4.mod-list .mod-articles-item {*/ /* height: 300px;*/ /*}*/ /* ============================================= MEGA MENU ============================================= */ /* Sluit de mega menu expliciet uit van View Transitions */ .mod-menu__sub { view-transition-name: none; } /* Of: geef de header een eigen transition-name zodat hij apart behandeld wordt */ .site-header { view-transition-name: site-header; } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } ::view-transition-old(root) { animation: 150ms ease fade-out; } ::view-transition-new(root) { animation: 150ms ease fade-in; } /* Header apart: geen fade, gewoon direct */ ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; } /* MEGAMENU - onder de volledige header */ .megamenu-modules { background-color: #fff; z-index: 998; padding: 2rem 0; /* position: absolute; left: 50.5%; right: 50%; top: 190px; margin-left: -50vw; margin-right: -50vw; */ } .megamenu-modules.megamenu-watwedoen .mod-articles-items { padding-top: 0.5rem; position: relative; padding-bottom: 3rem; } .megamenu-watwedoen .custom { padding: 18px 0; } .megamenu-watwedoen .custom p, .nieuws-menu-titel { font-weight: 100; font-size: 1.2rem; } .nieuws-menu-titel { margin-bottom: 2rem; } .megamenu-modules.megamenu-nieuws .om-megamenu { display: flex; } .megamenu-modules .moduletable.leesluisterkijk p a { display: flex !important; align-items: center !important; justify-content: flex-start; padding: 19px 0px !important; text-decoration: none !important; border-bottom: solid 1px var(--grijs); color: var(--zwart) !important; font-size: 18px; font-weight: 600 !important; transition: 0.4s; margin-bottom: 0.22rem; } .moduletable.leesluisterkijk { padding-right: 52px; } .megamenu-modules .moduletable.leesluisterkijk p a::after { content: ""; display: inline-block; width: 10px; height: 11px; margin-left: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23000000'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; transition: 0.3s; } .megamenu-modules .moduletable.leesluisterkijk p a:hover { background-color: white !important; color: var(--oranje-knop) !important; transition: 0.4s; } .megamenu-modules .moduletable.leesluisterkijk p a:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23E87722'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23E87722'/%3E%3C/g%3E%3C/svg%3E"); } .gx-custom.om-megamenu > .moduletable.col-md-9 > p:first-child { font-size: 1.2rem; font-weight: 100; } /* 29-03-2026 .megamenu-modules .row.mod-articles-items { display: grid !important; margin: 0px -45px !important; padding-top: 1.5rem; width: 100% !important; box-sizing: border-box; padding-bottom: 3rem; font-size: 1rem; font-weight: 100; padding-top: 40px; } .hoe-wij-werken .mod-articles-item { width: 396px !important; height: 244px !important; margin-left: 17px; } */ .menu-blokje a.mod-articles-link { font-size: 1.44rem; } .row.hoe-wij-werken .menu-blokje:nth-child(1) .mod-articles-item { background-color: var(--geel) !important; border: none !important; } .row.hoe-wij-werken .menu-blokje:nth-child(2) .mod-articles-item { background-color: var(--oranje) !important; border: none !important; } .row.hoe-wij-werken .menu-blokje:nth-child(3) .mod-articles-item { background-color: var(--grijs) !important; border: none !important; } .hoe-wij-werken p { font-weight: 100; } ul#mod-menu1-submenu2 { list-style: none; } /* .megamenu-modules .col-md-4 { float: none !important; width: auto !important; padding: 0 !important; display: flex; flex-direction: column; } .megamenu-modules article.mod-articles-item { border: 1.5px solid #ddd; border-radius: 20px; display: flex; flex-direction: column; height: 300px; background: #fff; transition: box-shadow 0.2s ease; width: 290px; padding: 15px; } */ .megamenu-modules .mod-articles-item-content picture img { width: 100%; height: 140px; object-fit: cover; display: block; } .default-item picture { height: 100%; } .default-item picture img { height: 100% !important; } .default-item img { margin-bottom: 0px; height: 100% !important; } .megamenu-watwedoen.megamenu-modules .mod-articles-item-content { padding: 1.2rem; } .mod-articles-item-content p { font-weight: 100; font-size: 1rem; } .megamenu-modules .mod-articles-item-content { display: flex; flex-direction: column; flex: 1; } .megamenu-overelaa .koptekst { display: flex; padding: 18px 0px; } .megamenu-overelaa .koptekst p { font-weight: 100; font-size: 1.2rem; } .megamenu-overelaa .mod-articles-item-content { padding: 1.2rem; } .megamenu-modules h4.mod-articles-title a:hover { text-decoration: underline; } .megamenu-modules p.readmore { margin-top: auto; height: 25px; } /*drie kaartjes naast elkaar */ /* Wrapper */ .mod-webdeltarepeater04.row { gap: 2.77rem; position: relative; } /*Eerste module in baan omhoog halen op home*/ .home-pagina .art-banen-before-component .om-baan:first-child { top: -10rem; margin-bottom: -10rem; position: relative; } /* Kaart */ .mod-webdeltarepeater04__item { background: #fff; border-radius: 20px; padding: 1.11rem 1.94rem; display: flex !important; flex-direction: column !important; align-items: center; /* ← gecentreerd */ text-align: center; /* ← tekst gecentreerd */ box-shadow: 0 18px 18px rgba(0, 0, 0, 0.07); flex: 1; padding-top: 2.77rem; aspect-ratio: auto; } /* Icoon groter */ .mod-webdeltarepeater04__media { margin-bottom: 1.11rem; width: 100%; display: flex; justify-content: center; } .mod-webdeltarepeater04__media img { width: 80%; height: 7.7rem; /* ← vaste hoogte, allemaal gelijk */ object-fit: contain; } /* Titel */ .mod-webdeltarepeater04__titel { font-size: 0.55rem; font-weight: 700; margin-bottom: 0.44rem; } /* Subtekst */ .mod-webdeltarepeater04__tekst { line-height: 1.5; margin-bottom: auto; font-size: 1.1rem; } /* Onderschrift */ .mod-webdeltarepeater04__onderschrift small { font-size: 1.2rem; /* ← 1.8rem */ color: #bbb; letter-spacing: 0.02em; } .mod-webdeltarepeater04__onderschrift small { font-size: 1rem; color: #bbb; letter-spacing: 0.02em; font-weight: 600; } /* ============================================= WAT WE DOEN — 4 kaartjes (col-md-3) ============================================= */ .mod-articles-items .menu-blokje:nth-child(1) .mod-articles-item { background-color: #FFF2E6; border: none; } .mod-articles-items .menu-blokje:nth-child(2) .mod-articles-item { background-color: #F1F1F1; border: none; } .mod-articles-items .menu-blokje:nth-child(3) .mod-articles-item { background-color: #F5DEB3; border: none; } .mod-articles-items .menu-blokje:nth-child(4) .mod-articles-item { background-color: #FFE680; border: none; } .nieuws-weergave .mod-articles-item a.btn.btn-secondary { position: absolute; bottom: 16px; } .megamenu-nieuws .mod-articles-items .menu-blokje:nth-child(1) .mod-articles-item, .megamenu-nieuws .mod-articles-items .menu-blokje:nth-child(2) .mod-articles-item, .megamenu-nieuws .mod-articles-items .menu-blokje:nth-child(3) .mod-articles-item, .megamenu-nieuws .mod-articles-items .menu-blokje:nth-child(4) .mod-articles-item, .om-baan .mod-articles-items .menu-blokje:nth-child(1) .mod-articles-item, .om-baan .mod-articles-items .menu-blokje:nth-child(2) .mod-articles-item, .om-baan .mod-articles-items .menu-blokje:nth-child(3) .mod-articles-item, .om-baan .mod-articles-items .menu-blokje:nth-child(4) .mod-articles-item, .artikel-card { background-color: white; border: solid var(--grijs) 1px; border-radius: 20px; min-height: 100%; padding: 0px 16px 63px 16px; position: relative; } .artikel-card { padding: 16px; position: relative; padding-bottom: 72px; } .row.hoe-wij-werken.mod-articles-items { padding-bottom: 0; } /* ============================================= HOE WIJ WERKEN — 7 kaartjes (grid-cols-3) ============================================= */ /*#mod-menu1-submenu2 li:nth-child(1) article.mod-articles-item {*/ /* background-color: #FABA00 !important;*/ /* border: none !important;*/ /*}*/ /*#mod-menu1-submenu2 li:nth-child(2) article.mod-articles-item {*/ /* background-color: #F29200 !important;*/ /* border: none !important;*/ /*}*/ /*#mod-menu1-submenu2 li:nth-child(3) article.mod-articles-item {*/ /* background-color: #C9C9C9 !important;*/ /* border: none !important;*/ /*}*/ /*#mod-menu1-submenu2 li:nth-child(4) article.mod-articles-item {*/ /* background-color: #FFF5E6 !important;*/ /* border: none !important;*/ /*}*/ /*#mod-menu1-submenu2 li:nth-child(5) article.mod-articles-item {*/ /* background-color: #F0EEF5 !important;*/ /* border: none !important;*/ /*}*/ /*#mod-menu1-submenu2 li:nth-child(6) article.mod-articles-item {*/ /* background-color: #F5E6C8 !important;*/ /* border: none !important;*/ /*}*/ /*#mod-menu1-submenu2 li:nth-child(7) article.mod-articles-item {*/ /* background-color: #FABA00 !important;*/ /* border: none !important;*/ /*}*/ #mod-menu1-submenu2 li:nth-child(2) article.mod-articles-item { background-color: #F0EEF5 !important; border: none !important; } #mod-menu1-submenu2 li:nth-child(3) article.mod-articles-item { background-color: #F5E6C8 !important; border: none !important; } #mod-menu1-submenu2 li:nth-child(4) article.mod-articles-item { background-color: var(--geel) !important; border: none !important; } #mod-menu1-submenu2 li:nth-child(5) article.mod-articles-item { background-color: var(--oranje) !important; border: none !important; } #mod-menu1-submenu2 li:nth-child(6) article.mod-articles-item { background-color: var(--grijs) !important; border: none !important; } #mod-menu1-submenu2 li:nth-child(7) article.mod-articles-item { background-color: var(--geel) !important; border: none !important; } .onzekoerskop { margin: 2rem 0 0 0; } .overelaa-jaar .custom { border-radius: 20px; padding: 1.2rem; padding-bottom: 4rem; height: 100%; position: relative; } .overelaa-jaar a.btn-secondary { position: absolute; bottom: 21px; text-decoration: none; } .jaarblokken #mod-custom170 { display: flex; } #mod-custom170 .moduletable.overelaa-jaar.col-md-4 { padding: 0px 26px; padding-bottom: 1rem; } #mod-custom170 > .moduletable.overelaa-jaar.col-md-4:first-of-type { padding-left: 0px; } #mod-custom170 > .moduletable.overelaa-jaar.col-md-4:nth-of-type(3) { padding-right: 0px; } .jaarblokken .moduletable.overelaa-jaar:nth-child(2) .custom { background-color: var(--geel); } .jaarblokken .moduletable.overelaa-jaar:nth-child(3) .custom { background-color: var(--oranje); } .jaarblokken .moduletable.overelaa-jaar:nth-child(4) .custom { background-color: var(--grijs); } /* Titels aanpassen per kleur */ #mod-menu1-submenu2 li:nth-child(4) h4.mod-articles-title, #mod-menu1-submenu2 li:nth-child(5) h4.mod-articles-title, #mod-menu1-submenu2 li:nth-child(7) h4.mod-articles-title, .megamenu-modules .row.mod-articles-grid.grid-cols-4 .col-md-3:nth-child(4) h4.mod-articles-title { color: var(--zwart) !important; } /* Titels aanpassen per kleur */ #mod-menu1-submenu2 li:nth-child(4) h4.mod-articles-title, #mod-menu1-submenu2 li:nth-child(5) h4.mod-articles-title, #mod-menu1-submenu2 li:nth-child(7) h4.mod-articles-title, .megamenu-modules .row.mod-articles-grid.grid-cols-4 .col-md-3:nth-child(4) h4.mod-articles-title { color: var(--zwart) !important; } @media (max-width: 860px) { .megamenu-modules { grid-template-columns: 1fr !important; grid-template-areas: "description" "sidebar" "articles" !important; } .megamenu-modules .moduletable.leesluisterkijk { grid-row: auto !important; } } /* Hamburger */ .navbar-toggler { /* position: absolute; right: 1rem; top: -81px; z-index: 15; */ width: 50px; height: 50px; grid-area: 2 / 2 / 3 / 3; } .navbar-toggler-icon { background-image: url(../images/hamburgermenu.svg); width: 55px; height: 42px; display: block; } .hidden-desktop { display: none; } /* ============================================= HERO SECTIE Grid: [h1 links] [tekst + knop rechts] ============================================= */ /*video modal nick*/ /* ── Click-to-play trigger ───────────────────────────────────── */ .header-video-trigger { position: relative; display: block; padding: 0; border: none; background: none; cursor: pointer; width: 100%; line-height: 0; /* voorkomt witruimte onder img */ } .header-video-trigger:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; border-radius: 4px; } .header-video-trigger:hover .header-video-thumb, .header-video-trigger:focus-visible .header-video-thumb { filter: brightness(0.85); } /* ── Play button overlay ─────────────────────────────────────── */ .play-button-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; /* klik gaat door naar de button */ } .play-icon { width: clamp(48px, 10%, 80px); height: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)); transition: transform 0.2s ease, filter 0.2s ease; } .header-video-trigger:hover .play-icon, .header-video-trigger:focus-visible .play-icon { transform: scale(1.12); filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65)); } /* ── Modal ───────────────────────────────────────────────────── */ .video-modal { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 1rem; } .video-modal[hidden] { display: none; } .video-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.80); cursor: pointer; } .video-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 900px; } .video-modal__close { position: absolute; top: -2.25rem; right: 0; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; transition: opacity 0.15s ease; } .video-modal__close:hover, .video-modal__close:focus-visible { opacity: 0.75; outline: 2px solid #fff; border-radius: 2px; } .video-modal__embed { background: var(--zwart); border-radius: 4px; overflow: hidden; } .video-modal__embed iframe { width: 100%; height: 100%; border: none; display: block; } /*video modal nick*/ /* ── Click-to-play trigger ───────────────────────────────────── */ .header-video-trigger { position: relative; display: block; padding: 0; border: none; background: none; cursor: pointer; width: 100%; line-height: 0; /* voorkomt witruimte onder img */ } .header-video-trigger:focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; border-radius: 4px; } .header-video-thumb { display: block; width: 512px; height: 270px; object-fit: cover; border-radius: 20px; transition: filter 0.7s ease; } .header-video-trigger:hover .header-video-thumb, .header-video-trigger:focus-visible .header-video-thumb { filter: brightness(0.85); } .headerVideoTekst { line-height: normal; margin-top: 10px; } .headerVideoTekst p::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E"); margin-left: 6px; vertical-align: middle; display: inline-block; } /* ── Play button overlay ─────────────────────────────────────── */ .play-button-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; /* klik gaat door naar de button */ } .play-icon { width: clamp(48px, 10%, 80px); height: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)); transition: transform 0.2s ease, filter 0.2s ease; } .header-video-trigger:hover .play-icon, .header-video-trigger:focus-visible .play-icon { transform: scale(1.12); filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.65)); } /* ── Modal ───────────────────────────────────────────────────── */ .video-modal { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 1rem; } .video-modal[hidden] { display: none; } .video-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.80); cursor: pointer; } .video-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 900px; } .video-modal__close { position: absolute; top: -2.25rem; right: 0; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; transition: opacity 0.15s ease; } .video-modal__close:hover, .video-modal__close:focus-visible { opacity: 0.75; outline: 2px solid #fff; border-radius: 2px; } .video-modal__embed { background: var(--zwart); border-radius: 4px; overflow: hidden; } .video-modal__embed iframe { width: 100%; height: 100%; border: none; display: block; } /*modal finder nick*/ .finder-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; height: 100vh; } .finder-modal[hidden] { display: none; } /* Donkere achtergrond */ .finder-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); cursor: pointer; } .finder-modal__box { position: relative; z-index: 1; background: #fff; border-radius: 12px; padding: 2rem 3rem 5rem; width: min(520px, 90vw); box-sizing: border-box; overflow: visible; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); /* Slide-in animatie */ animation: finderModalIn 0.2s ease; } @keyframes finderModalIn { from { opacity: 0; transform: translateY(-16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .finder-modal__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 1.25rem; } /* Sluitknop */ .finder-modal__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--zwart); padding: 0.25rem 0.5rem; border-radius: 20px; transition: color 0.15s, background 0.15s; } .finder-modal__close:hover { color: #111; background: #f0f0f0; } /* Form + input-group volledig binnen de box */ .finder-modal__box form, .finder-modal__box .mod-finder__search, .finder-modal__box .input-group { width: 100%; box-sizing: border-box; } /* Inputveld */ .finder-modal__box .form-control { border: 2px solid #d0d8e8; border-radius: 8px 0px 0 8px; padding: 0.65rem 1rem; font-size: 1rem; flex: 1 1 auto; min-width: 0; transition: border-color 0.2s; } .finder-modal__box .form-control:focus { border-color: var(--oranje); outline: none; box-shadow: 0 0 0 3px rgba(26, 46, 82, 0.12); } /* Zoekknop */ .finder-modal__box .btn-primary { /* background: #1a2e52; */ /* border-color: #1a2e52; */ border-radius: 0 8px 8px 0; padding: 0.65rem 1.25rem; flex-shrink: 0; white-space: nowrap; } .finder-modal__box .btn-primary:hover { background: #243d6e; } /* Scroll-lock op body */ body.finder-modal--open { overflow: hidden; } /* ── Zoek-trigger in de navbar ─────────────────────────── */ .mod-menu__search-trigger { display: flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; padding: 0.4rem; border-radius: 4px; transition: opacity 0.15s; } .mod-menu__search-trigger:hover { opacity: 0.7; } /*mod_webdelta_color_cars*/ .color-card { padding: 1.5rem 2rem 1.5rem 2rem; border-radius: 20px; margin-bottom: 2rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } /*.btn-secondary.kleur-kaart {*/ /* position: absolute;*/ /* bottom: 76px;*/ /*}*/ .color-card.card-geel { background-color: var(--geel); } .color-card.card-oranje { background-color: var(--oranje); } .color-card.card-grijs { background-color: var(--grijs); } .color-card.card-zwart { background-color: var(--zwart); color: #fff; } .color-card.card-pastel-perzik { background-color: var(--pastel-perzik); } .color-card.card-pastel-perzik-licht { background-color: var(--pastel-perzik-licht); } .color-card.card-pastel-geel-licht { background-color: var(--pastel-geel-licht); } .color-card.card-pastel-tarwe { background-color: var(--pastel-tarwe); } .color-card.card-pastel-oranje-bg { background-color: var(--pastel-oranje-bg); } .color-card.card-pastel-bg-zacht { background-color: var(--pastel-bg-zacht); } /* Bootstrap ratio helper (als je het nog niet hebt) */ .ratio { position: relative; width: 100%; } .ratio::before { display: block; content: ""; } .ratio-16x9::before { padding-top: 56.25%; } .ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .artikel-header { background: var(--pastel-oranje-bg); padding-top: 5rem; padding-bottom: 5rem; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .home-page-zo-werken h3 { margin-top: 1rem; padding-bottom: 2.7rem; } .home-pagina .artikel-header { padding-top: 8rem; padding-bottom: 8.9rem; } /* H1 — rechts bovenaan */ .artikel-header .header-titel { grid-area: titel; align-self: end; } /* Tekst + knop rechts onderaan */ .artikel-header .header-tekst { font-size: 1.1rem; margin-top: 5%; font-family: 'NunitoBold'; } /* Verberg lege paragrafen */ .artikel-header .header-tekst p:empty { display: none; } .artikel-header .header-tekst p a:hover { background-color: var(--oranje-licht) !important; } /* ============================================= BLOG ============================================= */ .project-card { height: 100%; } .com-contact .project-card { height: unset; } .project-card article.mod-articles-item, .project-card .card-body { background-color: var(--pastel-bg-zacht); padding: 1rem; border-radius: 20px; opacity: 1; height: 100%; } .card-body .btn-secondary { margin-top: auto; } .mod-webdeltaprojectfilters-form { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-bottom: 1rem; } .mod-webdeltaprojectfilters-form .form-group { display: flex; flex-direction: column; min-width: 200px; } .mod-webdeltaprojectfilters-form label { font-size: 14px; margin-bottom: 5px; } .mod-webdeltaprojectfilters-form .form-select { width: 275px; height: 38px; } .mod-webdeltaprojectfilters-form .btn { height: 38px; } .mod-webdeltaprojectfilters-form .filter-label { margin-left: 11px; } .blog-items { display: flex; flex-wrap: wrap; margin-top: 50px; } .blog-items > div { display: flex; margin-bottom: 2rem; } .card { border: 1px solid var(--grijs); background: #fff; padding: 10px; width: 100%; display: flex; flex-direction: column; border-radius: 1.11rem; } .card-body { padding: 0; display: flex; flex-direction: column; height: 100%; } .card-adviseur { font-size: 16px; font-style: italic; margin-top: 6px; color: var(--zwart); } .card-readmore { margin-top: auto; } .artikel-card .card-readmore { position: absolute; bottom: 16px; margin: 0; } /* ============================================= Projecten ============================================= */ .team-lid__foto { width: 32%; } .team-lid__naam a { color: var(--zwart); text-decoration: none; font-size: 1rem; } .team-lid__functie { font-size: 0.9rem; } .team-lid__foto { margin-bottom: 1rem; } .team-lid__info { width: 48%; margin-top: 1rem; } .team-lijst { display: flex; flex-direction: column; } .team-lijst__toggle-plus img { width: 15px; } .team-lid--extra { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 1s ease, opacity 1s ease; } .blok-team--expanded .team-lid--extra { max-height: 200px; /* kies een waarde die groot genoeg is */ opacity: 1; } .project-sectie { margin-bottom: 3rem; } .project-secties h2:first-child { margin-top: 0px; } .project-trots { margin-top: 2rem; position: relative; } .project-trots.contact { margin: 3.4rem 0; } .project-trots.contact:before { top: 162px; } .contact-info { margin-top: 2rem; } .contact-info p { margin-bottom: 0; } .contact-info a { text-decoration: none } .contact-custom-field.contact-werkdagen { margin-top: 2rem; } .gekoppelde-artikelen { margin-top: 5rem; } .gekoppelde-artikelen .row.mod-articles-items { margin: 0 -27px; /*margin-bottom: 2rem;*/ } .gekoppelde-artikelen .row.mod-articles-items .menu-blokje { margin-bottom: 52px; } .gekoppelde-artikelen .mod-articles-items .menu-blokje .mod-articles-item { background-color: white; border: 1px solid #C9C9C9; } .project-content { position: relative; } .project-content::before { content: ''; display: block; width: 114px; height: 94px; margin-bottom: -33px; background-color: #f5deb3; mask-image: url(/images/iconen/quote-teken.svg); mask-repeat: no-repeat; left: 56px; top: 63px; position: absolute; z-index: -1; } .project-trots, blockquote { padding-top: 3rem; padding-bottom: 2rem; margin-bottom: 1.5rem; position: relative; } blockquote { padding-top: 5rem; margin-top: 3rem; margin-bottom: 3rem; } .project-trots::before, blockquote::before { content: ""; position: absolute; top: 0; left: 0; width: 65vw; height: 100%; background-color: var(--pastel-bg-zacht); z-index: -1; } blockquote::before { left: -18vw; width: 76vw; } blockquote p, blockquote h1, blockquote h2, blockquote h3, blockquote h4, blockquote h5, blockquote h6 { font-size: 22px !important; line-height: normal !important; } blockquote p::before, blockquote h1::before, blockquote h2::before, blockquote h3::before, blockquote h4::before, blockquote h5::before, blockquote h6::before { content: ''; display: block; width: 114px; height: 94px; margin-bottom: -33px; background-color: #f5deb3; mask-image: url(/images/iconen/quote-teken.svg); mask-repeat: no-repeat; left: 56px; top: 2rem; position: absolute; z-index: -1; } .project-trots-content p { font-size: 22px; } .social-media-icons a { text-decoration: none; } .social-media-icons { gap: 1rem; display: flex; } .project-navigatie { display: flex; justify-content: space-between; } .project-navigatie a { text-decoration: none; gap: 8px; } .project-tags { margin-top: 4rem; } .project-tags h3 { margin-bottom: 1rem; } .project-kenmerk-groep { margin-bottom: 1.5rem; } .project-kenmerk-groep, .project-kenmerk-groep a { font-size: 16px; } .project-kenmerk-groep a { padding: 6px 16px; background-color: var(--pastel-bg-zacht); border-radius: 20px; color: var(--zwart); text-decoration: none; } .project-tags .project-kenmerk-groep:nth-child(3) a { background-color: var(--pastel-oranje-bg); } .project-kenmerk-groep__titel { margin-bottom: 0.5rem; } .project-kenmerk-groep__tags { display: flex; gap: 0.8rem; flex-wrap: wrap; } .projecten { position: relative; padding-top: 3rem; } .blok-team--expanded .team-lijst__toggle { margin-top: 16px; } /*.team-lijst__toggle {*/ /* margin-top: -36px;*/ /*}*/ .projecten::before { background-repeat: no-repeat; content: ""; position: absolute; width: 541px; height: 482px; z-index: -1; background-image: url(/images/honingraat/honingraat-variant3.png); transform: rotate(0deg); background-position: right; top: 50%; right: 0px; } /* ============================================= KALENDER ============================================= */ .mod-webdeltakalenderfilters-form { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 40px; } .mod-webdeltakalenderfilters-form .form-group { display: flex; flex-direction: column; min-width: 200px; } .mod-webdeltakalenderfilters-form label { font-size: 14px; margin-bottom: 5px; } .mod-webdeltakalenderfilters-form .form-select { width: 275px; height: 38px; } .mod-webdeltakalenderfilters-form .btn { height: 38px; } .mod-webdeltakalenderfilters-form .filter-label { margin-left: 11px; } .kalender-inhoud .programma-lijst { margin-top: 8px; } .kalender-inhoud .programma-item { display: flex; gap: 8px; margin-bottom: 4px; } .kalender-inhoud .programma-tijd { min-width: 90px; font-weight: 600; } .kalender-inhoud .programma-tekst { flex: 1; } .kalender-layout { margin-top: 40px; padding: 3.4rem 0rem; } .kalender-info { position: sticky; top: 80px; } .card-readmore-kalender a { display: inline-flex; align-items: center; gap: 8px; background: #f3f3f3; padding: 10px 14px; margin-top: 12px; font-weight: 600; text-decoration: none; color: var(--zwart); } .card-readmore-kalender svg { width: 6px; height: 10px; fill: #999; } .card-readmore-kalender a:hover { background: #e9e9e9; } .card-readmore-kalender { position: absolute; bottom: 16px; } /* niet de mooiste oplossing maar wel de snelste....*/ .kalender-info h2 { font-size: 1.5rem !important; left: -2px; } .kal-info-item { margin-bottom: 1rem; display: flex; gap: 4px; } .kal-info-item-aanmelden { margin-top: 1.5rem; } .kal-info-label { width: 40%; font-weight: 600; } .kal-info-value { width: 60%; } .kal-info-value a { text-decoration: none; } .kal-info-value ul { padding-left: 0.66rem; } .kal-info-value .aanmelden { margin-top: 1.5rem; } /* ============================================= PRIK BOARD ============================================= */ .prikbord-wrapper { background: url(/images/honingraat/honingraat-variant1.png) no-repeat left 80%; } .prikbord { padding: 6rem 0rem; } .prikbord-wrapper .card { border-radius: 20px; padding: 36px 28px; padding-top: 10px; background: var(--pastel-bg-zacht); border: none; display: flex; } .prikbord p.card-text { padding-top: 3%; } .badge { background: none !important; color: var(--zwart); font-size: 1rem; font-weight: 100; padding: 9.5px 0px; } .badge::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='%23F05D14'%3E%3Cpath d='M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E"); margin-right: 6px; vertical-align: middle; display: inline-block; } .d-flex.justify-content-between.align-items-start.mb-2 { border-bottom: dotted 1px #F5DEB3; } .card-body .h5::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='47' viewBox='0 0 44 48.293'%3E%3Cg transform='translate(-784.858 -833.853)'%3E%3Cpath d='M43.863,15.2a7.27,7.27,0,0,0-2.549-5.063,7,7,0,0,0-.994-.775q-.366-.251-.781-.492L26.482,1.335a9.16,9.16,0,0,0-1.3-.581A7.157,7.157,0,0,0,22.016.01a7.879,7.879,0,0,0-2.5.421A7.033,7.033,0,0,0,18.354.9q-.4.192-.817.431L4.481,8.873a9.059,9.059,0,0,0-1.153.836,7.27,7.27,0,0,0-3.11,4.739A6.955,6.955,0,0,0,.045,15.7c-.022.3-.035.6-.035.922V31.695a9.091,9.091,0,0,0,.148,1.417,7.267,7.267,0,0,0,2.55,5.064,7.035,7.035,0,0,0,.992.774c.245.168.5.332.782.492l13.056,7.538a9.16,9.16,0,0,0,1.3.581A7.157,7.157,0,0,0,22,48.3a7.878,7.878,0,0,0,2.5-.422,7.059,7.059,0,0,0,1.164-.472q.4-.192.817-.431l13.056-7.538a9.058,9.058,0,0,0,1.153-.836,7.27,7.27,0,0,0,3.11-4.739,7.048,7.048,0,0,0,.174-1.248c.022-.3.035-.6.035-.922V16.618a9.141,9.141,0,0,0-.147-1.417Z' transform='translate(784.848 833.843)' fill='%23fff'/%3E%3Cg transform='translate(118.858 -8)'%3E%3Cpath d='M1.325,1.083A1.331,1.331,0,0,1,2.658-.25H13.321a1.333,1.333,0,1,1,0,2.666H12.092l.475,6.173a7,7,0,0,1,3.311,3.944l.042.125a1.325,1.325,0,0,1-.183,1.2,1.34,1.34,0,0,1-1.083.554H1.325a1.334,1.334,0,0,1-1.083-.554,1.316,1.316,0,0,1-.183-1.2L.1,12.533A7,7,0,0,1,3.412,8.588l.475-6.173H2.658A1.331,1.331,0,0,1,1.325,1.083ZM6.656,15.744H9.322v4a1.333,1.333,0,0,1-2.666,0Z' transform='translate(680.011 856.587)' fill='%23535352'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); margin-right: 10px; vertical-align: middle; display: inline-block; } .prikbordcontactgeg { background: white; display: flex; align-items: flex-start; flex-direction: column; border-left: solid 4px var(--oranje-knop); padding: 7px 20px; } .mt-auto.pt-2.d-flex.flex-wrap.gap-2 .btn-secondary { width: 50%; } .mt-auto.pt-2.d-flex.flex-wrap.gap-2 .btn-tertiary { font-size: 1rem; } .prikbord-wrapper .row { margin-bottom: 55px; } @media screen and (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* ============================================= ZO WERKEN WE AAN VERANDERING — 2x2 GRID HTML: .moduletable > h3 + ul.mod-articles-items ============================================= */ .com-content-article__body { padding: 3.4rem 0rem; } .com-contact.contact { padding-bottom: 3.4rem; } .com-contact .projecten-overzicht .project-card { margin-bottom: 2rem; } .contact.contact .col-md-7 { margin-top: 3rem; } .project-trots h2.project-titel { margin-bottom: 4rem; } .trotsop-titel { margin-bottom: 3.5rem; color: var(--pastel-perzik); } .project-secties h2 span { color: var(--zwart) !important; } .project-secties h2 { margin-top: 3rem; } .om-baan h2, h2.project-titel, .com-content-article__body h2, .project-secties h2 { margin-bottom: 1.5rem; padding-bottom: 1.5rem; position: relative; } .artikel-tekst h2 { margin-top: 3rem; } .project-trots h2 { margin-top: 0px; } /* Oranje streepje onder de titel */ .om-baan h2::after, h2.project-titel::after, .com-content-article__body h2::after, .project-secties h2::after { content: ""; position: absolute; left: 0px; bottom: 0px; width: 4.1rem; height: 0.33rem; background-color: var(--oranje-knop); border-radius: 3rem; } /* De ul wordt een 2x2 grid */ ul.mod-articles-items.mod-articles-grid.grid-cols-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2.4rem; /* ← groter */ list-style: none !important; padding: 0; margin: 0 !important; } ul.mod-articles-items.mod-articles-grid.grid-cols-2 li { margin: 0 !important; padding: 0 !important; } /* Kaart — meer vierkant */ ul.mod-articles-items.mod-articles-grid.grid-cols-2 article.mod-articles-item { position: relative; overflow: hidden; aspect-ratio: 1.1/1; /* ← terug naar vierkant */ display: block !important; border-radius: 1.11rem; transition: 0.3s; top: 0; border: var(--zwart); cursor: pointer; } ul.mod-articles-items.mod-articles-grid.grid-cols-2 article.mod-articles-item:hover { transform: scale(1.03); } /* Afbeelding vult de kaart */ ul.mod-articles-items.mod-articles-grid.grid-cols-2 article.mod-articles-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 100%; object-position: right; } /* 3e kaart */ ul.mod-articles-items.mod-articles-grid.grid-cols-2 li:nth-child(3) img { object-position: 100% 80%; transform: scale(1.6); } /* Gradient overlay onderaan */ ul.mod-articles-items.mod-articles-grid.grid-cols-2 article.mod-articles-item::after { content: "" !important; display: block !important; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%); z-index: 1; border-radius: 1.11rem; } /* Titel padding meer */ ul.mod-articles-items.mod-articles-grid.grid-cols-2 .mod-articles-title { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 0 0.88rem 0.88rem 0.88rem; margin: 0; } ul.mod-articles-items.mod-articles-grid.grid-cols-2 .mod-articles-title a { color: white !important; display: inline-flex !important; align-items: center !important; transition: 0.5s; } /* Verberg intro tekst en readmore knop */ ul.mod-articles-items.mod-articles-grid.grid-cols-2 .mod-articles-introtext, ul.mod-articles-items.mod-articles-grid.grid-cols-2 .mod-articles-readmore { display: none !important; } /* Pijltje naast de tekst */ ul.mod-articles-items.mod-articles-grid.grid-cols-2 .mod-articles-title a::after { /* Wit */ content: ""; display: inline-block; width: 30px; height: 12px; margin-left: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23ffffff'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; transition: 0.3s; } /* HOE WIJ WEKREN */ /* Container & Algemeen */ .megamenu-nieuws article.mod-articles-item img { opacity: 50%; height: 9.66rem; margin-bottom: 20px; } /* Container & Algemeen */ .menu-blokje article.mod-articles-item img { opacity: 50%; height: 9.66rem !important; object-fit: cover; margin-bottom: 25px; width: 100%; } .gekoppelde-projecten article.mod-articles-item img { max-height: 9.66rem; } .gekoppelde-artikelen h4.mod-articles-title a { font-size: 1.6rem } .gekoppelde-artikelen .kaartjes, .project-card { /*margin-bottom: 2rem;*/ } .project-card .card-title a { font-size: 1.2222rem; text-decoration: none; } .projecten-overzicht .btn-secondary { width: fit-content; margin-top: auto; border-width: 1px; } .projecten-overzicht .row.mod-articles-items { margin: 0 -32px; } .projecten-overzicht .card-adviseur { margin-bottom: 1rem; } .mod-articles-date { margin-bottom: 0.6rem; font-size: 0.9rem; } .gekoppelde-artikelen .mod-articles-item-content { padding: 1rem; padding-bottom: 58px; position: relative; } .gekoppelde-artikelen .lees-meer { position: absolute; bottom: 16px; } .mod_hoe_wij_werken { color: var(--zwart); padding: 1.11rem 0; } /* Breid rijen uit tot gelijke hoogte, vooral handig voor de image */ .mod_hoe_wij_werken > .row { display: flex; flex-wrap: wrap; } .mod_hoe_wij_werken .img-fluid { height: 100%; object-fit: cover; flex-grow: 1; min-height: 400px; border-radius: 20px; } /* Introductie blok (bovenaan rechts) */ .mod_hoe_wij_werken .intro { background-color: var(--pastel-bg-zacht) !important; padding: 1.94rem 1.66rem; margin-bottom: 3.6666666rem; border-radius: 20px; } .mod_hoe_wij_werken > .col-md-4:nth-child(1) { background-color: var(--geel) !important; } .mod_hoe_wij_werken > .col-md-4:nth-child(2) { background-color: var(--oranje) !important; border-radius: 20px; } .mod_hoe_wij_werken > .col-md-4:nth-child(3) { background-color: var(--grijs) !important; border-radius: 20px; } /* ============================================= OM-BAAN GRIJS — NIEUWS + AGENDA ALLEEN AGENDA KAARTJES ACHTERGROND FIX ============================================= */ article.mod-articles-item { background: #FFFFFF 0% 0% no-repeat padding-box; border-radius: 20px; opacity: 1; height: 100%; } .mod-articles-item-content { display: flex; flex-direction: column; flex: 1; width: auto; height: 100%; } figure.mod-articles-image.item-image { height: 115%; opacity: 100% !important; } .mod-articles-image { margin-bottom: 0px; } .nieuws-weergave a.mod-articles-link { font-size: 1.44rem; } a.mod-articles-link { color: var(--zwart); text-decoration: none; } .row.mod-articles-items.mod-list .mod-articles-item { display: flex; flex-direction: column; height: 100%; padding: 15px; } .all-bijeenkomsten-link { transition: 0.5s; } .all-bijeenkomsten-link:hover { text-decoration: none !important; color: var(--oranje-knop) !important; } .all-bijeenkomsten-link::after { content: ""; display: inline-block; width: 10px; height: 11px; margin-left: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23000000'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; transition: 0.3s; } .all-bijeenkomsten-link:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cg transform='translate(9.872) rotate(90)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' fill='%23F05D14'/%3E%3C/g%3E%3C/svg%3E"); } .com-tags-grid { display: flex; flex-direction: column; gap: 15px; } .all-bijeenkomsten-link { font-weight: 600; color: var(--zwart) !important; text-decoration: none !important; display: inline-flex; align-items: center; } .all-bijeenkomsten-link:hover { text-decoration: underline !important; } /* ============================================= AGENDA KAARTJES ============================================= */ .com-tags-kalender-card { margin-bottom: 0.75rem; } .com-tags-kalender-link { align-items: center; background: var(--pastel-oranje-bg) !important; border-radius: 20px !important; padding: 1.27rem; height: auto; display: flex; text-decoration: none; color: var(--zwart) !important; transition: background-color 0.2s ease; } .tag-hero-section { background-color: var(--pastel-oranje-bg); padding: 4rem 0; margin-bottom: 3rem; } .tag-hero-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } .tag-hero-title-wrapper { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 1rem; } .tag-hero-label { font-size: 3rem; font-weight: 300; color: var(--zwart); } .tag-hero-pill { background-color: var(--pastel-oranje-bg); border-radius: 50px; padding: 5px 20px; font-size: 1.1rem; font-weight: 700; color: var(--zwart); display: inline-block; border: 1.5px solid var(--zwart); } .tag-hero-description { font-size: 1.1rem; color: #555; max-width: 800px; line-height: 1.6; } .com-tags-items-container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } .com-tags-card { display: flex; flex-direction: column; } .com-tags-card-image-wrapper { width: 100%; margin-bottom: 1rem; } .com-tags-card-image { width: 100%; height: auto; object-fit: cover; border-radius: 8px; } .com-tags-card-readmore { font-size: 0.9rem; font-weight: bold; color: var(--zwart); text-decoration: none; margin-top: auto; display: inline-block; } .com-tags-card-readmore:hover { text-decoration: underline; } .com-tags-card-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.5rem 0; line-height: 1.4; } .com-tags-card-title a { color: var(--zwart); text-decoration: none; } .com-tags-card-title a:hover { text-decoration: underline; } .com-tags-card-intro { font-size: 0.95rem; color: var(--zwart); line-height: 1.6; margin: 0; } .com-tags-advisor-subtitle { font-size: 0.95rem; color: var(--grijs); margin-top: 0.2rem; } .com-tags-advisor-socials { display: flex; gap: 10px; } .advisor-social-icon { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; background-color: --pastel-oranje-bg; color: #555; text-decoration: none; transition: background-color 0.2s, color 0.2s; } .advisor-social-icon:hover { background-color: #D0D0D0; color: #000; } .advisor-social-icon svg { width: 35px; height: 35px; / / fill: currentColor; } .com-tags-section-title { font-size: 2rem; font-weight: 400; margin-bottom: 1.5rem; color: var(--zwart); } .all-advisors-link { font-size: 1rem; font-weight: 700; color: var(--zwart); text-decoration: none; display: inline-block; margin-top: 10px; } .all-advisors-link:hover { text-decoration: underline; } .com-tags-kalender-title { font-size: 1rem; font-weight: bold; margin: 0 0 1.5rem 0; line-height: 1.4; flex-grow: 1; } .com-tags-kalender-bottom { display: flex; align-items: center; gap: 15px; margin-top: auto; } .com-tags-kalender-datum { background: #FFF; padding: 0.5rem 1rem; font-size: 0.95rem; font-weight: bold; color: var(--zwart); } .com-tags-section-title ~ .row { align-items: stretch; } .com-tags-kalender-arrow { font-size: 1.2rem; color: #777; } .com-tags-nieuws-image-wrapper { width: 100%; aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid #ccc; } .com-tags-nieuws-image { width: 100%; height: 100%; object-fit: cover; display: block; } .com-tags-kalender-date-text { color: var(--oranje-knop) !important; min-width: 135px !important; display: flex !important; flex-direction: column; text-align: center !important; font-weight: 600 !important; font-size: 20px !important; line-height: 1.4 !important; background-color: #fff; margin-right: 2rem !important; padding: 1rem 2rem 1rem 1rem; border-radius: 20px; position: relative; } .com-tags-kalender-date-text::after { content: ""; display: inline-block; position: absolute; right: 10px; top: calc(50% - 5px); width: 10px; height: 11px; margin-left: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='9.872' height='10.663' viewBox='0 0 9.872 10.663'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='10.663' height='9.872' fill='%23F05D14'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(9.872) rotate(90)' clip-path='url(%23a)'%3E%3Cpath d='M10.242,6.635s-2.03-3.568-2.981-5.2C6.434.014,5.549-.01,5.331.007,5.113-.01,4.228.014,3.4,1.433,2.45,3.067.42,6.635.42,6.635A2.341,2.341,0,0,0,.294,9.029a1.559,1.559,0,0,0,1.285.847H9.084a1.559,1.559,0,0,0,1.285-.847,2.341,2.341,0,0,0-.127-2.395' transform='translate(0 -0.005)' fill='%23F05D14'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; } .com-tags-kalender-date-box { text-align: center !important; color: var(--oranje-knop) !important; line-height: 1.2 !important; display: flex !important; flex-direction: row; align-items: center !important; border-radius: 10px; height: 150px !important; width: 170px !important; /* max-width: 110px; */ } /* ============================================= COM TAGS — OVERZICHTSPAGINA ============================================= */ .com-tags.tag-category { margin-top: 75px; } /*.com-tags-section-title {*/ /* font-size: 2rem;*/ /* font-weight: normal;*/ /* margin-bottom: 1.5rem;*/ /* color: var(--zwart);*/ /* margin-top: 3rem;*/ /*}*/ .com-tags-overzicht-card { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background-color: var(--pastel-oranje-bg); } .com-tags-overzicht-card .com-tags-card-content { display: flex; flex-direction: column; flex-grow: 1; } /*.com-tags-overzicht-card .com-tags-card-title {*/ /* font-size: 1.25rem;*/ /* font-weight: bold;*/ /* flex-grow: 1;*/ /*}*/ /*.com-tags-overzicht-card .com-tags-card-title a {*/ /* color: var(--zwart);*/ /* text-decoration: none;*/ /*}*/ /*.com-tags-overzicht-card .com-tags-card-title a:hover {*/ /* color: var(--oranje-knop);*/ /*}*/ .com-tags-overzicht-card .com-tags-card-intro { font-size: 0.95rem; color: var(--zwart); line-height: 1.5; font-weight: normal; } .all-tags-link { margin-top: 0.5rem; } /* praatje plaatje*/ /* Tekst kolom */ .praatje h3 { margin-bottom: 15px; } .om-baan.baan-type-4 { position: relative; } /* Broodtekst */ .tekst-oranje-ja { color: var(--oranje-knop); } .tekst-oranje-nee { /*margin-bottom: -2rem;*/ } /*===== DATA Als KOMPAS*/ .card-img-top img { margin-bottom: 14px; } .card-title a { font-size: 1.44rem !important; text-decoration: none; } .card-title a:hover { text-decoration: underline; } .card-title { word-break: break-word; } .com-content-category-blog__navigation { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 0 3rem; } .com-content-category-blog__counter { font-size: 0.9rem; color: var(--grijs); order: 2; } .pagination { display: flex; align-items: center; gap: 8px; } .pagination .page-item .page-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid #e0dbd3; background: #fff; color: #333; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: all 0.2s ease; } .pagination .page-item .page-link span { display: none; } .pagination .page-item:not(.disabled):not(.active) .page-link:hover { border-color: var(--oranje-knop); color: var(--oranje-knop); background: #fff8f4; } .pagination .page-item.active .page-link { background: var(--oranje-knop); border-color: var(--oranje-knop); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(232, 119, 34, 0.3); } .pagination .page-item.disabled .page-link { border-color: #ece8e2; background: #faf9f7; cursor: default; } /* Basis voor alle pijltjes */ .pagination .page-item:first-child .page-link::after, .pagination .page-item:nth-child(2) .page-link::after, .pagination .page-item:nth-last-child(2) .page-link::after, .pagination .page-item:last-child .page-link::after { content: ""; display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: center; } /* Dubbel pijltje links — eerste knop */ .pagination .page-item:first-child .page-link::after { width: 12px; height: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.22 7.19'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%23383838%7D%3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M1.84,6.69s2.42-1.37,3.52-2.02c.87-.51.85-1.01.85-1.07,0-.14,0-.62-.84-1.11h-.02C4.25,1.86,1.83.48,1.83.48c-.23-.16-.5-.24-.76-.24-.21,0-.42.05-.62.15C.2.52.03.78,0,1.06v5.06c.02.27.19.52.44.64.44.23.96.2,1.37-.07'/%3E%3Cpath class='st0' d='M10.25,2.29c-1.1-.64-3.52-2.02-3.52-2.02-.48-.33-1.1-.36-1.62-.09-.15.08-.27.19-.37.32.8.46,2.03,1.16,2.73,1.57,1.09.63,1.11,1.34,1.09,1.55.02.16,0,.87-1.09,1.5-.7.41-1.92,1.11-2.73,1.57.1.13.22.24.37.32.51.27,1.14.24,1.62-.09h0s2.42-1.37,3.52-2.01c.96-.56.98-1.16.97-1.31.01-.15,0-.74-.97-1.31Z'/%3E%3C/svg%3E"); transform: scaleX(-1); } /* Enkel pijltje links — tweede knop */ .pagination .page-item:nth-child(2) .page-link::after { width: 7px; height: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.69 7.18'%3E%3Cpath fill='%23383838' d='M2.2,6.93s2.42-1.37,3.52-2.02c.96-.56.98-1.16.97-1.31.01-.15,0-.74-.97-1.31C4.62,1.65,2.2.27,2.2.27,1.72-.06,1.1-.09.58.18.25.35.03.68,0,1.05v5.08c.03.37.24.7.58.87.51.27,1.14.24,1.62-.09'/%3E%3C/svg%3E"); transform: scaleX(-1); } /* Enkel pijltje rechts — voorlaatste knop */ .pagination .page-item:nth-last-child(2) .page-link::after { width: 7px; height: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.69 7.18'%3E%3Cpath fill='%23383838' d='M2.2,6.93s2.42-1.37,3.52-2.02c.96-.56.98-1.16.97-1.31.01-.15,0-.74-.97-1.31C4.62,1.65,2.2.27,2.2.27,1.72-.06,1.1-.09.58.18.25.35.03.68,0,1.05v5.08c.03.37.24.7.58.87.51.27,1.14.24,1.62-.09'/%3E%3C/svg%3E"); } /* Dubbel pijltje rechts — laatste knop */ .pagination .page-item:last-child .page-link::after { width: 12px; height: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.22 7.19'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%23383838%7D%3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M1.84,6.69s2.42-1.37,3.52-2.02c.87-.51.85-1.01.85-1.07,0-.14,0-.62-.84-1.11h-.02C4.25,1.86,1.83.48,1.83.48c-.23-.16-.5-.24-.76-.24-.21,0-.42.05-.62.15C.2.52.03.78,0,1.06v5.06c.02.27.19.52.44.64.44.23.96.2,1.37-.07'/%3E%3Cpath class='st0' d='M10.25,2.29c-1.1-.64-3.52-2.02-3.52-2.02-.48-.33-1.1-.36-1.62-.09-.15.08-.27.19-.37.32.8.46,2.03,1.16,2.73,1.57,1.09.63,1.11,1.34,1.09,1.55.02.16,0,.87-1.09,1.5-.7.41-1.92,1.11-2.73,1.57.1.13.22.24.37.32.51.27,1.14.24,1.62-.09h0s2.42-1.37,3.52-2.01c.96-.56.98-1.16.97-1.31.01-.15,0-.74-.97-1.31Z'/%3E%3C/svg%3E"); } /* Disabled pijltjes gedempt */ .pagination .page-item.disabled .page-link::after { opacity: 0.35; } /*===== slider ======*/ .omslider.review-slider.position-relative { display: flex; align-items: center; flex-direction: column; } .review-slider .reviewsslider-controls { display: flex; order: 3; position: absolute; bottom: 12%; width: 100% } .review-slider .reviewsslider-controls .prev { left: 0; position: absolute; } .review-slider .reviewsslider-controls .next { right: 0; position: absolute; } p.reviewtext { font-size: 1.2rem !important; font-weight: 500; margin-left: 7px; } p.reviewername { font-size: 1.2rem !important; font-weight: 600; color: var(--oranje-knop); } p.reviewername::before { content: "- "; } /* ===== Slider dots ===== */ .omslider.review-slider.position-relative { display: flex; align-items: center; flex-direction: column; margin-bottom: 4rem; } .tns-outer { order: 1; width: 100%; } .tns-nav { order: 2; display: flex; justify-content: center; gap: 10px; margin-top: 30px; position: relative; left: 60px; } .tns-nav button { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--zwart); background: transparent; padding: 0; cursor: pointer; } .tns-nav button.tns-nav-active { background: var(--zwart); } .omslider.review-slider.position-relative .tns-outer { display: flex; flex-direction: column; } .tns-ovh .card-body::before { content: ''; display: block; width: 110px; height: 94px; margin-bottom: -33px; background-color: #f5deb3; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='114.436' height='77.373' viewBox='0 0 114.436 77.373'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='49.565' height='77.373'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(3978 -455.5)'%3E%3Cg transform='translate(-3978 455.5)'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M49.4,0a23.032,23.032,0,0,1,.072,4.878c-.88,24.7,3.793,52.829-22.72,65.789a66.859,66.859,0,0,1-14.268,4.767c-2.195.5-8.655,1.967-10.457,1.939-.335-.005-.3-.385-.3-.621V69.613l.023-.628c6.686-1.249,13.871-2.486,19.192-6.98,5.764-4.868,8.444-13.839,8.3-21.15l-.928-.032L.48,41.129V39.694L0,.614'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(-3913.129 455.5)'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M49.4,0a23.032,23.032,0,0,1,.072,4.878c-.88,24.7,3.793,52.829-22.72,65.789a66.859,66.859,0,0,1-14.268,4.767c-2.195.5-8.655,1.967-10.457,1.939-.335-.005-.3-.385-.3-.621V69.613l.023-.628c6.686-1.249,13.871-2.486,19.192-6.98,5.764-4.868,8.444-13.839,8.3-21.15l-.928-.032L.48,41.129V39.694L0,.614'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); mask-repeat: no-repeat; -webkit-mask-size: 108px 110px !important; /* breedte hoogte */ mask-size: 76px 52px; /* was: contain */ margin-left: 38px; z-index: -1; } .reviewsslider.tns-item .inner { display: grid; grid-auto-flow: column; justify-content: center; align-items: center; } .tns-ovh .review-img { width: 170px; height: 170px; overflow: hidden; border-radius: 100%; margin-right: 30px; } /* ====== nieuws pagina ======*/ a.card-img-top.card-image { opacity: 0.5; } /* ===== Plaats een bericht op het prickbord form ===== */ .container.my-5 { margin-top: 8rem !important; } .tekst01 td, .tekst02 td, .tekst03 td { border-radius: 20px; } .tekst01 .praatje, .tekst02 .praatje, .tekst03 .praatje { margin-bottom: 4rem; } .com-contact-category.container { margin-top: 3rem; } /* ===== FOOTER ===== */ .footer { width: 100vw; background-color: #F5F5F5; z-index: 10; position: relative; padding-top: 35px; padding-bottom: 35px; } /* 29-03-2026 footer.container { background-color: #F5F5F5; margin: 0 auto; width: 100%; } footer.container .row { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; margin: 0; gap: 0; } */ /* alle negatieve margins weg */ footer.container { padding: 1.11rem 1.38rem; } .footer02 { padding-left: 75px; /* vergroot voor meer ruimte */ padding-right: 75px; background-image: radial-gradient(var(--grijs) 1px, transparent 1px), radial-gradient(var(--grijs) 1px, transparent 1px); background-size: 6px 6px; background-repeat: repeat-y; background-position: left, right; } /* "Op de hoogte blijven?" bold */ footer.container .col-md-4.footer02 p { text-align: center; margin-bottom: 16%; } footer.container .col-md-4.footer03 p { text-align: right; } /* ===== ELAA / ROS BLOK ===== */ .elaa-ros-block { display: flex; flex-direction: column; gap: 2.4rem; padding: 0; background: transparent; max-width: 100%; } .elaa-row { display: flex; align-items: self-end; gap: 0.66rem; } .elaa-row p { margin: 0; } .ros-row { display: flex; justify-content: flex-start; padding-left: 0; } .ros-row img { max-width: 100%; height: auto; width: 260px; } footer.container .col-md-4.footer02 .mod-custom { justify-items: center; } .footer2-knoppen { display: flex; gap: 45px; } /* ===== LINKEDIN ===== */ footer.container a[href*="linkedin"] { background-color: transparent !important; border: 2px solid var(--oranje-knop) !important; width: 55px !important; height: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; font-size: 0 !important; color: transparent !important; text-decoration: none !important; flex-shrink: 0; } footer.container a[href*="linkedin"]::before { content: "" !important; display: block !important; width: 24px !important; height: 24px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20.947' height='21.087' viewBox='0 0 20.947 21.087'%3E%3CclipPath id='a'%3E%3Crect width='20.947' height='21.087' fill='%23f05d14'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M2.88,0a2.88,2.88,0,1,0,2.88,2.88A2.88,2.88,0,0,0,2.88,0' fill='%23f05d14'/%3E%3Cpath d='M219.057,199.447c-2.352,0-3.457.861-4.2,1.976v-1.109a.655.655,0,0,0-.655-.655h-3.146a.655.655,0,0,0-.655.655v12.821a.655.655,0,0,0,.655.655H214.2a.655.655,0,0,0,.655-.655v-6.874c.082-.924.488-2.982,2.493-2.982,2.584,0,2.323,3.007,2.323,3.9v5.96a.655.655,0,0,0,.655.655h3.253a.655.655,0,0,0,.655-.655v-6.149c0-2.673.03-7.539-5.178-7.539' transform='translate(-203.288 -192.703)' fill='%23f05d14'/%3E%3Cpath d='M23.024,205.753H19.993a.712.712,0,0,0-.712.712v12.706a.712.712,0,0,0,.712.712h3.031a.712.712,0,0,0,.712-.712V206.465a.712.712,0,0,0-.712-.712' transform='translate(-18.629 -198.796)' fill='%23f05d14'/%3E%3C/g%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; } footer.container a[href*="linkedin"]::after { display: none !important; } footer.container a[href*="linkedin"]:hover { background-color: #FFF0E8 !important; } /* ===== MAILTO ===== */ footer.container a[href*="mailto"] { background-color: transparent; color: #E85C00; padding: 0; text-decoration: underline; } footer.container a[href*="mailto"]::after { display: none; } footer.container a[href*="mailto"]:hover { background-color: transparent; color: #c94f00; } /* ===== SOCKET ===== */ .socket { background-color: #222121; padding: 0.66rem 1.11rem; width: 100vw; margin-left: calc(-50vw + 50%); } div#mod-custom133 p { } .socket .container { display: flex; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; } /* Socket navigatie links */ .socket nav.footermenu ul { list-style: none; display: flex; gap: 0.27rem; margin: 0; padding: 13px; flex-wrap: wrap; justify-content: center; } .socket nav.footermenu ul li a { color: #ccc; text-decoration: none; } .socket nav.footermenu ul li a:hover { color: white; } /* Scheidingstekens tussen links */ .socket nav.footermenu ul li::after { content: "|"; color: #666; margin-left: 0.27rem; } /* Copyright tekst */ .socket .container { color: #ccc; gap: 0.27rem; } /* ============================================= WCAG — SKIP LINK ============================================= */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--oranje); color: #fff; padding: 12px 20px; z-index: 9999; font-weight: 700; text-decoration: none; border-radius: 0 0 8px 0; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ============================================= WCAG — FOCUS OUTLINE Alleen zichtbaar bij toetsenbordnavigatie ============================================= */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 3px solid #005FCC; outline-offset: 3px; border-radius: 4px; } /* Donkere achtergronden: witte outline */ .socket nav.footermenu ul li a:focus-visible { outline-color: #fff; } /* ============================================= WCAG — HOVER UNDERLINE Niet alleen kleur als indicator ============================================= */ ul#mod-menu140 li a:hover { text-decoration: underline; } a.mod-articles-link:hover, .megamenu-modules h4.mod-articles-title a:hover, .socket nav.footermenu ul li a:hover, .all-bijeenkomsten-link:hover { text-decoration: underline; } /* ============================================= WCAG — REDUCED MOTION ============================================= */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ============================================= MOBILE RESPONSIVE — Volledig pakket Voeg toe aan het EINDE van je bestaande CSS ============================================= */ /* ============================================= HAMBURGER MENU — Desktop verborgen, mobiel zichtbaar ============================================= */ /* Hamburger knop */ .hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; position: relative; } .hamburger-btn span { display: block; width: 28px; height: 3px; background-color: var(--zwart); border-radius: 3px; margin: 5px 0; transition: all 0.3s ease; } /* Hamburger animatie — open staat */ .hamburger-btn.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger-btn.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobiel menu overlay */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 999; opacity: 0; transition: opacity 0.3s ease; } .mobile-nav-overlay.is-open { display: block; opacity: 1; } /* Mobiel menu panel */ .mobile-nav-panel { position: fixed; top: 0; right: -100%; width: min(340px, 85vw); height: 100vh; background: #fff; z-index: 1000; padding: 2rem 1.5rem; overflow-y: auto; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; gap: 0; } .mobile-nav-panel.is-open { right: 0; } /* Sluit knop bovenin panel */ .mobile-nav-close { align-self: flex-end; background: none; border: none; font-size: 2.4rem; cursor: pointer; color: #333; padding: 4px 8px; margin-bottom: 1.5rem; line-height: 1; } /* Menu items in het panel */ .mobile-nav-panel ul { list-style: none; padding: 0; margin: 0; } .mobile-nav-panel ul li { border-bottom: 1px solid #f0f0f0; } .mobile-nav-panel ul li a, .mobile-nav-panel ul li button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.4rem 0.5rem; font-size: 1.8rem; font-weight: 700; color: var(--zwart); text-decoration: none; background: none; border: none; cursor: pointer; font-family: 'Nunito', sans-serif; transition: color 0.2s; } .mobile-nav-panel ul li a:hover, .mobile-nav-panel ul li button:hover { color: var(--oranje); } /* Submenu in mobiel panel */ .mobile-nav-panel .mobile-submenu { display: none; padding-left: 1.5rem; background: #fafafa; } .mobile-nav-panel .mobile-submenu.is-open { display: block; } .mobile-nav-panel .mobile-submenu li { border-bottom: 1px solid #ececec; } .mobile-nav-panel .mobile-submenu li a { font-size: 1.6rem; font-weight: 500; padding: 1rem 0.5rem; } /* Chevron pijltje */ .mobile-nav-chevron { width: 20px; height: 20px; transition: transform 0.3s ease; flex-shrink: 0; } .mobile-nav-chevron.rotated { transform: rotate(180deg); } /* Topmenu links (Contact, Prikbord) in panel */ .mobile-nav-topmenu { margin-top: auto; padding-top: 2rem; border-top: 1px solid #f0f0f0; } .mobile-nav-topmenu a { display: block; padding: 0.8rem 0.5rem; font-size: 1.5rem; color: #666; text-decoration: none; } /* Form elements */ input[type=text], input[type=email], input[type=tel], input[type=url], input[type=radio], textarea { background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: inset 0px 2px 6px #00000029; border: 1px solid #D2D2D2; border-radius: 7px; } /*==== ERROR ====*/ .error-404.text-center { margin-top: 173px; } .error-actions { margin-bottom: 173px; } @media (max-width: 1400px) { .header .menu { width: 85%; } ul.mod-articles-items.mod-articles-grid.grid-cols-2 { gap: 1.4rem 0.5rem; } .header .logo img { margin-top: -10px; } header.site-header { z-index: 1000; height: auto; } /* ↓ menu fix */ ul#mod-menu1 { width: 80%; } ul#mod-menu1 > li > a, ul#mod-menu1 > li > button.mod-menu__toggle-sub { font-size: 20px; /* iets kleiner zodat items niet wrappen */ } .header { /* display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; */ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-template-areas: "logo menu" "actions actions"; column-gap: 1rem; row-gap: 1rem; align-items: center; padding: 1rem; } .header .logo { grid-area: logo; } .header nav.topmenu { grid-area: menu; justify-self: end; } .header .zoekhamburgerwrapper { grid-area: actions; display: flex; justify-self: end; width: 100%; justify-content: space-between; } .tekst01 td, .tekst02 td, .tekst03 td { display: flex; flex-direction: column; } /*.overelaa-jaar {*/ /* padding-bottom: 1rem !important;*/ /*}*/ } @media (max-width: 1200px) and (min-width: 992px) { .mod_hoe_wij_werken .tekstblokken a { padding: 3px 12px !important; } } @media (max-width: 1200px) { .om-baan .col-lg-6:nth-child(2), .om-baan .col-lg-6.tekst { margin-top: 2rem; } .header .menu { margin-top: 0px; width: 100%; } .header .logo img { margin-top: 15px; } .com-tags-kalender-date-box { margin-right: 10px; } header.site-header { z-index: 1000; } .secondary-header .container { position: relative; } ul#mod-menu140 { margin-right: 0; white-space: nowrap; } .header .logo img { max-width: 5.5rem; } .overelaa-jaar a.btn-secondary { position: relative; bottom: 0; white-space: nowrap; } .menu-blokje { margin-top: 2rem; width: 100%; } } @media (max-width: 1024px) { /* .megamenu-watwedoen h2 { width: 100%; } */ .megamenu-nieuws .nieuws-weergave { display: flex; flex-direction: column; } /* .megamenu-modules.megamenu-overelaa .overelaa-jaar { width: 100%; } .megamenu-overelaa h2 { width: 100%; } */ .review-slider .reviewsslider-controls .prev { left: 0; } .review-slider .reviewsslider-controls .next { right: 0; } .tns-nav { left: 10px; } } @media (min-width: 992px) { .zoeken-mobiel { display: none; } } @media (max-width: 992px) { .zoeken { display: none; } blockquote::before { left: -15vw; } .baan-style-licht-oranje.honingraat-honingraat.honingraat-positie-rechts::before { content: none; } .btn-secondary { padding: 6px 8px; } header.site-header { height: 190px; z-index: 3; } /* Wit zoekvenster */ .zoekmobiel { display: flex; align-items: center; } .zoekmobiel .input-group { white-space: nowrap; flex-wrap: nowrap; } .zoekmobiel .btn { width: 50px; /* padding-left: 60px; */ overflow: hidden; white-space: nowrap; background-image: url(../images/search.svg); /* background-size: contain; */ background-repeat: no-repeat; background-size: 51%; background-position: center; display: inline-block; position: relative; color: #fff; } .megamenu-watwedoen .custom { display: flex; flex-direction: column; } .megamenu-overelaa .koptekst { flex-direction: column; } .megamenu-overelaa .mod-custom { width: 100%; } .megamenu-nieuws article.mod-articles-item img { display: none; } ul#mod-menu1 { width: 100%; flex-direction: column; } ul#mod-menu1 > li > a, ul#mod-menu1 > li > button.mod-menu__toggle-sub { width: 100%; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #707070; } ul#mod-menu1 > li > a::after, ul#mod-menu1 > li > button.mod-menu__toggle-sub::after { } .review-slider .reviewsslider-controls .next { right: 0; } .review-slider .reviewsslider-controls .prev { left: 0; } .tns-nav { left: 15px; } .mod-menu__toggle-sub[aria-expanded="true"] + .mod-menu__sub { position: relative; width: 100%; } .megamenu-nieuws #mod-custom112 h2 { display: none; } .megamenu-nieuws #mod-custom112 p { margin-bottom: 0; } .megamenu-nieuws .mod-articles-item { padding: 16px 16px 63px 16px !important; } .megamenu-nieuws .nieuws-weergave:before { padding-top: 1rem; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); } .megamenu-watwedoen .moduletable h2 { margin-top: 1rem; } .megamenu-watwedoen h2 { width: 100%; } .megamenu-nieuws .nieuws-weergave { display: flex; flex-direction: column; } .megamenu-modules.megamenu-overelaa .overelaa-jaar { width: 100%; } .megamenu-overelaa h2 { width: 100%; } /* OFFCANVAS */ .offcanvas.offcanvas-end { width: 90%; } /*==== PRIK BORD ==== */ .prikborditem { padding-left: 0; margin-bottom: 5%; } .project-rechts { margin: 2rem 0 } .social-media-icons { gap: 2.2rem; } .tekst01 td, .tekst02 td, .tekst03 td { display: flex; flex-direction: column; } .footer2-knoppen { flex-direction: column; gap: 0; } .elaa-row { flex-direction: column; align-items: flex-start; } } /* Footer */ footer.container .col-md-4.footer02 p { text-align: left; } footer.container .col-md-4.footer03 p { text-align: left; } footer.container .col-md-4 { padding: 2rem !important; /*width: 100% !important;*/ display: flex; align-items: center; } footer.container .col-md-4.footer03 { text-align: left !important; } footer.container .col-md-4.footer03 p { text-align: left !important; } footer.container .col-md-4.footer02 p, footer.container .col-md-4.footer02 p:first-child { text-align: left !important; } footer.container .col-md-4.footer02 .mod-custom { justify-items: start !important; } .form-inline { display: none; } /* ============================================= MOBIEL — max 767px ============================================= */ @media only screen and (max-width: 768px) { .header .logo img { width: 55px; height: 55px; margin-top: -20px; } .footer02 { background-image: none; border-top: dotted 1px var(--grijs); border-bottom: dotted 1px var(--grijs); } .jaarblokken #mod-custom170 { display: block; } .om-baan.baan-type-6 .row { margin-bottom: 4rem; margin-top: -2rem; } .artikel-header .header-titel { word-break: break-word; } #mod-custom170 > .moduletable.overelaa-jaar.col-md-4 { padding: 0px; margin-bottom: 2rem; } .kalender-info { margin-bottom: 5rem; } .megamenu-modules .moduletable.leesluisterkijk { margin-bottom: 2rem; width: 100%; } .megamenu-modules.megamenu-nieuws .om-megamenu { display: block; } .kalender-layout { padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } .home-pagina .artikel-header { padding-top: 3rem; } .tns-nav { left: 0; } .project-trots-content p { font-size: 20px; } .projecten-rechterkolom { margin-top: 5rem; } .project-trots::before, blockquote::before { width: 101vw; } blockquote::before { left: -16vw; width: 117vw; } .com-tags-kalender-link { flex-wrap: wrap; } .review-slider .reviewsslider-controls { top: 94%; } .elaa-row { display: block; } .navbar-toggler-icon { display: block; } .reviewsslider.tns-item .inner { display: block; } .hidden-desktop { display: block; } .hidden-mobile { display: none; } .prikborditem { padding-left: 0; margin-bottom: 5%; } .tekst01 td, .tekst02 td, .tekst03 td { border-radius: 20px; display: flex; flex-wrap: nowrap; width: fit-content; flex-direction: column; } /* Elaa/ROS */ .elaa-row { gap: 1rem !important; } .ros-row img { width: 180px !important; } /* Footer knoppen onder elkaar op mobiel */ footer.container .col-md-4.footer02 .mod-custom { grid-template-columns: 1fr !important; justify-items: start !important; } footer.container .col-md-4.footer02 .mod-custom p.btn-primary, footer.container .col-md-4.footer02 .mod-custom p:last-child { grid-column: 1 !important; justify-self: start !important; } footer.container .col-md-4.footer02 .mod-custom p.btn-primary { grid-row: 3 !important; } footer.container .col-md-4.footer02 .mod-custom p:last-child { grid-row: 4 !important; } .footer2-knoppen { flex-direction: column; gap: 0; } /* Socket */ .socket { padding: 1.2rem 2rem !important; } .socket .container { flex-direction: column !important; text-align: center !important; gap: 0.5rem !important; } .socket nav.footermenu ul { justify-content: center !important; padding: 8px 0 !important; } .form-inline { display: none; } ul.mod-articles-items.mod-articles-grid.grid-cols-2 { display: grid !important; grid-template-columns: 1fr !important; gap: 2.4rem; list-style: none !important; padding: 0; margin: 0 !important; } } } /* ============================================= KLEIN MOBIEL — max 480px ============================================= */ @media (max-width: 480px) { blockquote::before { left: -1rem; } ul.mod-articles-items.mod-articles-grid.grid-cols-2 { display: grid !important; grid-template-columns: 1fr !important; gap: 2.4rem; list-style: none !important; padding: 0; margin: 0 !important; } .row.hoe-wij-werken.mod-articles-items { padding-bottom: 0; display: flex; flex-direction: column; } .row.hoe-wij-werken .menu-blokje { width: 100%; } .overelaa-jaar .custom { margin-bottom: 1.2rem; } /*===== PRIK BOARD ======*/ .prikborditem { padding-left: 3%; margin-bottom: 10%; } /*menu zoek*/ .form-inline { display: none; } /*===== FOOTER =====*/ footer.container .col-md-4 { padding: 1.5rem !important; } }