/* * ───────────────────────────────────────────────────────────── * DESIGN TOKENS — web-starter-kit v1 * groupany / webgroeiers * ───────────────────────────────────────────────────────────── * * HOW TO THEME A CLIENT SITE * 1. Copy tokens.css, base.css, components.css into the project. * 2. Create a client-theme.css that only overrides the brand * variables below (colour slots + font stacks). * 3. Compose the page from components.html snippets. * 4. Never re-write layout or component CSS from scratch. * * GROUNDED IN: * • damiandtla.com — muted deep bg, editorial left-align, * oversized logotype, justified menu text * • locomotive.ca — serif+sans pairing, thin rule dividers, * restrained single accent, generous margins * • saipua.com — monochromatic warm palette, italic serif * subheadings, minimal nav, breathing room * • dominiqueansel.com — full-bleed hero, product card overlay grid, * neutral base + single accent CTA, dark section breaks * ───────────────────────────────────────────────────────────── */ :root { /* ── COLOUR SLOTS ────────────────────────────────────────── * Override ONLY these in client-theme.css. * Every component uses only these names — never raw hex. * ────────────────────────────────────────────────────────── */ /* Primary brand colour — used for CTAs, accents, hover states */ --brand: #2C5F4A; /* deep green (override per client) */ --brand-rgb: 44, 95, 74; /* Secondary brand — headings, rich backgrounds, hero tints */ --brand-2: #1A3329; /* darker green */ --brand-2-rgb: 26, 51, 41; /* Accent — single pop colour; used sparingly on 1 element */ --accent: #C9A876; /* warm gold / tan */ --accent-rgb: 201, 168, 118; /* Ink — body text */ --ink: #1C1C1A; /* Canvas — page background */ --canvas: #FAFAF7; /* warm off-white */ /* Surface — card / section background */ --surface: #F3F1EC; /* slightly warmer white */ /* Muted — secondary text, captions, placeholders */ --muted: #7A7870; /* Overlay — semi-transparent dark for hero + card text overlays */ --overlay: rgba(26, 51, 41, 0.62); /* Rule / divider */ --rule: rgba(28, 28, 26, 0.12); /* ── TYPOGRAPHY STACKS ──────────────────────────────────── * Override in client-theme.css with Google Fonts @import. * ────────────────────────────────────────────────────────── */ /* Display / headline — premium serif (Garamond, Cormorant, Playfair) */ --font-display: 'Cormorant Garamond', 'Garamond', Georgia, serif; /* Body / UI — clean geometric sans */ --font-body: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif; /* Mono — prices, labels, data */ --font-mono: 'DM Mono', 'Fira Code', monospace; /* Default weights */ --weight-display: 400; --weight-display-bd: 600; --weight-body: 400; --weight-ui: 500; /* ── FLUID TYPE SCALE ───────────────────────────────────── * clamp(min, preferred, max) * Preferred uses viewport interpolation so it scales smoothly. * Base: 16px @ 375px → 18px @ 1440px viewport. * Scale ratio ≈ 1.25 (Major Third). * ────────────────────────────────────────────────────────── */ --step--1: clamp(0.75rem, 0.71rem + 0.19vw, 0.875rem); /* 12 → 14px */ --step-0: clamp(1rem, 0.93rem + 0.33vw, 1.125rem); /* 16 → 18px (base) */ --step-1: clamp(1.125rem, 1.00rem + 0.56vw, 1.375rem); /* 18 → 22px */ --step-2: clamp(1.375rem, 1.18rem + 0.93vw, 1.875rem); /* 22 → 30px */ --step-3: clamp(1.75rem, 1.44rem + 1.48vw, 2.5rem); /* 28 → 40px */ --step-4: clamp(2.25rem, 1.73rem + 2.41vw, 3.5rem); /* 36 → 56px */ --step-5: clamp(2.875rem, 2.04rem + 3.89vw, 4.875rem); /* 46 → 78px */ --step-6: clamp(3.75rem, 2.52rem + 5.93vw, 6.75rem); /* 60 → 108px */ /* ── SPACING SCALE (8-px base) ──────────────────────────── * Fluid: each step grows slightly with viewport. * Use for padding, gap, margin. * ────────────────────────────────────────────────────────── */ --space-2xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.3125rem); /* 4 → 5px */ --space-xs: clamp(0.5rem, 0.46rem + 0.19vw, 0.625rem); /* 8 → 10px */ --space-s: clamp(0.75rem, 0.69rem + 0.28vw, 0.9375rem); /* 12 → 15px */ --space-m: clamp(1rem, 0.93rem + 0.33vw, 1.125rem); /* 16 → 18px */ --space-l: clamp(1.5rem, 1.39rem + 0.56vw, 1.875rem); /* 24 → 30px */ --space-xl: clamp(2rem, 1.76rem + 1.11vw, 2.625rem); /* 32 → 42px */ --space-2xl: clamp(3rem, 2.63rem + 1.67vw, 3.875rem); /* 48 → 62px */ --space-3xl: clamp(4rem, 3.50rem + 2.22vw, 5.25rem); /* 64 → 84px */ --space-4xl: clamp(6rem, 5.13rem + 3.89vw, 8rem); /* 96 → 128px */ /* Section vertical rhythm (top + bottom padding of each
) */ --section-pad: clamp(4rem, 3.5rem + 2.22vw, 6rem); /* ── CONTAINER WIDTHS ───────────────────────────────────── * --container full content width * --container-text narrow prose / editorial column * --container-wide generous marketing / full-bleed row * ────────────────────────────────────────────────────────── */ --container: 1280px; --container-text: 680px; --container-wide: 1440px; /* Inline padding so containers don't touch viewport edges */ --container-pad: clamp(1.25rem, 4vw, 3rem); /* ── BORDER RADIUS ──────────────────────────────────────── * Override to 0 for strict geometric brands; * raise to 1.25rem for soft/playful brands. * ────────────────────────────────────────────────────────── */ --radius-xs: 2px; --radius-s: 4px; --radius-m: 8px; --radius-l: 16px; --radius-pill:9999px; /* ── SHADOW ─────────────────────────────────────────────── * Tinted with --brand for cohesion. * ────────────────────────────────────────────────────────── */ --shadow-s: 0 1px 4px rgba(var(--brand-rgb), 0.08), 0 2px 8px rgba(var(--brand-rgb), 0.06); --shadow-m: 0 4px 16px rgba(var(--brand-rgb), 0.10), 0 2px 6px rgba(var(--brand-rgb), 0.06); --shadow-l: 0 8px 32px rgba(var(--brand-rgb), 0.14), 0 2px 8px rgba(var(--brand-rgb), 0.06); /* ── EASING / TRANSITION ────────────────────────────────── * Consistent motion language — smooth but not sluggish. * ────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 260ms; --duration-slow: 420ms; --duration-enter: 600ms; /* ── Z-INDEX LADDER ─────────────────────────────────────── * Prevent stacking chaos in composed pages. * ────────────────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 300; /* ── LAYOUT HELPERS ─────────────────────────────────────── * Fine-grained control inside components. * ────────────────────────────────────────────────────────── */ --line-height-tight: 1.15; --line-height-heading: 1.25; --line-height-body: 1.65; --line-height-loose: 1.85; --letter-spacing-tight: -0.03em; --letter-spacing-base: 0; --letter-spacing-caps: 0.10em; --letter-spacing-wide: 0.06em; /* Measure (ideal max-width for body copy) */ --measure: 60ch; } /* ── DARK MODE SURFACE ADJUSTMENTS ───────────────────────── * Components use --canvas / --surface / --ink, so they auto-adapt. * Per-client dark mode: just override these in @media (prefers-color-scheme: dark). * ────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --canvas: #111310; --surface: #1C1E1A; --ink: #EDECEA; --muted: #928F8A; --rule: rgba(237, 236, 234, 0.10); } }