/* ============================================================================ MP MOBILE — iOS overrides ============================================================================ Loads AFTER mobile-android.css, scoped entirely under body.is-ios, so it only repaints the SAME .mp-bottom-nav markup/JS for iPhone/iPad Safari visitors. No new nav, no template changes — see functions.php mp_is_ios_useragent() / mp_add_ios_body_class() for how .is-ios lands on before first paint. What changes vs. the Android baseline: - Frosted translucent bar instead of solid white - No Material-style tap-flash overlay - No per-tab tinted icon "chip" background — active state is a plain tint + scale, iOS convention - Slightly larger corner radii elsewhere in nav-adjacent chrome, to match iOS's continuous-curvature feel vs. Android's tighter radii ========================================================================= */ body.is-ios .mp-bottom-nav { /* Same white-to-purple glass tint as the Android baseline (see mobile-android.css), just kept subtler/more translucent to match iOS's usual frosted-bar convention. */ background: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(243,238,254,0.84) 100%); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 0.5px solid rgba(124,58,237,0.18); box-shadow: 0 -2px 14px rgba(124,58,237,0.08); } /* Kill the Material ripple/flash on tap — iOS doesn't do color-flash feedback, it just dims/scales the icon itself (handled below). */ body.is-ios .mp-bottom-nav-item::after { display: none; } /* Remove the tinted pill behind icons; iOS tab icons sit directly on the bar and communicate state via tint colour + weight, not a background. */ body.is-ios .bnav-icon-wrap { background: transparent !important; width: auto; height: auto; border-radius: 0; } body.is-ios .mp-bottom-nav-item { color: #8E8E93; /* iOS system gray, inactive tab */ font-size: 10px; font-weight: 500; letter-spacing: -0.01em; } body.is-ios .mp-bottom-nav-item.active { color: var(--accent, #DC2626); /* keep brand accent, just no chip */ } body.is-ios .mp-bottom-nav-item.active .bnav-icon-wrap svg { transform: scale(1.04); } /* iOS-standard press feedback: dim + scale the whole tab, no colour flash */ body.is-ios .mp-bottom-nav-item:active { opacity: 0.55; } body.is-ios .mp-bottom-nav-item:active .bnav-icon-wrap { transform: scale(0.92); } /* Drawer panel + its buttons: bump to iOS-scale continuous-curvature radii */ body.is-ios .mp-drawer-panel { border-radius: 0; /* full-bleed side panel stays square-edged on iOS too */ } body.is-ios .mp-drawer-emblem, body.is-ios .mp-drawer-links a, body.is-ios .mp-drawer-btn { border-radius: 14px; }