/* =========================================================================== Design tokens — Jacob Johannesen ("Zero To One Design") TWO THEMES, ONE SYSTEM. The home page is a saturated blue field (bold, one statement); case studies are cream (quiet, readable at length). Every component styles itself from the semantic --page / --ink / --rule vars below, so a page picks a theme by setting one class on and nothing else has to know. =========================================================================== */ /* ---- Typography ---------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap"); :root{ --font-display:"Poppins",system-ui,sans-serif; --font-body:"Poppins",system-ui,sans-serif; --font-mono:"Poppins",system-ui,sans-serif; /* scale — the home title is the loudest thing on the site. Sized to sit on one line each inside the rail; secondary lines step down to 0.72. */ --text-display:clamp(30px,2.4vw + 1vh,52px); --text-h1:clamp(30px,2.4vw + 1vh,46px); --text-h2:clamp(22px,1.6vw + .6vh,32px); --text-h3:clamp(19px,0.7vw + 14px,23px); --text-lg:clamp(17px,0.5vw + 14px,19px); --text-md:clamp(15px,0.4vw + 13px,17px); --text-sm:clamp(13.5px,0.3vw + 12px,15px); --text-xs:12px; /* weights */ --w-regular:400;--w-medium:500;--w-semibold:600;--w-bold:700;--w-black:800; /* details */ --leading-tight:0.98; --leading-snug:1.28; --leading-body:1.55; --tracking-tight:-0.02em; --tracking-wide:0.14em; } /* ---- Palette (raw) ------------------------------------------------------- */ :root{ --blue-700:#1233B8; /* pressed */ --blue-600:#2149DE; /* hover on blue field */ --blue-500:#2E5BF6; /* THE blue — home field, cream-page accent */ --blue-300:#9DB3F5; /* muted type on the blue field */ --mint-1:#6EE7B7; /* the deck's mint accent — kickers + metrics on dark */ --navy-950:#020B26; /* the preview panel — darkest surface on the site */ --navy-900:#04123B; /* media wells, cream-page ink */ --navy-800:#0A1E56; --cream-50:#FBF6EC; /* cream page */ --cream-100:#F2EBDC; /* cream surface */ --cream-200:#E5DCC9; /* cream rule */ --white:#FFFFFF; --coral-400:#FF8F87; /* status: unavailable, on blue */ --coral-600:#D8342A; /* status: unavailable, on cream */ } /* ---- Semantic (theme-swapped) -------------------------------------------- */ body.t-blue{ --page:var(--blue-500); --ink:var(--white); --ink-2:rgba(255,255,255,.88); --ink-3:var(--blue-300); --well:var(--navy-900); --rule:rgba(255,255,255,.24); --rule-strong:rgba(255,255,255,.5); --accent:var(--white); --surface:rgba(255,255,255,.08); --surface-hover:rgba(255,255,255,.14); --status:var(--coral-400); --status-bg:rgba(255,143,135,.16); --status-border:rgba(255,143,135,.5); --focus-ring:rgba(255,255,255,.75); } /* Case studies are dark, matching the deck's dark-native screenshots. */ body.t-dark{ --page:#161616; --ink:#F4F6F8; --ink-2:rgba(255,255,255,.76); --ink-3:rgba(255,255,255,.5); --well:#0D0D0D; --rule:rgba(255,255,255,.13); --rule-strong:rgba(255,255,255,.42); --accent:var(--mint-1); /* the deck's mint for kickers + metrics */ --surface:#1E1F22; --surface-hover:#26272B; --status:var(--coral-400); --status-bg:rgba(255,143,135,.16); --status-border:rgba(255,143,135,.5); --focus-ring:rgba(110,231,183,.6); } /* ---- Spacing ------------------------------------------------------------- */ :root{ --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; --container:1440px; /* Two rail widths. Home gives the switcher room to sit one line per project; a case study shrinks it to a stub so the article keeps the width. */ --rail-cs:clamp(184px,18vw,244px); --view-w:clamp(400px,44vw,760px); /* the dark preview panel, flush right */ --topbar-h:38px; --edge:clamp(24px,5vw,84px); /* page gutter — the mockup's left inset */ --gap-tight:clamp(6px,1.1vh,12px); --gap-unit:clamp(12px,2.2vh,26px); --section-gap:clamp(28px,5vh,56px); } /* ---- Effects ------------------------------------------------------------- */ :root{ /* the mockup is flat and square — no rounding except on pills */ --radius-sm:0px;--radius-md:2px;--radius-lg:4px;--radius-pill:999px; --blur-veil:saturate(1.2) blur(16px); } /* ---- Motion -------------------------------------------------------------- */ :root{ --ease-out:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.22,1,.36,1); /* panel swaps — gentler settle */ --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-fast:150ms;--dur-med:300ms;--dur-slow:600ms; --ping-dur:2.2s;--pulse-dur:3s; } @keyframes ds-ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}} @keyframes ds-pulse{0%,100%{opacity:1}50%{opacity:.55}} @keyframes ds-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes ds-fade-in{from{opacity:0}to{opacity:1}} .ds-ping{animation:ds-ping var(--ping-dur) var(--ease-out) infinite} .ds-pulse{animation:ds-pulse var(--pulse-dur) var(--ease-in-out) infinite} @media (prefers-reduced-motion:reduce){ .ds-ping,.ds-pulse,[class*="fade"]{animation:none !important} }