/* ============================================================================ * job-hunter design system * * Principles: clarity over decoration, one type scale, one spacing scale, * contrast-verified colour, 44px touch targets, motion only where it explains * something. No webfonts and no third-party CSS/JS — the whole stylesheet is * ~20 kB and paints on first byte. * * Greys/semantics use a contrast-tested ramp (all body text ≥ 4.5:1 on its * background, all large text ≥ 3:1 — WCAG 2.2 AA). * ========================================================================== */ /* ------------------------------------------------------------- 1. tokens -- */ :root { /* Type scale — 1.25 ratio, capped for display sizes. */ --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 16px; --t-lg: 18px; --t-xl: 21px; --t-2xl: 26px; --t-3xl: 32px; --t-4xl: clamp(30px, 4.4vw, 40px); --t-5xl: clamp(34px, 5.6vw, 54px); /* Spacing — 4px grid. Every margin/padding in this file uses these. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; /* Neutrals (contrast on --bg): ink 16.1:1 · ink-2 10.4:1 · muted 7.9:1 · muted-2 5.3:1 — every one passes AA for body text. */ --bg: #fcfcfd; --bg-subtle: #f2f4f7; --surface: #ffffff; --surface-2: #f9fafb; --ink: #101828; --ink-2: #344054; --muted: #475467; --muted-2: #667085; --line: #eaecf0; --line-strong: #d0d5dd; /* Brand — white text on --brand is 8.2:1. */ --brand: #4338ca; --brand-hover: #3730a3; --brand-ink: #3730a3; --brand-soft: #eef2ff; --brand-line: #c7d7fe; /* Semantics — text colours verified ≥ 4.5:1 on their soft background. */ --good: #067647; --good-soft: #ecfdf3; --good-line: #abefc6; --warn: #b54708; --warn-soft: #fffaeb; --warn-line: #fedf89; --bad: #b42318; --bad-soft: #fef3f2; --bad-line: #fecdca; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; --sh-xs: 0 1px 2px rgba(16, 24, 40, .05); --sh-sm: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06); --sh-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06); --sh-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03); --sh-xl: 0 24px 48px -12px rgba(16, 24, 40, .18); --maxw: 1120px; --maxw-text: 720px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.4, 0, .2, 1); } /* Dark theme follows the system — EXCEPT on pages that pin themselves light with (landing, login, legal): marketing pages must look the same for every visitor, whatever their OS is set to. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0c111d; --bg-subtle: #1f242f; --surface: #101828; --surface-2: #182230; --ink: #f5f6f8; --ink-2: #e3e6ea; --muted: #98a2b3; --muted-2: #85909e; --line: #1f242f; --line-strong: #333741; /* Dark-mode brand must stay dark enough for WHITE button text (6.3:1) while remaining distinguishable from the page (3.0:1 — WCAG 1.4.11). Lighter indigos looked nicer but failed white-on-brand at 4.0:1. */ --brand: #5a52ec; --brand-hover: #6a63ef; --brand-ink: #a4bcfd; --brand-soft: #1a1f37; --brand-line: #2d3282; --good: #75e0a7; --good-soft: #0a2822; --good-line: #085d3a; --warn: #fec84b; --warn-soft: #2b1c11; --warn-line: #93370d; --bad: #fda29b; --bad-soft: #2b1413; --bad-line: #912018; --sh-xs: 0 1px 2px rgba(0, 0, 0, .35); --sh-sm: 0 1px 3px rgba(0, 0, 0, .45); --sh-md: 0 4px 8px -2px rgba(0, 0, 0, .45); --sh-lg: 0 12px 16px -4px rgba(0, 0, 0, .5); --sh-xl: 0 24px 48px -12px rgba(0, 0, 0, .7); } } /* --------------------------------------------------------------- 2. base -- */ *, *::before, *::after { box-sizing: border-box; } /* Native widgets (scrollbars, form controls) follow the same rule as the tokens: system theme everywhere, forced light on pinned pages. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; /* full-bleed sections are 100vw wide; clip the scrollbar-width overshoot */ overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Only real weights — a system stack has no 540/620/680. */ h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.022em; line-height: 1.2; color: var(--ink); } h1 { letter-spacing: -0.032em; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg, video { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; } strong, b { font-weight: 600; } small { font-size: var(--t-sm); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: var(--brand-soft); color: var(--brand-ink); } .skip-link { position: absolute; left: var(--s4); top: -60px; z-index: 100; background: var(--surface); color: var(--ink); padding: var(--s3) var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line-strong); box-shadow: var(--sh-md); font-weight: 600; transition: top .15s var(--ease); } .skip-link:focus { top: var(--s4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------- 3. shell -- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .site-header__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--s3) var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } .brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--t-md); letter-spacing: -0.02em; padding: var(--s2) var(--s1); border-radius: var(--r-sm); } /* The mark is an inline carrying its own gradient — sized here only. */ .brand__mark { width: 26px; height: 26px; flex: none; display: block; border-radius: 7px; /* clips antialiasing on the rounded corners */ } .nav { display: flex; align-items: center; gap: var(--s1); } .nav a, .nav button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s3); border-radius: var(--r-sm); font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease); } .nav a:hover, .nav button:hover { color: var(--ink); background: var(--bg-subtle); } .nav a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--bg-subtle); } .nav .btn { min-height: 40px; } @media (max-width: 520px) { .nav .nav-hide-sm { display: none; } .site-header__inner { padding: var(--s3) var(--s4); } } main { max-width: var(--maxw); margin: 0 auto; padding: var(--s8) var(--s5) var(--s20); } main.narrow { max-width: 800px; } main.flush { padding-top: 0; } .site-footer { border-top: 1px solid var(--line); background: var(--surface-2); } .site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--s6) var(--s5) var(--s10); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); align-items: center; font-size: var(--t-sm); color: var(--muted-2); } .site-footer a { padding: var(--s2) 0; } .site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } /* --------------------------------------------------------- 4. components -- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); box-shadow: var(--sh-xs); } .card-hover { transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); } .card-hover:hover { border-color: var(--line-strong); box-shadow: var(--sh-md); } /* Buttons: 44px default height (comfortable on touch), real font weights. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s5); border-radius: var(--r-sm); border: 1px solid transparent; font: inherit; font-size: var(--t-base); font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--sh-xs); } .btn-primary:hover:not(:disabled) { background: var(--brand-hover); } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-xs); } .btn-secondary:hover:not(:disabled) { background: var(--bg-subtle); } .btn-ghost { background: transparent; color: var(--muted); } .btn-ghost:hover:not(:disabled) { background: var(--bg-subtle); color: var(--ink); } .btn-danger { background: var(--bad); color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-danger { color: #2b1413; } } .btn-danger:hover:not(:disabled) { filter: brightness(1.08); } .btn-lg { min-height: 52px; padding: 0 var(--s6); font-size: var(--t-md); border-radius: var(--r); } .btn-sm { min-height: 36px; padding: 0 var(--s3); font-size: var(--t-sm); } .btn-block { width: 100%; } /* Forms */ .field { display: block; } .field + .field { margin-top: var(--s4); } .field > .label, label > .label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin-bottom: var(--s2); } .hint { display: block; font-size: var(--t-xs); color: var(--muted-2); margin-top: var(--s2); line-height: 1.5; } input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input:not([type]), select, textarea { width: 100%; min-height: 44px; font: inherit; font-size: var(--t-base); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--s3); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } textarea { min-height: 96px; line-height: 1.6; padding: var(--s3); resize: vertical; } input::placeholder, textarea::placeholder { color: var(--muted-2); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } input[aria-invalid="true"] { border-color: var(--bad); } label { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); } label > input, label > select, label > textarea { margin-top: var(--s2); font-weight: 400; } input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--brand); cursor: pointer; } input[type="file"] { border: 1.5px dashed var(--line-strong); background: var(--surface-2); padding: var(--s5); cursor: pointer; min-height: 0; } input[type="file"]:hover { border-color: var(--brand); background: var(--brand-soft); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--s10); } /* Chips + notes */ .chip { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3); border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .chip-pending { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); } .chip-applied { background: var(--good-soft); color: var(--good); border-color: var(--good-line); } .chip-neutral { background: var(--bg-subtle); color: var(--muted); border-color: var(--line); } .chip-bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); } .chip-brand { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); } .note { border-radius: var(--r-sm); padding: var(--s3) var(--s4); font-size: var(--t-sm); line-height: 1.55; border: 1px solid transparent; } .note-good { background: var(--good-soft); color: var(--good); border-color: var(--good-line); } .note-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); } .note-bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); } .note-info { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); } .note strong, .note b { color: inherit; } /* Progress meter */ .meter { height: 6px; border-radius: var(--r-full); background: var(--bg-subtle); overflow: hidden; } .meter > span { display: block; height: 100%; border-radius: var(--r-full); background: var(--good); transition: width .4s var(--ease); } .meter-brand > span { background: var(--brand); } /* Loading */ @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; } @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } } .pulsing { animation: pulse 1.8s var(--ease) infinite; } /* Empty state */ .empty { text-align: center; padding: var(--s16) var(--s6); } .empty__icon { width: 48px; height: 48px; margin: 0 auto var(--s4); border-radius: var(--r); background: var(--bg-subtle); display: grid; place-items: center; font-size: 22px; } .empty h2 { font-size: var(--t-lg); margin-bottom: var(--s2); } .empty p { color: var(--muted); max-width: 46ch; margin: 0 auto; font-size: var(--t-base); } .section-title { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); } .page-head { margin-bottom: var(--s6); } .page-head h1 { font-size: var(--t-2xl); } .page-head p { color: var(--muted); font-size: var(--t-base); margin-top: var(--s2); } /* Filter tabs (server-rendered links, no JS) */ .tabs { display: flex; gap: var(--s1); padding: var(--s1); background: var(--bg-subtle); border-radius: var(--r-sm); } .tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4); border-radius: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--muted); transition: background .15s var(--ease), color .15s var(--ease); } .tabs a:hover { color: var(--ink); } .tabs a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-xs); } /* Shareable invite link (admin) — the manual path when email isn't configured. */ .invite-share { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); } .invite-share__row { display: flex; gap: var(--s2); margin-top: var(--s2); } .invite-share__url { flex: 1; min-width: 0; min-height: 36px; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 var(--s3); } @media (max-width: 560px) { .invite-share__row { flex-direction: column; } } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; } details > summary { cursor: pointer; } details > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } code { font-family: var(--mono); font-size: .9em; background: var(--bg-subtle); padding: 2px 5px; border-radius: 5px; } pre { font-family: var(--mono); font-size: var(--t-sm); line-height: 1.6; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s4); overflow-x: auto; margin: 0; } /* ---------------------------------------------------------- 5. job cards -- */ .job { display: block; } .job__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); } .job__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); } a.job__title:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; } .job__org { font-size: var(--t-base); color: var(--muted); margin-top: 2px; } .job__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s3); font-size: var(--t-sm); color: var(--muted); } .job__meta .stat { display: inline-flex; align-items: center; gap: var(--s2); } .job__meta .stat b { color: var(--ink-2); font-weight: 600; } .job__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } @media (max-width: 560px) { .job__actions { flex-direction: column; align-items: stretch; } .job__actions form, .job__actions .btn { width: 100%; } } /* ------------------------------------------------------------ 6. landing -- */ /* Full-bleed bands inside the centered
. */ .full-bleed { width: 100vw; margin-left: calc(50% - 50vw); } .container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--s5); padding-right: var(--s5); } /* Hero backdrop: two soft colour washes on white — light, airy, unmistakably a consumer product. Hard-coded light tints are fine: the landing pins itself light via data-theme. */ .hero-wrap { background: radial-gradient(56% 68% at 16% 0%, #e5e9ff 0%, transparent 72%), radial-gradient(46% 60% at 88% 4%, #fbe9f7 0%, transparent 70%), var(--bg); border-bottom: 1px solid var(--line); } .grad-text { background: linear-gradient(96deg, var(--brand) 20%, #7e22ce 85%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero { padding: var(--s16) 0 var(--s12); } .hero .cta-note { margin-top: var(--s3); font-size: var(--t-sm); color: var(--muted-2); } .hero .cta-note a { text-decoration: underline; text-underline-offset: 2px; color: var(--brand-ink); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); align-items: center; } @media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s10); } .hero { padding: var(--s10) 0 var(--s8); } } .hero h1 { font-size: var(--t-5xl); line-height: 1.05; } .hero .lede { margin-top: var(--s5); font-size: var(--t-lg); line-height: 1.55; color: var(--muted); max-width: 46ch; } .hero .cta-row { margin-top: var(--s6); display: flex; gap: var(--s3); flex-wrap: wrap; } @media (max-width: 480px) { .hero .cta-row .btn { width: 100%; } } .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3) var(--s1) var(--s2); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-xs); font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s5); } .eyebrow b { color: var(--ink); font-weight: 600; } .eyebrow .dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--good); flex: none; } .trust-strip { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s5); font-size: var(--t-sm); color: var(--muted); } .trust-strip span { display: inline-flex; align-items: center; gap: var(--s2); } .trust-strip svg { flex: none; color: var(--good); } /* Product mock */ .mock { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-xl); overflow: hidden; } .mock__bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-2); } .mock__bar i { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--line-strong); } .mock__bar span { margin-left: var(--s2); font-size: var(--t-xs); color: var(--muted-2); font-weight: 500; } .mock__body { padding: var(--s4); display: grid; gap: var(--s3); } .mock__job { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s4); } .mock__diff { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; font-size: var(--t-sm); } .mock__diff div { padding: var(--s3) var(--s4); display: flex; gap: var(--s3); align-items: baseline; } .mock__diff .del { background: var(--bad-soft); color: var(--bad); } .mock__diff .add { background: var(--good-soft); color: var(--good); border-top: 1px solid var(--line); } .mock__diff .tag { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; flex: none; opacity: .75; } /* Hero visual: the product shot plus floating proof chips (Simplify-style depth, but every number on them is a real product behaviour). */ .hero__visual { position: relative; } .float-chip { position: absolute; display: inline-flex; align-items: center; gap: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); padding: var(--s2) var(--s4); min-height: 44px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; } .float-chip .big { font-size: var(--t-lg); font-weight: 700; color: var(--good); } .float-chip--tr { top: -16px; right: -8px; transform: rotate(2deg); } .float-chip--bl { bottom: -16px; left: -8px; transform: rotate(-2deg); } @keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } } @media (prefers-reduced-motion: no-preference) { .float-chip--tr { animation: floaty 5.5s var(--ease) infinite; } .float-chip--bl { animation: floaty 6.5s var(--ease) 1.4s infinite; } } @media (max-width: 940px) { .float-chip { display: none; } } /* "Fills the forms employers actually use" — the honest version of a logo bar: ATS systems we fill are a product fact, not a borrowed endorsement. */ .ats-strip { padding: var(--s6) 0 var(--s10); text-align: center; } .ats-strip .label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--s4); } .ats-strip ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3); } .ats-strip li { padding: var(--s2) var(--s4); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-xs); font-size: var(--t-sm); font-weight: 600; color: var(--muted); } /* Honest numbers band — product facts, not invented user counts. */ .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); text-align: center; } @media (max-width: 640px) { .stats { grid-template-columns: 1fr; gap: var(--s10); } } .stats b { display: block; font-size: var(--t-5xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .stats span { display: block; margin-top: var(--s3); color: var(--muted); font-size: var(--t-base); max-width: 30ch; margin-left: auto; margin-right: auto; } /* Step number badge for the flow rows. */ .flow__num { width: 40px; height: 40px; border-radius: var(--r-full); margin-bottom: var(--s4); background: linear-gradient(135deg, var(--brand), #7e22ce); color: #fff; display: grid; place-items: center; font-size: var(--t-lg); font-weight: 700; box-shadow: var(--sh-md); } /* Invite request form — asking for access must never need a mail client. */ .invite-form { display: flex; gap: var(--s3); margin-top: var(--s6); } .invite-form input[type="email"] { flex: 1; min-width: 0; } .invite-form .btn { flex: none; } @media (max-width: 560px) { .invite-form { flex-direction: column; } .invite-form .btn { width: 100%; } } /* Honeypot: off-screen for humans, irresistible to bots. Not display:none — some bots skip hidden fields, and this keeps it out of the tab order either way. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Founder note — the honest substitute for a testimonial wall at zero users. */ .founder { max-width: 44ch; margin: 0 auto; text-align: center; font-size: var(--t-xl); line-height: 1.5; color: var(--ink-2); font-weight: 500; letter-spacing: -0.01em; } .founder::before { content: "“"; display: block; font-size: 64px; line-height: .55; color: var(--brand); font-weight: 700; margin-bottom: var(--s3); } /* Closing CTA: rounded gradient panel (the one loud moment on the page). */ .cta-band { background: linear-gradient(115deg, #4338ca 0%, #5b21b6 100%); color: #fff; text-align: center; border-radius: var(--r-xl); padding: var(--s20) var(--s6); margin-top: var(--s20); box-shadow: var(--sh-xl); } .cta-band h2 { color: #fff; font-size: var(--t-4xl); } .cta-band > p { margin: var(--s3) auto 0; max-width: 52ch; color: rgba(255, 255, 255, .88); font-size: var(--t-lg); } .cta-band .hint { color: rgba(255, 255, 255, .82); font-size: var(--t-sm); } .btn-inverse { background: #fff; color: var(--brand-ink); } .btn-inverse:hover:not(:disabled) { background: #eef2ff; } /* --- Product shots: real UI, drawn in CSS. Crisper than screenshots, themed automatically, and they can never fall out of date with the product. ----- */ .shot { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-xl); overflow: hidden; } .shot__bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-2); } .shot__bar i { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--line-strong); flex: none; } .shot__bar span { margin-left: var(--s2); font-size: var(--t-xs); color: var(--muted-2); font-weight: 500; } .shot__body { padding: var(--s4); display: grid; gap: var(--s3); } .row-item { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s4); display: flex; justify-content: space-between; gap: var(--s3); align-items: flex-start; } .row-item__t { font-weight: 600; font-size: var(--t-base); } .row-item__s { color: var(--muted); font-size: var(--t-sm); margin-top: 2px; } .diff { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .diff div { padding: var(--s3) var(--s4); display: flex; gap: var(--s3); align-items: baseline; font-size: var(--t-sm); line-height: 1.5; } .diff .del { background: var(--bad-soft); color: var(--bad); } .diff .add { background: var(--good-soft); color: var(--good); border-top: 1px solid var(--line); } .diff .tag { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; flex: none; opacity: .8; min-width: 30px; } /* Filled-form checklist */ .check { display: grid; gap: var(--s2); } .check div { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sm); } .check .ok, .check .todo { width: 18px; height: 18px; border-radius: var(--r-full); flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; } .check .ok { background: var(--good-soft); color: var(--good); border: 1px solid var(--good-line); } .check .todo { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); } .check .val { color: var(--muted); margin-left: auto; font-size: var(--t-xs); } /* Alternating feature rows — the visual carries the message, copy stays short. */ .flow { display: grid; gap: var(--s24); } .flow__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s12); align-items: center; } .flow__row:nth-child(even) .flow__text { order: 2; } .flow__row h3 { font-size: var(--t-3xl); letter-spacing: -0.025em; } .flow__row p { margin-top: var(--s3); color: var(--muted); font-size: var(--t-lg); line-height: 1.5; max-width: 34ch; } @media (max-width: 900px) { .flow { gap: var(--s16); } .flow__row { grid-template-columns: 1fr; gap: var(--s6); } .flow__row:nth-child(even) .flow__text { order: 0; } .flow__row h3 { font-size: var(--t-2xl); } .flow__row p { font-size: var(--t-md); } } /* Bento grid — dense, visual, low word-count. */ .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } .bento > * { padding: var(--s5); } .bento .wide { grid-column: span 2; } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento .wide { grid-column: span 2; } } @media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .bento .wide { grid-column: span 1; } } .tile__ico { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-size: 18px; margin-bottom: var(--s3); } /* Landing-only colour variants (the landing pins itself light). */ .tile__ico--green { background: var(--good-soft); } .tile__ico--amber { background: var(--warn-soft); } .tile__ico--sky { background: #e0f2fe; } .tile__ico--rose { background: #fce7f3; } .tile h3 { font-size: var(--t-md); margin-bottom: var(--s1); } .tile p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; } /* Testimonials — rendered only when REAL ones exist (see server/testimonials.py). */ .quote { display: flex; flex-direction: column; gap: var(--s4); } .quote blockquote { margin: 0; font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); } .quote figcaption { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-sm); } .quote .avatar { width: 36px; height: 36px; border-radius: var(--r-full); flex: none; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-size: var(--t-sm); } .quote .who { font-weight: 600; color: var(--ink); } .quote .role { color: var(--muted-2); } section.band { padding: var(--s20) 0; border-top: 1px solid var(--line); } .band-head { max-width: 60ch; margin-bottom: var(--s10); } .band-head h2 { font-size: var(--t-4xl); } .band-head p { margin-top: var(--s3); color: var(--muted); font-size: var(--t-lg); line-height: 1.55; } .band-head.center { margin-left: auto; margin-right: auto; text-align: center; } .grid { display: grid; gap: var(--s4); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } } .feature h3 { font-size: var(--t-md); margin-bottom: var(--s2); } .feature p { color: var(--muted); font-size: var(--t-base); line-height: 1.6; } .feature .ico { width: 40px; height: 40px; border-radius: var(--r-sm); margin-bottom: var(--s4); background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-size: 19px; } .step { position: relative; } .step .num { width: 32px; height: 32px; border-radius: var(--r-full); margin-bottom: var(--s4); background: var(--brand); color: #fff; display: grid; place-items: center; font-size: var(--t-sm); font-weight: 700; } .step h3 { font-size: var(--t-md); margin-bottom: var(--s2); } .step p { color: var(--muted); font-size: var(--t-base); } .promise { display: flex; gap: var(--s4); } .promise .x { flex: none; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--good-soft); color: var(--good); border: 1px solid var(--good-line); display: grid; place-items: center; font-size: var(--t-sm); font-weight: 700; } .promise h3 { font-size: var(--t-md); margin-bottom: var(--s2); } .promise p { color: var(--muted); font-size: var(--t-base); } .compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } @media (max-width: 860px) { .compare { grid-template-columns: 1fr; } } .compare h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s4); } .compare ul { list-style: none; display: grid; gap: var(--s3); } .compare li { font-size: var(--t-base); display: flex; gap: var(--s3); line-height: 1.55; } .compare li::before { flex: none; font-weight: 700; } .compare .before { background: var(--surface-2); } .compare .before h3 { color: var(--muted-2); } .compare .before li { color: var(--muted); } .compare .before li::before { content: "✕"; color: var(--muted-2); } .compare .after { border-color: var(--good-line); } .compare .after h3 { color: var(--good); } .compare .after li::before { content: "✓"; color: var(--good); } .faq details { border-bottom: 1px solid var(--line); } .faq details:first-child { border-top: 1px solid var(--line); } .faq summary { list-style: none; padding: var(--s5) 0; font-size: var(--t-md); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--muted-2); flex: none; } .faq details[open] summary::after { content: "−"; } .faq details p { padding-bottom: var(--s5); margin-top: calc(var(--s2) * -1); color: var(--muted); font-size: var(--t-base); max-width: 68ch; line-height: 1.65; } .faq a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; } .access { max-width: 520px; margin: 0 auto; text-align: center; padding: var(--s8); } .access .price { font-size: var(--t-4xl); font-weight: 700; letter-spacing: -0.03em; } .access .price small { font-size: var(--t-md); font-weight: 500; color: var(--muted); letter-spacing: 0; } .access ul { list-style: none; margin-top: var(--s6); display: grid; gap: var(--s3); text-align: left; } .access li { display: flex; gap: var(--s3); font-size: var(--t-base); color: var(--ink-2); } .access li::before { content: "✓"; color: var(--good); font-weight: 700; flex: none; } /* -------------------------------------------------------------- 6b. motion -- */ /* Entrance + scroll reveals, pure CSS. The hero staggers in on load; sections below the fold rise as they enter the viewport via scroll-driven animations (@supports-gated — browsers without it simply show everything, and the global prefers-reduced-motion block disables all of it). */ @media (prefers-reduced-motion: no-preference) { @keyframes rise-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } } @keyframes fill-in { from { width: 0; } } .hero .eyebrow { animation: rise-in .45s var(--ease) both; } .hero h1 { animation: rise-in .5s var(--ease) .05s both; } .hero .lede { animation: rise-in .5s var(--ease) .12s both; } .hero .cta-row { animation: rise-in .5s var(--ease) .19s both; } .hero .cta-note { animation: rise-in .5s var(--ease) .22s both; } .hero .trust-strip { animation: rise-in .5s var(--ease) .27s both; } .hero__visual { animation: rise-in .6s var(--ease) .22s both; } .meter > span { animation: fill-in .9s var(--ease) .55s both; } @supports (animation-timeline: view()) { .flow__row, .stats > div, .band-head, .promise, .bento > .card, .quote, .access, .faq, .founder, .cta-band { /* timeline must be declared AFTER the shorthand (which resets it) */ animation: rise-in linear both; animation-timeline: view(); animation-range: entry 5% entry 38%; } } } /* ------------------------------------------------- 7. template utilities -- */ /* Kept for templates that still use them; every one maps to a token. */ .bg-white { background: var(--surface); } .bg-gray-50 { background: var(--surface-2); } .bg-emerald-50 { background: var(--good-soft); } .bg-amber-50 { background: var(--warn-soft); } .bg-red-50 { background: var(--bad-soft); } .text-gray-900 { color: var(--ink); } .text-gray-700 { color: var(--ink-2); } .text-gray-600, .text-gray-500 { color: var(--muted); } .text-gray-400 { color: var(--muted-2); } .text-emerald-700, .text-emerald-800 { color: var(--good); } .text-amber-700, .text-amber-800 { color: var(--warn); } .text-red-700, .text-red-800 { color: var(--bad); } .text-blue-700 { color: var(--brand-ink); } .border { border: 1px solid var(--line); } .border-2 { border: 2px solid var(--line); } .border-t { border-top: 1px solid var(--line); } .border-b { border-bottom: 1px solid var(--line); } .border-emerald-200 { border-color: var(--good-line); } .border-amber-200 { border-color: var(--warn-line); } .border-red-200, .border-red-300 { border-color: var(--bad-line); } .rounded { border-radius: var(--r-sm); } .rounded-md { border-radius: var(--r-sm); } .text-xs { font-size: var(--t-xs); } .text-sm { font-size: var(--t-sm); } .text-xl { font-size: var(--t-xl); } .text-2xl { font-size: var(--t-2xl); } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-mono { font-family: var(--mono); font-size: .92em; } .uppercase { text-transform: uppercase; letter-spacing: .05em; } .text-left { text-align: left; } .text-right { text-align: right; } .whitespace-pre-wrap { white-space: pre-wrap; } .break-all { word-break: break-all; } .list-disc { list-style: disc; } .cursor-pointer { cursor: pointer; } .hover\:underline:hover { text-decoration: underline; text-underline-offset: 2px; } .block { display: block; } .inline { display: inline; } .flex { display: flex; } .flex-1 { flex: 1 1 0%; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:p-6 { padding: var(--s6); } } .w-full { width: 100%; } .w-20 { width: 80px; } .max-w-md { max-width: 420px; } .max-w-4xl { max-width: var(--maxw); } .mx-auto { margin-left: auto; margin-right: auto; } .min-h-screen { min-height: 100vh; } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); } .gap-4 { gap: var(--s4); } .p-1\.5 { padding: var(--s2); } .p-2 { padding: var(--s2); } .p-3 { padding: var(--s3); } .p-4 { padding: var(--s4); } .px-2 { padding-left: var(--s2); padding-right: var(--s2); } .px-3 { padding-left: var(--s3); padding-right: var(--s3); } .py-1 { padding-top: var(--s1); padding-bottom: var(--s1); } .py-2 { padding-top: var(--s2); padding-bottom: var(--s2); } .pt-1 { padding-top: var(--s1); } .pt-4 { padding-top: var(--s4); } .mt-0\.5 { margin-top: 2px; } .mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); } .mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); } .mb-1 { margin-bottom: var(--s1); } .mb-2 { margin-bottom: var(--s2); } .ml-5 { margin-left: var(--s5); } .mr-2 { margin-right: var(--s2); } .space-y-1 > * + * { margin-top: var(--s1); } .space-y-2 > * + * { margin-top: var(--s2); } .space-y-3 > * + * { margin-top: var(--s3); } .space-y-4 > * + * { margin-top: var(--s4); } .space-x-4 > * + * { margin-left: var(--s4); } .divide-y > * + * { border-top: 1px solid var(--line); } .prose { max-width: var(--maxw-text); } .prose h2 { font-size: var(--t-xl); margin: var(--s8) 0 var(--s3); } .prose h3 { font-size: var(--t-md); margin: var(--s6) 0 var(--s2); } .prose p, .prose li { color: var(--ink-2); font-size: var(--t-md); line-height: 1.7; } .prose p { margin: var(--s4) 0; } .prose ul { margin: var(--s4) 0; padding-left: var(--s6); list-style: disc; } .prose li { margin: var(--s2) 0; } .prose a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }