/* LAB13 PWA App Nav | v1.2.1 */ /* ---------- Hide all scrollbars ---------- */ * { scrollbar-width: none !important; -ms-overflow-style: none !important; } *::-webkit-scrollbar { display: none !important; } /* Hide website nav in PWA mode */ body.pwa-mode .nav { display: none !important; } body.pwa-mode .mobile-menu { display: none !important; } /* App nav hidden by default, shown only in PWA mode */ #app-nav { display: none; } body.pwa-mode #app-nav { display: block; } /* Push body content below top bar and above bottom tab bar — applied early via html.pwa-mode */ html.pwa-mode body, body.pwa-mode { padding-top: calc(env(safe-area-inset-top, 0px) + 20px); padding-bottom: 100px; } /* Remove nav-height gap from hero — top bar is much shorter than website nav */ html.pwa-mode .hero, body.pwa-mode .hero { padding-top: 2.5rem !important; } /* ============================================ Top Bar ============================================ */ .app-top-bar { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; background: rgba(26, 26, 26, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1000; gap: 16px; } .app-links { display: flex; align-items: center; gap: 14px; } .app-links a { font-size: 0.78rem; font-weight: 500; color: rgba(255, 255, 255, 0.45); text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } .app-links a.active { color: #B52249; font-weight: 600; text-decoration: none; } .app-links a.active::after { display: none; } .app-links a:hover { color: rgba(255, 255, 255, 0.75); } .app-cart-btn { position: absolute; right: 16px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border-radius: 50%; flex-shrink: 0; text-decoration: none; transition: background 0.2s ease; } .app-cart-btn:hover { background: rgba(255, 255, 255, 0.14); } .app-cart-btn svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .app-cart-btn .cart-badge { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; background: #B52249; color: #fff; font-size: 0.6rem; font-weight: 700; border-radius: 50%; display: none; align-items: center; justify-content: center; border: 1.5px solid #1A1A1A; } .app-cart-btn .cart-badge.show { display: flex; } /* ============================================ Bottom Tab Bar — static in HTML, hidden until pwa-mode ============================================ */ /* Hidden by default — shown immediately by html.pwa-mode (set in before any JS) */ .app-tab-bar { display: none; } html.pwa-mode .app-tab-bar, body.pwa-mode .app-tab-bar { display: flex; } .app-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; align-items: flex-end; justify-content: space-around; /* Fixed height — no env() so it never recomputes and jumps */ height: 100px; box-sizing: border-box; /* Safe area handled in padding only */ padding: 0 24px max(env(safe-area-inset-bottom, 0px), 8px); background: rgba(12, 12, 12, 0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.07); z-index: 1000; overflow: hidden; /* GPU compositing — prevents iOS WKWebView from moving fixed elements during page repaints */ -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; } .app-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-decoration: none; flex: 1; } .app-tab img { /* Fixed width+height — prevents reflow when image loads */ width: 75px; height: 30px; opacity: 0.35; display: block; object-fit: contain; pointer-events: none; } .app-tab.active img { width: 115px; height: 46px; opacity: 1; } .app-tab-line { height: 2px; width: 0; background: #B52249; border-radius: 2px; } .app-tab.active .app-tab-line { width: 28px; } /* ============================================ Light Mode Overrides ============================================ */ [data-theme="light"] .app-top-bar { background: rgba(242, 232, 230, 0.92); } [data-theme="light"] .app-links a { color: rgba(0, 0, 0, 0.4); } [data-theme="light"] .app-links a.active { color: #B52249; } [data-theme="light"] .app-links a:hover { color: rgba(0, 0, 0, 0.65); } [data-theme="light"] .app-cart-btn { background: rgba(0, 0, 0, 0.07); } [data-theme="light"] .app-cart-btn:hover { background: rgba(0, 0, 0, 0.12); } [data-theme="light"] .app-cart-btn svg { stroke: #1A1A1A; } [data-theme="light"] .app-cart-btn .cart-badge { border-color: #f2e8e6; } [data-theme="light"] .app-tab-bar { background: rgba(242, 232, 230, 0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top-color: rgba(0, 0, 0, 0.07); } [data-theme="light"] .app-tab img { filter: invert(1); } [data-theme="light"] .app-tab.active img { filter: none; } /* ============================================ Stadium Background — PWA Override position:fixed relative to viewport, ignores body padding-top ============================================ */ html.pwa-mode .stadium-bg-layer, body.pwa-mode .stadium-bg-layer { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-size: 160% !important; background-position: center 5% !important; margin-bottom: 0 !important; } /* ── Card Image Carousel Arrows ─────────────────────────────────────────── */ .card-img-carousel { position: relative; overflow: hidden; user-select: none; } .card-img-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.45); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; opacity: 0; transition: opacity 0.2s, background 0.15s; } .card-img-carousel:hover .card-img-arrow { opacity: 1; } .card-img-arrow:hover { background: rgba(0,0,0,0.7); } .card-img-arrow-l { left: 6px; } .card-img-arrow-r { right: 6px; } /* Always show on mobile (no hover) */ @media (max-width: 639px) { .card-img-arrow { opacity: 0.75; } } /* ── Mobile Menu Search ─────────────────────────────────────────────────── */ .mob-search-section { margin-bottom: 20px; } .mob-search-label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 8px; } .mob-search-inp-wrap { position: relative; } .mob-search-inp { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; color: #fff; font-size: 1rem; padding: 10px 16px; outline: none; font-family: inherit; transition: border-color 0.2s; } .mob-search-inp { padding-right: 38px; } .mob-search-inp::placeholder { color: var(--gray-500); } .mob-search-inp:focus { border-color: var(--crimson); } .mob-search-clear { display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); border: none; border-radius: 50%; color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; } .mob-search-results { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; } .mob-search-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 10px; text-decoration: none; transition: background 0.15s; } .mob-search-item:hover { background: rgba(255,255,255,0.06); } .mob-search-img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,0.08); flex-shrink: 0; } .mob-search-name { flex: 1; font-size: 0.9rem; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mob-search-price { font-size: 0.82rem; color: var(--crimson); font-weight: 600; flex-shrink: 0; } .mob-search-empty { font-size: 0.85rem; color: var(--gray-500); padding: 6px 4px; margin: 0; } /* ── Search ──────────────────────────────────────────────────────────────── */ .nav-search-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.15s; background: none; border: none; cursor: pointer; padding: 0; } .nav-search-btn:hover { background: rgba(255,255,255,0.1); } .nav-search-btn svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #search-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(10,10,10,0.94); display: flex; flex-direction: column; padding: 28px 16px 24px; overflow-y: auto; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .search-header { display: flex; align-items: center; gap: 10px; max-width: 620px; width: 100%; margin: 0 auto 20px; } #search-input { flex: 1; background: rgba(255,255,255,0.07); border: 1.5px solid rgba(255,255,255,0.13); border-radius: 12px; color: #fff; font-size: 1.05rem; padding: 11px 16px; outline: none; transition: border 0.15s; font-family: inherit; } #search-input:focus { border-color: #e63946; } #search-input::placeholder { color: rgba(255,255,255,0.3); } .search-close-btn { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.07); border: none; color: #fff; font-size: 1.35rem; cursor: pointer; transition: background 0.15s; line-height: 1; } .search-close-btn:hover { background: rgba(255,255,255,0.14); } #search-results { max-width: 620px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; } .search-result-item { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.05); border-radius: 10px; padding: 10px 14px; text-decoration: none; transition: background 0.15s; color: inherit; } .search-result-item:hover { background: rgba(255,255,255,0.10); } .search-result-img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: rgba(255,255,255,0.05); } .search-result-info { flex: 1; min-width: 0; } .search-result-name { color: #fff; font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-brand { font-size: 0.72rem; color: #e63946; margin-top: 2px; } .search-result-price { color: #fff; font-weight: 600; font-size: 0.88rem; flex-shrink: 0; } .search-empty { text-align: center; color: rgba(255,255,255,0.35); font-size: 0.88rem; padding: 48px 0; margin: 0; } /* ── Card qty input (counter) ─────────────────────────────────────────────── */ input[id^="card-qty-"] { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; padding: 0; } input[id^="card-qty-"]::-webkit-inner-spin-button, input[id^="card-qty-"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }