/* ═══════════════════════════════════════════════════════════════ EVO ELECTRIC — Theme System (Dark / Light) Apply data-theme="dark" or data-theme="light" on ═══════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"] { --bg-primary: #0c0e12; --bg-secondary: #12151b; --bg-tertiary: #181c24; --bg-card: rgba(20,24,32,.6); --surface-1: rgba(255,255,255,.04); --surface-2: #161a22; --ink-100: #ffffff; --ink-90: rgba(255,255,255,.92); --ink-80: rgba(255,255,255,.8); --ink-70: rgba(255,255,255,.65); --ink-60: rgba(255,255,255,.55); --ink-50: rgba(255,255,255,.4); --ink-40: rgba(255,255,255,.3); --ink-30: rgba(255,255,255,.18); --ink-20: rgba(255,255,255,.1); --ink-15: rgba(255,255,255,.06); --accent: #F47920; --accent-hover: #e06b15; --accent-soft: rgba(244,121,32,.12); --accent-soft-hover: rgba(244,121,32,.06); --accent-soft-strong: rgba(244,121,32,.24); --accent-border: rgba(244,121,32,.28); --accent-glow: rgba(244,121,32,.18); --border: rgba(255,255,255,.06); --border-hover: rgba(244,121,32,.4); --header-bg: rgba(12,14,18,.85); --text-primary: #fff; --text-secondary: rgba(255,255,255,.55); --text-tertiary: rgba(255,255,255,.3); } [data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #fafafa; --bg-tertiary: #f4f4f5; --bg-card: #ffffff; --surface-1: #f7f7f8; --surface-2: #f4f4f5; --ink-100: #0a0a0c; --ink-90: #18181b; --ink-80: #27272a; --ink-70: #3f3f46; --ink-60: #52525b; --ink-50: #71717a; --ink-40: #a1a1aa; --ink-30: #d4d4d8; --ink-20: #e4e4e7; --ink-15: #ececee; --accent: #F47920; --accent-hover: #d96911; --accent-soft: rgba(244,121,32,.1); --accent-soft-hover: rgba(244,121,32,.05); --accent-soft-strong: rgba(244,121,32,.18); --accent-border: rgba(244,121,32,.25); --accent-glow: rgba(244,121,32,.18); --border: #ececee; --border-hover: rgba(244,121,32,.4); --header-bg: rgba(255,255,255,.92); --text-primary: #0a0a0c; --text-secondary: rgba(10,10,12,.62); --text-tertiary: rgba(10,10,12,.42); } /* ────────────────────────────────────────────────────────────── LIGHT-MODE OVERRIDES for pages with hardcoded dark colors ────────────────────────────────────────────────────────────── */ [data-theme="light"] body { background: #ffffff !important; color: #0a0a0c !important; } /* TOP BAR (catalog/quote/about/faq style header) */ [data-theme="light"] .top-bar { background: rgba(255,255,255,.92) !important; border-bottom-color: #ececee !important; } [data-theme="light"] .top-bar .logo-text span, [data-theme="light"] .top-bar .logo-text { color: #0a0a0c !important; } [data-theme="light"] .top-bar .logo-sep { background: rgba(10,10,12,.18) !important; } [data-theme="light"] .top-nav a { color: rgba(10,10,12,.6) !important; } [data-theme="light"] .top-nav a:hover, [data-theme="light"] .top-nav a.active { color: #0a0a0c !important; } [data-theme="light"] .top-nav a.active { color: #F47920 !important; } [data-theme="light"] .nav-back { color: rgba(10,10,12,.6) !important; border-color: #ececee !important; } [data-theme="light"] .nav-back:hover { color: #0a0a0c !important; border-color: #d4d4d8 !important; background: #f7f7f8 !important; } /* HEADER (BEK index/about/gamma style #header) */ [data-theme="light"] #header.scrolled { background: rgba(255,255,255,.92) !important; border-bottom-color: #ececee !important; } [data-theme="light"] #header:not(.scrolled-orange) .logo-text span { color: #0a0a0c !important; } [data-theme="light"] #header:not(.scrolled-orange) nav a { color: rgba(10,10,12,.6) !important; } [data-theme="light"] #header:not(.scrolled-orange) nav a:hover { color: #0a0a0c !important; } [data-theme="light"] #header:not(.scrolled-orange) .header-phone { color: rgba(10,10,12,.6) !important; } [data-theme="light"] #header:not(.scrolled-orange) .logo-sep { background: rgba(10,10,12,.15) !important; } [data-theme="light"] #header.scrolled .logo-text span { color: #0a0a0c !important; } [data-theme="light"] #header.scrolled nav a { color: rgba(10,10,12,.6) !important; } [data-theme="light"] #header.scrolled .header-phone { color: rgba(10,10,12,.6) !important; } [data-theme="light"] #header:not(.scrolled):not(.scrolled-orange) { background: rgba(255,255,255,.4) !important; backdrop-filter: blur(20px); } [data-theme="light"] .menu-toggle { border-color: rgba(10,10,12,.15) !important; } [data-theme="light"] .menu-toggle span, [data-theme="light"] .menu-toggle span::before, [data-theme="light"] .menu-toggle span::after { background: #0a0a0c !important; } /* HERO stays dark for image visibility (it's a photo background) */ /* but text overlays are still readable */ /* STATS (BEK index #stats) */ [data-theme="light"] #stats { background: #fafafa !important; border-color: #ececee !important; } [data-theme="light"] #stats .stat-item:not(:last-child)::after { background: #ececee !important; } [data-theme="light"] .stat-label { color: rgba(10,10,12,.42) !important; } /* PRODUCTS (BEK index #products) */ [data-theme="light"] #products { background: #ffffff !important; } [data-theme="light"] .section-h2 { color: #0a0a0c !important; } [data-theme="light"] .prod-card { border-color: #ececee !important; background: #fafafa !important; } [data-theme="light"] .prod-card:hover { border-color: rgba(244,121,32,.3) !important; box-shadow: 0 18px 44px rgba(10,10,12,.08) !important; } [data-theme="light"] .scroll-arrow { background: #fafafa !important; border-color: #ececee !important; color: rgba(10,10,12,.5) !important; } [data-theme="light"] .scroll-arrow:hover:not(:disabled) { border-color: rgba(244,121,32,.4) !important; color: #F47920 !important; background: rgba(244,121,32,.1) !important; } /* ABOUT — keep dark photo backdrop but text already styled */ /* BRANDS */ [data-theme="light"] #brands { background: #ffffff !important; border-color: #ececee !important; } [data-theme="light"] .brand-item img { filter: brightness(.85) contrast(1.1) !important; } /* PERCHE / VANTAGGI */ [data-theme="light"] #perche { background: #fafafa !important; } [data-theme="light"] .perche-card { background: #ffffff !important; border-color: #ececee !important; } [data-theme="light"] .perche-card:hover { box-shadow: 0 18px 44px rgba(10,10,12,.08) !important; } [data-theme="light"] .perche-card h3 { color: #0a0a0c !important; } [data-theme="light"] .perche-card p { color: rgba(10,10,12,.62) !important; } [data-theme="light"] .perche-num { color: rgba(244,121,32,.35) !important; } [data-theme="light"] .circuit-line { stroke: rgba(10,10,12,.04) !important; } [data-theme="light"] .circuit-line-glow { stroke: rgba(10,10,12,.14) !important; } [data-theme="light"] .circuit-line-glow.drawn { stroke: #F47920 !important; } [data-theme="light"] .circuit-dot { fill: rgba(10,10,12,.1) !important; } [data-theme="light"] .circuit-dot.lit { fill: #F47920 !important; } [data-theme="light"] .circuit-node { stroke: rgba(10,10,12,.1) !important; } [data-theme="light"] .circuit-node.lit { stroke: #F47920 !important; } /* PROCESSO */ [data-theme="light"] #processo { background: #ffffff !important; } [data-theme="light"] .tl-step h4 { color: #0a0a0c !important; } [data-theme="light"] .tl-step p { color: rgba(10,10,12,.62) !important; } [data-theme="light"] .tl-dot { background: rgba(244,121,32,.1) !important; border-color: rgba(10,10,12,.1) !important; color: rgba(10,10,12,.5) !important; } [data-theme="light"] .tl-step.lit .tl-dot { background: #F47920 !important; color: #fff !important; border-color: #F47920 !important; } /* CERT */ [data-theme="light"] #cert { background: #fafafa !important; } [data-theme="light"] .cert-card { background: #ffffff !important; border-color: #ececee !important; } [data-theme="light"] .cert-card:hover { box-shadow: 0 18px 44px rgba(10,10,12,.08) !important; } [data-theme="light"] .cert-card h4 { color: #0a0a0c !important; } [data-theme="light"] .cert-card p { color: rgba(10,10,12,.62) !important; } /* FAQ */ [data-theme="light"] #faq { background: #ffffff !important; } [data-theme="light"] .faq-item { background: #fafafa !important; border-color: #ececee !important; } [data-theme="light"] .faq-item:hover { border-color: rgba(10,10,12,.15) !important; } [data-theme="light"] .faq-q { color: #0a0a0c !important; } [data-theme="light"] .faq-a { color: rgba(10,10,12,.62) !important; border-color: #ececee !important; } /* CONTATTI */ [data-theme="light"] #contatti { background: #fafafa !important; } [data-theme="light"] .contatto-item h4 { color: #0a0a0c !important; } [data-theme="light"] .contatto-item p, [data-theme="light"] .contatto-item a { color: rgba(10,10,12,.62) !important; } [data-theme="light"] .contatto-item:hover { background: #ffffff !important; border-color: #ececee !important; } [data-theme="light"] .map-wrap { border-color: #ececee !important; } /* COOKIE BANNER */ [data-theme="light"] .cookie-banner { background: rgba(255,255,255,.95) !important; border-top-color: #ececee !important; } [data-theme="light"] .cookie-banner p { color: rgba(10,10,12,.7) !important; } [data-theme="light"] .cookie-btn-reject { color: rgba(10,10,12,.7) !important; border-color: #ececee !important; } [data-theme="light"] .cookie-btn-reject:hover { color: #0a0a0c !important; border-color: #d4d4d8 !important; } /* MOBILE NAV */ [data-theme="light"] .mobile-nav { background: rgba(255,255,255,.97) !important; } [data-theme="light"] .mobile-nav a { color: rgba(10,10,12,.7) !important; border-bottom-color: #ececee !important; } [data-theme="light"] .mobile-nav a:hover, [data-theme="light"] .mobile-nav a.active { color: #F47920 !important; } [data-theme="light"] .mobile-nav-phone { color: rgba(10,10,12,.6) !important; } /* GAMMA pages */ [data-theme="light"] #g-hero { background: linear-gradient(160deg,#fff 0%,#fafafa 70%,#fff 100%) !important; } [data-theme="light"] #g-hero h1 { color: #0a0a0c !important; } [data-theme="light"] #g-hero .lead { color: rgba(10,10,12,.62) !important; } [data-theme="light"] #g-stats { background: #fafafa !important; } [data-theme="light"] .g-stat .l { color: rgba(10,10,12,.5) !important; } [data-theme="light"] .g-section h2 { color: #0a0a0c !important; } [data-theme="light"] .section-lede { color: rgba(10,10,12,.62) !important; } [data-theme="light"] .prod-card-g { background: #fafafa !important; border-color: #ececee !important; } [data-theme="light"] .prod-card-g:hover { box-shadow: 0 18px 44px rgba(10,10,12,.08) !important; border-color: rgba(244,121,32,.3) !important; } [data-theme="light"] .prod-card-g .body h4 { color: #0a0a0c !important; } [data-theme="light"] .prod-card-g .body p { color: rgba(10,10,12,.62) !important; } [data-theme="light"] .prod-card-g .price { color: #0a0a0c !important; } [data-theme="light"] .prod-card-g .price span { color: rgba(10,10,12,.5) !important; } [data-theme="light"] .prod-card-g .foot { border-color: #ececee !important; } [data-theme="light"] .prod-card-g .media { background: #f4f4f5 !important; } [data-theme="light"] #g-brands { background: #fafafa !important; border-color: #ececee !important; } [data-theme="light"] .g-brands-list img { filter: brightness(.85) contrast(1.1) !important; } [data-theme="light"] .g-brands-label { color: rgba(10,10,12,.5) !important; } [data-theme="light"] #g-specs { background: #fafafa !important; border-color: #ececee !important; } [data-theme="light"] .specs-table .row { border-color: #ececee !important; } [data-theme="light"] .specs-table .row .k { color: rgba(10,10,12,.5) !important; } [data-theme="light"] .specs-table .row .v { color: #0a0a0c !important; } [data-theme="light"] .feat-list li { background: #fafafa !important; border-color: #ececee !important; color: rgba(10,10,12,.7) !important; } [data-theme="light"] .app-card { background: #fafafa !important; border-color: #ececee !important; } [data-theme="light"] .app-card .t { color: #0a0a0c !important; } [data-theme="light"] .app-card:hover { background: rgba(244,121,32,.05) !important; border-color: rgba(244,121,32,.25) !important; } [data-theme="light"] #g-other { background: #ffffff !important; border-color: #ececee !important; } [data-theme="light"] .g-other-list a { background: #fafafa !important; border-color: #ececee !important; } [data-theme="light"] .g-other-list a:hover { background: rgba(244,121,32,.05) !important; } [data-theme="light"] .g-other-list a .label { color: #0a0a0c !important; } [data-theme="light"] .g-other-inner h6 { color: rgba(10,10,12,.5) !important; } [data-theme="light"] .breadcrumb { color: rgba(10,10,12,.5) !important; } [data-theme="light"] .breadcrumb a { color: rgba(10,10,12,.5) !important; } [data-theme="light"] .breadcrumb .sep { color: rgba(10,10,12,.25) !important; } [data-theme="light"] .badge-float { background: #ffffff !important; border-color: #ececee !important; color: rgba(10,10,12,.7) !important; } /* CATALOG / QUOTE / ABOUT inline-styled pages — generic light overrides */ [data-theme="light"] .page-hd h1, [data-theme="light"] .page-header h1 { color: #0a0a0c !important; } [data-theme="light"] .page-hd p, [data-theme="light"] .page-header p { color: rgba(10,10,12,.62) !important; } [data-theme="light"] .cta-strip { background: #fafafa !important; border-color: #ececee !important; } [data-theme="light"] .cta-strip h3 { color: #0a0a0c !important; } [data-theme="light"] .cta-strip p { color: rgba(10,10,12,.6) !important; } /* About / Warranty / Cert / FAQ / Quote / Precision text body fallback */ [data-theme="light"] section h2, [data-theme="light"] section h3, [data-theme="light"] section h4 { color: #0a0a0c !important; } /* ═══════════════════════════════════════════════════════════════ UNIFIED HEADER — applies to every page (.evo-* prefix) ═══════════════════════════════════════════════════════════════ */ .evo-header { position: sticky; top: 0; z-index: 100; height: 80px; background: var(--header-bg); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--border); transition: background .3s, border-color .3s; } .evo-header-inner { max-width: 1320px; margin: 0 auto; padding: 0 32px; height: 100%; display: flex; align-items: center; gap: 32px; } .evo-logo { display: flex; align-items: center; gap: 14px; user-select: none; flex-shrink: 0; } .evo-logo-img { height: 44px; width: auto; } .evo-logo-img-white { display: none; } .evo-logo-sep { width: 1.5px; height: 34px; background: rgba(255,255,255,.18); } .evo-logo-text { display: flex; flex-direction: column; line-height: 1.15; } .evo-logo-text span { color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .08em; font-family: 'Exo 2', sans-serif; } .evo-logo-line { height: 2px; background: var(--accent); margin-top: 2px; border-radius: 1px; } .evo-nav { display: flex; gap: 28px; align-items: center; flex: 1; justify-content: center; } .evo-nav a { color: rgba(255,255,255,.55); font-size: .82rem; font-weight: 500; letter-spacing: .03em; transition: color .25s; white-space: nowrap; position: relative; padding: 8px 0; } .evo-nav a:hover { color: #fff; } .evo-nav a.evo-active { color: var(--accent); } .evo-nav a.evo-active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background: var(--accent); border-radius: 1px; } .evo-nav-right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .evo-phone { color: rgba(255,255,255,.55); font-size: .82rem; display: inline-flex; align-items: center; gap: 8px; transition: color .25s; font-weight: 500; white-space: nowrap; } .evo-phone:hover { color: #fff; } .evo-phone svg { flex-shrink: 0; } .evo-toggle { width: 38px; height: 38px; border-radius: 8px; background: transparent; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .25s; flex-shrink: 0; } .evo-toggle:hover { color: #fff; border-color: rgba(255,255,255,.3); } .evo-toggle svg { width: 18px; height: 18px; } [data-theme="dark"] .evo-toggle .evo-icon-sun { display: block; } [data-theme="dark"] .evo-toggle .evo-icon-moon { display: none; } [data-theme="light"] .evo-toggle .evo-icon-sun { display: none; } [data-theme="light"] .evo-toggle .evo-icon-moon { display: block; } .evo-btn { padding: 10px 22px; background: var(--accent); color: #fff !important; font-weight: 700; font-size: .72rem; letter-spacing: .08em; border-radius: 6px; transition: all .25s; white-space: nowrap; border: none; } .evo-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(244,121,32,.25); } .evo-burger { display: none; width: 40px; height: 40px; background: transparent; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; align-items: center; justify-content: center; cursor: pointer; transition: all .25s; flex-shrink: 0; } .evo-burger:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); } .evo-burger span { display: block; width: 18px; height: 2px; background: #fff; position: relative; transition: all .25s; } .evo-burger span::before, .evo-burger span::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: all .25s; } .evo-burger span::before { top: -6px; } .evo-burger span::after { top: 6px; } .evo-burger.evo-open span { background: transparent; } .evo-burger.evo-open span::before { top: 0; transform: rotate(45deg); } .evo-burger.evo-open span::after { top: 0; transform: rotate(-45deg); } /* MOBILE NAV */ .evo-mnav { display: none; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; z-index: 99; background: var(--header-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 24px 32px 32px; flex-direction: column; gap: 0; overflow-y: auto; } .evo-mnav.evo-open { display: flex; } .evo-mnav a { color: rgba(255,255,255,.7); font-size: 1.05rem; font-weight: 600; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08); transition: color .25s; font-family: 'Exo 2', sans-serif; letter-spacing: .02em; } .evo-mnav a:hover, .evo-mnav a.evo-active { color: var(--accent); } .evo-mnav-footer { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 14px; } .evo-mnav-phone { color: rgba(255,255,255,.6) !important; font-size: .9rem !important; display: flex !important; align-items: center; gap: 10px; padding: 4px 0 !important; border-bottom: none !important; font-weight: 500 !important; } .evo-mnav-cta { display: inline-block; padding: 14px 28px; background: var(--accent); color: #fff !important; font-weight: 700; font-size: .82rem !important; letter-spacing: .08em; border-radius: 6px; text-align: center; transition: all .25s; border-bottom: none !important; padding-top: 14px !important; padding-bottom: 14px !important; } .evo-mnav-cta:hover { background: var(--accent-hover); } /* RESPONSIVE */ @media (max-width: 1100px) { .evo-header-inner { gap: 20px; padding: 0 20px; } .evo-nav { gap: 22px; } .evo-phone { display: none; } } @media (max-width: 900px) { .evo-nav { display: none; } .evo-burger { display: flex; } } /* LIGHT THEME OVERRIDES for unified header */ [data-theme="light"] .evo-header { background: rgba(255,255,255,.92); border-bottom-color: var(--border); } [data-theme="light"] .evo-logo-text span { color: #0a0a0c; } [data-theme="light"] .evo-logo-sep { background: rgba(10,10,12,.18); } [data-theme="light"] .evo-nav a { color: rgba(10,10,12,.6); } [data-theme="light"] .evo-nav a:hover { color: #0a0a0c; } [data-theme="light"] .evo-nav a.evo-active { color: var(--accent); } [data-theme="light"] .evo-phone { color: rgba(10,10,12,.6); } [data-theme="light"] .evo-phone:hover { color: #0a0a0c; } [data-theme="light"] .evo-toggle { border-color: rgba(10,10,12,.15); color: rgba(10,10,12,.6); } [data-theme="light"] .evo-toggle:hover { color: #0a0a0c; border-color: rgba(10,10,12,.3); } [data-theme="light"] .evo-burger { border-color: rgba(10,10,12,.15); } [data-theme="light"] .evo-burger:hover { border-color: rgba(10,10,12,.3); background: rgba(10,10,12,.04); } [data-theme="light"] .evo-burger span, [data-theme="light"] .evo-burger span::before, [data-theme="light"] .evo-burger span::after { background: #0a0a0c; } [data-theme="light"] .evo-mnav { background: rgba(255,255,255,.96); } [data-theme="light"] .evo-mnav a { color: rgba(10,10,12,.7); border-bottom-color: rgba(10,10,12,.08); } [data-theme="light"] .evo-mnav a:hover, [data-theme="light"] .evo-mnav a.evo-active { color: var(--accent); } [data-theme="light"] .evo-mnav-footer { border-top-color: rgba(10,10,12,.1); } [data-theme="light"] .evo-mnav-phone { color: rgba(10,10,12,.6) !important; }