.elementor-kit-7{--e-global-color-primary:#36573E;--e-global-color-secondary:#2F4C36;--e-global-color-text:#000000C9;--e-global-color-accent:#6BA53F;--e-global-color-e7e57e5:#47342D;--e-global-color-0071127:#826557;--e-global-color-4a90759:#231E1C;--e-global-color-8eeca68:#8B8481;--e-global-color-3ef1059:#363331;--e-global-color-8dcc166:#C46332;--e-global-color-9d0b6d1:#CFB02C;--e-global-color-725ce2c:#FFFFFF;--e-global-color-d2e298b:#FFFFFF38;--e-global-color-781518a:#000000;--e-global-color-53e1e8c:#0000003D;--e-global-color-c10582e:#00000021;--e-global-color-81a844d:#F6F5F3;--e-global-color-6b9e93b:#1C2E21;--e-global-typography-primary-font-family:"hagrid";--e-global-typography-primary-font-weight:300;--e-global-typography-secondary-font-family:"hagrid";--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:300;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;--e-global-typography-accent-letter-spacing:0px;--e-global-typography-2ce6ed0-font-family:"Inter";--e-global-typography-2ce6ed0-font-size:14px;--e-global-typography-2ce6ed0-font-weight:300;--e-global-typography-2ce6ed0-letter-spacing:0px;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-725ce2c );border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-d2e298b );border-radius:99px 99px 99px 99px;padding:16px 12px 16px 16px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-7 h1{font-family:"hagrid", Sans-serif;font-size:64px;font-weight:300;}.elementor-kit-7 h2{font-family:"hagrid", Sans-serif;font-size:40px;}.elementor-kit-7 h3{font-family:"hagrid", Sans-serif;font-size:32px;font-weight:400;}.elementor-kit-7 h4{font-family:"hagrid", Sans-serif;font-size:24px;font-weight:400;}.elementor-kit-7 h5{font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;letter-spacing:0px;}.elementor-kit-7 img{border-radius:16px 16px 16px 16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:32px;}.elementor-element{--widgets-spacing:32px 32px;--widgets-spacing-row:32px;--widgets-spacing-column:32px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-7{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-7 a{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-text-font-size:14px;--e-global-typography-2ce6ed0-font-size:13px;font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-7 a{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-7 h1{font-size:40px;}.elementor-kit-7 h2{font-size:28px;}.elementor-kit-7 h3{font-size:22px;}.elementor-kit-7 h4{font-size:18px;}.elementor-kit-7 h5{font-size:14px;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Mobile (default) */ .def-section { padding: 56px 16px; } .def-section-lr { padding: 0 16px; } /* Tablet + Desktop */ @media (min-width: 676px) { .def-section { padding: 80px 40px; } .def-section-lr { padding: 0 40px; } } .elementor-widget-text-editor p:last-child{ margin-bottom:0px;} h1, h2 { font-weight: 300 !important; } h3, h4 { font-weight: 400 !important; } .lichtgroen { color: #6BA53F; } .bg-zoom{ position: relative; overflow: hidden; /* preserve "content starts at bottom" behavior */ display: flex; flex-direction: column; justify-content: flex-end; } /* background image (zooms) */ .bg-zoom::before{ content: ""; position: absolute; inset: 0; background: var(--bg-img) center / cover no-repeat; transition: transform 1.5s ease; transform: scale(1); z-index: 0; } /* gradient overlay (0.5 transparency) */ .bg-zoom::after{ content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 100% ); opacity: 0.6; z-index: 1; pointer-events: none; } /* hover zoom */ @media (hover: hover){ .bg-zoom:hover::before{ transform: scale(1.06); } } /* content stays above background + overlay */ .bg-zoom > *{ position: relative; z-index: 2; } .term-badge { display: inline-block; padding: 8px; border-radius: 8px; white-space: nowrap; margin-right: 8px; } /* standaard: verbergen */ .desktop-only { display: none; } /* desktop */ @media (min-width: 1025px) { .desktop-only { display: inline; } } /* Set variable-driven color on the section */ .elementor-section.topbar{ background-color: var(--topbar-bg, #36573E) !important; } /* If Elementor overlay is enabled, this is what you actually see */ .elementor-section.topbar > .elementor-background-overlay{ background-color: var(--topbar-bg, #36573E) !important; opacity: 1 !important; /* ensure it isn't transparent */ } /* Some Elementor setups paint the inner container instead */ .topbar{ background-color: var(--topbar-bg, #36573E) !important; } .topbar > .elementor-background-overlay{ background-color: var(--topbar-bg, #36573E) !important; opacity: 1 !important; } /* Smooth scroll brand logos */ #my-carousel .swiper-wrapper{ -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; } .elementor-button { display: inline-block; transition: transform 0.25s ease; will-change: transform; } .elementor-button:hover { transform: translateX(4px); } /* Disable Elementor's translate hover for this specific button */ .filter-btn a.elementor-button:hover, .filter-btn a.elementor-button:focus, .filter-btn a.elementor-button:focus-visible{ transform: none !important; } /* Target all arrow IDs */ [id^="arrow-"] { display: inline-block; transition: transform 0.25s ease; cursor: pointer; } [id^="arrow-"]:hover { transform: scale(1.12); } b, strong { font-weight: 700 !important; } h1, h2, h3, h4, h5, h6 { font-feature-settings: 'ss05' !important; } /* ========================================================================== Gravity Forms — globale styling (alle formulieren) De Middelpas Werkt op elk Gravity Form op de site. Specificiteit: alle .elementor-kit-7s gebruiken `.gform-theme.gform_wrapper` (= 0,3,0) i.p.v. `.gform_wrapper` (= 0,2,0). Beide classes staan automatisch op elke GF wrapper → dat geeft genoeg specificiteit om van het Orbital-theme te winnen zonder ID's. PLAATSING: zet deze CSS in WP Customizer → Aanvullende CSS, óf in Elementor → Site Settings → Custom CSS. Beide laden site-wide en worden door WP Rocket meegenomen in alle Used CSS-snapshots. Niet plaatsen in Forms → Settings → Custom CSS — dat is per-form. Site fonts: Inter (text) + hagrid (headings) via Elementor globals. ========================================================================== */ /* ---------- Basis: font + reset ------------------------------------- */ .gform-theme.gform_wrapper, .gform-theme.gform_wrapper input, .gform-theme.gform_wrapper textarea, .gform-theme.gform_wrapper button, .gform-theme.gform_wrapper .gform_button, .gform-theme.gform_wrapper legend, .gform-theme.gform_wrapper label { font-family: var(--e-global-typography-accent-font-family, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Layout: rij/kolom-afstanden + zichtbaarheid ------------- */ .gform-theme.gform_wrapper .gform_fields { grid-row-gap: 18px; grid-column-gap: 24px; row-gap: 18px; column-gap: 24px; } /* Honeypot blijft verborgen */ .gform-theme.gform_wrapper .gform_validation_container { display: none !important; } /* ---------- Labels (legend + label) --------------------------------- */ .gform-theme.gform_wrapper .gfield_label, .gform-theme.gform_wrapper legend.gfield_label, .gform-theme.gform_wrapper .gform-field-label { color: #ffffff; font-weight: 400; font-size: 12px; line-height: 1.3; margin: 0 0 10px 0; padding: 0; letter-spacing: 0; } /* Sublabel verbergen (bv. dubbele "Naam" onder het hoofd-label van een single-name veld). Bij multi-input naamvelden — Voornaam + Achternaam — is dit ongewenst; pas aan als je dat type veld gebruikt. */ .gform-theme.gform_wrapper .gform-field-label--type-sub { display: none !important; } /* "(Vereist)"-tekst weg → vervangen door * direct achter labeltekst */ .gform-theme.gform_wrapper .gfield_required_text { display: none !important; } .gform-theme.gform_wrapper .gfield_required { color: inherit; margin-left: 0; } .gform-theme.gform_wrapper .gfield_required::before { content: "*"; color: #ffffff; font-weight: 400; } /* Description boven een textarea-veld krijgt label-styling (handig wanneer het echte label hidden_label heeft) */ .gform-theme.gform_wrapper .gfield--type-textarea .gfield_description { color: #ffffff; font-weight: 400; font-size: 12px; line-height: 1.3; margin: 0 0 10px 0; padding: 0; } /* ---------- Inputs (text, email, tel, url, number, password) -------- */ .gform-theme.gform_wrapper input[type="text"], .gform-theme.gform_wrapper input[type="email"], .gform-theme.gform_wrapper input[type="tel"], .gform-theme.gform_wrapper input[type="url"], .gform-theme.gform_wrapper input[type="number"], .gform-theme.gform_wrapper input[type="password"], .gform-theme.gform_wrapper textarea { background-color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 14px 18px !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 300 !important; color: #1a2a1a !important; width: 100%; max-width: 100%; box-sizing: border-box; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .gform-theme.gform_wrapper input[type="text"]:focus, .gform-theme.gform_wrapper input[type="email"]:focus, .gform-theme.gform_wrapper input[type="tel"]:focus, .gform-theme.gform_wrapper input[type="url"]:focus, .gform-theme.gform_wrapper input[type="number"]:focus, .gform-theme.gform_wrapper input[type="password"]:focus, .gform-theme.gform_wrapper textarea:focus { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } .gform-theme.gform_wrapper ::placeholder { color: #9aa0a6 !important; font-size: 12px !important; font-weight: 300 !important; opacity: 1 !important; } /* ---------- Textarea ------------------------------------------------ */ .gform-theme.gform_wrapper textarea { min-height: 140px; resize: vertical; } /* Karakter-teller verbergen */ .gform-theme.gform_wrapper .ginput_counter, .gform-theme.gform_wrapper .charleft { display: none !important; } /* ---------- Checkboxes + radiobuttons -------------------------------- */ /* Lijst-wrapper: geen list-bullets, geen extra padding */ .gform-theme.gform_wrapper .gfield_checkbox, .gform-theme.gform_wrapper .gfield_radio { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 6px; } /* Iedere optie: input en label op één regel met witruimte ertussen */ .gform-theme.gform_wrapper .gchoice { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; line-height: 1.3; } /* Het vakje zelf — kleiner */ .gform-theme.gform_wrapper input[type="checkbox"], .gform-theme.gform_wrapper input[type="radio"] { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; margin: 0 !important; flex-shrink: 0; cursor: pointer; } /* Label naast het vakje — wit, zelfde tekstgrootte als rest van form */ .gform-theme.gform_wrapper .gchoice label, .gform-theme.gform_wrapper .gfield_checkbox label, .gform-theme.gform_wrapper .gfield_radio label { color: #ffffff !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; cursor: pointer; } /* ---------- Footer + submit-knop ------------------------------------ */ .gform-theme.gform_wrapper .gform_footer { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; } /* Disclaimer rechts naast de submit-knop — alleen voor het contactform (form ID 1). Tekst wordt via CSS geïnjecteerd; verwijder hiervoor eventuele losse Elementor disclaimer-widgets. */ #gform_wrapper_1 .gform_footer::after { content: "Na je aanvraag nemen we binnen 1 werkdag contact met je op om de bestelling te bevestigen"; color: #ffffff; font-family: var(--e-global-typography-accent-font-family, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-weight: 300; line-height: 1.5; max-width: 360px; flex: 1 1 240px; } .gform-theme.gform_wrapper .gform_button, .gform-theme.gform_wrapper input[type="submit"].gform_button, .gform-theme.gform_wrapper button[type="submit"].gform_button { background-color: #6BA53F !important; color: #ffffff !important; border: 2px solid #FFFFFF38 !important; border-radius: 9999px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; padding: 8px 48px 8px 16px !important; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 20px 20px !important; -webkit-appearance: none; appearance: none; box-shadow: none !important; } .gform-theme.gform_wrapper .gform_button:hover, .gform-theme.gform_wrapper input[type="submit"].gform_button:hover, .gform-theme.gform_wrapper button[type="submit"].gform_button:hover { background-color: #5b8e34 !important; } .gform-theme.gform_wrapper .gform_button:active, .gform-theme.gform_wrapper input[type="submit"].gform_button:active, .gform-theme.gform_wrapper button[type="submit"].gform_button:active { transform: translateY(1px); } .gform_button:focus, .gform_button:focus-visible { outline: none !important; box-shadow: none !important; border-color: #FFFFFF38 !important; } /* ---------- Bevestiging na submit ----------------------------------- */ .gform_confirmation_wrapper, .gform_confirmation_message { color: #ffffff; font-family: var(--e-global-typography-accent-font-family, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; } @media (min-width: 768px) { .gform_confirmation_wrapper, .gform_confirmation_message { max-width: 50%; } } /* ---------- Mobiel -------------------------------------------------- */ @media (max-width: 640px) { .gform-theme.gform_wrapper .gform_footer { flex-direction: column; align-items: flex-start; gap: 16px; } .gform-theme.gform_wrapper .gform_button { width: 100% !important; padding-right: 48px !important; } #gform_wrapper_1 .gform_footer::after { max-width: 100%; } }/* End custom CSS */