/* ═══════════════════════════════════════════════════════ CARROZZERIA RALLY — Light Theme File: theme-light.css Attivato da: [data-theme="light"] sul Caricato DOPO style.css ═══════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── Override variabili globali ─────────────────────── */ --black: #1a1714; --dark: #ede9e3; --dark-soft: #e4e0d9; --white: #ffffff; --off-white: #f5f3f0; --grey-mid: #d4cfc8; --grey-text: #5a5650; } /* ══════════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════════ */ [data-theme="light"] #header { background: rgba(237,233,227,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(0,0,0,.08); } [data-theme="light"] #header.scrolled { background: rgba(237,233,227,.98); box-shadow: 0 1px 0 rgba(0,0,0,.1); } [data-theme="light"] .logo { background: var(--dark); } [data-theme="light"] .nav-desktop a { color: rgba(26,23,20,.55); } [data-theme="light"] .nav-desktop a:hover, [data-theme="light"] .nav-desktop a.active { color: var(--black); } [data-theme="light"] .header-cta { color: var(--black); } [data-theme="light"] .burger span { background: var(--black); } /* ══════════════════════════════════════════════════════ NAV MOBILE ══════════════════════════════════════════════════════ */ [data-theme="light"] .nav-mobile { background: var(--off-white); } [data-theme="light"] .nav-mobile a { color: var(--black); } [data-theme="light"] .nav-mobile a:hover { color: var(--gold); } [data-theme="light"] .nav-mobile .mob-phone { color: rgba(0,0,0,.4); } [data-theme="light"] .nav-mobile .mob-phone a { color: rgba(0,0,0,.7); } /* ══════════════════════════════════════════════════════ HERO — rimane dark per impatto visivo Solo overlay leggermente alleggerito ══════════════════════════════════════════════════════ */ [data-theme="light"] .hero-overlay { background: linear-gradient(105deg, rgba(13,13,13,.65) 0%, rgba(13,13,13,.22) 55%, rgba(13,13,13,.08) 100%), linear-gradient(to top, rgba(13,13,13,.6) 0%, transparent 45%); } /* ══════════════════════════════════════════════════════ SEZIONI DARK → avorio caldo ══════════════════════════════════════════════════════ */ [data-theme="light"] .s-dark { background: #ede9e3; color: var(--black); } [data-theme="light"] .s-dark .sec-h2 { color: var(--black); } /* Chi siamo — testi */ [data-theme="light"] .cs-body p { color: rgba(26,23,20,.58); } [data-theme="light"] .cs-body p strong { color: var(--black); } /* Tag */ [data-theme="light"] .tag { border-color: rgba(0,0,0,.12); color: rgba(26,23,20,.5); } /* ══════════════════════════════════════════════════════ SEZIONE BLACK → grigio avorio scuro ══════════════════════════════════════════════════════ */ [data-theme="light"] .s-black { background: #d6d1ca; color: var(--black); } [data-theme="light"] .stat-n { color: var(--gold-dark); } [data-theme="light"] .stat-l { color: rgba(26,23,20,.45); } [data-theme="light"] .stat { border-color: rgba(0,0,0,.07); } [data-theme="light"] .stat:hover { border-color: rgba(168,131,61,.35); background: rgba(168,131,61,.05); } /* ══════════════════════════════════════════════════════ SERVIZI — card (rimangono dark per leggibilità foto) Solo sfondo sezione light ══════════════════════════════════════════════════════ */ [data-theme="light"] .s-light { background: #faf8f5; } /* ══════════════════════════════════════════════════════ GESTIONE SINISTRI — off-white invariato, badge dark ══════════════════════════════════════════════════════ */ [data-theme="light"] .sinistri-badge { background: rgba(26,23,20,.88); } /* ══════════════════════════════════════════════════════ CTA STRIP — gold invariato ✓ ══════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ DOVE SIAMO — dark → avorio ══════════════════════════════════════════════════════ */ [data-theme="light"] #dove-siamo { background: #ede9e3; color: var(--black); } [data-theme="light"] .ci-icon { border-color: rgba(0,0,0,.1); } [data-theme="light"] .ci-val { color: rgba(26,23,20,.7); } [data-theme="light"] .ci-val a { color: var(--black); } [data-theme="light"] .sede-map-inset { border-color: #ede9e3; } [data-theme="light"] .sede-map-inset iframe { filter: grayscale(.3) brightness(.95); } /* ══════════════════════════════════════════════════════ FOOTER — dark → avorio scuro ══════════════════════════════════════════════════════ */ [data-theme="light"] #footer { background: #2a2520; border-top-color: rgba(255,255,255,.06); } /* Footer rimane scuro per contrasto — funziona benissimo */ /* ══════════════════════════════════════════════════════ MODAL — invariato (sfondo dark va bene su entrambi) ══════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ COOKIE BANNER — invariato (dark su entrambi i temi) ══════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ SCROLLBAR ══════════════════════════════════════════════════════ */ [data-theme="light"] ::-webkit-scrollbar-track { background: #e8e4de; } /* ══════════════════════════════════════════════════════ TOGGLE BUTTON — sole/luna nell'header ══════════════════════════════════════════════════════ */ #cr-theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; border: 1.5px solid rgba(255,255,255,.2); cursor: pointer; transition: border-color .3s, background .3s; flex-shrink: 0; padding: 0; } #cr-theme-toggle:hover { border-color: var(--gold); background: rgba(201,169,110,.1); } #cr-theme-toggle svg { width: 16px; height: 16px; color: rgba(255,255,255,.7); transition: color .3s, opacity .3s; position: absolute; } /* Icone — visibilità in base al tema */ #cr-theme-toggle .icon-moon { opacity: 1; } #cr-theme-toggle .icon-sun { opacity: 0; } [data-theme="light"] #cr-theme-toggle { border-color: rgba(0,0,0,.18); } [data-theme="light"] #cr-theme-toggle:hover { border-color: var(--gold-dark); background: rgba(168,131,61,.08); } [data-theme="light"] #cr-theme-toggle svg { color: rgba(26,23,20,.6); } [data-theme="light"] #cr-theme-toggle .icon-moon { opacity: 0; } [data-theme="light"] #cr-theme-toggle .icon-sun { opacity: 1; }