/* WP Menu Toolkit — menu (off-canvas) + header + footer, mobile-first. * :root variabelen en de viewport-media-queries worden door de plugin in de gezet. */ /* ============================================================= * * HAMBURGER-KNOP (inline in de header, of zwevend als fallback) * ============================================================= */ .ktm-toggle{ display:inline-flex; align-items:center; justify-content:center; width:var(--ktm-ham-size,44px); height:var(--ktm-ham-size,44px); border:0; margin:0; padding:0; cursor:pointer; background:var(--ktm-ham-bg,transparent); border-radius:8px; -webkit-appearance:none; appearance:none; transition:background .2s ease; } .ktm-toggle:focus-visible{ outline:2px solid var(--ktm-panel-accent,#2e7d32); outline-offset:2px; } /* Zwevende variant (alleen op pagina's zonder [kt_header]) */ .ktm-toggle--float{ position:fixed; top:16px; z-index:100000; display:none; } .ktm-toggle--float.ktm-side-left{ left:16px; right:auto; } .ktm-toggle--float.ktm-side-right{ right:16px; left:auto; } .ktm-bars{ position:relative; width:60%; height:14px; display:block; } .ktm-bars span{ position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--ktm-ham-color,#1d1d1d); transition:transform .25s ease, opacity .2s ease, top .25s ease; } .ktm-bars span:nth-child(1){ top:0; } .ktm-bars span:nth-child(2){ top:6px; } .ktm-bars span:nth-child(3){ top:12px; } /* Kruisje wanneer open */ .ktm-open .ktm-toggle .ktm-bars span:nth-child(1){ top:6px; transform:rotate(45deg); } .ktm-open .ktm-toggle .ktm-bars span:nth-child(2){ opacity:0; } .ktm-open .ktm-toggle .ktm-bars span:nth-child(3){ top:6px; transform:rotate(-45deg); } /* De hamburger in de header erft de hoofdbalk-tekstkleur voor de streepjes */ .kthf-hamburger .ktm-bars span{ background:var(--kthf-main-tx,#1d1d1d); } /* ============================================================= * * OFF-CANVAS PANEEL + OVERLAY * ============================================================= */ /* Overlay + paneel moeten vóór alles vallen (ook boven een sticky Divi-header). */ .ktm-overlay{ position:fixed; inset:0; background:var(--ktm-overlay,rgba(0,0,0,.5)); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; z-index:2147483646; } .ktm-open .ktm-overlay{ opacity:1; visibility:visible; } .ktm-panel{ position:fixed; background:var(--ktm-panel-bg,#fff); color:var(--ktm-panel-text,#1d1d1d); z-index:2147483647; box-shadow:0 0 40px rgba(0,0,0,.18); display:flex; flex-direction:column; overflow:hidden; -webkit-overflow-scrolling:touch; } .ktm-style-left{ top:0; bottom:0; left:0; width:var(--ktm-panel-w,320px); max-width:88vw; transform:translateX(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1); } .ktm-open .ktm-style-left{ transform:translateX(0); } .ktm-style-right{ top:0; bottom:0; right:0; width:var(--ktm-panel-w,320px); max-width:88vw; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); } .ktm-open .ktm-style-right{ transform:translateX(0); } .ktm-style-fullscreen{ inset:0; width:100%; opacity:0; visibility:hidden; transform:scale(1.02); transition:opacity .28s ease, transform .28s ease, visibility .28s ease; text-align:center; } .ktm-open .ktm-style-fullscreen{ opacity:1; visibility:visible; transform:scale(1); } .ktm-style-fullscreen .ktm-panel__body{ display:flex; flex-direction:column; justify-content:center; } .ktm-style-fullscreen .ktm-menu{ font-size:1.15rem; } .ktm-style-dropdown{ top:0; left:0; right:0; max-height:0; opacity:0; visibility:hidden; transition:max-height .3s ease, opacity .25s ease, visibility .25s ease; box-shadow:0 12px 30px rgba(0,0,0,.15); } .ktm-open .ktm-style-dropdown{ max-height:100vh; opacity:1; visibility:visible; overflow-y:auto; } .ktm-style-dropdown .ktm-panel__head{ display:none; } .ktm-panel__head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; min-height:var(--ktm-ham-size,44px); border-bottom:1px solid rgba(0,0,0,.08); flex:0 0 auto; } .ktm-panel__title{ font-weight:700; font-size:1.05rem; } .ktm-close{ border:0; background:transparent; cursor:pointer; padding:6px; color:var(--ktm-panel-text,#1d1d1d); line-height:0; border-radius:6px; } .ktm-close:focus-visible{ outline:2px solid var(--ktm-panel-accent,#2e7d32); outline-offset:2px; } .ktm-panel__body{ flex:1 1 auto; overflow-y:auto; padding:6px 0 24px; } .ktm-menu, .ktm-menu ul{ list-style:none; margin:0; padding:0; } .ktm-menu li{ position:relative; } .ktm-menu a{ display:block; padding:13px 20px; color:inherit; text-decoration:none; font-size:1rem; line-height:1.3; border-bottom:1px solid rgba(0,0,0,.05); } .ktm-menu a:hover, .ktm-menu .current-menu-item > a{ color:var(--ktm-panel-accent,#2e7d32); } .ktm-menu .sub-menu{ max-height:0; overflow:hidden; transition:max-height .3s ease; background:rgba(0,0,0,.03); } /* Open: geen hoogtebeperking, zodat lange lijsten (merken/categorieën) volledig tonen */ .ktm-menu li.ktm-open-sub > .sub-menu{ max-height:none; } .ktm-menu .sub-menu a{ padding-left:38px; font-size:.95rem; } .ktm-menu .sub-menu .sub-menu a{ padding-left:56px; } .ktm-subtoggle{ position:absolute; top:0; right:0; width:52px; height:47px; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:inherit; } .ktm-subtoggle svg{ transition:transform .25s ease; } .ktm-menu li.ktm-open-sub > .ktm-subtoggle svg{ transform:rotate(180deg); } .ktm-menu li.menu-item-has-children > a{ padding-right:56px; } .ktm-style-fullscreen .ktm-menu a{ border-bottom:0; } body.ktm-locked{ overflow:hidden; } .ktm-panel[hidden]{ display:none; } /* Divi/thema zet menu-items in submenu's soms op display:inline-block (of float), * waardoor het paneel-submenu als een leeg blok rendert. Forceer een nette * verticale lijst binnen het schuifpaneel (met !important, om het thema te verslaan). */ #kt-menu-panel .ktm-menu li{ display:block!important; float:none!important; width:auto!important; margin:0!important; padding:0!important; position:relative!important; left:auto!important; right:auto!important; transform:none!important; } /* Compacte rijhoogte (thema kan extra padding/line-height op links zetten) */ #kt-menu-panel .ktm-menu a{ padding:11px 20px!important; line-height:1.35!important; min-height:0!important; } #kt-menu-panel .ktm-menu .sub-menu a{ padding-left:38px!important; } #kt-menu-panel .ktm-menu .sub-menu .sub-menu a{ padding-left:56px!important; } /* Oude mega-titel-opmaak (MERK/CATEGORIE) liet een grote lege ruimte tot het eerste * submenu-item; marge/padding eromheen weghalen zodat de kop strak aansluit. */ #kt-menu-panel .ktm-menu .megatitle{ margin:0!important; padding:0 0 4px!important; } /* Kleur op de link én alle child-elementen (bijv.
), * zodat een thema-/oude regel de tekst niet wit kan maken. */ #kt-menu-panel .ktm-menu a, #kt-menu-panel .ktm-menu a *{ color:var(--ktm-panel-text,#1d1d1d)!important; } #kt-menu-panel .ktm-menu a{ display:block!important; width:auto!important; } #kt-menu-panel .ktm-menu a:hover, #kt-menu-panel .ktm-menu a:hover *, #kt-menu-panel .ktm-menu .current-menu-item > a{ color:var(--ktm-panel-accent,#2e7d32)!important; } /* Divi's mega-menu centreert het submenu met left:50% + transform:translateX(-50%), * waardoor het in het schuifpaneel naar links buiten beeld valt. Alles terug in de flow. */ #kt-menu-panel .ktm-menu .sub-menu{ position:static!important; left:auto!important; right:auto!important; transform:none!important; margin:0!important; width:auto!important; max-width:100%!important; } /* ============================================================= * * HEADER * ============================================================= */ /* Vol breed: breek uit de (smalle, gecentreerde) Divi-container. */ .kthf-header{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:var(--kthf-main-bg,#fff); color:var(--kthf-main-tx,#1d1d1d); z-index:9990; } .kthf-header--sticky{ position:sticky; top:0; } .kthf-header.kthf-scrolled{ box-shadow:0 2px 14px rgba(0,0,0,.12); } /* Neutraliseer de Divi-kolom/rij/sectie/module waar de shortcode in staat: geen marges, * paddings (ook verticaal!) of max-breedte die de header smaller maken of witruimte geven. */ .et-l--header:has(.kthf-header), .et-l--header .et_builder_inner_content:has(.kthf-header), .et_pb_section:has(.kthf-header), .et_pb_row:has(.kthf-header), .et_pb_column:has(.kthf-header), .et_pb_module:has(.kthf-header), .et_pb_text:has(.kthf-header), .et_pb_text_inner:has(.kthf-header){ max-width:100%!important; width:100%!important; padding:0!important; margin:0!important; min-height:0!important; } /* Verberg overige (oude) secties van de Divi-header die onze header niet bevatten. */ .et-l--header .et_pb_section:not(:has(.kthf-header)){ display:none!important; } /* Ticker (lichtkrant) — één bericht tegelijk, gecentreerd, rouleert via JS. * Achtergrond en tekstkleur zijn los instelbaar (standaard: wit met merkgroene tekst). */ .kthf-ticker{ background:var(--kthf-ticker-bg,#fff); color:var(--kthf-ticker-tx,#2e7d32); overflow:hidden; border-bottom:1px solid rgba(0,0,0,.06); } .kthf-ticker__in{ position:relative; height:36px; max-width:1200px; margin:0 auto; } .kthf-ticker__slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; font-size:.84rem; font-weight:600; line-height:1.2; text-align:center; opacity:0; visibility:hidden; transition:opacity .45s ease; } .kthf-ticker__slide.is-active{ opacity:1; visibility:visible; } .kthf-ticker__slide, .kthf-ticker__slide *{ color:var(--kthf-ticker-tx,#2e7d32)!important; } .kthf-ticker .kthf-ticon{ flex:0 0 auto; } /* Iconen uit de USP-set van Kat en Tuin (currentColor → volgt de tekstkleur) op maat */ .kthf-ticker__slide > svg{ flex:0 0 auto; width:18px; height:18px; } .kthf-ticker__sub{ font-style:normal; font-weight:400; opacity:.8; margin-left:6px; } .kthf-ticker__slide--rev{ gap:6px; font-weight:700; } /* De sterren in de review-badge behouden hun eigen (gele) kleur binnen de ticker */ .kthf-ticker__slide--rev .kthf-star svg path{ fill:#fbbc05!important; } /* Topbalk */ .kthf-topbar{ background:var(--kthf-top-bg,#7cc68d); color:var(--kthf-top-tx,#fff); font-size:.82rem; } /* Dwing de tekst- en icoonkleur af (thema kleurt links anders groen) */ .kthf-topbar, .kthf-topbar a, .kthf-topbar .kthf-top-link, .kthf-topbar span, .kthf-topbar svg{ color:var(--kthf-top-tx,#fff)!important; fill:currentColor; } .kthf-topbar__in{ max-width:1200px; margin:0 auto; padding:6px 16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 18px; } .kthf-topbar__left, .kthf-topbar__right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; } .kthf-top-link{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:6px; opacity:.95; } .kthf-top-link:hover{ opacity:1; text-decoration:underline; } .kthf-top-link svg{ flex:0 0 auto; } .kthf-top-ship, .kthf-top-review{ display:inline-flex; align-items:center; gap:6px; } /* Leeg topbalk-vak niet als lege ruimte laten meetellen */ .kthf-topbar__left:empty, .kthf-topbar__right:empty{ display:none; } /* Hoofdbalk — mobiel: logo gecentreerd, winkelwagen + hamburger rechts (hamburger uiterst rechts) */ .kthf-mainbar{ background:var(--kthf-main-bg,#fff); } .kthf-mainbar__in{ max-width:1200px; margin:0 auto; min-height:64px; padding:8px 16px; display:flex; align-items:center; gap:10px; } .kthf-logo{ order:0; display:inline-flex; align-items:center; line-height:0; } /* mobiel: links uitgelijnd */ .kthf-logo img{ height:var(--kthf-logo-hm,40px); width:auto; display:block; } .kthf-actions{ margin-left:auto; order:1; display:flex; align-items:center; gap:10px; } .kthf-hamburger{ order:2; } /* na de winkelwagen → altijd uiterst rechts */ .kthf-cart{ position:relative; display:inline-flex; align-items:center; justify-content:center; color:var(--kthf-main-tx,#1d1d1d); text-decoration:none; width:40px; height:40px; } .kthf-cart:hover{ color:var(--kthf-accent,#2e7d32); } .kthf-cart-count{ position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 4px; background:var(--kthf-accent,#2e7d32); color:#fff; border-radius:9px; font-size:11px; line-height:18px; font-weight:700; text-align:center; } .kthf-cart-count[data-count="0"]{ display:none; } .kthf-cart--hidden{ display:none; } /* Review-badge (compact, in header) */ .kthf-review{ display:inline-flex; align-items:center; gap:6px; } .kthf-review__num{ font-weight:800; } .kthf-stars{ display:inline-flex; gap:1px; } .kthf-star{ line-height:0; opacity:.35; } .kthf-star.on{ opacity:1; } .kthf-review__count{ opacity:.85; } /* Horizontaal menu (desktop) */ .kthf-nav{ display:flex; } .kthf-nav .kthf-menu{ list-style:none!important; margin:0; padding:0; display:flex; flex-wrap:nowrap; align-items:center; gap:2px; } .kthf-nav .kthf-menu li{ position:relative; list-style:none!important; margin:0; padding:0; } /* Geen thema-bulletpunten of scheidingstekens tussen items */ .kthf-nav .kthf-menu li::before, .kthf-nav .kthf-menu li::after, .kthf-nav .kthf-menu a::before, .kthf-nav .kthf-menu a::after{ content:none!important; display:none!important; } .kthf-nav .kthf-menu a{ display:block; padding:10px 13px; color:inherit; text-decoration:none; font-family:inherit; font-weight:600; font-size:15px; line-height:1.2; white-space:nowrap; border-radius:6px; } .kthf-nav .kthf-menu a:hover, .kthf-nav .kthf-menu .current-menu-item > a{ color:var(--kthf-accent,#2e7d32); } .kthf-nav .kthf-menu .sub-menu{ position:absolute; top:100%; left:0; min-width:220px; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.15); border-radius:8px; list-style:none!important; margin:0; padding:8px 0; display:none; z-index:50; flex-direction:column; flex-wrap:nowrap; } .kthf-nav .kthf-menu li:hover > .sub-menu, .kthf-nav .kthf-menu li:focus-within > .sub-menu{ display:block; } .kthf-nav .kthf-menu .sub-menu a{ padding:9px 18px; font-weight:500; font-size:14px; color:#1d1d1d; white-space:normal; } /* Ook in het desktop-uitklapmenu items als blok (thema zet ze soms inline-block) */ .kthf-nav .kthf-menu .sub-menu li{ display:block!important; float:none!important; width:auto!important; } /* Genest niveau (bijv. KAT → Merken → merklijst) opent als uitklap naast het item */ .kthf-nav .kthf-menu .sub-menu .sub-menu{ top:0; left:100%; border-radius:8px; } .kthf-nav .kthf-menu .sub-menu .sub-menu{ max-height:75vh; overflow-y:auto; overflow-x:hidden; min-width:240px; } /* Pijltje voor items met een submenu in het desktopmenu */ .kthf-nav .kthf-menu .menu-item-has-children > a{ position:relative; padding-right:26px; } .kthf-nav .kthf-menu .menu-item-has-children > a::after{ content:""; position:absolute; right:12px; top:50%; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-60%) rotate(45deg); opacity:.7; } .kthf-nav .kthf-menu .sub-menu .menu-item-has-children > a::after{ transform:translateY(-60%) rotate(-45deg); right:14px; } /* Iets meer lucht tussen logo en menu op ruime schermen */ @media (min-width:1100px){ .kthf-nav .kthf-menu{ gap:6px; } .kthf-nav .kthf-menu a{ padding:10px 15px; } } /* ============================================================= * * FOOTER * ============================================================= */ .kthf-footer{ background:var(--kthf-foot-bg,#1f3d2b); color:var(--kthf-foot-tx,#e9efe9); } .kthf-footer__cols{ max-width:1200px; margin:0 auto; padding:44px 20px 24px; display:grid; grid-template-columns:1fr; gap:32px; } .kthf-col__title{ margin:0 0 14px; font-size:1.05rem; font-weight:700; color:#fff; } .kthf-address{ font-style:normal; line-height:1.6; margin:0 0 12px; } .kthf-fline{ display:flex; align-items:center; gap:8px; color:var(--kthf-foot-tx,#e9efe9); text-decoration:none; margin:6px 0; } .kthf-fline:hover{ color:#fff; } .kthf-links{ list-style:none; margin:0; padding:0; } .kthf-links li{ margin:0 0 9px; } .kthf-links a{ color:var(--kthf-foot-tx,#e9efe9); text-decoration:none; } .kthf-links a:hover{ color:var(--kthf-foot-ac,#a5d6a7); text-decoration:underline; } .kthf-col--extra .kthf-review{ margin:0 0 14px; } .kthf-col--extra .kthf-review__num{ font-size:1.4rem; color:#fff; } .kthf-social{ display:flex; gap:12px; margin:0 0 16px; } .kthf-social a{ color:var(--kthf-foot-tx,#e9efe9); line-height:0; } .kthf-social a:hover{ color:#fff; } .kthf-pay{ max-height:34px; width:auto; display:block; } .kthf-footer__bottom{ border-top:1px solid rgba(255,255,255,.14); text-align:center; font-size:.86rem; padding:16px; opacity:.9; } @media (min-width:600px){ .kthf-footer__cols{ grid-template-columns:1fr 1fr; } } @media (min-width:900px){ .kthf-footer__cols{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; } } /* De desktop-weergave van de HEADER (hoofdbalk als flex-rij, onderdelen tonen/verbergen * per viewport) wordt door de plugin geïnjecteerd op basis van de ingestelde breekpunten. * Zie head_css() in wp-menu-toolkit.php. */