/* ============================================= BESKED - Dark Theme Overrides Activated via ============================================= */ [data-theme="dark"] { --bg: #0b1220; --bg-elevated: #0f172a; --bg-inverse: #f8fafc; --bg-inverse-2: #e2e8f0; --bg-inverse-3: #cbd5e1; --surface-card: #111a2e; --surface-glass: rgba(11, 18, 32, .82); --border: #1f2a44; --border-strong: #334155; --text: #e2e8f0; --text-strong: #f8fafc; --text-muted: #94a3b8; --text-subtle: #64748b; --text-on-inverse: #0f172a; --text-on-inverse-muted: #475569; --code-bg: #050a16; --code-text: #e2e8f0; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.4); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.55), 0 4px 6px -4px rgba(0,0,0,.4); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.6), 0 8px 10px -6px rgba(0,0,0,.45); --logo-light-display: block; --logo-dark-display: none; --hero-trust-light: rgba(15, 23, 42, .65); color-scheme: dark; } /* Section--cta gradient: light center in dark mode for visual interest */ [data-theme="dark"] .section--cta { background: linear-gradient(135deg, #0b1220 0%, #0f3d28 50%, #0b1220 100%); } [data-theme="dark"] .section--cta .section__title--light, [data-theme="dark"] .section--cta .section__subtitle--light { color: #f8fafc; } [data-theme="dark"] .section--cta .section__subtitle--light { color: rgba(248, 250, 252, .7); } [data-theme="dark"] .section--cta .hero__trust--light { color: rgba(255, 255, 255, .55); } [data-theme="dark"] .section--cta .btn--white { background: var(--green); color: #fff; border-color: var(--green); } [data-theme="dark"] .section--cta .btn--white:hover { background: var(--green-dark); border-color: var(--green-dark); } /* Mantieni section--dark con titoli chiari anche in dark mode (perché il bg si inverte) */ [data-theme="dark"] .section--dark .section__title--light, [data-theme="dark"] .section--dark .section__subtitle--light { color: var(--text-on-inverse); } [data-theme="dark"] .section--dark .section__subtitle--light { color: var(--text-on-inverse-muted); } /* Security cards in dark mode: invertiti rispetto al loro contesto */ [data-theme="dark"] .security-card .security-card__title { color: var(--text-on-inverse); } [data-theme="dark"] .security-card .security-card__text { color: var(--text-on-inverse-muted); } /* Footer: il bg-inverse in dark mode diventa chiaro, quindi testi diventano scuri. Forziamo un footer SEMPRE scuro per coerenza brand (è la "firma" del sito). */ .footer { background: #0f172a; } .footer__top { border-bottom-color: #334155; } .footer__col h4 { color: #fff; } .footer__col a, .footer__tagline, .footer__bottom p { color: #94a3b8; } .footer__col a:hover { color: var(--green); } /* Comparison cards in light: forzare colori espliciti */ .comparison__list li { color: #94a3b8; } [data-theme="dark"] .comparison__list li { color: #94a3b8; } /* Hero phone mockup: lasciare verde WhatsApp in entrambi i temi */ /* Code blocks (per api-docs e legali) */ [data-theme="dark"] pre, [data-theme="dark"] code { background: var(--code-bg); color: var(--code-text); } /* Pricing card popular: verde sia chiaro che scuro */ [data-theme="dark"] .pricing-card--popular { background: var(--green-dark); border-color: var(--green-dark); } [data-theme="dark"] .pricing-card--popular .btn--primary { background: #fff; color: var(--green-dark); border-color: #fff; } /* Stat cards: glassy in dark */ [data-theme="dark"] .stat-card { background: var(--surface-card); border: 1px solid var(--border); } /* Phone mockup chat-bubble--incoming già scuro: ok in entrambi */ /* Smooth transition fra temi */ html { transition: color-scheme .3s ease; } .feature-card, .pricing-card, .nolimit-card, .wp-tab-content__inner, .wp-extra-card, .faq-item, .stat-card, .navbar, .mobile-menu, .wp-tab, .btn--outline { transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }