/* ============================================================ GUTTER MULE — THEME SYSTEM 4 palettes (A–D), all Red+Yellow leaning, toggled via [data-theme] on Default: Theme A (Workhorse) ============================================================ */ /* ── Theme A: WORKHORSE ────────────────────────────────────── Carhartt / Caterpillar — heavy duty, no-nonsense. Primary: Cat-yellow. Accent: Fire-red. Backgrounds: warm off-white. ─────────────────────────────────────────────────────────────── */ :root, [data-theme="a"] { --bg: #fdfbf5; --bg-surface: #ffffff; --bg-raised: #f5f1e6; --bg-dark: #1c1815; --primary: #fcc419; --primary-hover: #f5b400; --primary-text: #1c1815; /* text ON yellow */ --accent: #d63031; --accent-hover: #b82425; --accent-text: #ffffff; /* text ON red */ --text: #1c1815; --text-muted: #5a5048; --text-inverse: #fdfbf5; --text-on-dark: #fdfbf5; --border: #e0d8c4; --border-strong: #c4b89c; --shadow-sm: 0 2px 6px rgba(28,24,21,0.08); --shadow: 0 8px 24px rgba(28,24,21,0.12); --shadow-lg: 0 16px 48px rgba(28,24,21,0.18); --hero-bg: linear-gradient(135deg, #fdfbf5 0%, #f5f1e6 60%, #ebe2cc 100%); --hero-bg-overlay: linear-gradient(180deg, transparent 0%, rgba(28,24,21,0.04) 100%); --whyus-bg: #1c1815; --whyus-text: #fdfbf5; --finalcta-bg: linear-gradient(135deg, #fcc419 0%, #f5b400 100%); --finalcta-text: #1c1815; --footer-bg: #1c1815; --footer-text: #d4cdc0; --btn-radius: 6px; --card-radius: 10px; --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --logo-color-1: #1c1815; /* "Gutter" */ --logo-color-2: #d63031; /* "Mule" */ --scheme: light; } /* ── Theme B: BOLD-FRIENDLY ────────────────────────────────── Modern construction brand — confident but approachable. Primary: Tomato-red. Accent: Mustard-yellow. Cream backgrounds. ─────────────────────────────────────────────────────────────── */ [data-theme="b"] { --bg: #fff8ed; --bg-surface: #ffffff; --bg-raised: #fdebd0; --bg-dark: #2a1410; --primary: #e63946; --primary-hover: #c92434; --primary-text: #ffffff; --accent: #f4a261; --accent-hover: #e0904f; --accent-text: #2a1410; --text: #2a1410; --text-muted: #6b4a3c; --text-inverse: #fff8ed; --text-on-dark: #fff8ed; --border: #f0d8b8; --border-strong: #d8b890; --shadow-sm: 0 2px 8px rgba(230,57,70,0.10); --shadow: 0 8px 28px rgba(230,57,70,0.14); --shadow-lg: 0 18px 52px rgba(230,57,70,0.22); --hero-bg: linear-gradient(135deg, #fff8ed 0%, #fdebd0 100%); --hero-bg-overlay: linear-gradient(180deg, transparent 0%, rgba(230,57,70,0.04) 100%); --whyus-bg: #e63946; --whyus-text: #ffffff; --finalcta-bg: linear-gradient(135deg, #f4a261 0%, #e87f3a 100%); --finalcta-text: #2a1410; --footer-bg: #2a1410; --footer-text: #d8c0a8; --btn-radius: 999px; /* pill buttons — friendlier */ --card-radius: 14px; --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --logo-color-1: #2a1410; --logo-color-2: #e63946; --scheme: light; } /* ── Theme C: GAS-STATION RETRO ────────────────────────────── American work-truck nostalgia — Shell/Sunoco vibes, signage typography. Primary: Bright red. Accent: Bright yellow. White-dominant + chevron stripes. ─────────────────────────────────────────────────────────────── */ [data-theme="c"] { --bg: #ffffff; --bg-surface: #ffffff; --bg-raised: #fffce8; --bg-dark: #0d0d0d; --primary: #ef233c; --primary-hover: #d61a30; --primary-text: #ffffff; --accent: #ffc93c; --accent-hover: #f5bc20; --accent-text: #0d0d0d; --text: #0d0d0d; --text-muted: #555555; --text-inverse: #ffffff; --text-on-dark: #ffffff; --border: #e8e8e8; --border-strong: #0d0d0d; --shadow-sm: 0 2px 0 #0d0d0d; /* hard-edge retro shadows */ --shadow: 0 4px 0 #0d0d0d; --shadow-lg: 0 6px 0 #0d0d0d; --hero-bg: repeating-linear-gradient( 135deg, #ffffff 0, #ffffff 60px, #fffbe5 60px, #fffbe5 80px ); --hero-bg-overlay: linear-gradient(180deg, transparent 0%, rgba(13,13,13,0.02) 100%); --whyus-bg: #ef233c; --whyus-text: #ffffff; --finalcta-bg: repeating-linear-gradient( 135deg, #ffc93c 0, #ffc93c 40px, #ef233c 40px, #ef233c 80px ); --finalcta-text: #0d0d0d; --footer-bg: #0d0d0d; --footer-text: #ffc93c; --btn-radius: 4px; --card-radius: 6px; --font-display: 'Oswald', 'Impact', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --logo-color-1: #0d0d0d; --logo-color-2: #ef233c; --scheme: light; } /* ── Theme D: PREMIUM TRADE ────────────────────────────────── Higher-end contractor — Red+Yellow but restrained, lots of whitespace. Primary: Brick-red. Accent: Soft golden-yellow. White-dominant + serif headers. ─────────────────────────────────────────────────────────────── */ [data-theme="d"] { --bg: #ffffff; --bg-surface: #ffffff; --bg-raised: #faf6ed; --bg-dark: #18120e; --primary: #b8312f; --primary-hover: #98231f; --primary-text: #ffffff; --accent: #f2c94c; --accent-hover: #e0b738; --accent-text: #18120e; --text: #18120e; --text-muted: #6a5a48; --text-inverse: #ffffff; --text-on-dark: #faf6ed; --border: #ece4d2; --border-strong: #c8b890; --shadow-sm: 0 1px 3px rgba(24,18,14,0.06); --shadow: 0 6px 20px rgba(24,18,14,0.08); --shadow-lg: 0 14px 36px rgba(24,18,14,0.12); --hero-bg: linear-gradient(180deg, #ffffff 0%, #faf6ed 100%); --hero-bg-overlay: linear-gradient(180deg, transparent 0%, rgba(24,18,14,0.03) 100%); --whyus-bg: #18120e; --whyus-text: #faf6ed; --finalcta-bg: #b8312f; --finalcta-text: #ffffff; --footer-bg: #18120e; --footer-text: #c8b890; --btn-radius: 2px; --card-radius: 4px; --font-display: 'Playfair Display', Georgia, serif; /* serif for premium */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --logo-color-1: #18120e; --logo-color-2: #b8312f; --scheme: light; } /* Pull in Playfair Display only when theme D might be shown */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&display=swap');