/* =========================================================================== 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 decorative shape bleeds past the column on purpose, 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 in the page overflows body vertically — see .deco--petal. */ 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; } /* Modular brand shapes: edge-anchored, whisper-level opacity, away from the CTA. */ .deco { position: absolute; z-index: 0; color: var(--eva-light); opacity: .06; pointer-events: none; } /* Mostly off-canvas: only a sliver survives at each side margin, so the copy column never has a shape behind it. Both bleed sideways only — a negative `top`/`bottom` (or a rotation deep enough to push the transformed box past the page) would spill out of the page box and add phantom vertical scroll. */ .deco--petal { width: 200px; bottom: 0; right: -84px; opacity: .09; } /* The orb owns the top corner below the split, so the second petal frames the page foot from the left, mirroring its sibling; on desktop it goes back up to the form column's shoulder. */ .deco--petal-top { width: 150px; bottom: 40px; left: -66px; opacity: .09; transform: rotate(132deg); } .h1, .sub, .card, .legal { position: relative; z-index: 1; } .logo { position: relative; z-index: 2; } /* --- Hero ----------------------------------------------------------------- Eva herself carries the page: the loop bleeds behind the wordmark above and under the H1 below, 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. The overlap depths (.h1 negative margin, .orb offsets) are bounded by the contrast audit against the WORST instant of the loop (orb-max composite), not against a lucky frame: deepening any overlap means re-running that audit. CRITICAL: no ancestor of the