/* Theme Name: 072DESIGN Portal Theme URI: https://072design.nl Description: White-label child theme voor Hello Elementor — powered by 072DESIGN Author: 072DESIGN Author URI: https://072design.nl Template: hello-elementor Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: o72design */ /* * Frontend design tokens are loaded from client-config.php. * This file provides the base styles; client-specific colors * are injected as CSS custom properties via wp_head. * * For client-specific token overrides, see client-config.php → tokens. */ /* ============================================ GOOGLE FONTS (from config, fallback here) ============================================ */ /* ============================================ CSS CUSTOM PROPERTIES — Defaults These get overridden by the config tokens injected in via o72_inject_tokens(). ============================================ */ :root { --o72-primary: #1a1f2e; --o72-primary-light: #4b5563; --o72-accent: #6b7280; --o72-accent-hover: #4b5563; --o72-surface: #f5f6f8; --o72-border: #e5e7eb; --o72-text-body: #404a64; --o72-text-heading: #000000; --o72-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1); --o72-shadow-card-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1); --o72-transition: 300ms; --o72-radius: 12px; } /* ============================================ BASE TYPOGRAPHY ============================================ */ body { font-family: var(--o72-font-family, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif); color: var(--o72-text-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--o72-font-family, 'Plus Jakarta Sans', system-ui, sans-serif); color: var(--o72-text-heading); letter-spacing: -0.02em; } p { line-height: 1.625; } /* ============================================ ACCENT STYLES ============================================ */ .icon-accent, .text-accent { color: var(--o72-accent); } .icon-container-accent { background-color: color-mix(in srgb, var(--o72-accent) 15%, transparent); } .elementor-widget-icon-list .elementor-icon-list-icon { color: var(--o72-accent); } a:hover { color: var(--o72-primary-light); } /* ============================================ BUTTON OVERRIDES ============================================ */ .elementor-button { transition: all 200ms ease-out !important; } .elementor-button:hover { transform: translateY(-1px); } .elementor-button:active { transform: translateY(0); } /* ============================================ CARD STYLES ============================================ */ .o72-card { border-radius: var(--o72-radius); box-shadow: var(--o72-shadow-card); transition: box-shadow var(--o72-transition) ease; } .o72-card:hover { box-shadow: var(--o72-shadow-card-hover); } /* ============================================ UTILITY CLASSES ============================================ */ .eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .bg-surface { background-color: var(--o72-surface); } .bg-primary { background-color: var(--o72-primary); } .text-balance { text-wrap: balance; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* ============================================ MOBILE OVERFLOW PROTECTION ============================================ */ html, body { overflow-x: hidden; } /* ============================================ 072 — LICHTER: hero-overlays + donkere onderkanten Toegevoegd 30-07-2026. Terugdraaien = dit blok weghalen (backup: style.css.bak-20260730). ============================================ */ /* Hero: de vlakke groene 90%-overlay eruit. Zachte scrim links waar de tekst staat, naar rechts vrijwel weg zodat de foto zichtbaar wordt. */ .elementor-element-3ecbe26 > .elementor-background-overlay, .elementor-element-660a164 > .elementor-background-overlay { background-color: transparent !important; background-image: linear-gradient(90deg, rgba(31,77,63,0.68) 0%, rgba(31,77,63,0.42) 38%, rgba(31,77,63,0.08) 100%) !important; opacity: 1 !important; } /* Mobiel staat de tekst over de volle breedte: daar verticaal verlopen. */ @media (max-width: 767px) { .elementor-element-3ecbe26 > .elementor-background-overlay, .elementor-element-660a164 > .elementor-background-overlay { background-image: linear-gradient(180deg, rgba(31,77,63,0.28) 0%, rgba(31,77,63,0.58) 100%) !important; } } /* Donkere onderkanten (zwarte gradienten stonden op 0.75-0.9). */ .elementor-element-11b2f5a > .elementor-background-overlay, .elementor-element-9fee22f > .elementor-background-overlay, .elementor-element-f5b4f4d > .elementor-background-overlay, .elementor-element-701fec9 > .elementor-background-overlay, .elementor-element-10aea48 > .elementor-background-overlay { opacity: 0.45 !important; } /* Menu staat nu altijd op de lichte cremebalk (transparantie uit). Kleuren overgenomen uit de na-scroll-stijl van de header zelf, zodat dit het bestaande ontwerp volgt en niets nieuws introduceert. */ .elementor-42 .elementor-element.elementor-element-4e5de84 .elementor-nav-menu--main .elementor-item { color: #78675e !important; fill: #78675e !important; } .elementor-42 .elementor-element.elementor-element-4e5de84 .elementor-nav-menu--main .elementor-item:hover, .elementor-42 .elementor-element.elementor-element-4e5de84 .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #AD5038 !important; fill: #AD5038 !important; } /* Dropdown houdt zijn eigen opmaak. Het gemarkeerde item heeft een terra achtergrond en hoort dus witte tekst te houden. */ .elementor-42 .elementor-nav-menu--dropdown a.highlighted, .elementor-42 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-42 .elementor-nav-menu--dropdown a:hover, .elementor-42 .elementor-nav-menu--dropdown a.highlighted:hover { color: #FCFBF8 !important; fill: #FCFBF8 !important; } .elementor-42 .elementor-menu-toggle { color: #78675e !important; } /* Contact-knop: op de lichte balk de gevulde terra-variant, zoals na scroll. */ .elementor-42 .elementor-element.elementor-element-d713657 .elementor-button { background-color: #AD5038 !important; border-color: #AD5038 !important; color: #FCFBF8 !important; } .elementor-42 .elementor-element.elementor-element-d713657 .elementor-button:hover, .elementor-42 .elementor-element.elementor-element-d713657 .elementor-button:focus { background-color: #7A3324 !important; border-color: #7A3324 !important; color: #FCFBF8 !important; } /* Logo was op wit gezet voor de donkere fotoachtergrond. Op de lichte balk moet het donker. Tijdelijk via een filter: er is nog geen donker logobestand. */ .elementor-42 .elementor-element-05a1a6e, .elementor-42 .elementor-widget-theme-site-logo { filter: none !important; } /* Het logo is nu zelf een donkere, transparante versie, dus er hoeft niets meer aan de kleur gedaan te worden. */ /* Hamburger stond op de crememkleur (was bedoeld op de donkere balk): op de lichte balk werd hij daardoor onzichtbaar. */ .elementor-42 .elementor-menu-toggle svg, .elementor-42 .elementor-menu-toggle i { fill: #78675e !important; color: #78675e !important; } /* CTA-secties ('Kom langs bij De Marlequi' e.d.) stonden op een donkergroen verloop van 85% naar 70%. Lichter, zodat de foto doorkomt. */ .elementor-element-b305cf4 > .elementor-background-overlay, .elementor-element-7d1b141 > .elementor-background-overlay, .elementor-element-c20b339 > .elementor-background-overlay, .elementor-element-327bfea > .elementor-background-overlay { background-image: linear-gradient(180deg, rgba(21,40,33,0.58) 0%, rgba(21,40,33,0.42) 100%) !important; opacity: 1 !important; } /* ============================================ Gravity Forms in de huisstijl Toegevoegd 30-07-2026. Gravity Forms komt met een eigen thema ("orbital"): blauwe knop, scherpe hoekjes, grijze randen. Dat staat los van de site. Hieronder trekken we het gelijk met de rest. ============================================ */ .gform_wrapper { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; max-width: 720px; margin-left: auto; margin-right: auto; } .gform_wrapper .gfield { margin-bottom: 22px; } .gform_wrapper .gfield_label, .gform_wrapper .gform-field-label { font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; font-weight: 600; color: #1F4D3F; margin-bottom: 6px; } .gform_wrapper .gfield_required, .gform_wrapper .gfield_required .gfield_required_text { color: #AD5038; } .gform_wrapper .gfield_description { font-size: 14px; color: #78675E; padding-top: 4px; } /* Invoervelden */ .gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper select, .gform_wrapper textarea { font-family: 'DM Sans', system-ui, sans-serif !important; font-size: 16px !important; /* 16px voorkomt dat iOS bij tikken inzoomt */ color: #33373D !important; background-color: #FFFFFF !important; border: 1px solid #E5E3DC !important; border-radius: 10px !important; padding: 12px 14px !important; line-height: 1.45 !important; height: auto !important; box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease; } .gform_wrapper textarea { min-height: 130px; } /* De datumkiezer heeft rechts ruimte nodig voor zijn icoon. */ .gform_wrapper input.datepicker, .gform_wrapper input.gform-datepicker { padding-right: 40px !important; } .gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus { outline: none !important; border-color: #1F4D3F !important; box-shadow: 0 0 0 3px rgba(31, 77, 63, 0.14) !important; } .gform_wrapper input::placeholder, .gform_wrapper textarea::placeholder { color: #A29A92; } /* Verstuurknop: dezelfde gevulde terra pil als elders op de site */ .gform_wrapper .gform_footer { margin-top: 8px; } .gform_wrapper .gform_footer input[type="submit"], .gform_wrapper .gform_button, .gform_wrapper button.gform_button { font-family: 'DM Sans', system-ui, sans-serif !important; background-color: #AD5038 !important; background-image: none !important; color: #FCFBF8 !important; border: 1px solid #AD5038 !important; border-radius: 50px !important; padding: 14px 34px !important; font-size: 16px !important; font-weight: 600 !important; height: auto !important; line-height: 1.2 !important; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .gform_wrapper .gform_footer input[type="submit"]:hover, .gform_wrapper .gform_button:hover, .gform_wrapper button.gform_button:hover { background-color: #7A3324 !important; border-color: #7A3324 !important; } /* Foutmeldingen in terra in plaats van het standaardrood */ .gform_wrapper .gfield_error input, .gform_wrapper .gfield_error select, .gform_wrapper .gfield_error textarea { border-color: #AD5038 !important; } .gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { background: #F7EDEA !important; border: none !important; border-left: 3px solid #AD5038 !important; border-radius: 6px !important; color: #7A3324 !important; font-size: 14px !important; padding: 8px 12px !important; } .gform_wrapper .gform_validation_errors { background: #F7EDEA !important; border: none !important; border-left: 4px solid #AD5038 !important; border-radius: 8px !important; box-shadow: none !important; } .gform_wrapper .gform_validation_errors h2 { color: #7A3324 !important; font-family: 'DM Sans', system-ui, sans-serif !important; font-size: 16px !important; } /* Bevestiging na versturen */ .gform_confirmation_wrapper, .gform_confirmation_message { background: #F1F5F2; border-left: 4px solid #1F4D3F; border-radius: 8px; padding: 18px 20px; color: #33373D; font-family: 'DM Sans', system-ui, sans-serif; } .gform_confirmation_wrapper p:last-child, .gform_confirmation_message p:last-child { margin-bottom: 0; } /* Op pagina's die het thema-sjabloon gebruiken rendert WordPress zelf de titel. Die pakte de standaardletter in plaats van die van de site. Alleen typografie, geen breedte: de indeling hoort in Elementor te staan. */ .page .entry-title { font-family: 'Fraunces', Georgia, serif; color: #1F4D3F; font-weight: 600; } /* Elementor-tellers: de widget toont een geanimeerd cijfer dat van 0 naar data-to-value loopt. Op veel plekken staat de echte waarde in de prefix ("€34,50") en is er niets om naartoe te tellen. Dan blijft die 0 staan en plakt hij achter de waarde: "€34,500". Waar geen doelwaarde is, hoort het cijfer dus niet getoond te worden. */ .elementor-counter-number[data-to-value=""] { display: none; }