instead of being a direct child of . * * The stylesheet ships `body.body { display:flex; align-items:center; … }`, but * on the live site the body's class is cleared at runtime by third-party * scripts. That is inconsistent: on /over-lois and /contact the sections end up * as block-level children that span the viewport, while on the other pages they * remain flex items. The full-width rendering is the intended one (the section * backgrounds are full-bleed bands), so the rebuild reproduces that state * deterministically with #app taking over the body's role. */ body.body { display: block; } /* * flow-root gives #app its own block formatting context. Without it, the * full-height hero's top margin collapses through the empty mobile hero and * pushes the whole page down by the navbar height. */ #app { display: flow-root; width: 100%; overflow: visible; } /* * The original contact form embedded two captcha widgets: a Google reCAPTCHA v2 * checkbox (78px tall) and a Cloudflare Turnstile field whose injected wrapper * is zero-height but still counts as a flex item, which adds one extra 24px * gap. The rebuild posts to a Laravel endpoint and uses no captcha, so the * space those widgets occupied is restored here to keep the form height * identical to the original. */ .form-block .w-form-formrecaptcha { min-height: 78px; } .form-block .form::after { content: ''; display: block; } /* * Anti-flash: the app is hidden until the Satoshi webfonts are ready. The class * is added by an inline script in the root template, which also removes it on a * timeout, so the page can never stay hidden. `visibility` (not `display`) is * used so the layout and the font requests still happen while hidden. */ html.wf-fonts-loading #app { visibility: hidden; } /* * Footer credit line: two credits next to each other, each with the name as the * clickable backlink — "Design door Mr." and * "Infrastructuur & SEO door Onlinevooruit.nl". */ .footer-credit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; font-family: Satoshi, Impact, sans-serif; font-size: 14px; line-height: 150%; color: var(--_variable-collection---grey--700); } .footer-credit__part { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; } .footer-credit__separator { color: var(--_variable-collection---grey--600); } .footer-credit a { color: var(--_variable-collection---black--900); font-weight: 700; text-decoration: none; transition: color 0.18s ease; } .footer-credit a:hover { color: var(--_variable-collection---green--700); text-decoration: underline; } /* * Floating WhatsApp button, bottom right on every page. * * It uses the brand green (--green-500 = #6dbe98) instead of WhatsApp's own * #25D366, so it matches the rest of the site. The label slides out on hover * (and on keyboard focus); on touch screens it stays a plain round bubble. */ .whatsapp-bubble { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; height: 56px; padding: 0; border-radius: 999px; background-color: var(--_variable-collection---green--500); color: var(--_variable-collection---white); text-decoration: none; overflow: hidden; box-shadow: 0 14px 30px -14px rgba(30, 88, 68, 0.65); transition: background-color 0.25s ease, box-shadow 0.25s ease; } .whatsapp-bubble:hover { background-color: var(--_variable-collection---green--600); box-shadow: 0 18px 34px -14px rgba(30, 88, 68, 0.75); } .whatsapp-bubble:focus-visible { outline: 2px solid var(--_variable-collection---green--900); outline-offset: 3px; } .whatsapp-bubble__icon { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; } .whatsapp-bubble__icon svg { display: block; width: 27px; height: 27px; } .whatsapp-bubble__label { max-width: 0; padding-right: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-family: Satoshi, Impact, sans-serif; font-size: 15px; font-weight: 700; transition: max-width 0.35s ease, opacity 0.28s ease, padding-right 0.35s ease; } .whatsapp-bubble:hover .whatsapp-bubble__label, .whatsapp-bubble:focus-visible .whatsapp-bubble__label { max-width: 240px; padding-right: 22px; opacity: 1; } @media screen and (max-width: 767px) { .whatsapp-bubble { right: 16px; bottom: 16px; height: 52px; } .whatsapp-bubble__icon { flex-basis: 52px; width: 52px; height: 52px; } /* No hover on touch, so the bubble stays round. */ .whatsapp-bubble__label { display: none; } } /* * "Concept" banner for an admin previewing a page that is not published yet. */ .site-preview-banner { position: fixed; left: 50%; bottom: 24px; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px; background-color: var(--_variable-collection---black--900); color: var(--_variable-collection---white); font-family: Satoshi, Impact, sans-serif; font-size: 14px; line-height: 150%; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7); transform: translateX(-50%); } .site-preview-banner__dot { width: 10px; height: 10px; border-radius: 999px; background-color: var(--_variable-collection---green--500); } .site-preview-banner a { color: var(--_variable-collection---green--300); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .site-preview-banner a:hover { color: var(--_variable-collection---white); } @media screen and (max-width: 767px) { /* Sit above the WhatsApp bubble instead of on top of it. */ .site-preview-banner { left: 16px; right: 16px; bottom: 80px; justify-content: center; text-align: center; border-radius: 16px; transform: none; } } /* * Modal that shows another page's content — the privacy statement next to the * consent checkbox on a landing page, for example. It only renders the page * content, never the navbar or the footer. * * The panel is teleported to , so it sits outside #app; the anchors inside * need their own reset for Webflow's global `a { padding-top: 141px }`. */ body.is-modal-open { overflow: hidden; } .page-modal { position: fixed; inset: 0; z-index: 9998; /* just under the video modal (9999) */ display: flex; align-items: center; justify-content: center; padding: 24px; background-color: rgba(0, 0, 0, 0.62); } .page-modal a { padding-top: 0; } .page-modal__panel { display: flex; flex-direction: column; width: 100%; max-width: 880px; max-height: calc(100vh - 48px); background-color: var(--_variable-collection---white); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); } .page-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--_variable-collection---grey--200); } .page-modal__title { margin: 0; color: var(--_variable-collection---black--900); font-family: Satoshi, Impact, sans-serif; font-size: 20px; font-weight: 900; line-height: 130%; } .page-modal__close { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background-color: var(--_variable-collection---grey--100); color: var(--_variable-collection---black--900); cursor: pointer; transition: background-color 0.2s ease; } .page-modal__close:hover { background-color: var(--_variable-collection---grey--200); } .page-modal__close svg { width: 18px; height: 18px; display: block; } .page-modal__body { padding: 32px 32px 40px; overflow-y: auto; } .page-modal__state { margin: 0; color: var(--_variable-collection---grey--700); font-size: 15px; } .page-modal__state--error { color: var(--_variable-collection---black--800); } /* The document is narrower on its own page; here it fills the panel. */ .page-modal .legal-document { max-width: none; gap: 36px; } .page-modal .legal-document .heading-m { font-size: 22px; } @media screen and (max-width: 767px) { .page-modal { align-items: flex-end; padding: 0; } .page-modal__panel { max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; } .page-modal__body { padding: 24px 20px 32px; } } /* * The Webflow stylesheet carries a global `a { padding-top: 141px }` rule, and * every link in the original design resets it through a component class. Anchors * inside the components added in this rebuild (footer credit, legal documents, * landing pages, the blog, the concept banner) need the same reset. * * Scoping it to #app instead of listing sections one by one means a new section * can never be forgotten again — which is exactly what happened to the blog * hero, where the back link added 141px of empty space above the title. * * :where() keeps the specificity at a single element, so component classes such * as .landing-button or .button---arrow still override it. */ :where(#app) a { padding-top: 0; } /* * The city pages use the homepage hero with a photo instead of the background * video. These are the exact declarations the Webflow stylesheet applies to * `.w-background-video > video`, so the photo fills the hero identically — * including the 240px móvie wrapper of the mobile variant. */ .w-background-video > img.hero-photo { object-fit: cover; z-index: -100; background-position: 50%; background-size: cover; width: 100%; height: 100%; margin: auto; position: absolute; inset: -100%; } /* * The footer grew a fourth column ("Werkgebied"). The original 120px gap was * tuned for three columns, so it is tightened on the widths where four columns * would otherwise be squeezed. */ @media screen and (min-width: 992px) and (max-width: 1280px) { .footer-container { column-gap: 48px; } } /* * The "Tekstblok" block (rich_text) had no styling of its own: the class names * exist in the component, but the ported Webflow stylesheet never defined them, * so the block rendered as unstyled browser text. This gives it the same band * and text measure the rest of the site uses (80px band, 800px column — the * measure of the service-page texts). */ .section-rich-text { background-color: var(--_variable-collection---white); display: flex; justify-content: center; width: 100%; padding: 80px; } .rich-text-contentwrapper { width: 100%; max-width: 800px; } .rich-text-contentwrapper.is-centered { max-width: 900px; text-align: center; } /* The block's own heading already introduces the text. */ .rich-text-contentwrapper > .rich-text-block > h2:first-child, .rich-text-contentwrapper > .rich-text-block > h3:first-child { margin-top: 0; } @media screen and (max-width: 991px) { .section-rich-text { padding: 56px 5vw; } } @media screen and (max-width: 479px) { .section-rich-text { padding: 40px 5vw; } }