/* ============================================================ CB Peak — Brand foundations Colours & Type tokens. Inspired by the Peak District: moorland green, millstone-grit bracken gold, gritstone ink, warm paper. Import this file or copy the :root block. ============================================================ */ /* Fonts are Spectral (display serif) + Hanken Grotesk (sans / wordmark), both open-licence (OFL). They are SELF-HOSTED (no Google Fonts CDN / third-party requests) — woff2 files live in fonts/ and are declared in fonts.css. Load BEFORE this file in the HTML : */ :root { /* ---- Core palette ---- */ --ink: #22241F; /* gritstone — primary text */ --ink-soft: #4A4D44; /* secondary text */ --moss: #33483B; /* moorland green — primary brand */ --moss-deep: #26362C; /* deep green — dark surfaces */ --moss-soft: #4E6553; /* muted green — lines, hovers on dark */ --bracken: #B07B3C; /* millstone-grit gold — accent only */ --bracken-deep:#8F6230; /* gold pressed/hover */ --heather: #6E5570; /* rare secondary accent (use sparingly) */ /* ---- Neutrals / surfaces ---- */ --paper: #F4F1EA; /* warm off-white — page background */ --paper-2: #EAE4D8; /* sand — alternating sections */ --mist: #FBFAF6; /* card surface */ --line: #D9D2C3; /* hairline borders */ --line-soft: #E6E0D4; --muted: #6A6D62; /* captions, meta */ --white: #FFFFFF; /* ---- Typography families ---- */ --font-display: "Spectral", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* ---- Type scale (fluid where useful) ---- */ --step--1: 0.833rem; /* 13.3px — captions */ --step-0: 1rem; /* 16px — body */ --step-1: 1.25rem; /* 20px — lead */ --step-2: 1.563rem; /* 25px — h3 */ --step-3: 1.953rem; /* 31px — h2 */ --step-4: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); /* h1 */ --step-5: clamp(2.8rem, 1.8rem + 4.4vw, 5rem); /* display / hero */ /* ---- Spacing scale (8px base) ---- */ --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; /* ---- Radii ---- */ --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px; /* ---- Elevation (soft, warm-tinted) ---- */ --shadow-sm: 0 1px 2px rgba(34,36,31,.06), 0 1px 1px rgba(34,36,31,.04); --shadow: 0 4px 14px rgba(34,36,31,.08), 0 1px 3px rgba(34,36,31,.06); --shadow-lg: 0 18px 48px rgba(34,36,31,.14), 0 4px 12px rgba(34,36,31,.08); /* ---- Motion ---- */ --ease: cubic-bezier(.22,.61,.36,1); --dur: .28s; } /* ============================================================ Semantic element styles — opt in by adding the base class to a container, or copy individual rules. ============================================================ */ .cb-type { color: var(--ink); font-family: var(--font-sans); } .cb-type h1, .cb-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-4); line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; color: var(--ink); } .cb-type h2, .cb-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); line-height: 1.12; letter-spacing: -.005em; color: var(--ink); } .cb-type h3, .cb-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-2); line-height: 1.2; color: var(--ink); } .cb-type p, .cb-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--step-0); line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; } .cb-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); } .cb-quote, blockquote.cb-quote { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: var(--step-2); line-height: 1.45; color: var(--ink); } /* Eyebrow / overline — the brand's signature label style */ .cb-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--bracken); } .cb-meta, small.cb-meta { font-family: var(--font-sans); font-weight: 500; font-size: var(--step--1); letter-spacing: .02em; color: var(--muted); }