/* ============================================================ KARACA MOBILE BOTTOM NAVIGATION Only visible on screens ≤ 768px ============================================================ */ /* ── Body padding helper ─────────────────────────────────── */ /* The JS adds this class to automatically */ @media (max-width: 768px) { body.has-mobile-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } /* Expose nav height as a CSS variable for other fixed elements */ :root { --mobile-nav-offset: calc(64px + env(safe-area-inset-bottom, 0px)); } } /* ── Bar container ───────────────────────────────────────── */ .mobile-nav { /* Hidden on desktop */ display: none; /* Layout */ position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; /* Sizing */ height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); /* Match header: deep navy glass */ background-color: rgba(26, 43, 60, 0.70); /* #1A2B3C at 70% — same as header */ backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(255, 255, 255, 0.10); /* header uses border-white/10 */ box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18); /* Flex row */ flex-direction: row; align-items: stretch; justify-content: space-around; /* PWA / overscroll */ -webkit-overflow-scrolling: touch; overscroll-behavior: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; pointer-events: auto; } /* Show only on mobile */ @media (max-width: 768px) { .mobile-nav { display: flex; } } /* ── Individual tab item ─────────────────────────────────── */ .mobile-nav__item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px 6px; text-decoration: none; color: rgba(255, 255, 255, 0.5); transition: color 180ms ease; -webkit-tap-highlight-color: transparent; outline: none; cursor: pointer; min-width: 0; /* prevent overflow */ } /* Focus ring for keyboard / a11y */ .mobile-nav__item:focus-visible { outline: 2px solid #E67E22; outline-offset: -2px; border-radius: 8px; } /* ── Active state ────────────────────────────────────────── */ .mobile-nav__item.is-active { color: #E67E22; /* --color-secondary */ } /* ── Tap ripple feedback ─────────────────────────────────── */ .mobile-nav__item::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: rgba(230, 126, 34, 0.12); opacity: 0; transform: scale(0.6); transition: opacity 250ms ease, transform 250ms ease; pointer-events: none; } .mobile-nav__item.is-tapped::after { opacity: 1; transform: scale(1); } /* ── Icon wrapper ────────────────────────────────────────── */ .mobile-nav__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1); } .mobile-nav__item.is-active .mobile-nav__icon { transform: translateY(-2px) scale(1.12); } .mobile-nav__icon svg { width: 22px; height: 22px; stroke: currentColor; transition: fill 180ms ease; } /* Fill icon when active */ .mobile-nav__item.is-active .mobile-nav__icon svg { fill: rgba(230, 126, 34, 0.15); } /* ── Cart tab — slightly larger icon ────────────────────── */ .mobile-nav__item--cart .mobile-nav__icon { width: 30px; height: 30px; } .mobile-nav__item--cart .mobile-nav__icon svg { width: 24px; height: 24px; } /* ── Cart badge ──────────────────────────────────────────── */ .mobile-nav__badge { position: absolute; top: -5px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #E67E22; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; border: 1.5px solid #1A2B3C; pointer-events: none; } /* ── Label ───────────────────────────────────────────────── */ .mobile-nav__label { font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: font-weight 180ms ease; } .mobile-nav__item.is-active .mobile-nav__label { font-weight: 700; } /* ── Active dot indicator ────────────────────────────────── */ .mobile-nav__dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%) scale(0); width: 4px; height: 4px; border-radius: 50%; background: #E67E22; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1); } .mobile-nav__item.is-active .mobile-nav__dot { transform: translateX(-50%) scale(1); } /* ── PWA standalone mode — extra bottom padding ─────────── */ @media (display-mode: standalone) { .mobile-nav { /* env() already handles this, but belt-and-suspenders */ padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px); height: calc(64px + max(env(safe-area-inset-bottom, 0px), 8px)); } } /* ── Landscape: slightly shorter bar ────────────────────── */ @media (max-width: 768px) and (orientation: landscape) { .mobile-nav { height: calc(52px + env(safe-area-inset-bottom, 0px)); } body.has-mobile-nav { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); } .mobile-nav__icon svg { width: 20px; height: 20px; } .mobile-nav__label { font-size: 9px; } }