/* Shared pre-auth backdrop — the river loop every unauthenticated page sits on. Lives in one file so the landing, sign-in, help, terms, partner and unavailable pages cannot drift apart again; index.html and login/index.html carry the same rules inline because they must paint before any stylesheet resolves. Two things here are load-bearing and easy to undo by accident: 1. `100lvh`, not `inset: 0` — a fixed element's containing block is the SMALL viewport, so `inset: 0` stops dead at Safari's toolbar and leaves a black band under the floating address bar. The large viewport is the height with the chrome retracted. 2. The scrim is fully transparent at 0% and 100% — the video is encoded with its top and bottom rows faded to exactly --void, so ANY tint at the extremes pushes the footage darker than the status-bar band (which iOS paints from the background) and reopens the seam. */ html { background: var(--void, #0E140F); } .grass { position: fixed; top: 0; left: 0; right: 0; z-index: 0; overflow: hidden; height: 100vh; height: 100lvh; pointer-events: none; } .grass-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .grass-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9,8,5,0) 0%, rgba(9,8,5,0) 14%, rgba(7,7,5,0.10) 55%, rgba(6,7,5,0.30) 86%, rgba(6,7,5,0) 100%); } /* Long-form pages (help, terms, partner) put body copy over sunlit water, which the landing's light scrim cannot carry. This darkens the middle hard enough to read against while still leaving both extremes untouched, so the seam rule above still holds. */ .grass[data-grass="doc"] .grass-scrim { background: linear-gradient(180deg, rgba(9,8,5,0) 0%, rgba(8,9,7,0.55) 12%, rgba(8,9,7,0.80) 45%, rgba(8,9,7,0.80) 88%, rgba(6,7,5,0) 100%); } /* Static content paints below a positioned z-index:0 backdrop, so it has to be lifted. Scoped to .grass-injected — set by grass.js ONLY on pages that don't paint their own backdrop. index.html and login/index.html manage their own stacking and have fixed UI (the dock, the corner mark, the accuracy dialog) as direct children of body; an unscoped `position: relative` here beat their `position: fixed` and dropped them into the flow. .site-footer is excluded for exactly the same reason. */ body.grass-injected > *:not(.grass):not(.site-footer) { position: relative; z-index: 1; } /* Site-wide legal footer. `bottom: 0` on a fixed element resolves to the bottom of the SMALL viewport — i.e. immediately above Safari's floating toolbar rather than behind it — which is exactly where this needs to sit. (The backdrop deliberately does the opposite with 100lvh so the footage runs under the chrome.) pointer-events: none so it never eats a tap meant for the map; the links opt back in. */ .site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)); margin: 0; text-align: center; font-family: var(--font-ui, "Sora", system-ui, sans-serif); font-size: 0.62rem; font-weight: 600; line-height: 1.4; color: var(--ink-2, #B2C0B7); background: linear-gradient(180deg, rgba(6,7,5,0) 0%, rgba(6,7,5,0.55) 55%, rgba(6,7,5,0.78) 100%); pointer-events: none; } .site-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; pointer-events: auto; } .site-footer a:hover { color: var(--signal, #2BCB5D); } /* Scrolling pages must be able to reach their last line above the fixed bar. */ body[data-grass="doc"] { padding-bottom: 72px; }