/* ========================================================================== site.css — the ONE stylesheet for every server-rendered marketing/SEO page (landing, coverage, changelog, legal). Loaded by templates/site/base.html. Contains: design tokens, reset + typography, layout, buttons, header/nav, footer, and the primitives that genuinely appear on more than one page. Page-specific furniture lives in its own sheet (home.css, coverage.css, changelog.css, legal.css) loaded via {% block extra_css %}. Typography is promoted verbatim from landing/index.html — it is the design reference. Do not re-declare a base font-size on in a page sheet: that is exactly how the five old copies drifted apart. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root{ /* surfaces */ --bg:#ffffff; --bg-soft:#fafafa; /* text */ --fg:#09090b; /* headings, primary text zinc-950 */ --fg-soft:#27272a; /* UI secondary text zinc-800 */ --fg-soft-2:#3f3f46; /* prose / table body zinc-700 */ --muted-strong:#52525b;/* dense meta, neutral pills zinc-600 */ --muted:#71717a; /* muted copy zinc-500 */ --muted-2:#a1a1aa; /* microcopy, footnotes zinc-400 */ /* lines */ --border:#e4e4e7; --border-soft:#f4f4f5; /* accent (emerald) */ --accent:#10b981; --accent-fg:#047857; --accent-bg:#ecfdf5; --accent-bd:#a7f3d0; /* status */ --amber-fg:#b45309; --amber-bg:#fffbeb; --amber-bd:#fde68a; --red-fg:#b91c1c; --red-bg:#fef2f2; --red-bd:#fecaca; /* dark surfaces (code windows, CTA bands, Pro plan card) */ --dark:#09090b; --dark-2:#18181b; --dark-border:#27272a; /* shape */ --radius:14px; --radius-sm:10px; --radius-xs:8px; /* elevation */ --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow:0 4px 24px -8px rgba(0,0,0,.12); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.35); /* type */ --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,sans-serif; --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* -------------------------------------------------------------------------- 2. Reset + base typography (from index.html — the reference) No base font-size: root stays 16px on every page. -------------------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font); color:var(--fg); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} img{max-width:100%} /* Heading scale. Shared rules never exceed weight 700 — the font link does not ship 800, so do not use font-weight:800 in a page sheet. */ h1,h2,h3{letter-spacing:-.02em;color:var(--fg);font-weight:600} .h1{font-size:clamp(32px,5vw,44px);line-height:1.08;font-weight:700} .h2{font-size:clamp(28px,4vw,40px);line-height:1.1;font-weight:600} .h3{font-size:20px;font-weight:600} .lead{color:var(--muted);font-size:18px;line-height:1.6} .mono{font-family:var(--mono)} .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--fg);color:#fff; padding:10px 16px;border-radius:0 0 var(--radius-sm) 0;font-size:14px} .skip-link:focus{left:0} /* -------------------------------------------------------------------------- 3. Layout .wrap is the single content rail — header and footer use it, so every page is aligned. Modifiers narrow it for specific page bodies. -------------------------------------------------------------------------- */ .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .wrap--wide{max-width:1180px} /* changelog feed 2-column layout */ .wrap--narrow{max-width:1000px} /* coverage tables */ .wrap--prose{max-width:820px} /* legal / long-form reading */ .section{padding:96px 0} .center{text-align:center} .section-head{max-width:680px;margin:0 auto 56px} .section-head.center{text-align:center} /* Inner-page hero (coverage, changelog, legal). The homepage hero is richer and lives in home.css as .hero. */ .page-hero{max-width:820px;margin:0 auto;text-align:center;padding:56px 24px 8px} .crumbs{font-size:12.5px;color:var(--muted);padding:22px 0 0} .crumbs a{color:var(--fg-soft-2)} .crumbs a:hover{color:var(--accent-fg)} /* -------------------------------------------------------------------------- 4. Buttons Base .btn has a transparent border and NO background — always pair it with a variant (.btn-primary / .btn-outline / .btn-light). -------------------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; height:44px;padding:0 20px;border-radius:var(--radius-sm);font-size:15px;font-weight:500; font-family:inherit;cursor:pointer;border:1px solid transparent;transition:all .18s ease;white-space:nowrap} .btn svg{width:16px;height:16px} .btn-primary{background:var(--fg);color:#fff} .btn-primary:hover{background:#27272a;transform:translateY(-1px)} .btn-outline{background:var(--bg);border-color:var(--border);color:var(--fg)} .btn-outline:hover{background:var(--bg-soft)} .btn-light{background:#fff;color:var(--dark)} /* for use on dark bands */ .btn-light:hover{background:#e4e4e7;transform:translateY(-1px)} .btn-sm{height:38px;padding:0 16px;font-size:14px;border-radius:9px} /* -------------------------------------------------------------------------- 5. Header / nav

is the sticky bar; .nav is the inner flex row inside .wrap. The border only appears once scrolled (JS toggles header.scrolled). -------------------------------------------------------------------------- */ /* Scoped to the site bar by ID, NOT the bare `header` element: pages legitimately use

for their own hero (coverage, changelog feed), and an element selector made those sticky too — a hero frozen over the scrolling content. */ #header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78); backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s} #header.scrolled{border-bottom-color:var(--border)} .nav{display:flex;align-items:center;justify-content:space-between;height:64px} .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.02em} .brand img{border-radius:var(--radius-xs);flex:0 0 auto} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{font-size:14px;color:var(--muted);font-weight:500;transition:color .15s} .nav-links a:hover{color:var(--fg)} .nav-links a.active{color:var(--fg)} .nav-cta{display:flex;align-items:center;gap:10px} .nav-cta .signin{font-size:14px;font-weight:500;color:var(--fg);padding:0 6px} .burger{display:none;background:none;border:1px solid var(--border);border-radius:9px; width:40px;height:40px;cursor:pointer;color:var(--fg)} .burger svg{width:20px;height:20px} .mobile-menu{display:none;border-top:1px solid var(--border);background:#fff;padding:14px 24px 20px} .mobile-menu a{display:block;padding:11px 0;font-size:15px;color:var(--fg-soft);border-bottom:1px solid var(--border-soft)} .mobile-menu a.active{color:var(--accent-fg)} .mobile-menu .btn{width:100%;margin-top:14px} /* -------------------------------------------------------------------------- 6. Footer (the complete multi-column footer, on every page) -------------------------------------------------------------------------- */ /* Same reasoning as #header — scope the site footer, don't style every