/* Rowcall marketing site — hand-written CSS on the app's design tokens. Static (no build step). Dark mode is class-driven (html.dark) exactly like the app: a light/dark/system toggle persisted in localStorage, with system resolved by the inline script in each page's . */ :root { --surface: oklch(0.985 0.002 247); --surface-raised: oklch(1 0 0); --surface-sunken: oklch(0.96 0.003 247); --ink: oklch(0.21 0.03 257); --ink-muted: oklch(0.55 0.02 257); --ink-faint: oklch(0.7 0.015 257); --edge: oklch(0.91 0.005 247); --edge-strong: oklch(0.84 0.008 247); --accent: oklch(0.5 0.18 260); --accent-fg: oklch(0.99 0 0); --accent-soft: oklch(0.94 0.03 260); --success: oklch(0.6 0.14 155); --success-soft: oklch(0.94 0.05 155); } html.dark { --surface: oklch(0.19 0.02 257); --surface-raised: oklch(0.23 0.02 257); --surface-sunken: oklch(0.16 0.02 257); --ink: oklch(0.93 0.005 247); --ink-muted: oklch(0.68 0.015 257); --ink-faint: oklch(0.52 0.015 257); --edge: oklch(0.32 0.02 257); --edge-strong: oklch(0.42 0.02 257); --accent: oklch(0.68 0.15 260); --accent-fg: oklch(0.15 0.02 257); --accent-soft: oklch(0.3 0.06 260); --success: oklch(0.7 0.13 155); --success-soft: oklch(0.3 0.05 155); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--surface); color: var(--ink); line-height: 1.6; } .container { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; } a { color: var(--accent); } /* Header */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--edge); } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; } /* 2rem = the icon's native 32px grid at 1:1 (and 2x on retina) — non-integer scales make the crispEdges pixel art render unevenly. */ .brand img { width: 2rem; height: 2rem; } .site-nav { display: flex; align-items: center; gap: 1.25rem; font-size: 0.9rem; } /* :not(.btn) — otherwise this outranks .btn-accent and greys out button text */ .site-nav a:not(.btn) { color: var(--ink-muted); text-decoration: none; } .site-nav a:not(.btn):hover { color: var(--ink); } /* Narrow screens: drop the in-page section links (Features/Pricing/FAQ), keep Log in / Get started / theme toggle. */ @media (max-width: 40rem) { .site-nav a[href^="#"] { display: none; } } /* Buttons — mirror the app's Button component (md size): h-8, px-3, text-sm, font-medium, rounded-md, inline-flex centered, leading-none; outline + solid-accent variants. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 2rem; padding: 0 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; line-height: 1; text-decoration: none; border: 1px solid var(--edge); color: var(--ink); background: var(--surface-raised); transition: background-color 0.15s, color 0.15s, opacity 0.15s; cursor: pointer; font-family: inherit; } .btn:hover { background: var(--surface-sunken); } .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn-accent:hover { opacity: 0.9; background: var(--accent); } /* Marketing-only larger CTA (the app has no lg size). */ .btn-lg { height: 2.75rem; padding: 0 1.25rem; font-size: 1rem; } /* Square icon button — mirrors the app's IconButton (h-8 w-8). */ .theme-toggle { width: 2rem; padding: 0; color: var(--ink-muted); } .theme-toggle:hover { color: var(--ink); } .theme-toggle svg { display: block; } /* Hero */ .hero { padding: 4rem 0; text-align: center; } .hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.15; letter-spacing: -0.02em; } .hero p.lead { margin: 1rem auto 2rem; max-width: 38rem; color: var(--ink-muted); font-size: 1.15rem; } .hero .cta-row { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* Rows mock */ .mock { margin: 2rem auto 0; max-width: 44rem; text-align: left; display: grid; gap: 0.75rem; } .mock-row { display: flex; align-items: center; gap: 0.75rem; background: var(--surface-raised); border: 1px solid var(--edge); border-radius: 0.5rem; padding: 0.7rem 0.9rem; font-size: 0.85rem; } .mock-check { width: 1.15rem; height: 1.15rem; border-radius: 0.25rem; flex: none; border: 2px solid var(--edge-strong); display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; line-height: 1; /* interactive (a real