/* * Feast and Find, Design Tokens (CSS layer) * Source: Figma file 3312:2, measured 2026-04-16 */ :root { /* ── Brand colors (from Figma) ───────────────────────── */ --ff-ocean: var(--wp--preset--color--ocean); /* #006380 */ --ff-navy: var(--wp--preset--color--navy); /* #1c1c17 */ --ff-teal: var(--wp--preset--color--teal); /* #98f0da */ --ff-teal-dark: var(--wp--preset--color--teal-dark); /* #00705e */ --ff-coral: var(--wp--preset--color--coral); /* #9a3d2e */ --ff-sand: var(--wp--preset--color--sand); /* #fdf9f1 */ --ff-sand-alt: var(--wp--preset--color--sand-alt); /* #f7f3eb */ --ff-white: var(--wp--preset--color--white); --ff-muted: var(--wp--preset--color--muted); /* #3f484d */ --ff-stone: var(--wp--preset--color--stone); /* #57534e */ --ff-footer-bg: var(--wp--preset--color--footer); /* #f5f5f4 */ --ff-footer-text: var(--wp--preset--color--footer-text); /* #78716c */ --ff-border: var(--wp--preset--color--border); /* ── Derived / icon background colors (from Figma) ──── */ --ff-icon-bg-blue: #bee9ff; --ff-icon-bg-teal: #98f0da; --ff-icon-bg-coral: #ffdad4; --ff-coral-dark: #7a3024; --ff-ocean-light: #bee9ff; --ff-overlay-tag-ocean: rgba(16,125,160,0.8); --ff-overlay-tag-coral: rgba(185,85,68,0.8); --ff-overlay-tag-teal: rgba(0,107,90,0.8); /* ── Gradient (hero) ─────────────────────────────────── */ --ff-gradient-hero: linear-gradient(135deg, #006380 0%, #004d63 100%); /* ── Radius (from Figma) ─────────────────────────────── */ --ff-radius: var(--wp--custom--radius); /* 24px, cards, images */ --ff-radius-pill: var(--wp--custom--radius-pill); /* 9999px, buttons */ --ff-radius-sm: var(--wp--custom--radius-small); /* 8px, thumbnails */ /* ── Shadows (from Figma) ────────────────────────────── */ --ff-shadow-card: var(--wp--custom--shadow--card); --ff-shadow-card-hover: var(--wp--custom--shadow--card-hover); --ff-shadow-nav: var(--wp--custom--shadow--nav); --ff-shadow-button: var(--wp--custom--shadow--button); --ff-shadow-deep: var(--wp--custom--shadow--deep); /* ── Transitions ─────────────────────────────────────── */ --ff-ease-fast: var(--wp--custom--transition--fast); --ff-ease-normal: var(--wp--custom--transition--normal); /* ── Layout ──────────────────────────────────────────── */ --ff-content-width: 720px; /* 2026 layout pass: 1280 → 1200 to align content with Astra's native * --ast-normal-container-width: 1200px (which the site header uses). At * 1280 our content extended ~40 px past the header's left/right edges on * 1440-px+ viewports, the visual mismatch read as "content stuck left" * because the body grid started outside the nav grid. Aligning both to * 1200 puts header and content on the exact same vertical lines. */ --ff-wide-width: 1200px; --ff-page-padding: 48px; /* 2026 layout system tokens, semantic, fluid, responsive. * --ff-container for editorial-width blocks (1080 px), aligns with the * body of an Astra page minus generous gutters. * --ff-container-wide for full-width feature/grid layouts (1200 px), * matches Astra's header grid line-for-line. * --ff-page-gutter is the side padding everywhere, clamp shrinks * gracefully on phones (20 px floor) and grows on desktops (64 px * ceiling), eliminating per-viewport overrides on every container. * * Use these via the .ff-container / .ff-container-wide utility classes * in global.css (preferred) or directly in component rules. */ --ff-container: 1080px; --ff-container-wide: 1200px; --ff-page-gutter: clamp(20px, 5vw, 64px); /* ── Z-index ─────────────────────────────────────────── */ --ff-z-sticky: 200; --ff-z-overlay: 300; /* ══ Typography scale ════════════════════════════════════ * Centralized font-size + line-height tokens for the whole site. * Goal: individual CSS rules reference these tokens so the type * system is visible from one file and scales with single-knob edits. * * The scale is a ~1.125× progression tuned for editorial legibility * on a 40+/50+/60+ reader audience (strategy-doc explicit audience). * * Migration status (2026-04-23): tokens are declared here; a subset * of high-visibility rules (hero body line-height, eyebrow letter- * spacing, section-header typography) reference them directly. * Remaining legacy px values in homepage.css / pages.css continue to * work unchanged and can be migrated incrementally as sections are * refactored. Nothing in the scale changes the current visual, it * captures and documents what exists. * ──────────────────────────────────────────────────────── */ /* Display / hero titles */ --ff-font-display: clamp(3rem, 5vw, 4.5rem); /* 48-72, homepage hero H1 */ --ff-font-page-title: clamp(2rem, 4vw, 3rem); /* 32-48, page-hero H1 */ /* Section titles */ --ff-font-section-lg: 48px; /* Split section h2 (hero-adjacent) */ --ff-font-section: 36px; /* Standard section h2 */ --ff-font-section-sm: 28px; /* Article-in-body h2 / form-head */ /* Card / tile titles */ --ff-font-card-xl: 32px; /* Feature-card title */ --ff-font-card-lg: 24px; /* Large card (guide) title */ --ff-font-card: 20px; /* Standard card title (tool-card) */ --ff-font-card-sm: 18px; /* Compact card title (article-thumb h4) */ --ff-font-label: 16px; /* List-label h3 (sidecard) */ /* Body sizes * 2026-04-23 accessibility pass: lifted 1 px at every step (16→17, 15→16, * 14→15) to improve readability for the 40+/50+/60+ reader audience * without changing the scale's relative rhythm. Larger sizes unchanged. */ --ff-font-body-xl: 20px; /* Hero body / article deck */ --ff-font-body-lg: 18px; /* Long-form article body */ --ff-font-body: 17px; /* Default body */ --ff-font-body-sm: 16px; /* Compact card body */ --ff-font-body-xs: 15px; /* Meta / footnote */ /* Eyebrows (uppercase small labels) */ --ff-font-eyebrow: 12px; --ff-eyebrow-tracking: 0.1em; /* Standardized letter-spacing */ --ff-eyebrow-weight: 700; /* Line-height scale (unitless, multiplies font-size) */ --ff-lh-display: 1.05; /* Display / hero title */ --ff-lh-tight: 1.2; /* Large headings */ --ff-lh-snug: 1.3; /* Medium headings / card titles */ --ff-lh-body-tight: 1.4; /* Hero deck / display body */ --ff-lh-body: 1.55; /* Standard body / card body */ --ff-lh-body-relaxed: 1.7; /* Long-form editorial body */ }