/* ── AppZip · fontsets (A/B/C, commutabili) ────────────────────────────────── Three fontsets, switched by [data-fontset] on : "grotesk" (default), "sora", "manrope". The type scale (sizes/weights/rhythm) lives in tokens.css; here we only bind families to the --font-heading / --font-body roles and load the faces. Weights 400/500/700, font-display: swap (handoff §4.2). SELF-HOSTING (GDPR): fonts must be served from our own origin — no calls to Google's servers. Drop the .woff2 files under static/fonts// using the exact names referenced below. Files are intentionally left as placeholders for you to supply (licence + real weight feed the A/B budget, handoff §12). Until a file is present, the fallback stack keeps the site fully readable. */ /* Fallback stack shared by every role — the site never renders unstyled. */ :root { --font-fallback: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Default fontset (grotesk) so type is bound even without the attribute. */ --font-heading: 'Space Grotesk', var(--font-fallback); --font-body: 'Inter', var(--font-fallback); } [data-fontset="grotesk"] { --font-heading: 'Space Grotesk', var(--font-fallback); --font-body: 'Inter', var(--font-fallback); } [data-fontset="sora"] { --font-heading: 'Sora', var(--font-fallback); --font-body: 'Plus Jakarta Sans', var(--font-fallback); } [data-fontset="manrope"] { --font-heading: 'Manrope', var(--font-fallback); --font-body: 'Manrope', var(--font-fallback); } /* ── Faces ─────────────────────────────────────────────────────────────────── One block per family/weight. Paths are relative to this stylesheet (/css/fontset.css → /fonts/...). Add the .woff2 files to enable them. */ /* Fontset A — Space Grotesk (headings) + Inter (body). */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/space-grotesk/space-grotesk-variable.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter/inter-variable.woff2') format('woff2'); } /* Fontset B — Sora (headings) + Plus Jakarta Sans (body). */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/sora/sora-variable.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/plus-jakarta-sans/plus-jakarta-sans-variable.woff2') format('woff2'); } /* Fontset C — Manrope (both roles; the lightest option, single family). */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/manrope/manrope-variable.woff2') format('woff2'); } /* Base type binding — components inherit these; headings/body just work. */ body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0 0 var(--space-4); } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-medium); } h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-medium); } h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: var(--fw-medium); } /* Fluid H1 on small screens (handoff §4.2). */ @media (max-width: 40em) { h1 { font-size: clamp(2rem, 8vw, var(--fs-h1)); } }