/* ============================================ Mobiel mega-menu (drill-down) -------------------------------------------- Wordt gerenderd door includes/hooks/to_mobile_menu.php in via wp_footer. - Op mobiel/tablet (< 1024px) overruled de hamburger-knop de native Impreza drawer en opent dit overlay. - Drie schermen schuiven horizontaal in/uit: hoofdmenu → sub-categorie → sub-sub links. ============================================ */ /* ---------- Container — full-screen overlay ---------- */ .to-mobile-menu { position: fixed; inset: 0; z-index: 9999; display: none; pointer-events: none; } .to-mobile-menu[hidden] { display: none !important; } .to-mobile-menu.is-open { display: block; pointer-events: auto; } /* Backdrop achter het paneel — vult resterende viewport en sluit op klik. z-index: 1 zodat het ONDER het paneel ligt (panel = 2). */ .to-mobile-menu__backdrop { position: absolute; inset: 0; z-index: 1; background: rgba(58, 47, 34, 0.45); border: 0; padding: 0; cursor: pointer; opacity: 0; transition: opacity .25s ease; -webkit-tap-highlight-color: transparent; } .to-mobile-menu.is-open .to-mobile-menu__backdrop { opacity: 1; } /* ---------- Paneel ---------- */ .to-mobile-menu__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; max-width: 480px; z-index: 2; background: var(--to-bg, #F8F2E6); color: var(--to-ink, #3A2F22); font-family: var(--to-font-body, 'Inter', system-ui, sans-serif); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 60px -10px rgba(58, 47, 34, 0.25); overscroll-behavior: contain; } .to-mobile-menu.is-open .to-mobile-menu__panel { transform: translateX(0); } /* ---------- Header ---------- */ .to-mobile-menu__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; /* iOS safe-area: respect notch / dynamic island */ padding-top: calc(14px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--to-line-soft, #E8DFCB); min-height: 64px; background: var(--to-bg, #F8F2E6); } .to-mobile-menu__brand { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; } .to-mobile-menu__brand .custom-logo-link img, .to-mobile-menu__brand img { max-height: 36px; width: auto; display: block; } .to-mobile-menu__brand-text { font-family: var(--to-font-display, 'Fraunces', Georgia, serif); font-size: 16px; color: var(--to-ink, #3A2F22); letter-spacing: -0.01em; } .to-mobile-menu__back { display: none; align-items: center; gap: 4px; padding: 8px 10px 8px 4px; margin: 0; font: inherit; font-size: 14px; color: var(--to-ink-soft, #6B5F4F); background: transparent; border: 0; border-radius: 100px; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 44px; } .to-mobile-menu__back > span:first-child { font-size: 22px; line-height: 1; margin-right: 2px; } .to-mobile-menu__back:focus-visible { color: var(--to-ink, #3A2F22); } @media (hover: hover) { .to-mobile-menu__back:hover { color: var(--to-ink, #3A2F22); } } .to-mobile-menu.is-deeper .to-mobile-menu__back { display: inline-flex; } .to-mobile-menu.is-deeper .to-mobile-menu__brand { display: none; } .to-mobile-menu__close { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--to-line, #D9CDB8); background: transparent; color: var(--to-ink-soft, #6B5F4F); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent; } .to-mobile-menu__close:focus-visible { background: var(--to-bg-alt, #EFE5D1); color: var(--to-ink, #3A2F22); outline: none; } @media (hover: hover) { .to-mobile-menu__close:hover { background: var(--to-bg-alt, #EFE5D1); color: var(--to-ink, #3A2F22); } } /* ---------- Body ---------- */ .to-mobile-menu__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; position: relative; } /* Schermen — slide-in animatie */ .to-mobile-menu__screen { display: none; animation: tomm-slide-in .28s cubic-bezier(.2,.8,.2,1); } .to-mobile-menu__screen.is-active { display: block; } @keyframes tomm-slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ---------- Search ---------- */ .to-mobile-menu__search { padding: 16px 18px 8px; position: relative; } .to-mobile-menu__search input { width: 100%; box-sizing: border-box; padding: 13px 16px 13px 44px; background: var(--to-surface-cream, #F0E6D2); border: 1px solid var(--to-line-soft, #E8DFCB); border-radius: 100px; font: inherit; font-size: 14px; color: var(--to-ink, #3A2F22); transition: border-color .15s, background .15s; } .to-mobile-menu__search input::placeholder { color: var(--to-ink-muted, #8F8373); } .to-mobile-menu__search input:focus { outline: none; border-color: var(--to-accent, #B56E3C); background: var(--to-bg-card, #fff); } .to-mobile-menu__search-icon { position: absolute; left: 34px; /* Compenseer asymmetrische container-padding (16 top, 8 bottom) zodat het icoon visueel midden in het input-veld zit. */ top: calc(50% + 4px); transform: translateY(-50%); color: var(--to-ink-muted, #8F8373); pointer-events: none; display: inline-flex; } /* ---------- Eyebrow / titel / lede ---------- */ .to-mobile-menu__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--to-ink-muted, #8F8373); font-weight: 500; } .to-mobile-menu__intro { padding: 16px 20px 14px; border-bottom: 1px solid var(--to-line-soft, #E8DFCB); } .to-mobile-menu__intro .to-mobile-menu__eyebrow { margin-bottom: 4px; } .to-mobile-menu__title { font-family: var(--to-font-display, 'Fraunces', Georgia, serif); font-weight: 400; font-size: 20px; line-height: 1.15; letter-spacing: -0.015em; color: var(--to-ink, #3A2F22); margin: 0 0 2px; } .to-mobile-menu__title em { font-style: italic; color: var(--to-accent, #B56E3C); } .to-mobile-menu__lede { font-size: 13px; color: var(--to-ink-soft, #6B5F4F); font-style: italic; font-family: var(--to-font-display, 'Fraunces', Georgia, serif); margin: 8px 0 0; line-height: 1.45; } /* ---------- Lijst van rijen ---------- */ .to-mobile-menu__list { padding: 4px 0 12px; } .to-mobile-menu__row { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; margin: 0; background: transparent; border: 0; border-bottom: 1px solid var(--to-line-soft, #E8DFCB); border-radius: 0; text-align: left; color: var(--to-ink, #3A2F22); font: inherit; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; min-height: 56px; transition: background .15s; } .to-mobile-menu__row:focus-visible { background: var(--to-surface-cream, #F0E6D2); outline: none; } .to-mobile-menu__row:active { background: var(--to-bg-alt, #EFE5D1); } @media (hover: hover) { .to-mobile-menu__row:hover { background: var(--to-surface-cream, #F0E6D2); } } .to-mobile-menu__row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .to-mobile-menu__row-title { font-family: var(--to-font-display, 'Fraunces', Georgia, serif); font-size: 18px; line-height: 1.2; color: var(--to-ink, #3A2F22); letter-spacing: -0.01em; } .to-mobile-menu__row-meta { display: none; } .to-mobile-menu__row-chev, .to-mobile-menu__row-arrow { flex: 0 0 auto; font-size: 20px; color: var(--to-ink-muted, #8F8373); line-height: 1; } .to-mobile-menu__row-arrow { font-size: 16px; opacity: 0.6; } /* Hoofdmenu rijen extra prominent */ .to-mobile-menu__screen[data-tomm-screen="root"] .to-mobile-menu__row { padding: 18px 20px; min-height: 64px; } .to-mobile-menu__screen[data-tomm-screen="root"] .to-mobile-menu__row-title { font-size: 22px; } /* "Alles in X" pre-pended op section-niveau — onderscheidt zich subtiel */ .to-mobile-menu__row--all .to-mobile-menu__row-title { font-family: var(--to-font-body, inherit); font-size: 14px; font-weight: 500; color: var(--to-accent, #B56E3C); letter-spacing: 0; } .to-mobile-menu__row--all .to-mobile-menu__row-arrow { color: var(--to-accent, #B56E3C); opacity: 1; } /* ---------- Snel-naar links onderaan ---------- */ .to-mobile-menu__quick { padding: 12px 20px 32px; /* iOS safe-area: respect home indicator */ padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); } .to-mobile-menu__quick .to-mobile-menu__eyebrow { margin-bottom: 10px; } .to-mobile-menu__quick-list { display: flex; flex-direction: column; gap: 0; } .to-mobile-menu__quick-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; font-size: 14px; color: var(--to-ink-soft, #6B5F4F); text-decoration: none; border-bottom: 1px solid var(--to-line-soft, #E8DFCB); min-height: 44px; -webkit-tap-highlight-color: transparent; } .to-mobile-menu__quick-link:last-child { border-bottom: 0; } .to-mobile-menu__quick-link span:last-child { opacity: 0.4; } .to-mobile-menu__quick-link:focus-visible { color: var(--to-ink, #3A2F22); outline: none; } @media (hover: hover) { .to-mobile-menu__quick-link:hover { color: var(--to-ink, #3A2F22); } } /* ---------- CTA-knop onderaan sub-sub scherm ---------- */ .to-mobile-menu__cta { padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } .to-mobile-menu__btn, .to-mobile-menu__btn:link, .to-mobile-menu__btn:visited { width: 100%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 18px; background: var(--to-accent, #B56E3C) !important; color: #fff !important; border-radius: 100px; font-size: 14px; font-weight: 500; text-decoration: none !important; transition: background .15s, transform .15s; min-height: 48px; -webkit-tap-highlight-color: transparent; } .to-mobile-menu__btn:focus, .to-mobile-menu__btn:focus-visible, .to-mobile-menu__btn:active { background: var(--to-accent-hover, #9A5A2C) !important; color: #fff !important; text-decoration: none !important; } @media (hover: hover) { .to-mobile-menu__btn:hover { background: var(--to-accent-hover, #9A5A2C) !important; color: #fff !important; transform: translateY(-1px); text-decoration: none !important; } } .to-mobile-menu__btn span { color: #fff !important; } /* ---------- Lock body scroll wanneer menu open ---------- */ body.to-mobile-menu-open { overflow: hidden !important; } /* ---------- Verberg native Impreza drawer altijd op mobile. We nemen de hamburger over en tonen ons eigen paneel. */ @media (max-width: 1023px) { /* Native Impreza mobile drawer (alle varianten) volledig uit. */ .w-nav.type_mobile .w-nav-list.level_1, .w-nav.hidden_for_laptops .w-nav-list.level_1, .w-nav.type_mobile.opened .w-nav-list.level_1, .w-nav.hidden_for_laptops.opened .w-nav-list.level_1 { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* De hamburger-knop blijft zichtbaar — JS hijackt 'm. */ } /* ---------- Op desktop niet renderen ---------- */ @media (min-width: 1024px) { .to-mobile-menu { display: none !important; } body.to-mobile-menu-open { overflow: visible !important; } } /* ---------- Tablet (600 — 1023px): paneel iets ruimer, max 440px is prettig naast een zichtbare backdrop. */ @media (min-width: 600px) and (max-width: 1023px) { .to-mobile-menu__panel { max-width: 440px; } } /* ---------- Klein mobiel (≤ 380px): tighter padding + iets kleinere titels zodat alles past op iPhone SE (375px). */ @media (max-width: 380px) { .to-mobile-menu__header { padding-left: 14px; padding-right: 14px; min-height: 60px; } .to-mobile-menu__row { padding-left: 16px; padding-right: 16px; } .to-mobile-menu__intro { padding-left: 16px; padding-right: 16px; } .to-mobile-menu__quick { padding-left: 16px; padding-right: 16px; } .to-mobile-menu__cta { padding-left: 16px; padding-right: 16px; } .to-mobile-menu__search { padding-left: 14px; padding-right: 14px; } .to-mobile-menu__search-icon { left: 28px; } .to-mobile-menu__title { font-size: 18px; } .to-mobile-menu__screen[data-tomm-screen="root"] .to-mobile-menu__row-title { font-size: 20px; } .to-mobile-menu__row-title { font-size: 17px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .to-mobile-menu__panel, .to-mobile-menu__backdrop, .to-mobile-menu__screen { transition: none !important; animation: none !important; } }