/* ============================================ GENERAL =============================================*/ /* Darkmode effect */ /* body { background-color: #1E1F21; position: relative; } */ /* body::before { content: ''; position: fixed; inset: 0; background: var(--bg-parralax) center / cover no-repeat; opacity: 0.1; z-index: -1; pointer-events: none; } */ /* Lightmode effect */ /* body { background-color: #F0F0F0; position: relative; } */ /* body::before { content: ''; position: fixed; inset: 0; background: var(--bg-parralax) center / cover no-repeat; opacity: 0.25; z-index: -1; pointer-events: none; } */ /* Lightmode v2 effect */ body { background-color: #F0F0F0; position: relative; } body::before { content: ''; position: fixed; inset: 0; background: var(--bg-parralax) center / cover no-repeat; opacity: 0.5; z-index: -1; pointer-events: none; } figure {margin: 0;} :is(h1,h2) {position: relative; padding-bottom: 24px;} :is(h1,h2)::after {content: ''; position: absolute; width: 300px; height: 2px; top: 100%; left: 0; background: var(--text-color);} .center {display: flex; justify-content: center; align-items: center;} .center :is(h1,h2) {position: relative; width: fit-content; padding-bottom: 0;} .center :is(h1,h2)::before {content: ''; position: absolute; width: 70px; height: 2px; top: 50%; transform: translateY(-50%); right: calc(100% + 24px); background: var(--text-color);} .center :is(h1,h2)::after { content: ''; position: absolute; width: 70px; height: 2px; top: 50%; transform: translateY(-50%); left: calc(100% + 24px); background: var(--text-color);} :is(h1,h2):has( + :is(.text,p,ul)) {margin-bottom: 24px;} a:is(:focus-visible) {outline: 4px solid var(--text-color) !important;} /* ============================================ Animated components - FOUC fix =============================================*/ /* Voorkomt flits voordat de animaties starten. Vereist class="wow-loading" op de -tag (zie template.php / template-vervolg.php), die in front-vervolg.js één keer permanent verwijderd wordt bij window.load. Selectors lopen 1-op-1 mee met de applyWow()-aanroepen in front-vervolg.js. */ html.wow-loading .container-fluid.banner figure, html.wow-loading .center:has(h1, h2), html.wow-loading .block.list.cards .swiper-slide, html.wow-loading .block.content.pe-xl-1col, html.wow-loading .webpage-col.col-xl-6:not(.order-xl-1) .block.html.picture, html.wow-loading .block.content.image-text, html.wow-loading .webpage-col.col-xl-6.order-xl-1 .block.html.picture, html.wow-loading .block.content.ps-xl-1col, html.wow-loading .webpage-col.col-lg-6 .block.content, html.wow-loading .webpage-col.col-lg-6 .block.html.contact-info, html.wow-loading .block.html.contact-bar .content, html.wow-loading .block.html.contact-bar > .btn, html.wow-loading .block.list.workflow .item, html.wow-loading .block.text-list, html.wow-loading .block.list.accordion .faq-item { opacity: 0; } /* ============================================ PAGINA TRANSITIES =============================================*/ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: fade-out 0.5s ease forwards; } ::view-transition-new(root) { animation: fade-in 0.5s ease forwards; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ============================================ TOP =============================================*/ /* ============================================ NAVIGATIE =============================================*/ /* ============================================ SLIDER/BANNER =============================================*/ .container-fluid.mainbanner { --banner-height: 100lvh; position: relative; margin-bottom: 0; width: 100%; height: fit-content; max-height: var(--banner-height); background: var(--bg-color); overflow: hidden;} .container-fluid.mainbanner .block.html.mainbanner { position: relative; height: inherit; max-height: var(--banner-height); display: flex; align-items: center;} .container-fluid.mainbanner .block.html.mainbanner::before {content: ''; position: absolute; width: 100%; height: 100%; background: var(--gradient-banner); opacity: 1; z-index: 1;} .container-fluid.mainbanner .block.html.mainbanner .video-wrap { position: relative; width: 100vw; height: var(--banner-height); overflow: hidden;} .container-fluid.mainbanner .block.html.mainbanner .video-wrap iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: var(--banner-height); min-width: 177.78dvh; min-height: 56.25vw; transform: translate(-50%, -50%); border: 0;} .container-fluid.mainbanner .block.html.mainbanner .content { padding-top: 50px; padding-bottom: 100px; position: absolute; inset: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2;} .container-fluid.mainbanner .block.html.mainbanner .content .logo {display: flex; justify-content: center;} .container-fluid.mainbanner .block.html.mainbanner .content .logo svg {} .container-fluid.mainbanner .block.html.mainbanner .content .title {text-align: start; text-wrap: balance;} .container-fluid.mainbanner .block.html.mainbanner .content .title h1 {position: absolute; visibility: hidden; } .container-fluid.mainbanner .block.html.mainbanner .content .text {text-align: center; color: var(--white);} .container-fluid.mainbanner .block.html.mainbanner .content .text h2 { color: var(--white); } .container-fluid.mainbanner .block.html.mainbanner .content .text h3 { color: var(--white); } .container-fluid.mainbanner .block.html.mainbanner .content .text p:has(strong) {margin-bottom: 5px;} .container-fluid.mainbanner .block.html.mainbanner .content .text p a {color: var(--white); text-decoration: none;} /* Voorkomt scrollen op pagina's met een fullscreen mainbanner (o.a. homepage) */ html:has(body:has(.block.html.mainbanner)), body:has(.block.html.mainbanner) { height: 100dvh; overflow: hidden; overscroll-behavior: none; } /* ============================================ CONTENT =============================================*/ .picture .image img {width: 100%;} /* ============================================ FOOTER & ENDPAGE =============================================*/ body:has(.block.html.mainbanner) footer {display: none;} .container-fluid.footer-endpage {background: transparent; border-top: 1px solid var(--text-color);} .container-fluid.footer-endpage .footer {padding-top: 80px; padding-bottom: 24px;} .container-fluid.footer-endpage .footer .block.html.footer-info {display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 80px;} .container-fluid.footer-endpage .footer .block.html.footer-info .image {} .container-fluid.footer-endpage .footer .block.html.footer-info .image img {} .container-fluid.footer-endpage .footer .block.html.footer-info .content {} .container-fluid.footer-endpage .footer .block.html.footer-info .content .text {} .container-fluid.footer-endpage .footer .block.html.footer-info .content .text p {} .container-fluid.footer-endpage .endpage {color: var(--text-color);} .container-fluid.footer-endpage .endpage .content { padding-top: 24px; display: flex; gap: 12px 24px; border-top: 1px solid var(--text-color);} .container-fluid.footer-endpage .endpage .content .copy {} .container-fluid.footer-endpage .endpage .content .menu {} .container-fluid.footer-endpage .endpage .content .menu ul {} .container-fluid.footer-endpage .endpage .content .menu ul li {} .container-fluid.footer-endpage .endpage .content .menu ul li a {color: var(--text-color);} .container-fluid.footer-endpage .endpage .content .lr {flex: 1; text-align: end;} /* ============================================ MOBIEL =============================================*/ /* --------------------------------------- */ @media only screen and (max-width: 1399px) { } /* --------------------------------------- */ @media only screen and (max-width: 1199px) { } /* --------------------------------------- */ @media only screen and (max-width: 991px) { :root {--row-space: 75px;} .container-fluid.navigation .navbar .navbar-brand {display: block; max-width: 75px;} .container-fluid.navigation .navbar .navbar-toggler {display: flex;} .container-fluid.footer-endpage {--footer-space: calc(var(--row-space) / 2);} .container-fluid.footer-endpage .footer {padding-top: var(--footer-space);} .container-fluid.footer-endpage .footer .block.html.footer-info {padding-bottom: var(--footer-space);} } /* --------------------------------------- */ @media only screen and (max-width: 767px) { .container-fluid.footer-endpage .footer .block.html.footer-info {flex-direction: column; align-items: center; gap: 24px; } .container-fluid.footer-endpage .endpage .content {flex-direction: column; align-items: center;} } /* --------------------------------------- */ @media only screen and (max-width: 575px) { :root { --row-space: 48px; --row-space-big: calc(var(--row-space) * 1.1); } :is(h1,h2) {padding-bottom: 12px; width: fit-content;} :is(h1,h2)::after {width: calc(100% - 2ch);} .center {flex-direction: column; } .center :is(h1,h2) {display: flex; flex-direction: column; gap: 12px 0;} .center :is(h1,h2)::before {content: ''; position: relative; display: block; width: 80%; height: 2px; top: 0px; transform: translateY(0px); left: 10%; } .center :is(h1,h2)::after { content: ''; position: relative; display: block; width: 80%; height: 2px; top: 0px; transform: translateY(0px); left: 10%; } } /* --------------------------------------- */ @media only screen and (max-width: 479px) { } /* ====== Utility: padding-start & padding-end per kolom per breakpoint (min-width) ====== */ /* 1 col = calc(var(--container-width) / 12 * 1) 2 col = calc(var(--container-width) / 12 * 2) */ /* --------------------------------------- */ @media only screen and (min-width: 479px) { .ps-xs-1col { padding-left: calc(var(--container-width) / 12 * 1); } .ps-xs-2col { padding-left: calc(var(--container-width) / 12 * 2); } .pe-xs-1col { padding-right: calc(var(--container-width) / 12 * 1); } .pe-xs-2col { padding-right: calc(var(--container-width) / 12 * 2); } } /* --------------------------------------- */ @media only screen and (min-width: 575px) { .ps-sm-1col { padding-left: calc(var(--container-width) / 12 * 1); } .ps-sm-2col { padding-left: calc(var(--container-width) / 12 * 2); } .pe-sm-1col { padding-right: calc(var(--container-width) / 12 * 1); } .pe-sm-2col { padding-right: calc(var(--container-width) / 12 * 2); } } /* --------------------------------------- */ @media only screen and (min-width: 767px) { .ps-md-1col { padding-left: calc(var(--container-width) / 12 * 1); } .ps-md-2col { padding-left: calc(var(--container-width) / 12 * 2); } .pe-md-1col { padding-right: calc(var(--container-width) / 12 * 1); } .pe-md-2col { padding-right: calc(var(--container-width) / 12 * 2); } } /* --------------------------------------- */ @media only screen and (min-width: 991px) { .ps-lg-1col { padding-left: calc(var(--container-width) / 12 * 1); } .ps-lg-2col { padding-left: calc(var(--container-width) / 12 * 2); } .pe-lg-1col { padding-right: calc(var(--container-width) / 12 * 1); } .pe-lg-2col { padding-right: calc(var(--container-width) / 12 * 2); } } /* --------------------------------------- */ @media only screen and (min-width: 1199px) { .ps-xl-1col { padding-left: calc(var(--container-width) / 12 * 1); } .ps-xl-2col { padding-left: calc(var(--container-width) / 12 * 2); } .pe-xl-1col { padding-right: calc(var(--container-width) / 12 * 1); } .pe-xl-2col { padding-right: calc(var(--container-width) / 12 * 2); } } /* --------------------------------------- */ @media only screen and (min-width: 1399px) { .ps-xxl-1col { padding-left: calc(var(--container-width) / 12 * 1); } .ps-xxl-2col { padding-left: calc(var(--container-width) / 12 * 2); } .pe-xxl-1col { padding-right: calc(var(--container-width) / 12 * 1); } .pe-xxl-2col { padding-right: calc(var(--container-width) / 12 * 2); } }