/* Public landing. Shares the graphite tokens, .button and .brand with styles.css and owns everything under .lp. The release switches are attributes the server writes on : data-cta (waitlist | stores), data-stores (subset of "apple play") and data-review (soon | released). The page never decides them itself, so the same HTML serves the waitlist and the released product. */ .lp { --lp-max: 1120px; --lp-pad: clamp(20px, 5vw, 48px); --lp-body: #b3b3bb; --lp-ink: #16161a; --lp-ink-line: #2a2a30; font-variant-numeric: tabular-nums; } .lp .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lp h1, .lp h2, .lp h3 { margin: 0; color: var(--text); font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; } .lp p { margin: 0; } .lp-eyebrow { margin: 0 0 18px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .lp-eyebrow strong { color: var(--text); font-weight: 600; } .lp-sep { display: inline-block; width: 3px; height: 3px; margin: 0 10px; vertical-align: middle; border-radius: 50%; background: var(--faint); } /* Navigation */ .lp-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(var(--lp-max), 100% - 2 * var(--lp-pad)); min-height: 68px; margin: 0 auto; } .lp-nav::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--lp-pad)); z-index: -1; border-bottom: 1px solid var(--line-subtle); background: rgba(10, 10, 12, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .lp-links { display: flex; gap: 26px; } .lp-links a { color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: color 160ms ease; } .lp-links a:hover { color: var(--text); } .lp-textlink { padding: 0; border: 0; color: var(--muted); background: none; font-size: 13px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; cursor: pointer; } .lp-textlink:hover { color: var(--text); text-decoration-color: var(--text); } /* Hero */ .lp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 72px); align-items: center; width: min(var(--lp-max), 100% - 2 * var(--lp-pad)); margin: 0 auto; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 96px); } .lp-hero h1 { font-size: clamp(40px, 4.7vw, 62px); line-height: 1; } .lp-lead { max-width: 540px; margin-top: 34px; color: var(--lp-body); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; } .lp-lead strong { color: var(--text); font-weight: 600; } .lp-cta { margin-top: 34px; } .lp-cta-note { margin-top: 16px; color: var(--faint); font-size: 13px; } .lp-hero .lp-textlink { margin-top: 26px; } /* Waitlist form */ .lp-waitlist { max-width: 520px; } .lp-field { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: border-color 160ms ease; } .lp-field:focus-within { border-color: var(--accent); } .lp-field input { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 0; color: var(--text); background: transparent; font-size: 15px; outline: none; } .lp-field input::placeholder { color: var(--faint); } .lp-field .button { flex-shrink: 0; white-space: nowrap; } .lp-waitlist[data-state="sending"] .button { opacity: 0.6; pointer-events: none; } .lp-waitlist[data-state="done"] .lp-field { border-color: var(--positive); } .lp-waitlist[data-state="done"] .lp-field .button { color: var(--bg); background: var(--positive); } .lp-form-note { min-height: 18px; margin-top: 12px; color: var(--muted); font-size: 13px; } .lp-waitlist[data-state="done"] .lp-form-note { color: var(--positive); } .lp-waitlist[data-state="error"] .lp-form-note { color: var(--negative); } /* Store badges */ .lp-stores { display: flex; flex-wrap: wrap; gap: 12px; } .lp-store { display: inline-flex; align-items: center; gap: 11px; min-height: 54px; padding: 0 18px 0 14px; border: 1px solid var(--lp-ink-line); border-radius: 14px; color: var(--text); background: var(--lp-ink); text-decoration: none; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; } .lp-store:hover { border-color: #3a3a42; background: #1c1c21; } .lp-store:active { transform: translateY(1px); } .lp-store svg { width: 24px; height: 24px; fill: currentColor; } .lp-store span { display: grid; line-height: 1.15; } .lp-store small { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .lp-store strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } /* The server writes the switches; the page only obeys them. */ html[data-cta="waitlist"] .lp-stores { display: none; } html[data-cta="stores"] .lp-waitlist, html[data-cta="stores"] .lp-cta-link { display: none; } html:not([data-stores~="apple"]) .lp-store-apple { display: none; } html:not([data-stores~="play"]) .lp-store-play { display: none; } html[data-stores~="play"] .lp-faq-android { display: none; } html[data-review="soon"] .lp-review-released { display: none; } html[data-review="released"] .lp-review-soon { display: none; } /* Phones. Screens are real captures of the app, framed only by a thin bezel. */ .lp-hero-visual { position: relative; display: flex; justify-content: center; min-height: 560px; } .lp-phone { width: var(--w, 280px); margin: 0; aspect-ratio: 402 / 874; padding: 9px; border-radius: 56px; background: var(--lp-ink); box-shadow: inset 0 0 0 1px var(--lp-ink-line), 0 30px 80px rgba(0, 0, 0, 0.55); } .lp-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 48px; background: var(--bg); } .lp-phone-front { --w: 292px; position: relative; z-index: 2; align-self: end; margin-right: 12%; } .lp-phone-back { --w: 260px; position: absolute; top: 0; right: 0; z-index: 1; opacity: 0.85; filter: brightness(0.82); } /* The one-sentence problem */ .lp-problem { width: min(var(--lp-max), 100% - 2 * var(--lp-pad)); margin: 0 auto; padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line-subtle); } .lp-problem-text { max-width: 900px; color: var(--muted); font-size: clamp(26px, 3.8vw, 46px); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; } .lp-problem-text span { color: var(--text); } .lp-problem-sub { max-width: 620px; margin-top: 24px; color: var(--lp-body); font-size: 17px; line-height: 1.55; } /* Sections */ .lp-section { width: min(var(--lp-max), 100% - 2 * var(--lp-pad)); margin: 0 auto; padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line-subtle); } .lp-section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); } .lp-section-head h2, .lp-privacy h2, .lp-review h2, .lp-final h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06; } .lp-section-head .lp-intro { max-width: 600px; margin-top: 18px; color: var(--lp-body); font-size: 17px; line-height: 1.55; } /* Steps */ .lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; } .lp-steps li { padding-top: 22px; border-top: 1px solid var(--line); } .lp-step-n { display: block; margin-bottom: 26px; color: var(--faint); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .lp-steps h3 { font-size: 22px; line-height: 1.2; } .lp-steps p { margin-top: 12px; color: var(--lp-body); font-size: 15px; line-height: 1.55; } /* Screens gallery */ .lp-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; } .lp-gallery li { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 26px; align-items: end; } .lp-gallery .lp-phone { --w: 100%; } .lp-gallery li > div { padding-bottom: 18px; } .lp-wide { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(32px, 4vw, 56px); } .lp-wide h3 { font-size: 20px; line-height: 1.2; } .lp-wide p { margin-top: 8px; color: var(--lp-body); font-size: 15px; line-height: 1.55; } .lp-phone-landscape { --w: 100%; aspect-ratio: 874 / 402; } .lp-gallery h3 { font-size: 20px; line-height: 1.2; } .lp-gallery p { margin-top: 8px; color: var(--lp-body); font-size: 15px; line-height: 1.55; } .lp-gallery figure + div { padding: 0 4px; } /* Privacy */ .lp-privacy-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .lp-privacy p { margin-top: 20px; color: var(--lp-body); font-size: 17px; line-height: 1.55; } .lp-principle { padding-top: 20px; border-top: 1px solid var(--line); } .lp-principle strong { color: var(--text); } .lp-facts { display: grid; gap: 6px; margin: 0; } .lp-facts > div { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 18px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); } .lp-facts > div:last-child { border-bottom: 1px solid var(--line); } .lp-facts dt { color: var(--text); font-size: clamp(30px, 3vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .lp-facts dd { margin: 0; color: var(--lp-body); font-size: 15px; line-height: 1.5; } /* Game review, before and after release */ .lp-review > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: end; } .lp-review p { margin-top: 20px; color: var(--lp-body); font-size: 17px; line-height: 1.55; } .lp-review .lp-eyebrow { color: var(--accent); } .lp-note { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted) !important; font-size: 14px !important; } /* Plans */ .lp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lp-plan { display: grid; align-content: start; gap: 0; padding: 30px 28px 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); } .lp-plan-paid { border-color: #34343c; background: linear-gradient(180deg, #17171b, var(--surface)); } .lp-plan h3 { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); } .lp-price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; } .lp-price strong { color: var(--text); font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .lp-price span { color: var(--muted); font-size: 15px; } .lp-plan-sub { margin-top: 10px; color: var(--lp-body); font-size: 14px; } .lp-plan ul { margin: 26px 0 28px; padding: 0; list-style: none; } .lp-plan li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--line-subtle); color: var(--lp-body); font-size: 14px; line-height: 1.45; } .lp-plan li::before { content: ""; position: absolute; top: 18px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--positive); } .lp-plan .lp-stores { margin-top: auto; } .lp-fineprint { max-width: 640px; margin-top: 22px; color: var(--muted); font-size: 13px; line-height: 1.5; } /* FAQ */ .lp-faq details { border-top: 1px solid var(--line); } .lp-faq details:last-of-type { border-bottom: 1px solid var(--line); } .lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; list-style: none; cursor: pointer; } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary::after { content: "+"; flex-shrink: 0; color: var(--faint); font-size: 22px; font-weight: 400; line-height: 1; transition: transform 160ms ease; } .lp-faq details[open] summary::after { transform: rotate(45deg); } .lp-faq details p { max-width: 680px; padding: 0 0 22px; color: var(--lp-body); font-size: 15px; line-height: 1.6; } /* Final call */ .lp-final { width: min(var(--lp-max), 100% - 2 * var(--lp-pad)); margin: 0 auto; padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid var(--line-subtle); text-align: center; } .lp-final h2 { margin: 0 auto; } .lp-final .lp-cta { display: grid; justify-items: center; margin-top: 30px; } .lp-final .lp-waitlist { width: 100%; } .lp-final .lp-textlink { margin-top: 22px; } /* Footer */ .lp-footer { width: min(var(--lp-max), 100% - 2 * var(--lp-pad)); margin: 0 auto; padding: 34px 0 max(34px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line-subtle); } .lp-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-bottom: 26px; } .lp-footer nav { display: flex; flex-wrap: wrap; gap: 22px; } .lp-footer nav a, .lp-footer nav .lp-textlink { color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; } .lp-footer nav a:hover, .lp-footer nav .lp-textlink:hover { color: var(--text); } .lp-legal { max-width: 760px; margin-top: 10px; color: var(--faint); font-size: 12px; line-height: 1.55; } .lp-anj { color: var(--muted); } /* Responsive */ @media (max-width: 960px) { .lp-hero { grid-template-columns: 1fr; padding-top: 44px; } .lp-hero-visual { min-height: 0; margin-top: 16px; } .lp-phone-front { --w: min(272px, 74vw); margin-right: 0; } .lp-phone-back { display: none; } .lp-steps, .lp-plans, .lp-privacy-grid, .lp-review > div { grid-template-columns: 1fr; } .lp-gallery { grid-template-columns: 1fr; gap: 40px; } .lp-gallery li { grid-template-columns: 1fr; justify-items: center; gap: 20px; } .lp-gallery .lp-phone { --w: min(272px, 74vw); } .lp-gallery li > div { padding-bottom: 0; } .lp-wide { grid-template-columns: 1fr; } } @media (max-width: 640px) { .lp-links { display: none; } .lp-hero .lp-sep { display: none; } .lp-hero .lp-rooms { display: block; margin-top: 6px; } .lp-hero h1 { font-size: clamp(38px, 11.5vw, 52px); } .lp-field { flex-direction: column; padding: 8px; } .lp-field .button { width: 100%; } .lp-stores { flex-direction: column; } .lp-store { justify-content: center; } .lp-facts > div { grid-template-columns: 1fr; gap: 8px; } .lp-final .lp-stores { width: 100%; } } @media (prefers-reduced-motion: reduce) { .lp *, .lp *::after { transition: none !important; } }