/* ── Light Template ── Active when Overrides all theme-aware utility classes for a light appearance. */ .template-light { --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --text-faint: #94a3b8; --text-subtle: #94a3b8; --border: rgba(0,0,0,0.08); --glass: rgba(255,255,255,0.8); } /* ── Section backgrounds ── */ .template-light .bg-section-dark { background: #ffffff; } .template-light .bg-section-darker { background: #f8fafc; } /* ── Surface backgrounds ── */ .template-light .bg-surface-muted { background: rgba(241,245,249,0.8); } .template-light .bg-surface-solid { background: #e2e8f0; } .template-light .bg-surface-heavy { background: rgba(226,232,240,0.8); } .template-light .bg-elevated { background: #f1f5f9; } .template-light .bg-elevated-subtle { background: rgba(248,250,252,0.9); } .template-light .bg-overlay { background: rgba(0,0,0,0.5); } .template-light .bg-glass-light { background: rgba(0,0,0,0.03); } /* ── Text colors ── */ .template-light .text-primary { color: #0f172a; } .template-light .text-secondary { color: #334155; } .template-light .text-muted { color: #64748b; } .template-light .text-faint { color: #94a3b8; } .template-light .text-subtle { color: #94a3b8; } .template-light .text-on-accent { color: #ffffff; } /* ── Title highlights ── */ .template-light .text-gradient { background: linear-gradient(135deg, #fff 0%, #c4b5fd 50%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: #a78bfa; } .template-light .text-indigo-400 { color: #6366f1; } .template-light .section-title-gradient { background: linear-gradient(135deg, #64748b 0%, #a78bfa 50%, #818cf8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: #818cf8; } /* ── Contact divider ── */ .template-light .contact-divider { background: rgba(0,0,0,0.15); } /* ── Hover states ── */ .template-light .hover-text-primary:hover { color: #0f172a; } .template-light .hover-bg-hover:hover { background: #e2e8f0; } /* ── Borders ── */ .template-light .border-default { border-color: #e2e8f0; } .template-light .border-subtle { border-color: rgba(226,232,240,0.5); } /* ── Shadows ── */ .template-light .shadow-card { box-shadow: 0 4px 24px rgba(0,0,0,0.06); } .template-light .shadow-2xl { box-shadow: 0 8px 32px rgba(0,0,0,0.1); } .template-light .shadow-lg { box-shadow: 0 4px 16px rgba(0,0,0,0.08); } /* ── Feature cards ── */ .template-light .feature-card { background: #ffffff; border-color: #e2e8f0; } .template-light .feature-card:hover { border-color: rgba(99,102,241,0.3); box-shadow: 0 20px 60px rgba(99,102,241,0.1); filter: none; } /* ── Stat cards ── */ .template-light .stat-card { background: #f8fafc; border-color: #e2e8f0; } /* ── Glass card ── */ .template-light .glass-card { background: rgba(255,255,255,0.8); border-color: #e2e8f0; } /* ── Buttons ── */ .template-light .btn-primary { color: #ffffff; } /* ── Navigation ── */ .template-light .nav-glass { background: rgba(255,255,255,0.9); border-bottom-color: #e2e8f0; } .template-light .mobile-menu { background: rgba(255,255,255,0.98); border-color: #e2e8f0; } .template-light .hamburger-bar { background: #0f172a; } .template-light .lang-link { color: #475569; } .template-light .lang-link.text-indigo-400 { color: #6366f1; } /* ── Services dropdown ── */ .template-light .services-dropdown-inner { background: rgba(255,255,255,0.98); border-color: #e2e8f0; box-shadow: 0 25px 80px rgba(0,0,0,0.08), 0 0 0 1px rgba(99,102,241,0.08); } .template-light .services-dropdown-inner::before { background: rgba(255,255,255,0.98); border-left-color: #e2e8f0; border-top-color: #e2e8f0; } .template-light .services-dropdown-item + .services-dropdown-item { border-top-color: rgba(0,0,0,0.06); } .template-light .services-dropdown-item:hover .sdi-title { color: #0f172a; } .template-light .sdi-icon { color: #64748b; } .template-light .sdi-title { color: #334155; } .template-light .sdi-desc { color: #94a3b8; } .template-light .sdi-dot { background: rgba(0,0,0,0.12); } /* ── Contact form ── */ .template-light .contact-headline { color: #0f172a; } .template-light .contact-sub { color: #475569; } .template-light .contact-input { color: #334155 !important; } .template-light .contact-input::placeholder { color: #94a3b8 !important; } .template-light .contact-label { color: #64748b !important; } .template-light .contact-label:focus-within { color: #0f172a !important; } .template-light .contact-field::after { background: rgba(0,0,0,0.06); } .template-light .contact-field:focus-within::after { background: rgba(0,0,0,0.2); } .template-light .contact-btn { border-color: #e2e8f0; color: #475569; } .template-light .contact-btn-wrap { padding-bottom: 30px; } .template-light .contact-btn:hover { border-color: #94a3b8; color: #0f172a; background: rgba(0,0,0,0.02); } /* ── Marquee ── */ .template-light .marquee-section { border-color: #e2e8f0 !important; background: #f1f5f9 !important; } /* ── Noise & grid overlay ── */ .template-light .bg-noise { opacity: 0.01; } .template-light .bg-grid { background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%); } /* ── Process steps ── */ .template-light .process-steps::before { background: rgba(0,0,0,0.08); } .template-light .step-number { background: #fff; border-color: rgba(99,102,241,0.3); } .template-light .step:hover .step-number { color: #fff; } /* ── Project modal ── */ .template-light .project-modal { background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); } .template-light .project-modal-content { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 20px 60px rgba(0,0,0,0.15); } .template-light .project-modal-close { background: #f1f5f9; color: #64748b; } .template-light .project-modal-close:hover { color: #0f172a; background: #e2e8f0; } .template-light .project-modal-image { background: #f8fafc; } .template-light .project-modal-title { color: #0f172a; } .template-light .project-modal-desc { color: #475569; } /* ── Scrollbar ── */ .template-light ::-webkit-scrollbar-track { background: #f1f5f9; } .template-light ::-webkit-scrollbar-thumb { background: #94a3b8; } /* ── Selection ── */ .template-light ::selection { background: rgba(99,102,241,0.15); color: #0f172a; } /* ── Section gradients (transparent → section bg) ── */ .template-light .fade-gradient-dark { background: linear-gradient(transparent, #ffffff); } .template-light .fade-gradient-darker { background: linear-gradient(transparent, #f8fafc); } .template-light .bg-section-gradient { background: linear-gradient(transparent, #f8fafc); } /* ── Chatbot inputs ── */ .template-light { --input-border: rgba(0,0,0,0.2); --input-border-hover: rgba(0,0,0,0.35); } /* ── Live Chat Widget (nur Button/Header-Gradient für Light-Modus) ── */ .template-light #chatBtn { background: linear-gradient(135deg, var(--accent), #818cf8); box-shadow: 0 8px 32px rgba(99,102,241,0.2); } .template-light #chatBtn:hover { background: linear-gradient(135deg, var(--accent), #818cf8); box-shadow: 0 12px 48px rgba(99,102,241,0.3); } .template-light .ch-header { background: linear-gradient(135deg, var(--accent), #818cf8); } /* ── Banner hero text (always on dark overlay) ── */ .template-light .banner-hero { color: #ffffff; } .template-light .banner-hero .text-faint { color: rgba(255,255,255,0.6); } .template-light .banner-hero .text-muted { color: rgba(255,255,255,0.7); } /* ── Service / Legal / Review pages ── */ .template-light .service-page { background: var(--bg-primary); } .template-light .service-page .text-white { color: #0f172a; } .template-light .service-page .text-zinc-400 { color: #475569; } .template-light .service-page .text-zinc-500 { color: #64748b; } .template-light .service-page .hover\:text-white:hover { color: #0f172a; } .template-light .service-page .border-zinc-800 { border-color: #e2e8f0; } .template-light .service-page .group:hover .group-hover\:border-zinc-600 { border-color: #cbd5e1; } .template-light .service-page .bg-zinc-800 { background: #e2e8f0; }