/* ============================================================================================ Reaper GP — landing page Hand-written, no framework, no build step. Everything is one file so there is exactly one place to change a colour. The palette below is lifted from the game's own UI so the site and the front end look like the same product. Layout is CSS grid with auto-fit, which means it reflows on any screen without a media query per breakpoint. There are only two media queries in the whole file, both near the bottom. ============================================================================================ */ :root { --ink: #05080f; /* page ground — the same near-black the game's menus sit on */ --ink-2: #080d18; /* alternating section ground */ --panel: rgba(10, 18, 32, 0.72); --line: rgba(120, 170, 220, 0.18); --text: #dfe8f5; --text-dim: rgba(198, 216, 238, 0.66); --cyan: #5ac8ff; --cyan-hot: #96e6ff; --magenta: #ff3ba0; --red: #ff5a58; --gold: #ffd866; --green: #78ffa0; --violet: #b478ff; --shell: 1180px; --radius: 4px; --font-display: "Aldrich", "Trebuchet MS", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---- reset ------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* NOT `overflow-x: hidden` ON BODY. It reads as a harmless guard against sideways scroll and is anything but: setting one overflow axis makes the other compute to `auto`, which turns into a scroll container. IntersectionObserver then measures against a box that never moves, so every scroll-reveal stays invisible and every `loading="lazy"` image never fetches — measured, 0 of 36 reveals and 15 images that never left the server. Clip the overflow where it is actually produced (see .hero) and leave the document scroller alone. */ img { max-width: 100%; height: auto; display: block; } a { color: var(--cyan-hot); } h1, h2, h3, .kicker, .btn, .stat b, .nav__menu a { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.06em; } h2 { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.15; margin: 0 0 18px; color: #f2f7ff; } h3 { font-size: 20px; margin: 0 0 8px; color: #eaf3ff; } p { margin: 0 0 16px; } /* Screen-reader-only, and the skip link that appears on focus. Both are accessibility basics that also stop a crawler seeing a page whose first interactive element is a hamburger. */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--cyan); color: var(--ink); padding: 10px 16px; } .skip:focus { left: 0; } .wrap { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; } .wrap--narrow { width: min(760px, calc(100% - 48px)); } .kicker { font-size: 12px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--cyan); margin: 0 0 10px; } .lede { font-size: clamp(17px, 1.7vw, 20px); color: var(--text-dim); max-width: 62ch; } /* ---- buttons ----------------------------------------------------------------------------- */ .btn { display: inline-block; padding: 14px 28px; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--text); background: rgba(12, 22, 38, 0.9); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; } .btn:hover, .btn:focus-visible { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 8px 30px rgba(90, 200, 255, 0.22); } .btn--primary { background: linear-gradient(100deg, var(--magenta), var(--red) 55%, var(--gold)); border-color: transparent; color: #14060c; font-weight: 700; } .btn--primary:hover, .btn--primary:focus-visible { box-shadow: 0 10px 34px rgba(255, 59, 160, 0.4); } .btn--sm { padding: 9px 18px; font-size: 12px; } /* ---- nav --------------------------------------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 14px 0; transition: background .25s ease, backdrop-filter .25s ease, padding .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; } /* Added by main.js once the page has scrolled past the hero's first screen. Over the hero the bar is invisible so the art is uninterrupted; below it the bar has to be readable over anything. */ .nav.is-stuck { background: rgba(5, 8, 15, 0.92); backdrop-filter: blur(10px); border-bottom-color: var(--line); padding: 8px 0; } .nav__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .nav__logo { width: 148px; height: auto; } .nav__brand { display: block; line-height: 0; } .nav__menu { display: flex; align-items: center; gap: 26px; } .nav__menu a { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--text-dim); transition: color .15s ease; } .nav__menu a:hover, .nav__menu a:focus-visible { color: var(--cyan-hot); } .nav__menu .btn { color: var(--text); } .nav__burger { display: none; width: 42px; height: 34px; background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; padding: 8px 9px; } .nav__burger span { display: block; height: 2px; background: var(--text); margin: 3px 0; } /* ---- hero -------------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 140px 0 90px; overflow: hidden; } .hero__art { position: absolute; inset: 0; z-index: 0; } /* Slightly oversized so the parallax in main.js has somewhere to travel without exposing an edge. */ .hero__art img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 42%; will-change: transform; } /* Two overlays, doing two different jobs. The scrim is a vertical ramp that guarantees the headline is legible whatever the art does; the glow is the colour wash that ties the photo to the palette. Together they are why the type never needs a box behind it. */ .hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,15,.88) 0%, rgba(5,8,15,.35) 34%, rgba(5,8,15,.78) 78%, var(--ink) 100%); } .hero__glow { position: absolute; inset: 0; background: radial-gradient(70% 55% at 18% 74%, rgba(255, 59, 160, .28), transparent 62%), radial-gradient(60% 50% at 86% 26%, rgba(90, 200, 255, .22), transparent 60%); mix-blend-mode: screen; } .hero__body { position: relative; z-index: 1; text-align: center; } .hero__logo { width: min(660px, 88vw); height: auto; margin: 0 auto 8px; filter: drop-shadow(0 10px 44px rgba(255, 59, 160, .35)); } .hero__title { margin: 0; } .hero__sub { font-size: clamp(17px, 2.1vw, 22px); max-width: 42ch; margin: 6px auto 30px; color: #e7effb; text-shadow: 0 2px 20px rgba(0,0,0,.7); } .hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .hero__note { margin-top: 22px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); } /* The scroll cue. A bare animated line rather than a chevron glyph, so it needs no icon font. */ .hero__cue { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; z-index: 1; width: 22px; height: 40px; border: 1px solid var(--line); border-radius: 12px; } .hero__cue span { position: absolute; left: 50%; top: 8px; translate: -50% 0; width: 3px; height: 8px; border-radius: 2px; background: var(--cyan); animation: cue 1.9s ease-in-out infinite; } @keyframes cue { 0%,100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(14px); opacity: .1; } } /* ---- stat band --------------------------------------------------------------------------- */ .band { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(90,200,255,.05), transparent); padding: 30px 0; } .band__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; text-align: center; } .stat b { display: block; font-size: clamp(32px, 4vw, 48px); line-height: 1; color: var(--cyan-hot); } .stat span { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim); } /* ---- sections ---------------------------------------------------------------------------- */ .sec { padding: clamp(72px, 10vw, 130px) 0; } .sec--alt { background: var(--ink-2); border-block: 1px solid var(--line); } /* ---- generic card grid ------------------------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 44px; } .cards--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .cards--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-4px); border-color: rgba(90, 200, 255, .5); box-shadow: 0 16px 44px rgba(0, 0, 0, .5); } .card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .card h3, .card p { padding-inline: 22px; } .card h3 { margin-top: 20px; } .card p { color: var(--text-dim); padding-bottom: 22px; margin: 0; } .card--flat { padding: 26px; } .card--flat h3, .card--flat p { padding: 0; } /* ---- frames ------------------------------------------------------------------------------ */ .frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 44px; } /* The accent is a custom property so each card sets ONE value and the glow, the rule and the hover border all follow. Four near-identical blocks with four hard-coded colours is how these drift apart. */ .frame { --accent: var(--cyan); position: relative; padding: 26px 22px 24px; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease; } .frame:hover { transform: translateY(-5px); box-shadow: 0 18px 46px rgba(0,0,0,.55); } .frame img { width: 100%; max-width: 210px; margin: 0 auto 14px; filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--accent) 55%, transparent)); } .frame h3 { text-align: center; } .frame h3 em { display: block; font-style: normal; font-size: 12px; letter-spacing: .28em; color: var(--accent); } .frame p { text-align: center; color: var(--text-dim); font-size: 15px; margin: 0; } .frame--green { --accent: var(--green); } .frame--red { --accent: var(--red); } .frame--blue { --accent: var(--cyan); } .frame--violet { --accent: var(--violet); } /* ---- split (text beside art) ------------------------------------------------------------- */ .split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 54px; align-items: center; } .split__art img { border-radius: var(--radius); border: 1px solid var(--line); } .split__cap { margin-top: 12px; font-size: 13px; color: var(--text-dim); } .list { list-style: none; padding: 0; margin: 26px 0; } .list li { padding: 11px 0 11px 20px; border-bottom: 1px solid var(--line); color: var(--text-dim); position: relative; } .list li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 2px; background: var(--magenta); } .list b { color: var(--gold); font-family: var(--font-display); letter-spacing: .1em; } /* ---- pilots: the game's pilot select screen ------------------------------------------------- ONE ROW: the wall of busts takes the width it needs on the left, and the pilot under the cursor — figure on a plate, card beside it — takes the rest. Stacked (as the game draws it) the figure scrolled out of view every time you reached down for a bust. Everything is sized off --cell, so the wall is 6 x 8 and the plate is EXACTLY the wall's height: the figure and the busts start and end on the same lines. Tall rather than wide on purpose — 6 x 8 lets the figure stand ~600px; 8 x 6 would have cut it to ~400. */ .roster { --cell: 72px; --gap: 4px; --wall-h: calc(8 * var(--cell) + 7 * var(--gap)); margin-top: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; } .roster__picker { width: calc(6 * var(--cell) + 5 * var(--gap)); } .roster__stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; } /* --accent is set per pilot from main.js; the floor line and the streaks both follow it. */ .roster__plate { --accent: var(--cyan); position: relative; height: var(--wall-h); padding-inline: clamp(16px, 2.4vw, 36px); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: rgba(6, 9, 14, 0.86); border: 1px solid var(--line); border-bottom: 2px solid color-mix(in srgb, var(--accent) 70%, white); transition: border-color .2s ease; } /* The finale's greyscale streaks, white on black. SCREEN adds only the light, so the black drops out and what is left is a wash of the pilot's colour — the job the tint does in the game. */ .roster__streaks { position: absolute; inset: 0; background: url("../img/streaks.jpg") center / cover, var(--accent); background-blend-mode: multiply; mix-blend-mode: screen; opacity: .24; transition: background-color .2s ease; } /* SIZED IN HEIGHT, WIDTH FOLLOWS: the art is 264x800 and a stretched person is the one distortion everybody notices. Overrides the global img rule, which sizes by width. */ .roster__figure { position: relative; height: 100%; width: auto; max-width: none; transform-origin: bottom; /* the pivot is the feet, so a swell never lifts them off the floor */ transition: opacity .16s ease, transform .16s ease; } .roster__figure.is-swapping { opacity: 0; transform: scale(.98); } .roster__card { padding: 22px 26px; background: rgba(8, 12, 18, 0.72); border-left: 2px solid rgba(150, 200, 255, 0.45); } .roster__team { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--font-display); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: rgba(150, 200, 255, 0.85); } .roster__team img { width: 30px; height: 30px; } .roster__name { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; color: #f2f7ff; } .roster__bio { color: var(--text-dim); font-size: clamp(16px, 1.5vw, 19px); max-width: 46ch; } .roster__status { margin: 0; font-family: var(--font-display); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: rgb(255, 196, 84); } .roster__status--starter { color: var(--green); } /* The wall: 6 across, 8 down, fixed cells so its width is known and the stage gets the rest. */ .roster__grid { display: grid; grid-template-columns: repeat(6, var(--cell)); gap: var(--gap); } /* A notched frame, like the game's ChamferFrame: the button's own background IS the ring, and the bust inside is inset by its width and cut to the same octagon. */ .bust { --notch: polygon(16% 0, 84% 0, 100% 16%, 100% 84%, 84% 100%, 16% 100%, 0 84%, 0 16%); position: relative; aspect-ratio: 1; padding: 2px; border: 0; background: rgba(120, 150, 190, 0.25); clip-path: var(--notch); cursor: pointer; transition: background-color .12s ease, transform .12s ease; } /* One sheet for all 48 busts, 8 x 6 cells, positioned per button from main.js. */ .bust span { display: block; width: 100%; height: 100%; clip-path: var(--notch); background: #0a0e14 url("../img/pilots.jpg") 0 0 / 800% 600% no-repeat; } /* The starters carry a green tick along the foot — the game's "yours" colour. */ .bust--starter::after { content: ""; position: absolute; left: 34%; right: 34%; bottom: 3px; height: 3px; background: var(--green); } /* Focus at least as loud as hover, because a keyboard user has nothing else telling them where they are. The one on show is lit gold like the game's cursor; hover is a softer version of it. */ .bust:hover { background: rgba(255, 214, 92, 0.6); } .bust.is-current, .bust:focus-visible { background: rgb(255, 214, 92); transform: scale(1.08); z-index: 1; } .bust:focus-visible { outline: none; } .roster__legend { margin: 12px 0 0; font-size: 13px; color: var(--text-dim); } .roster__dot { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--green); } /* ---- pilots mosaic (no-JS fallback) ---------------------------------------------------------- */ .mosaic { margin: 44px 0 0; } .mosaic img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); } .mosaic figcaption { margin-top: 12px; font-size: 14px; color: var(--text-dim); text-align: center; } /* ---- corporations & classes -------------------------------------------------------------- */ .corps, .classes, .tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 44px; text-align: center; } .corp, .cls, .track { padding: 30px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, border-color .2s ease; } .corp:hover, .cls:hover, .track:hover { transform: translateY(-4px); border-color: rgba(90,200,255,.45); } .corp img { width: 128px; margin: 0 auto 16px; } .cls img { width: 108px; margin: 0 auto 16px; } .track img { width: 150px; margin: 0 auto 16px; opacity: .92; } .corp p, .cls p, .track p { color: var(--text-dim); font-size: 15px; margin: 0; } .cls--null img { filter: drop-shadow(0 0 22px rgba(90, 200, 255, .55)); } .cls--ghost img { filter: drop-shadow(0 0 22px rgba(180, 120, 255, .55)); } .cls--reaper img { filter: drop-shadow(0 0 24px rgba(255, 90, 88, .6)); } /* ---- FAQ ---------------------------------------------------------------------------------- */ /* Built on

, so it opens and closes with no JavaScript at all — which also means a crawler reads every answer whether or not it runs scripts. */ .faq { margin-top: 36px; } .faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 12px; } .faq summary { cursor: pointer; padding: 18px 22px; font-family: var(--font-display); letter-spacing: .04em; color: #eaf3ff; list-style: none; position: relative; padding-right: 52px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; color: var(--cyan); font-size: 22px; line-height: 1; transition: transform .2s ease; } .faq details[open] summary::after { content: "\2212"; } .faq p { padding: 0 22px 20px; margin: 0; color: var(--text-dim); } /* ---- call to action ----------------------------------------------------------------------- */ .cta { padding: clamp(72px, 10vw, 120px) 0; text-align: center; background: radial-gradient(70% 120% at 50% 0%, rgba(255, 59, 160, .16), transparent 60%), var(--ink-2); border-top: 1px solid var(--line); } .cta p { color: var(--text-dim); } .signup { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; } .signup input { flex: 1 1 300px; max-width: 360px; padding: 14px 18px; background: rgba(4, 8, 16, .85); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font: inherit; } .signup input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } .signup__msg { min-height: 24px; margin-top: 14px; font-size: 14px; color: var(--gold); } .cta__alt { margin-top: 26px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } .cta__alt a { color: var(--text-dim); text-decoration: none; } .cta__alt a:hover { color: var(--cyan-hot); } /* ---- footer -------------------------------------------------------------------------------- */ .foot { padding: 40px 0; border-top: 1px solid var(--line); } .foot__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .foot__logo { width: 120px; opacity: .7; } .foot__legal { margin: 0; font-size: 12px; color: var(--text-dim); text-align: right; } /* ---- scroll reveal -------------------------------------------------------------------------- */ /* The initial state is applied by main.js (the .js-reveal class on ) rather than here, so a visitor with JavaScript off sees the content rather than a page of invisible blocks. */ .js-reveal .reveal { opacity: 0; transform: translateY(26px); } .js-reveal .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); } /* ---- responsive ----------------------------------------------------------------------------- */ @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 34px; } .nav__burger { display: block; } .nav__menu { position: fixed; inset: 62px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(5, 8, 15, .98); border-bottom: 1px solid var(--line); padding: 10px 24px 22px; display: none; } .nav__menu.is-open { display: flex; } .nav__menu a { padding: 14px 0; border-bottom: 1px solid var(--line); } .nav__menu .btn { margin-top: 14px; text-align: center; border-bottom: 1px solid var(--line); } .foot__row { justify-content: center; } .foot__legal { text-align: center; } /* Still one row, but the stage turns into a column — figure on top, card under it — because the column beside the wall is now too narrow for the two side by side. */ .roster { --cell: 52px; gap: 20px; } .roster__stage { grid-template-columns: minmax(0, 1fr); gap: 12px; } .roster__plate { height: calc(var(--wall-h) * .66); } } @media (max-width: 1100px) and (min-width: 901px) { .roster { --cell: 60px; } } /* A phone has no room for a row: the pilot goes on top, the wall under it, full width. */ @media (max-width: 640px) { .roster { grid-template-columns: minmax(0, 1fr); } .roster__stage { order: -1; grid-template-columns: auto minmax(0, 1fr); } .roster__picker { width: auto; } .roster__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .roster__plate { height: 300px; padding-inline: 8px; } .roster__card { padding: 14px 14px; } .roster__team { letter-spacing: .16em; font-size: 12px; } .roster__bio { font-size: 15px; } .roster__legend { text-align: center; } } @media (max-width: 480px) { body { font-size: 16px; } .wrap, .wrap--narrow { width: calc(100% - 32px); } .hero { padding-top: 116px; } } /* ---- reduced motion ------------------------------------------------------------------------- */ /* Everything decorative switches off together. The parallax is disabled in main.js by the same query, because a transform written from JS ignores a CSS rule. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js-reveal .reveal { opacity: 1; transform: none; } }