/* ============================================================ Dataffeine — Colors & Type Tokens A Data & AI newsletter brand system ============================================================ */ /* Fraunces — self-hosted brand font (variable: SOFT, WONK, opsz, wght; OFL 1.1) */ @font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } /* IBM Plex Sans — self-hosted brand font (variable: wdth, wght; OFL 1.1) */ @font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } /* IBM Plex Mono — self-hosted brand font (Medium 500, OFL 1.1) */ @font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; } /* Georgia is loaded from Adobe Fonts (Typekit) — see the tag in the of index.html and privacy.html. Adobe's kit registers the family name "georgia" (CSS is case-insensitive, so every `font-family: Georgia` rule in the brand resolves to the Adobe-served font on all platforms). License: Adobe Fonts EULA, limited to dataffeine.com. */ :root { /* ——— Core palette ——— */ --espresso: #2B1810; /* primary text, dark bg, gravitas */ --espresso-soft: #4A382E; /* softened dark surface */ --cream: #F5EEE1; /* primary background (the page) */ --cream-deep: #EBE1CE; /* card / secondary surface */ --latte: #E8D7C0; /* soft surface, tertiary card */ --crema: #D4A574; /* warm accent, course tier */ --spark: #FF5A1F; /* the caffeine — CTAs, italics, highlights */ --steam: #6B5D52; /* muted text, captions, metadata */ --data-blue: #1B4965; /* charts & data viz ONLY */ --rule: rgba(43, 24, 16, 0.15); /* hairline dividers */ --rule-strong: rgba(43, 24, 16, 0.30); /* ——— Semantic color roles ——— */ --bg: var(--cream); --bg-elev: var(--cream-deep); --bg-dark: var(--espresso); --bg-accent: var(--spark); --fg1: var(--espresso); /* primary text */ --fg2: var(--espresso-soft); /* secondary text */ --fg3: var(--steam); /* muted / captions */ --fg-on-dark: var(--cream); --fg-on-accent: var(--cream); --accent: var(--spark); --accent-warm: var(--crema); --border: var(--rule); --border-strong: var(--rule-strong); /* ——— Font families ——— */ /* Fraunces is reserved for the wordmark & large display moments (hero, section titles). */ /* For editorial body, pull-quotes, and general serif usage: Georgia — it pairs cleanly with Plex Sans and holds up at any size. */ --font-display: 'Fraunces', serif; --font-serif: 'Fraunces', serif; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ——— Type scale (semantic) ——— */ --fs-display: clamp(72px, 13vw, 220px); --fs-h1: clamp(48px, 6vw, 96px); --fs-h2: clamp(40px, 5vw, 64px); --fs-h3: 32px; --fs-h4: 22px; --fs-body-lg: 20px; --fs-body: 17px; --fs-body-sm: 15px; --fs-caption: 13px; --fs-label: 11px; /* mono uppercase labels */ --fs-tiny: 10px; /* ——— Line heights ——— */ --lh-tight: 0.88; --lh-display: 0.95; --lh-heading: 1.15; --lh-body: 1.55; --lh-loose: 1.8; /* ——— Letter spacing ——— */ --tr-display: -0.04em; /* tight display */ --tr-heading: -0.02em; --tr-body: 0; --tr-label: 0.15em; /* mono uppercase */ --tr-label-tight: 0.08em; --tr-label-wide: 0.2em; /* ——— Spacing scale (4px base) ——— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ——— Radii (minimal, editorial) ——— */ --r-0: 0; --r-1: 2px; /* typical card */ --r-2: 4px; --r-pill: 999px; /* ——— Elevation / shadow (used sparingly) ——— */ --shadow-1: 0 1px 0 rgba(43,24,16,0.06), 0 1px 2px rgba(43,24,16,0.08); --shadow-2: 0 2px 8px rgba(43,24,16,0.10); --shadow-3: 0 12px 32px rgba(43,24,16,0.14); /* ——— Motion ——— */ --ease-editorial: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 600ms; --dur-rise: 1000ms; /* ——— Max-widths ——— */ --mw-prose: 680px; --mw-page: 1400px; } /* ============================================================ Base elements — semantic defaults ============================================================ */ html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg); color: var(--fg1); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; } /* Headings default to Georgia — calm editorial serif. */ /* Use .display or .wordmark for Fraunces (reserved for masthead & hero moments). */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--fg1); } h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--tr-display); } h2 { font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--tr-heading); } h3 { font-size: var(--fs-h3); font-weight: 400; line-height: var(--lh-heading); letter-spacing: var(--tr-heading); } h4 { font-size: var(--fs-h4); font-weight: 400; line-height: 1.3; } /* Signature: italic emphasis = spark orange */ h1 em, h2 em, h3 em, .wordmark em, .ff { font-style: italic; color: var(--spark); font-weight: 300; } p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg1); max-width: var(--mw-prose); text-wrap: pretty; } small, .caption { font-size: var(--fs-caption); color: var(--fg3); } code, pre, .mono { font-family: var(--font-mono); } code { font-size: 0.9em; color: var(--spark); } /* ——— Utility type roles ——— */ .serif { font-family: var(--font-serif); font-optical-sizing: auto; } .sans { font-family: var(--font-sans); } .mono { font-family: var(--font-mono); } .display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 300; line-height: var(--lh-tight); letter-spacing: var(--tr-display); font-optical-sizing: auto; font-variation-settings: "opsz" 144; } /* The wordmark — Fraunces only, reserved for the Dataffeine logotype. */ .wordmark { font-family: var(--font-display); font-weight: 300; font-optical-sizing: auto; font-variation-settings: "opsz" 144; letter-spacing: var(--tr-display); line-height: 1; } .eyebrow, .label-mono { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--spark); } .meta-mono { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label-tight); text-transform: uppercase; color: var(--fg3); } .pull-quote { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; color: var(--fg2); } /* ——— Rules ——— */ hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; } /* ——— Links ——— */ a { color: var(--fg1); text-decoration: none; opacity: 0.85; transition: opacity var(--dur-base) var(--ease-editorial); } a:hover { opacity: 1; color: var(--spark); } /* ——— Buttons (editorial, flat) ——— */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; padding: 14px 22px; border-radius: var(--r-1); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease-editorial), background var(--dur-base) var(--ease-editorial), color var(--dur-base) var(--ease-editorial); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(0.98); } .btn-primary { background: var(--espresso); color: var(--cream); } .btn-primary:hover { background: var(--spark); color: var(--cream); } .btn-accent { background: var(--spark); color: var(--cream); } .btn-accent:hover { background: var(--espresso); } .btn-ghost { background: transparent; color: var(--fg1); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--espresso); background: var(--cream-deep); }