/** * MetalMetric iOS Overrides — ios-overrides.css * ═══════════════════════════════════════════════ * Only activates when data-platform="ios" is on (set by ios-bridge.js). * Handles: safe area insets, notch, Dynamic Island, home indicator, * status bar spacing, and native-feel UI adjustments. * * Add to of every page: * */ /* ═══ SAFE AREA INSETS ═══ env(safe-area-inset-top) → status bar + Dynamic Island env(safe-area-inset-bottom) → home indicator bar env(safe-area-inset-left/right) → landscape rotation ═══════════════════════════ */ /* Base: ensure viewport-fit=cover is respected */ html[data-platform="ios"] { /* Prevent rubber-band overscroll showing white bg */ background: #0B0F14; } html[data-platform="ios"] body { /* Pad top for status bar / Dynamic Island */ padding-top: env(safe-area-inset-top, 44px); /* Pad bottom for home indicator */ padding-bottom: env(safe-area-inset-bottom, 34px); /* Prevent horizontal overscroll */ overscroll-behavior-x: none; } /* ═══ FIXED ELEMENTS: top ═══ */ /* Mobile FAB menu button — push below status bar */ html[data-platform="ios"] .fabMenu { top: calc(env(safe-area-inset-top, 44px) + 10px); } /* Mobile vault lock FAB — push below status bar */ html[data-platform="ios"] .vaultLockFab { top: calc(env(safe-area-inset-top, 44px) + 10px); } /* Desktop nav if it's sticky/fixed */ html[data-platform="ios"] .siteNav, html[data-platform="ios"] .topBar, html[data-platform="ios"] nav[class*="nav"] { padding-top: env(safe-area-inset-top, 44px); } /* ═══ FIXED ELEMENTS: bottom ═══ */ /* Bottom bars, sticky CTAs — push above home indicator */ html[data-platform="ios"] .bottomBar, html[data-platform="ios"] .stickyBottomCta, html[data-platform="ios"] .mobileBottomBar { padding-bottom: calc(env(safe-area-inset-bottom, 34px) + 8px); } /* Side panel overlay — full safe area coverage */ html[data-platform="ios"] .sidePanel { padding-top: calc(env(safe-area-inset-top, 44px) + 14px); padding-bottom: env(safe-area-inset-bottom, 34px); } /* ═══ APP SHELL SPACING ═══ */ html[data-platform="ios"] .appShell { padding-top: 12px; /* body already has safe area padding */ } /* ═══ SCROLLABLE AREAS ═══ */ /* Ensure scroll containers respect bottom safe area */ html[data-platform="ios"] .sideNavBody, html[data-platform="ios"] .viBody, html[data-platform="ios"] .inspectBody { padding-bottom: env(safe-area-inset-bottom, 34px); } /* ═══ HIDE WEB-ONLY ELEMENTS ═══ */ html[data-platform="ios"] .installBanner, html[data-platform="ios"] .installPrompt, html[data-platform="ios"] .pwaInstallBtn, html[data-platform="ios"] [href="/install"], html[data-platform="ios"] [href="/install/"], html[data-platform="ios"] .webOnlyCta, html[data-platform="ios"] #exitIntentOverlay { display: none !important; } /* ═══ NATIVE FEEL TWEAKS ═══ */ /* Disable text selection on interactive elements (native feel) */ html[data-platform="ios"] button, html[data-platform="ios"] .btn, html[data-platform="ios"] .vaultRow, html[data-platform="ios"] .goldColorChip, html[data-platform="ios"] .gbDenomBtn { -webkit-user-select: none; user-select: none; } /* Disable tap highlight (we have our own :active states) */ html[data-platform="ios"] * { -webkit-tap-highlight-color: transparent; } /* Smoother scrolling in overflow containers */ html[data-platform="ios"] .viBody, html[data-platform="ios"] .sideNavBody, html[data-platform="ios"] .shelfSurface { -webkit-overflow-scrolling: touch; } /* Prevent zoom on input focus (iOS Safari quirk) */ html[data-platform="ios"] input[type="text"], html[data-platform="ios"] input[type="number"], html[data-platform="ios"] input[type="email"], html[data-platform="ios"] input[type="tel"], html[data-platform="ios"] select, html[data-platform="ios"] textarea { font-size: 16px; /* iOS won't zoom if font-size >= 16px */ } /* ═══ MODAL / OVERLAY ADJUSTMENTS ═══ */ /* Inspect modal respects safe areas */ html[data-platform="ios"] .inspectBack { padding-top: env(safe-area-inset-top, 44px); padding-bottom: env(safe-area-inset-bottom, 34px); } /* Import modal */ html[data-platform="ios"] .viOverlay { padding-top: env(safe-area-inset-top, 44px); padding-bottom: env(safe-area-inset-bottom, 34px); } /* ═══ LANDSCAPE MODE ═══ */ @media (orientation: landscape) { html[data-platform="ios"] body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } } /* Hide email signup popups in iOS app */ html[data-platform="ios"] [class*="exit-intent"], html[data-platform="ios"] [class*="exitIntent"], html[data-platform="ios"] [id*="exit-intent"], html[data-platform="ios"] [class*="popup"], html[data-platform="ios"] [class*="modal-overlay"], html[data-platform="ios"] .alert-signup, html[data-platform="ios"] [class*="subscribe-banner"], html[data-platform="ios"] [class*="email-capture"] { display: none !important; } /* Force no horizontal scroll */ html[data-platform="ios"], html[data-platform="ios"] body { overflow-x: hidden !important; max-width: 100vw !important; } html[data-platform="ios"] #mmExitModal { display: none !important; }