/* ================================================================ CashRecap — iOS PWA Safe-Area & Layout Fixes Targets: iPhone Safari, iOS PWA (Add to Home Screen), Android Chrome Does NOT override desktop layout — all rules are scoped or use feature queries / PWA-class guards. ================================================================ */ /* ── 1. GLOBAL SCROLL + MOMENTUM ─────────────────────────────── */ html, body { /* Smooth momentum scrolling everywhere */ -webkit-overflow-scrolling: touch; /* Prevent address-bar bounce causing wrong vh calculations */ overscroll-behavior-y: none; } /* ── 2. SAFE-AREA CUSTOM PROPERTIES ─────────────────────────── */ /* These land in :root so every selector can use var(--sat) / var(--sab). env() fallback 0px means zero cost on desktop. */ :root { --sat: env(safe-area-inset-top, 0px); /* status-bar height */ --sab: env(safe-area-inset-bottom, 0px); /* home-indicator height */ --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); } /* ── 3. ROOT / BPP-ROOT HEIGHT — replace 100vh with 100dvh ───── */ /* dvh = "dynamic viewport height" — excludes browser chrome on mobile. We provide both declarations; browsers use the last one they understand. */ .bpp-root { min-height: 100vh; min-height: 100dvh; } /* ── 4. THREE-COLUMN SHELL — critical for full-SaaS layout ───── */ /* Old: height: calc(100vh - var(--hh)) ← broken on iOS PWA New: dvh + safe-area top offset already baked into nav height */ .bpp-shell { height: calc(100vh - var(--hh)) !important; /* non-dvh fallback */ height: calc(100dvh - var(--hh)) !important; /* preferred */ } /* admin-bar offset */ .admin-bar .bpp-shell { height: calc(100vh - var(--hh) - 32px) !important; height: calc(100dvh - var(--hh) - 32px) !important; } @media (max-width: 782px) { .admin-bar .bpp-shell { height: calc(100vh - var(--hh) - 46px) !important; height: calc(100dvh - var(--hh) - 46px) !important; } } /* Mobile: shell becomes auto-height scroll */ @media (max-width: 1280px) { .bpp-shell { height: auto !important; min-height: calc(100dvh - var(--hh)) !important; } } /* ── 5. HEADER / NAV — sticky + safe-area ────────────────────── */ /* .bpp-nav is already `position:sticky; top:0` (set in the main CSS). We only add safe-area padding and backdrop here — no position change. */ .bpp-nav { /* Crisp hardware-accelerated blur on iOS */ backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); /* Make background slightly translucent so blur is visible */ background: rgba(var(--card-rgb, 255,255,255), 0.92); /* Will-change primes the GPU layer */ will-change: transform; /* Ensure nav is always on its own composite layer */ transform: translateZ(0); -webkit-transform: translateZ(0); } /* ── 6. iOS PWA MODE — class-gated safe-area rules ──────────── */ /* .ios-pwa is added to + by ios-pwa.js only when running as a standalone PWA on iOS. Zero cost on desktop/browser. */ /* 6a. Extend nav background into the notch / status bar */ .ios-pwa .bpp-nav { padding-top: var(--sat); } /* 6b. Shell must shrink by the same amount so total = 100dvh */ .ios-pwa .bpp-shell { height: calc(100dvh - var(--hh) - var(--sat)) !important; } .ios-pwa .admin-bar .bpp-shell { height: calc(100dvh - var(--hh) - var(--sat) - 32px) !important; } /* 6c. Full-height mobile drawer sidebar */ .ios-pwa #bpp-sidebar { height: 100dvh !important; padding-top: var(--sat) !important; } /* 6d. Body gets bottom padding so content never hides under home indicator */ .ios-pwa body, .ios-pwa .bpp-root { padding-bottom: var(--sab); } /* 6e. Fixed bottom elements — pull them above home indicator */ .ios-pwa .bpp-fab { bottom: calc(68px + var(--sab)) !important; } .ios-pwa #bpp-pwa-install { padding-bottom: calc(12px + var(--sab)); } .ios-pwa .bpp-bs-fab-sheet, .ios-pwa .bpp-fab-modal-overlay, .ios-pwa .bpp-fab-modal { padding-bottom: var(--sab) !important; } /* 6f. Notification panel drops below nav (which is now taller) */ .ios-pwa .bpp-notif-panel { top: calc(var(--hh) + var(--sat)) !important; } /* 6g. Offline banner — sit below status bar */ .ios-pwa #bpp-offline-banner { padding-top: calc(8px + var(--sat)); } /* 6h. Left/right insets for landscape notch */ .ios-pwa .bpp-nav-inner { padding-left: calc(20px + var(--sal)); padding-right: calc(20px + var(--sar)); } /* ── 7. FULL-SCREEN MODALS + OVERLAYS ────────────────────────── */ /* All position:fixed overlays need to fill the true viewport including notch area, so we use inset:0 and add padding only to their content. */ .bpp-fab-modal-overlay, .bpp-overlay, .bpp-confetti-canvas { inset: 0 !important; } /* Modal inner content: push below notch */ .bpp-fab-modal { padding-top: max(20px, var(--sat)) !important; padding-bottom: max(20px, var(--sab)) !important; } /* ── 8. SCROLL CONTAINERS — iOS-specific overrides ───────────── */ .bpp-main, .bpp-sidebar, .bpp-sidebar-body, .bpp-tool-wrap { -webkit-overflow-scrolling: touch; } /* Prevent rubber-band bounce on nested scroll containers */ .bpp-main { overscroll-behavior: contain; } /* ── 9. INPUT ZOOM PREVENTION (iOS zooms on < 16px inputs) ───── */ @media (max-width: 768px) { .bpp-root input[type="text"], .bpp-root input[type="number"], .bpp-root input[type="email"], .bpp-root input[type="password"], .bpp-root input[type="tel"], .bpp-root select, .bpp-root textarea { font-size: max(16px, 1em) !important; } } /* ── 10. HOME PAGE + PRICING — safe-area ────────────────────── */ .bpp-home-root .bpp-nav, .bpp-pricing-root .bpp-nav, .bpp-legal-root .bpp-nav { backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .ios-pwa .bpp-home-root .bpp-nav, .ios-pwa .bpp-pricing-root .bpp-nav, .ios-pwa .bpp-legal-root .bpp-nav { padding-top: var(--sat); } /* min-height fixes for standalone pages */ .bpp-home-root, .bpp-pricing-root, .bpp-legal-root { min-height: 100vh; min-height: 100dvh; } /* ── 11. DARK MODE BACKDROP ─────────────────────────────────── */ .bpp-dark .bpp-nav { background: rgba(17, 24, 39, 0.92); } /* ── 12. BOTTOM FAB SHEET SAFE AREA ─────────────────────────── */ @media (max-width: 768px) { .bpp-bs-fab-sheet { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important; } .bpp-tool-wrap { padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom, 0px))) !important; } }