/* ========================================================================= tokens.css — Dealer Fule Design System ========================================================================= These are the parent theme defaults. Every child theme should override only the brand-specific tokens (colors, fonts, logo). Layout, spacing, motion, and shadow tokens stay constant across dealers for consistency. Override pattern in child theme style.css: :root { --color-brand: #0F2A44; // dealer's primary --color-accent: #B85838; // dealer's accent --font-display: 'Playfair Display', Georgia, serif; } That's the entire brand swap. ~30-50 lines per dealer. ========================================================================= */ :root { /* --------------------------------------------------------------------- * COLOR · BRAND * --------------------------------------------------------------------- * Defaults tuned for "Blue Fox" demo direction (warm editorial dealer). * Child themes override these three plus optional secondary/tertiary. */ --color-brand: #1D3557; /* deep trust blue */ --color-brand-dark: #142840; /* hover, dense bg */ --color-brand-light: #2E5079; /* tints, badges */ --color-accent: #C65D3E; /* rust — mascot fox */ --color-accent-dark: #A84A30; --color-accent-light: #E08366; --color-secondary: #3A5A3D; /* forest — outdoors */ --color-secondary-light: #5A7E5E; --color-gold: #F5B800; /* warm highlight, "sale" badges, ratings (v1.6.2: brightened from #D4A24C to match v4 mockup) */ --color-gold-dark: color-mix(in srgb, var(--color-gold) 85%, #000); /* gold CTA hover/active — derives from --color-gold so a dealer gold override flows through */ --color-coral: #E8654C; /* v1.10.0 compare-table "difference" marker — distinct from gold "best"; dealer-overridable */ --color-coral-tint: color-mix(in srgb, var(--color-coral) 9%, transparent); /* subtle differing-row tint */ /* --------------------------------------------------------------------- * COLOR · SURFACES (page backgrounds, card backgrounds, dividers) */ --color-surface: #FBF7EE; /* warm cream — page bg */ --color-surface-alt: #F2EBDB; /* alternating section bg */ --color-surface-card: #FFFFFF; /* unit cards, modals */ --color-surface-dark: #0E1A2A; /* footer, dark sections */ --color-surface-tint: #EFE8D6; /* hover state on cream surfaces */ --color-border: #E5DCC6; /* on cream */ --color-border-strong: #C9BC9B; /* emphasized dividers */ --color-border-dark: #1F3550; /* on dark surfaces */ /* --------------------------------------------------------------------- * COLOR · TEXT */ --color-text: #1A1A1A; /* body */ --color-text-muted: #5A5A5A; /* meta, captions */ --color-text-subtle: #8A8A8A; /* very low emphasis */ --color-text-on-brand: #FBF7EE; /* text on --color-brand bg */ --color-text-on-accent: #FFFFFF; --color-text-on-dark-muted: #7e8ea3; /* muted text/icons on dark surfaces (compare bar ghosts, footer) — tuned for navy; dealer-overridable */ --color-text-link: var(--color-brand); --color-text-link-hover: var(--color-accent); /* --------------------------------------------------------------------- * COLOR · SEMANTIC (status, alerts, sale badges) */ --color-success: #2E7D4F; --color-warning: #D4A24C; --color-danger: #B33A3A; --color-sale: var(--color-accent); /* "Save $8,000" */ --color-new: var(--color-secondary); --color-used: var(--color-text-muted); /* --------------------------------------------------------------------- * TYPOGRAPHY · FAMILIES * --------------------------------------------------------------------- * Display: Fraunces — variable serif with optical sizing, beautiful * italics for the "every kind of *getaway*" emphasis pattern. * Body: Bricolage Grotesque — fresh, characterful sans, not Inter. * Mono: JetBrains Mono fallback to ui-monospace. */ --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* --------------------------------------------------------------------- * TYPOGRAPHY · SCALE (modular, 1.25 ratio "major third") * Anchored at 1rem = 16px. Use clamp() for fluid headings. */ --fs-2xs: 0.6875rem; /* 11px — micro labels, breadcrumbs */ --fs-xs: 0.75rem; /* 12px — meta, badges */ --fs-sm: 0.875rem; /* 14px — captions, helper text */ --fs-base: 1rem; /* 16px — body */ --fs-md: 1.125rem; /* 18px — lead paragraph */ --fs-lg: 1.25rem; /* 20px — card titles */ --fs-xl: 1.5rem; /* 24px — section subheads */ --fs-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); /* H3 fluid */ --fs-3xl: clamp(2.25rem, 1.7rem + 2.5vw, 3.25rem); /* H2 fluid */ --fs-4xl: clamp(2.75rem, 1.9rem + 3.8vw, 4.5rem); /* H1 fluid */ --fs-display: clamp(3.5rem, 2.4rem + 5vw, 6rem); /* hero */ /* --------------------------------------------------------------------- * TYPOGRAPHY · WEIGHTS, LEADING, TRACKING */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.1; /* hero headlines */ --lh-snug: 1.25; /* H2/H3 */ --lh-normal: 1.5; /* body */ --lh-relaxed: 1.65; /* long-form prose, blog */ --tracking-tight: -0.02em; /* large display headings */ --tracking-snug: -0.01em; /* mid headings */ --tracking-normal: 0; --tracking-wide: 0.04em; /* eyebrow labels, buttons */ --tracking-wider: 0.08em; /* section eyebrows, ALL CAPS labels */ /* --------------------------------------------------------------------- * SPACING · 4px base, t-shirt scale */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px — section padding on desktop */ /* Section vertical rhythm (responsive) */ --section-py: clamp(3rem, 2rem + 4vw, 6rem); /* --------------------------------------------------------------------- * LAYOUT · CONTAINER WIDTHS */ --container-narrow: 720px; /* blog body */ --container-base: 1200px; /* default */ --container-wide: 1400px; /* hero, full-bleed sections */ --container-gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* --------------------------------------------------------------------- * RADIUS — generous on cards (warm/friendly), tighter on inputs */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* cards */ --radius-xl: 24px; /* hero search card */ --radius-pill: 9999px; --radius-full: 50%; /* --------------------------------------------------------------------- * SHADOWS — warm-tinted (matches cream surface), not pure black */ --shadow-xs: 0 1px 2px rgba(45, 30, 15, 0.06); --shadow-sm: 0 2px 4px rgba(45, 30, 15, 0.08), 0 1px 2px rgba(45, 30, 15, 0.04); --shadow-md: 0 8px 20px rgba(45, 30, 15, 0.10), 0 2px 4px rgba(45, 30, 15, 0.05); --shadow-lg: 0 16px 40px rgba(45, 30, 15, 0.12), 0 4px 8px rgba(45, 30, 15, 0.06); --shadow-xl: 0 32px 80px rgba(45, 30, 15, 0.16), 0 8px 16px rgba(45, 30, 15, 0.08); /* --------------------------------------------------------------------- * MOTION */ --duration-instant: 100ms; --duration-fast: 180ms; --duration-base: 280ms; --duration-slow: 480ms; --duration-slower: 720ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default ease */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* card hover lift */ /* --------------------------------------------------------------------- * Z-INDEX SCALE */ --z-base: 1; --z-raised: 10; --z-sticky: 100; /* sticky header */ --z-overlay: 500; /* dropdowns, popovers */ --z-modal: 1000; /* dialogs */ --z-toast: 2000; /* notifications */ /* clears Elementor sticky header (--z-index: 9999) — modals must sit on top */ --z-modal-over-header: 10000; /* --------------------------------------------------------------------- * COMPONENT-LEVEL TOKENS (referenced by components.css; rarely overridden) */ --btn-radius: var(--radius-pill); --btn-padding-y: 0.875rem; --btn-padding-x: 1.75rem; --btn-font-weight: var(--fw-semibold); --btn-tracking: var(--tracking-wide); --card-radius: var(--radius-lg); --card-padding: var(--space-md); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); --input-radius: var(--radius-sm); --input-padding-y: 0.75rem; --input-padding-x: 1rem; --input-border: 1px solid var(--color-border-strong); --header-height: 88px; --header-height-mobile: 64px; --utility-bar-height: 40px; /* --------------------------------------------------------------------- * v1.6.0 PDP REDESIGN — short-name aliases mirroring the v4 mockup. * * Phase 3 ports the mockup CSS verbatim where possible. Mockup CSS * uses short token names (--navy, --paper, --gold) instead of the * brand-semantic names above. Rather than rewrite the mockup CSS * to consume --color-brand etc. (lossy + harder to keep in sync * with the canonical mockup file), we expose mockup-shaped aliases * that delegate to the existing semantic tokens. * * Where the mockup specifies a literal hex that doesn't match any * existing token (deeper navy for the inquiry card, specific cream * shades for the section rhythm), we declare the literal hex here * as the alias's value rather than pointing at a token that's * "close enough" — preserves the mockup's intentional palette. * * Child themes that override --color-brand pull through to --navy * via the var() chain. Child themes that want to override the * v1.6 PDP palette specifically can re-set --navy / --gold directly. */ --navy: #0d2745; --navy-deep: #081a30; --navy-soft: #1a3656; --gold: var(--color-gold); /* #F5B800 — v4 mockup brand gold */ --gold-deep: #d99c08; /* deeper than --color-accent-dark */ --ink: #0f0f10; --paper: var(--color-surface); /* #FBF7EE */ --paper-warm: var(--color-surface-alt); /* #F2EBDB */ --paper-deep: #ebe3d3; /* slightly deeper than --color-surface-tint */ --line: var(--color-border); /* #E5DCC6 */ --line-strong: var(--color-border-strong); /* #C9BC9B */ --muted: var(--color-text-muted); --body-text: var(--color-text); --display: var(--font-display); --sans: var(--font-body); --mono: var(--font-mono); --success: var(--color-success); /* Editorial zone colors used by floorplan section's SVG dataviz */ --zone-living: #d8c8a8; --zone-living-d: #c9b88f; --zone-sleep: #b8c5d8; --zone-sleep-d: #9fb1cc; --zone-bath: #c0d4b6; --zone-bath-d: #9eb89a; --zone-store: #e8dfc8; --zone-store-d: #d2c5a5; /* Asset paths used by the inquiry section mascot + section glyphs. * CSS `url()` silently returns nothing if the file is missing — * Phase 3 can ship without these assets in place and the layout * stays intact; the visual is just lacking the mascot/paw. * * Drop the two files into themes/dealer-fule/assets/img/ to fill * them in: * brand-mark.png — the paw print (section glyphs, brand mark) * fox-rv-pointing.webp — mascot in inquiry section */ --asset-brand-mark: url('../img/brand-mark.png'); --asset-fox-rv: url('../img/fox-rv-pointing.webp'); } /* ========================================================================= Dark mode preference — applies to footer/dark sections only by default. Full dark theme is opt-in via [data-theme="dark"] on if a child theme wants it. Most dealer sites stay light. ========================================================================= */ [data-theme="dark"] { --color-surface: #0E1A2A; --color-surface-alt: #142840; --color-surface-card: #1A2D45; --color-text: #F2EBDB; --color-text-muted: #B5AC95; --color-border: #1F3550; } /* ========================================================================= Reduced motion — respect user OS preference. ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }