/* Theme Name: GeneratePress Child Theme URI: https://generatepress.com Template: generatepress Author: Tom Usborne Author URI: https://tomusborne.com Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the new block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS and is translated into over 25 languages by our amazing community of users. A few of our many features include microdata integration, 9 widget areas, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover) and navigation color presets. Learn more and check out our powerful premium version at https://generatepress.com Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options Version: 3.0.2.1624259470 Updated: 2021-06-21 07:11:10 */ /* ------------------------------------------------------------------------- Tekstpagina's die van de live site zijn overgezet Deze pagina's hebben geen Elementor-opbouw maar gewone inhoud. Zonder deze regels loopt de tekst van rand tot rand over het scherm. ------------------------------------------------------------------------- */ .vts-tekstpagina{ max-width: 880px; margin: 0 auto; padding: 64px 22px 96px; color: #1D3557; font-size: 16.5px; line-height: 1.75; } .vts-tekstpagina h1{ margin: 0 0 28px; font-size: 44px; line-height: 1.12; font-weight: 800; color: #0F1E31; text-wrap: balance; } .vts-tekstpagina h2{ margin: 48px 0 14px; font-size: 28px; line-height: 1.22; font-weight: 700; color: #0F1E31; } .vts-tekstpagina h3{ margin: 34px 0 10px; font-size: 21px; line-height: 1.3; font-weight: 700; color: #0F1E31; } .vts-tekstpagina p{ margin: 0 0 18px; } .vts-tekstpagina ul, .vts-tekstpagina ol{ margin: 0 0 20px; padding-left: 24px; } .vts-tekstpagina li{ margin-bottom: 7px; } .vts-tekstpagina a{ color: #22A56E; } .vts-tekstpagina img{ max-width: 100%; height: auto; display: block; margin: 26px 0; border-radius: 10px; } .vts-tekstpagina > *:first-child{ margin-top: 0; } @media (max-width: 767px){ .vts-tekstpagina{ padding: 40px 18px 64px; font-size: 16px; } .vts-tekstpagina h1{ font-size: 31px; margin-bottom: 20px; } .vts-tekstpagina h2{ font-size: 23px; margin-top: 36px; } .vts-tekstpagina h3{ font-size: 19px; margin-top: 26px; } } /* Tabellen uit de overgezette pagina's. Op een telefoon zijn ze breder dan het scherm; daar mogen ze binnen hun eigen kader horizontaal schuiven. */ .vts-tekstpagina table{ width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: .96em; } .vts-tekstpagina th, .vts-tekstpagina td{ padding: 10px 14px; border: 1px solid #E1E8EF; text-align: left; vertical-align: top; } .vts-tekstpagina thead th{ background: #F3F7FA; font-weight: 700; } .vts-tekstpagina tbody tr:nth-child(even){ background: #FAFCFD; } @media (max-width: 767px){ .vts-tekstpagina table{ display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .vts-tekstpagina td, .vts-tekstpagina th{ padding: 9px 11px; } } /* ------------------------------------------------------------------ Paginakop voor de tekstpagina's De header van de site is doorzichtig en gaat ervan uit dat er iets donkers achter staat. Zonder kop valt het witte menu weg tegen een witte pagina. Deze kop is dezelfde als die van /projecten/: een donkere strook van 128px achter de header, met daaronder een lichte band waarin de titel staat. De maten komen een op een uit dat Elementor-sjabloon. ------------------------------------------------------------------ */ .vts-paginakop { position: relative; margin-top: -120px; padding: 178px 20px 50px; background: rgba(168, 206, 220, .2); border-radius: 0 0 0 15px; } /* de donkere strook achter de header */ .vts-paginakop::before { content: ""; position: absolute; top: 0; left: calc(100% - 1750px); width: 100%; max-width: 1750px; height: 128px; background: #0F1E31; border-radius: 0 0 0 69px; pointer-events: none; } .vts-paginakop-binnen { max-width: 1280px; margin: 0 auto; } .vts-paginakop h1 { margin: 0; font-family: 'Mulish', sans-serif; font-size: 60px; line-height: 1.08; font-weight: 700; color: #1D3557; text-align: center; text-wrap: balance; } /* de kop staat er al, dus de tekst eronder hoeft minder lucht */ .vts-paginakop + .vts-tekstpagina { padding-top: 56px; } @media (max-width: 1750px) { .vts-paginakop::before { max-width: 1550px; left: calc(100% - 1550px); } } @media (max-width: 1550px) { .vts-paginakop::before { max-width: none; left: 0; right: 0; width: auto; } } @media (max-width: 1024px) { .vts-paginakop h1 { font-size: 46px; } } @media (max-width: 767px) { .vts-paginakop { padding: 158px 20px 30px; border-radius: 0 0 0 10px; } .vts-paginakop::before { border-radius: 0 0 0 34px; } .vts-paginakop h1 { font-size: 33px; line-height: 1.15; } .vts-paginakop + .vts-tekstpagina { padding-top: 40px; } } /* ------------------------------------------------------------------ Tekst-met-beeld rijen om en om Elke rij staat in de data als [tekstkolom, fotokolom], dus met de foto rechts. De regels hieronder zetten de foto van de oneven rijen links, zodat de kanten elkaar afwisselen. Het tellen gebeurt met "of .vts-beeldrij", zodat alleen de rijen meetellen die op die pagina daadwerkelijk in de pagina staan. Dat is nodig omdat JetEngine op de landingspagina's per pagina andere blokken weglaat: een vaste kant per blok in het sjabloon klopt dan voor de ene pagina wel en voor de andere niet. Alleen op desktop; op tablet en mobiel staan de kolommen onder elkaar. ------------------------------------------------------------------ */ @media (min-width: 1025px) { /* De klasse vts-beeldrij staat op de sectie (daarmee wordt geteld), de klasse vts-beeldrij-rij op de rij zelf. Meestal is dat dezelfde container, maar bij de cta-blokken zit de rij er nog een niveau in. .e-con.e-flex erbij: Elementor's eigen regel voor .e-con-inner weegt even zwaar en staat later in de reeks, dus die wint anders. */ .e-con.e-flex.vts-beeldrij-rij > .e-con-inner, .e-con-full.e-flex.vts-beeldrij-rij { flex-direction: row-reverse; } .vts-beeldrij:nth-child(even of .vts-beeldrij) .e-con.e-flex.vts-beeldrij-rij > .e-con-inner, .e-con.e-flex.vts-beeldrij-rij:nth-child(even of .vts-beeldrij) > .e-con-inner, .vts-beeldrij:nth-child(even of .vts-beeldrij) .e-con-full.e-flex.vts-beeldrij-rij, .e-con-full.e-flex.vts-beeldrij-rij:nth-child(even of .vts-beeldrij) { flex-direction: row; } /* Het samenstelblok is geen container met twee kolommen maar een eigen raster in een html-widget. Die telt wel mee in de afwisseling, dus verplaatsen we hier zijn beeldkolom. */ .vts-beeldrij .vts-grid { grid-template-columns: 1fr 1.05fr; } .vts-beeldrij .vts-media { order: 0; } .vts-beeldrij:nth-child(even of .vts-beeldrij) .vts-grid { grid-template-columns: 1.05fr 1fr; } .vts-beeldrij:nth-child(even of .vts-beeldrij) .vts-media { order: 2; } /* Het V-watermerk in deze rijen staat in de data rechts (x=744, bij foto links). Als de zigzag de rij spiegelt (foto rechts) valt de V anders achter de foto; deze regels zetten hem dan links, gespiegeld. */ .vts-beeldrij:nth-child(even of .vts-beeldrij) .e-con.e-flex.vts-beeldrij-rij::before, .e-con.e-flex.vts-beeldrij-rij:nth-child(even of .vts-beeldrij)::before, .vts-beeldrij:nth-child(even of .vts-beeldrij) .e-con-full.e-flex.vts-beeldrij-rij::before, .e-con-full.e-flex.vts-beeldrij-rij:nth-child(even of .vts-beeldrij)::before { background-position-x: 0; } /* Het subsidieblok volgt de zigzag niet: de doorsnede-afbeelding staat altijd links, zoals in het klantdesign. */ .e-con.e-flex.vts-beeldrij-rij.vts-subsidieblok, .e-con-full.e-flex.vts-beeldrij-rij.vts-subsidieblok { flex-direction: row-reverse !important; } .vts-beeldrij-rij.vts-subsidieblok::before { background-position-x: -60px !important; } } /* ============ offertewizard (schuifpui / deur / dakkapel) ============ */ /* kopband: lichte band met de donkere balk achter het doorzichtige menu */ .vts-offerte-kopband { background: #EEF5F8; height: 189px; border-bottom-left-radius: 20px; } .vts-offerte-kopband-donker { background: #0F1E31; height: 129px; margin-left: max(0px, calc(50vw - 755px)); border-bottom-left-radius: 75px 60px; } @media (max-width: 1024px) { .vts-offerte-kopband { height: 130px; } .vts-offerte-kopband-donker { margin-left: 0; height: 110px; border-bottom-left-radius: 40px 30px; } } /* stappenlijst in de donkere kolom */ .vts-wiz-stappen { list-style: none; margin: 0; padding: 0; } .vts-wiz-stappen li { display: flex; align-items: center; gap: 14px; color: #80AFC1; font-size: 16px; margin: 0 0 27px; } .vts-wiz-stappen li span { width: 28.5px; height: 28.5px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(168,206,220,.4); font-size: 14px; } .vts-wiz-stappen li.actief { color: #fff; font-weight: 600; } .vts-wiz-stappen li.actief span, .vts-wiz-stappen li.gedaan span { background: #A8CEDC; border-color: #A8CEDC; color: #0F1E31; font-weight: 700; } .vts-wiz-lijn { border: 0; border-top: 1px solid rgba(168,206,220,.25); margin: 18px 0 27px; } /* Sinds 18-09 staat die stappenlijst boven het formulier, op wit en naast elkaar. De donkere kolom is van de offertepagina's verdwenen, dus dit overschrijft het blok hierboven. */ .vts-wiz-stappen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; } .vts-wiz-stappen li { margin: 0; color: #5C7A96; } .vts-wiz-stappen li span { border-color: rgba(15,30,49,.18); } .vts-wiz-stappen li.actief { color: #0F1E31; } .vts-wiz-stappen li.actief span, .vts-wiz-stappen li.gedaan span { background: #0F1E31; border-color: #0F1E31; color: #fff; } .vts-wiz-lijn { display: none; } @media (max-width: 767px) { .vts-wiz-stappen { gap: 8px 16px; } .vts-wiz-stappen li { font-size: 14px; gap: 8px; } .vts-wiz-stappen li span { width: 24px; height: 24px; font-size: 13px; } } /* voortgang boven het formulier */ .vts-wiz-voortgang { margin-bottom: 26px; } .vts-wiz-staplabel { display: block; font-size: 13px; letter-spacing: .5em; text-transform: uppercase; color: #80AFC1; margin-bottom: 12px; } .vts-wiz-balk { height: 4px; border-radius: 2px; background: #D7E6EC; overflow: hidden; } .vts-wiz-balk i { display: block; height: 100%; background: #22A56E; border-radius: 2px; transition: width .25s; } /* de keuzevragen als pills */ .vts-wizard-form .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 12px; } .vts-wizard-form .elementor-field-subgroup .elementor-field-option { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(15,30,49,.06); border-radius: 100px; height: 40px; padding: 0 17px; width: auto; } /* Elementor zet op inline-subgroepen padding-inline-end: 10px op de optie; rechts hoort evenveel lucht als links */ .vts-wizard-form .elementor-field-subgroup .elementor-field-option { padding-inline-end: 17px !important; padding-right: 17px !important; } .vts-wizard-form .elementor-field-option label { margin: 0; font-weight: 600; font-size: 16px; line-height: 1; color: #0F1E31; cursor: pointer; letter-spacing: 0; text-transform: none; } .vts-wizard-form .elementor-field-option input { width: 17px; height: 17px; accent-color: #22A56E; margin: 0; flex: none; } /* de losse adviescheckbox is geen pill en heeft geen groepslabel */ .vts-wizard-form .elementor-field-group-advies > label { display: none; } .vts-wizard-form .elementor-field-group-advies .elementor-field-option { background: none; border: 0; padding: 0; height: auto; } .vts-wizard-form .elementor-field-group-advies .elementor-field-option label { font-weight: 400; } /* /offerte-aanvragen/: de productkeuze staat vanaf 768 px als 4 + 3 (klant 25-09, image1). Een lege regel-breker na de vierde pil (::after over de volle breedte, order 1) zet de laatste drie op rij 2; pillen houden hun eigen breedte. Niet op mobiel: daar is de subgroep een raster van 2 en zou ::after een lege cel worden. */ @media (min-width: 768px) { .vts-wizard-form .elementor-field-group-product .elementor-field-subgroup::after { content: ""; flex-basis: 100%; height: 0; order: 1; } /* de lege regel telt ook als rij, dus de rij-afstand valt twee keer: 6 + 6 = de gewone 12 */ .vts-wizard-form .elementor-field-group-product .elementor-field-subgroup { row-gap: 6px; } .vts-wizard-form .elementor-field-group-product .elementor-field-subgroup .elementor-field-option:nth-child(n+5) { order: 2; } } /* faq-categoriefilter (/veelgestelde-vragen/) */ .vts-faq-filter { display: flex; gap: 24px; justify-content: space-between; border-bottom: 1px solid #D8E2EA; overflow-x: auto; scrollbar-width: none; } /* vraaggroepen: kolommen strak tegen beide randen (Elementor-defaultpadding uit) */ .vts-faq-rij, .vts-faq-kolom { padding: 0 !important; } .vts-faq-kolom { width: calc(50% - 8px) !important; } @media (max-width: 1024px) { .vts-faq-kolom { width: 100% !important; } } .vts-faq-filter::-webkit-scrollbar { display: none; } .vts-faq-filter button { background: none; border: 0; padding: 4px 2px 15px; font-family: Mulish, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; color: #8AA3B5; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; } .vts-faq-filter button:hover { color: #0F1E31; } .vts-faq-filter button.actief { color: #0F1E31; border-bottom-color: #0F1E31; } /* contactkaarten */ .vts-contactkaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 1024px) { .vts-contactkaarten { grid-template-columns: 1fr; } } .vts-contactkaart { background: #DCEAF0; border-radius: 15px 15px 75px 15px; padding: 40px 45px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; } .vts-contactkaart-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #0F1E31; } .vts-contactkaart-kop svg { flex: none; } .vts-contactkaart-kop h3 { margin: 0; font-size: 20px; font-weight: 700; color: #0F1E31; } .vts-contactkaart p { margin: 0 0 22px; font-size: 16px; line-height: 27px; color: #1D3557; } a.vts-contactkaart-actie, .vts-contactkaart a.vts-contactkaart-actie { margin-top: auto; font-weight: 700; font-size: 18px; color: #0F1E31; text-decoration: none; } a.vts-contactkaart-actie:hover, .vts-contactkaart a.vts-contactkaart-actie:hover { color: #22A56E; } .vts-contactkaart-sub { margin-top: 10px; font-size: 14px; line-height: 20px; color: #1D3557; } /* ============ projectdetail v2 (Figma 'Project vervolg') ============ */ /* fotoband: banner + detailfoto, stekend onder de lichte kopband uit. Hoogtes zijn 16-09 verlaagd (430 -> 340) zodat de titel en de tekst eronder ook op een laag scherm meteen in beeld staan; de marges horen erbij en staan in template 9015. */ .vts-projectband { display: flex; gap: 20px; margin-bottom: -70px; } .elementor .vts-projectband img { object-fit: cover; height: 340px; border-radius: 15px; min-width: 0; flex: 1 1 62%; width: 62%; } .elementor .vts-projectband img:last-child:not(:only-child) { flex: 1 1 38%; width: 38%; border-radius: 15px 15px 75px 15px; } .elementor .vts-projectband img:only-child { flex: 1 1 100%; width: 100%; border-radius: 15px 15px 75px 15px; } /* kleine laptop (<= 1366px; klantscherm 1280x600): band korter en minder uitloop, zodat de foto's en de titel samen in beeld passen */ @media (max-width: 1366px) { .vts-projectband { margin-bottom: -60px; } .elementor .vts-projectband img, .elementor .vts-projectband img:last-child:not(:only-child), .elementor .vts-projectband img:only-child { height: 280px; } } /* tablet: naast elkaar, lager */ @media (max-width: 1024px) { .vts-projectband { margin-bottom: -60px; } .elementor .vts-projectband img, .elementor .vts-projectband img:last-child:not(:only-child), .elementor .vts-projectband img:only-child { height: 260px; } } /* mobiel: onder elkaar, volle breedte (16-09 lager: 240 -> 190) */ @media (max-width: 767px) { .vts-projectband { flex-direction: column; gap: 12px; margin-bottom: -60px; } .elementor .vts-projectband img, .elementor .vts-projectband img:last-child:not(:only-child), .elementor .vts-projectband img:only-child { flex: 0 0 auto; width: 100%; height: 190px; } } /* gecentreerde intro (categorie-kicker + h1 + tekst) */ .vts-project-kicker { font-family: Mulish, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 3.9px; text-transform: uppercase; color: #80AFC1; line-height: 16px; } .e-con.vts-project-intro { text-align: center; font-family: Mulish, sans-serif; } .vts-project-intro .e-con-inner { max-width: 780px; } .vts-project-intro .vts-project-kicker { margin-bottom: 16px; } .vts-project-intro .vts-projectveld--content_boven_de_vouw h1 { font-family: Mulish, sans-serif; font-size: 46px; line-height: 52px; font-weight: 700; color: #0F1E31; margin: 0 0 18px; } .vts-project-intro .vts-projectveld--content_boven_de_vouw p { font-family: Mulish, sans-serif; font-size: 16px; line-height: 27px; color: #1D3557; max-width: none; margin: 0 0 14px; } @media (max-width: 1366px) { .vts-project-intro .vts-projectveld--content_boven_de_vouw h1 { font-size: 42px; line-height: 48px; } } @media (max-width: 768px) { .vts-project-intro .vts-projectveld--content_boven_de_vouw h1 { font-size: 32px; line-height: 38px; margin-bottom: 14px; } } .vts-project-intro .vts-projectveld--content_boven_de_vouw a { color: #80AFC1; } /* impressiegalerij: rijen van breed + smal; het geheel rond op 75px, elke foto zelf op 15px */ .vts-impressie { display: flex; flex-wrap: wrap; gap: 20px; border-radius: 75px; overflow: hidden; } .elementor .vts-impressie img { object-fit: cover; height: 360px; border-radius: 15px; min-width: 0; } .vts-impressie img:nth-child(odd) { width: calc(57% - 10px); } .vts-impressie img:nth-child(even) { width: calc(43% - 10px); } .vts-impressie img:last-child:nth-child(odd):not(:first-child) { width: 100%; } @media (max-width: 1366px) { .elementor .vts-impressie img { height: 320px; } } @media (max-width: 768px) { .vts-impressie { gap: 12px; } .vts-impressie img, .vts-impressie img:nth-child(odd), .vts-impressie img:nth-child(even) { width: 100%; height: 200px; } } /* carousel met andere projecten */ .vts-projectcarousel-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; } .vts-projectcarousel-titel { font-size: 40px; line-height: 46px; font-weight: 700; color: #0F1E31; margin: 12px 0 0; } .vts-projectcarousel-titel span { color: #A8CEDC; } .vts-projectcarousel-pijlen { display: flex; gap: 10px; flex: none; } .vts-projectcarousel-pijlen button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(15, 30, 49, .25); background: none; color: #0F1E31; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; } .vts-projectcarousel-pijlen button:hover { background: #0F1E31; border-color: #0F1E31; color: #fff; } .vts-projectcarousel-pijlen button[data-richting="terug"] svg { transform: scaleX(-1); } .vts-projectcarousel-baan { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .vts-projectcarousel-baan::-webkit-scrollbar { display: none; } .vts-projectkaart { position: relative; flex: 0 0 calc(33.333% - 16px); scroll-snap-align: start; border-radius: 15px 15px 15px 75px; overflow: hidden; display: block; } .vts-projectkaart img { width: 100%; height: 340px; object-fit: cover; display: block; transition: transform .3s; } .vts-projectkaart:hover img { transform: scale(1.04); } .vts-projectkaart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 30, 49, 0) 40%, rgba(15, 30, 49, .82) 100%); } .vts-projectkaart-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 26px 26px 34px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .vts-projectkaart-badge { border: 1px solid rgba(255, 255, 255, .55); border-radius: 100px; padding: 3px 13px; font-size: 12px; font-weight: 600; color: #fff; text-transform: lowercase; } .vts-projectkaart-titel { font-size: 20px; line-height: 26px; font-weight: 700; color: #fff; } .vts-projectkaart-sub { font-size: 13px; color: rgba(255, 255, 255, .75); } .vts-projectcarousel-balk { height: 4px; border-radius: 2px; background: #D7E6EC; margin-top: 30px; overflow: hidden; } .vts-projectcarousel-balk i { display: block; height: 100%; border-radius: 2px; background: #5C7A96; transition: width .2s; } @media (max-width: 1024px) { .vts-projectkaart { flex-basis: calc(50% - 12px); } } @media (max-width: 640px) { .vts-projectkaart { flex-basis: 86%; } .vts-projectcarousel-titel { font-size: 30px; line-height: 36px; } } /* ============ projectdetail (single-projecten) ============ */ .vts-projectveld--content_boven_de_vouw h1 { font-size: 50px; line-height: 55px; font-weight: 700; color: #0F1E31; margin: 0 0 18px; } .vts-projectveld--content_boven_de_vouw p { font-size: 16px; line-height: 25px; color: #1D3557; max-width: 640px; margin: 0; } @media (max-width: 768px) { .vts-projectveld--content_boven_de_vouw h1 { font-size: 34px; line-height: 40px; } } .vts-projectveld--tekstveld_1 h2 { font-size: 40px; line-height: 46px; font-weight: 700; color: #0F1E31; margin: 0 0 22px; } .vts-projectveld--tekstveld_1 p { font-size: 16px; line-height: 25px; color: #1D3557; margin: 0 0 12px; } .vts-projectbeeld { position: relative; padding: 0 0 26px 26px; } .vts-projectbeeld::before { content: ""; position: absolute; left: 0; bottom: 0; top: 90px; right: 90px; background: #D8E9EF; border-radius: 15px 15px 15px 75px; } .vts-projectbeeld img { position: relative; width: 100%; height: auto; aspect-ratio: 627 / 508; object-fit: cover; border-radius: 15px 75px 15px 15px; } @media (max-width: 768px) { .vts-projectbeeld { padding: 0 0 18px 18px; } .vts-projectbeeld::before { top: 60px; right: 60px; } } .vts-projectgalerij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .vts-projectgalerij img { width: 100%; height: 280px; object-fit: cover; border-radius: 15px; } .vts-projectgalerij img:first-child { border-radius: 15px 15px 15px 75px; } @media (max-width: 1024px) { .vts-projectgalerij { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .vts-projectgalerij { grid-template-columns: 1fr; } .vts-projectgalerij img { height: 220px; } } /* ============ showcase-carousel ([vts_showcase]) ============ */ .vts-showcase { position: relative; } .vts-showcase-baan { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px calc(50% - 21%); scrollbar-width: none; } .vts-showcase-baan::-webkit-scrollbar { display: none; } .vts-showcase-item { flex: 0 0 42%; min-width: 0; scroll-snap-align: center; cursor: pointer; } .vts-showcase-item img { width: 100%; height: auto; border-radius: 15px; display: block; } .vts-showcase-pijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; border-radius: 50%; box-shadow: 0 6px 18px rgba(15, 30, 49, .22); } .vts-showcase-pijl svg { display: block; } .vts-showcase-pijl--terug { left: 3%; } .vts-showcase-pijl--terug svg { transform: scaleX(-1); } .vts-showcase-pijl--verder { right: 3%; } .vts-showcase-pijl:hover svg circle { fill: #0F1E31; } @media (max-width: 768px) { .vts-showcase-baan { gap: 16px; padding: 6px calc(50% - 37%); } .vts-showcase-item { flex-basis: 74%; } .vts-showcase-pijl svg { width: 36px; height: 36px; } .vts-showcase-pijl--terug { left: 8px; } .vts-showcase-pijl--verder { right: 8px; } } .vts-showcase-kop { font-size: 40px; line-height: 46px; font-weight: 700; color: #ACD0DD; margin: 0 0 34px; text-align: center; } .vts-showcase-kop span { color: #1D3557; } @media (max-width: 768px) { .vts-showcase-kop { font-size: 30px; line-height: 36px; } } /* showcase-verfraaiing: lichte band, signatuurhoek en diepte op het actieve beeld, vervagende randen en voortgangsstippen */ .vts-showcase { background: #EEF5F8; border-radius: 15px 75px 15px 15px; padding: 50px 0 28px; overflow: hidden; } .vts-showcase-kop { margin-bottom: 20px; } .vts-showcase-baan { padding: 18px calc(50% - 21%) 58px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .vts-showcase-item img { transition: border-radius .35s ease, box-shadow .35s ease; } .vts-showcase-item.actief img { border-radius: 15px 75px 15px 15px; box-shadow: 0 20px 42px rgba(15, 30, 49, .16); } .vts-showcase-pijl { box-shadow: 0 8px 22px rgba(15, 30, 49, .28); } .vts-showcase-stippen { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -26px 20px 0; position: relative; z-index: 2; } .vts-showcase-stip { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: rgba(15, 30, 49, .18); cursor: pointer; transition: width .3s ease, background .3s ease; } .vts-showcase-stip:hover { background: rgba(15, 30, 49, .4); } .vts-showcase-stip.actief { width: 26px; background: #22A56E; } @media (max-width: 768px) { .vts-showcase { border-radius: 15px 40px 15px 15px; padding: 32px 0 20px; } .vts-showcase-baan { padding: 12px calc(50% - 37%) 42px; } .vts-showcase-stippen { margin-top: -16px; } } /* ============ klantervaringen: reviewkaarten (live-look) ============ */ .vts-reviews-band { background: #F5F8FA; padding: 70px 20px 90px; } .vts-reviews { columns: 3; column-gap: 30px; max-width: 1240px; margin: 0 auto; } .vts-reviewkaart { break-inside: avoid; background: #fff; border-radius: 15px; box-shadow: 0 12px 34px rgba(15,30,49,.07); padding: 28px 30px 24px; margin: 0 0 30px; font-family: 'Mulish', sans-serif; } .vts-review-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .vts-sterren { color: #F6B93B; font-size: 17px; letter-spacing: 3px; line-height: 1; } .vts-review-badge { background: #EEF2F5; color: #5B6B7E; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 5px 14px; white-space: nowrap; } .vts-review-naam { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 12px 0 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: #0F1E31; } .vts-review-naam .vts-review-g { flex: none; margin-top: 3px; } .vts-review-quote { display: block; margin: 18px 0 12px; } .vts-reviewkaart p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: #33475C; } .vts-reviewkaart p:last-child { margin-bottom: 0; } @media (max-width: 1024px) { .vts-reviews { columns: 2; } } @media (max-width: 700px) { .vts-reviews-band { padding: 40px 16px 60px; } .vts-reviews { columns: 1; } } /* ============ werkwijze: intro + tijdlijn (/werkwijze/) ============ De pagina is gewone inhoud (geen Elementor); alle opmaak zit hier. Opbouw: intro met kicker en drie feiten -> lichtblauw paneel met een tijdlijn van kaarten links en rechts van een rail -> donkere afsluiter. Mulish is de sitefont en wordt geerfd; bij losse elementen buiten de tekststroom staat hij er expliciet bij. */ .vts-werkwijze { max-width: 1120px; } /* --- intro --- */ /* De intro zelf loopt over de volle breedte, alleen kop en tekst blijven smal; zo passen de drie feiten eronder op een rij. */ .vts-werkwijze-intro { text-align: center; margin: 0 0 46px; } .vts-tekstpagina .vts-werkwijze-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 7px 17px 7px 13px; background: #E4F3EC; color: #14624A; border-radius: 100px; font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 12.5px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; } .vts-werkwijze-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22A56E; } .vts-werkwijze-intro h2 { max-width: 730px; margin: 0 auto 16px; font-size: 42px; line-height: 48px; color: #0F1E31; text-wrap: balance; } .vts-werkwijze-intro p { max-width: 730px; margin: 0 auto; font-size: 16.5px; line-height: 28px; color: #33475C; } /* drie feiten onder de intro */ .vts-tekstpagina .vts-werkwijze-punten { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .vts-tekstpagina .vts-werkwijze-punten li { margin: 0; display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px 8px 13px; background: #fff; border: 1px solid #D7E6EC; border-radius: 100px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #0F1E31; } .vts-tekstpagina .vts-werkwijze-punten li::before { content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%; background: #22A56E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.9 6.3l2.6 2.6L10.1 3.3' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; } /* --- tijdlijn: paneel met rail --- */ .vts-tekstpagina .vts-tijdlijn { list-style: none; max-width: none; margin: 0; padding: 54px 44px 56px; position: relative; background: #EEF5F8; border-radius: 24px; } .vts-tijdlijn::before { /* de rail: begint bij het eerste rondje en dooft onderaan uit */ content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 78px; bottom: 60px; width: 2px; background: linear-gradient(180deg, #22A56E 0%, #22A56E 62%, rgba(34, 165, 110, 0) 100%); } /* --- de stappen als kaarten, om en om links en rechts --- */ .vts-tekstpagina .vts-tijdlijn-stap { position: relative; width: calc(50% - 52px); margin: 0 0 24px; padding: 24px 26px 26px; background: #fff; border-radius: 16px; box-shadow: 0 10px 26px rgba(15, 30, 49, .06); transition: transform .18s ease, box-shadow .18s ease; } /* om en om links en rechts, en iets in elkaar geschoven zodat de zigzag als een geheel leest */ .vts-tekstpagina .vts-tijdlijn-stap + .vts-tijdlijn-stap { margin-top: -70px; } .vts-tekstpagina .vts-tijdlijn-stap:nth-child(even) { margin-left: auto; } .vts-tekstpagina .vts-tijdlijn-stap:last-child { margin-bottom: 0; background: #F2FAF6; } .vts-tekstpagina .vts-tijdlijn-stap:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(15, 30, 49, .10); } /* het streepje van de kaart naar de rail */ .vts-tijdlijn-stap::after { content: ""; position: absolute; top: 48px; width: 29px; height: 2px; background: #C3DCE7; } .vts-tijdlijn-stap:nth-child(odd)::after { right: -29px; } .vts-tijdlijn-stap:nth-child(even)::after { left: -29px; } /* het genummerde rondje op de rail */ .vts-tijdlijn-nr { position: absolute; top: 26px; width: 46px; height: 46px; border-radius: 50%; background: #0F1E31; color: #fff; font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 7px #EEF5F8; } .vts-tijdlijn-stap:nth-child(odd) .vts-tijdlijn-nr { left: auto; right: -75px; } .vts-tijdlijn-stap:nth-child(even) .vts-tijdlijn-nr { left: -75px; right: auto; } .vts-tijdlijn-stap:last-child .vts-tijdlijn-nr { background: #22A56E; } .vts-werkwijze .vts-tijdlijn h3 { margin: 0 0 8px; font-size: 20px; line-height: 27px; color: #0F1E31; } .vts-werkwijze .vts-tijdlijn p { margin: 0; max-width: 70ch; font-size: 15.5px; line-height: 26px; color: #33475C; } /* --- afsluiter --- */ .vts-werkwijze-cta { position: relative; overflow: hidden; margin: 56px 0 0; padding: 52px 48px 54px; background: #0F1E31; border-radius: 24px; text-align: center; } .vts-werkwijze-cta::before { /* zachte groene gloed rechtsboven */ content: ""; position: absolute; top: -140px; right: -90px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(34, 165, 110, .30) 0%, rgba(34, 165, 110, 0) 70%); pointer-events: none; } .vts-tekstpagina .vts-werkwijze-cta h2 { position: relative; margin: 0 0 12px; font-size: 32px; line-height: 40px; color: #fff; } .vts-tekstpagina .vts-werkwijze-cta p { position: relative; margin: 0 auto; max-width: 560px; font-size: 16px; line-height: 27px; color: #B9C8D6; } .vts-tekstpagina .vts-werkwijze-cta .vts-werkwijze-cta-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; max-width: none; } .vts-knop { display: inline-flex; align-items: center; gap: 10px; background: #22A56E; color: #fff !important; border: 2px solid #22A56E; border-radius: 100px; padding: 12px 28px; font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.4; text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .vts-knop:hover { background: #1B8659; border-color: #1B8659; } .vts-knop-licht { background: transparent; border-color: rgba(255, 255, 255, .28); } .vts-knop-licht:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .55); } /* --- tablet: alles onder elkaar, rail links --- */ @media (max-width: 1024px) { .vts-werkwijze-intro h2 { font-size: 36px; line-height: 43px; } .vts-tekstpagina .vts-tijdlijn { padding: 40px 28px 44px; } .vts-tijdlijn::before { left: 22px; transform: none; top: 60px; bottom: 60px; } .vts-tekstpagina .vts-tijdlijn-stap, .vts-tekstpagina .vts-tijdlijn-stap + .vts-tijdlijn-stap { width: auto; margin: 0 0 22px 52px; } .vts-tekstpagina .vts-tijdlijn-stap:nth-child(even) { margin-left: 52px; } .vts-tijdlijn-stap:nth-child(odd)::after, .vts-tijdlijn-stap:nth-child(even)::after { right: auto; left: -29px; } .vts-tijdlijn-stap:nth-child(odd) .vts-tijdlijn-nr, .vts-tijdlijn-stap:nth-child(even) .vts-tijdlijn-nr { left: -75px; right: auto; } .vts-werkwijze-cta { padding: 44px 32px 46px; } } /* --- mobiel --- */ @media (max-width: 767px) { .vts-werkwijze-intro { margin-bottom: 34px; } .vts-werkwijze-intro h2 { font-size: 29px; line-height: 36px; } .vts-werkwijze-intro p { font-size: 16px; line-height: 27px; } .vts-tekstpagina .vts-werkwijze-punten { gap: 8px; margin-top: 22px; flex-direction: column; align-items: stretch; } .vts-tekstpagina .vts-werkwijze-punten li { justify-content: flex-start; text-align: left; font-size: 13.5px; padding: 8px 15px 8px 11px; } .vts-tekstpagina .vts-tijdlijn { padding: 28px 16px 32px; border-radius: 18px; } .vts-tijdlijn::before { left: 26px; top: 46px; bottom: 46px; } .vts-tekstpagina .vts-tijdlijn-stap, .vts-tekstpagina .vts-tijdlijn-stap + .vts-tijdlijn-stap, .vts-tekstpagina .vts-tijdlijn-stap:nth-child(even) { margin: 0 0 16px 40px; padding: 18px 18px 20px; border-radius: 14px; } .vts-tekstpagina .vts-tijdlijn-stap:last-child { margin-bottom: 0; } .vts-tijdlijn-stap::after { top: 37px; width: 12px; left: -12px; } .vts-tijdlijn-nr, .vts-tijdlijn-stap:nth-child(odd) .vts-tijdlijn-nr, .vts-tijdlijn-stap:nth-child(even) .vts-tijdlijn-nr { top: 20px; left: -48px; right: auto; width: 36px; height: 36px; font-size: 14px; box-shadow: 0 0 0 6px #EEF5F8; } .vts-werkwijze .vts-tijdlijn h3 { font-size: 18px; line-height: 25px; } .vts-werkwijze .vts-tijdlijn p { font-size: 15px; line-height: 25px; } .vts-werkwijze-cta { margin-top: 40px; padding: 34px 20px 36px; border-radius: 18px; } .vts-tekstpagina .vts-werkwijze-cta h2 { font-size: 25px; line-height: 32px; } .vts-tekstpagina .vts-werkwijze-cta .vts-werkwijze-cta-knoppen { flex-direction: column; align-items: stretch; } .vts-knop { justify-content: center; } } /* ============ deuren: overzichtspagina (/deuren/) ============ Post 8937 is geen Elementor-pagina maar gewone inhoud met het sjabloon elementor_header_footer; alle opmaak staat daarom hier. Opbouw: intro met kicker, lead en drie feiten -> vijf deurkaarten met foto -> tekst-naast-beeld -> lichtblauw paneel met de zeven vinkjes -> drie materiaalkaarten -> tekst-naast-beeld -> FAQ -> donkere afsluiter. De brede onderdelen (kaarten, paneel, rijen, afsluiter) breken uit de tekstkolom: de pagina is 1120 breed, de lopende tekst blijft 820. Let op de specificiteit: `.vts-tekstpagina h2` heeft een klasse EN een type, dus de uitlijnregel hieronder heeft twee klassen nodig om te winnen. Mulish is de sitefont en wordt geerfd; losse elementen buiten de tekststroom krijgen hem expliciet mee. */ .vts-tekstpagina.vts-deuren { max-width: 1120px; } .vts-tekstpagina.vts-deuren > * { max-width: 820px; margin-left: auto; margin-right: auto; } .vts-tekstpagina.vts-deuren > .vts-breed { max-width: none; } /* de FAQ-uitklappers hebben verderop in style.css `margin: 26px 0 30px` staan (even sterk, maar later), dus die moeten hier expliciet weer gecentreerd worden */ .vts-tekstpagina.vts-deuren > .faq-items-accordion { margin-left: auto; margin-right: auto; } /* --- intro --- */ .vts-deuren-intro { text-align: center; margin-bottom: 46px; } .vts-tekstpagina .vts-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 7px 17px 7px 13px; background: #E4F3EC; color: #14624A; border-radius: 100px; font-family: 'Mulish', sans-serif; font-weight: 700; font-size: 12.5px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; } .vts-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22A56E; } .vts-tekstpagina .vts-lead { max-width: 730px; margin: 0 auto; font-size: 18.5px; line-height: 31px; color: #33475C; } /* drie feiten onder de intro */ .vts-tekstpagina .vts-pillen { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .vts-tekstpagina .vts-pillen li { margin: 0; display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px 8px 13px; background: #fff; border: 1px solid #D7E6EC; border-radius: 100px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #0F1E31; } .vts-tekstpagina .vts-pillen li::before { content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%; background: #22A56E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.9 6.3l2.6 2.6L10.1 3.3' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; } /* --- de vijf deurkaarten --- Een