/* ========================================================================== /beta — temporary pre-launch landing page. Loaded alongside home.css (see beta.html's ), which supplies every token/font/hero-media/button class this file relies on — colors here are all var(--brand)/var(--bg-raised)/var(--border)/etc from that file, or the one literal (#22c55e) home.css itself already uses repeatedly for "positive/success" — no new colors introduced. Border-radius values (8px for controls, matching .btn; 16px for card-style surfaces) match the scale home.css already uses throughout rather than picking new numbers. ========================================================================== */ /* Header has just the logo on this page (no nav links, no login/Start Free — there's nothing to log into yet) — .site-header's own justify-content:space-between still centers a single child correctly with no extra rule needed; this just drops the border it'd otherwise share with a page that scrolls under it, since /beta doesn't. */ .beta-page-header { border-bottom: 1px solid var(--border); } /* ── CTA block (email field, no-spam note, Discord link) ── */ .beta-cta-block { display: flex; flex-direction: column; gap: 14px; max-width: 480px; } .beta-cta-label { font-size: 13px; font-weight: 600; color: var(--text); } /* Color wipe between brand red and the page's own near-white --text (rather than a literal new #fff) — 5s full cycle, ease-in-out so it reads as a smooth wipe rather than a snap. Dropped entirely for prefers-reduced-motion, same convention as .eyebrow-dot's pulse in home.css. Removed once email signup succeeds (see submitBetaEmail) — a "thanks, you're signed up" message pulsing forever would read as nagging rather than an attention cue that already did its job. */ @keyframes beta-cta-wipe { 0%, 100% { color: var(--text); } 50% { color: var(--brand); } } .beta-cta-label.pulse { animation: beta-cta-wipe 5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .beta-cta-label.pulse { animation: none; } } .beta-cta-label.is-success { color: #22c55e; } .beta-email-form { display: flex; gap: 10px; flex-wrap: wrap; } .beta-email-form input { flex: 1 1 240px; min-width: 0; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px 16px; color: var(--text); font-family: 'Sora', sans-serif; font-size: 14px; outline: none; transition: border-color .15s; box-sizing: border-box; } .beta-email-form input:focus { border-color: var(--brand); } .beta-email-form input::placeholder { color: var(--dim); } .beta-email-msg { display: none; font-size: 13px; font-weight: 600; } .beta-email-msg.show { display: block; } .beta-email-msg.is-success { color: #22c55e; } .beta-email-msg.is-error { color: var(--brand); } .beta-nospam { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .beta-nospam svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--dim); } /* Discord's own brand blurple — the deliberate one exception to "only home.css colors" on this page, since the whole point is recognizable Discord branding. #4752C4 is Discord's own documented hover shade for this exact blurple, not an invented one. */ .beta-discord-btn { background: #5865F2; color: #fff; border-color: #5865F2; } .beta-discord-btn:hover { background: #4752C4; border-color: #4752C4; } .beta-discord-btn svg { width: 18px; height: 18px; } /* home.css's own @media(max-width:800px)-and-(min-width:680px) block switches .hero-copy to a 2-column grid (grid-template-areas "eyebrow eyebrow" / "headline cta" / "sub cta") built specifically around home.html's .hero-cta-row sitting beside the headline — that markup doesn't exist on this page (.beta-cta-block is structured completely differently), so .eyebrow's grid-area:eyebrow still applies but with nothing coherent underneath it, and the "eyebrow eyebrow" row spans the full 2-column width edge to edge instead of just wrapping its own content. Reset .hero-copy back to normal block flow for this one in-between width range — beta.html never needed the "CTA beside headline" trick home.html built that grid for in the first place. */ @media (max-width: 800px) and (min-width: 680px) { .hero-copy { display: block; } } /* .hero-particles moved to home.css — this page already links that file, and home.html now uses the same effect too, so one shared rule instead of two copies. */ /* ── Header buttons + lightboxes ── */ /* "Apply for Beta" / "I have a beta code" both shown permanently now (used to be a single "Join the beta" button that expanded into these two on click — Luke asked to drop the extra click). .site-header's own justify-content:space-between already places .beta-header-actions on the right, so this needs no positioning of its own, just a plain flex layout for the two buttons. Reuses .btn/.btn-brand/.btn-ghost from home.css directly for the actual button look. */ .beta-header-actions { display: flex; align-items: center; } .beta-header-choices { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* Two label lengths per button — "lbl-short" only ever shows on the phone breakpoint below, where "Apply for Beta" + "I have a beta code" side by side don't reliably fit next to the logo on one line. Wrapping onto a second line was the actual bug: .site-header has a fixed height (76px, home.css) with align-items:center and no overflow handling, so a wrapped second row of buttons burst out past the header's top/bottom edges instead of the header growing to fit — that's the "space and position" issue reported from a real phone. Short labels are the primary fix (keep everything on one row); the min-height override below is a safety net in case an even narrower device still needs to wrap. */ .beta-header-choices .lbl-short { display: none; } @media (max-width: 800px) { /* Same buttons, just tightened up to fit next to the logo on a phone — .btn's own base padding/font-size (home.css) is sized for a roomy desktop header. */ .beta-header-actions .btn { padding: 8px 12px; font-size: 12px; } .beta-header-choices { gap: 8px; } .beta-header-choices .lbl-full { display: none; } .beta-header-choices .lbl-short { display: inline; } /* Safety net: both buttons are always shown now, so this mobile-width wrap risk is the everyday case (not just a rare expanded state) — let the header grow instead of clipping — height:auto plus a min-height (rather than home.css's fixed height) gives a wrapped two-button row somewhere to go. */ .beta-page-header { height: auto; min-height: var(--header-h); padding: 14px 16px; } } .beta-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .75); align-items: center; justify-content: center; padding: 20px; } .beta-overlay.show { display: flex; } .beta-modal { position: relative; width: 100%; max-width: 400px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-sizing: border-box; } .beta-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px; } .beta-modal-close:hover { color: var(--text); } .beta-modal-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 19px; color: var(--text); margin: 0 0 6px; } .beta-modal-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; } .beta-modal input, .beta-modal select { width: 100%; background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px 16px; color: var(--text); font-family: 'Sora', sans-serif; font-size: 14px; outline: none; transition: border-color .15s; box-sizing: border-box; } .beta-modal input:focus, .beta-modal select:focus { border-color: var(--brand); } .beta-modal input::placeholder { color: var(--dim); } /* Native select arrows sit right up against the border in Chrome/Edge — too tight against this field's rounded edge. Swap in our own chevron (var(--muted), #9b9ba3) positioned with real breathing room, and pad the text out of its way. */ .beta-modal select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9ba3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; } .beta-modal select option { background: var(--bg-raised); } .beta-code-msg { display: none; font-size: 13px; font-weight: 600; margin-top: 10px; } .beta-code-msg.show { display: block; } .beta-code-msg.is-error { color: var(--brand); } /* ── Apply for Beta form ── */ .beta-modal-field { text-align: left; margin-bottom: 14px; } .beta-modal-field label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } .beta-apply-msg { display: none; font-size: 13px; font-weight: 600; margin-top: 4px; } .beta-apply-msg.show { display: block; } .beta-apply-msg.is-error { color: var(--brand); } .beta-apply-msg.is-success { color: #22c55e; } /* ── Final CTA (ported from home.html) ── */ /* home.css's .final-cta-inner::before paints a Pokémon-type background bleed image behind the copy — Luke asked for beta's copy of this section to have no background image at all. Overridden here (beta.css loads after home.css) rather than touching the shared rule, since home.html's own .final-cta still wants that bleed. */ .final-cta-inner::before { display: none; } /* ── Hero media bottom alignment ── */ /* home.css's .hero-media is anchored from the top (top:0 + margin-top:25px) with a fixed 500px height — that math is calibrated for home.html's own shorter .hero-copy (headline/sub/two buttons), where .hero-inner's height ends up almost exactly 525px too, so the image's bottom edge naturally lands flush with the section's bottom. Beta's .hero-copy is taller (the email form + no-spam note push past that), so .hero-inner grows past 525px and the top-anchored image leaves a black gap below it before the section ends. Anchoring from the bottom instead keeps the image flush with the actual bottom of the section regardless of how tall .hero-copy ends up being on this page. */ @media (min-width: 801px) { .hero-media { top: auto; bottom: 0; margin-top: 0; } } /* home.css's mobile .hero-media rule pulls the image up with a -75px margin-top, tuned for home.html's shorter mobile .hero-copy so the image sits close underneath it without a big gap. Beta's mobile .hero-copy ends with the email field + no-spam note right at its bottom edge, so that same pull-up drags the image up over that text instead (see the overlapping-card screenshot). Overriding back to a small positive gap here, beta-only. */ @media (max-width: 800px) { .hero-media { margin-top: 20px; } }