/* Theme Name: Gebruikte Bureaustoel - JetChair Author: NextLead B.V. Author URI: https://www.nextlead.nl/ Description: Een custom thema speciaal ontworpen & ontwikkeld door NextLead Version: 1.3 */ /* ========================================================================== JetChair — Typografie - Memimas Pro Black: site-wide koppen (h1–h6), zelfde font als logo. - Montserrat: uitsluitend single-product detailpagina (.single-product). Memimas wordt zelf-gehost (assets/fonts/), Montserrat via Google Fonts. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap"); @font-face { font-family: 'Memimas Pro'; src: url('assets/fonts/MemimasPro-Black.woff2') format('woff2'), url('assets/fonts/MemimasPro-Black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } /* Site-wide koppen → Memimas Pro Black. Bewust géén !important: laat ruimte voor specifieke overrides (zoals .single-product). */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Memimas Pro', 'Roboto', sans-serif; font-weight: 900; } /* Single product detail → Montserrat per heading-niveau. Specificiteit wint van de globale h1-h6 regel hierboven. */ .single-product h1, body.single-product h1 { font-family: 'Montserrat', sans-serif; font-weight: 600; /* SemiBold */ } .single-product h2, body.single-product h2 { font-family: 'Montserrat', sans-serif; font-weight: 500; /* Medium */ } .single-product h3, body.single-product h3 { font-family: 'Montserrat', sans-serif; font-weight: 400; /* Regular */ } /* ========================================================================== JetChair — Design tokens (huisstijl 2026) Bron: Overzicht logo en toepassingen.pdf + jetchair-spec.md ========================================================================== */ :root { --jc-blue: #1b355d; /* PMS 534C — primair donkerblauw */ --jc-green-1: #007938; /* PMS 356C — primair groen / donkere accenten */ --jc-green-2: #71a94f; /* PMS 7489C — midden groen */ --jc-green-3: #7fba27; /* PMS 376C — fel groen / CTA / prijzen */ --jc-green-4: #d0ddbc; /* PMS 7485C — licht groen / achtergronden */ --jc-white: #ffffff; --jc-gray-light: #f5f5f5; --jc-gray-border: #e0e0e0; --jc-text: var(--jc-blue); --jc-green-3-hover: #6ea622; --jc-green-1-hover: #006530; --jc-green-4-hover: #b9cc9e; /* iets donkerdere pastel voor lichte buttons */ /* Accentkleur voor actie-/saleprijzen — bewust afwijkend van JC-palet voor maximale opvalbaarheid (oranje > roze, conform feedback). */ --jc-orange-action: #f29100; } /* Smooth scroll voor alle anchor-clicks (zoals #jc-nieuwsbrief) */ html { scroll-behavior: smooth; } /* Breadcrumb-rij op single (product) pagina's — wat lucht boven */ .single .content-area .breadcrumb-row { margin-top: 20px !important; } /* Product-archive tile border kleurt mee met de categorie (spec): Bureaustoel → green-1 (donker) | Loketstoel → green-2 (midden) | Vergaderstoel → green-3 (fel) */ body.jc-group-bureaustoel .product-archive .container .product-content .products .product { border-color: var(--jc-green-1) !important; } body.jc-group-loketstoel .product-archive .container .product-content .products .product { border-color: var(--jc-green-2) !important; } body.jc-group-vergaderstoel .product-archive .container .product-content .products .product { border-color: var(--jc-green-3) !important; } /* Matching button op product-tile ook in groepskleur */ body.jc-group-bureaustoel .product-archive .container .product-content .products .product .button-orange { background: var(--jc-green-1) url("../assets/images/chair.png") no-repeat 10px 10px / 50px !important; } body.jc-group-bureaustoel .product-archive .container .product-content .products .product .button-orange:hover { background: var(--jc-green-1-hover) url("../assets/images/chair.png") no-repeat 30px 10px / 50px !important; } body.jc-group-loketstoel .product-archive .container .product-content .products .product .button-orange { background: var(--jc-green-2) url("../assets/images/chair.png") no-repeat 10px 10px / 50px !important; } body.jc-group-loketstoel .product-archive .container .product-content .products .product .button-orange:hover { background: var(--jc-green-1) url("../assets/images/chair.png") no-repeat 30px 10px / 50px !important; } /* ========================================================================== JC — Mobiele filter-sidebar (archive-product.php) Slide-in sidebar vanaf rechts (zoals mobile-menu) + full-width bottom-sticky "Filters"-button. ========================================================================== */ /* De trigger-button onderaan de viewport — full width, strak tegen de rand. padding-bottom respecteert iOS home-indicator (safe-area-inset-bottom). */ #mobile-open-filter-button { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) 20px !important; border-radius: 0 !important; background: var(--jc-green-3) !important; color: #fff !important; border: 0 !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; z-index: 50 !important; box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.15) !important; cursor: pointer !important; transition: background 200ms ease !important; } #mobile-open-filter-button:hover { background: var(--jc-green-3-hover) !important; } /* Sidebar-overlay — slide in vanaf rechts. Flex-column: content (scrollbaar) bovenaan, submit-button vast onderin. 100dvh ipv 100vh → respecteert iOS URL-balk/tab-bar. */ #mobile-filter-overlay { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: 92% !important; max-width: 420px !important; height: 100vh !important; /* fallback voor oudere browsers */ height: 100dvh !important; /* dynamic viewport — shrinkt met iOS chrome */ background: #fff !important; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18) !important; padding: 0 !important; overflow: hidden !important; /* scroll zit op #mobile-filter-content */ z-index: 9999 !important; transform: translateX(100%); transition: transform 320ms ease !important; box-sizing: border-box !important; } /* Open-state via class */ #mobile-filter-overlay.is-open { transform: translateX(0) !important; } /* Backdrop achter de sidebar — wordt via body-class zichtbaar */ .jc-filter-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 320ms ease; z-index: 9998; } body.jc-filter-open .jc-filter-backdrop { opacity: 1; pointer-events: auto; } /* Voorkom scrollen van de pagina wanneer sidebar open is */ body.jc-filter-open { overflow: hidden !important; } /* Content binnen de sidebar — scrollbare area, groeit tot de submit-button */ #mobile-filter-content { background: transparent !important; padding: 20px !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; flex: 1 1 auto !important; min-height: 0 !important; position: relative; -webkit-overflow-scrolling: touch; } #mobile-filter-content h2 { margin: 0 0 20px !important; padding-right: 40px; font-size: 20px !important; font-weight: 700 !important; color: var(--jc-blue) !important; } /* Close-button — circle rechts boven */ #mobile-close-filter-button { position: absolute !important; top: 14px !important; right: 14px !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: var(--jc-gray-light) !important; border: 0 !important; font-size: 18px !important; color: var(--jc-blue) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; line-height: 1 !important; transition: background 160ms ease !important; } #mobile-close-filter-button:hover { background: var(--jc-green-4) !important; color: var(--jc-green-1) !important; } /* Filter-headers in de sidebar */ #mobile-filter-content .wpc-filter-header { margin: 20px 0 8px !important; } #mobile-filter-content .wpc-filter-title { font-size: 14px !important; font-weight: 700 !important; color: var(--jc-blue) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; } /* Submit-filter — flex-item naast mobile-filter-content, flex-shrink: 0 → altijd onderin de sidebar, scrollt niet mee met de filter-content. env(safe-area-inset-bottom) = ruimte voor iOS home-indicator. */ #mobile-filter-overlay #submit-filter { position: static !important; flex: 0 0 auto !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) 20px !important; background: var(--jc-green-3) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; cursor: pointer !important; z-index: 10000 !important; box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.12) !important; transition: background 200ms ease !important; } #mobile-filter-overlay #submit-filter:hover { background: var(--jc-green-3-hover) !important; } /* ========================================================================== JC — FiboSearch autocomplete dropdown styling ========================================================================== */ .dgwt-wcas-suggestions-wrapp { background: #fff !important; border: 1px solid var(--jc-gray-border) !important; border-radius: 8px !important; box-shadow: 0 10px 32px rgba(27, 53, 93, 0.15) !important; overflow: hidden !important; padding: 0 !important; margin-top: 6px !important; } /* Sectie-headings (Categorieën / Producten) */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline { display: block !important; padding: 10px 18px 6px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--jc-blue) !important; background: #fff !important; border: 0 !important; cursor: default !important; pointer-events: none !important; margin: 0 !important; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-headline:hover { background: #fff !important; } /* Losse suggestie (categorie + product) — basis */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 18px !important; color: var(--jc-blue) !important; text-decoration: none !important; border: 0 !important; transition: background 160ms ease, color 160ms ease; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion:hover, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-selected { background: var(--jc-green-4) !important; color: var(--jc-green-1) !important; } /* Match-highlight via in de titel */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion strong { color: var(--jc-green-3) !important; font-weight: 700 !important; } /* Categorie-suggestie */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-tax .dgwt-wcas-st { font-size: 14px; color: var(--jc-blue); } /* Product-suggestie — layout met thumb links, info rechts */ .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-product { padding: 10px 18px !important; align-items: center !important; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si { flex-shrink: 0; width: 56px; height: 56px; display: inline-flex !important; align-items: center; justify-content: center; background: #fff !important; border-radius: 0 !important; overflow: hidden; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-content-wrapp { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-st-title { font-size: 14px; font-weight: 500; color: var(--jc-blue); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-meta { display: block !important; margin-top: 4px !important; line-height: 1.2 !important; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp { display: inline-block !important; padding-left: 0 !important; padding-right: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--jc-green-3) !important; line-height: 1 !important; vertical-align: baseline !important; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp .woocommerce-Price-amount, .dgwt-wcas-suggestions-wrapp .dgwt-wcas-sp bdi { color: var(--jc-green-3) !important; font-weight: 700 !important; display: inline !important; white-space: nowrap !important; } /* Responsive */ @media (max-width: 640px) { .dgwt-wcas-suggestions-wrapp { width: calc(100vw - 32px) !important; left: 16px !important; border-radius: 6px !important; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-si { width: 44px; height: 44px; } } /* Ankers landen net onder de sticky header i.p.v. er onder verdwijnen */ #jc-nieuwsbrief { scroll-margin-top: 120px; } /* Inline #009fe3 blauwe kleuren uit oude content overschrijven naar JC-blauw */ [style*="#009fe3"], [style*="color: #009fe3"], [style*="color:#009fe3"] { color: var(--jc-blue) !important; } /* Plugin-CSS override: add-to-offerte-button SVG had oranje bg uit een plugin */ html .add-to-cart-wrappertj .gbs-add-to-offerte-btn svg, .add-to-cart-wrappertj .gbs-add-to-offerte-btn svg, .gbs-add-to-offerte-btn svg { background: var(--jc-green-3) !important; } .gbs-add-to-offerte-btn:hover svg { background: var(--jc-green-3-hover) !important; } /* Sticky header — forceren met !important zodat plugin/template-overrides hem niet onbedoeld uitzetten op specifieke pagina-types (PDP, contact, etc). */ body > header { position: sticky !important; top: 0 !important; z-index: 50 !important; } /* Product-detailpagina: overflow-x/max-width van body verwijderen — geeft sticky-elementen een normale viewport-scroll context. */ body.single-product { overflow-x: visible !important; overflow: visible !important; max-width: none !important; } /* ========================================================================== JC — Stoelen hubpagina (template-stoelen.php) ========================================================================== */ .jc-stoelen-page { padding: 0 0 60px; } .jc-stoelen-container { position: relative; z-index: 5; max-width: 1460px !important; margin: -80px auto 0 !important; /* negatieve margin → tegels ~80px over hero */ padding: 0 40px !important; box-sizing: border-box !important; display: block !important; } @media (max-width: 1024px) { .jc-stoelen-container { margin-top: -60px !important; padding: 0 20px !important; } } @media (max-width: 768px) { .jc-stoelen-container { margin-top: -40px !important; padding: 0 16px !important; } } @media (max-width: 480px) { .jc-stoelen-container { margin-top: -24px !important; } } /* Columns-wrapper: 3 cols op desktop, 1 col op mobiel. Elke col bevat tegel + tekst samen → stacking zorgt automatisch voor tile/text/tile/text volgorde op smalle schermen. */ .jc-stoelen-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; } .jc-stoelen-col { display: flex; flex-direction: column; gap: 20px; } @media (max-width: 900px) { .jc-stoelen-columns { grid-template-columns: 1fr; gap: 28px; } .jc-stoelen-col { gap: 16px; } } @media (max-width: 768px) { .jc-stoelen-tiles { grid-template-columns: 1fr; } } .jc-stoelen-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px 16px; min-height: 320px; border-radius: 10px; text-decoration: none; color: #fff; overflow: hidden; isolation: isolate; /* mix-blend-mode scope binnen de tegel */ transition: transform 200ms ease, box-shadow 200ms ease; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } .jc-stoelen-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); } @media (max-width: 900px) { .jc-stoelen-tile { min-height: 280px; padding: 20px 14px; } } @media (max-width: 600px) { .jc-stoelen-tile { min-height: 260px; } } .jc-stoelen-tile--1 { background: var(--jc-green-1); } .jc-stoelen-tile--2 { background: var(--jc-green-2); } .jc-stoelen-tile--3 { background: var(--jc-green-3); } .jc-stoelen-tile__label { display: block; margin-bottom: 16px; font-size: 20px; font-weight: 700; letter-spacing: 0.08em; color: #fff; text-align: center; } .jc-stoelen-tile__image { max-width: 85%; max-height: 220px; height: auto; width: auto; object-fit: contain; margin: 0 auto; mix-blend-mode: multiply; /* stoel-foto blend't met tegel-achtergrond */ filter: saturate(0.95); /* zachte extra polish op de blend */ } @media (max-width: 900px) { .jc-stoelen-tile__image { max-height: 180px; } } @media (max-width: 600px) { .jc-stoelen-tile__image { max-height: 200px; } } /* --- Beschrijvende tekst per kolom (onder de tegel) --- */ .jc-stoelen-text { color: var(--jc-blue); font-size: 14px; line-height: 1.7; } .jc-stoelen-text__heading { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--jc-blue); } .jc-stoelen-text p:first-child { margin-top: 0; } .jc-stoelen-text p:last-child { margin-bottom: 0; } .jc-stoelen-text__placeholder { color: #999; font-size: 13px; margin: 0; } /* ========================================================================== JC — Diensten hubpagina (template-diensten.php) Zelfde columns-structuur als Stoelen, maar tegel ziet er anders uit: gekleurde titel-balk + dekkende foto eronder (niet blend-mode). ========================================================================== */ .jc-diensten-page { padding: 0 0 60px; } .jc-diensten-container { position: relative; z-index: 5; max-width: 1460px !important; margin: -80px auto 0 !important; padding: 0 40px !important; box-sizing: border-box !important; display: block !important; } @media (max-width: 1024px) { .jc-diensten-container { margin-top: -60px !important; padding: 0 20px !important; } } @media (max-width: 768px) { .jc-diensten-container { margin-top: -40px !important; padding: 0 16px !important; } } @media (max-width: 480px) { .jc-diensten-container { margin-top: -24px !important; } } .jc-diensten-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; } .jc-diensten-col { display: flex; flex-direction: column; gap: 20px; } @media (max-width: 900px) { .jc-diensten-columns { grid-template-columns: 1fr; gap: 28px; } .jc-diensten-col { gap: 16px; } } /* Tegel: flex-column — label boven (gekleurde balk), foto onder (full-cover) */ .jc-diensten-tile { display: flex; flex-direction: column; text-decoration: none; color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); transition: transform 200ms ease, box-shadow 200ms ease; min-height: 300px; } .jc-diensten-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); } /* Gekleurde titel-balk */ .jc-diensten-tile__label { display: block; padding: 16px 20px; text-align: center; font-size: 18px; font-weight: 700; letter-spacing: 0.08em; color: #fff; } .jc-diensten-tile--1 .jc-diensten-tile__label { background: var(--jc-green-1); } .jc-diensten-tile--2 .jc-diensten-tile__label { background: var(--jc-green-2); } .jc-diensten-tile--3 .jc-diensten-tile__label { background: var(--jc-green-3); } /* Dekkende foto eronder */ .jc-diensten-tile__media { position: relative; flex: 1; min-height: 220px; overflow: hidden; background: var(--jc-gray-light); } .jc-diensten-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } @media (max-width: 900px) { .jc-diensten-tile { min-height: 260px; } .jc-diensten-tile__media { min-height: 200px; } } /* Tekstblok onder de tegel — heading krijgt kleur van bijbehorende variant */ .jc-diensten-text { color: var(--jc-blue); font-size: 14px; line-height: 1.7; } .jc-diensten-text__heading { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; } .jc-diensten-text__heading--1 { color: var(--jc-green-1); } .jc-diensten-text__heading--2 { color: var(--jc-green-2); } .jc-diensten-text__heading--3 { color: var(--jc-green-3); } .jc-diensten-text p:first-child { margin-top: 0; } .jc-diensten-text p:last-child { margin-bottom: 0; } .jc-diensten-text__placeholder { color: #999; font-size: 13px; margin: 0; } .jc-diensten-body { color: var(--jc-blue); line-height: 1.7; margin-top: 32px; font-size: 15px; } /* ========================================================================== JC — Contact block (fc_contact.php) Layout: formulier (card) → divider → "andere vraag" heading → 4 CTA buttons → team foto ========================================================================== */ .jc-contact { padding: 32px 0 60px; } .jc-contact-container { max-width: 1100px !important; margin: 0 auto !important; padding: 0 20px !important; display: block !important; box-sizing: border-box !important; } /* --- Formulier (Gravity Forms wrapped) --- */ .jc-contact-form-wrap { background: #fff; border: 1px solid var(--jc-green-3); border-radius: 8px; padding: 32px; margin: 0 0 48px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); } .jc-contact-form-placeholder { color: #999; text-align: center; font-size: 14px; } @media (max-width: 640px) { .jc-contact-form-wrap { padding: 20px; } } /* Gravity Forms — tweekoloms layout (naam/mail pairs side-by-side) */ .jc-contact-form-wrap .gform_wrapper .gform_fields { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .jc-contact-form-wrap .gform_wrapper .gfield_type_textarea, .jc-contact-form-wrap .gform_wrapper .gfield--width-full, .jc-contact-form-wrap .gform_wrapper .gfield_type_captcha, .jc-contact-form-wrap .gform_wrapper .gform_footer { grid-column: 1 / -1; } .jc-contact-form-wrap .gfield_label { color: var(--jc-blue); font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; } .jc-contact-form-wrap input[type="text"], .jc-contact-form-wrap input[type="email"], .jc-contact-form-wrap input[type="tel"], .jc-contact-form-wrap input[type="number"], .jc-contact-form-wrap textarea { width: 100% !important; padding: 10px 12px !important; border: 1px solid var(--jc-gray-border) !important; border-radius: 4px !important; font-size: 14px !important; color: var(--jc-blue) !important; background: #fff !important; box-sizing: border-box !important; } .jc-contact-form-wrap textarea { min-height: 120px !important; resize: vertical !important; } .jc-contact-form-wrap input:focus, .jc-contact-form-wrap textarea:focus { outline: none !important; border-color: var(--jc-green-3) !important; box-shadow: 0 0 0 3px rgba(127, 186, 39, 0.15) !important; } .jc-contact-form-wrap .gform_footer { display: flex; justify-content: flex-end; margin-top: 8px !important; } .jc-contact-form-wrap .gform_button, .jc-contact-form-wrap input[type="submit"] { background: var(--jc-green-3) !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; padding: 12px 28px !important; font-weight: 700 !important; cursor: pointer; transition: background 200ms ease; } .jc-contact-form-wrap .gform_button:hover, .jc-contact-form-wrap input[type="submit"]:hover { background: var(--jc-green-3-hover) !important; } @media (max-width: 640px) { .jc-contact-form-wrap .gform_wrapper .gform_fields { grid-template-columns: 1fr; } } /* --- Divider --- */ .jc-contact-divider { border: 0; border-top: 1px solid var(--jc-blue); margin: 0 0 32px; opacity: 0.2; } /* --- "Heb je een andere vraag?"-blok --- */ .jc-contact-other { margin-bottom: 24px; } .jc-contact-other__heading { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--jc-blue); text-transform: uppercase; letter-spacing: 0.04em; } .jc-contact-other__subtitle { margin: 0; color: var(--jc-blue); font-size: 14px; line-height: 1.6; max-width: 720px; } /* --- 4 CTA-buttons (tag-shape per ontwerp) --- */ .jc-contact-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 40px; } .jc-contact-cta { position: relative; flex: 0 1 auto; display: inline-flex; align-items: stretch; min-width: 180px; margin-right: 14px; /* ruimte voor chevron-tip pseudo */ background: var(--jc-green-3); color: #fff; text-decoration: none; border-radius: 6px 0 0 6px; font-weight: 700; letter-spacing: 0.04em; transition: background 200ms ease; overflow: visible; } .jc-contact-cta:hover { background: var(--jc-green-3-hover); color: #fff; } /* WhatsApp-variant — donker groen (jc-green-1) */ .jc-contact-cta--dark { background: var(--jc-green-1); } .jc-contact-cta--dark:hover { background: var(--jc-green-1-hover); } /* Donkerdere icoon-zone links */ .jc-contact-cta__icon { display: inline-flex; align-items: center; justify-content: center; padding: 12px 14px; background: rgba(0, 0, 0, 0.12); border-radius: 6px 0 0 6px; color: #fff; flex-shrink: 0; } .jc-contact-cta__label { display: inline-flex; align-items: center; padding: 12px 14px; gap: 8px; font-size: 13px; white-space: nowrap; } .jc-contact-cta__sublabel { font-weight: 500; letter-spacing: 0.02em; text-transform: none; } .jc-contact-cta__chevron { display: inline-flex; align-items: center; padding: 0 12px 0 6px; color: #fff; flex-shrink: 0; } /* Chevron-tip pseudo (tag-shape rechts) */ .jc-contact-cta::after { content: ''; position: absolute; left: 100%; top: 0; height: 100%; width: 14px; background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 0 3px 3px 0; } @media (max-width: 700px) { .jc-contact-ctas { flex-direction: column; } .jc-contact-cta { width: 100%; min-width: 0; margin-right: 14px; } } /* --- Team foto onderaan --- */ .jc-contact-team { margin-top: 24px; } .jc-contact-team img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 8px; } /* Lijst-styling in de WYSIWYG tekst-kolommen en body van hub-paginas. Build-CSS heeft her en der `list-style: none` regels die via hoge specificiteit binnenkomen — daarom met !important afdwingen. */ .jc-stoelen-text ul, .jc-diensten-text ul, .jc-stoelen-body ul, .jc-diensten-body ul { list-style: disc outside !important; list-style-type: disc !important; list-style-position: outside !important; padding-left: 22px !important; margin: 8px 0 !important; } .jc-stoelen-text ol, .jc-diensten-text ol, .jc-stoelen-body ol, .jc-diensten-body ol { list-style: decimal outside !important; list-style-type: decimal !important; padding-left: 22px !important; margin: 8px 0 !important; } .jc-stoelen-text ul li, .jc-diensten-text ul li, .jc-stoelen-body ul li, .jc-diensten-body ul li { display: list-item !important; list-style-type: disc !important; list-style-position: outside !important; margin: 0 0 4px !important; padding: 0 !important; } .jc-stoelen-text ol li, .jc-diensten-text ol li, .jc-stoelen-body ol li, .jc-diensten-body ol li { display: list-item !important; list-style-type: decimal !important; list-style-position: outside !important; margin: 0 0 4px !important; padding: 0 !important; } .jc-stoelen-text ul ul li, .jc-diensten-text ul ul li, .jc-stoelen-body ul ul li, .jc-diensten-body ul ul li { list-style-type: circle !important; } .jc-stoelen-text ul ul, .jc-diensten-text ul ul, .jc-stoelen-body ul ul, .jc-diensten-body ul ul { list-style: circle outside !important; list-style-type: circle !important; margin: 4px 0 !important; } .jc-stoelen-body h1, .jc-stoelen-body h2, .jc-stoelen-body h3, .jc-diensten-body h1, .jc-diensten-body h2, .jc-diensten-body h3 { color: var(--jc-blue); margin-top: 1.2em; } .jc-stoelen-body h1:first-child, .jc-stoelen-body h2:first-child, .jc-stoelen-body h3:first-child, .jc-diensten-body h1:first-child, .jc-diensten-body h2:first-child, .jc-diensten-body h3:first-child { margin-top: 0; } .jc-stoelen-body p, .jc-diensten-body p { margin: 0 0 12px; } /* --- Eventuele pagina-content ná de tegels/tekstkolommen --- */ .jc-stoelen-body { color: var(--jc-blue); line-height: 1.7; } /* ========================================================================== JC — Footer (5 kolommen + newsletter/adres/contact sidebar) ========================================================================== */ .jc-footer { background: var(--jc-blue); color: var(--jc-green-4); padding: 60px 0 40px; font-size: 14px; line-height: 1.6; } .jc-footer, .jc-footer * { color: var(--jc-green-4); } /* Footer-container volledige breedte — override globale .container margin: 0 70px */ .jc-footer > .container { display: block !important; max-width: 1460px !important; width: 100% !important; margin: 0 auto !important; padding: 0 40px !important; box-sizing: border-box !important; } .jc-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.6fr; gap: 24px; align-items: flex-start; } /* Extra visuele buffer tussen Openingstijden en de newsletter-sidebar */ .jc-footer__sidebar { margin-left: 24px; } @media (max-width: 1200px) { .jc-footer__sidebar { margin-left: 0; } } .jc-footer__col { display: flex; flex-direction: column; gap: 6px; } .jc-footer__heading { font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; margin: 0 0 12px; color: var(--jc-green-4); line-height: 1.3; } /* "Volg ons"-heading binnen Ons assortiment-kolom — extra spacing erboven */ .jc-footer__heading--spacer { margin-top: 28px; } .jc-footer__col a { color: var(--jc-green-4); text-decoration: none; font-size: 14px; line-height: 1.8; transition: color 200ms ease; } .jc-footer__col a:hover { color: var(--jc-green-3); } .jc-footer__socials { display: flex; flex-direction: column; gap: 8px; } .jc-footer__socials a { display: inline-flex; align-items: center; gap: 8px; } .jc-footer__socials svg { width: 16px; height: 16px; } .jc-footer__hours { margin: 0; padding: 0; } .jc-footer__hours-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.7; color: var(--jc-green-4); } .jc-footer__hours dt, .jc-footer__hours dd { margin: 0; } /* Weekend-groep visueel scheiden van doordeweekse dagen */ .jc-footer__hours-row--weekend { margin-top: 14px; } /* Sidebar: newsletter + address + contact */ .jc-footer__sidebar { display: flex; flex-direction: column; gap: 20px; } .jc-footer__newsletter-title { font-weight: 700; margin: 0; font-size: 15px; color: var(--jc-green-4); } .jc-footer__newsletter-sub { display: block; margin-bottom: 14px; font-size: 13px; color: var(--jc-green-4); } /* ActiveCampaign form — herstijlen tot clean input met circular @-submit knop rechts */ .jc-footer__newsletter ._form { position: relative; margin: 0 !important; padding: 0 !important; background: transparent !important; } .jc-footer__newsletter ._form-content, .jc-footer__newsletter form { margin: 0 !important; padding: 0 !important; } .jc-footer__newsletter ._form-label { display: none !important; } .jc-footer__newsletter ._form-branding { display: none !important; } .jc-footer__newsletter ._form_element { margin: 0 !important; padding: 0 !important; } .jc-footer__newsletter ._field-wrapper { position: relative; } .jc-footer__newsletter input[type="text"], .jc-footer__newsletter input[type="email"], .jc-footer__newsletter input#email { width: 100% !important; padding: 14px 64px 14px 16px !important; border: 0 !important; border-radius: 4px !important; font-size: 14px !important; color: var(--jc-blue) !important; background: #fff !important; box-sizing: border-box !important; line-height: 1.2 !important; height: 48px !important; min-height: 0 !important; } .jc-footer__newsletter input::placeholder { color: #999; } /* Button wrapper — dekkt volledige rechterzijde van input */ .jc-footer__newsletter ._button-wrapper { position: absolute !important; right: 0 !important; top: 0 !important; bottom: 0 !important; margin: 0 !important; padding: 0 !important; z-index: 2; } .jc-footer__newsletter form ._form-content { position: relative; } /* Fibosearch-style submit: vierkant, dekkend, wit @-icoon + driehoek-tooltip links */ .jc-footer__newsletter ._submit, .jc-footer__newsletter button[type="submit"] { width: 56px !important; height: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 0 4px 4px 0 !important; background: var(--jc-green-3) !important; cursor: pointer; font-size: 0 !important; /* verberg "Inschrijven"-tekst */ color: transparent !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 22px !important; position: relative !important; transition: background-color 200ms ease; } .jc-footer__newsletter ._submit:hover, .jc-footer__newsletter button[type="submit"]:hover { background-color: var(--jc-green-3-hover) !important; } /* Driehoek-tooltip aan de linkerkant van de button, wijzend in het input-veld */ .jc-footer__newsletter ._submit::before, .jc-footer__newsletter button[type="submit"]::before { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 6px solid var(--jc-green-3); transition: border-right-color 200ms ease; } .jc-footer__newsletter ._submit:hover::before, .jc-footer__newsletter button[type="submit"]:hover::before { border-right-color: var(--jc-green-3-hover); } .jc-footer__newsletter ._clear-element { display: none !important; } .jc-footer__address { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .jc-footer__address-name { font-weight: 700; margin: 0; } .jc-footer__address span { color: var(--jc-green-4); font-size: 13px; } .jc-footer__navigate { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; margin-top: 6px; background: transparent; color: var(--jc-green-4); text-decoration: none; border: 1px solid var(--jc-green-4); border-radius: 4px; font-size: 13px; font-weight: 500; transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } .jc-footer__navigate:hover { background: var(--jc-green-4); color: var(--jc-green-1); border-color: var(--jc-green-4); } .jc-footer__navigate svg { width: 14px; height: 14px; } .jc-footer__contact { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .jc-footer__contact a { display: flex; flex-direction: column; font-weight: 700; font-size: 14px; color: var(--jc-green-4); text-decoration: none; line-height: 1.2; } .jc-footer__contact a:hover { color: var(--jc-green-3); } .jc-footer__contact span { font-size: 11px; font-weight: 400; color: var(--jc-green-4); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; } /* Responsive */ @media (max-width: 1200px) { .jc-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } .jc-footer__sidebar { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 32px; } .jc-footer__sidebar > div { flex: 1 1 260px; min-width: 0; } } @media (max-width: 768px) { .jc-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .jc-footer__sidebar { flex-direction: column; gap: 20px; } /* Reset flex-basis (was 260px — wordt HOOGTE in column-flow) */ .jc-footer__sidebar > div { flex: 0 0 auto; } } @media (max-width: 480px) { .jc-footer__grid { grid-template-columns: 1fr; } } /* JC-spec: Google-sterren-widget alleen in topbar tonen, rest verbergen */ .breadcrumbs-block .reviews, .breadcrumb-row .reviews { display: none !important; } /* JC-spec: hoofdheader (logo + search + cart) en navigatie donkerblauw */ body > header, body header.site-header, .navigation { background: var(--jc-blue) !important; color: #fff !important; } body > header a, .navigation a, body > header .cart-custom-location, body > header .cart-custom-location strong, body > header .cart-custom-location span { color: #fff !important; } /* Groen cart-icoon tegen blauwe header */ body > header .cart-custom-location .cart-icon, body > header .cart-custom-location .cart-icon .inner-background { color: var(--jc-green-3) !important; } body > header .cart-custom-location .item-count { background: var(--jc-green-3) !important; color: #fff !important; } /* Hamburger-icoon wit */ body > header .hamburger-icon, body > header .hamburger-icon .inner-background { color: #fff !important; } /* Zoekbalk: witte input, groene zoekknop */ body > header .search-container input[type="search"], body > header .search-container input[type="text"], body > header .search-container .dgwt-wcas-search-input { background: #fff !important; color: var(--jc-blue) !important; border: 0 !important; } body > header .search-container button, body > header .search-container .dgwt-wcas-search-submit { background: var(--jc-green-3) !important; color: #fff !important; border: 0 !important; } /* Navigation menu-items wit, hover fel groen */ .navigation .primary-menu a, .navigation .primary-link { color: #fff !important; } .navigation .primary-link.is-active, .navigation .primary-link:hover { color: var(--jc-green-3) !important; } /* Submenu (Onderdelen/Diensten) — wit paneel, geen .inner-wrap. Megamenu (Stoelen) heeft een .megamenu-inner met eigen witte bg + border, dus outer .primary-menu-item-megamenu krijgt bewust GEEN background. */ .navigation .primary-menu-item-submenu { background: #fff !important; } .navigation .primary-menu-item-submenu a, .navigation .primary-menu-item-megamenu a { color: var(--jc-blue) !important; } .navigation .primary-menu-item-submenu a:hover, .navigation .primary-menu-item-megamenu a:hover { color: var(--jc-green-1) !important; } /* "Bekijk onze keuzehulp"-button in nav: witte pil op blauwe balk */ .navigation .button.button-orange { background: #fff !important; color: var(--jc-blue) !important; border-color: #fff !important; } .navigation .button.button-orange:hover { background: var(--jc-green-3) !important; color: #fff !important; border-color: var(--jc-green-3) !important; } /* Witte spleet tussen header en nav wegwerken (margin/border/mobile-search gap) */ body > header { margin-bottom: 0 !important; border-bottom: 0 !important; } .navigation { margin-top: 0 !important; border-top: 0 !important; } /* Mobile-search band: onder de 1024px toont hij een full-width zoekbalk onder de header. Geen border-radius, edge-to-edge, matcht de JC-nav blauw. */ @media (max-width: 1024px) { .mobile-search { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; background: var(--jc-blue) !important; border-radius: 0 !important; border-bottom: 1px solid #d9d9d9 !important; } .mobile-search form, .mobile-search .dgwt-wcas-search-wrapp, .mobile-search .dgwt-wcas-search-form, .mobile-search input, .mobile-search input[type="search"], .mobile-search input[type="text"], .mobile-search .dgwt-wcas-search-input { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; border: 0 !important; margin: 0 !important; } .mobile-search input[type="search"], .mobile-search input[type="text"], .mobile-search .dgwt-wcas-search-input { background: #fff !important; color: var(--jc-blue) !important; padding: 10px 14px !important; } /* Alle varianten van de groene zoekknop rechts — geen ronde hoeken. Long-hand per corner + !important overrulet build-CSS die soms alleen top-right + bottom-right op 0 zet en top-left/bottom-left laat staan. */ .mobile-search button, .mobile-search .dgwt-wcas-search-submit, .mobile-search .dgwt-wcas-search-btn, .mobile-search .dgwt-wcas-voice-search, .mobile-search [type="submit"], .mobile-search .js-dgwt-wcas-search-submit { background: var(--jc-green-3) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Desktop-search in main header verbergen onder 1024px */ body > header .column.search-container { display: none !important; } } /* Boven 1024px geen mobile-search tonen */ @media (min-width: 1025px) { .mobile-search { display: none !important; } } /* JC-spec: optionele page-hero direct tegen de header — foto/video/map. Strak 400px hoog, 100% breed, edge-to-edge. Content object-fit cover. */ .jc-page-hero { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 400px !important; max-height: 400px !important; min-height: 400px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; background: var(--jc-gray-light); } .jc-page-hero__media { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border: 0 !important; } .jc-page-hero__map { display: block !important; width: 100% !important; height: 400px !important; /* expliciet voor Google Maps JS API — vereist echte pixel-hoogte */ position: relative !important; } @media (max-width: 1024px) { .jc-page-hero, .jc-page-hero__map { height: 320px !important; max-height: 320px !important; min-height: 320px !important; } } @media (max-width: 640px) { .jc-page-hero, .jc-page-hero__map { height: 220px !important; max-height: 220px !important; min-height: 220px !important; } } /* JC: primary-menu mag niet 100% pakken anders overflowt offerte-button buiten container. justify-content wordt door main.css geregeld (center) — niet overschrijven. */ /* Navigatie-balk: menu visueel gecentreerd in de container, ongeacht dat de offerte-button rechts staat. Trucje: de offerte-button wordt uit de flex-flow gehaald (position: absolute), waardoor het menu over de volle breedte kan centreren — net als de zoekbalk erboven. */ .navigation > .container { justify-content: center !important; position: relative !important; } .navigation > .container > .primary-menu { min-width: 0 !important; flex: 0 1 auto !important; justify-content: center !important; /* Visuele tweak: 10px naar links zodat het menu mooi onder de zoekbalk komt te staan (de offerte-button rechts maakt de container-bias) */ position: relative !important; left: -10px !important; } .navigation > .container > .jc-offerte-btn { position: absolute !important; right: 0 !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* JC: Offerte-button helemaal rechts in de nav-balk. Directe child van .navigation .container → wordt door space-between naar de rechterrand geduwd, exact onder de cart/mijn-winkelmand in de header. */ .navigation .container > .jc-offerte-btn { display: inline-flex !important; align-items: center !important; gap: 8px; padding: 8px 18px !important; background: var(--jc-green-4) !important; color: var(--jc-green-1) !important; border: 0 !important; border-radius: 4px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap; margin-left: auto; transition: background 200ms ease, color 200ms ease; } .navigation .container > .jc-offerte-btn:hover { background: var(--jc-green-4-hover) !important; color: var(--jc-green-1) !important; transform: none !important; translate: none !important; top: auto !important; margin-top: 0 !important; } .navigation .container > .jc-offerte-btn svg, .navigation .container > .jc-offerte-btn i { color: var(--jc-green-1) !important; } /* JC-spec: home-hero 3 buttons (KEUZEHULP/STOELEN/ONDERDELEN) — tag-shape met chevron-tip rechts, half zwevend op de onderkant van de hero. */ .jc-hero-buttons { position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; gap: 32px; max-width: 1460px; margin: -32px auto 48px; /* negatieve top = half-overlap op hero */ padding: 0 24px; flex-wrap: nowrap; } .jc-hero-btn { position: relative; flex: 0 1 340px; min-width: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 28px 20px 28px; margin-right: 22px; /* ruimte voor de chevron-tip pseudo */ font-weight: 700; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; line-height: 1; border-radius: 8px 0 0 8px; /* links afgerond */ transition: transform 200ms ease, filter 200ms ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } /* Chevron-tip pseudo-element (rechts) — afgeronde driehoek met eigen radius */ .jc-hero-btn::after { content: ''; position: absolute; left: 100%; top: 0; height: 100%; width: 28px; background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); border-radius: 0 6px 6px 0; /* subtiele afronding op de tip */ } .jc-hero-btn:hover { transform: translateY(-2px); filter: brightness(1.05); } .jc-hero-btn--light { background: var(--jc-green-4); color: var(--jc-green-1); } .jc-hero-btn--dark { background: var(--jc-green-1); color: #fff; } .jc-hero-btn--mid { background: var(--jc-green-2); color: #fff; } .jc-hero-btn__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .jc-hero-btn__icon svg { width: 22px; height: 22px; display: block; } .jc-hero-btn__label { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jc-hero-btn__chevron { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 6px; } .jc-hero-btn__chevron svg { width: 14px; height: 14px; display: block; } /* Responsive */ @media (max-width: 1200px) { .jc-hero-buttons { gap: 20px; } .jc-hero-btn { padding: 18px 38px 18px 22px; font-size: 16px; gap: 10px; flex-basis: 280px; } } @media (max-width: 1024px) { .jc-hero-buttons { margin-top: -24px; gap: 14px; padding: 0 16px; } .jc-hero-btn { padding: 16px 34px 16px 18px; font-size: 14px; letter-spacing: 0.06em; } .jc-hero-btn__icon svg { width: 18px; height: 18px; } } @media (max-width: 768px) { .jc-hero-buttons { flex-direction: column; align-items: center; margin: -20px auto 28px; gap: 10px; padding: 0 16px; box-sizing: border-box; width: 100%; } .jc-hero-btn { flex-basis: auto; width: 100%; max-width: 420px; margin-right: 0; /* geen ruimte voor ::after-staart meer */ padding: 16px 22px; font-size: 15px; border-radius: 8px; /* volledige rounded corners ipv alleen links */ box-sizing: border-box; } .jc-hero-btn::after { display: none; /* tag-staart uit op mobiel — past niet in viewport */ } } /* JC-spec: duurzame-badge — sticky sticker die altijd in beeld blijft. Fixed aan viewport, links uitgelijnd met het logo erboven. */ .jc-duurzame-badge-wrap { display: contents; } .jc-duurzame-badge { display: block; text-decoration: none; } .jc-duurzame-badge img { display: block; width: 100%; height: 100%; } .jc-duurzame-badge { position: fixed; top: 180px; /* onder de complete header-stack (topbar + header + nav) */ /* Links uitgelijnd met het logo: rekening houden met de max-width:1460px container en 20px inner padding. Valt op kleinere schermen terug op 20px. */ left: calc(max(0px, (100vw - 1460px) / 2) + 20px); width: 115px; height: 115px; z-index: 200; pointer-events: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); transform: rotate(-6deg); transition: top 300ms ease, transform 300ms ease; } /* Bij scrollen schuift de badge omhoog zodat hij niet ergens in het midden van de content blijft hangen. Class wordt door JS gezet. */ .jc-duurzame-badge.is-scrolled { top: 100px; } .jc-duurzame-badge:hover { transform: rotate(-3deg) scale(1.03); } /* Onder de 1024px (tablet + mobiel) badge volledig verbergen */ @media (max-width: 1024px) { .jc-duurzame-badge { display: none !important; } } .active-offerte-winkelmand .woocommerce { max-width: 1460px; margin: 0 auto; padding: 20px; } .pi-form-control { border-radius: 4px; } .enquiry-cart-content-table td textarea { border-radius: 4px; border: 1px solid #ccc; } .pi-btn { background: var(--jc-green-3); border-radius: 4px; height: 45px; font-weight: 500; } .tc-extra-product-options .tmcp-field-wrap label { display: flex !important; flex-direction: row !important; gap: 20px !important; } .element_0 .more-information-button span:before { content: url("data:image/svg+xml,%3Csvg width='14' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3865 1.49914H5.6402C5.26209 1.49914 4.95593 1.17915 4.95593 0.783968V0.715171C4.95593 0.319987 5.26209 0 5.6402 0H12.3865C12.7646 0 13.0708 0.319987 13.0708 0.715171V0.785568C13.0708 1.17915 12.7646 1.49914 12.3865 1.49914ZM6.9215 12.3723C6.4944 12.7915 5.94024 13.0347 5.36006 13.0555C5.32945 13.0571 5.29883 13.0571 5.26974 13.0571C3.91497 13.0571 2.81278 11.9195 2.81278 10.5228C2.81278 10.4236 2.8189 10.3196 2.83115 10.2156L2.83268 10.2028L2.83421 10.19L3.20008 7.66049C2.36578 8.31166 1.8254 9.35162 1.8254 10.5196C1.8254 12.4859 3.35622 14.0874 5.23913 14.0874C7.1205 14.0874 8.65285 12.4875 8.65285 10.5196C8.65285 9.87639 8.48905 9.27322 8.20279 8.75164C7.94408 9.35642 7.7711 10.038 7.68078 10.8028C7.6119 11.4043 7.34094 11.9595 6.9215 12.3723ZM10.4776 10.4396C10.4592 9.16762 10.0275 8.00447 9.31723 7.08611C9.08914 7.3165 8.88401 7.56769 8.70184 7.83648C9.23762 8.58685 9.5545 9.51801 9.5545 10.5244C9.5545 13.0107 7.61802 15.0346 5.23913 15.0346C2.86024 15.0346 0.92375 13.0107 0.92375 10.5244C0.92375 8.73404 1.92644 7.1853 3.37459 6.45733L3.53533 5.34538C1.45035 6.09255 -0.0360734 8.17566 0.000666268 10.6076C0.04506 13.6314 2.42701 16.0457 5.32026 15.9993C8.21198 15.9529 10.522 13.4634 10.4776 10.4396ZM14 4.16143C9.8821 4.72461 7.31339 6.72292 6.84649 10.6988C6.75158 11.5099 6.11322 12.1467 5.33098 12.1755C5.31108 12.1755 5.29117 12.1771 5.27127 12.1771C4.38034 12.1771 3.65626 11.4363 3.65626 10.5228C3.65626 10.4556 3.66085 10.3884 3.66851 10.3228L4.70793 3.12147C4.76763 2.69749 5.12278 2.3823 5.5407 2.3823H12.6054C13.3754 2.3839 14 3.37266 14 4.16143ZM5.99076 10.5228C5.99076 10.0892 5.65398 9.7388 5.24066 9.7388C4.82734 9.7388 4.49056 10.0908 4.49056 10.5228C4.49056 10.9563 4.82734 11.3067 5.24066 11.3067C5.65398 11.3067 5.99076 10.9563 5.99076 10.5228Z' fill='%237fba27'/%3E%3C/svg%3E%0A"); } .element_1 .more-information-button span:before { content: url("data:image/svg+xml,%3Csvg width='20' height='16' viewBox='0 0 20 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 3.50685C19.8235 3.71477 19.6788 3.93932 19.5222 4.15462C18.4061 5.68844 17.2924 7.22396 16.178 8.75905C15.9181 9.11715 15.6571 9.47453 15.4007 9.8351C15.3525 9.90286 15.317 9.9078 15.255 9.85576C15.1105 9.73445 14.9618 9.61804 14.8144 9.50011C14.7921 9.48225 14.7697 9.45422 14.738 9.46712C14.7008 9.48231 14.7081 9.52117 14.7072 9.55276C14.6938 10.0403 14.6742 10.5275 14.6137 11.0118C14.5524 11.5023 14.4747 11.9894 14.3037 12.4573C14.2096 12.7147 14.0459 12.9211 13.8649 13.1192C13.7046 13.2946 13.5434 13.4688 13.3732 13.6348C13.3088 13.6976 13.254 13.7156 13.1595 13.6772C12.5449 13.4273 11.9263 13.1872 11.309 12.9439C11.1656 12.8873 11.1659 12.8872 11.2109 12.7458C11.2889 12.5011 11.3667 12.2564 11.4443 12.0116C11.4845 11.8847 11.484 11.8801 11.3542 11.8424C10.4645 11.5845 9.57437 11.3285 8.68497 11.0698C8.58799 11.0416 8.49795 11.0722 8.4057 11.0852C8.31895 11.0975 8.23336 11.1178 8.14709 11.1337C8.09505 11.1433 8.04507 11.1411 7.99491 11.1177C7.19447 10.7454 6.40862 10.3474 5.69125 9.8265C5.42257 9.63138 5.20624 9.38542 4.99044 9.13688C4.57869 8.66268 4.16245 8.19239 3.74737 7.72108C3.65649 7.61789 3.65526 7.61918 3.75299 7.52182C3.94205 7.33347 4.13 7.144 4.32028 6.95689C4.45376 6.82564 4.61704 6.78749 4.7888 6.8519C5.64496 7.17298 6.49821 7.50292 7.30372 7.93969C7.58638 8.09296 7.86919 8.22933 8.19005 8.28076C8.59479 8.34565 9.00115 8.35425 9.40533 8.30251C10.2399 8.19566 11.0726 8.07435 11.906 7.95868C12.0282 7.94171 12.1502 7.92308 12.2723 7.90511C12.3041 7.90043 12.3423 7.90218 12.3524 7.8628C12.3622 7.82473 12.3302 7.80374 12.3054 7.78402C12.0787 7.60374 11.8515 7.42411 11.6241 7.24473C11.4581 7.11372 11.2941 6.9799 11.124 6.85433C11.0502 6.79986 11.0527 6.7605 11.1044 6.69031C12.0694 5.3805 13.0324 4.06916 13.9949 2.75755C14.6668 1.84208 15.3374 0.925726 16.0121 0.00414957C16.0302 -0.00146603 16.0449 -0.00146603 16.069 0.00466346C16.3087 0.236094 16.5582 0.439701 16.8 0.651853C17.8661 1.58708 18.9332 2.52112 20 3.45558C20 3.47023 20 3.48488 20 3.50685Z' fill='%237fba27'/%3E%3Cpath d='M0 15.496C0.110285 15.246 0.302008 15.1654 0.560305 15.1683C1.31856 15.1765 2.07695 15.1713 2.83529 15.1712C2.98261 15.1712 2.98283 15.1709 2.98273 15.0295C2.98221 14.296 3.04168 13.569 3.21532 12.8539C3.34998 12.2994 3.55076 11.7731 3.88187 11.3041C3.93466 11.2293 3.92159 11.1914 3.85726 11.1383C3.35791 10.726 2.85876 10.3134 2.36399 9.89564C2.12086 9.69035 2.03076 9.42321 2.11594 9.11503C2.19999 8.81094 2.41173 8.62964 2.72093 8.57463C2.94375 8.53499 3.14871 8.59324 3.32341 8.73845C4.22932 9.49145 5.13396 10.246 6.03925 10.9997C6.38937 11.2912 6.74176 11.58 7.08989 11.8739C7.33347 12.0795 7.41898 12.4041 7.3154 12.6959C7.20906 12.9955 6.93972 13.1964 6.61755 13.2008C6.43433 13.2034 6.26621 13.1444 6.12238 13.0245C5.68737 12.6621 5.25173 12.3004 4.81599 11.9388C4.78411 11.9124 4.75589 11.8789 4.70159 11.8705C4.60821 11.9797 4.54114 12.1092 4.47743 12.2401C4.26032 12.6862 4.14704 13.1624 4.07059 13.6493C3.99825 14.11 3.98594 14.5749 3.97185 15.0397C3.96788 15.1705 3.97138 15.1708 4.09905 15.1708C6.78741 15.1711 9.47578 15.1715 12.1641 15.1716C13.9445 15.1717 15.7248 15.1714 17.5051 15.1713C17.8418 15.1713 18.0522 15.3921 18.0144 15.7036C18.0042 15.7877 17.9606 15.8557 17.9136 15.9303C11.9723 15.9362 6.03437 15.9362 0.0863702 15.9292C0.0508719 15.8682 0.025436 15.8143 1.86331e-08 15.7604C-8.98297e-10 15.6753 0 15.5902 0 15.496Z' fill='%237fba27'/%3E%3C/svg%3E%0A"); } @media only screen and (max-width: 1024px) { .tc-extra-product-options .tmcp-field-wrap label { display: flex !important; flex-direction: column !important; gap: 15px !important; } } .more-information-button span { display: flex; flex-direction: row; align-items: center; gap: 5px; font-family: inherit; } .more-information-button { min-width: 170px; min-height: 50px; border: 1px solid var(--jc-green-3); padding: 0 20px; color: var(--jc-green-3); font-weight: 800; background: transparent; outline: none; border-radius: 5px; display: flex; flex-direction: row; align-items: center; gap: 5px; font-family: inherit; cursor: pointer; transition: all 300ms; justify-content: center; align-items: center; } .more-information-button:hover { color: var(--jc-green-3-hover); border: 1px solid var(--jc-green-3-hover); } /* ========================================================================== WooCommerce notificaties — kleuren naar JC-palet (WC-plugin renderde standaard nog oranje/yellow-green op .woocommerce-message, die hier wordt overschreven naar JC-groen / blauw / rood per type.) ========================================================================== */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error, ul.woocommerce-error, ul.woocommerce-message, ul.woocommerce-info { background: #f6faf0 !important; border-top: 3px solid var(--jc-green-1) !important; color: var(--jc-blue) !important; } .woocommerce-message::before, ul.woocommerce-message::before { color: var(--jc-green-1) !important; } .woocommerce-info, ul.woocommerce-info, .woocommerce-notices-wrapper .woocommerce-info { background: #f4f8fb !important; border-top-color: var(--jc-blue) !important; } .woocommerce-info::before, ul.woocommerce-info::before { color: var(--jc-blue) !important; } .woocommerce-error, ul.woocommerce-error, .woocommerce-notices-wrapper .woocommerce-error { background: #fdf3f3 !important; border-top-color: #b81c23 !important; } .woocommerce-error::before, ul.woocommerce-error::before { color: #b81c23 !important; } /* Knop binnen WC-message (bv. "Bekijk winkelmand") — inline link in JC-groen, géén achtergrond (anders smelt groen-op-groen samen met message-bg). */ .woocommerce-message .button, .woocommerce-message a.button, .woocommerce-message a.wc-forward, .woocommerce-notices-wrapper .button, .woocommerce-notices-wrapper a.wc-forward { background: none !important; color: var(--jc-green-1) !important; text-decoration: underline !important; font-weight: 600 !important; border: 0 !important; padding: 0 !important; display: inline !important; margin-right: 10px !important; } .woocommerce-message .button:hover, .woocommerce-message a.button:hover, .woocommerce-message a.wc-forward:hover, .woocommerce-notices-wrapper .button:hover, .woocommerce-notices-wrapper a.wc-forward:hover { background: none !important; color: var(--jc-green-1-hover) !important; text-decoration: underline !important; } /* WC-Blocks varianten (cart/checkout-blocks gebruiken andere classes) */ .wc-block-components-notice-banner, .wc-block-store-notice { border-color: var(--jc-green-1) !important; background: #f6faf0 !important; color: var(--jc-blue) !important; } .wc-block-components-notice-banner.is-error { border-color: #b81c23 !important; background: #fdf3f3 !important; } .wc-block-components-notice-banner.is-info { border-color: var(--jc-blue) !important; background: #f4f8fb !important; } /* ========================================================================== Offerte-winkelmand actie-knoppen (plugin .gbs-cart-actions) — JC-huisstijl. Links "Verder winkelen" was oranje → secundair (light-green pill). Rechts "Offerte aanvragen" was lichtblauw → primair JC-CTA (felgroen). ========================================================================== */ .gbs-cart-actions { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .gbs-cart-actions-left .button, .gbs-cart-actions-right .button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 24px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.2 !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; border: 1px solid transparent !important; transition: background 200ms ease, color 200ms ease, border-color 200ms ease !important; cursor: pointer !important; } /* Secundair — Verder winkelen */ .gbs-cart-actions-left .button { background: var(--jc-green-4) !important; color: var(--jc-green-1) !important; border-color: var(--jc-green-4) !important; } .gbs-cart-actions-left .button:hover, .gbs-cart-actions-left .button:focus { background: var(--jc-green-4-hover) !important; border-color: var(--jc-green-4-hover) !important; color: var(--jc-green-1) !important; } /* Primair — Offerte aanvragen */ .gbs-cart-actions-right .button, .gbs-cart-actions-right .button.alt { background: var(--jc-green-3) !important; color: #fff !important; border-color: var(--jc-green-3) !important; } .gbs-cart-actions-right .button:hover, .gbs-cart-actions-right .button.alt:hover, .gbs-cart-actions-right .button:focus, .gbs-cart-actions-right .button.alt:focus { background: var(--jc-green-3-hover) !important; border-color: var(--jc-green-3-hover) !important; color: #fff !important; } /* ========================================================================== Megamenu — meer ademruimte boven kolommen. De .megamenu-inner krijgt extra padding-top zodat de eerste kolom (en de sticky duurzame-badge die fixed links zit) elkaar niet meer raken/overlappen. Was 60px in build CSS, wordt nu 110px op desktop. ========================================================================== */ .navigation .container .primary-menu-item-megamenu .megamenu-inner { padding-top: 110px !important; } /* ========================================================================== Voorraadlabel (.quantity-stock) — NOOIT over de productfoto. Generieke override: dwingt position:static af in elke context (archive, home-swiper, related products, PDP). Was eerder absolute in build/css/main.css waardoor het label op sommige plekken nog over de foto viel. ========================================================================== */ .quantity-stock, .product-archive .container .product-content .products .product .quantity-stock, .block-products .container .product-loop .swiper-slide .quantity-stock, .single .content-area .quantity-stock, .single-header .quantity-stock, .product-image .quantity-stock, li.product .quantity-stock { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; z-index: auto !important; display: inline-block !important; align-self: flex-start !important; margin: 0 0 10px 0 !important; padding: 6px 10px !important; background: var(--jc-blue); color: #fff; border-radius: 5px; font-size: 13px; line-height: 1.2; white-space: nowrap; } .quantity-stock.is-on-sale, .product-archive .container .product-content .products .product .quantity-stock.is-on-sale, .block-products .container .product-loop .swiper-slide .quantity-stock.is-on-sale, .single .content-area .quantity-stock.is-on-sale, .single-header .quantity-stock.is-on-sale, .product-image .quantity-stock.is-on-sale, li.product .quantity-stock.is-on-sale { background: var(--jc-orange-action) !important; } /* ========================================================================== Mobile single-product — schone rewrite (slider + offerte-button). PROBLEMEN: 1. .product__slider met veel thumbs (175px breed elk, flex nowrap) bleed't uit de viewport → horizontale page-scroll op mobiel. 2. .gbs-add-to-offerte-btn wordt door de gbs-offerte-plugin op position:absolute gezet, met top/left offsets. Op mobiel valt 'ie daardoor over de content eronder. 'relative' werkt niet: dan respecteert de browser nog steeds de top/left offsets en schuift de button alsnog verkeerd. 'static' is wél juist — negeert alle offsets en stopt 'm gewoon terug in de document-flow. AANPAK: - Slider: wrapper claimt overflow zelf via overflow-x:auto. Body wordt overflow-x:clip als ultieme vangnet voor de hele pagina. - Button: alleen op mobiel terug naar position:static (in-flow). Plugin CSS blijft op desktop intact. - .add-to-cart-wrappertj forceren naar column-flex zodat de in-flow button een eigen row krijgt zonder dat hij iets overlapt. ========================================================================== */ /* --- 1. Slider: contain horizontale overflow --- */ .product__slider-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .product__slider { flex-wrap: nowrap; } .product__slider .product__image { flex: 0 0 auto; } /* Body-niveau vangnet — single-product pagina kan NOOIT horizontaal scrollen */ body.single-product { overflow-x: clip; } /* --- 2. Add-to-cart form layout — universeel (desktop + mobiel). Reset van plugin's absolute-positioned offerte-button, plus een nette 2-rijen flex layout (qty + addtocart side-by-side, offerte full-width). */ /* Reset plugin-positioning. position:static (niet relative) negeert alle top/right/bottom/left die de plugin opdrukt. */ .gbs-add-to-offerte-btn { position: static !important; inset: auto !important; float: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; height: 50px !important; min-height: 50px !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; line-height: 1.2 !important; } /* Offerte-button kleurschema — JC-lichtgroen (--jc-green-4) met donkergroene tekst (--jc-green-1). Hogere specificiteit (.single-product …) wint van plugin's inline