/* The RIFT brand tokens. One definition, two deployments. * * This file is the single source of truth for every colour in the product. The app imports * it from index.css; the public landing page copies it in at build time (see * landing/Dockerfile) and imports it the same way. Neither writes a hex value of its own — * a landing page that drifts a shade away from the app it is advertising is a worse * problem than the duplication that causes it, and the only reliable fix is for there to * be nowhere else to put a colour. * * The landing page is dark-only, so it uses the .dark values. It applies them by putting * class="dark" on rather than by redefining anything. */ /* Theme tokens. Values are space-separated RGB triples so tailwind.config.js can wrap them as rgb(var(--rift-x) / ) and opacity modifiers keep working. :root is light. .dark on switches to dark — that class is the single source of truth, set by store/theme.js from users.theme_preference. The brand hues are the same in both themes but not the same *values*: the RIFT brand hexes are tuned for a near-black ground and drop to 1.6:1–2.1:1 against white, which is unreadable. Light mode therefore uses the darkest same-hue value that still clears WCAG AA (4.5:1) — including where that text sits on a 5-10% tint of its own hue, as status badges and metric cards do. Dark mode carries the canonical brand hexes exactly. */ :root { /* Surfaces */ --rift-background: 240 244 248; /* #F0F4F8 */ --rift-surface: 255 255 255; /* #FFFFFF */ --rift-surface-secondary: 245 247 250; /* #F5F7FA */ --rift-border: 226 232 240; /* #E2E8F0 */ /* Text */ --rift-primary: 13 17 23; /* #0D1117 */ --rift-muted: 90 100 120; /* #5A6478 */ /* Brand + semantic — same hue as dark, darkened to clear AA on light surfaces */ --rift-accent: 0 110 133; /* #006E85 ← brand #00D4FF */ --rift-mira: 106 77 255; /* #6A4DFF ← brand #7B61FF */ --rift-positive: 20 117 56; /* #147538 ← brand #22C55E */ --rift-negative: 197 17 17; /* #C51111 ← brand #EF4444 */ --rift-warning: 142 92 6; /* #8E5C06 ← brand #F59E0B */ /* Ink that sits on a solid accent fill — flips so the fill stays readable either way */ --rift-on-accent: 255 255 255; /* white on the darkened light accent */ } .dark { /* Surfaces */ --rift-background: 13 17 23; /* #0D1117 */ --rift-surface: 21 24 32; /* #151820 */ --rift-surface-secondary: 30 35 48; /* #1E2330 */ --rift-border: 42 45 58; /* #2A2D3A */ /* Text */ --rift-primary: 240 244 248; /* #F0F4F8 */ --rift-muted: 139 148 158; /* #8B949E */ /* Brand + semantic — the canonical RIFT hexes */ --rift-accent: 0 212 255; /* #00D4FF */ --rift-mira: 123 97 255; /* #7B61FF */ --rift-positive: 34 197 94; /* #22C55E */ --rift-negative: 239 68 68; /* #EF4444 */ --rift-warning: 245 158 11; /* #F59E0B */ --rift-on-accent: 13 17 23; /* #0D1117 — dark ink on bright cyan */ } /* RIFT landing page. * * There is not one colour literal in this file. Every value resolves through a custom * property defined in tokens.css, which is the same file the application imports — see the * header of that file. If you find yourself wanting a shade that is not here, the answer is * to add it to the token file so both deployments get it, not to write it once here. * * Rules this stylesheet is holding to, because they are easy to erode one commit at a time: * · cyan (--rift-accent) appears on the primary call to action and nowhere else * · 1px borders, 0.75rem radius on cards — nothing softer, nothing heavier * · no gradients, no shadows, no blur, no glow * · every numeral is set in JetBrains Mono, via .num */ *, *::before, *::after { box-sizing: border-box; } html { /* Anchor links land below the sticky header rather than under it. */ scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; } body { margin: 0; background: rgb(var(--rift-background)); color: rgb(var(--rift-primary)); font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Every number on the page, per the brand: prices, dates, counts, years. */ .num, time { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } h1, h2, h3 { line-height: 1.25; letter-spacing: -0.015em; margin: 0; } h1 { font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 600; } h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 600; } h3 { font-size: 1.0625rem; font-weight: 600; } p { margin: 0; } a { color: rgb(var(--rift-primary)); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgb(var(--rift-border)); } a:hover { text-decoration-color: currentColor; } /* One visible focus treatment for everything, matching the application's. */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid rgb(var(--rift-accent)); outline-offset: 2px; border-radius: 0.375rem; } .skip { position: absolute; left: -9999px; background: rgb(var(--rift-surface)); border: 1px solid rgb(var(--rift-border)); border-radius: 0.75rem; padding: 0.75rem 1rem; } .skip:focus { left: 1rem; top: 1rem; z-index: 10; } .wrap { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; } .muted { color: rgb(var(--rift-muted)); } .small { font-size: 0.8125rem; } /* ── Header ─────────────────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 5; background: rgb(var(--rift-background)); border-bottom: 1px solid rgb(var(--rift-border)); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; flex-wrap: wrap; } .wordmark { font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.06em; text-decoration: none; color: rgb(var(--rift-primary)); } .site-header nav { display: flex; gap: 1.25rem; flex-wrap: wrap; } .site-header nav a { font-size: 0.875rem; color: rgb(var(--rift-muted)); text-decoration: none; } .site-header nav a:hover { color: rgb(var(--rift-primary)); } /* ── Hero ───────────────────────────────────────────────────────────────────────────── */ .hero { padding: clamp(3rem, 9vw, 6rem) 1.25rem clamp(2rem, 5vw, 3.5rem); } .eyebrow { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--rift-muted)); margin-bottom: 1rem; } .hero h1 { max-width: 22ch; } .lede { margin-top: 1.25rem; max-width: 58ch; font-size: clamp(1rem, 1.6vw, 1.125rem); color: rgb(var(--rift-muted)); } .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .cta-note { margin-top: 1rem; font-size: 0.8125rem; color: rgb(var(--rift-muted)); } /* ── Buttons ────────────────────────────────────────────────────────────────────────── */ /* Square-ish, not pills: 0.75rem to match the cards. */ .btn { display: inline-block; padding: 0.7rem 1.15rem; border-radius: 0.75rem; border: 1px solid transparent; font-size: 0.9375rem; font-weight: 500; text-decoration: none; cursor: pointer; font-family: inherit; } /* The only cyan on the page. */ .btn-primary { background: rgb(var(--rift-accent)); color: rgb(var(--rift-on-accent)); border-color: rgb(var(--rift-accent)); } .btn-primary:hover { background: rgb(var(--rift-accent) / 0.88); border-color: rgb(var(--rift-accent) / 0.88); } .btn-secondary { background: rgb(var(--rift-surface)); color: rgb(var(--rift-primary)); border-color: rgb(var(--rift-border)); } .btn-secondary:hover { background: rgb(var(--rift-surface-secondary)); } .btn:disabled { opacity: 0.55; cursor: default; } /* ── Sections and cards ─────────────────────────────────────────────────────────────── */ .section { padding: clamp(2.5rem, 6vw, 4rem) 1.25rem; } .section h2 + .grid, .section h2 + .section-lede { margin-top: 1.5rem; } .section-lede { color: rgb(var(--rift-muted)); max-width: 60ch; } .grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 45rem) { .grid { grid-template-columns: 1fr 1fr; } } .card { background: rgb(var(--rift-surface)); border: 1px solid rgb(var(--rift-border)); border-radius: 0.75rem; padding: 1.5rem; } .card h3 + p { margin-top: 0.6rem; color: rgb(var(--rift-muted)); } /* The Mira card carries the Mira token on its leading edge. It is the one place the colour appears, it is decorative rather than text, so it is not carrying any contrast requirement it could fail. */ .grid .card:nth-child(2) { border-left: 1px solid rgb(var(--rift-mira)); } /* ── Screenshots ────────────────────────────────────────────────────────────────────── */ .shot { margin: 1.5rem 0 0; } .shot img { display: block; width: 100%; height: auto; border: 1px solid rgb(var(--rift-border)); border-radius: 0.75rem; background: rgb(var(--rift-surface)); } .shot figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: rgb(var(--rift-muted)); } /* ── Form ───────────────────────────────────────────────────────────────────────────── */ .form-card { max-width: 34rem; } .form-card h2 + p { margin-top: 0.75rem; color: rgb(var(--rift-muted)); } #waitlist-form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } #waitlist-form label { font-size: 0.875rem; font-weight: 500; } #waitlist-form input { width: 100%; background: rgb(var(--rift-background)); border: 1px solid rgb(var(--rift-border)); border-radius: 0.75rem; color: rgb(var(--rift-primary)); font: inherit; padding: 0.7rem 0.9rem; } #waitlist-form input::placeholder { color: rgb(var(--rift-muted)); } #waitlist-form button { margin-top: 0.5rem; } .field-help { font-size: 0.8125rem; color: rgb(var(--rift-muted)); } .form-status { font-size: 0.875rem; min-height: 1.25rem; } .form-status[data-state='ok'] { color: rgb(var(--rift-positive)); } .form-status[data-state='error'] { color: rgb(var(--rift-negative)); } /* ── Footer ─────────────────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid rgb(var(--rift-border)); margin-top: clamp(2rem, 6vw, 4rem); padding: 2.5rem 0 3rem; } .footer-inner { display: flex; flex-direction: column; gap: 1.25rem; } .footer-brand .wordmark { display: block; } .footer-brand p + p { margin-top: 0.25rem; font-size: 0.875rem; } .footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; } .footer-links a { font-size: 0.875rem; color: rgb(var(--rift-muted)); text-decoration: none; } .footer-links a:hover { color: rgb(var(--rift-primary)); } .attribution { font-size: 0.8125rem; color: rgb(var(--rift-muted)); max-width: 70ch; } .attribution a { color: rgb(var(--rift-muted)); } /* ── Legal pages ────────────────────────────────────────────────────────────────────── */ .prose { max-width: 42rem; padding-top: 3rem; padding-bottom: 3rem; } .prose h1 { margin-bottom: 0.5rem; } .prose h2 { margin-top: 2.25rem; font-size: 1.125rem; } .prose p, .prose li { color: rgb(var(--rift-muted)); } .prose h2 + p, .prose p + p, .prose ul { margin-top: 0.75rem; } .prose ul { padding-left: 1.25rem; } .prose li + li { margin-top: 0.35rem; } .prose .updated { font-size: 0.875rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }