/* * safe-area-canvas.css * -------------------- * Treats the iPhone Dynamic Island strip and home-indicator strip as part * of the page canvas. Two fixed transparent strips inherit from the page's * --th-bg-void (theme deepest color) by default, and any page family can * override --magna-edge-top-paint / --magna-edge-bottom-paint to bleed its * hero gradient under the bezel. * * Loaded site-wide via unified-nav.js. No HTML edits required. */ /* Body bleeds the theme void into safe-area zones so iOS never falls back to default silver chrome — even before the JS runs. */ html, body { background: var(--th-bg-void, #08090c); /* dvh handles iOS dynamic toolbar; lvh is fallback for older Safari */ min-height: 100vh; min-height: 100lvh; min-height: 100dvh; } /* The two strip elements. The JS injects them; this styles them. */ .magna-edge-strip { position: fixed; left: 0; right: 0; pointer-events: none; /* Above page content + nav (nav uses ~10000), below modals (10001+). The strip is intentionally non-interactive — content under it still scrolls. */ z-index: 9998; /* Smooth gradient transitions on theme switch */ transition: background 0.4s ease; } /* iPhone bezel strips are PURE BLACK across every page by default so they read as continuous with the device hardware. The default rule deliberately does NOT consult --magna-edge-top-paint / --magna-edge-bottom-paint, so legacy per-page paint overrides (signal-pages, tether, earth-monitor, cosmic-forecast, compass, seven-gates, etc.) cannot tint the bezel. Pages opt in via (paint var) or (theme void). */ .magna-edge-top { top: 0; height: env(safe-area-inset-top, 0px); background: #000; } .magna-edge-bottom { bottom: 0; height: env(safe-area-inset-bottom, 0px); background: #000; } body[data-bezel="page"] .magna-edge-top { background: var(--magna-edge-top-paint, #000); } body[data-bezel="page"] .magna-edge-bottom { background: var(--magna-edge-bottom-paint, #000); } body[data-bezel="theme"] .magna-edge-top { background: var(--magna-edge-top-paint, var(--th-bg-void, #08090c)); } body[data-bezel="theme"] .magna-edge-bottom { background: var(--magna-edge-bottom-paint, var(--th-bg-void, #08090c)); } /* Hide strips when no safe area exists (desktop, Android, older iPhones). Keeps the strip from leaving a 1px line on browsers that report 0. */ @supports not (padding: env(safe-area-inset-top)) { .magna-edge-strip { display: none; } } /* Embed mode: kill the strips inside iframes — host page owns the bezel. */ html.embed-mode .magna-edge-strip, body.embed-mode .magna-edge-strip { display: none; } /* Pages where a 3D canvas (Three.js / Cesium) IS the full viewport. The canvas already paints under the bezel via 100dvh + viewport-fit=cover. We make the strips transparent so the rendered geometry shows through — the Dynamic Island sits literally on top of the globe / orrery. theme-color meta still tracks the void so iOS chrome never flashes silver. Add the matching class to on any page that should expose the underlying canvas through the safe-area zones: earth-canvas-page, celestial-canvas-page. Other 3D pages (antarctica, consciousness) sit inside layout containers that don't extend to the bezel — they keep their painted gradient strips. */ body.earth-canvas-page .magna-edge-strip, body.celestial-canvas-page .magna-edge-strip { background: transparent; } /* --------------------------------------------------------------------------- Utility: .magna-safe-bottom-pad For any position:fixed UI hugging the bottom edge (latent-player, page-orb, mobile chips, tether HUD). Adds the home-indicator height to its existing offset so it floats above the indicator instead of under it. Usage in a page CSS file: .my-fixed-bottom-thing { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } This utility class is provided as a shorthand when no custom offset is needed. --------------------------------------------------------------------------- */ .magna-safe-bottom-pad { padding-bottom: env(safe-area-inset-bottom, 0px); } .magna-safe-top-pad { padding-top: env(safe-area-inset-top, 0px); }