/* ========================================================================== XPLOROO · Global floating bottom navigation capsule bottom-nav.css — Styles for the 5-item capsule injected by js/bottom-nav.js. A floating, inset pill — not a full-width bar — using the site's existing glass/gradient/radius tokens (styles/variables.css) so it reads as one design system, not a new visual language, and inherits the same light/dark theme swap those tokens already do. Visible only at the same breakpoint the header already switches to its own mobile/tablet navigation at (see styles/header.css's `@media (max-width: 1024px)`), so this is mobile+tablet only and never competes with the desktop nav. Load anywhere after styles/variables.css. ========================================================================== */ .xploroo-bottom-nav { display: none; /* shown only ≤1024px, below */ } @media (max-width: 1024px) { .xploroo-bottom-nav { display: flex; align-items: stretch; justify-content: space-between; gap: 0.15rem; position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(94vw, 420px); z-index: 200; /* same tier as the header; the fullscreen mobile menu (var(--z-modal), 500) still layers above it */ padding: 0.45rem 0.55rem; border-radius: var(--radius-pill); border: 1px solid var(--glass-border); background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); /* Soft lift + a faint brand-colored atmospheric glow underneath — subtle, not a neon halo. */ box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38), 0 0 30px rgba(139, 60, 240, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; transition: transform 180ms ease, opacity 180ms ease; } /* Minimum required page spacing so the floating capsule never covers the last piece of content — applied only at the breakpoint the capsule is visible at, and only on pages that actually injected it (see the body class in js/bottom-nav.js). Sized to clear the capsule's own height + its floating bottom margin + the safe area. */ body.has-bottom-nav { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); } /* Hidden while the fullscreen mobile menu is open — reuses that menu's own existing `is-menu-open` state (set on by js/header.js's openMenu()/closeMenu(), the same class that drives its scroll-lock) rather than tracking a second, independent open/closed state here. Fades + settles out instead of just vanishing, and back in the same way when the sidebar closes; `pointer-events: none` keeps it from intercepting taps while invisible and layered under the menu. */ html.is-menu-open .xploroo-bottom-nav { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.94); pointer-events: none; } } .xploroo-bottom-nav__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-width: 0; padding: 0.3rem 0.2rem; border-radius: var(--radius-lg, 14px); color: var(--color-text-muted, rgba(255, 255, 255, 0.6)); text-decoration: none; transition: color 140ms ease, transform 140ms ease, background 140ms ease; } .xploroo-bottom-nav__item:active { transform: scale(0.92); } .xploroo-bottom-nav__icon { display: grid; place-items: center; width: 20px; height: 20px; } .xploroo-bottom-nav__icon svg { width: 100%; height: 100%; } .xploroo-bottom-nav__label { font-family: var(--font-body); font-size: 0.62rem; font-weight: var(--fw-semibold, 600); line-height: 1; white-space: nowrap; } /* Active state — same gradient-fill treatment already used for the active mobile-menu link (styles/header.css), plus a soft glass chip behind the icon+label so it also reads clearly at a glance, not just by color. */ .xploroo-bottom-nav__item[aria-current="page"] { background: var(--color-primary-subtle, rgba(124, 58, 237, 0.14)); } .xploroo-bottom-nav__item[aria-current="page"] .xploroo-bottom-nav__icon, .xploroo-bottom-nav__item[aria-current="page"] .xploroo-bottom-nav__label { color: transparent; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; } /* Gradient-fill via background-clip only paints text/glyphs, not stroked SVG paths — so the icon itself is recolored directly instead. */ .xploroo-bottom-nav__item[aria-current="page"] .xploroo-bottom-nav__icon svg { stroke: var(--color-primary, #7c3aed); } @media (prefers-reduced-motion: reduce) { .xploroo-bottom-nav, .xploroo-bottom-nav__item { transition: none; } } /* -------------------------------------------------------------------------- Coexistence with existing fixed/sticky bottom UI on package pages and toasts — nudged up so nothing sits underneath the floating capsule. Both are already mobile-only in their own stylesheets, matching this capsule's own mobile/tablet-only scope. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { body.has-bottom-nav .pkg-sticky-bar { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); } body.has-bottom-nav .influencer-services__toast, body.has-bottom-nav .pkg-share-toast { bottom: calc(2.5rem + 4.75rem + env(safe-area-inset-bottom, 0px)); } }