/* ====== Tweakable themes ====== Three CSS dimensions, each toggled via a class on : mood-*, type-*, density-* Defaults match the original design (mood-workshop, type-industrial, density-comfortable) */ /* ============ MOOD ============ */ /* mood-workshop = current default (charcoal + signal red) */ body.mood-workshop { --bg: #f5f3ef; --bg-2: #ecebe5; --ink: #161618; --ink-2: #2a2a2d; --muted: #6f6f72; --line: #d9d6cd; --accent: oklch(0.62 0.18 30); --accent-hover: oklch(0.56 0.2 30); --tile-1: linear-gradient(135deg, #404a55 0%, #1d2229 100%); --tile-2: linear-gradient(135deg, #c25a2c 0%, #5a2415 100%); --tile-3: linear-gradient(180deg, #d3d8dc 0%, #8a9099 100%); --tile-4: linear-gradient(180deg, #8aa1bf 0%, #2c3a52 100%); --tile-5: linear-gradient(180deg, #aab7c2 0%, #495865 100%); } /* mood-steel = cool, modern, blue-grey */ body.mood-steel { --bg: #eef1f4; --bg-2: #e2e6ea; --ink: #0f1822; --ink-2: #1e2a36; --muted: #5a6976; --line: #cdd5dd; --accent: oklch(0.55 0.13 235); --accent-hover: oklch(0.48 0.15 235); --tile-1: linear-gradient(135deg, #4a5b6e 0%, #1a2330 100%); --tile-2: linear-gradient(135deg, #5b7c9e 0%, #1f3650 100%); --tile-3: linear-gradient(180deg, #cdd6df 0%, #7a8693 100%); --tile-4: linear-gradient(180deg, #6b8fb5 0%, #243a55 100%); --tile-5: linear-gradient(180deg, #9ab0c4 0%, #455e72 100%); } /* mood-heritage = warm cream + oxblood, Chicago brick */ body.mood-heritage { --bg: #efe6d8; --bg-2: #e3d8c6; --ink: #2a1d12; --ink-2: #3a281a; --muted: #7a6a55; --line: #d3c5af; --accent: oklch(0.45 0.13 28); --accent-hover: oklch(0.4 0.14 28); --tile-1: linear-gradient(135deg, #6b4c34 0%, #2a1810 100%); --tile-2: linear-gradient(135deg, #a14a32 0%, #4a1a10 100%); --tile-3: linear-gradient(180deg, #d6c5a8 0%, #8a7458 100%); --tile-4: linear-gradient(180deg, #b08868 0%, #4a2e1c 100%); --tile-5: linear-gradient(180deg, #c4a888 0%, #5c4128 100%); } /* shared overrides for moods */ body[class*="mood-"] .tile { background: var(--tile-1); } body[class*="mood-"] .tile:nth-child(2) { background: var(--tile-2); } body[class*="mood-"] .tile:nth-child(3) { background: var(--tile-3); } body[class*="mood-"] .tile:nth-child(4) { background: var(--tile-4); } body[class*="mood-"] .tile:nth-child(5) { background: var(--tile-5); } body[class*="mood-"] .cta-btn:hover, body[class*="mood-"] .solid-btn:hover { background: var(--accent-hover); } body.mood-heritage .site-header, body.mood-heritage .testimonial, body.mood-heritage .site-footer { background: #1a120c; } body.mood-steel .site-header, body.mood-steel .testimonial { background: #0f1822; } /* ============ TYPE PERSONALITY ============ */ /* type-industrial = Oswald (default) */ body.type-industrial { --display-font: 'Oswald', sans-serif; --display-weight: 600; --display-tracking: 0.005em; --display-transform: uppercase; --display-leading: 1.05; } body.type-industrial h1, body.type-industrial h2, body.type-industrial h3, body.type-industrial h4, body.type-industrial h5 { font-family: var(--display-font); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); line-height: var(--display-leading); } /* type-editorial = Playfair Display, mixed-case, serif drama */ body.type-editorial h1, body.type-editorial h2, body.type-editorial h3, body.type-editorial h4 { font-family: 'Playfair Display', Georgia, serif !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.01em !important; line-height: 1.05 !important; } body.type-editorial h1 { font-style: italic; font-weight: 800 !important; } body.type-editorial h5, body.type-editorial .cta-btn, body.type-editorial .solid-btn, body.type-editorial .primary-nav a, body.type-editorial .post-cat, body.type-editorial .bullet-list li, body.type-editorial .stat span, body.type-editorial .brand, body.type-editorial .brand-logo, body.type-editorial .footer-links a, body.type-editorial .about-list h4, body.type-editorial .service-card h3, body.type-editorial .quote-deck footer strong, body.type-editorial .tile-card strong, body.type-editorial .about-badge strong { font-family: 'Inter', sans-serif !important; } body.type-editorial .service-card h3, body.type-editorial .about-badge strong, body.type-editorial .tile-card strong, body.type-editorial .quote-deck footer strong { text-transform: uppercase !important; letter-spacing: 0.14em !important; font-weight: 600 !important; } /* type-utility = Space Grotesk, geometric, soft uppercase */ body.type-utility h1, body.type-utility h2, body.type-utility h3, body.type-utility h4, body.type-utility h5 { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.015em !important; line-height: 1.0 !important; text-transform: none !important; } body.type-utility .service-card h3, body.type-utility .about-list h4, body.type-utility .quote-deck footer strong, body.type-utility .tile-card strong, body.type-utility .about-badge strong, body.type-utility .post-cat, body.type-utility .bullet-list li, body.type-utility .brand-logo { text-transform: uppercase !important; letter-spacing: 0.04em !important; } body.type-utility .cta-btn, body.type-utility .solid-btn, body.type-utility .primary-nav a, body.type-utility .footer-links a, body.type-utility h5 { font-family: 'Space Grotesk', sans-serif !important; } /* ============ DENSITY ============ */ /* density-compact = tight, vertical economy */ body.density-compact .section-head { padding: 64px 64px 36px; } body.density-compact .services { padding: 0 64px 56px; } body.density-compact .about, body.density-compact .secondary { padding-top: 16px; padding-bottom: 56px; } body.density-compact .stats { padding: 0 64px 56px; } body.density-compact .blog { padding: 0 64px 56px; } body.density-compact .testimonial-copy { padding: 56px 64px; } body.density-compact .contact-form { padding: 48px 64px; } body.density-compact .site-footer { padding: 48px 64px 24px; } body.density-compact .service-card { padding: 28px 22px 22px; min-height: 220px; } body.density-compact .hero { height: 64vh; min-height: 480px; } body.density-compact h1 { font-size: clamp(40px, 5.5vw, 84px) !important; } body.density-compact h2 { font-size: clamp(24px, 2.8vw, 38px) !important; } /* density-comfortable = current default — no overrides */ /* density-editorial = generous, magazine-like whitespace */ body.density-editorial .section-head { padding: 140px 64px 80px; } body.density-editorial .services { padding: 0 64px 140px; } body.density-editorial .about, body.density-editorial .secondary { padding-top: 56px; padding-bottom: 140px; } body.density-editorial .stats { padding: 0 64px 140px; } body.density-editorial .blog { padding: 0 64px 140px; } body.density-editorial .testimonial-copy { padding: 140px 80px; } body.density-editorial .contact-form { padding: 120px 80px; } body.density-editorial .site-footer { padding: 120px 64px 40px; } body.density-editorial .service-card { padding: 56px 32px 40px; min-height: 340px; } body.density-editorial .hero { height: 92vh; max-height: 920px; } body.density-editorial h1 { font-size: clamp(56px, 9vw, 140px) !important; } body.density-editorial h2 { font-size: clamp(36px, 4.4vw, 64px) !important; } body.density-editorial .about-grid, body.density-editorial .secondary-grid { gap: 120px; } body.density-editorial .blog-grid { gap: 56px; } body.density-editorial .service-grid { gap: 32px; }