/* ============================================================================= JDM Web Solutions — design tokens Ported verbatim from design_handoff_jdm_website/tokens/*.css. The export splits these across six files behind @import. With no bundler to flatten them, each @import is a serial round trip that blocks rendering, so they are concatenated here and kept in the original order with the original comments. Values are unchanged — if the export is revised, re-port rather than hand-editing. Fonts are loaded from the HTML with preconnect instead of the export's CSS @import, for the same reason. ========================================================================== */ /* ------------------------------------------------------------------ colors */ :root{ /* --- Brand blues, sampled directly from the JDM logo --- */ --navy-900:#0B1638; /* logo navy, darkest */ --navy-800:#101F4C; /* logo navy, body of the letterforms */ --electric-500:#0D7DF2; /* the accent stroke on the M and the rules under the wordmark */ --electric-400:#3D9BFF; --blue-900:#0B2C4F; --blue-800:#123E6E; --blue-700:#174274; /* logo darkest stop */ --blue-600:#1F5A96; --blue-500:#2E6DA4; /* primary */ --blue-400:#3E8EB4; /* logo mid-teal stop */ --blue-300:#77A7CD; /* logo light stop */ --blue-200:#B9D2E6; --blue-100:#E3EEF7; /* --- Ink / neutrals (cool near-blacks, warm paper) --- */ --ink-900:#14161A; --ink-800:#22262C; --ink-700:#3A3F46; --ink-600:#545454; /* logo wordmark grey */ --ink-400:#8B9099; /* Added to the export's ramp, not in it. The muted half of the Problem headline used --ink-300, which measures 1.5:1 on cream where 3:1 is the floor for large text. --ink-400 only reaches 2.84:1 — still short. This clears it at 3.47:1 while staying visibly lighter than the cocoa it sits beside, which is the whole point of the treatment. */ --ink-500:#7C818A; --ink-300:#C3C7CD; --paper-100:#FFFFFF; --paper-200:#FAF8F3; --paper-300:#F4F1EA; /* cream section base */ --paper-400:#E8E3D8; /* --- Accents: one warm signal, one highlight. Same hue family. --- */ --orange-500:#F2622A; --orange-400:#FF8551; --yellow-400:#FFC940; --yellow-300:#FFE08A; /* --- Gradient lifted from the logo mark --- */ --brand-gradient:linear-gradient(135deg,var(--navy-800) 0%,var(--blue-600) 55%,var(--electric-500) 100%); --brand-gradient-deep:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-800) 60%,var(--blue-700) 100%); /* --- Semantic aliases: use these in components --- */ --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-400); --text-on-dark:var(--paper-100); --text-on-dark-muted:var(--blue-200); --text-accent:var(--orange-500); --text-link:var(--blue-600); --text-link-hover:var(--blue-800); --surface-page:var(--paper-200); --surface-cream:var(--paper-300); --surface-card:var(--paper-100); --surface-dark:var(--ink-900); --surface-brand:var(--blue-600); --surface-brand-deep:var(--navy-800); --surface-navy:var(--navy-900); --surface-tint:var(--blue-100); --border-subtle:rgba(20,22,26,.10); --border-strong:rgba(20,22,26,.24); --border-on-dark:rgba(255,255,255,.16); --focus-ring:var(--blue-400); --state-success:#2E9E6B; --state-warning:var(--yellow-400); --state-error:#D0402B; /* -------------------------------------------------------------- typography */ --font-display:"Anton","Haettenschweiler","Arial Narrow",sans-serif; --font-sans:"Archivo","Helvetica Neue",Helvetica,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace; /* Display: always uppercase, always tight. This is the loudest brand signal. */ --text-display-xl:clamp(56px,7.4vw,124px); --text-display-l:clamp(40px,4.8vw,76px); --text-display-m:clamp(32px,3.2vw,52px); --text-display-s:28px; --text-h3:24px; --text-h4:19px; --text-body-l:18px; --text-body:16px; --text-body-s:14px; --text-label:12px; --text-label-s:11px; --leading-display:0.90; --leading-tight:1.12; --leading-body:1.55; --leading-loose:1.7; --tracking-display:-0.015em; --tracking-tight:-0.01em; --tracking-label:0.14em; --tracking-wide:0.06em; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; /* ----------------------------------------------------------------- spacing */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --space-11:160px; --section-y:var(--space-10); /* vertical rhythm between page sections */ --section-y-tight:var(--space-9); --gutter:var(--space-6); --container:1280px; --container-wide:1560px; --container-text:720px; --grid-cols:12; /* ----------------------------------------------------------------- effects */ --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px; --shadow-card:0 1px 2px rgba(11,44,79,.06),0 8px 24px rgba(11,44,79,.07); --shadow-raised:0 2px 4px rgba(11,44,79,.06),0 16px 40px rgba(11,44,79,.12); --shadow-float:0 32px 70px rgba(11,44,79,.20); --shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle); --ease-out:cubic-bezier(.22,.61,.36,1); --ease-inout:cubic-bezier(.65,.05,.36,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:420ms; --blur-glass:saturate(140%) blur(14px); --stripe-tint:repeating-linear-gradient(90deg,rgba(46,109,164,.14) 0 1px,transparent 1px 7px); } /* -------------------------------------------------------------------- base */ *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--surface-page);color:var(--text-body); font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body); -webkit-font-smoothing:antialiased;text-wrap:pretty} h1,h2,h3,h4{margin:0;color:var(--text-strong)} h1,h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase; line-height:var(--leading-display);letter-spacing:var(--tracking-display)} h3,h4{font-family:var(--font-sans);font-weight:var(--weight-bold);line-height:var(--leading-tight); letter-spacing:var(--tracking-tight)} p{margin:0} a{color:var(--text-link);text-decoration:none;border-bottom:1px solid currentColor; transition:color var(--dur-fast) var(--ease-out)} a:hover{color:var(--text-link-hover)} button{font:inherit} ::selection{background:var(--yellow-400);color:var(--ink-900)}