/* ============================================================ Resparo — Colors & Type Source of truth for tokens used across landing + dashboard. ============================================================ */ /* Webfonts via Fontshare (Satoshi) + Google (Fraunces). */ @import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap"); :root { /* ---------- Brand palette --------------------------------- */ --pine: #135E48; /* primary brand — buttons, links, hero accent */ --pine-2: #0F4F3C; /* hover / pressed */ --pine-3: #0B3E30; /* deepest pine — footer, panels */ --sage: #1F8C6D; /* success, "live" indicators, secondary accent */ --sage-light: #5DCAA5; /* sage on dark backgrounds */ --moss: #C5E4D6; /* soft tint — chips, icon backgrounds */ --paper: #F2EFE6; /* main canvas — warm off-white */ --paper-2: #E9E5D9; /* one tone darker — alt sections */ --paper-3: #FAF8F1; /* one tone lighter — cards on paper */ --ink: #131814; /* primary text */ --ink-2: #2B302C; /* body text */ --ash: #5C5F57; /* muted text, meta */ --ash-2: #9A9C93; /* disabled, faintest text */ --rule: rgba(19, 24, 20, 0.14); /* hairline */ --rule-strong: rgba(19, 24, 20, 0.25); /* slightly stronger hairline */ --gold: #B0823A; /* star fills */ --amber-bg: #F6EBD3; /* 1-star workflow band */ --amber-line: #D4B66D; --amber-ink: #6E5119; /* ---------- Semantic colors -------------------------------- */ --bg: var(--paper); --bg-alt: var(--paper-2); --surface: var(--paper-3); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--ash); --fg-faint: var(--ash-2); --border: var(--rule); --border-strong: var(--rule-strong); --accent: var(--pine); --accent-hover: var(--pine-2); --success: var(--sage); --warning: var(--gold); --warning-bg: var(--amber-bg); /* ---------- Type families --------------------------------- */ --font-sans: "Satoshi", "Söhne", "Helvetica Neue", system-ui, sans-serif; --font-quote: "Fraunces", "Times New Roman", Georgia, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- Layout ---------------------------------------- */ --max: 1220px; --gutter: 24px; /* ---------- Spacing scale --------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-26: 104px; /* section vertical padding */ /* ---------- Radii ----------------------------------------- */ --radius-xs: 5px; /* tiny pills, chips */ --radius-sm: 7px; /* buttons, small icons */ --radius-md: 9px; /* primary buttons, inputs */ --radius-lg: 12px; /* cards */ --radius-xl: 14px; /* large cards, plans */ --radius-pill: 100px; /* ---------- Shadows / elevation --------------------------- */ /* Resparo elevation is QUIET — rely on hairline borders + subtle layered shadows. */ --shadow-hairline: inset 0 0 0 0.5px var(--rule); --shadow-1: 0 1px 0 rgba(19,24,20,0.08); --shadow-2: 0 24px 48px -28px rgba(19,24,20,0.25); --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 0.5px var(--rule), 0 30px 60px -30px rgba(19,24,20,0.22), 0 60px 120px -40px rgba(19,94,72,0.14); --shadow-primary: inset 0 0 0 0.5px rgba(255,255,255,0.12), 0 1px 0 rgba(19,24,20,0.08), 0 8px 24px -12px rgba(19,94,72,0.5); --shadow-primary-hover: inset 0 0 0 0.5px rgba(255,255,255,0.16), 0 2px 0 rgba(19,24,20,0.1), 0 14px 28px -14px rgba(19,94,72,0.55); /* ---------- Motion ---------------------------------------- */ --ease-out: cubic-bezier(.2, .7, .2, 1); --dur-fast: 180ms; --dur-base: 220ms; --dur-slow: 340ms; --dur-reveal: 800ms; } /* ============================================================ Base typography Sizes mirror the landing page so dashboard and marketing align. ============================================================ */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; letter-spacing: -0.005em; } /* ---- Semantic type roles ----------------------------------- */ .display { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; color: var(--ink); } .display .accent { color: var(--pine); } h1, .h1 { font-family: var(--font-sans); font-weight: 700; font-size: clamp(34px, 5.2vw, 62px); line-height: 1.05; letter-spacing: -0.035em; color: var(--ink); margin: 0; } h2, .h2 { font-family: var(--font-sans); font-weight: 700; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); margin: 0; } h3, .h3 { font-family: var(--font-sans); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; color: var(--ink); margin: 0; } h4, .h4 { font-family: var(--font-sans); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .lead { font-size: 20px; line-height: 1.6; color: var(--ink-2); letter-spacing: -0.005em; font-weight: 400; } p, .body { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0; } .small { font-size: 14px; color: var(--ash); } .eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pine); } .meta { /* tiny all-caps meta line under reviews etc. */ font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); } .quote { /* Fraunces italic — pain quotes, reviews-in-context */ font-family: var(--font-quote); font-style: italic; font-weight: 400; color: var(--ink); line-height: 1.5; } code, .mono { font-family: var(--font-mono); font-size: 0.92em; }