/* ============================================================================ Static-site layer for thesolo.ai (pre-launch). landing.css and blog.css are byte-for-byte copies of the operator app's public-surface stylesheets (businesses/solo-platform/frontend — components/landing/landing.css and app/blog/blog.css). They are copied rather than re-authored so the two surfaces cannot drift while both are live, and so the cutover — when the Next app takes this apex — is a no-op for the reader. This file holds only what the static site needs and the Next app gets from elsewhere: 1. the --font-* tokens next/font supplies there, 2. the join form, which exists only here (the Next app uses Clerk's on a /waitlist route; this site keeps its own DynamoDB-backed form, which is live and collecting). Nothing here restyles a shared class — a rule that belongs to the shared look belongs upstream in landing.css. ========================================================================== */ /* next/font supplies these in the app; here they come from Google Fonts. Same two families (Inter, Spline Sans Mono) so the type is identical. */ :root { --font-display: Inter, ui-sans-serif, system-ui, sans-serif; --font-body: Inter, ui-sans-serif, system-ui, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; } /* The app renders .lp-root inside a themed ; standalone, the ground has to be painted here too or the page shows the browser's default white behind the fixed atmosphere layers. */ body { background: #06070b; transition: background 0.25s ease; } body:has(.lp-root[data-theme="light"]) { background: #f0f3ee; } /* ---------- join form --------------------------------------------------- The conversion point. In the app this is a /waitlist route wrapping Clerk's component; here it is a section on the landing page posting to /api/waitlist (same origin, via the CloudFront /api/* behaviour). Built from --lp-* tokens only, so it themes with everything else. */ .lp-root .lp-join { display: grid; grid-template-columns: 1fr 1.02fr; gap: 44px; align-items: center; } .lp-root .lp-form { border: 1px solid var(--lp-edge); border-radius: 18px; padding: 24px; background: var(--lp-panel); box-shadow: var(--lp-cardshadow); } .lp-root .lp-form label { display: block; font-family: var(--font-mono), ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-dim); margin: 0 0 8px; } .lp-root .lp-form input, .lp-root .lp-form textarea { width: 100%; background: var(--lp-well); border: 1px solid var(--lp-edge); border-radius: 11px; padding: 12px; color: var(--lp-text); font-family: var(--font-mono), ui-monospace, monospace; font-size: 13.5px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .lp-root .lp-form input:focus, .lp-root .lp-form textarea:focus { border-color: var(--lp-accent); box-shadow: var(--lp-glow-mint); } .lp-root .lp-form .row { margin-bottom: 16px; } .lp-root .lp-form textarea { resize: vertical; min-height: 76px; line-height: 1.5; } .lp-root .lp-segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .lp-root .lp-seg { font-family: var(--font-mono), ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lp-dim); background: var(--lp-well); border: 1px solid var(--lp-edge); border-radius: 9px; padding: 9px 6px; cursor: pointer; text-align: center; transition: all 0.18s; } .lp-root .lp-seg.on { color: var(--lp-btnink); background: var(--lp-btn); border-color: var(--lp-btn); box-shadow: var(--lp-glow-mint); } .lp-root .lp-submit { width: 100%; font-family: var(--font-mono), ui-monospace, monospace; font-weight: 700; font-size: 13.5px; color: var(--lp-btnink); background: var(--lp-btn); border: none; border-radius: 11px; padding: 13px; cursor: pointer; margin-top: 4px; transition: box-shadow 0.18s, transform 0.18s; } .lp-root .lp-submit:hover:not(:disabled) { box-shadow: var(--lp-glow-mint); transform: translateY(-1px); } .lp-root .lp-submit:disabled { cursor: progress; opacity: 0.75; } .lp-root .lp-ferr { display: none; margin: 10px 0 0; font-family: var(--font-mono), ui-monospace, monospace; font-size: 11px; color: var(--lp-hot); text-align: center; } .lp-root .lp-ok { display: none; border: 1px solid var(--lp-accent-border); border-radius: 18px; padding: 28px; text-align: center; background: var(--lp-accent-soft); } .lp-root .lp-ok .c { font-size: 28px; color: var(--lp-accent); } .lp-root .lp-ok h3 { font-family: var(--font-display), ui-sans-serif, sans-serif; font-size: 20px; margin: 10px 0 6px; color: var(--lp-text); } .lp-root .lp-ok p { color: var(--lp-dim); margin: 0; font-size: 14px; } .lp-root .lp-ok b { color: var(--lp-text); } .lp-root .lp-privnote { font-family: var(--font-mono), ui-monospace, monospace; font-size: 11px; color: var(--lp-dim); opacity: 0.7; margin: 14px 0 0; text-align: center; } /* ---------- 404 ---------------------------------------------------------- */ .lp-root .lp-404 { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto; padding: 7rem 1.5rem 9rem; text-align: center; } .lp-root .lp-404 h1 { margin: 1rem 0; } .lp-root .lp-404 p { color: var(--lp-dim); margin: 0 0 2rem; } @media (max-width: 900px) { .lp-root .lp-join { grid-template-columns: minmax(0, 1fr); gap: 30px; } }