/* ============================================================ ATOMSKI MARKETING — design tokens ============================================================ */ :root{ /* brand */ --red: #d62f2e; --red-deep: #b21f1e; --red-bright: #f0413f; --red-ink: #7d1413; /* surfaces */ --ink: #0a0b0d; /* page bg */ --ink-1: #0e1014; --ink-2: #14171c; /* raised panel */ --ink-3: #1b1f26; /* hover / border-lift */ --paper: #f3efe7; /* light section */ --paper-2:#e7e1d5; /* ink text */ --white: #f7f7f5; --mut: rgba(247,247,245,.56); --mut-2: rgba(247,247,245,.34); --line: rgba(247,247,245,.10); --line-2: rgba(247,247,245,.16); /* on light */ --ink-on-paper: #14151a; --mut-on-paper: rgba(20,21,26,.56); --line-on-paper: rgba(20,21,26,.14); /* fonts — display is swappable via tweaks (data-display attr) */ --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Jost', system-ui, sans-serif; --display-weight: 800; --display-tracking: -0.02em; /* type scale */ --fs-mega: clamp(3.4rem, 11vw, 10rem); --fs-hero: clamp(2.9rem, 7.6vw, 7rem); --fs-h1: clamp(2.5rem, 5.6vw, 5rem); --fs-h2: clamp(1.95rem, 4.2vw, 3.6rem); --fs-h3: clamp(1.25rem, 1.9vw, 1.65rem); --fs-lead: clamp(1.12rem, 1.55vw, 1.5rem); --fs-body: 1.0625rem; --fs-sm: 0.9rem; --fs-eyebrow:0.78rem; /* layout */ --maxw: 1280px; --maxw-narrow: 920px; --gutter: clamp(20px, 5vw, 76px); --sec-y: clamp(80px, 11vw, 184px); /* motion */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur: .7s; /* accent intensity (tweakable) */ --glow: 0.55; } /* display font variants (tweak switches data-display on ) */ html[data-display="condensed"]{ --font-display: 'Saira Condensed', system-ui, sans-serif; --display-weight: 700; --display-tracking: 0em; } html[data-display="grotesk"]{ --font-display: 'Archivo', system-ui, sans-serif; --display-weight: 800; --display-tracking: -0.02em; } html[data-display="oswald"]{ --font-display: 'Oswald', system-ui, sans-serif; --display-weight: 600; --display-tracking: 0.005em; } /* motion intensity (tweak) */ html[data-motion="subtle"]{ --dur:.5s; } html[data-motion="subtle"] .reveal{ transform:translateY(14px); } html[data-motion="bold"]{ --dur:.95s; } html[data-motion="bold"] .reveal{ transform:translateY(42px); } /* headline case (tweak) — overrides inline uppercase */ html[data-headlines="flat"] .display, html[data-headlines="flat"] h1, html[data-headlines="flat"] h2, html[data-headlines="flat"] h3, html[data-headlines="flat"] .statement, html[data-headlines="flat"] .hero h1{ text-transform:none !important; }