/* ========================================================= DESIGN TOKENS single source of truth ========================================================= Every color, font size, radius, shadow, spacing, duration and z-index used anywhere in this theme is defined ONCE here as a custom property. Component stylesheets (header.css, hero.css, and every section added after them) consume these via var() they must never hardcode a hex value, px size, shadow or transition that already has a token below. Declared on :root (not scoped to a component wrapper) so every section can use them, regardless of markup nesting. See ../../BRAND-IDENTITY.md for the human-readable guide to how and when to use each group. ========================================================= */ :root { /* ---- 1. Brand color raw values ----------------------- */ --fm-black: #0a0908; /* primary dark background (header, hero) */ --fm-black-2: #131210; /* secondary dark background (topbar strip) */ --fm-gold: #C9A236; /* primary accent borders, active states, CTAs (was #c9a45c; unified with the topbar/hero sidebar gold) */ --fm-gold-light: #C9A236; /* gold hover fills, highlights (was a paler, near-white gold; now the same rich gold as the topbar/hero sidebar) */ --fm-gold-deep: #C9A236; /* deep gold icon strokes, link hover, flyout titles (unified with --fm-gold) */ --fm-cream: #f3efe7; /* primary text/UI color on dark backgrounds */ --fm-cream-dim: #cfc8bd; /* secondary/muted text on dark backgrounds */ /* ---- 2. RGB triplets, for composing one-off alphas ------ */ /* Use rgba(var(--fm-rgb-gold), 0.35) instead of retyping "201,162,54". */ --fm-rgb-black: 0, 0, 0; --fm-rgb-black-warm: 6, 5, 4; /* warm-black used in the hero video scrim */ --fm-rgb-white: 255, 255, 255; --fm-rgb-gold: 201, 162, 54; --fm-rgb-gold-light: 232, 220, 192; --fm-rgb-cream: 243, 239, 231; /* ---- 3. Ink text on light/white panels ----------------- Sharp, neutral blacks/grays no warm brown tint. Primary text tiers (ink/soft/strong/icon-hover) are true black; mute/faint stay as neutral (desaturated) grays at their original lightness so the muted-text hierarchy is preserved. */ --fm-ink: #000000; /* megamenu titles, body copy */ --fm-ink-soft: #000000; /* flyout/cart link text */ --fm-ink-mute: #515151; /* megamenu item captions */ --fm-ink-faint: #909090; /* cart item meta (lightest muted text) */ --fm-ink-strong: #000000; /* darkest shop button hover text */ --fm-ink-icon-hover: #000000; /* icon stroke when its circle fills gold */ /* ---- 4. Extended gold / tan accents --------------------- All four unified to the same gold as --fm-gold/--fm-gold-light kept as separate named tokens (rather than merged into one) only so each usage site still says *why* it's gold, not because the color itself differs anymore. */ --fm-gold-icon: #C9A236; /* default icon stroke, card border on hover */ --fm-gold-pale: #C9A236; /* hero eyebrow text */ --fm-gold-soft: #C9A236; /* hero subline, sidebar category label */ --fm-gold-sale: #C9A236; /* "Sale" nav item */ /* ---- 5. Surfaces ----------------------------------------- */ --fm-white: #ffffff; /* literal white panel backgrounds and the one full-white hover text (hero category link) */ --fm-surface: var(--fm-white); /* flyout / megamenu panel background */ --fm-surface-page: #faf8f4; /* background */ --fm-surface-warm-hi: #fbf7ee; /* outline-button hover background */ --fm-headline-light: #fbf8f2; /* hero headline / promo title (near-white, warm) */ /* ---- 6. Dividers on light panels ------------------------- Three distinct, intentionally different shades do not merge them, they signal different levels of emphasis. */ --fm-divider-strong: #f0e6d0; /* section-title underlines (flyout/megamenu titles) */ --fm-divider-card: #f2ece0; /* card borders (megamenu item tiles) */ --fm-divider-soft: #f4efe4; /* list-row separators (flyout links, cart items) */ --fm-divider-cart: #eee2c9; /* cart subtotal rule */ --fm-outline-warm: #ddd0ae; /* outline-button border */ --fm-hairline-dark: rgba(255, 255, 255, 0.12); /* dividers on dark backgrounds */ /* ---- 7. Gradient stop sets -------------------------------- Reused wherever the same art-directed gradient repeats. */ --fm-grad-sidebar-1: #18140f; --fm-grad-sidebar-2: #0d0b08; /* 3rd stop is --fm-black */ --fm-grad-thumb-1: #f8f1e2; /* cart thumb + megamenu thumb (identical gradient) */ --fm-grad-thumb-2: #ead8b0; --fm-grad-thumb-3: #cda869; --fm-grad-portrait-1: #e7d9c4; --fm-grad-portrait-2: #cdb896; --fm-grad-portrait-3: #a98f68; --fm-grad-promo-1: #2a2420; --fm-grad-promo-2: #4a3a22; --fm-grad-promo-3: #7c5b21; /* ---- 8. Typography ---------------------------------------- */ --fm-font-serif: 'Playfair Display', 'Georgia', serif; --fm-font-sans: 'Jost', Arial, Helvetica, sans-serif; /* Named by literal size the type scale here grew organically (17 close steps), so a t-shirt scale (xs/sm/md…) would lie about how different two adjacent steps really are. Reuse the closest existing step before adding a new one. */ --fm-text-8-5: 8.5px; --fm-text-9: 9px; --fm-text-9-5: 9.5px; --fm-text-10: 10px; --fm-text-10-5: 10.5px; --fm-text-11: 11px; --fm-text-11-5: 11.5px; --fm-text-12: 12px; --fm-text-12-5: 12.5px; --fm-text-13: 13px; --fm-text-13-5: 13.5px; --fm-text-14: 14px; --fm-text-15: 15px; --fm-text-16: 16px; --fm-text-19: 19px; --fm-text-21: 21px; --fm-text-24: 24px; --fm-text-display: clamp(28px, 2.8vw, 44px); /* hero headline only the uppercase treatment (see hero.css's own comment on .headline) already reads noticeably bigger than mixed case at the same size, so this stays well under what a mixed-case headline would use */ /* ---- 9. Spacing scale ------------------------------------- 4px rhythm. Existing header/hero padding predates this scale and was left as-is (see BRAND-IDENTITY.md) use these tokens for every NEW spacing value instead of a bare px number. */ --fm-space-1: 4px; --fm-space-2: 8px; --fm-space-3: 12px; --fm-space-4: 16px; --fm-space-5: 20px; --fm-space-6: 24px; --fm-space-7: 32px; --fm-space-8: 40px; --fm-space-9: 48px; /* ---- 10. Radius --------------------------------------------- */ /* Consistent rounded scale. Every component references these tokens rather than literal px values so radius stays a single source of truth. */ --fm-radius-sm: 4px; --fm-radius-md: 8px; --fm-radius-lg: 12px; --fm-radius-pill: 999px; --fm-radius-circle: 50%; /* ---- 11. Shadows ---------------------------------------------- */ --fm-shadow-flyout: 0 24px 48px rgba(0, 0, 0, 0.25); /* account/wishlist/cart flyouts */ --fm-shadow-mega: 0 32px 60px rgba(0, 0, 0, 0.28); /* subnav mega-menu panel */ --fm-shadow-sidebar-mega: 0 30px 60px rgba(0, 0, 0, 0.35); /* hero sidebar megamenu */ --fm-shadow-card-hover: 0 14px 24px rgba(138, 109, 47, 0.18); /* card hover lift (megamenu items) */ --fm-shadow-sticky: 0 12px 30px rgba(0, 0, 0, 0.25); /* sticky header on scroll */ /* ---- 12. Motion ------------------------------------------------ */ --fm-ease: ease; /* the only easing function used in this theme */ --fm-duration-fast: 0.2s; /* hover color/icon swaps */ --fm-duration-base: 0.25s; /* panels, padding, transforms */ --fm-duration-med: 0.3s; /* topbar collapse, sticky-header padding, drawer sub-menus */ --fm-duration-slow: 0.35s; /* button fill-sweep */ /* One-off durations (0.22s mega-menu fade, 0.32s drawer slide) are left literal in their rule each is used exactly once, so a token would add a name without adding reuse, and forcing it onto the nearest step above would silently change that one animation's timing. */ /* ---- 13. Z-index scale ------------------------------------------ Keep every new stacking value here rather than picking an arbitrary number stacking bugs are easiest to avoid when every layer's number is decided in one place. */ --fm-z-flyout: 20; /* account/wishlist/cart panels */ --fm-z-backdrop: 25; /* dim overlay behind mega-menu/drawer */ --fm-z-mega: 30; /* subnav mega-menu panel */ --fm-z-header: 100; /* sticky header */ --fm-z-drawer: 200; /* mobile off-canvas drawer (always on top) */ } /* ========================================================= LIGHT THEME Dark (above, on :root) is still the default/fallback. header.php now hardcodes data-theme="light" on there is no toggle and no dark mode reachable on the live site anymore but every light-theme override below is kept as-is rather than merged into :root, since removing that indirection would mean re-deriving which of the two values each component actually wants. Only the one global, never-overloaded swap lives here (the page background). Every component's own dark-chrome -> light swap is instead scoped to that component's own root class, in that component's own stylesheet (search "data-theme=\"light\"" per file: header.css, site-footer.css, hero-adjacent home sections, and each page-*.css/single-post.css/page-404.css). That's deliberate: --fm-black, --fm-cream and --fm-headline-light are each reused by BOTH a flat dark UI panel (which should turn light) AND a photographic element the hero video, mega-menu/drawer promo tiles, product-card thumbnails that must keep its dark scrim for legibility over a photo regardless of theme. A blanket redefinition here would relight those photo scrims too. Scoping the override to each flat panel's own root class edits only the panels that should change. The hero video section itself (.hero-wrap) is intentionally left with no light override at all: it's a cinematic full-bleed video treatment, not a chrome color choice. ========================================================= */ html[data-theme="light"] { --fm-surface-page: #F5EDE6; /* background */ } /* Breakpoints (documented here for reference CSS custom properties cannot be used inside @media conditions, so these stay literal in each stylesheet's @media rules): 1180px hide topbar trust badges; container padding 48→24px 980px hide reviews badge; search bar caps at 320px; hide action labels 900px hide hero portrait image 860px hide subnav & desktop search; show mobile burger/drawer 760px hero stacks vertically; sidebar goes full-width 520px container padding 24→16px; hide tagline/contact number */