/* Mobile-only sticky bottom navigation. Hidden by default, shown at 600px and below (phones, not tablets). */ .zzb-mobile-nav, .zzb-mobile-submenu { display: none; } @media (max-width: 600px) { /* Disables the native rubber-band overscroll bounce past the real end of the page. That bounce region is where position:fixed elements (our nav bar included) are known to visually detach on iOS WebKit, particularly in Chrome-iOS's own scroll implementation — removing the bounce removes the state that triggers it. */ html, body { overscroll-behavior-y: none; } /* Shared bar styling, independent of positioning mode. */ .zzb-mobile-nav { display: flex; align-items: flex-end; z-index: 9999; /* The theme resets `* { box-sizing: border-box }` globally, which would make `height: 60px` include the safe-area padding below and squeeze the 60px-tall icon items above it, pushing them out of the bar. Opt this element back into content-box so height and padding add up. */ box-sizing: content-box; height: 60px; /* Some iOS browsers (Chrome-iOS in particular) have been observed misreporting env(safe-area-inset-bottom) as it animates their own toolbar, producing a much larger value than any real device notch. Capping it prevents that from blowing up the bar's height. */ padding-bottom: min(env(safe-area-inset-bottom, 0px), 40px); background: #fff; box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.08); } /* --- 'fixed' mode (see ZZB_NAV_POSITIONING) --- */ body.zzb-nav-positioning-fixed .zzb-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; /* Forces this element onto its own persistent GPU compositing layer. The established mitigation for fixed-position elements visually glitching during momentum/rubber-band scroll on iOS WebKit — a compositor-level rendering artifact that never touches scrollY or layout, so it isn't something JS diagnostics can detect directly. Only partially reliable in practice — see 'sticky' mode below. */ -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; } /* Prevent fixed bar from covering page content. Padding goes on the footer itself (not ) so the reserved space is filled with the footer's own background instead of exposing the page's blank background below it. Only needed in 'fixed' mode — a sticky bar occupies real flow space, so it can't cover anything. */ body.zzb-nav-positioning-fixed.zzb-has-mobile-nav .l-footer { padding-bottom: calc(60px + min(env(safe-area-inset-bottom, 0px), 40px)); } /* --- 'sticky' mode (see ZZB_NAV_POSITIONING) --- Avoids position:fixed's known Chrome-iOS bug entirely, by never using its code path. Requires all page content wrapped in .zzb-sticky-wrap (see zzb_mobile_nav_wrap_open/close in functions.php) so body can be a flex column: the wrapper grows to fill available height and the nav sits as the final sticky item, reaching the true bottom even on pages shorter than one screen. */ body.zzb-nav-positioning-sticky { display: flex; flex-direction: column; min-height: 100vh; /* The theme sets body{overflow:hidden} globally. A sticky element's containing block is its nearest ancestor with a scroll mechanism — overflow:hidden technically qualifies even though nothing visibly scrolls inside body itself (the real page scrolls via ), which would break sticky's "stick to the viewport" behavior. Only the vertical axis needs freeing; keep horizontal clipping as-is. */ overflow-y: visible; } body.zzb-nav-positioning-sticky .zzb-sticky-wrap { flex: 1 0 auto; } body.zzb-nav-positioning-sticky .zzb-mobile-nav { position: sticky; bottom: 0; flex-shrink: 0; } /* The Salonized floating button is redundant here — Boek nu covers it. Only the /button iframe is targeted; the booking module (/widget) stays visible when opened. */ iframe[src*="widget.salonized.com/button"] { display: none !important; } /* Slide-up submenu for Informatie/Contact. Sits directly above the main bar, item styling reuses .zzb-mobile-nav__item. Two layouts share this base (see ZZB_SUBMENU_LAYOUT in functions.php); hidden until opened. */ .zzb-mobile-submenu { display: flex; position: fixed; bottom: calc(60px + min(env(safe-area-inset-bottom, 0px), 40px)); z-index: 9998; box-sizing: content-box; background: #fff; box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.08); transform: translateY(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s ease; } .zzb-mobile-submenu.is-open { transform: translateY(0); visibility: visible; } /* Row layout: full width, items side by side (original version). Sits flush against the main bar — taller than the main bar (88px vs 60px) so its content clears the "Boek nu" circle, which pokes 28px above the main bar's top edge (see margin-top on .zzb-mobile-nav__item--book .zzb-mobile-nav__icon) and would otherwise sit over the bottom of the panel. Items are pushed toward the top of that extra height instead of centered, so they land above the circle rather than behind it. */ .zzb-mobile-submenu--row { left: 0; right: 0; height: 88px; } .zzb-mobile-submenu--row .zzb-mobile-nav__item { justify-content: flex-start; padding-top: 14px; } /* Column layout: narrow, width of the triggering button (set inline via JS from its bounding rect), items stacked vertically. */ .zzb-mobile-submenu--column { flex-direction: column; height: 180px; } .zzb-mobile-submenu--column .zzb-mobile-nav__item { height: 60px; flex: 0 0 auto; } /* Grid layout: Behandelingen only. Much taller panel (80vh) with a 3-column grid of tiles, since it can hold many WP menu items — scrolls internally if content exceeds that height. */ .zzb-mobile-submenu--grid { left: 0; right: 0; height: 60vh; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 16px 44px; /* extra bottom padding clears the "Boek nu" circle */ overflow-y: auto; -webkit-overflow-scrolling: touch; align-content: flex-start; } } /* Tile: a visibly distinct card, more prominent than the compact bar/row items (.zzb-mobile-nav__item) — background, border, larger icon. */ .zzb-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 8px; background: #f4f4f4; border: 1px solid #e2e2e2; border-radius: 10px; color: #333; text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; min-height: 96px; } .zzb-tile:hover, .zzb-tile:focus, .zzb-tile:active { background: #4B9467; border-color: #4B9467; color: #fff; text-decoration: none; } .zzb-tile__icon { font-size: 26px; color: #4B9467; } .zzb-tile:hover .zzb-tile__icon, .zzb-tile:focus .zzb-tile__icon, .zzb-tile:active .zzb-tile__icon { color: #fff; } .zzb-mobile-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 60px; color: #666; text-decoration: none; font-size: 11px; line-height: 1; text-align: center; } .zzb-mobile-nav__item:hover, .zzb-mobile-nav__item:focus { color: #4B9467; text-decoration: none; } /* Tap feedback — main bar only, not the submenu panels (which reuse the same .zzb-mobile-nav__item class). */ .zzb-mobile-nav > .zzb-mobile-nav__item:active, .zzb-mobile-nav > .zzb-mobile-nav__item:focus { background: #4B9467; color: #fff; } .zzb-mobile-nav__icon { font-size: 18px; } /* Center "Boek nu" item: raised, prominent circular button */ .zzb-mobile-nav__item--book { position: relative; color: #fff; } .zzb-mobile-nav__item--book .zzb-mobile-nav__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-top: -28px; border-radius: 50%; background: #4B9467; color: #fff; font-size: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } .zzb-mobile-nav__item--book .zzb-mobile-nav__label { color: #666; } .zzb-mobile-nav__item--book:hover .zzb-mobile-nav__icon, .zzb-mobile-nav__item--book:focus .zzb-mobile-nav__icon { background: #333; }