/** * Groomzo v2 — footer, 3-lagen DTC-structuur (Atelier). * Laag 1: merk + navigatie · Laag 2: trust + service · Laag 3: legal. * Amber = accent alleen; hoofdkleur pine/ivory; zelfde 1280-grid als header/PDP. */ .gzv-footer { background: var(--gz-pine); color: var(--gz-ivory); font-family: var(--gz-sans); -webkit-font-smoothing: antialiased; } .gzv-footer *, .gzv-footer *::before, .gzv-footer *::after { box-sizing: border-box; } .gzv-footer ul { margin: 0; padding: 0; list-style: none; } .gzv-footer a { color: var(--gz-ivory); text-decoration: none; } .gzv-footer a:hover, .gzv-footer a:focus-visible { color: var(--gz-amber); } .gzv-footer p { margin: 0; } .gzv-footer h3 { margin: 0 0 18px; font-family: var(--gz-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gz-ivory); } /* ---------- Nieuwsbriefband (functioneel: FunnelKit-webhook) ---------- */ .gzv-foot-nieuws { background: var(--gz-pine-deep); border-bottom: 1px solid var(--gz-line-dark); } .gzv-foot-nieuws-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding-top: 36px; padding-bottom: 36px; } .gzv-foot-nieuws h2 { margin: 0 0 6px; font-family: var(--gz-disp) !important; font-size: 27px; font-weight: 600; color: var(--gz-ivory); line-height: 1.15; } .gzv-foot-nieuws p { font-size: 14.5px; color: var(--gz-muted-dark); } .gzv-nl-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: min(420px, 100%); } /* Veld in zelfde V2-taal als contactformulier (user 4 sep): Kit zet ook hier input-bg/-border blauw-navy op focus — basisprops !important; hover = muted hairline, focus = pine rand + amber outline, nooit blauw. Pill-vorm blijft: hoort bij het amber-knopje in de donkere band. */ .gzv-nl-form input { flex: 1 1 240px; font-family: var(--gz-sans) !important; font-size: 14.5px !important; color: var(--gz-ink) !important; background: var(--gz-card) !important; border: 0.5px solid var(--gz-line) !important; border-radius: 999px !important; padding: 13px 20px !important; min-height: 0; min-width: 0; box-shadow: none !important; transition: border-color .16s ease; } .gzv-nl-form input::placeholder { color: var(--gz-muted); opacity: 1; } .gzv-nl-form input:hover { border-color: var(--gz-line-hover) !important; box-shadow: none !important; } .gzv-nl-form input:focus, .gzv-nl-form input:focus-visible { outline: 2px solid var(--gz-amber) !important; outline-offset: 1px !important; border-color: var(--gz-pine) !important; background: #FFFFFF !important; box-shadow: none !important; } .gzv-nl-form label { font-family: var(--gz-sans); } .gzv-nl-form button { font: inherit; font-size: 14.5px; font-weight: 700; color: var(--gz-pine-deep) !important; background: var(--gz-amber) !important; border: 0 !important; box-shadow: none !important; border-radius: 999px !important; padding: 13px 26px !important; min-height: 0 !important; min-width: 0 !important; cursor: pointer; transition: filter .15s; } .gzv-nl-form button:hover { filter: brightness(1.06); } .gzv-nl-form button:disabled { opacity: .65; cursor: wait; } .gzv-nl-melding { flex: 1 1 100%; margin: 2px 0 0; font-size: 13.5px; display: none; } .gzv-nl-melding.is-ok, .gzv-nl-melding.is-fout { display: block; } .gzv-nl-melding.is-ok { color: var(--gz-amber); } .gzv-nl-melding.is-fout { color: #E5A3A3; } /* ---------- Laag 1: merk + navigatie ---------- */ .gzv-foot-top { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 28px 56px; padding-top: 68px; padding-bottom: 58px; } /* Pet-touch: ton-sur-ton poot, 3% opacity */ .gzv-poot { position: absolute; right: 4%; bottom: 6%; width: 240px; height: 240px; fill: var(--gz-ivory); opacity: .03; pointer-events: none; } .gzv-foot-merk { position: relative; } .gzv-foot-logo img { height: 88px; width: auto; opacity: .97; } .gzv-foot-logo a { display: inline-flex; } .gzv-foot-wordmark { font-family: var(--gz-disp) !important; font-size: 34px; font-weight: 620; color: var(--gz-ivory) !important; } .gzv-brandline { margin-top: 16px; font-family: var(--gz-disp) !important; font-style: italic; font-size: 17.5px; font-weight: 480; color: var(--gz-muted-dark); line-height: 1.4; } .gzv-foot-social { display: flex; gap: 10px; margin-top: 22px; } .gzv-foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--gz-line-dark); border-radius: 50%; color: var(--gz-ivory); transition: border-color .15s, color .15s, background .15s; } .gzv-foot-social a:hover { border-color: var(--gz-amber); color: var(--gz-amber); background: rgba(192, 138, 52, .08); } .gzv-foot-col ul li { margin: 0; } /* ---------- Mobiele footer-accordion (4 sep) ---------- Kolom-kop = button (kit-proof geerfd): mobiel inklapbaar via .is-dicht + .gzv-js (alleen als JS draait); zonder JS alles open; desktop altijd open + chevron verborgen. */ .gzv-foot-kop { margin: 0; } .gzv-foot-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: inherit !important; cursor: pointer; box-shadow: none !important; } .gzv-foot-chev { flex: 0 0 auto; transition: transform .18s ease; } @media (max-width: 1023px) { .gzv-js .gzv-foot-col.is-dicht > ul { display: none; } .gzv-js .gzv-foot-col.is-dicht .gzv-foot-chev { transform: rotate(-90deg); } .gzv-foot-toggle { padding: 6px 0 !important; min-height: 44px; } /* tikdoel */ } @media (min-width: 1024px) { .gzv-foot-chev { display: none; } } .gzv-foot-col a, .gzv-foot-menu a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.45; color: var(--gz-muted-dark); transition: color .15s; } .gzv-foot-col a:hover, .gzv-foot-menu a:hover { color: var(--gz-ivory); } .gzv-foot-alles a { color: var(--gz-ivory); font-weight: 600; } .gzv-foot-alles a::before { content: "→ "; color: var(--gz-amber); margin-right: 6px; } /* ---------- Laag 2: trust + service ---------- */ .gzv-foot-trust { background: var(--gz-pine-deep); border-top: 1px solid var(--gz-line-dark); border-bottom: 1px solid var(--gz-line-dark); } .gzv-foot-trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px 48px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; } .gzv-trust-tp { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .gzv-trust-tp img { display: block; width: 132px; height: 26px; } .gzv-trust-tp p { font-size: 14.5px; color: var(--gz-muted-dark); } .gzv-trust-tp b { color: var(--gz-ivory); font-weight: 700; } .gzv-trust-service { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .gzv-trust-service li { display: flex; align-items: center; gap: 9px; min-height: 44px; } .gzv-trust-service svg { color: var(--gz-amber); flex: 0 0 auto; } .gzv-trust-service a, .gzv-trust-service span { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; color: var(--gz-ivory); } .gzv-trust-service a:hover { color: var(--gz-amber); } /* ---------- Laag 3: legal ---------- */ .gzv-foot-bottom { background: var(--gz-pine); } .gzv-foot-bottom-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-top: 22px; padding-bottom: 22px; } .gzv-legal-menu { display: flex; flex-wrap: wrap; gap: 4px 16px; } .gzv-legal-menu a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--gz-muted-dark); } .gzv-legal-menu a:hover { color: var(--gz-ivory); } /*
brengt eigen UA-marge mee — resetten, anders hangt de regel hoger dan de rest (flex-centering schuift mee met marge). */ .gzv-foot-bedrijf { font-style: normal; margin: 0; font-size: 12.5px; color: var(--gz-muted-dark); opacity: .85; } .gzv-foot-copyright { font-size: 13px; color: var(--gz-muted-dark); } /* Polylang pll_the_languages() levert kale
  • 's zonder