/* ============================================================ Roamli Design Tokens — single source of truth Imported once in index.js; never duplicate :root elsewhere. To experiment with an alternative palette, copy the :root block below, rename it to a class (e.g. .theme-midnight), add that class to , and all tokens cascade automatically. ============================================================ */ /* ── Cozy Editorial (default) ────────────────────────────── */ :root { /* Colors — primary */ --rl-navy: #15233F; /* primary ink, on-yellow */ --rl-navy-2: #1E3158; /* secondary navy, sidebar upsell */ --rl-navy-3: #27406F; /* avatar fills, accent backgrounds */ --rl-navy-deep: #0F1A30; /* page hero bands, deepest layer */ /* Colors — accent */ --rl-yellow: #FFC93C; /* PRIMARY brand accent — one CTA per screen */ --rl-yellow-deep: #F2B311; /* button hover, shadow tint */ /* Colors — canvas */ --rl-cream: #FBF6EC; /* page background */ --rl-paper: #FFFFFF; /* cards, inputs */ --rl-paper-2: #F4F0E6; /* subtle fills, table rows, placeholders */ /* Colors — text */ --rl-muted: #69728A; /* secondary text, lede copy, labels */ --rl-muted-2: #9AA0B0; /* placeholder text */ /* Colors — semantic */ --rl-coral: #FF6A4A; /* eyebrows, urgency, danger, 1st-place rank */ --rl-mint: #2FB387; /* live status, success, cleared */ /* Borders */ --rl-line: rgba(21, 35, 63, 0.12); /* standard borders */ --rl-line-soft: rgba(21, 35, 63, 0.07); /* dividers, hairlines */ /* Typography */ --rl-display: 'Bricolage Grotesque', sans-serif; /* headlines, rank nums, wordmark */ --rl-ui: 'Plus Jakarta Sans', sans-serif; /* body, buttons, labels, nav */ --rl-mono: 'Space Mono', monospace; /* eyebrows, chips, data, kickers */ /* Elevation */ --rl-shadow-card: 0 30px 60px -24px rgba(15, 26, 48, 0.35); --rl-shadow-soft: 0 16px 40px -22px rgba(15, 26, 48, 0.30); /* Interaction */ --rl-tap-min: 44px; /* THE touch-target floor (Apple HIG) — don't mint per-file values */ /* FAQ help-center aliases (FAQ.css still consumes these) */ --faq-bg: var(--rl-cream); --faq-surface: var(--rl-paper); --faq-text: var(--rl-navy); --faq-text-secondary: var(--rl-muted); --faq-text-muted: var(--rl-muted-2); --faq-border-hover: rgba(21, 35, 63, 0.28); --faq-font: var(--rl-ui); --faq-radius-sm: 8px; --faq-radius: 12px; --faq-radius-lg: 16px; --faq-radius-xl: 24px; --faq-shadow-xs: 0 1px 2px rgba(15, 26, 48, 0.06); --faq-shadow-sm: 0 1px 3px rgba(15, 26, 48, 0.08), 0 1px 2px rgba(15, 26, 48, 0.04); --faq-shadow-xl: 0 24px 48px rgba(15, 26, 48, 0.12); --faq-transition: all 0.18s ease; } /* ── iOS zoom-on-focus guard (global) ───────────────────────── Below 16px, iOS Safari zooms the page when an input gains focus and often leaves it zoomed/offset afterwards. One global floor instead of per-surface patches: !important so it also beats higher-specificity per-component sizes and inline styles; max() preserves anything already larger. Scoped to phone/tablet-portrait widths where the zoom behavior applies. */ @media (max-width: 767px) { input, textarea, select { font-size: max(16px, 1em) !important; } } /* ============================================================ Alternative themes — swap in by adding a class to e.g. document.documentElement.className = 'theme-midnight' ============================================================ */ /* .theme-midnight { --rl-navy: #0D0D1A; --rl-navy-2: #14142B; --rl-navy-3: #1E1E3F; --rl-navy-deep: #060610; --rl-yellow: #7B61FF; --rl-yellow-deep: #6247E8; --rl-cream: #0F0F1E; --rl-paper: #16162A; --rl-paper-2: #1C1C35; --rl-muted: #8B8BA7; --rl-muted-2: #5E5E7A; --rl-coral: #FF4D6D; --rl-mint: #00D68F; --rl-line: rgba(255, 255, 255, 0.08); --rl-line-soft: rgba(255, 255, 255, 0.04); --rl-shadow-card: 0 30px 60px -24px rgba(0, 0, 0, 0.60); --rl-shadow-soft: 0 16px 40px -22px rgba(0, 0, 0, 0.50); } .theme-forest { --rl-navy: #1A2E1A; --rl-navy-2: #243824; --rl-navy-3: #2F4A2F; --rl-navy-deep: #0F1F0F; --rl-yellow: #F5C842; --rl-yellow-deep: #E0B230; --rl-cream: #F4F7EF; --rl-paper: #FFFFFF; --rl-paper-2: #EBF0E4; --rl-muted: #5A6B52; --rl-muted-2: #8A9E80; --rl-coral: #E8603C; --rl-mint: #2DA06B; --rl-line: rgba(26, 46, 26, 0.12); --rl-line-soft: rgba(26, 46, 26, 0.07); --rl-shadow-card: 0 30px 60px -24px rgba(15, 30, 15, 0.32); --rl-shadow-soft: 0 16px 40px -22px rgba(15, 30, 15, 0.26); } */ /* ============================================================ Roamli marketing site — shared chrome + primitives. scripts/build-marketing.js prepends src/styles/theme.css (the rl-* token :root) and appends marketing/styles/pages/*.css, emitting one build/marketing.css. Page-specific styles belong in styles/pages/.css with an mk-- class prefix. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--rl-cream); color: var(--rl-navy); font-family: var(--rl-ui); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; } /* ── Wordmark ── */ .rl-wordmark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--rl-display); font-weight: 700; font-size: 23px; letter-spacing: -0.03em; color: var(--rl-navy); text-decoration: none; } .rl-wordmark img { width: 28px; height: 28px; object-fit: contain; } /* ── Sticky nav ── */ .rl-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 40px; border-bottom: 1px solid var(--rl-line-soft); position: sticky; top: 0; background: rgba(251, 246, 236, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 20; } .rl-nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; font-family: var(--rl-ui); } /* :not(.rl-btn) — in the static nav "Get started" is an ; without the guard this rule's background/padding reset outranks .rl-btn-pri and strips the yellow pill (unlike the SPA nav, where it's a