/* ============================================================
theme.css — Albert edits this file per client.
All other CSS files are untouched between deployments.
============================================================
STEP 1: Uncomment one color palette block.
STEP 2: Uncomment one font pair block + update links.
STEP 3: Set hero class on .hero element in index.html.
============================================================ */
/* ============================================================
COLOR PALETTES — uncomment one block, comment out others
============================================================ */
/* PROFESSIONAL — Law, finance, consulting
:root {
--color-primary: #1B3A5C;
--color-bg: #FFFFFF;
--color-accent: #C9A84C;
--color-surface: #F4F7FA;
--color-text: #1A1A1A;
--color-text-muted: #5A6B7B;
--color-border: #D8E0E8;
}
*/
/* WARM — Retail, hospitality, real estate
:root {
--color-primary: #6B5C52;
--color-bg: #FAF7F4;
--color-accent: #C4603A;
--color-surface: #F0EBE6;
--color-text: #1C1815;
--color-text-muted: #7A6B62;
--color-border: #DDD5CE;
}
*/
/* BOLD — Tech-forward, IT, B2B services
:root {
--color-primary: #1A1A2E;
--color-bg: #FFFFFF;
--color-accent: #2563EB;
--color-surface: #F1F5FB;
--color-text: #111111;
--color-text-muted: #4B5563;
--color-border: #D1D9E8;
}
*/
/* CLINICAL — Medical, dental, therapy
:root {
--color-primary: #3B6E8C;
--color-bg: #F7F9FA;
--color-accent: #5A8A6A;
--color-surface: #EDF2F5;
--color-text: #1A2730;
--color-text-muted: #556878;
--color-border: #CAD9E3;
}
*/
/* TRADES — HVAC, electrical, plumbing, roofing */
:root {
--color-primary: #2C2C2C;
--color-bg: #F4F4F4;
--color-accent: #E07B00;
--color-surface: #E8E8E8;
--color-text: #111111;
--color-text-muted: #595959;
--color-border: #CCCCCC;
}
/* WELLNESS — Massage, fitness studios, spa
:root {
--color-primary: #8C5E5A;
--color-bg: #FBF8F3;
--color-accent: #C8867A;
--color-surface: #F2EBE6;
--color-text: #1E1614;
--color-text-muted: #7A5F5B;
--color-border: #DDD0CB;
}
*/
/* ============================================================
FONT PAIRS — uncomment one block.
Also swap the matching tags in each HTML .
============================================================ */
/* CLASSIC — Law, professional services
Google Fonts links needed:
:root {
--font-heading: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Instrument Sans', system-ui, sans-serif;
}
*/
/* MODERN — Contractors, trades, home services
Fontshare + Google Fonts links needed:
*/
:root {
--font-heading: 'Cabinet Grotesk', system-ui, sans-serif;
--font-body: 'Instrument Sans', system-ui, sans-serif;
}
/* WARM — Health, wellness, boutique retail
Google Fonts links needed:
:root {
--font-heading: 'Instrument Serif', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
}
*/
/* TECH — Tech-adjacent, B2B, data-forward
Google Fonts links needed:
:root {
--font-heading: 'Syne', system-ui, sans-serif;
--font-body: 'Outfit', system-ui, sans-serif;
}
*/
/* ============================================================
DERIVED TOKENS — do not edit below this line.
These are computed from the palette above.
============================================================ */
:root {
/* CTA / interactive */
--color-cta-bg: var(--color-accent);
--color-cta-text: #FFFFFF;
--color-cta-hover: color-mix(in srgb, var(--color-accent) 90%, #000);
/* Nav */
--color-nav-bg: var(--color-bg);
--color-nav-text: var(--color-text);
/* Footer */
--color-footer-bg: var(--color-primary);
--color-footer-text: #FFFFFF;
/* Spacing scale (8px grid) */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
--space-8: 64px;
--space-10: 80px;
--space-12: 96px;
--space-16: 128px;
/* Type scale (1.25× ratio, base 16px) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 49px */
--text-5xl: 3.815rem; /* 61px */
/* Radius */
--radius-btn: 4px;
--radius-card: 6px;
/* Transitions */
--transition: 150ms ease;
/* Layout */
--container-max: 1200px;
--container-wide: 1440px;
--prose-max: 70ch;
}