/* =========================================================================== RIVAESA - landing stylesheet --------------------------------------------------------------------------- Rewritten 2026-08-04. The previous sheet dressed the site as a warm brown parchment book. The GAME is not that: src/index.css ships --bg #080c12, --panel-bg #0e1520, --panel-border #1e2d42, --text #c0cce0, --gold #c8a448, and the title screen a player lands on is a cool violet vortex under a gold wordmark. A site that does not look like the product it sells is the single loudest "template" tell there is, so every colour below is lifted from the running game and every plate is drawn the way the game draws a panel. Type is the game's own too: Cinzel and Alegreya, the same two woff2 files src/components/popups-1a.css loads, copied into landing/fonts/. Self-hosted on purpose. playtest/live-site.mjs asserts the landing page reaches NOTHING off its own origin, so a Google Fonts link would fail the deploy test, and the previous sheet's system Palatino stack is a large part of why the page read as a generic template. Zero network dependencies: no CDN, no remote images, no analytics. No em dashes anywhere, including comments: build/check-landing-text.mjs refuses to build if it finds one, in any of its five spellings, and it scans comments as well as copy. Use a comma, a colon, or an en dash. CONTENTS 1 Fonts 2 Tokens 3 Base and rhythm 4 Buttons 5 Site header 6 Hero 7 Lede 7b Waitlist 8 Section plates and headings 9 Trailer 10 Screenshot reel 11 Worlds 12 Facts strip 13 Depth grid 14 Beta panel 15 FAQ 16 Closer 17 Site footer 18 Shared chrome for /privacy, /terms, /404 <- KEEP, three pages use it 19 Reveal, reduced motion, print =========================================================================== */ /* ========================================================================== 1 Fonts Same files the game itself serves. Cinzel is display only (headings and the wordmark); Alegreya carries every word of body copy. ========================================================================== */ @font-face{ font-family:'Cinzel'; font-style:normal; font-weight:500 700; font-display:swap; src:url('/fonts/cinzel-latin.woff2') format('woff2'); } @font-face{ font-family:'Alegreya'; font-style:normal; font-weight:400 900; font-display:swap; src:url('/fonts/alegreya-latin.woff2') format('woff2'); } /* No page currently sets an italic, so this face is declared and never fetched: a browser only downloads an @font-face file when a glyph actually needs it, so the 44 KB is deploy weight and never reaches a visitor. It is kept because /privacy.html and /terms.html are long prose that will grow an sooner or later, and the alternative is a synthesised oblique nobody would notice was wrong. Delete the rule AND landing/fonts/alegreya-italic-latin.woff2 together if that stops being true. */ @font-face{ font-family:'Alegreya'; font-style:italic; font-weight:400 900; font-display:swap; src:url('/fonts/alegreya-italic-latin.woff2') format('woff2'); } /* ========================================================================== 2 Tokens ========================================================================== */ :root{ /* Straight out of src/index.css, with one deeper step for the page ground so a --panel plate still separates from it at a glance. */ --void:#070b11; --deep:#0a1017; --panel:#0e1520; --panel-2:#131d2c; --edge:#1e2d42; --edge-hi:#2c4160; --gold:#c8a448; --gold-hi:#f0d493; --gold-dim:#8a7233; --text:#c6d2e6; /* Cleared 4.5:1 against both --void and --panel before it was written down. Do not darken it without re-measuring. */ --text-dim:#8496b3; /* The key art's two signature hues, used sparingly: violet for the arcane, teal for the swirl. They tie the page to landing/img/key-art.webp. */ --violet:#8f6ce8; --teal:#5fc9dc; --serif:'Alegreya','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; --display:'Cinzel','Trajan Pro','Iowan Old Style',Georgia,serif; --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --shell:1200px; --pad:clamp(20px,5vw,40px); --band:clamp(72px,9vw,124px); --r:6px; /* A bevel and a tight seat, not a border plus a wide diffuse cloud. Carrying both a hairline edge and a big soft shadow on the same element is a generated-page tell, and the game's own panels do not do it either. */ --plate:linear-gradient(180deg,var(--panel-2),var(--panel)); --lift:inset 0 1px 0 rgba(255,255,255,.055), 0 6px 16px rgba(0,0,0,.45); } /* ========================================================================== 3 Base and rhythm ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:76px; } body{ margin:0; background:var(--void); color:var(--text); font-family:var(--serif); font-size:clamp(17px,.5vw + 15.6px,19px); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* The ground stays FLAT. A first pass put a violet radial glow at the top of the page and a teal one at the bottom, pulled from the key art. They looked fine and they were still wrong: a radial halo behind the hero, and a violet to blue gradient, are two of the most reliable signatures of a generated page, and neither was solving a problem. The game itself paints a flat #080c12 behind everything, and the pages worth copying (Path of Exile, Old School RuneScape, RimWorld) all sit on a flat ground or a real texture. So there is no ::before layer here at all, on purpose. */ img,video{ display:block; max-width:100%; } a{ color:var(--gold); } a:hover{ color:var(--gold-hi); } h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.14; margin:0; color:var(--gold-hi); letter-spacing:.01em; } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:#12100a; padding:12px 18px; font-family:var(--sans); font-weight:700; text-decoration:none; } .skip:focus{ left:12px; top:12px; } #main:focus{ outline:none; } /* it takes focus from the skip link only */ .shell{ width:100%; max-width:var(--shell); margin:0 auto; padding-inline:var(--pad); } .shell--narrow{ max-width:860px; } .section{ padding-block:var(--band); } .section--tight{ padding-block:calc(var(--band) * .62); } .band{ background:var(--deep); border-block:1px solid var(--edge); } .fineprint{ font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--text-dim); } /* ========================================================================== 4 Buttons Chunky and metal, the way a game's site draws a button. Deliberately not a soft SaaS pill: square-ish, a bevelled top highlight, a hard bottom edge. ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:52px; padding:0 26px; font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.055em; text-transform:uppercase; text-decoration:none; border-radius:var(--r); border:1px solid transparent; transition:transform .12s ease, filter .16s ease, background .16s ease, border-color .16s ease; } .btn:active{ transform:translateY(1px); } /* The bevel is an inset highlight and a hard dark edge, not a coloured glow. A gold halo under a gold button is the "shadow whose colour is not neutral" tell, and it made the button look like it was hovering rather than sitting in the page. */ .btn--play, .btn.primary{ color:#140f04; background:linear-gradient(180deg,var(--gold-hi),var(--gold) 52%,#a9832f); border-color:#6d5520; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #5c4718, 0 10px 22px rgba(0,0,0,.5); } .btn--play:hover, .btn.primary:hover{ filter:brightness(1.08); color:#140f04; } .btn--ghost{ color:var(--text); background:rgba(20,32,50,.62); border-color:var(--edge-hi); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .btn--ghost:hover{ background:rgba(30,45,66,.8); border-color:var(--gold-dim); color:var(--gold-hi); } .btn--big{ min-height:60px; padding:0 34px; font-size:16px; } .btn--sm{ min-height:44px; padding:0 18px; font-size:13px; } .btn .arrow{ font-size:1.35em; line-height:0; transform:translateY(-1px); } /* ========================================================================== 5 Site header ========================================================================== */ .site-header{ position:sticky; top:0; z-index:60; background:rgba(7,11,17,.82); backdrop-filter:blur(10px) saturate(130%); border-bottom:1px solid var(--edge); } .header-in{ display:flex; align-items:center; gap:18px; min-height:62px; } .wordmark{ font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); text-decoration:none; white-space:nowrap; } .wordmark:hover{ color:var(--gold-hi); } .nav{ display:flex; gap:2px; margin-left:auto; } .nav a{ font-family:var(--sans); font-size:13.5px; letter-spacing:.03em; color:var(--text-dim); text-decoration:none; display:inline-flex; align-items:center; min-height:38px; padding:0 12px; border-radius:var(--r); } .nav a:hover{ color:var(--gold-hi); background:rgba(200,164,72,.08); } .menu{ margin-left:auto; display:none; position:relative; } .menu summary{ list-style:none; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text); display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--edge-hi); border-radius:var(--r); background:rgba(20,32,50,.6); } .menu summary::-webkit-details-marker{ display:none; } .menu-panel{ position:absolute; right:0; top:calc(100% + 8px); z-index:70; display:grid; min-width:210px; padding:8px; background:var(--panel); border:1px solid var(--edge-hi); border-radius:var(--r); box-shadow:0 22px 50px rgba(0,0,0,.6); } .menu-panel a{ font-family:var(--sans); font-size:14px; color:var(--text); text-decoration:none; padding:11px 12px; border-radius:4px; } .menu-panel a:hover{ background:rgba(200,164,72,.1); color:var(--gold-hi); } .header-cta{ margin-left:0; } @media (max-width:900px){ .nav{ display:none; } .menu{ display:block; } } @media (max-width:420px){ .header-cta .arrow{ display:none; } .header-cta{ padding:0 14px; } } /* ========================================================================== 6 Hero Full-bleed key art, the treatment every game site in the reference set uses (Valheim, Hades, Brighter Shores): the art and the logo lockup ARE the hero. The wordmark is painted into landing/img/key-art.webp, so the

is visually hidden rather than absent, and the art is NOT scrimmed flat: only the bottom third darkens, under the copy that needs the contrast. ========================================================================== */ .hero{ position:relative; isolation:isolate; background:var(--deep); } .hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; } /* Two gradients, both doing one job. The top one only has to stop the sticky header dissolving into the canopy. The bottom one is the working half: it turns the lower quarter into near-solid ground for the buttons WITHOUT washing out the middle of the picture, which is where the wordmark and the ribbon of magic live. The old page scrimmed its hero flat to 55 percent everywhere and the screenshot underneath was unreadable. */ .hero__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(180deg, rgba(7,11,17,.6) 0, rgba(7,11,17,0) 18%), linear-gradient(0deg, var(--void) 1%, rgba(7,11,17,.92) 15%, rgba(7,11,17,.3) 30%, transparent 46%); } /* justify-content:flex-end parks everything in that dark bottom band, clear of the wordmark, which sits at roughly 48 to 57 percent of the art's height. The height is the smaller of two limits: the viewport below the 62px header, and 57.11vw, which is the key art's own height at the current width (731/1280). The second limit is the one that stops the art being cut off: the old 900px cap forced a 2560-wide box to stay 900 tall while cover scaled the art to 1462, which threw away 38 percent of the picture, the mage's feet and the log with it. Now the box tracks the art's aspect until the viewport runs out, at which point object-position 55% sheds what little is left roughly evenly into the canopy at the top and the mist at the bottom, both of which are empty. At 1280 wide and below-the-cap heights the art fits pixel-for-pixel with no crop at all. */ .hero__in{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:clamp(560px, 92vh, 1500px); min-height:clamp(560px, min(100svh - 62px, 57.11vw), 1500px); padding-block:80px 54px; text-align:center; } /* Below 700px the swaps to the 768x1344 portrait art, whose full height at the current width is 175vw, not 57.11vw. */ @media (max-width:699px){ .hero__in{ min-height:clamp(560px, 92vh, 900px); min-height:clamp(560px, min(100svh - 62px, 175vw), 900px); } } /* Visually hidden but read by search engines and screen readers: the visible wordmark lives inside the key art. */ .hero h1{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .hero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } .hero__note{ margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; font-family:var(--sans); font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); text-shadow:0 1px 8px rgba(0,0,0,.9); } .hero__note .sep{ color:var(--gold-dim); } /* ========================================================================== 7 Lede One short paragraph directly under the art, which is what Balatro, Valheim and Brighter Shores all do in place of a wall of feature copy. ========================================================================== */ /* The hook the hero used to carry, moved down here where it has clean ground instead of the key art's own wordmark under it. */ .lede__hook{ max-width:26ch; margin:0 auto 26px; text-align:center; font-family:var(--display); font-weight:600; font-size:clamp(28px,3.4vw,46px); line-height:1.16; color:#f4ecdb; } .lede{ max-width:52ch; margin:0 auto; text-align:center; font-size:clamp(19px,1.1vw + 15px,23px); line-height:1.55; color:var(--text); } .lede b{ color:var(--gold-hi); font-weight:700; } .lede__sub{ max-width:60ch; margin:18px auto 0; text-align:center; font-size:17px; line-height:1.7; color:var(--text-dim); } /* ========================================================================== 7b Waitlist The one form on the site. It borrows the plate and the gold button, so the only new chrome here is the email field and the row it shares with the button. The row wraps, and below 560px the button takes the full width, so nothing pokes past a 390px screen: landing-look measures horizontal overflow and fails the run on 2px. ========================================================================== */ .waitlist{ position:relative; /* seats the offscreen honeypot */ max-width:600px; margin:0 auto; padding:clamp(24px,3.4vw,40px); text-align:center; } /* Visually hidden, read by screen readers: same clip pattern as the hero h1. */ .waitlist-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .waitlist-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .waitlist-row input[type="email"]{ flex:1 1 240px; min-width:0; min-height:52px; padding:0 16px; font-family:var(--serif); font-size:17px; color:var(--text); background:var(--void); border:1px solid var(--edge-hi); border-radius:var(--r); } .waitlist-row input[type="email"]::placeholder{ color:var(--text-dim); opacity:.7; } /* .btn was written for . A