/* * template_styles.css * Place in your CSS folder and it in tenant_public.php * OR paste the contents into css_main.css * * Each class is added to by tenant_public.php when a template is active. * These rules ONLY change layout, spacing, colors, hero style, card style etc. * They never touch your actual section content. * * All rules use high-specificity selectors so they override the defaults in * tenant_public.php without needing !important everywhere. */ /* ═══════════════════════════════════════════════════════════════ MODERN HERO — dark, full-screen gold hero, card sections ═══════════════════════════════════════════════════════════════ */ body.tpl-modern-hero { background: #0a0a0a; --primary-color: #FFD700; --background-color: #0a0a0a; --secondary-color: #111111; --card-background: rgba(255,255,255,0.04); --border-color: rgba(255,215,0,0.2); --header-background: rgba(10,10,10,0.97); } body.tpl-modern-hero .public-hero { min-height: 95vh; } body.tpl-modern-hero .services-grid { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); } body.tpl-modern-hero .service-card { border-radius: 16px; } body.tpl-modern-hero .public-nav { background: transparent; border-bottom: 2px solid rgba(255,215,0,0.4); } /* ═══════════════════════════════════════════════════════════════ SPLIT HERO — light, blue accent, image on right ═══════════════════════════════════════════════════════════════ */ body.tpl-split-hero { background: #ffffff; --primary-color: #3B82F6; --background-color: #ffffff; --secondary-color: #F1F5F9; --text-color: #1e293b; --card-background: #ffffff; --border-color: #E2E8F0; --header-background: #ffffff; --footer-background: #0F172A; } body.tpl-split-hero .public-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; align-items: stretch; } body.tpl-split-hero .hero-content { text-align: left; padding: 3rem; } body.tpl-split-hero .hero-actions { justify-content: flex-start; } body.tpl-split-hero .public-nav { background: #ffffff; border-bottom: 1px solid #E2E8F0; } body.tpl-split-hero .nav-brand h2, body.tpl-split-hero .nav-link { color: #1e293b; } @media (max-width:768px) { body.tpl-split-hero .public-hero { grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════════ GLASSMORPHISM — deep indigo, frosted glass cards ═══════════════════════════════════════════════════════════════ */ body.tpl-glass-morph { background: linear-gradient(135deg,#1E1B4B 0%,#312E81 50%,#1E1B4B 100%); --primary-color: #818CF8; --background-color: #1E1B4B; --secondary-color: #312E81; --card-background: rgba(255,255,255,0.08); --border-color: rgba(129,140,248,0.25); --header-background: rgba(30,27,75,0.85); } body.tpl-glass-morph .service-card, body.tpl-glass-morph .feature-item { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.12); } body.tpl-glass-morph .public-nav { background: rgba(30,27,75,0.85); backdrop-filter:blur(20px); } /* ═══════════════════════════════════════════════════════════════ MINIMAL WHITE — white, emerald accent, list sections ═══════════════════════════════════════════════════════════════ */ body.tpl-minimal-white { background: #ffffff; --primary-color: #10B981; --background-color: #ffffff; --secondary-color: #F9FAFB; --text-color: #111827; --card-background: #ffffff; --border-color: #E5E7EB; --header-background: #ffffff; --footer-background: #111827; --section-spacing: 6rem; } body.tpl-minimal-white .public-nav { background:#ffffff; border-bottom:1px solid #E5E7EB; } body.tpl-minimal-white .nav-brand h2, body.tpl-minimal-white .nav-link { color:#111827; } body.tpl-minimal-white .public-hero { min-height:65vh; text-align:center; } body.tpl-minimal-white .services-grid { grid-template-columns:1fr; max-width:700px; margin:0 auto; } /* ═══════════════════════════════════════════════════════════════ ICE CLEAN — sky blue, generous space ═══════════════════════════════════════════════════════════════ */ body.tpl-ice-clean { background: #F0F9FF; --primary-color: #38BDF8; --background-color: #F0F9FF; --secondary-color: #E0F2FE; --text-color: #0C4A6E; --card-background: #ffffff; --border-color: #BAE6FD; --header-background: rgba(240,249,255,0.95); --footer-background: #0C4A6E; } body.tpl-ice-clean .public-nav { background:rgba(240,249,255,0.95); border-bottom:1px solid #BAE6FD; } body.tpl-ice-clean .nav-brand h2, body.tpl-ice-clean .nav-link { color:#0C4A6E; } /* ═══════════════════════════════════════════════════════════════ SUNSET WARM — deep brown/orange gradient ═══════════════════════════════════════════════════════════════ */ body.tpl-sunset-warm { background: linear-gradient(160deg,#7C2D12 0%,#9A3412 40%,#C2410C 100%); --primary-color: #F97316; --background-color: #7C2D12; --secondary-color: #431407; --card-background: rgba(255,255,255,0.07); --border-color: rgba(249,115,22,0.3); --header-background: rgba(124,45,18,0.9); } body.tpl-sunset-warm .public-hero { min-height:90vh; } body.tpl-sunset-warm .services-grid { column-count:2; display:block; } body.tpl-sunset-warm .service-card { break-inside:avoid; margin-bottom:1rem; display:block; } /* ═══════════════════════════════════════════════════════════════ DEEP PURPLE — violet tech ═══════════════════════════════════════════════════════════════ */ body.tpl-deep-purple { background: linear-gradient(135deg,#3B0764 0%,#4C1D95 100%); --primary-color: #7C3AED; --background-color: #3B0764; --secondary-color: #4C1D95; --card-background: rgba(124,58,237,0.12); --border-color: rgba(124,58,237,0.35); --header-background: rgba(59,7,100,0.92); } body.tpl-deep-purple .public-hero { min-height:92vh; } /* ═══════════════════════════════════════════════════════════════ NEON DARK — pitch black + electric purple ═══════════════════════════════════════════════════════════════ */ body.tpl-neon-dark { background: #020204; --primary-color: #A855F7; --background-color: #020204; --secondary-color: #0D001A; --card-background: rgba(168,85,247,0.08); --border-color: rgba(168,85,247,0.3); --header-background: rgba(2,2,4,0.97); } body.tpl-neon-dark .service-card { box-shadow: 0 0 20px rgba(168,85,247,0.12); } body.tpl-neon-dark .service-card:hover { box-shadow: 0 0 35px rgba(168,85,247,0.3); } /* ═══════════════════════════════════════════════════════════════ LUXURY GOLD — premium dark gold ═══════════════════════════════════════════════════════════════ */ body.tpl-luxury-gold { background: #0a0a0a; --primary-color: #D4AF37; --background-color: #0a0a0a; --secondary-color: #111111; --card-background: rgba(212,175,55,0.06); --border-color: rgba(212,175,55,0.25); --header-background: rgba(10,10,10,0.98); } body.tpl-luxury-gold .public-hero { min-height:100vh; } body.tpl-luxury-gold .section-title { letter-spacing: 2px; text-transform: uppercase; } body.tpl-luxury-gold .service-card { border-radius: 0; border-bottom: 2px solid rgba(212,175,55,0.3); border-top:none; border-left:none; border-right:none; background:transparent; } /* ═══════════════════════════════════════════════════════════════ CORPORATE BLUE — navy professional ═══════════════════════════════════════════════════════════════ */ body.tpl-corporate-blue { background: #EFF6FF; --primary-color: #1E40AF; --background-color: #EFF6FF; --secondary-color: #DBEAFE; --text-color: #1E3A8A; --card-background: #ffffff; --border-color: #BFDBFE; --header-background: #1E3A8A; --footer-background: #1E3A8A; } body.tpl-corporate-blue .public-nav { background:#1E3A8A; border-bottom:none; } body.tpl-corporate-blue .nav-brand h2, body.tpl-corporate-blue .nav-link { color:#ffffff; } body.tpl-corporate-blue .public-hero { background: linear-gradient(135deg,#1E3A8A 0%,#1D4ED8 100%); } /* ═══════════════════════════════════════════════════════════════ FAITH CLASSIC — ivory & burgundy ═══════════════════════════════════════════════════════════════ */ body.tpl-faith-classic { background: #FEF9EE; --primary-color: #92400E; --background-color: #FEF9EE; --secondary-color: #FDE68A; --text-color: #451A03; --card-background: #ffffff; --border-color: rgba(146,64,14,0.2); --header-background: rgba(254,249,238,0.97); --footer-background: #451A03; } body.tpl-faith-classic .public-nav { background:rgba(254,249,238,0.97); border-bottom:2px solid #92400E; } body.tpl-faith-classic .nav-brand h2, body.tpl-faith-classic .nav-link { color:#451A03; } body.tpl-faith-classic .section-title { font-style:italic; } /* ═══════════════════════════════════════════════════════════════ FAITH MODERN — dark indigo church ═══════════════════════════════════════════════════════════════ */ body.tpl-faith-modern { background: linear-gradient(135deg,#1E1B4B 0%,#312E81 100%); --primary-color: #7C3AED; --background-color: #1E1B4B; --secondary-color: #312E81; --card-background: rgba(124,58,237,0.1); --border-color: rgba(124,58,237,0.3); --header-background: rgba(30,27,75,0.95); } body.tpl-faith-modern .public-hero { min-height:90vh; } /* ═══════════════════════════════════════════════════════════════ EDUCATION BRIGHT — yellow & sky blue ═══════════════════════════════════════════════════════════════ */ body.tpl-edu-bright { background: #FFFBEB; --primary-color: #0EA5E9; --background-color: #FFFBEB; --secondary-color: #FEF3C7; --text-color: #0C4A6E; --card-background: #ffffff; --border-color: #BAE6FD; --header-background: #0EA5E9; --footer-background: #0C4A6E; } body.tpl-edu-bright .public-nav { background:#0EA5E9; border-bottom:none; } body.tpl-edu-bright .nav-brand h2, body.tpl-edu-bright .nav-link { color:#ffffff; } body.tpl-edu-bright .public-hero { background:linear-gradient(135deg,#0EA5E9 0%,#0284C7 100%); } /* ═══════════════════════════════════════════════════════════════ EDUCATION PRESTIGE — navy & gold academic ═══════════════════════════════════════════════════════════════ */ body.tpl-edu-prestige { background: #1E3A8A; --primary-color: #CA8A04; --background-color: #1E3A8A; --secondary-color: #1E40AF; --card-background: rgba(202,138,4,0.08); --border-color: rgba(202,138,4,0.3); --header-background: rgba(30,58,138,0.97); } body.tpl-edu-prestige .section-title { text-transform:uppercase; letter-spacing:3px; font-size:clamp(1.5rem,4vw,2.2rem); } /* ═══════════════════════════════════════════════════════════════ HOTEL LUXURY — charcoal & champagne gold ═══════════════════════════════════════════════════════════════ */ body.tpl-hotel-luxury { background: #1C1917; --primary-color: #D4AF37; --background-color: #1C1917; --secondary-color: #0C0A09; --card-background: rgba(212,175,55,0.05); --border-color: rgba(212,175,55,0.2); --header-background: rgba(28,25,23,0.97); } body.tpl-hotel-luxury .public-hero { min-height:100vh; } body.tpl-hotel-luxury .section-title { font-weight:300; letter-spacing:4px; text-transform:uppercase; } body.tpl-hotel-luxury .service-card { border:none; border-bottom:1px solid rgba(212,175,55,0.2); border-radius:0; background:transparent; padding-left:0; } /* ═══════════════════════════════════════════════════════════════ BOUTIQUE HOTEL — blush pink ═══════════════════════════════════════════════════════════════ */ body.tpl-hotel-boutique { background: #FDF2F8; --primary-color: #EC4899; --background-color: #FDF2F8; --secondary-color: #FCE7F3; --text-color: #831843; --card-background: #ffffff; --border-color: #FBCFE8; --header-background: rgba(253,242,248,0.97); --footer-background: #831843; } body.tpl-hotel-boutique .public-nav { background:rgba(253,242,248,0.97); border-bottom:1px solid #FBCFE8; } body.tpl-hotel-boutique .nav-brand h2, body.tpl-hotel-boutique .nav-link { color:#831843; } /* ═══════════════════════════════════════════════════════════════ COMMERCE BOLD — white & green conversion ═══════════════════════════════════════════════════════════════ */ body.tpl-commerce-bold { background: #ffffff; --primary-color: #16A34A; --background-color: #ffffff; --secondary-color: #F0FDF4; --text-color: #14532D; --card-background: #ffffff; --border-color: #BBF7D0; --header-background: #ffffff; --footer-background: #14532D; } body.tpl-commerce-bold .public-nav { background:#ffffff; border-bottom:2px solid #16A34A; } body.tpl-commerce-bold .nav-brand h2, body.tpl-commerce-bold .nav-link { color:#14532D; } body.tpl-commerce-bold .btn-primary { border-radius:4px; } /* ═══════════════════════════════════════════════════════════════ STARTUP DARK — dark SaaS indigo ═══════════════════════════════════════════════════════════════ */ body.tpl-startup-dark { background: #0F0F23; --primary-color: #6366F1; --background-color: #0F0F23; --secondary-color: #1A1A3E; --card-background: rgba(99,102,241,0.08); --border-color: rgba(99,102,241,0.25); --header-background: rgba(15,15,35,0.97); } body.tpl-startup-dark .service-card { border-radius:12px; } body.tpl-startup-dark .public-hero { min-height:85vh; } /* ═══════════════════════════════════════════════════════════════ RESTAURANT — warm dark food ═══════════════════════════════════════════════════════════════ */ body.tpl-restaurant { background: #1C0A00; --primary-color: #DC2626; --background-color: #1C0A00; --secondary-color: #2D1000; --card-background: rgba(220,38,38,0.07); --border-color: rgba(220,38,38,0.25); --header-background: rgba(28,10,0,0.97); } body.tpl-restaurant .public-hero { min-height:90vh; } body.tpl-restaurant .services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } /* ═══════════════════════════════════════════════════════════════ HEALTH & WELLNESS — teal calm ═══════════════════════════════════════════════════════════════ */ body.tpl-health-wellness { background: #F0FDFA; --primary-color: #0D9488; --background-color: #F0FDFA; --secondary-color: #CCFBF1; --text-color: #134E4A; --card-background: #ffffff; --border-color: #99F6E4; --header-background: rgba(240,253,250,0.97); --footer-background: #134E4A; } body.tpl-health-wellness .public-nav { background:rgba(240,253,250,0.97); border-bottom:1px solid #99F6E4; } body.tpl-health-wellness .nav-brand h2, body.tpl-health-wellness .nav-link { color:#134E4A; } /* ═══════════════════════════════════════════════════════════════ FITNESS — dark amber energy ═══════════════════════════════════════════════════════════════ */ body.tpl-fitness { background: #0C0C0C; --primary-color: #F59E0B; --background-color: #0C0C0C; --secondary-color: #1A1A1A; --card-background: rgba(245,158,11,0.07); --border-color: rgba(245,158,11,0.25); --header-background: rgba(12,12,12,0.97); } body.tpl-fitness .public-hero { min-height:95vh; } body.tpl-fitness .section-title { text-transform:uppercase; font-weight:900; letter-spacing:3px; } /* ═══════════════════════════════════════════════════════════════ FOREST GREEN — deep eco ═══════════════════════════════════════════════════════════════ */ body.tpl-forest-green { background: #14532D; --primary-color: #16A34A; --background-color: #14532D; --secondary-color: #166534; --card-background: rgba(22,163,74,0.1); --border-color: rgba(22,163,74,0.3); --header-background: rgba(20,83,45,0.97); } body.tpl-forest-green .public-hero { min-height:90vh; } /* ═══════════════════════════════════════════════════════════════ TECH MINIMAL — dark cyan ═══════════════════════════════════════════════════════════════ */ body.tpl-tech-minimal { background: #0C0A09; --primary-color: #22D3EE; --background-color: #0C0A09; --secondary-color: #1C1917; --card-background: rgba(34,211,238,0.05); --border-color: rgba(34,211,238,0.2); --header-background: rgba(12,10,9,0.97); } body.tpl-tech-minimal .services-grid { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 1rem; } body.tpl-tech-minimal .service-card { border-radius: 8px; } body.tpl-tech-minimal .section-title { font-family: monospace; } /* ═══════════════════════════════════════════════════════════════ BEAUTY SALON — rose & pink ═══════════════════════════════════════════════════════════════ */ body.tpl-beauty-salon { background: #FDF2F8; --primary-color: #DB2777; --background-color: #FDF2F8; --secondary-color: #FCE7F3; --text-color: #831843; --card-background: #ffffff; --border-color: #FBCFE8; --header-background: rgba(253,242,248,0.97); --footer-background: #831843; } body.tpl-beauty-salon .public-nav { background:rgba(253,242,248,0.97); border-bottom:1px solid #FBCFE8; } body.tpl-beauty-salon .nav-brand h2, body.tpl-beauty-salon .nav-link { color:#831843; } body.tpl-beauty-salon .services-grid { columns:2; display:block; } body.tpl-beauty-salon .service-card { break-inside:avoid; margin-bottom:1.5rem; display:block; } /* ═══════════════════════════════════════════════════════════════ AFRICA PRIDE — earth warm gold ═══════════════════════════════════════════════════════════════ */ body.tpl-africa-pride { background: #92400E; --primary-color: #F59E0B; --background-color: #92400E; --secondary-color: #78350F; --card-background: rgba(245,158,11,0.1); --border-color: rgba(245,158,11,0.3); --header-background: rgba(146,64,14,0.97); } body.tpl-africa-pride .public-hero { min-height:90vh; } body.tpl-africa-pride .section-title { font-weight:900; } /* ═══════════════════════════════════════════════════════════════ SPORTS TEAM — dark red energy ═══════════════════════════════════════════════════════════════ */ body.tpl-sports-team { background: #0F172A; --primary-color: #EF4444; --background-color: #0F172A; --secondary-color: #1E293B; --card-background: rgba(239,68,68,0.07); --border-color: rgba(239,68,68,0.25); --header-background: rgba(15,23,42,0.97); } body.tpl-sports-team .public-hero { min-height:92vh; } body.tpl-sports-team .section-title { text-transform:uppercase; font-weight:900; letter-spacing:2px; } /* ═══════════════════════════════════════════════════════════════ MAGAZINE — editorial dark red ═══════════════════════════════════════════════════════════════ */ body.tpl-magazine { background: #0f0f0f; --primary-color: #EF4444; --background-color: #0f0f0f; --secondary-color: #18181b; --card-background: rgba(239,68,68,0.06); --border-color: rgba(239,68,68,0.2); } body.tpl-magazine .section-title { font-style:italic; font-weight:900; } /* ═══════════════════════════════════════════════════════════════ TIMELINE STORY — warm amber on cream ═══════════════════════════════════════════════════════════════ */ body.tpl-timeline-story { background: #FFFBEB; --primary-color: #D97706; --background-color: #FFFBEB; --secondary-color: #FEF3C7; --text-color: #451A03; --card-background: #ffffff; --border-color: #FDE68A; --header-background: rgba(255,251,235,0.97); --footer-background: #451A03; } body.tpl-timeline-story .public-nav { background:rgba(255,251,235,0.97); border-bottom:2px solid #D97706; } body.tpl-timeline-story .nav-brand h2, body.tpl-timeline-story .nav-link { color:#451A03; } /* ═══════════════════════════════════════════════════════════════ MIDNIGHT ROSE — dark romantic ═══════════════════════════════════════════════════════════════ */ body.tpl-midnight-rose { background: #0C0014; --primary-color: #F43F5E; --background-color: #0C0014; --secondary-color: #1A0A14; --card-background: rgba(244,63,94,0.07); --border-color: rgba(244,63,94,0.25); } body.tpl-midnight-rose .public-hero { min-height:95vh; } /* ═══════════════════════════════════════════════════════════════ PORTFOLIO DARK — dark amber showcase ═══════════════════════════════════════════════════════════════ */ body.tpl-portfolio-dark { background: #09090B; --primary-color: #F59E0B; --background-color: #09090B; --secondary-color: #18181B; --card-background: rgba(245,158,11,0.05); --border-color: rgba(245,158,11,0.15); } body.tpl-portfolio-dark .services-grid { columns:2; display:block; } body.tpl-portfolio-dark .service-card { break-inside:avoid; margin-bottom:1.5rem; display:block; border-radius:0; border:none; border-top:2px solid rgba(245,158,11,0.3); } /* ═══════════════════════════════════════════════════════════════ FINTECH — dark teal growth ═══════════════════════════════════════════════════════════════ */ body.tpl-fintech { background: #0A0F1C; --primary-color: #10B981; --background-color: #0A0F1C; --secondary-color: #0D1B2A; --card-background: rgba(16,185,129,0.06); --border-color: rgba(16,185,129,0.2); } body.tpl-fintech .public-hero { min-height:85vh; } /* ═══════════════════════════════════════════════════════════════ MEDICAL CLINIC — clinical white blue ═══════════════════════════════════════════════════════════════ */ body.tpl-medical-clinic { background: #EFF6FF; --primary-color: #2563EB; --background-color: #EFF6FF; --secondary-color: #DBEAFE; --text-color: #1E3A8A; --card-background: #ffffff; --border-color: #BFDBFE; --header-background: #2563EB; --footer-background: #1E3A8A; } body.tpl-medical-clinic .public-nav { background:#2563EB; border-bottom:none; } body.tpl-medical-clinic .nav-brand h2, body.tpl-medical-clinic .nav-link { color:#ffffff; } body.tpl-medical-clinic .services-grid { grid-template-columns:1fr; max-width:700px; margin:0 auto; } /* ═══════════════════════════════════════════════════════════════ TRAVEL AGENCY — cyan sand wanderlust ═══════════════════════════════════════════════════════════════ */ body.tpl-travel-agency { background: #FFFBEB; --primary-color: #06B6D4; --background-color: #FFFBEB; --secondary-color: #ECFEFF; --text-color: #164E63; --card-background: #ffffff; --border-color: #A5F3FC; --header-background: rgba(255,251,235,0.97); --footer-background: #164E63; } body.tpl-travel-agency .public-nav { background:rgba(255,251,235,0.97); border-bottom:2px solid #06B6D4; } body.tpl-travel-agency .nav-brand h2, body.tpl-travel-agency .nav-link { color:#164E63; } body.tpl-travel-agency .public-hero { min-height:90vh; } /* ═══════════════════════════════════════════════════════════════ PASTEL DREAM — lavender mint ═══════════════════════════════════════════════════════════════ */ body.tpl-pastel-dream { background: #FAF5FF; --primary-color: #C084FC; --background-color: #FAF5FF; --secondary-color: #F3E8FF; --text-color: #581C87; --card-background: #ffffff; --border-color: #E9D5FF; --header-background: rgba(250,245,255,0.97); --footer-background: #581C87; } body.tpl-pastel-dream .public-nav { background:rgba(250,245,255,0.97); border-bottom:1px solid #E9D5FF; } body.tpl-pastel-dream .nav-brand h2, body.tpl-pastel-dream .nav-link { color:#581C87; } /* ═══════════════════════════════════════════════════════════════ All remaining templates with dark defaults ═══════════════════════════════════════════════════════════════ */ body.tpl-vintage-classic { background:#FEF9EE; --primary-color:#B45309; --background-color:#FEF9EE; --secondary-color:#FDE68A; --text-color:#451A03; --header-background:rgba(254,249,238,0.97); --footer-background:#451A03; } body.tpl-vintage-classic .public-nav { background:rgba(254,249,238,0.97); border-bottom:2px solid #B45309; } body.tpl-vintage-classic .nav-brand h2, body.tpl-vintage-classic .nav-link { color:#451A03; } body.tpl-minimalist-mono { background:#ffffff; --primary-color:#18181B; --background-color:#ffffff; --secondary-color:#F4F4F5; --text-color:#09090B; --card-background:#F4F4F5; --border-color:#E4E4E7; --header-background:#ffffff; --footer-background:#09090B; } body.tpl-minimalist-mono .public-nav { background:#ffffff; border-bottom:1px solid #E4E4E7; } body.tpl-minimalist-mono .nav-brand h2, body.tpl-minimalist-mono .nav-link { color:#09090B; } body.tpl-bold-type { background:#FAFAFA; --primary-color:#F59E0B; --background-color:#FAFAFA; --secondary-color:#ffffff; --text-color:#0F172A; --header-background:#FAFAFA; --footer-background:#0F172A; } body.tpl-bold-type .public-nav { background:#FAFAFA; border-bottom:none; } body.tpl-bold-type .nav-brand h2, body.tpl-bold-type .nav-link { color:#0F172A; } body.tpl-bold-type .section-title { font-size:clamp(3rem,8vw,6rem); font-weight:900; line-height:1; } body.tpl-agency-bold { background:#0A0A0A; --primary-color:#F97316; --background-color:#0A0A0A; --secondary-color:#1A1A1A; --card-background:rgba(249,115,22,0.07); --border-color:rgba(249,115,22,0.2); } body.tpl-agency-bold .section-title { text-transform:uppercase; letter-spacing:4px; font-size:clamp(2rem,6vw,4rem); } body.tpl-music { background:#020007; --primary-color:#A855F7; --background-color:#020007; --secondary-color:#0F001A; --card-background:rgba(168,85,247,0.07); --border-color:rgba(168,85,247,0.25); } body.tpl-creative-studio { background:#0F0F0F; --primary-color:#EC4899; --background-color:#0F0F0F; --secondary-color:#1A0A14; --card-background:rgba(236,72,153,0.07); --border-color:rgba(236,72,153,0.2); } body.tpl-portfolio-light { background:#FAFAFA; --primary-color:#8B5CF6; --background-color:#FAFAFA; --secondary-color:#F5F3FF; --text-color:#1e1b4b; --card-background:#ffffff; --border-color:#DDD6FE; --header-background:#FAFAFA; } body.tpl-portfolio-light .public-nav { background:#FAFAFA; border-bottom:1px solid #DDD6FE; } body.tpl-portfolio-light .nav-brand h2, body.tpl-portfolio-light .nav-link { color:#1e1b4b; } body.tpl-law-firm { background:#0F172A; --primary-color:#1E3A8A; --background-color:#0F172A; --secondary-color:#1E293B; --card-background:rgba(30,58,138,0.12); --border-color:rgba(30,58,138,0.3); } body.tpl-consulting { background:#F8FAFC; --primary-color:#0F172A; --background-color:#F8FAFC; --secondary-color:#E2E8F0; --text-color:#0F172A; --card-background:#ffffff; --border-color:#CBD5E1; --header-background:#F8FAFC; --footer-background:#0F172A; } body.tpl-consulting .public-nav { background:#F8FAFC; border-bottom:1px solid #CBD5E1; } body.tpl-consulting .nav-brand h2, body.tpl-consulting .nav-link { color:#0F172A; } body.tpl-construction { background:#1C1917; --primary-color:#F59E0B; --background-color:#1C1917; --secondary-color:#292524; --card-background:rgba(245,158,11,0.07); --border-color:rgba(245,158,11,0.2); } body.tpl-government { background:#EFF6FF; --primary-color:#1E3A8A; --background-color:#EFF6FF; --secondary-color:#DBEAFE; --text-color:#1E3A8A; --card-background:#ffffff; --border-color:#BFDBFE; --header-background:#1E3A8A; --footer-background:#1E3A8A; } body.tpl-government .public-nav { background:#1E3A8A; border-bottom:none; } body.tpl-government .nav-brand h2, body.tpl-government .nav-link { color:#ffffff; } body.tpl-logistics { background:#1C1917; --primary-color:#F59E0B; --background-color:#1C1917; --secondary-color:#292524; --card-background:rgba(245,158,11,0.07); --border-color:rgba(245,158,11,0.2); } body.tpl-real-estate { background:#1C1917; --primary-color:#B45309; --background-color:#1C1917; --secondary-color:#292524; --card-background:rgba(180,83,9,0.08); --border-color:rgba(180,83,9,0.25); } body.tpl-fintech { background:#0A0F1C; --primary-color:#10B981; --background-color:#0A0F1C; --secondary-color:#0D1B2A; --card-background:rgba(16,185,129,0.06); --border-color:rgba(16,185,129,0.2); } body.tpl-ngo-impact { background:#FEF2F2; --primary-color:#DC2626; --background-color:#FEF2F2; --secondary-color:#FEF9EE; --text-color:#7F1D1D; --card-background:#ffffff; --border-color:#FECACA; --header-background:#DC2626; --footer-background:#7F1D1D; } body.tpl-ngo-impact .public-nav { background:#DC2626; border-bottom:none; } body.tpl-ngo-impact .nav-brand h2, body.tpl-ngo-impact .nav-link { color:#ffffff; } body.tpl-earthy-organic { background:#1C1917; --primary-color:#78716C; --background-color:#1C1917; --secondary-color:#292524; --card-background:rgba(120,113,108,0.1); --border-color:rgba(120,113,108,0.25); } body.tpl-tab-sections { background:#F0FDF4; --primary-color:#10B981; --background-color:#F0FDF4; --secondary-color:#DCFCE7; --text-color:#14532D; --card-background:#ffffff; --border-color:#BBF7D0; --header-background:#F0FDF4; --footer-background:#14532D; } body.tpl-tab-sections .public-nav { background:#F0FDF4; border-bottom:1px solid #BBF7D0; } body.tpl-tab-sections .nav-brand h2, body.tpl-tab-sections .nav-link { color:#14532D; } body.tpl-baby-soft { background:#FDF2F8; --primary-color:#F472B6; --background-color:#FDF2F8; --secondary-color:#FCE7F3; --text-color:#831843; --card-background:#ffffff; --border-color:#FBCFE8; --header-background:#FDF2F8; --footer-background:#831843; } body.tpl-baby-soft .public-nav { background:#FDF2F8; border-bottom:1px solid #FBCFE8; } body.tpl-baby-soft .nav-brand h2, body.tpl-baby-soft .nav-link { color:#831843; } body.tpl-fashion { background:#FAFAFA; --primary-color:#D4AF37; --background-color:#FAFAFA; --secondary-color:#18181B; --card-background:#ffffff; --border-color:#E5E7EB; --header-background:#18181B; } body.tpl-fashion .public-nav { background:#18181B; border-bottom:2px solid #D4AF37; } body.tpl-fashion .nav-brand h2, body.tpl-fashion .nav-link { color:#D4AF37; }