/* * Funeral Home Buyer — Design Tokens * Aesthetic movement: Data-forward / Utility Design * Frank references these tokens exclusively. Never override them. * * Google Fonts import (add to HTML ): * https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap */ :root { /* ─── Typography ─── */ --font-display: 'Fraunces', serif; --font-body: 'Source Sans 3', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --text-xs: 0.75rem; /* 12px — labels, metadata */ --text-sm: 0.875rem; /* 14px — captions, small UI, monospace data */ --text-base: 1.0625rem; /* 17px — body copy */ --text-lg: 1.25rem; /* 20px — lead text, card titles */ --text-xl: 1.5rem; /* 24px — section subheads */ --text-2xl: 2rem; /* 32px — article H2s */ --text-3xl: 2.5rem; /* 40px — page titles */ --text-4xl: 3.25rem; /* 52px — hero headlines */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.15; /* headlines */ --leading-snug: 1.3; /* subheads, cards */ --leading-body: 1.7; /* body copy */ --leading-loose: 1.85; /* pull quotes */ --tracking-tight: -0.015em; /* display type */ --tracking-normal: 0; --tracking-wide: 0.06em; /* uppercase labels, monospace accents */ /* ─── Colors ─── */ /* Palette: Warm off-white base, deep navy text, rust/amber accent */ --color-primary: #1b2438; /* deep navy — text, headers, footer */ --color-secondary: #3a4a5e; /* slate blue — secondary text, borders */ --color-accent: #c05d2c; /* burnt rust/amber — interactive, emphasis */ --color-accent-hover: #d46a35; /* lighter rust for hover */ --color-accent-active: #a84f24;/* darker rust for active */ --color-bg: #f8f5f0; /* warm off-white — page background */ --color-surface: #f0ebe4; /* slightly darker warm — cards, callouts */ --color-surface-hover: #e8e3db;/* card hover state */ --color-text: #1b2438; /* deep navy — primary text */ --color-text-muted: #6b7280; /* medium gray — secondary text, metadata */ --color-text-inverse: #f8f5f0; /* for text on dark/accent backgrounds */ --color-border: rgba(27, 36, 56, 0.12); /* subtle dividers */ --color-border-strong: rgba(27, 36, 56, 0.22); /* stronger rules */ /* ─── Spacing ─── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; /* ─── Radius ─── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-full: 9999px; /* ─── Shadows ─── */ --shadow-sm: 0 1px 3px rgba(27, 36, 56, 0.08), 0 1px 2px rgba(27, 36, 56, 0.06); --shadow-md: 0 4px 12px rgba(27, 36, 56, 0.1), 0 2px 4px rgba(27, 36, 56, 0.06); --shadow-lg: 0 10px 30px rgba(27, 36, 56, 0.12), 0 4px 8px rgba(27, 36, 56, 0.06); /* ─── Motion ─── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 600ms; --duration-entrance: 700ms; /* ─── Layout ─── */ --content-width: 1140px; --reading-width: 640px; --reading-width-wide: 740px; } /* ─── Base Reset & Global Styles ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-body); color: var(--color-text); background-color: var(--color-bg); } /* ─── Scroll Animation Utility ─── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-entrance) var(--ease-out), transform var(--duration-entrance) var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity var(--duration-entrance) var(--ease-out), transform var(--duration-entrance) var(--ease-out); } .reveal-right { opacity: 0; transform: translateX(28px); transition: opacity var(--duration-entrance) var(--ease-out), transform var(--duration-entrance) var(--ease-out); } .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); } /* Stagger delays */ .stagger-1 { transition-delay: 0ms; } .stagger-2 { transition-delay: 100ms; } .stagger-3 { transition-delay: 150ms; } .stagger-4 { transition-delay: 200ms; } .stagger-5 { transition-delay: 250ms; } .stagger-6 { transition-delay: 300ms; }