/* Generated from the shared Womply theme tokens in site.css. */ /* ============================================================ Womply — The Record · two-theme system DEFAULT = "clean" editorial-minimal, no Womply brand TOGGLE = "pandemic" Womply 2021 brand (Brand Guidelines v1.1) Theme via [data-theme="pandemic"] on . Clean is the default and renders with no JavaScript. ============================================================ */ /* Pandemic brand faces — licensed; drop woff2 into ./fonts/ for exact type. Until present, pandemic falls back to Hanken Grotesk + Source Serif 4. */ /* ---- Self-hosted open-source faces (OFL) — no external CDN, no third-party calls. Clean theme: Schibsted Grotesk + Public Sans + IBM Plex Mono. Pandemic fallbacks (when licensed Px Grotesk / Athelas absent): Hanken Grotesk + Source Serif 4. Variable woff2 cover the full weight range in one file each. ---- */ @font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-variable.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap} @font-face{font-family:"Public Sans";src:url("../fonts/public-sans-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4-variable.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} :root{ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px; --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:104px; --max-width:1160px; --shell-pad:48px; /* total horizontal gutter (24px each side) */ --measure:78ch; /* readable text measure */ /* ===== CLEAN (default) — editorial minimal, no brand ===== */ --font-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif; --font-body:"Public Sans","Helvetica Neue",Arial,sans-serif; --font-serif:"Public Sans","Helvetica Neue",Arial,sans-serif; /* clean has no serif (aliased to body) */ --font-label:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace; --surface-primary:#FBFAF8; --surface-secondary:#FFFFFF; --surface-inset:#F1F0EB; --text-primary:#191814; --text-secondary:#4A4842; --text-tertiary:#7C786E; --border-default:#DCDAD1; --border-subtle:#E9E7DF; --rule-strong:#191814; --accent:#2F4858; /* single restrained slate accent */ --accent-hover:#1E3340; --accent-soft:#EDF0F2; --kicker:#7C786E; --num-color:#191814; --card-bg:transparent; --card-border-color:var(--border-default); --card-radius:3px; --card-shadow:none; --card-pad:var(--space-6); --card-lift:0px; --pill-radius:4px; --btn-radius:3px; --btn-primary-bg:var(--text-primary); --btn-primary-fg:#FFFFFF; --btn-primary-bg-hover:#34322B; --footer-bg:transparent; --footer-text:var(--text-tertiary); --footer-border:var(--border-subtle); --label-spacing:.13em; } html[data-theme="pandemic"]{ /* ===== PANDEMIC — Womply Brand Guidelines v1.1 (Frank Collective) ===== */ --font-display:"Px Grotesk","Hanken Grotesk","Helvetica Neue",Arial,sans-serif; --font-body:"Athelas","Source Serif 4",Georgia,"Times New Roman",serif; --font-serif:"Athelas","Source Serif 4",Georgia,"Times New Roman",serif; --font-label:"Px Grotesk","Hanken Grotesk","Helvetica Neue",Arial,sans-serif; --surface-primary:#FCF7F2; /* Canvas */ --surface-secondary:#FFFFFF; --surface-inset:#F0EAE0; --text-primary:#15241F; /* warm spruce ink */ --text-secondary:#403A34; --text-tertiary:#6E695E; --border-default:#E8E1D4; --border-subtle:#EFE9DF; --rule-strong:#15241F; --accent:#DD4027; /* Awning Red — Pantone Warm Red C */ --accent-hover:#BA3B20; /* Awning Shadow — Pantone 180 C */ --accent-soft:#FBEDE7; --kicker:#DD4027; --num-color:#DD4027; --card-bg:#FFFFFF; --card-border-color:var(--border-default); --card-radius:14px; --card-shadow:0 1px 2px rgba(21,36,31,.05),0 16px 38px rgba(21,36,31,.07); --card-pad:28px; --card-lift:-2px; --pill-radius:999px; --btn-radius:11px; --btn-primary-bg:#DD4027; --btn-primary-fg:#FFFFFF; --btn-primary-bg-hover:#BA3B20; --footer-bg:#10241F; /* Spruce */ --footer-text:#9AA39A; --footer-border:rgba(255,255,255,.10); --label-spacing:.12em; }