/* =========================================================================== Hey Eva — waitlist landing Brand system: EVA Manual de marca 1.0. Only the palette declared in :root is used. Gradients are freeform/mesh only (layered radial nodes over the Eva Dark base) — never a plain linear/angular/diamond gradient. =========================================================================== */ /* --- Self-hosted type. Eva Sans = Rethink Sans (display), Raleway (body). --- */ @font-face { font-family: 'Eva Sans'; src: url('assets/fonts/rethinksans-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Eva Sans'; src: url('assets/fonts/rethinksans-extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('assets/fonts/raleway-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('assets/fonts/raleway-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { /* Primary */ --eva-dark: #0A040C; --eva-light: #ECF7F8; --tech-blue: #1E1DA1; --sunset: #FF8538; --wild-pink: #DB4DFC; /* Secondary */ --magenta: #E20789; --wisteria: #D1B4EA; --clarity: #B4F0F8; /* Permitted tints */ --sunset-hover: #FE680A; --sunset-active: #F45E00; --error: #F94DB3; --font-display: 'Eva Sans', sans-serif; --font-body: 'Raleway', sans-serif; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* The orb video is wider than small viewports on purpose (118vw), so something has to contain it. keeps `hidden`: its overflow propagates to the viewport, which is what stops the page scrolling sideways in every engine. is the box that does the actual clipping, and there the value must be `clip`, never `hidden` — body's overflow no longer propagates once the root has claimed it, so `hidden` would compute its `overflow-y` to `auto` and turn body into a second scroll container, i.e. the second scrollbar. `clip` never creates one and leaves `overflow-y: visible` alone. The `hidden` line before it is the fallback for engines predating `clip` (Safari < 16); it is safe there only because nothing overflows body vertically — the orb bleeds sideways only. */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; background: var(--eva-dark); color: var(--eva-light); font-family: var(--font-body); font-weight: 400; overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- Mesh atmosphere ------------------------------------------------------ Seven nodes, tuned to the vivid sunset meshes of the manual's own poster and social applications: two pure-light ones (Eva Light, Eva Clarity) pinned to the margins, warm Sunset/Wild Pink glows in the far corners, and the broad Tech Blue field painted on top so the central column — where the copy lives — stays deep. Every alpha here is bounded by the contrast audit: text is free to scroll over any part of this (the layer is fixed), so the brightest point the copy column can reach must still clear AA. */ .mesh { position: fixed; top: 0; left: 0; right: 0; /* Sized to the LARGE viewport, not inset:0 — while the mobile URL bar collapses mid-scroll the visual viewport outgrows a bottom-anchored fixed layer for a moment, flashing an unpainted band at the fold. 100lvh covers the collapsed-chrome height from the start (100vh is the closest legacy approximation, kept as fallback). */ height: 100vh; height: 100lvh; z-index: -2; pointer-events: none; background-color: var(--eva-dark); background-image: radial-gradient(88% 64% at 50% 55%, rgba(30, 29, 161, .46) 0%, rgba(30, 29, 161, .26) 46%, rgba(30, 29, 161, 0) 80%), radial-gradient(46% 34% at 100% -10%, rgba(236, 247, 248, .30) 0%, rgba(236, 247, 248, 0) 70%), radial-gradient(42% 34% at -8% 32%, rgba(180, 240, 248, .26) 0%, rgba(180, 240, 248, 0) 72%), radial-gradient(54% 40% at 106% 88%, rgba(219, 77, 252, .30) 0%, rgba(219, 77, 252, 0) 74%), radial-gradient(52% 40% at -6% 100%, rgba(255, 133, 56, .30) 0%, rgba(255, 133, 56, 0) 74%), radial-gradient(30% 22% at 6% -6%, rgba(226, 7, 137, .22) 0%, rgba(226, 7, 137, 0) 76%), radial-gradient(26% 22% at 98% 50%, rgba(209, 180, 234, .14) 0%, rgba(209, 180, 234, 0) 78%); } /* --- Layout --------------------------------------------------------------- */ .page { position: relative; max-width: 460px; margin: 0 auto; padding: 36px 20px; padding-top: max(36px, env(safe-area-inset-top)); padding-bottom: max(36px, env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; } .h1, .sub, .card { position: relative; z-index: 1; } .logo { position: relative; z-index: 2; } /* --- Hero ----------------------------------------------------------------- Eva herself carries the page: the loop's glow reaches behind the wordmark above and the title hangs below the ball, and the copy is set flush left against it, the way the manual's poster pieces set display type. The clip's black floor is removed at encode time, so `screen` composites the glow alone — no frame to hide, no mask needed. Text placement is bounded by the contrast audit against the WORST instant of the loop (orb-max composite), not against a lucky frame: moving text onto the ball means re-running it. CRITICAL: no ancestor of the