/* Search-first landing — the same flat "Quiet" design system (spec 225) as the rest of the app, with a more spacious hero and restrained motion. */ .landing-app { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; color: var(--color-text); } /* ── The landing page as the same sheet (247 world, item 247 follow-up) ── Same certificate ornament system pool-detail/the grid already carry — see style.css's "ORNAMENT SYSTEM" banner for the shared primitives, keyframes and tokens (--ui-accent-margin/-watermark/-soft/-border) this reuses. Page-margin strands + a watermark rosette bleeding off the right edge, gated to the same ≥1080px width and ambient drift. `position: absolute` (not `fixed`, unlike pool-detail/the grid) because `.landing- app` already establishes its own positioning + clipping context (`position: relative; overflow: hidden` above) for the existing `.landing-backdrop` orbit decoration — reusing that same context keeps the strands/watermark scrolling WITH the page instead of fighting `.landing-app`'s own overflow:hidden over a `position:fixed` layer's containing-block rules. z-index -1 paints them below `.landing-header`/ `.landing-main`/`.landing-footer` (explicitly z-index:1 below) without needing a second `isolation: isolate` — `.landing-app`'s own `position: relative` is already the nearest positioned ancestor for both. */ .landing-app::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background-color: var(--ui-accent-margin); -webkit-mask-image: url('./assets/guilloche-strand.svg'), url('./assets/guilloche-strand.svg'); mask-image: url('./assets/guilloche-strand.svg'), url('./assets/guilloche-strand.svg'); -webkit-mask-size: 20px 50px, 20px 50px; mask-size: 20px 50px, 20px 50px; -webkit-mask-repeat: repeat-y, repeat-y; mask-repeat: repeat-y, repeat-y; -webkit-mask-position: calc(50% - 478px) 0, calc(50% + 478px) 0; mask-position: calc(50% - 478px) 0, calc(50% + 478px) 0; } .landing-app::after { content: ''; position: absolute; top: calc(50% - 270px); right: -186px; width: 540px; height: 540px; z-index: -1; opacity: 0; pointer-events: none; background-color: var(--ui-accent-watermark); -webkit-mask-image: url('./assets/guilloche-rosette.svg'); mask-image: url('./assets/guilloche-rosette.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform-origin: 50% 50%; } @media (min-width: 1080px) { .landing-app::before, .landing-app::after { opacity: 1; } .landing-app::before { animation: ornDrift 117s ease-in-out infinite alternate; } .landing-app::after { animation: ornTurn 123s ease-in-out infinite alternate, ornBreathe 96s ease-in-out infinite alternate; } } /* Backlog 220: `landing.js:356` renders the shared `e('footer', { className: 'app-footer' }, ...)` inside `.landing-app`, so the landing route gets the OPAQUE, `position: fixed; bottom: 0; z-index: 100` footer from `style.css:2513-2524`. That footer's clearance (`.app { padding-bottom: 80px }`, style.css:849-853, "Space for footer") is class-scoped to `.app` — `.landing-app` never carried it (`grep -n "\.landing-app" style.css` returns zero matches before this rule), so this route never had ANY protection from the footer, on any scroll position. This is item 179's class, still live per 219's own BACKLOG row: fixed once on bare `/` (179), never ported, then paid for again on pool-detail 20 days later (217/218). Measured this run at 768x780, unmodified: AT REST (`scrollY=0`) the "Live DefiLlama data" trust-rail text sits at rect{x:449.7,y:760.5, w:110.9,h:18} while the footer paints rect{x:0,y:722,w:768,h:58} — fully covered, `elementFromPoint` at the text's lower band resolves to `