.colibri-accordion-content { transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; } /* Vaste basis voor alle MB-knoppen */ .mb-primary-button, .mb-secondary-button, .mb-secondary-button-dark { display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px; padding: 14px 28px !important; font-family: "Open Sans", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-decoration: none !important; border-style: solid !important; border-width: 2px !important; border-radius: 5px !important; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22); } /* Primaire knop */ .mb-primary-button, .mb-primary-button:visited { background-color: #026E9F !important; border-color: #026E9F !important; color: #FFFFFF !important; } .mb-primary-button:hover, .mb-primary-button:focus { background-color: #00AEEF !important; border-color: #00AEEF !important; color: #FFFFFF !important; text-decoration: none !important; } /* Secundaire knop op een lichte achtergrond */ .mb-secondary-button, .mb-secondary-button:visited { background-color: transparent !important; border-color: #026E9F !important; color: #026E9F !important; } .mb-secondary-button:hover, .mb-secondary-button:focus { background-color: #026E9F !important; border-color: #026E9F !important; color: #FFFFFF !important; text-decoration: none !important; } /* Secundaire knop op een donkere achtergrond */ .mb-secondary-button-dark, .mb-secondary-button-dark:visited { background-color: transparent !important; border-color: #FFFFFF !important; color: #FFFFFF !important; } .mb-secondary-button-dark:hover, .mb-secondary-button-dark:focus { background-color: #FFFFFF !important; border-color: #FFFFFF !important; color: #026E9F !important; text-decoration: none !important; } /* Eventuele tekst binnen de knop */ .mb-primary-button *, .mb-secondary-button *, .mb-secondary-button-dark * { color: inherit !important; text-decoration: none !important; } /* Kleinere horizontale padding op mobiel */ @media (max-width: 767px) { .mb-primary-button, .mb-secondary-button, .mb-secondary-button-dark { padding: 14px 20px !important; } } @media (min-width: 1024px) { .offerte-nav-vast .h-row { flex-wrap: nowrap !important; } .offerte-nav-vast .h-column-container:has( [data-placeholder-provider="navigation-spacing"] ) { display: none !important; } .offerte-nav-vast .h-column-container:has( [data-placeholder-provider="navigation-logo"] ) { flex: 0 0 9.5% !important; max-width: 9.5% !important; } .offerte-nav-vast .h-column-container:has( [data-placeholder-provider="navigation-menu"] ) { flex: 0 0 90.5% !important; max-width: 90.5% !important; } } /* Offerteformulier */ .offerte-formulier { width: 100%; max-width: 760px; margin: 0 auto; text-align: left; box-sizing: border-box; } /* Tussenkoppen */ .offerte-formulier h2 { margin: 48px 0 22px; padding-bottom: 10px; border-bottom: 2px solid #0788bd; color: #242424; font-size: 28px; line-height: 1.2; } .offerte-formulier h2:first-child { margin-top: 0; } /* Labels */ .offerte-formulier label { display: block; margin-bottom: 18px; color: #242424; font-weight: 600; line-height: 1.5; } /* Tekstvelden, keuzelijsten en tekstvak */ .offerte-formulier input[type="text"], .offerte-formulier input[type="email"], .offerte-formulier input[type="tel"], .offerte-formulier input[type="number"], .offerte-formulier input[type="date"], .offerte-formulier input[type="url"], .offerte-formulier select, .offerte-formulier textarea { display: block; width: 100% !important; max-width: 100%; min-height: 44px; margin-top: 8px; padding: 11px 14px; box-sizing: border-box; border: 1px solid #b7c6d0; border-radius: 4px; background-color: #ffffff; color: #242424; font-family: inherit; font-size: 16px; } .offerte-formulier textarea { min-height: 180px; resize: vertical; } /* Focus */ .offerte-formulier input:focus, .offerte-formulier select:focus, .offerte-formulier textarea:focus { border-color: #0788bd; outline: 2px solid rgba(7, 136, 189, 0.18); outline-offset: 1px; } /* Radio- en keuzevelden */ .offerte-formulier .wpcf7-list-item { margin: 6px 20px 6px 0; } .offerte-formulier input[type="radio"], .offerte-formulier input[type="checkbox"] { margin-right: 6px; } /* Bestandsuploads */ .offerte-formulier input[type="file"] { display: block; width: 100%; margin-top: 8px; padding: 9px; box-sizing: border-box; border: 1px solid #b7c6d0; border-radius: 4px; background-color: #ffffff; font-family: inherit; } .offerte-formulier input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; border-radius: 3px; background-color: #e8eef2; color: #242424; cursor: pointer; } /* Privacy */ .offerte-formulier .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; } .offerte-formulier .wpcf7-acceptance input { flex: 0 0 auto; margin-top: 5px; } /* Verzendknop */ .offerte-formulier input[type="submit"] { display: inline-block; margin-top: 18px; padding: 14px 28px !important; border: 0 !important; border-radius: 999px !important; background-color: #0788bd !important; color: #ffffff !important; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-transform: uppercase; cursor: pointer; } .offerte-formulier input[type="submit"]:hover, .offerte-formulier input[type="submit"]:focus { background-color: #026e9f !important; } /* Meldingen */ .offerte-formulier .wpcf7-not-valid-tip { margin-top: 6px; color: #d63638; } .offerte-formulier .wpcf7-response-output { margin: 24px 0 0 !important; } /* Voorkomt dat de vaste navigatie de formuliertitel bedekt */ #offerte-formulier { scroll-margin-top: 190px; } /* Mobiele weergave */ @media (max-width: 767px) { .offerte-formulier { padding: 0 16px; } .offerte-formulier h2 { margin-top: 38px; font-size: 25px; } .offerte-formulier input[type="submit"] { width: 100%; white-space: normal; } #offerte-formulier { scroll-margin-top: 140px; } } /* Offertenavigatie gelijk aan homepage op desktop */ @media (min-width: 1024px) { .offerte-nav-vast { padding-top: 10px !important; padding-bottom: 10px !important; } } /* Mobiel sticky-logo op 70 px houden */ @media (max-width: 767px) { .offerte-nav-vast.h-navigation_sticky .h-logo__image, .offerte-nav-vast.h-navigation_sticky .h-logo__alt-image { height: 70px !important; max-height: 70px !important; width: auto !important; } } /* Desktopuitlijning offertemenu gelijk aan homepage */ @media (min-width: 1024px) { .offerte-nav-vast .h-column-container:has( [data-placeholder-provider="navigation-logo"] ) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } .offerte-nav-vast .h-column-container:has( [data-placeholder-provider="navigation-menu"] ) { flex: 1 1 0% !important; width: auto !important; max-width: 100% !important; } .offerte-nav-vast .colibri-menu > li { margin: 0 10px !important; padding: 10px 20px !important; } .offerte-nav-vast .colibri-menu > li > a { line-height: 1.6 !important; } } /* Submenucontrast: hover, toetsenbordfocus en actieve pagina */ .h-navigation .colibri-menu .sub-menu li:hover, .h-navigation .colibri-menu .sub-menu li:focus-within, .h-navigation .colibri-menu .sub-menu li.current-menu-item, .h-navigation .colibri-menu .sub-menu li.current_page_item { background-color: #026e9f !important; } .h-navigation .colibri-menu .sub-menu li:hover > a, .h-navigation .colibri-menu .sub-menu li:focus-within > a, .h-navigation .colibri-menu .sub-menu li.current-menu-item > a, .h-navigation .colibri-menu .sub-menu li.current_page_item > a { color: #ffffff !important; } /* Contactformulier gelijk aan offerteformulier – alleen contactpagina */ body.page-id-330910 .wpcf7 { width: 100%; max-width: 760px; margin: 0 auto; text-align: left; box-sizing: border-box; } body.page-id-330910 .wpcf7 label { display: block; margin-bottom: 18px; color: #242424; font-weight: 600; line-height: 1.5; } body.page-id-330910 .wpcf7 input[type="text"], body.page-id-330910 .wpcf7 input[type="email"], body.page-id-330910 .wpcf7 input[type="tel"], body.page-id-330910 .wpcf7 input[type="number"], body.page-id-330910 .wpcf7 input[type="date"], body.page-id-330910 .wpcf7 input[type="url"], body.page-id-330910 .wpcf7 select, body.page-id-330910 .wpcf7 textarea { display: block; width: 100% !important; max-width: 100%; min-height: 44px; margin-top: 8px; padding: 11px 14px; box-sizing: border-box; border: 1px solid #b7c6d0; border-radius: 4px; background-color: #ffffff; color: #242424; font-family: inherit; font-size: 16px; } body.page-id-330910 .wpcf7 textarea { min-height: 180px; resize: vertical; } body.page-id-330910 .wpcf7 input:focus, body.page-id-330910 .wpcf7 select:focus, body.page-id-330910 .wpcf7 textarea:focus { border-color: #0788bd; outline: 2px solid rgba(7, 136, 189, 0.18); outline-offset: 1px; } body.page-id-330910 .wpcf7 .wpcf7-list-item { margin: 6px 20px 6px 0; } body.page-id-330910 .wpcf7 input[type="radio"], body.page-id-330910 .wpcf7 input[type="checkbox"] { margin-right: 6px; } body.page-id-330910 .wpcf7 input[type="file"] { display: block; width: 100%; margin-top: 8px; padding: 9px; box-sizing: border-box; border: 1px solid #b7c6d0; border-radius: 4px; background-color: #ffffff; font-family: inherit; } body.page-id-330910 .wpcf7 input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; border-radius: 3px; background-color: #e8eef2; color: #242424; cursor: pointer; } body.page-id-330910 .wpcf7 .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; } body.page-id-330910 .wpcf7 .wpcf7-acceptance input { flex: 0 0 auto; margin-top: 5px; } body.page-id-330910 .wpcf7 input[type="submit"] { display: inline-block; margin-top: 18px; padding: 14px 28px !important; border: 0 !important; border-radius: 999px !important; background-color: #0788bd !important; color: #ffffff !important; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.18); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-transform: uppercase; cursor: pointer; } body.page-id-330910 .wpcf7 input[type="submit"]:hover, body.page-id-330910 .wpcf7 input[type="submit"]:focus { background-color: #026e9f !important; } body.page-id-330910 .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; color: #d63638; } body.page-id-330910 .wpcf7 .wpcf7-response-output { margin: 24px 0 0 !important; } @media (max-width: 767px) { body.page-id-330910 .wpcf7 { max-width: 100%; } } /* reCAPTCHA-badge verborgen; verplichte vermelding staat in de CF7-formulieren */ .grecaptcha-badge { visibility: hidden !important; } .mb-recaptcha-notice { margin: 12px 0 0; color: #667482; font-size: 12px; line-height: 1.5; } .mb-recaptcha-notice a { color: inherit; text-decoration: underline; } /* COMPLETE HOVER VOOR DE DRIE PROJECTAFBEELDINGEN */ .mb-project-hover { position: relative; overflow: hidden; line-height: 0; font-size: 0; } .mb-project-hover a, a.mb-project-hover { position: relative; display: block; overflow: hidden; line-height: 0; font-size: 0; } .mb-project-hover img, a.mb-project-hover img, img.mb-project-hover { display: block; width: 100%; height: auto; margin: 0; vertical-align: top; transform: scale(1); transform-origin: center; transition: transform 0.3s ease, filter 0.3s ease; } /* Tekstknop midden op de gekoppelde afbeelding */ .mb-project-hover a::after, a.mb-project-hover::after { content: "Bekijk dit project →"; position: absolute; top: 50%; left: 50%; z-index: 2; display: block; width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 2px; background: #0798c8; color: #ffffff; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; text-align: center; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; } /* Hover op desktop en tablet; mobiele schermen blijven zonder hover */ @media (min-width: 768px) { .mb-project-hover:hover img, a.mb-project-hover:hover img, img.mb-project-hover:hover { transform: scale(1.035); filter: brightness(0.70); } .mb-project-hover:hover a::after, a.mb-project-hover:hover::after { opacity: 1; transform: translate(-50%, -50%) translateY(0); } } /* Verminderde animatie respecteren */ @media (prefers-reduced-motion: reduce) { .mb-project-hover img, a.mb-project-hover img, img.mb-project-hover, .mb-project-hover a::after, a.mb-project-hover::after { transition: none; } } /* Automatische blokafstand binnen Ultimate FAQ-antwoorden */ .ewd-ufaq-faq-post > p + p, .ewd-ufaq-faq-post > p + .wp-block-buttons { margin-top: 24px !important; } /* Gutenberg/WordPress-knoppen: MB-klasse staat op de wrapper */ .wp-block-button.mb-primary-button, .wp-block-button.mb-secondary-button, .wp-block-button.mb-secondary-button-dark { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important; display: inline-flex !important; } .wp-block-button.mb-primary-button > .wp-block-button__link, .wp-block-button.mb-secondary-button > .wp-block-button__link, .wp-block-button.mb-secondary-button-dark > .wp-block-button__link { align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22); display: inline-flex !important; width: auto !important; padding: 14px 28px !important; font-family: "Open Sans", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 1px !important; text-transform: uppercase !important; text-decoration: none !important; border-style: solid !important; border-width: 2px !important; border-radius: 5px !important; } .wp-block-button.mb-primary-button > .wp-block-button__link, .wp-block-button.mb-primary-button > .wp-block-button__link:visited { background-color: #026E9F !important; border-color: #026E9F !important; color: #FFFFFF !important; } .wp-block-button.mb-primary-button > .wp-block-button__link:hover, .wp-block-button.mb-primary-button > .wp-block-button__link:focus { background-color: #00AEEF !important; border-color: #00AEEF !important; color: #FFFFFF !important; } .wp-block-button.mb-secondary-button > .wp-block-button__link, .wp-block-button.mb-secondary-button > .wp-block-button__link:visited { background-color: transparent !important; border-color: #026E9F !important; color: #026E9F !important; } .wp-block-button.mb-secondary-button > .wp-block-button__link:hover, .wp-block-button.mb-secondary-button > .wp-block-button__link:focus { background-color: #026E9F !important; border-color: #026E9F !important; color: #FFFFFF !important; } .wp-block-button.mb-secondary-button-dark > .wp-block-button__link, .wp-block-button.mb-secondary-button-dark > .wp-block-button__link:visited { background-color: transparent !important; border-color: #FFFFFF !important; color: #FFFFFF !important; } .wp-block-button.mb-secondary-button-dark > .wp-block-button__link:hover, .wp-block-button.mb-secondary-button-dark > .wp-block-button__link:focus { background-color: #FFFFFF !important; border-color: #FFFFFF !important; color: #026E9F !important; } @media (max-width: 767px) { .wp-block-button.mb-primary-button > .wp-block-button__link, .wp-block-button.mb-secondary-button > .wp-block-button__link, .wp-block-button.mb-secondary-button-dark > .wp-block-button__link { padding: 14px 20px !important; } } /* Minder ruimte rondom CFF-knoppen op alle schermformaten */ #fbuilder .fields:has(.mb-primary-button), #fbuilder .fields:has(.mb-secondary-button) { margin: 5px 0 !important; padding: 0 !important; } #fbuilder .mb-primary-button, #fbuilder .mb-secondary-button { margin: 0 !important; } /* Gelijke foto’s in de prijskaarten */ .mb-prijsfoto { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin: 0 !important; padding: 0 !important; } .mb-prijsfoto img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; display: block; margin: 0 !important; } /* CLS-correctie voor gedeelde Colibri-header */ .h-logo__image { aspect-ratio: 373 / 369; height: auto; }