/* * NLM Mobile Shell — Norman Lamps mobile app-like UI * ---------------------------------------------------------------------------- * Every selector is gated by [data-nlm-mobile="1"] on . With the * attribute absent the entire file is inert — no rendered effect on any * element. See /docs/MOBILE_OPTIMIZATION_PLAN.md for the full architecture. * * Conventions * - 8px-grid spacing * - Tap targets >= 48px square * - System font stack for native feel * - dvh / svh for full-screen UI (avoids iOS Safari address-bar bounce) * - env(safe-area-inset-*) on every fixed element near the edges * - All transitions: 200ms cubic-bezier(0.4, 0, 0.2, 1) */ /* ============================================================================= 1. DESIGN TOKENS ============================================================================= */ :root { --nlm-c-bg: #ffffff; --nlm-c-surface: #ffffff; --nlm-c-surface-alt: #f9fafb; --nlm-c-text: #1f2937; --nlm-c-text-muted: #6b7280; --nlm-c-text-inverse: #ffffff; --nlm-c-border: #e5e7eb; --nlm-c-border-strong: #d1d5db; --nlm-c-primary: #2d5c88; --nlm-c-primary-hover: #1f4566; --nlm-c-accent: #f59e0b; --nlm-c-danger: #dc2626; --nlm-c-success: #16a34a; --nlm-h-topbar: 56px; --nlm-h-tabbar: 64px; --nlm-h-sticky-cta: 64px; --nlm-radius-sm: 6px; --nlm-radius: 10px; --nlm-radius-lg: 16px; --nlm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --nlm-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --nlm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16); --nlm-ease: cubic-bezier(0.4, 0, 0.2, 1); --nlm-dur: 220ms; --nlm-z-bar: 10000; --nlm-z-backdrop: 10400; --nlm-z-drawer: 10500; --nlm-z-overlay: 10600; --nlm-z-cart: 10700; --nlm-z-toast: 11000; } /* ============================================================================= 2. SHELL ON: hide legacy chrome, reset layout ============================================================================= */ [data-nlm-mobile="1"] body { /* Override the OpenCart default body styles for mobile shell mode */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-size: 15px !important; line-height: 1.5 !important; color: var(--nlm-c-text); background: var(--nlm-c-bg); /* Reserve space for the fixed top bar and bottom tab bar so page content never hides behind them. */ padding-top: var(--nlm-h-topbar) !important; padding-bottom: calc(var(--nlm-h-tabbar) + env(safe-area-inset-bottom, 0px)) !important; margin: 0; overflow-x: hidden; } /* Hide the legacy OpenCart header/footer/nav/banner-bar on mobile. Server still renders them (Googlebot sees them, schema unchanged) — we just visually suppress for the mobile UI. IMPORTANT: `:not(.nlm-topbar)` and `:not(.nlm-tabbar)` are critical — our new mobile chrome uses
and