/* * The waitlist's palette: every colour, font, size and shape the pages use. * waitlist.css reads only these --wl-* tokens, so restyling starts here. * * Each token points at a brand.css value. Prefer re-pointing a token at a * different brand value over typing a raw one; if nothing in brand.css fits, * that's a conversation about the brand, not a one-off here. */ :root { /* --- Surfaces ------------------------------------------------------------ */ --wl-page: var(--color-cream-100); --wl-surface: var(--color-cream-50); --wl-surface-sunk: var(--color-cream-200); --wl-border: color-mix(in srgb, var(--color-olive-950) 12%, transparent); --wl-field-border: color-mix(in srgb, var(--color-cream-400) 60%, transparent); /* --- Text ---------------------------------------------------------------- */ --wl-text: var(--color-olive-950); --wl-text-muted: var(--color-taupe-700); --wl-text-faint: var(--color-taupe-650); --wl-placeholder: var(--color-taupe-700); --wl-link: var(--color-olive-800); /* --- Actions ------------------------------------------------------------- */ --wl-action: color-mix(in srgb, var(--color-olive-950) 82%, transparent); --wl-action-hover: var(--color-olive-950); --wl-action-text: white; --wl-focus: var(--color-terracotta-500); /* --- Status -------------------------------------------------------------- */ --wl-error: var(--color-terracotta-600); --wl-founding: var(--color-gold-300); --wl-founding-soft: var(--color-gold-100); --wl-next-wave: var(--color-olive-500); --wl-next-wave-soft: color-mix(in srgb, var(--color-olive-500) 14%, transparent); /* --- Type ---------------------------------------------------------------- */ --wl-font-display: "Monarch Nova", "Instrument Serif", Georgia, serif; --wl-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --wl-font-mono: "IBM Plex Mono", ui-monospace, monospace; --wl-font-signature: "Nothing You Could Do", cursive; --wl-text-position: var(--text-heading-display); --wl-text-heading: var(--text-heading-h1); --wl-text-lede: var(--text-lede); --wl-text-body: var(--text-body); --wl-text-small: var(--text-sm-plus); --wl-text-eyebrow: var(--text-xs-plus); --wl-tracking-display: var(--tracking-display); --wl-tracking-eyebrow: var(--tracking-eyebrow); /* --- Shape and rhythm ---------------------------------------------------- */ --wl-radius-card: var(--radius-panel); --wl-radius-field: var(--radius-field); --wl-field-height: var(--spacing-field); --wl-field-inset: var(--spacing-field-inset); --wl-stack: var(--spacing-form-stack); --wl-shadow-card: var(--shadow-card); --wl-shadow-action: var(--shadow-cta); --wl-page-width: 34rem; --wl-gutter: 1rem; /* --- Landing ------------------------------------------------------------- */ /* The "Haido Coming Soon" design: frosted white glass over a warm glow. */ --wl-accent: var(--color-terracotta-700); --wl-text-soft: color-mix(in srgb, var(--color-ink-warm) 70%, transparent); --wl-text-warm: color-mix(in srgb, var(--color-ink-warm) 78%, transparent); --wl-text-faint-warm: color-mix(in srgb, var(--color-ink-warm) 60%, transparent); --wl-text-chat: color-mix(in srgb, var(--color-taupe-700) 82%, transparent); --wl-chat-tag: color-mix(in srgb, var(--color-olive-900) 75%, transparent); --wl-glow-coral: var(--color-terracotta-300); /* Soft warm shadow under the referral blobs and the queue bar's "you" marker. */ --wl-blob-shadow: var(--color-ink-warm); /* The queue bar's Founding 1,000 stretch, and the deeper coral it uses where it can't multiply into the glow (the landing page). */ --wl-queue-founding: var(--color-terracotta-300); --wl-queue-founding-deep: color-mix(in srgb, var(--color-terracotta-300) 75%, var(--color-terracotta-700)); --wl-queue-label: color-mix(in srgb, white 50%, transparent); --wl-glow-amber: var(--color-gold-200); /* The blob trail: a green head with a soft halo, and the amber and coral blobs it gathers on the way down. Each fades from a deep core outwards. */ --wl-blob-head-core: var(--color-olive-900); --wl-blob-head-mid: color-mix(in srgb, var(--color-olive-800) 95%, transparent); --wl-blob-head-edge: color-mix(in srgb, var(--color-olive-500) 55%, transparent); --wl-blob-halo-core: color-mix(in srgb, var(--color-olive-900) 42%, transparent); --wl-blob-halo-mid: color-mix(in srgb, var(--color-olive-800) 22%, transparent); --wl-blob-halo-edge: color-mix(in srgb, var(--color-olive-800) 8%, transparent); --wl-blob-amber-core: color-mix(in srgb, var(--color-gold-400) 75%, var(--color-ink-warm)); --wl-blob-amber-mid: color-mix(in srgb, var(--color-gold-400) 95%, transparent); --wl-blob-amber-edge: color-mix(in srgb, var(--color-gold-300) 55%, transparent); --wl-blob-coral-core: var(--color-terracotta-600); --wl-blob-coral-mid: color-mix(in srgb, color-mix(in srgb, var(--color-terracotta-600) 50%, var(--color-terracotta-300)) 95%, transparent); --wl-blob-coral-edge: color-mix(in srgb, var(--color-terracotta-300) 55%, transparent); --wl-glass-faint: color-mix(in srgb, white 22%, transparent); --wl-glass-soft: color-mix(in srgb, white 34%, transparent); --wl-glass: color-mix(in srgb, white 42%, transparent); --wl-glass-strong: color-mix(in srgb, white 55%, transparent); --wl-glass-edge-soft: color-mix(in srgb, white 45%, transparent); --wl-glass-edge: color-mix(in srgb, white 72%, transparent); --wl-glass-highlight: inset 0 1px 0 color-mix(in srgb, white 85%, transparent); --wl-shadow-glass: var(--shadow-glass); --wl-action-edge: color-mix(in srgb, var(--color-olive-700) 50%, transparent); /* Persona portraits: a warm duotone, deep clay in the shadows (the design's #7e3a26) and coral softened with cream for the highlights (#f2c4a8). */ --wl-photo-shadow: var(--color-terracotta-800); --wl-photo-tint: color-mix(in srgb, var(--color-terracotta-300) 50%, var(--color-cream-200)); --wl-shadow-photo: 0 8px 20px -12px color-mix(in srgb, var(--color-olive-950) 50%, transparent); /* How the waitlist works: warm amber dots on an amber line (the design's #f5cf8e, amber lifted with white). */ --wl-milestone: color-mix(in srgb, var(--color-gold-200) 70%, white); --wl-timeline-shadow: drop-shadow(0 1px 3px color-mix(in srgb, var(--color-olive-950) 22%, transparent)); /* The waitlist timeline: frosted cards, the open one brighter, and the white "waitlist window" line with a soft ring round its dots. */ --wl-glass-card: color-mix(in srgb, white 20%, transparent); --wl-glass-card-edge: color-mix(in srgb, white 55%, transparent); --wl-glass-card-active: color-mix(in srgb, white 62%, transparent); --wl-glass-card-active-edge: color-mix(in srgb, white 90%, transparent); --wl-window: color-mix(in srgb, white 95%, transparent); --wl-window-ring: 0 0 0 4px color-mix(in srgb, white 40%, transparent), 0 2px 6px color-mix(in srgb, var(--color-ink-warm) 18%, transparent); --wl-bullet: color-mix(in srgb, var(--color-olive-950) 45%, transparent); /* After joining: the glass circle that holds someone's place. Its inner glow is the design's warm rgba(200,120,56,.25), taken from terracotta-400. */ --wl-shadow-place: inset 0 1px 0 color-mix(in srgb, white 90%, transparent), inset 0 -18px 40px -24px color-mix(in srgb, var(--color-terracotta-400) 45%, transparent), 0 30px 60px -36px color-mix(in srgb, var(--color-olive-950) 35%, transparent); --wl-text-hero: clamp(45px, 8vw, 96px); --wl-text-logo-mobile: 2.25rem; /* 36px: the logo at the top on phones */ --wl-text-intro: clamp(48px, 8vw, 104px); --wl-text-signature: clamp(26px, 3vw, 32px); --wl-text-pitch: clamp(16px, 1.9vw, 21px); --wl-text-lead-in: clamp(15px, 1.6vw, 18px); --wl-text-lead-in-title: clamp(22px, 2.6vw, 30px); --wl-text-queue-title: clamp(19px, 2.1vw, 23px); /* the queue bar's group names */ --wl-text-label: 0.75rem; /* 12px: section labels and mono notes */ --wl-text-mono: 0.84375rem; /* 13.5px: card copy */ --wl-text-field: 0.875rem; /* 14px */ --wl-text-field-lg: var(--text-base-plus); --wl-text-bubble: var(--text-lede-small); --wl-text-tag: var(--text-date-label); --wl-text-logo-small: 1.375rem; /* 22px: footer wordmark */ --wl-text-place: clamp(52px, 9vw, 92px); /* The pill naming someone's group on the position page, and the one asking them to verify on the check-email page. */ --wl-status: color-mix(in srgb, var(--color-olive-800) 14%, transparent); --wl-status-text: var(--color-olive-900); --wl-text-place-lead: clamp(11px, 1.2vw, 14px); --wl-text-subtitle: 1.625rem; /* 26px: "Refer a friend" */ --wl-text-chip: 0.78125rem; /* 12.5px */ --wl-tracking-tight: -0.02em; --wl-radius-pill: 100px; --wl-radius-bubble: 18px; --wl-radius-glass: 22px; --wl-content-width: 1160px; }