/* ════════════════════════════════════════════════ */ /* ── MOBILE BOTTOM NAVIGATION BAR ── */ /* ════════════════════════════════════════════════ */ /* ── Base: hidden on desktop, visible on mobile (<= 768px) ── */ .mobile-bottom-nav { display: none !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; height: 64px; padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(12, 12, 24, 0.92); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(255, 255, 255, 0.08); align-items: center; justify-content: space-around; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); transform: translateY(0); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* ── Hide on scroll-down (room for content), show on scroll-up ── */ .mobile-bottom-nav.hidden { transform: translateY(100%); } /* ── Each nav item ── */ .mbn-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; height: 100%; min-width: 0; padding: 4px 2px; color: rgba(255, 255, 255, 0.45); text-decoration: none; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; position: relative; } .mbn-item:active { transform: scale(0.94); transition: transform 0.1s ease; } /* ── Active tab highlight ── */ .mbn-item.active { color: var(--accent, #e50914); } .mbn-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent, #e50914); } /* ── Icon ── */ .mbn-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .mbn-icon svg { width: 22px; height: 22px; } /* ── Label ── */ .mbn-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2px; line-height: 1; } /* ── Push main content up so the nav doesn't cover it ── */ @media (max-width: 768px) { .mobile-bottom-nav { display: flex !important; } /* Add bottom padding to or main so content isn't hidden */ body.has-mobile-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } /* The footer should also clear the nav */ .site-footer { margin-bottom: 64px; } /* Scroll-to-top button sits above the nav */ .scroll-to-top { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; } /* Toast messages sit above the nav */ .wl-toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } /* Flash message sits above the nav */ .flash-message { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } } /* ── Pulse animation for active tab icon ── */ @keyframes mbnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .mbn-item.active .mbn-icon { animation: mbnPulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── Badge (notification dot) ── */ .mbn-badge { position: absolute; top: -2px; right: calc(50% - 16px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--accent, #e50914); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; }