/* ========================================================= Zeal — Colours & Type Foundation CSS variables for the Zeal brand system. Import this file first, before any component styles. ========================================================= */ /* ----------------------------- Fonts — Aktiv Grotesk via Adobe Typekit ----------------------------- */ /* Font loading happens in the of each page — DO NOT add @font-face blocks here. Load the existing wearezeal.co Typekit kit: The kit must publish these three family names (the Typekit admin lets you rename — do it once, site-wide): aktiv-grotesk → Standard aktiv-grotesk-extended → Extended (heads, display) aktiv-grotesk-condensed → Condensed (metadata, eyebrows) Weights required: 300 (light), 400 (regular), 500 (medium), 700 (bold), 800 (extra-bold), 900 (black). The --font-* variables below resolve to those kit names, with robust fallbacks to the Standard cut, then Helvetica/Arial. */ /* ----------------------------- Tokens ----------------------------- */ :root { /* --- Primary palette (from Brandbook p.15) --- */ --zeal-orange: #FF5800; /* PMS 021 — primary, everywhere */ --zeal-purple: #470A68; /* PMS 2617 — territory */ --zeal-warm-grey: #DBC8B6;/* PMS 482 — supporting */ --zeal-white: #FFFFFF; --zeal-black: #000000; /* text only */ /* Digital orange — accessibility shade for small onscreen text (p.20) */ --zeal-orange-digital: #DC3C00; /* --- Graphic Gradient — two-stop orange (p.22) --- */ --zeal-gradient-dark: #F03C00; --zeal-gradient-light: #FF8200; --zeal-graphic-gradient: linear-gradient(180deg, var(--zeal-gradient-light) 0%, var(--zeal-gradient-dark) 100%); --zeal-graphic-gradient-h: linear-gradient(90deg, var(--zeal-gradient-light) 0%, var(--zeal-gradient-dark) 100%); --zeal-graphic-gradient-45: linear-gradient(45deg, var(--zeal-gradient-light) 0%, var(--zeal-gradient-dark) 100%); /* Image Gradient — 3-stop, used as Overlay on photography (p.38) */ --zeal-image-gradient: linear-gradient(180deg, #FFAC80 0%, #FF5800 50%, #F03C00 100%); /* --- Primary palette tints (p.18) — 25 / 50 / 75 / 100 --- */ --zeal-orange-25: #FFD6BF; --zeal-orange-50: #FFAC80; --zeal-orange-75: #FF8240; --zeal-orange-100: var(--zeal-orange); --zeal-purple-25: #D1C2DA; --zeal-purple-50: #A385B4; --zeal-purple-75: #74478E; --zeal-purple-100: var(--zeal-purple); --zeal-warm-grey-25: #F4EEE8; --zeal-warm-grey-50: #EDDDD0; --zeal-warm-grey-75: #E4D2BE; --zeal-warm-grey-100: var(--zeal-warm-grey); /* --- Accent palette (p.17) — one at a time, never all three --- */ --zeal-red: #C10016; /* PMS 3517 */ --zeal-yellow: #FEDD00; /* PMS Yellow */ --zeal-green: #C4D600; /* PMS 382 */ /* Accent tints */ --zeal-red-25: #F0BFC4; --zeal-red-50: #E07F8A; --zeal-red-75: #D13F50; --zeal-yellow-25: #FFF7BF; --zeal-yellow-50: #FFEE80; --zeal-yellow-75: #FEE640; --zeal-green-25: #F0F5BF; --zeal-green-50: #E1EB80; --zeal-green-75: #D3E040; /* --- Semantic (light surfaces: White / Warm Grey) --- */ --bg-primary: var(--zeal-orange); /* our go-to background */ --bg-secondary: var(--zeal-white); --bg-muted: var(--zeal-warm-grey-25); --bg-territory: var(--zeal-purple); --bg-warm: var(--zeal-warm-grey); --fg-on-orange: var(--zeal-white); --fg-on-purple: var(--zeal-white); --fg-on-white: var(--zeal-black); --fg-on-warm: var(--zeal-black); --fg-1: var(--zeal-black); /* primary text on light */ --fg-2: color-mix(in srgb, var(--zeal-black) 65%, transparent); --fg-3: color-mix(in srgb, var(--zeal-black) 45%, transparent); --accent: var(--zeal-orange); --accent-hover: var(--zeal-gradient-dark); --accent-press: #C93200; --link: var(--zeal-orange-digital); --border-soft: color-mix(in srgb, var(--zeal-warm-grey) 70%, white); --border-strong: var(--zeal-black); /* --- Type — families (Typekit names, with fallbacks) --- */ --font-ex: "aktiv-grotesk-extended", "aktiv-grotesk", Helvetica, Arial, sans-serif; --font-std: "aktiv-grotesk", Helvetica, Arial, sans-serif; --font-cd: "aktiv-grotesk-condensed","aktiv-grotesk", Helvetica, Arial, sans-serif; --font-fallback: Helvetica, Arial, sans-serif; /* --- Type — weights (full range available) --- */ --w-hair: 100; --w-thin: 200; --w-light: 300; --w-regular: 400; --w-medium: 500; --w-bold: 700; --w-xbold: 800; --w-black: 900; /* --- Type — sizes (1.3 ratio, Brandbook p.50) --- */ --t-hero: 120px; --t-h1: 60px; --t-h2: 46px; --t-h3: 35px; /* subhead */ --t-h4: 27px; --t-h5: 21px; --t-body-lg: 20px; --t-body: 16px; --t-small: 13px; --t-micro: 11px; --lh-display: 1.0; /* 60/60, 35/35 — tight headlines */ --lh-snug: 1.15; --lh-body: 1.2; /* 16/19.2 */ --lh-relaxed: 1.4; /* Tracking — brandbook uses negative optical tracking at display sizes */ --track-hero: -0.045em; --track-head: -0.035em; --track-sub: -0.03em; --track-body: -0.005em; --track-wide: 0.08em; /* all-caps eyebrows */ /* --- Spacing scale (4px base, generous whitespace) --- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; --s-12: 256px; /* --- Radii — Zeal is largely square / 0px. Soft pills only where UI demands. --- */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-pill: 999px; /* --- Elevation — Zeal does not lean on shadows. These are available for functional UI (menus, toasts) only. --- */ --shadow-1: 0 1px 2px rgba(0,0,0,0.06); --shadow-2: 0 6px 20px rgba(0,0,0,0.08); --shadow-3: 0 14px 40px rgba(0,0,0,0.12); /* --- Motion --- */ --ease-std: cubic-bezier(.2,.7,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 420ms; /* --- Container widths --- */ --content-narrow: 720px; --content-std: 1040px; --content-wide: 1280px; } /* ========================================================= Semantic element styles ========================================================= */ html, body { font-family: var(--font-std); color: var(--fg-1); background: var(--bg-secondary); font-weight: var(--w-regular); font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--track-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: var(--font-ex); font-weight: var(--w-bold); letter-spacing: var(--track-head); line-height: var(--lh-display); margin: 0 0 var(--s-4) 0; text-wrap: balance; } h1, .h1 { font-size: var(--t-h1); letter-spacing: var(--track-hero); } h2, .h2 { font-size: var(--t-h2); } h3, .h3 { font-size: var(--t-h3); font-weight: var(--w-bold); letter-spacing: var(--track-sub); } h4, .h4 { font-size: var(--t-h4); line-height: var(--lh-snug); } h5, .h5 { font-size: var(--t-h5); line-height: var(--lh-snug); } .hero { font-family: var(--font-ex); font-weight: var(--w-black); font-size: var(--t-hero); letter-spacing: var(--track-hero); line-height: var(--lh-display); } .subhead { font-family: var(--font-ex); font-weight: var(--w-medium); font-size: var(--t-h3); line-height: var(--lh-display); letter-spacing: var(--track-sub); } p, .body { font-family: var(--font-std); font-size: var(--t-body); line-height: var(--lh-body); margin: 0 0 var(--s-4) 0; text-wrap: pretty; } .body-lg { font-size: var(--t-body-lg); line-height: 1.3; } .small { font-size: var(--t-small); } .micro { font-size: var(--t-micro); letter-spacing: var(--track-wide); text-transform: uppercase; } /* Eyebrow — small caps label, condensed, spaced */ .eyebrow { font-family: var(--font-cd); font-size: var(--t-small); font-weight: var(--w-medium); letter-spacing: var(--track-wide); text-transform: uppercase; } /* Lowercase headline convention — a Zeal habit where it suits */ .lower { text-transform: lowercase; } /* Condensed utility (tight columns, credits, metadata) */ .condensed { font-family: var(--font-cd); } .extended { font-family: var(--font-ex); } a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-std); } a:hover { color: var(--accent-hover); } ::selection { background: var(--zeal-orange); color: var(--zeal-white); }