/* * Page builder additions to the Webflow theme. * * Loaded AFTER tuhogroep.webflow.css. It adds only what the builder needs and * the exported stylesheet does not provide. Nothing here restyles an existing * theme class; the line clamps below are the export's own head custom code. */ /* --------------------------------------------------------------------------- * Line clamps * * Webflow kept these as custom code in the page , outside the exported * stylesheet. The cards of the overzicht row use them on every page. * ------------------------------------------------------------------------- */ .text-style-6lines, .text-style-4lines, .text-style-3lines, .text-style-2lines { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } .text-style-6lines { -webkit-line-clamp: 6; } .text-style-4lines { -webkit-line-clamp: 4; } .text-style-3lines { -webkit-line-clamp: 3; } .text-style-2lines { -webkit-line-clamp: 2; } /* --------------------------------------------------------------------------- * Navigation without the Webflow runtime * * The export relied on webflow.js to open the hamburger menu and the dropdown. * Alpine toggles the same classes; these rules cover what the runtime used to * do inline: lock the page while the mobile menu is open and show the backdrop. * ------------------------------------------------------------------------- */ .nav_link, .nav_dropdown { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body:has(.nav_component .w-nav-button.w--open) { overflow: hidden; } body:has(.nav_component .w-nav-button.w--open) .nav_dropdown_backdrop { display: block; } .nav_dropdown_list_item:last-of-type { border-bottom: none; } /* The hamburger turns into a cross; the export kept this as an embed inside the button. */ .nav_hb { --thickness: 0.2rem; --gap: 0.4rem; --rotate: 45; --width: 100%; } .w--open .nav_hb_line { transform: scaleX(0); } .w--open .nav_hb_line:first-child { transform: translateY(calc(var(--thickness) + var(--gap))) rotate(calc(var(--rotate) * 3 * 1deg)); } .w--open .nav_hb_line:last-child { transform: translateY(calc(var(--thickness) * -1 + var(--gap) * -1)) rotate(calc(var(--rotate) * 1deg)); } /* --------------------------------------------------------------------------- * Compact spacing * * A row that has to sit tight against the previous one, without inventing a * second background variant for it. * ------------------------------------------------------------------------- */ .section.is-compact { padding-top: 2rem; padding-bottom: 2rem; } /* --------------------------------------------------------------------------- * Scroll reveal * * The export hid every [data-slide="up"] element until GSAP animated it in, * which left the whole page blank whenever that script failed to load. Here * the visible state is the default: the hiding rule only applies once JS has * confirmed it can reveal them again by setting .has-reveal on . * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { [data-reveal] { transition: opacity .5s ease, transform .5s ease; } .has-reveal [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(1.25rem); } } /* --------------------------------------------------------------------------- * Accessibility helpers the export lacked * ------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* --------------------------------------------------------------------------- * Hero * * The export gives the photo hero a fixed blue overlay; the builder makes it * optional, so the text has to stay above the photo on its own. * ------------------------------------------------------------------------- */ .page-hero_bg-img .container-heading, .page-hero .container-heading { z-index: 3; position: relative; } .container-heading .button-group { margin-top: 1rem; } /* --------------------------------------------------------------------------- * Text row: paragraphs in the large body size of the homepage * ------------------------------------------------------------------------- */ .large-text.w-richtext p { font-size: inherit; } /* --------------------------------------------------------------------------- * Builder-only blocks the export has no styling for * ------------------------------------------------------------------------- */ .cms-caption { margin-top: .5rem; color: var(--text-color--text-color_medium-gray); font-size: var(--_fonts---font--text-size-small); } .cms-downloads { display: flex; flex-direction: column; gap: .25rem; margin-top: 1.5rem; } .cms-map-consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; height: 100%; padding: 2rem; text-align: center; background-color: var(--background--background-gray); } .card.c-link { color: inherit; text-decoration: none; } .card .thumbnail-image_wrapper { flex: none; } /* The company card on the "onze bedrijven" page: the export stacks the details card under a paragraph of any length, so the cards never lined up. Pushing the card to the bottom keeps a row of three level. */ .grid-child.is-company { height: 100%; } .grid-child.is-company > .card { margin-top: auto; } /* The contact cards: the export only spaced them with justify-content, so a long list of details ran the website button into the map, and four columns of 1fr grew past the container on the long e-mail addresses. */ .grid-4.c-contact { grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; } .grid-4.c-contact > .card { min-width: 0; } .card.c-contact { gap: 1.75rem; padding: 2rem; } .card.c-contact > div:first-child { display: flex; flex-direction: column; flex: 1; align-items: flex-start; width: 100%; } /* The website button sits at the bottom of the details, right above the map. */ .card.c-contact > div:first-child > .button { margin-top: auto; } .card.c-contact .contact-heading { min-height: 0; } .card.c-contact .contact-heading .h4 { margin-bottom: 1.25rem; } .card.c-contact .contact-details_list { margin-bottom: 1.75rem; } .card.c-contact .contact-details_list-item_link { overflow-wrap: anywhere; } /* The map sits at the bottom of the card, so the maps of a row line up. */ .card.c-contact .google-maps_contact-page { margin-top: auto; } .card.c-contact .cms-map-consent { gap: .75rem; padding: 1rem; } @media screen and (max-width: 1199px) { .grid-4.c-contact { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 767px) { .card.c-contact { padding: 1.5rem; } } /* The CTA band takes its photo from the builder, not from the stylesheet. */ .duurzaamheid.has-image { background-size: cover; } /* The application form on a vacancy sits in the narrow container, centred. */ .container-small { margin-left: auto; margin-right: auto; } .form_block { width: 100%; } /* A bare submit button in the export; the Livewire form uses a real button. */ button.button { cursor: pointer; font-family: inherit; font-size: inherit; line-height: inherit; } button.button[disabled] { opacity: .6; cursor: wait; } /* Form feedback the export only showed after a Webflow submit. */ .form_message.is-visible { display: flex; align-items: center; gap: .75rem; } .form_error { margin-top: .25rem; color: #b42318; font-size: var(--_fonts---font--text-size-small); } /* --------------------------------------------------------------------------- * Heading levels without a size change * * The export hangs its typography on the element (h1..h4 each set their own * font-size) and offers .h1 to .h4 as size classes. The builder promotes or * demotes a heading for structure and keeps the size through those classes, * so nothing moves on screen. * ------------------------------------------------------------------------- */ h1.h2, h3.h2 { font-size: var(--_fonts---font-size-desktop--h2-desktop); } @media screen and (max-width: 767px) { h1.h2, h3.h2 { font-size: var(--_fonts---font-size-mobile--h2-mobile); } } /* Alpine hides elements marked x-cloak until it has booted. */ [x-cloak] { display: none !important; } /* --------------------------------------------------------------------------- * Cookie banner * * A card in the bottom left corner, full width on a phone. The footer opens * it again through a bare button that must look like its sibling links. * ------------------------------------------------------------------------- */ .cookie-banner { position: fixed; z-index: 1000; left: 1rem; right: 1rem; bottom: 1rem; max-width: 32rem; padding: 1.5rem; background: #ffffff; border-radius: .75rem; box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .18); } .cookie-banner_title { margin-bottom: .5rem; font-weight: 600; } .cookie-banner_text { margin-top: 0; margin-bottom: 1rem; font-size: var(--_fonts---font--text-size-small); } .cookie-banner_text a { color: inherit; text-decoration: underline; } .cookie-banner_buttons { display: flex; flex-wrap: wrap; gap: .75rem; } .footer_cookie-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }