/** * DefCMS - Style Presets * Each preset overrides CSS variables for fonts, colors, and overall feel. * Applied via [data-preset="..."] on */ /* ===== PRESET: tech (Default - no changes needed, uses base style.css) ===== */ /* ===== PRESET: corporate ===== */ [data-preset="corporate"] { --primary-olive: #2C3E50; --primary-olive-light: #34495E; --primary-navy: #1A365D; --primary-navy-light: #2A4A7F; --accent-amber: #2980B9; --accent-amber-bright: #3498DB; --accent-cyan: #1ABC9C; --accent-green: #27AE60; font-family: 'Inter', 'Segoe UI', sans-serif; } [data-preset="corporate"] .hero-title, [data-preset="corporate"] .section-header h2, [data-preset="corporate"] .page-hero h1, [data-preset="corporate"] h1, [data-preset="corporate"] h2, [data-preset="corporate"] h3 { font-family: 'Inter', 'Segoe UI', sans-serif; letter-spacing: -0.02em; } /* ===== PRESET: food ===== */ [data-preset="food"] { --primary-olive: #5D4037; --primary-olive-light: #795548; --primary-navy: #3E2723; --primary-navy-light: #4E342E; --accent-amber: #E65100; --accent-amber-bright: #FF6D00; --accent-cyan: #FFB300; --accent-green: #43A047; font-family: 'Nunito', 'Quicksand', sans-serif; } [data-preset="food"] .hero-title, [data-preset="food"] .section-header h2, [data-preset="food"] .page-hero h1, [data-preset="food"] h1, [data-preset="food"] h2, [data-preset="food"] h3 { font-family: 'Playfair Display', 'Georgia', serif; } /* ===== PRESET: creative ===== */ [data-preset="creative"] { --primary-olive: #4A148C; --primary-olive-light: #6A1B9A; --primary-navy: #311B92; --primary-navy-light: #4527A0; --accent-amber: #E040FB; --accent-amber-bright: #EA80FC; --accent-cyan: #00BCD4; --accent-green: #76FF03; font-family: 'Poppins', 'Montserrat', sans-serif; } [data-preset="creative"] .hero-title, [data-preset="creative"] .section-header h2, [data-preset="creative"] .page-hero h1, [data-preset="creative"] h1, [data-preset="creative"] h2, [data-preset="creative"] h3 { font-family: 'Poppins', 'Montserrat', sans-serif; font-weight: 800; } /* ===== PRESET: marketing ===== */ [data-preset="marketing"] { --primary-olive: #1B5E20; --primary-olive-light: #2E7D32; --primary-navy: #0D47A1; --primary-navy-light: #1565C0; --accent-amber: #FF5722; --accent-amber-bright: #FF7043; --accent-cyan: #00BFA5; --accent-green: #00E676; font-family: 'DM Sans', 'Rubik', sans-serif; } [data-preset="marketing"] .hero-title, [data-preset="marketing"] .section-header h2, [data-preset="marketing"] .page-hero h1, [data-preset="marketing"] h1, [data-preset="marketing"] h2, [data-preset="marketing"] h3 { font-family: 'DM Sans', 'Rubik', sans-serif; font-weight: 700; letter-spacing: -0.01em; } /* ===== PRESET: elegant ===== */ [data-preset="elegant"] { --primary-olive: #37474F; --primary-olive-light: #455A64; --primary-navy: #1B1B2F; --primary-navy-light: #2C2C54; --accent-amber: #BFA14A; --accent-amber-bright: #D4B84A; --accent-cyan: #B0BEC5; --accent-green: #A5D6A7; font-family: 'Cormorant Garamond', 'Lora', serif; } [data-preset="elegant"] .hero-title, [data-preset="elegant"] .section-header h2, [data-preset="elegant"] .page-hero h1, [data-preset="elegant"] h1, [data-preset="elegant"] h2, [data-preset="elegant"] h3 { font-family: 'Cormorant Garamond', 'Playfair Display', serif; font-weight: 600; letter-spacing: 0.02em; } [data-preset="elegant"] .hero-badge, [data-preset="elegant"] .section-header .section-tag, [data-preset="elegant"] .clients-title { letter-spacing: 5px; font-family: 'Cormorant Garamond', serif; text-transform: uppercase; } /* Demo preset is in demo-theme.css (loaded conditionally) */ /* ===== PRESET: medical ===== */ [data-preset="medical"] { --primary-olive: #00695C; --primary-olive-light: #00897B; --primary-navy: #004D40; --primary-navy-light: #00695C; --accent-amber: #0097A7; --accent-amber-bright: #00BCD4; --accent-cyan: #26A69A; --accent-green: #66BB6A; font-family: 'Source Sans 3', 'Lato', sans-serif; } [data-preset="medical"] .hero-title, [data-preset="medical"] .section-header h2, [data-preset="medical"] .page-hero h1, [data-preset="medical"] h1, [data-preset="medical"] h2, [data-preset="medical"] h3 { font-family: 'Source Sans 3', 'Lato', sans-serif; font-weight: 700; }