/* ═══════════════════════════════════════════════════════════════════ theme-night.css — Single source of truth pentru tema noapte site-wide. Inclus pe homepage (index.html) și pe toate paginile produs (head.php). Activator: html.theme-night setat de JS din înainte de body render. Detectare: ora locală RO (tabel sunset/sunrise lunar) + prefers-color-scheme + override localStorage('asiraTheme'). Paletă: deep navy (warm-cool balanced) + cream text + light-blue accent. Toate variabilele se schimbă instant + override-uri specifice pentru carduri și containere care folosesc culori hardcoded. ═══════════════════════════════════════════════════════════════════ */ html.theme-night { --primary: #6ba8e3; --primary-light: #8cc0ee; --secondary: #7eb8e8; --accent: #ff8d3f; --accent-hover: #ffa766; --text: #e2e8f0; --text-light: #a8b3c4; --bg: #0f1a2d; --bg-soft: #162338; --bg-card: #1c2c45; --border: #2a3a5a; --success: #4ade80; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 12px 40px rgba(0,0,0,0.6); --shadow-xl: 0 20px 60px rgba(0,0,0,0.7); /* V2 variables (product pages V2 components) */ --v2-primary: #6ba8e3; --v2-primary-light: #8cc0ee; --v2-accent: #ff8d3f; --v2-text: #e2e8f0; --v2-text-light: #a8b3c4; --v2-text-muted: #7a8699; --v2-bg: #0f1a2d; --v2-bg-soft: #162338; --v2-bg-card: #1c2c45; --v2-border: #2a3a5a; --v2-success: #4ade80; --v2-danger: #f87171; --v2-shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --v2-shadow-md: 0 4px 16px rgba(0,0,0,0.5); --hero-from: #0f1a2d; --hero-mid: #162338; --hero-to: #1c2c45; } html.theme-night body { background: var(--bg); color: var(--text); } /* PJ mode în night: gold accent pe navy (banking classic) */ html.theme-night body.mode-pj { --primary: #d4a25a; --primary-light: #e6b974; --secondary: #c8902e; --accent: #ffa766; --accent-hover: #ffbb8a; --bg: #0e1626; --bg-soft: #141d33; --bg-card: #1a253e; --border: #2c3a5a; --hero-from: #0c1f33; --hero-mid: #15243d; --hero-to: #1f3252; } html.theme-night body.mode-pj nav a.nav-cta { background: #b87f1e; color: #fff; } html.theme-night body.mode-pj nav a.nav-cta:hover { background: #9b6818; } html.theme-night body.mode-pj .hero-cta-call { background: linear-gradient(135deg, #b87f1e, #d4a25a); box-shadow: 0 6px 20px rgba(184,127,30,0.4); } html.theme-night body.mode-pj .hero-cta-call:hover { box-shadow: 0 10px 28px rgba(184,127,30,0.5); } html.theme-night body.mode-pj .hero h1 span, html.theme-night body.mode-pj .hero h2 span { background: linear-gradient(135deg, #e6b974, #d4a25a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══ HEADER + NAV ═══ */ html.theme-night .top-bar { background: #0a1424; } html.theme-night .site-header { background: var(--bg-card); border-bottom: 1px solid var(--border); } html.theme-night nav a { color: var(--text); } html.theme-night nav a:hover { background: var(--bg-soft); color: var(--primary-light); } html.theme-night .site-logo .site-logo-brand, html.theme-night .site-logo .site-logo-brand a { color: #fff; } html.theme-night .mini-drop, html.theme-night .mega-menu, html.theme-night .mobile-secondary-menu { background: var(--bg-card); border-color: var(--border); color: var(--text); } html.theme-night .mini-drop-item, html.theme-night .mobile-secondary-menu a { color: var(--text); } html.theme-night .mini-drop-item:hover { background: var(--bg-soft); color: var(--primary-light); } html.theme-night .mini-drop-hint { color: var(--text-light); } html.theme-night .mini-drop-sep { background: var(--border); } html.theme-night .breadcrumb { color: var(--text-light); background: var(--bg-soft); } html.theme-night .breadcrumb a { color: var(--primary-light); } /* ═══ HERO BUBBLE Mihai — păstrează fundal alb + text dark (NU urma --text cream) ═══ */ html.theme-night .hero-bubble { color: #1a2332; } html.theme-night .hero-bubble strong { color: #003d7a; } /* ═══ CARDS + CONTAINERE — toate cele identificate prin audit ═══ */ html.theme-night .product-card, html.theme-night .why-card, html.theme-night .testimonial, html.theme-night .benefit-card, html.theme-night .for-who-card, html.theme-night .detail-box, html.theme-night .faq-item, html.theme-night .contact-channel, html.theme-night .sub-card, html.theme-night .despre-card, html.theme-night .sitemap-cat, html.theme-night .deep-section, html.theme-night .stat-card, html.theme-night .cmp-panel, html.theme-night .cmp-tabs, html.theme-night .scen-stats, html.theme-night .hub-card, html.theme-night .cat-card, html.theme-night .sel-card, html.theme-night .cmap-cell, html.theme-night .highlight-box { background: var(--bg-card); border-color: var(--border); color: var(--text); } html.theme-night .product-card *, html.theme-night .why-card *, html.theme-night .testimonial *, html.theme-night .benefit-card *, html.theme-night .for-who-card *, html.theme-night .detail-box *, html.theme-night .faq-item *, html.theme-night .contact-channel *, html.theme-night .sub-card *, html.theme-night .despre-card *, html.theme-night .sitemap-cat *, html.theme-night .deep-section *, html.theme-night .highlight-box * { color: inherit; } /* Accent-tinted cards (păstrează gradient cu adaptare night) */ html.theme-night .stat-card-accent { background: linear-gradient(165deg, #1f2c44 0%, #2b2030 100%); border-color: rgba(255,141,63,0.3); } /* ═══ TITLURI mari — devin text cream (NU --primary care e pal pe navy) ═══ */ html.theme-night .section-header h2, html.theme-night .why-card h3, html.theme-night .product-card h3, html.theme-night .for-who-card h3, html.theme-night .benefit-card h3, html.theme-night .testimonial h3, html.theme-night .deep-section h3, html.theme-night .sub-card h3, html.theme-night .despre-card h3, html.theme-night .stat-head h2, html.theme-night .cmp-head h2, html.theme-night .diag-head h2, html.theme-night .scen-title, html.theme-night .hub-card h3, html.theme-night h2, html.theme-night h3 { color: var(--text); } html.theme-night .cmp-panel-head h4 { color: var(--text); } html.theme-night .stat-prefix { color: var(--text-light); } html.theme-night .stat-number { color: var(--text); } /* Comparison tabs (.cmp-tab.active) — folosește paletă navy fixă pentru contrast bun cu text alb (variabilele --v2-primary devin light-blue în noapte, prea pal pe fundalul cărora alb cu greu se vede). */ html.theme-night .cmp-tab.active { background: linear-gradient(135deg, #1e3a5f, #2a4f7f); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.45); } html.theme-night .cmp-tab:hover:not(.active) { color: var(--primary-light); } html.theme-night body.mode-pj .cmp-tab.active { background: linear-gradient(135deg, #b87f1e, #d4a25a); color: #fff; } /* ═══ TLDR BLOCK (.section-tldr "Pe scurt") — solid navy în noapte ═══ În zi are gradient rgba(blue+orange) subtle pe fundal alb → frumos. În noapte același gradient pe navy → arată "gri deschis-bleu" ilizibil. Forțăm bg-card solid + border-left accent păstrat ca signature. */ html.theme-night .section-tldr { background: var(--bg-card); border-left-color: var(--accent); } html.theme-night .section-tldr > strong { color: var(--primary-light); } html.theme-night .section-tldr li { color: var(--text); } html.theme-night .section-tldr li strong { color: var(--primary-light); } /* ═══ SCENARIO — text și carduri cifre în noapte ═══ .scen-wrap și .diag-stack NU mai sunt box-uri rotunjite în zi → nu primesc override aici. Doar .scen-stats devine container rotunjit pe ambele moduri. */ html.theme-night .scen-wrap p { color: var(--text-light); } html.theme-night .scen-wrap p strong { color: var(--primary-light); } html.theme-night .scen-disclaimer { background: rgba(255,255,255,0.04); border-left-color: var(--text-light); color: var(--text-light) !important; } html.theme-night .scen-stats { background: var(--bg-card); border-color: var(--border); } html.theme-night .scen-stats > div { background: var(--bg-soft); border-color: var(--border); } html.theme-night .scen-stats strong { color: var(--text); } html.theme-night .scen-stats span { color: var(--text-light); } /* ═══ PALETĂ DIAG-LAYER pe .benefit-card / .for-who-card — păstrată identic în noapte (light pastel cu text dark, contrast bun pe orice fundal). Suprascrie override-ul navy din lista mare de carduri. ═══ */ html.theme-night .benefit-card:nth-child(4n+1), html.theme-night .for-who-card:nth-child(4n+1) { background: linear-gradient(135deg, #e0f2fe, #bae6fd); color: #075985; border-color: rgba(7,89,133,0.25); } html.theme-night .benefit-card:nth-child(4n+2), html.theme-night .for-who-card:nth-child(4n+2) { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); color: #4c1d95; border-color: rgba(76,29,149,0.25); } html.theme-night .benefit-card:nth-child(4n+3), html.theme-night .for-who-card:nth-child(4n+3) { background: linear-gradient(135deg, #fde68a, #fcd34d); color: #78350f; border-color: rgba(120,53,15,0.25); } html.theme-night .benefit-card:nth-child(4n+4), html.theme-night .for-who-card:nth-child(4n+4) { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; border-color: rgba(6,95,70,0.25); } /* ═══ SECTION BACKGROUNDS ═══ */ html.theme-night .scen, html.theme-night .diag, html.theme-night .stat { background: var(--bg); } html.theme-night .cmp, html.theme-night .deep, html.theme-night .section-alt, html.theme-night .mega-footer { background: var(--bg-soft); } html.theme-night .section { background: var(--bg); } /* ═══ SECTION TAGS (pill chips) ═══ */ html.theme-night .section-tag { background: rgba(107,168,227,0.15); color: var(--primary-light); } /* ═══ FOOTER + CTA BANNER ═══ */ html.theme-night .site-footer { background: #0a1424; border-top: 1px solid #1a2c47; } html.theme-night .site-footer * { color: rgba(255,255,255,0.85); } html.theme-night .site-footer .footer-brand-name, html.theme-night .site-footer a:hover { color: #fff; } html.theme-night .site-footer .footer-col-title { color: rgba(255,255,255,0.55); } html.theme-night .cta-banner { background: #0a1424; } html.theme-night .cta-bg-overlay { background: linear-gradient(180deg, rgba(10,20,36,0.65) 0%, rgba(10,20,36,0.82) 50%, rgba(10,20,36,0.65) 100%); } /* ═══ QUOTE BOX — mid-blue saturat, contrast bun cu text alb ═══ * --v2-primary în noapte e light-blue pal (#6ba8e3) optimizat pentru TEXT; * folosit ca BACKGROUND pe .quote cu text alb dă contrast slab (~3.2:1). * Override specific: gradient mid blue darker decât var(--v2-primary), dar * deschis decât bg navy al paginii → "box" iese în evidență, text alb citibil. */ html.theme-night .quote { background: linear-gradient(135deg, #1e4d8c 0%, #2a5e9c 100%); } /* ═══ MODE TABS PF/PJ ═══ */ html.theme-night .mode-tabs-wrap { background: var(--bg); } html.theme-night .mode-tab { background: var(--bg-soft); color: var(--text-light); border-color: var(--border); } html.theme-night .mode-tab:hover { background: var(--bg-card); color: var(--text); border-color: var(--primary-light); } html.theme-night .mode-tab.active { background: linear-gradient(135deg, #1e4d8c 0%, #2a5e9c 100%); color: #fff; border-color: #2a5e9c; box-shadow: 0 2px 12px rgba(30,77,140,0.4); } html.theme-night .mode-tab.active:hover { background: linear-gradient(135deg, #1e4d8c 0%, #2a5e9c 100%); color: #fff; border-color: #2a5e9c; } /* ═══ BUTTON ACTIVE/CTA — mid-blue gradient în noapte (var(--hero-from) e prea dark) ═══ */ html.theme-night .cont-btn { background: linear-gradient(135deg, #1e4d8c 0%, #2a5e9c 100%); color: #fff; box-shadow: 0 2px 12px rgba(30,77,140,0.4); } html.theme-night .cont-btn:hover { box-shadow: 0 4px 18px rgba(30,77,140,0.55); } /* ═══ IMAGES — păstrăm contrastul original (fără filter brightness) ═══ */ /* ═══ HERO OVERLAY — design UNIVERSAL aplicat în product-page.css și index.html. Gradient subtle stâng→dreapta, paletă neagră pură, identic în zi/noapte. NO override here — fotografia documentary respiră consistent în ambele moduri. */ /* ═══ IN-PAGE NAV (sticky Ghid/Hartă/Comparator/FAQ pe pagini secundare) ═══ */ html.theme-night .in-page-nav { background: rgba(15,26,45,0.96); border-bottom-color: var(--border); box-shadow: 0 2px 20px rgba(0,0,0,0.4); } html.theme-night .in-page-nav a { color: var(--text-light); } html.theme-night .in-page-nav a.active { color: var(--primary-light); border-bottom-color: var(--accent); } html.theme-night .in-page-nav a:hover { color: var(--primary-light); } /* ═══ FORMS + INPUTS ═══ */ html.theme-night input, html.theme-night textarea, html.theme-night select { background: var(--bg-card); color: var(--text); border-color: var(--border); } html.theme-night input::placeholder, html.theme-night textarea::placeholder { color: var(--text-light); } /* ═══ THEME TOGGLE BUTTON ═══ */ .theme-toggle { background: rgba(255,255,255,0.12); border: 0; color: #fff; cursor: pointer; font-size: 0.95em; padding: 4px 10px; border-radius: 14px; margin-right: 12px; transition: background 0.2s; line-height: 1; } .theme-toggle:hover { background: rgba(255,255,255,0.22); } html.theme-night .theme-toggle { background: rgba(255,255,255,0.08); } @media (max-width: 640px) { .top-bar-brand { display: none; } .theme-toggle { margin-right: 0; } } /* ═══ MODALS + DRAWERS (Mihai wizard, contact form) ═══ */ html.theme-night .modal, html.theme-night .modal-content, html.theme-night .drawer-content, html.theme-night .mihai-bubble, html.theme-night .mihai-window { background: var(--bg-card); color: var(--text); border-color: var(--border); } /* ═══ COMPARISON ROWS (cmp-rows din renderComparisonTabs) ═══ */ html.theme-night .cmp-row { border-color: var(--border); } html.theme-night .cmp-row dt { color: var(--text-light); } html.theme-night .cmp-row dd { color: var(--text); } /* ═══ NIGHT — OVERRIDE LIGHT-BLUE GRADIENTS (contrast AA fix) ═══ * În night mode, --primary/--primary-light sunt sky blue (#6ba8e3/#8cc0ee) — fine ca text color * pe dark bg, dar slab pe SURFACE color cu text alb (contrast ~4.2:1 AA marginal). * Override-uri navy profund pentru toate gradient-urile mari cu text alb. */ html.theme-night .highlight-strip, html.theme-night .despre-cta, html.theme-night .contact-cta, html.theme-night .contact-channel-primary, html.theme-night .mx-table thead th { background: linear-gradient(135deg, #1e3a5f 0%, #2a5c8e 100%) !important; } /* Subtle: lights up the orange strong/links inside highlight-strip — keep them readable */ html.theme-night .highlight-strip strong, html.theme-night .highlight-strip a { color: #ffd4a8; } /* ═══ NIGHT — DUAL LOGO SWAP (alb+orange variantă pentru dark bg) ═══ */ html.theme-night .site-logo .site-logo-img-light { display: none; } html.theme-night .site-logo .site-logo-img-night { display: block; }