/* ============================================================ SelectPdf — base.css Design tokens (colors, type, spacing), reset, dark mode. Loaded first by spdf.css. ============================================================ */ /* ─── Reset / normalize ────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Reserve scrollbar gutter on every page so short pages (no scrollbar) and long pages (scrollbar) render at the same content width — otherwise the centered nav/logo jumps ~15px between them. */ html { scrollbar-gutter: stable; color-scheme: light; } /* Tell the browser the active scheme so NATIVE form controls (inputs, selects, the select dropdown popup), scrollbars, the caret and autofill render dark in dark mode — without this they stay light even though our token-based CSS sets a dark background. */ html[data-theme="dark"] { color-scheme: dark; } body { background: var(--spdf-bg); color: var(--spdf-text); font-family: var(--spdf-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* `clip` (not `hidden`): prevents horizontal overflow without turning body into a scroll container — keeps the viewport's vertical scrollbar in its normal place. */ overflow-x: clip; line-height: 1.5; } a { color: inherit; } button { font: inherit; cursor: pointer; } img, svg { max-width: 100%; display: block; } ul, ol { padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; } /* ─── Type stacks ──────────────────────────────────────────── */ :root { /* Editorial (Homepage, Blog index/category/author/search/404) */ --spdf-font-display-editorial: "Fraunces", "Times New Roman", serif; --spdf-font-body-editorial: "Inter", ui-sans-serif, system-ui, sans-serif; --spdf-font-mono-editorial: "JetBrains Mono", ui-monospace, monospace; /* Industrial (Library, API, Pricing, Save Link, Community, Blog Post) */ --spdf-font-display-industrial: "Archivo", "Inter Tight", system-ui, sans-serif; --spdf-font-body-industrial: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, sans-serif; --spdf-font-mono-industrial: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; /* Active type stack — page sets [data-type="editorial"|"industrial"] on . */ --spdf-font-display: var(--spdf-font-display-industrial); --spdf-font-body: var(--spdf-font-body-industrial); --spdf-font-mono: var(--spdf-font-mono-industrial); --spdf-display-weight: 700; --spdf-display-letter: -0.04em; --spdf-display-italic-style: normal; } html[data-type="editorial"] { --spdf-font-display: var(--spdf-font-display-editorial); --spdf-font-body: var(--spdf-font-body-editorial); --spdf-font-mono: var(--spdf-font-mono-editorial); --spdf-display-weight: 500; --spdf-display-letter: -0.04em; /* Fraunces supports italic — accent words use it. Industrial doesn't. */ --spdf-display-italic-style: italic; } html[data-type="industrial"] { --spdf-font-display: var(--spdf-font-display-industrial); --spdf-font-body: var(--spdf-font-body-industrial); --spdf-font-mono: var(--spdf-font-mono-industrial); --spdf-display-weight: 700; --spdf-display-letter: -0.04em; --spdf-display-italic-style: normal; } /* ─── Color palette — Amber (default) ──────────────────────── */ :root, html[data-palette="amber"] { --spdf-bg: #FFF8EC; --spdf-surface: #FFF1D6; --spdf-panel: #FFFFFF; --spdf-line: rgba(40, 24, 8, 0.14); --spdf-line-strong: rgba(40, 24, 8, 0.26); --spdf-text: #1F140A; --spdf-text-dim: rgba(31, 20, 10, 0.66); --spdf-text-mute: rgba(31, 20, 10, 0.42); --spdf-accent: #D97706; --spdf-accent-ink: #1F140A; --spdf-chip: rgba(217, 119, 6, 0.14); --spdf-chip-text: #7A4308; /* Code block — light theme (cream on warm-dark text) */ --spdf-code: #FAF3E2; --spdf-code-text: #2C1F12; --spdf-code-line: rgba(40, 24, 8, 0.10); --spdf-code-head: #F2E7CC; --spdf-code-file: rgba(40, 24, 8, 0.55); --spdf-code-gutter: rgba(40, 24, 8, 0.30); --spdf-code-copy: rgba(40, 24, 8, 0.78); --spdf-code-copy-border: rgba(40, 24, 8, 0.22); --spdf-code-copy-hover: rgba(40, 24, 8, 0.06); --spdf-code-dim: rgba(40, 24, 8, 0.55); /* Syntax-highlight tokens — light theme (saturated-but-dark) */ --spdf-tok-kw: #B95C00; --spdf-tok-str: #0E5A26; --spdf-tok-num: #3F2DB5; --spdf-tok-com: rgba(40, 24, 8, 0.40); --spdf-tok-fn: #0B4A8E; --spdf-tok-type: #7A4308; --spdf-grid: rgba(40, 24, 8, 0.05); --spdf-ok: #22C55E; } /* Amber dark */ html[data-theme="dark"], html[data-palette="amber"][data-theme="dark"] { --spdf-bg: #161009; --spdf-surface: #1F1810; --spdf-panel: #241B11; --spdf-line: rgba(255, 220, 160, 0.10); --spdf-line-strong: rgba(255, 220, 160, 0.20); --spdf-text: #FBE9C8; --spdf-text-dim: rgba(251, 233, 200, 0.66); --spdf-text-mute: rgba(251, 233, 200, 0.42); --spdf-accent: #F59E0B; --spdf-accent-ink: #161009; --spdf-chip: rgba(245, 158, 11, 0.16); --spdf-chip-text: #FCD34D; /* Code block — dark theme (warm cream on near-black) */ --spdf-code: #0F0A06; --spdf-code-text: rgba(244, 241, 234, 0.92); --spdf-code-line: rgba(255, 255, 255, 0.06); --spdf-code-head: #1F1810; --spdf-code-file: rgba(255, 255, 255, 0.50); --spdf-code-gutter: rgba(255, 255, 255, 0.25); --spdf-code-copy: rgba(255, 255, 255, 0.70); --spdf-code-copy-border: rgba(255, 255, 255, 0.18); --spdf-code-copy-hover: rgba(255, 255, 255, 0.08); --spdf-code-dim: rgba(244, 241, 234, 0.45); /* Syntax-highlight tokens — dark theme (bright pastels, kept per design) */ --spdf-tok-kw: #FBA94F; --spdf-tok-str: #92DDA5; --spdf-tok-num: #C8B6FF; --spdf-tok-com: rgba(255, 255, 255, 0.42); --spdf-tok-fn: #6EC6FF; --spdf-tok-type: #FFD68C; --spdf-grid: rgba(255, 255, 255, 0.04); } /* ─── Color palette — Forest (.NET Library, Online API pricing, Blog Post) */ html[data-palette="forest"] { --spdf-bg: #F4F8F2; --spdf-surface: #E7EFE3; --spdf-panel: #FFFFFF; --spdf-line: rgba(12, 28, 16, 0.13); --spdf-line-strong: rgba(12, 28, 16, 0.24); --spdf-text: #0C1C10; --spdf-text-dim: rgba(12, 28, 16, 0.66); --spdf-text-mute: rgba(12, 28, 16, 0.42); --spdf-accent: #1F7A3A; --spdf-accent-ink: #FFFFFF; --spdf-chip: rgba(31, 122, 58, 0.13); --spdf-chip-text: #155827; /* Code block — light theme (green-tinted cream) */ --spdf-code: #E7EFE3; --spdf-code-text: #0C1C10; --spdf-code-line: rgba(12, 28, 16, 0.10); --spdf-code-head: #D7E2D1; --spdf-code-file: rgba(12, 28, 16, 0.55); --spdf-code-gutter: rgba(12, 28, 16, 0.30); --spdf-code-copy: rgba(12, 28, 16, 0.78); --spdf-code-copy-border: rgba(12, 28, 16, 0.22); --spdf-code-copy-hover: rgba(12, 28, 16, 0.06); --spdf-code-dim: rgba(12, 28, 16, 0.55); /* Syntax-highlight tokens — light theme */ --spdf-tok-kw: #155827; --spdf-tok-str: #B95C00; --spdf-tok-num: #3F2DB5; --spdf-tok-com: rgba(12, 28, 16, 0.40); --spdf-tok-fn: #0B4A8E; --spdf-tok-type: #7A4308; --spdf-grid: rgba(12, 28, 16, 0.05); } html[data-palette="forest"][data-theme="dark"] { --spdf-bg: #091109; --spdf-surface: #0F180F; --spdf-panel: #152015; --spdf-line: rgba(200, 255, 210, 0.10); --spdf-line-strong: rgba(200, 255, 210, 0.20); --spdf-text: #E6F4E5; --spdf-text-dim: rgba(230, 244, 229, 0.66); --spdf-text-mute: rgba(230, 244, 229, 0.42); --spdf-accent: #3FCB6A; --spdf-accent-ink: #091109; --spdf-chip: rgba(63, 203, 106, 0.16); --spdf-chip-text: #9DE6B5; /* Code block — dark theme */ --spdf-code: #06090A; --spdf-code-text: rgba(230, 244, 229, 0.92); --spdf-code-line: rgba(255, 255, 255, 0.06); --spdf-code-head: #0F180F; --spdf-code-file: rgba(255, 255, 255, 0.50); --spdf-code-gutter: rgba(255, 255, 255, 0.25); --spdf-code-copy: rgba(255, 255, 255, 0.70); --spdf-code-copy-border: rgba(255, 255, 255, 0.18); --spdf-code-copy-hover: rgba(255, 255, 255, 0.08); --spdf-code-dim: rgba(230, 244, 229, 0.45); /* Syntax-highlight tokens — dark theme */ --spdf-tok-kw: #FBA94F; --spdf-tok-str: #92DDA5; --spdf-tok-num: #C8B6FF; --spdf-tok-com: rgba(255, 255, 255, 0.42); --spdf-tok-fn: #6EC6FF; --spdf-tok-type: #FFD68C; --spdf-grid: rgba(255, 255, 255, 0.04); } /* ─── Layout primitives ────────────────────────────────────── */ .spdf-shell { max-width: 1280px; margin: 0 auto; } .spdf-pad { padding-left: 32px; padding-right: 32px; } .spdf-shell-narrow { max-width: 1100px; margin: 0 auto; } /* Section spacing */ .spdf-section { padding: 72px 0; } .spdf-section-lg { padding: 96px 0 64px; } .spdf-section-sm { padding: 48px 0; } .spdf-section-bordered { border-top: 1px solid var(--spdf-line); } /* ─── Display headings ────────────────────────────────────── */ .spdf-display { font-family: var(--spdf-font-display); font-weight: var(--spdf-display-weight); letter-spacing: var(--spdf-display-letter); color: var(--spdf-text); margin: 0; text-wrap: balance; } .spdf-h1 { font-size: clamp(56px, 8vw, 116px); line-height: 0.95; } .spdf-h2 { font-size: var(--spdf-h2); line-height: var(--spdf-h2-lh); } .spdf-h3 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; } .spdf-h4 { font-size: 24px; line-height: 1.2; } /* ─── H1 type scale — three locked tiers ────────────────────── Every page hero picks one. No bespoke clamps. See docs/Web-Conventions.md §1.5 for tier-to-page assignment. - marketing: flagship product / landing heroes - reference: dense reference pages (Parameters, sub-pricing, utility) - editorial: narrow editorial / legal / About */ :root { --spdf-h1-marketing: clamp(44px, 6.4vw, 96px); --spdf-h1-marketing-lh: 0.95; --spdf-h1-reference: clamp(44px, 6.4vw, 84px); --spdf-h1-reference-lh: 0.95; --spdf-h1-editorial: clamp(36px, 5vw, 68px); --spdf-h1-editorial-lh: 1.02; /* Hero-class CTA — used by .spdf-footer-cta-title (rendered as

in _Layout but visually a closing hero). Matches the marketing H1 ramp so the closing block lands at the same weight as a page hero. */ --spdf-h1-cta: clamp(44px, 6.4vw, 96px); --spdf-h1-cta-lh: 0.95; /* H2 — one canonical scale, consumed by .spdf-h2, .spdf-doc-h2 and .spdf-qs-title. Sits at least 12px below the smallest H1 max (68px editorial) so the hierarchy holds on every page. */ --spdf-h2: clamp(32px, 4.4vw, 56px); --spdf-h2-lh: 1.05; } /* Accent words inside display headings ("italic" treatment) */ .spdf-display-accent { color: var(--spdf-accent); font-style: var(--spdf-display-italic-style); } .spdf-display-dim { color: var(--spdf-text-dim); font-style: var(--spdf-display-italic-style); } /* Body copy */ .spdf-lede { font-family: var(--spdf-font-body); font-size: 18px; line-height: 1.55; color: var(--spdf-text-dim); max-width: 640px; } .spdf-body { font-family: var(--spdf-font-body); font-size: 15px; line-height: 1.55; color: var(--spdf-text-dim); } .spdf-strong { color: var(--spdf-text); font-weight: 600; } /* Mono labels — kickers, eyebrows, captions */ /* Kicker — two-tone composite: accent icon + muted label. Use as: §LABEL Replaces the old single-span all-accent kicker + .spdf-doc-eyebrow pattern. */ .spdf-kicker { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--spdf-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--spdf-text-mute); } .spdf-kicker .i { color: var(--spdf-accent); flex: 0 0 auto; } .spdf-kicker .t { color: var(--spdf-text-mute); } /* Eyebrow — quieter sibling of .spdf-kicker. Same two-tone composite, tighter letter-spacing. Use as: ◆LABEL Single-text usage (no children) still works for icon-less eyebrows like stat lines or product summaries — they render all-muted. */ .spdf-eyebrow { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--spdf-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--spdf-text-mute); } .spdf-eyebrow .i { color: var(--spdf-accent); flex: 0 0 auto; } .spdf-eyebrow .t { color: var(--spdf-text-mute); } .spdf-caption { font-family: var(--spdf-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--spdf-text-mute); } /* Utility helpers */ .spdf-hr { border: 0; height: 1px; background: var(--spdf-line); margin: 0; } .spdf-divider-top { border-top: 1px solid var(--spdf-line); } .spdf-divider-bottom { border-bottom: 1px solid var(--spdf-line); } .spdf-center { text-align: center; } .spdf-flex { display: flex; } .spdf-flex-wrap { flex-wrap: wrap; } .spdf-flex-center { display: flex; align-items: center; } .spdf-gap-8 { gap: 8px; } .spdf-gap-12 { gap: 12px; } .spdf-gap-16 { gap: 16px; } .spdf-gap-24 { gap: 24px; } .spdf-mt-8 { margin-top: 8px; } .spdf-mt-14 { margin-top: 14px; } .spdf-mt-16 { margin-top: 16px; } .spdf-mt-24 { margin-top: 24px; } .spdf-mt-32 { margin-top: 32px; } .spdf-mt-48 { margin-top: 48px; } .spdf-mb-12 { margin-bottom: 12px; } .spdf-mb-16 { margin-bottom: 16px; } .spdf-mb-24 { margin-bottom: 24px; } .spdf-mb-36 { margin-bottom: 36px; } .spdf-mb-48 { margin-bottom: 48px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }