/*
* VoltRoute Design System — Kinetic Noir v2
* Basato su DESIGN.md + Stitch mockups
*
* Come applicare ad altre pagine:
*
* da aggiungere nel DOPO il tag inline.
*
* Zero modifiche a HTML o JS — solo override visivi.
*/
/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Hanken+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
/* ════════════════════════════════════════════
1. TOKEN PALETTE — Dark (default)
Base: OLED-pure black, Electric Cyan accent
════════════════════════════════════════════ */
:root {
/* Superfici (Kinetic Noir tonal layers) */
--bg: #080808;
/* Level-0 base, OLED black */
--bg2: #111111;
/* Level-1 alternate section */
--surface: #191919;
/* Card base */
--surface2: #222222;
/* Card elevated */
/* Vetro — bento cards */
--card: rgba(255, 255, 255, .055);
--card-h: rgba(255, 255, 255, .10);
/* Bordi — rim-light, niente shadow tradizionale */
--border: rgba(255, 255, 255, .10);
--border-h: rgba(0, 229, 255, .50);
/* Electric Cyan — primario assoluto */
--blue: #00e5ff;
--blue2: #00b8cc;
--blue-glow: rgba(0, 229, 255, .30);
/* Cyan dim */
--cyan: #00daf3;
--cyan-dim: rgba(0, 218, 243, .55);
/* Verde — charging / eco */
--green: #00f590;
--green2: #00cc77;
--green-dim: rgba(0, 245, 144, .14);
--green-glow: rgba(0, 245, 144, .30);
/* Oro — warning */
--gold: #fec931;
--gold2: #cc9f00;
--gold-dim: rgba(254, 201, 49, .14);
/* Tesla Red */
--tr: #db0513;
--tr2: #b3000f;
/* Testo — puro, senza tinte blu */
--text: #e8e8e8;
--text2: rgba(232, 232, 232, .72);
--text3: rgba(186, 201, 204, .55);
/* Raggio — 16px standard, 24px bento container */
--r: 1rem;
/* Font families — Kinetic Noir stack */
--fd: 'Sora', sans-serif;
--fb: 'Hanken Grotesk', sans-serif;
--fm: 'JetBrains Mono', monospace;
/* Glow shadows */
--sh-blue: 0 0 20px rgba(0, 229, 255, .25);
--sh-green: 0 0 20px rgba(0, 245, 144, .25);
/* Dropdown / nav */
--dd-bg: #191919;
--nav-scroll: rgba(8, 8, 8, .96);
--scan: transparent;
/* nessuna scanline */
}
/* ════════════════════════════════════════════
2. TOKEN PALETTE — Light
════════════════════════════════════════════ */
html[data-theme="light"] {
--bg: #f2f5f9;
--bg2: #e8edf4;
--surface: #ffffff;
--surface2: #f5f8fc;
--card: rgba(0, 100, 120, .04);
--card-h: rgba(0, 100, 120, .08);
--border: rgba(13, 31, 45, .15);
--border-h: rgba(0, 150, 170, .45);
--blue: #006875;
--blue2: #004f58;
--blue-glow: rgba(0, 104, 117, .18);
--cyan: #00626e;
--cyan-dim: rgba(0, 98, 110, .5);
--green: #00a86b;
--green2: #008855;
--green-dim: rgba(0, 168, 107, .12);
--green-glow: rgba(0, 168, 107, .22);
--gold: #c08000;
--gold2: #9a6500;
--gold-dim: rgba(192, 128, 0, .12);
--tr: #c41820;
--tr2: #9e1218;
--text: #0d1f2d;
--text2: rgba(13, 31, 45, .76);
--text3: rgba(13, 31, 45, .68);
--sh-blue: 0 4px 20px rgba(0, 104, 117, .12);
--sh-green: 0 4px 20px rgba(0, 168, 107, .14);
--dd-bg: #ffffff;
--nav-scroll: rgba(255, 255, 255, .96);
--scan: transparent;
}
/* ════════════════════════════════════════════
3. RESET SCAN-LINE (rimosso per Kinetic Noir)
════════════════════════════════════════════ */
body::before {
display: none !important;
}
/* ════════════════════════════════════════════
4. BODY BASE
════════════════════════════════════════════ */
body {
font-family: var(--fb);
background: var(--bg);
color: var(--text);
}
/* ════════════════════════════════════════════
5. SCROLLBAR
════════════════════════════════════════════ */
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: var(--bg2);
}
::-webkit-scrollbar-thumb {
background: rgba(0, 229, 255, .35);
border-radius: 2px;
}
/* ════════════════════════════════════════════
6. NAVBAR
════════════════════════════════════════════ */
nav.sc {
background: rgba(8, 8, 8, .96);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
border-bottom-color: rgba(255, 255, 255, .08);
box-shadow: none;
}
.nav-logo-mark {
background: #00e5ff;
color: #000;
font-family: var(--fd);
}
.nav-logo-text {
background: linear-gradient(90deg, #ffffff, #00e5ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--fd);
font-weight: 700;
}
.nav-links a {
font-family: var(--fm);
font-size: .68rem;
letter-spacing: .14em;
color: var(--text2);
}
.nav-links a:hover {
color: var(--blue);
}
.nav-links a::after {
background: var(--blue);
}
.nav-cta {
font-family: var(--fm);
font-size: .68rem;
letter-spacing: .12em;
border-color: rgba(0, 229, 255, .4);
color: var(--blue);
border-radius: 999px;
}
.nav-cta:hover {
background: var(--blue);
color: #000;
box-shadow: 0 0 20px rgba(0, 229, 255, .35);
}
.nav-drawer-cta {
background: var(--blue);
color: #000;
font-family: var(--fd);
font-weight: 600;
border-radius: 999px;
}
/* ════════════════════════════════════════════
7. HERO — Layout Kinetic Noir
════════════════════════════════════════════ */
/* Animazione background ambient (come Stitch animated-bg) */
@keyframes heroAmbient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.hero {
background: var(--bg);
position: relative;
overflow: hidden;
}
/* ── FOTO DI SFONDO HERO ──
Struttura aggiunta nell'HTML:
Effetto: mix-blend-luminosity + gradient overlay a nero (fedele al Stitch code.html)
Quando src è vuoto → sfondo CSS cinematografico come fallback.
─────────────────────────────────────────── */
.hero-photo-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-photo-bg::before {
content: '';
position: absolute;
inset: 0;
background: url('/Europe-web.png?v=10') center center / cover no-repeat fixed;
opacity: .6;
mix-blend-mode: screen;
z-index: 0;
}
.hero-bg-img { display: none !important; }
.hero-photo-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to right,
rgba(8,8,8,.85) 0%,
rgba(8,8,8,.45) 30%,
transparent 65%
),
linear-gradient(
to bottom,
rgba(8,8,8,.55) 0%,
rgba(8,8,8,.10) 18%,
rgba(8,8,8,.20) 45%,
rgba(8,8,8,.82) 82%,
rgba(8,8,8,.97) 100%
);
z-index: 1;
}
/* (fallback rimosso — background gestito direttamente su .hero-photo-bg) */
/* Hero-grid: rimossa (quadrettoni) */
.hero-grid {
display: none;
}
/* Hero layout: car come sfondo, testo full-width */
.hero-right {
display: none !important;
}
.hero-inner {
grid-template-columns: 1fr !important;
}
.hero-left {
max-width: 680px;
}
/* Orb: blending screen per lavorare bene sia con foto che senza */
.hero-orb-1 {
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(0, 60, 130, .3), transparent 65%);
mix-blend-mode: screen;
opacity: .7;
}
.hero-orb-2 {
background: radial-gradient(circle, rgba(0, 229, 255, .18), transparent 65%);
mix-blend-mode: screen;
opacity: .55;
}
/* Label sopra l'h1 — Label-Caps */
.hero-label {
font-family: var(--fm);
font-size: .65rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--blue);
opacity: .85;
}
.hero-label::before {
background: var(--blue);
opacity: .6;
}
.hero-label::after {
background: linear-gradient(90deg, var(--blue), transparent);
opacity: .2;
}
/* H1 Display-LG — bianco puro, Sora 700 */
.hero-h1 {
font-family: var(--fd);
font-size: clamp(3rem, 6vw, 5.5rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 1.8rem;
}
/* Nessun gradient text: .line1 e .line3 restano */
.hero-h1 .line1 {
color: var(--text);
display: block;
}
.hero-h1 .line2 {
display: block;
/* Override: electric cyan invece del gradiente multi-colore */
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: var(--blue);
background-clip: unset;
color: var(--blue);
filter: drop-shadow(0 0 24px rgba(0, 229, 255, .5));
}
.hero-h1 .line3 {
display: block;
color: rgba(255, 255, 255, .94) !important;
opacity: 1 !important;
font-size: .52em;
font-weight: 500;
letter-spacing: .02em;
font-family: var(--fb);
margin-top: .6rem;
text-shadow:
0 2px 18px rgba(0, 0, 0, .85),
0 0 4px rgba(0, 0, 0, .65);
}
/* Paragrafo hero — Hanken Grotesk body-lg */
.hero-p {
font-family: var(--fb);
font-size: 1.05rem;
line-height: 1.65;
font-weight: 400;
color: var(--text2);
}
/* Stats bento — stile Stitch */
.hero-stats {
border-top: 1px solid rgba(255, 255, 255, .08);
margin-top: 3rem;
display: flex;
gap: 0;
}
.hero-stat {
flex: 1;
padding: 1.4rem 1.2rem;
border-right: 1px solid rgba(255, 255, 255, .08);
position: relative;
}
.hero-stat:last-child {
border-right: none;
}
.hstat-val {
font-family: var(--fm);
font-size: 1.9rem;
font-weight: 700;
color: var(--blue);
display: block;
line-height: 1;
margin-bottom: .35rem;
letter-spacing: -.01em;
text-shadow: 0 0 16px rgba(0, 229, 255, .45);
}
.hstat-lbl {
font-family: var(--fm);
font-size: .6rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text3);
}
/* ════════════════════════════════════════════
8. PULSANTI — Kinetic Noir spec
Primary: solid cyan pill, testo nero
Ghost: bordo sottile bianco, pill
════════════════════════════════════════════ */
.btn-primary {
display: inline-flex;
align-items: center;
gap: .7rem;
padding: .95rem 2.4rem;
background: #00e5ff;
color: #000000;
font-family: var(--fd);
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
border: none;
border-radius: 999px;
cursor: pointer;
text-decoration: none;
transition: all .3s cubic-bezier(.25, .46, .45, .94);
box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
}
.btn-primary:hover {
background: #33eeff;
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 229, 255, .45), 0 0 0 1px rgba(0, 229, 255, .2);
}
.btn-ghost {
display: inline-flex;
align-items: center;
gap: .7rem;
padding: .95rem 2rem;
background: transparent;
color: var(--text);
font-family: var(--fd);
font-size: .78rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 999px;
cursor: pointer;
text-decoration: none;
transition: all .3s;
}
.btn-ghost:hover {
border-color: rgba(255, 255, 255, .55);
color: #ffffff;
background: rgba(255, 255, 255, .05);
box-shadow: none;
}
/* Bottone generazione percorso */
.btn-gen {
background: #00e5ff;
color: #000000;
font-family: var(--fd);
font-size: .8rem;
font-weight: 700;
letter-spacing: .12em;
border-radius: 999px;
box-shadow: 0 6px 24px rgba(0, 229, 255, .25);
}
.btn-gen:hover {
background: #33eeff;
box-shadow: 0 12px 40px rgba(0, 229, 255, .45);
transform: translateY(-2px);
}
.btn-gen::before {
display: none;
}
/* rimuovi shimmer — non serve */
/* ════════════════════════════════════════════
9. HUD HERO (desktop)
════════════════════════════════════════════ */
/* hero-inner sopra foto + orb + grid */
.hero-inner {
position: relative;
z-index: 3;
}
.hero-hud {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 1.5rem;
/* 24px */
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 0 0 1px rgba(0, 229, 255, .08),
inset 0 1px 0 rgba(255, 255, 255, .07);
}
.hero-hud::before {
background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .4), transparent);
}
.hud-corner {
border-color: rgba(0, 229, 255, .5);
}
.hud-title {
font-family: var(--fm);
font-size: .6rem;
letter-spacing: .22em;
color: var(--blue);
text-transform: uppercase;
}
.hud-dot {
background: var(--green);
box-shadow: 0 0 8px var(--green);
}
.hud-metrics {
background: rgba(255, 255, 255, .06);
border-radius: .75rem;
}
.hud-metric {
background: transparent;
}
.hm-val {
color: var(--cyan);
}
.hm-lbl {
color: var(--text3);
}
.ring-pct {
font-family: var(--fm);
font-size: 1.5rem;
font-weight: 700;
color: var(--green);
text-shadow: 0 0 16px rgba(0, 245, 144, .5);
}
/* ── HUD chrome: nasconde tutto tranne la foto ── */
.hud-corner,
.hud-title,
.charge-ring,
.hud-metrics {
display: none !important;
}
.hero-hud {
background: transparent !important;
border: none !important;
padding: 0 !important;
overflow: visible !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.hero-hud::before {
display: none !important;
}
/* ── Car Photo — bordi fusi col background ── */
.hud-car-photo {
position: relative;
width: 100%;
margin: 0;
border-radius: 0;
overflow: visible;
/* Maschera gradient: fonde tutti e 4 i bordi nel nero del hero */
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 12%, black 82%, transparent 100%);
-webkit-mask-composite: destination-in;
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 12%, black 82%, transparent 100%);
mask-composite: intersect;
}
.hud-car-photo img {
width: 100%;
height: auto;
display: block;
filter: brightness(.9) contrast(1.06) saturate(.88);
border-radius: 0;
}
.hud-car-photo::after {
display: none;
}
.hud-car-photo::before {
display: none;
}
/* ── Foto macchina visibile su TUTTI i device ── */
@media (max-width: 1280px) {
.hero-hud {
display: block !important;
}
.hud-car-photo img {
max-height: 360px;
object-fit: contain;
}
}
@media (max-width: 768px) {
.hud-car-photo img {
max-height: 260px;
}
}
@media (max-width: 430px) {
.hud-car-photo img {
max-height: 200px;
}
}
/* ════════════════════════════════════════════
10. TICKER
════════════════════════════════════════════ */
.ticker-wrap {
background: rgba(0, 0, 0, .7);
border-top: 1px solid rgba(255, 255, 255, .07);
border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ticker-wrap::before {
background: linear-gradient(90deg, var(--bg), transparent);
}
.ticker-wrap::after {
background: linear-gradient(270deg, var(--bg), transparent);
}
.ticker span {
color: rgba(186, 201, 204, .5);
}
.ticker span.hi {
color: var(--blue);
}
/* ════════════════════════════════════════════
11. FEATURES — Bento Grid
════════════════════════════════════════════ */
.features {
background: var(--bg2);
}
.features::before {
display: none;
}
.sec-tag {
font-family: var(--fm);
font-size: .65rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--blue);
}
.sec-tag::before {
background: var(--blue);
opacity: .6;
}
.sec-title {
font-family: var(--fd);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--text);
}
.sec-title em {
font-style: normal;
color: var(--blue);
-webkit-text-fill-color: var(--blue);
background: none;
-webkit-background-clip: unset;
background-clip: unset;
}
/* Feats bento */
.feats {
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 1.5rem;
overflow: hidden;
}
.feat {
background: rgba(255, 255, 255, .03);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition: background .3s, transform .3s;
}
.feat:hover {
background: rgba(255, 255, 255, .07);
}
.feat:hover::after {
opacity: 0;
}
/* disabilita gradiente overlay */
.feat-num {
font-family: var(--fm);
font-size: .62rem;
letter-spacing: .18em;
color: var(--blue);
opacity: .55;
}
.feat-ico {
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .05);
border-radius: .75rem;
transition: all .3s;
}
.feat:hover .feat-ico {
border-color: rgba(0, 229, 255, .4);
box-shadow: 0 0 16px rgba(0, 229, 255, .2);
}
.feat:hover .feat-ico::after {
opacity: 0;
}
.feat-name {
font-family: var(--fd);
font-size: 1rem;
font-weight: 500;
color: var(--text);
}
.feat-desc {
font-family: var(--fb);
font-size: .875rem;
line-height: 1.7;
color: var(--text2);
font-weight: 400;
}
/* ════════════════════════════════════════════
12. PLANNER FORM
════════════════════════════════════════════ */
.plan-form,
.explore-form {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 1.5rem;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.plan-form::before,
.explore-form::before {
background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .3), transparent);
}
.form-label {
font-family: var(--fm);
font-size: .62rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--blue);
opacity: .75;
}
html[data-theme="light"] .form-label {
color: var(--blue2);
opacity: 1;
}
.form-input,
.cs-trigger,
.date-trigger {
background: rgba(0, 0, 0, .45);
border: 1px solid rgba(255, 255, 255, .10);
border-radius: .75rem;
color: var(--text);
font-family: var(--fb);
}
.form-input::placeholder {
color: var(--text3);
}
.form-input:focus {
background: rgba(0, 229, 255, .05);
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(0, 229, 255, .12);
}
/* Autocomplete */
.ac-list,
.cs-dd,
.date-dd {
background: var(--dd-bg);
border: 1px solid rgba(255, 255, 255, .10);
border-radius: .75rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, .8);
}
.cs-item:hover,
.cs-item.sel,
.date-dd-item:hover,
.date-dd-item.sel,
.ac-item:hover {
background: rgba(0, 229, 255, .1);
color: var(--blue);
}
/* Vehicle cards */
.vcard {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 1rem;
transition: all .25s;
}
.vcard:hover {
border-color: rgba(0, 229, 255, .3);
background: rgba(0, 229, 255, .05);
}
.vcard.sel {
border-color: var(--blue);
background: rgba(0, 229, 255, .08);
box-shadow: 0 0 0 1px var(--blue), 0 0 20px rgba(0, 229, 255, .15);
}
.vcard-range {
color: var(--cyan);
}
/* Battery slider */
.batt-pct {
color: var(--green);
text-shadow: 0 0 14px rgba(0, 245, 144, .4);
font-family: var(--fm);
}
/* Tabs */
.ptab {
font-family: var(--fm);
font-size: .7rem;
letter-spacing: .12em;
}
.ptab.active {
color: var(--blue);
border-bottom-color: var(--blue);
}
.vtab {
border-radius: 999px;
font-family: var(--fm);
font-size: .62rem;
}
.vtab.active {
border-color: var(--blue);
color: var(--blue);
background: rgba(0, 229, 255, .1);
}
/* Chips */
.op-chip {
border-radius: 999px;
font-family: var(--fm);
font-size: .62rem;
}
.op-chip.active {
border-color: var(--blue);
color: var(--blue);
background: rgba(0, 229, 255, .1);
}
.op-chip:hover {
border-color: rgba(255, 255, 255, .25);
color: var(--text2);
}
.rmbtn.active {
border-color: var(--blue);
color: var(--blue);
background: rgba(0, 229, 255, .08);
}
.range-btn.active {
border-color: var(--gold);
color: var(--gold);
background: rgba(254, 201, 49, .08);
}
/* ════════════════════════════════════════════
13. CO2 BANNER
════════════════════════════════════════════ */
.co2-banner {
display: none !important;
}
.co2-banner::before {
background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.co2-banner-text strong {
color: var(--green);
}
.co2-banner-val {
color: var(--green);
text-shadow: 0 0 20px rgba(0, 245, 144, .4);
font-family: var(--fm);
}
.co2-prog-fill {
background: linear-gradient(90deg, #fec931, #00f590);
}
/* ════════════════════════════════════════════
14. RESULT — Europe Map Background + Timeline
════════════════════════════════════════════ */
/* Mappa Europa sempre visibile come sfondo della sezione planner (uniforme tra tab) */
.planner {
background:
linear-gradient(rgba(8, 8, 8, .87), rgba(8, 8, 8, .87)),
url('/Europe-web.png?v=10') center center / cover no-repeat fixed;
}
html[data-theme="light"] .planner {
background:
linear-gradient(rgba(242, 245, 249, .88), rgba(242, 245, 249, .88)),
url('/Europe-web.png?v=10') center center / cover no-repeat fixed;
}
.timeline::before {
background: linear-gradient(180deg, var(--blue), rgba(0, 229, 255, .08));
}
.tl-item {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all .3s;
}
.tl-item:hover {
border-color: rgba(0, 229, 255, .3);
background: rgba(0, 229, 255, .04);
transform: translateX(4px);
}
.tl-item.destination {
border-color: rgba(0, 245, 144, .18) !important;
background: rgba(12, 20, 16, 0.90) !important;
}
.tl-item.destination:hover {
border-color: var(--green) !important;
background: rgba(16, 30, 22, 0.95) !important;
}
.tl-dot {
background: var(--blue);
box-shadow: 0 0 10px rgba(0, 229, 255, .5);
}
.tl-dot.charge,
.tl-dot.dot-charge {
background: var(--gold);
box-shadow: 0 0 8px rgba(254, 201, 49, .4);
}
.tl-dot.dest,
.tl-dot.dot-dest {
background: var(--green);
box-shadow: 0 0 12px rgba(0, 245, 144, .5);
}
.tl-name {
font-family: var(--fd);
font-weight: 600;
color: var(--text);
}
.tl-sub {
font-family: var(--fm);
color: var(--text3);
}
.tl-desc {
font-family: var(--fb);
font-weight: 400;
color: var(--text2);
}
/* ════════════════════════════════════════════
15. STATS BAR RISULTATI
════════════════════════════════════════════ */
.stats-bar {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 1rem;
overflow: hidden;
}
.stats-bar .stat {
background: transparent;
backdrop-filter: blur(12px);
}
.stat-val {
color: var(--cyan);
font-family: var(--fm);
}
.stat-lbl {
font-family: var(--fm);
letter-spacing: .12em;
}
/* Charge gauge */
.charge-gauge {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: .75rem;
}
.charge-bar-fill {
background: linear-gradient(90deg, var(--blue), var(--green));
box-shadow: 0 0 10px rgba(0, 229, 255, .4);
}
/* ════════════════════════════════════════════
16. HOTEL / PLACE / MATCH CARDS
════════════════════════════════════════════ */
.hotel-card,
.place-card,
.stadium-card,
.match-card {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: border-color .25s;
}
.hotel-card:hover {
border-color: rgba(0, 229, 255, .3);
}
.place-card:hover {
border-color: var(--gold);
}
.match-card:hover {
border-color: var(--gold);
}
/* ════════════════════════════════════════════
17. WEATHER CHIPS
════════════════════════════════════════════ */
.weather-chip {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ════════════════════════════════════════════
18. ACTION + SAVINGS BAR
════════════════════════════════════════════ */
.action-bar,
.savings-bar {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.savings-val {
color: var(--green);
font-family: var(--fm);
}
/* ════════════════════════════════════════════
19. TAG / CHIPS
════════════════════════════════════════════ */
.tag-blue {
background: rgba(0, 229, 255, .10);
border-color: rgba(0, 229, 255, .28);
color: var(--blue);
}
.tag-green {
background: rgba(0, 245, 144, .08);
border-color: rgba(0, 245, 144, .22);
color: var(--green);
}
.tag-orange {
background: rgba(254, 201, 49, .08);
border-color: rgba(254, 201, 49, .22);
color: var(--gold);
}
/* ════════════════════════════════════════════
20. TESLA NOTICE
════════════════════════════════════════════ */
.tesla-notice {
background: rgba(219, 5, 19, .05);
border: 1px solid rgba(219, 5, 19, .22);
border-radius: 1rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.tesla-notice::before {
background: linear-gradient(90deg, transparent, rgba(219, 5, 19, .5), transparent);
}
.tesla-notice-btn {
background: var(--tr);
border-radius: 999px;
font-family: var(--fm);
}
/* ════════════════════════════════════════════
21. CTA SECTION
════════════════════════════════════════════ */
.cta-section {
background: var(--bg2);
border-top: 1px solid var(--border);
}
.cta-section::before {
display: none;
}
.cta-right {
background: rgba(255, 255, 255, .06);
border-radius: 1.5rem;
overflow: hidden;
}
.cta-stat {
background: transparent;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.cta-stat:hover {
background: rgba(255, 255, 255, .05);
}
.cta-stat-val {
color: var(--blue);
font-family: var(--fm);
text-shadow: 0 0 20px rgba(0, 229, 255, .35);
}
.cta-stat-lbl {
font-family: var(--fb);
color: var(--text2);
}
.cta-p {
font-family: var(--fb);
color: var(--text2);
font-size: 1rem;
line-height: 1.65;
}
/* ════════════════════════════════════════════
22. MODAL
════════════════════════════════════════════ */
.modal-box {
background: var(--surface);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 1.5rem;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
box-shadow: 0 40px 80px rgba(0, 0, 0, .9);
}
.mstep {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 1rem;
}
/* ════════════════════════════════════════════
23. MOBILE DRAWER
════════════════════════════════════════════ */
.nav-mobile-drawer {
background: var(--bg2);
border-left: 1px solid rgba(255, 255, 255, .08);
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
}
.nav-drawer-links a {
font-family: var(--fm);
font-size: .75rem;
letter-spacing: .12em;
color: var(--text2);
border-radius: .75rem;
}
.nav-drawer-links a:hover {
background: rgba(0, 229, 255, .07);
border-color: rgba(0, 229, 255, .2);
color: var(--blue);
}
/* ════════════════════════════════════════════
24. TRIP-MODE BUTTONS
════════════════════════════════════════════ */
.trip-mode-btn {
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 1rem;
color: var(--text3);
}
.trip-mode-btn.active {
border-color: var(--blue);
background: rgba(0, 229, 255, .07);
color: var(--text);
}
.trip-mode-btn.active .trip-mode-hint {
color: rgba(0, 229, 255, .55);
}
/* ════════════════════════════════════════════
25. LIGHT THEME — override completi
Ogni colore hardcoded viene qui neutralizzato
════════════════════════════════════════════ */
/* ── Scan line: già disabilitata ── */
html[data-theme="light"] body::before {
display: none !important;
}
/* ── Sfondo sezioni ── */
html[data-theme="light"] .hero {
background: var(--bg);
}
html[data-theme="light"] .features {
background: var(--bg2);
}
html[data-theme="light"] .cta-section {
background: var(--bg2);
border-top-color: var(--border);
}
/* ── Hero: griglia e orb invisibili in light ── */
html[data-theme="light"] .hero-grid {
display: none;
}
html[data-theme="light"] .hero-orb {
display: none;
}
/* ── Hero photo bg overlay in light: sfumatura verso bianco ── */
/* Light theme: mappa Europa sottile su sfondo chiaro */
html[data-theme="light"] .hero-photo-bg {
background: none;
}
html[data-theme="light"] .hero-photo-bg::before {
background: url('/Europe-web.png?v=10') center center / cover no-repeat fixed;
mix-blend-mode: multiply;
opacity: .18;
filter: none;
}
html[data-theme="light"] .hero-photo-overlay {
background:
linear-gradient(
to right,
rgba(242,245,249,.92) 0%,
rgba(242,245,249,.55) 30%,
transparent 65%
),
linear-gradient(
to bottom,
rgba(242,245,249,.70) 0%,
rgba(242,245,249,.10) 18%,
rgba(242,245,249,.20) 50%,
rgba(242,245,249,.95)100%
);
}
/* ── Nav ── */
html[data-theme="light"] nav.sc {
background: rgba(242, 245, 249, .97);
box-shadow: 0 2px 24px rgba(0, 60, 80, .07);
border-bottom-color: rgba(0, 100, 120, .1);
}
html[data-theme="light"] .nav-logo-text {
background: linear-gradient(90deg, #006875, #008ea0);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ── Hero testo ── */
html[data-theme="light"] .hero-h1 .line1 {
color: #0a1520;
}
html[data-theme="light"] .hero-h1 .line2 {
-webkit-text-fill-color: var(--blue);
color: var(--blue);
filter: none;
}
html[data-theme="light"] .hero-h1 .line3 {
color: rgba(10, 21, 32, .82) !important;
opacity: 1 !important;
text-shadow: 0 1px 10px rgba(255, 255, 255, .7);
}
html[data-theme="light"] .hero-stats {
border-top-color: transparent;
}
html[data-theme="light"] .hero-stat {
border-right-color: transparent;
}
html[data-theme="light"] .hstat-val {
text-shadow: none;
}
/* ── Hero HUD light: solo filtro foto ── */
html[data-theme="light"] .hud-car-photo img {
filter: brightness(.82) contrast(1.1) saturate(.7);
}
/* ── Features bento ── */
html[data-theme="light"] .feats {
background: rgba(0, 100, 120, .06);
border-color: transparent;
}
html[data-theme="light"] .feat {
background: #ffffff;
backdrop-filter: none;
}
html[data-theme="light"] .feat:hover {
background: rgba(0, 104, 117, .04);
border-color: transparent;
}
html[data-theme="light"] .feat-num {
color: var(--blue);
}
html[data-theme="light"] .feat-name {
color: #0a1520;
}
html[data-theme="light"] .feat-ico {
border-color: transparent;
background: rgba(0, 104, 117, .06);
}
/* ── Form ── */
html[data-theme="light"] .plan-form,
html[data-theme="light"] .explore-form {
background: #ffffff !important;
border-color: rgba(0, 80, 100, .14) !important;
box-shadow: 0 1px 8px rgba(0, 50, 100, .05) !important;
backdrop-filter: none !important;
}
html[data-theme="light"] .form-input,
html[data-theme="light"] .cs-trigger,
html[data-theme="light"] .date-trigger {
background: rgba(0, 100, 120, .04);
border-color: rgba(0, 80, 100, .15);
color: var(--text);
}
html[data-theme="light"] .form-input:focus {
background: rgba(0, 104, 117, .06);
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(0, 104, 117, .12);
}
html[data-theme="light"] .ac-list,
html[data-theme="light"] .cs-dd,
html[data-theme="light"] .date-dd {
box-shadow: 0 16px 48px rgba(0, 50, 80, .18);
}
/* ── Vehicle cards ── */
html[data-theme="light"] .vcard {
background: #ffffff;
border-color: var(--border);
box-shadow: 0 1px 4px rgba(0, 50, 80, .04);
}
html[data-theme="light"] .vcard:hover {
background: rgba(0, 104, 117, .04);
border-color: rgba(13, 31, 45, .30);
}
html[data-theme="light"] .vcard.sel {
background: rgba(0, 104, 117, .07);
border-color: var(--blue);
}
/* ── Timeline ── */
html[data-theme="light"] .tl-item {
background: #ffffff;
border-color: var(--border);
box-shadow: 0 2px 12px rgba(0, 50, 80, .05);
}
html[data-theme="light"] .tl-item:hover {
background: #f5f8fc !important;
border-color: rgba(13, 31, 45, .30);
}
html[data-theme="light"] .timeline::before {
background: linear-gradient(180deg, var(--blue), rgba(0, 104, 117, .1));
}
/* ── Hotel / Place / cards ── */
html[data-theme="light"] .hotel-card,
html[data-theme="light"] .charge-gauge,
html[data-theme="light"] .place-card,
html[data-theme="light"] .stadium-card,
html[data-theme="light"] .match-card {
background: #ffffff;
border-color: var(--border);
box-shadow: 0 1px 6px rgba(0, 50, 100, 0.04);
backdrop-filter: none;
}
html[data-theme="light"] .weather-chip {
background: #ffffff;
border-color: var(--border);
box-shadow: 0 1px 6px rgba(0, 50, 100, 0.04);
backdrop-filter: none;
}
/* ── Stats / savings / action ── */
html[data-theme="light"] .stats-bar {
background: #ffffff;
border-color: var(--border);
box-shadow: 0 1px 6px rgba(0, 50, 100, 0.04);
backdrop-filter: none;
}
html[data-theme="light"] .savings-bar,
html[data-theme="light"] .action-bar {
background: #ffffff;
border-color: var(--border);
box-shadow: 0 1px 6px rgba(0, 50, 100, 0.04);
backdrop-filter: none;
}
/* ── CO2 banner ── */
html[data-theme="light"] .co2-banner {
background: rgba(0, 184, 107, .05);
border-color: rgba(0, 143, 83, .18);
}
/* ── Timeline cards light theme ── */
html[data-theme="light"] .tl-item {
background: #ffffff;
border-color: var(--border);
box-shadow: 0 1px 6px rgba(0, 50, 100, 0.04);
backdrop-filter: none;
}
html[data-theme="light"] .tl-item.destination {
border-color: rgba(0, 143, 83, .2) !important;
background: #ffffff !important;
}
html[data-theme="light"] .tl-item.destination:hover {
background: #f2fcf7 !important;
border-color: var(--green) !important;
}
html[data-theme="light"] .tl-sub,
html[data-theme="light"] .tl-meta {
color: var(--text2);
}
html[data-theme="light"] .tl-desc {
color: var(--text);
}
html[data-theme="light"] .charge-gauge {
background: rgba(0, 100, 120, .06);
}
html[data-theme="light"] .charge-bar-track {
background: rgba(0, 100, 120, .1);
}
html[data-theme="light"] .hotel-card,
html[data-theme="light"] .place-card,
html[data-theme="light"] .match-card,
html[data-theme="light"] .stadium-card {
background: #ffffff;
border-color: var(--border);
}
html[data-theme="light"] .hotel-desc {
color: var(--text2);
}
html[data-theme="light"] .place-card-addr {
color: var(--text2);
}
/* ── CTA ── */
html[data-theme="light"] .cta-right {
background: rgba(0, 100, 120, .07);
}
html[data-theme="light"] .cta-stat {
background: transparent;
}
html[data-theme="light"] .cta-stat:hover {
background: rgba(0, 104, 117, .06);
}
html[data-theme="light"] .cta-stat-val {
text-shadow: none;
}
/* ── Modal ── */
html[data-theme="light"] .modal-box {
background: #ffffff;
border-color: transparent;
box-shadow: 0 24px 60px rgba(0, 50, 80, .18);
}
html[data-theme="light"] .mstep {
background: rgba(0, 100, 120, .04);
border-color: transparent;
}
/* ── Drawer mobile ── */
html[data-theme="light"] .nav-mobile-drawer {
background: rgba(242, 245, 249, .98);
border-left-color: transparent;
}
html[data-theme="light"] .nav-drawer-links a {
color: var(--text2);
}
html[data-theme="light"] .nav-drawer-links a:hover {
background: rgba(0, 104, 117, .07);
border-color: rgba(0, 104, 117, .18);
color: var(--blue);
}
/* ── Ticker ── */
html[data-theme="light"] .ticker-wrap {
background: rgba(232, 237, 244, .9);
border-top-color: transparent;
border-bottom-color: transparent;
}
html[data-theme="light"] .ticker-wrap::before {
background: linear-gradient(90deg, #e8edf4, transparent);
}
html[data-theme="light"] .ticker-wrap::after {
background: linear-gradient(270deg, #e8edf4, transparent);
}
html[data-theme="light"] .ticker span {
color: rgba(13, 31, 45, .45);
}
/* ── Bottoni ── */
html[data-theme="light"] .btn-primary {
background: var(--blue);
color: #ffffff;
}
html[data-theme="light"] .btn-ghost {
border-color: rgba(13, 31, 45, .22);
color: var(--text);
}
html[data-theme="light"] .btn-ghost:hover {
border-color: var(--blue);
color: var(--blue);
background: rgba(0, 104, 117, .05);
}
html[data-theme="light"] .btn-gen {
background: var(--blue);
color: #ffffff;
}
/* ── Trip mode ── */
html[data-theme="light"] .trip-mode-btn {
background: #ffffff;
border-color: transparent;
}
html[data-theme="light"] .trip-mode-btn.active {
border-color: var(--blue);
background: rgba(0, 104, 117, .07);
}
/* ── Progress bars / sliders ── */
html[data-theme="light"] .charge-bar-track {
background: rgba(0, 80, 100, .1);
}
html[data-theme="light"] .co2-prog-track {
background: rgba(0, 80, 100, .1);
}
/* ════════════════════════════════════════════
26. RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 1280px) {
.hero-h1 {
font-size: clamp(2.5rem, 7vw, 4rem);
}
}
@media (max-width: 600px) {
.hero-h1 {
font-size: clamp(2.2rem, 9vw, 3rem);
}
.hero-hud,
.plan-form,
.explore-form,
.feats,
.cta-right {
border-radius: 1rem;
}
.btn-primary,
.btn-ghost {
padding: .85rem 1.8rem;
font-size: .72rem;
}
}
@media (max-width: 430px) {
.hero-h1 {
font-size: clamp(1.8rem, 10vw, 2.6rem);
}
}
.hero-photo-bg {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
.hero-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.4;
filter: blur(4px) brightness(1.2);
mix-blend-mode: screen;
pointer-events: none;
}
.hero-photo-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
/* ══ LANGUAGE SELECTOR DESIGN (Apple/Tesla minimal text style) ══ */
.lang-sw {
display: inline-flex;
gap: .5rem;
align-items: center;
margin-right: .8rem;
flex-shrink: 0;
}
.lang-flag {
font-family: var(--fm) !important;
font-size: .7rem !important;
font-weight: 600 !important;
text-decoration: none !important;
color: var(--text3) !important;
padding: .2rem .45rem !important;
border-radius: 4px !important;
transition: all .2s ease !important;
border: 1px solid transparent !important;
opacity: 0.8 !important;
letter-spacing: 0.05em !important;
}
.lang-flag:hover {
color: var(--blue) !important;
border-color: rgba(0, 229, 255, .15) !important;
opacity: 1 !important;
background: rgba(0, 229, 255, .04) !important;
}
.lang-flag.active {
color: var(--blue) !important;
background: rgba(0, 229, 255, .08) !important;
border-color: rgba(0, 229, 255, .25) !important;
opacity: 1 !important;
}
/* Light theme overrides for language selector flags */
html[data-theme="light"] .lang-flag {
color: var(--text2) !important;
opacity: 0.85 !important;
}
html[data-theme="light"] .lang-flag:hover {
color: var(--blue) !important;
border-color: rgba(0, 104, 117, .20) !important;
background: rgba(0, 104, 117, .05) !important;
opacity: 1 !important;
}
html[data-theme="light"] .lang-flag.active {
color: #ffffff !important;
background: var(--blue) !important;
border-color: var(--blue) !important;
opacity: 1 !important;
}
/* Drawer / Mobile menu flags */
.nav-drawer-links .lang-flag {
font-size: .85rem !important;
padding: .3rem .6rem !important;
}
/* ══ THEME TOGGLE — Sun/Moon SVG ══ */
.theme-tgl {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--card);
color: var(--blue);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .3s cubic-bezier(.4, 0, .2, 1);
padding: 0;
margin-right: .8rem;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.theme-tgl:hover {
border-color: var(--border-h);
background: var(--card-h);
transform: rotate(15deg);
box-shadow: 0 0 16px rgba(0, 200, 255, .15);
}
/* Sun icon: visible only in dark mode */
.theme-icon-sun {
display: block;
transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s;
}
.theme-icon-moon {
display: none;
transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s;
}
/* Light mode: show moon, hide sun */
html[data-theme="light"] .theme-icon-sun {
display: none;
}
html[data-theme="light"] .theme-icon-moon {
display: block;
}
html[data-theme="light"] .theme-tgl {
border-color: rgba(0, 80, 100, .18);
background: rgba(0, 80, 100, .05);
color: var(--blue);
}
html[data-theme="light"] .theme-tgl:hover {
border-color: var(--blue);
background: rgba(0, 80, 100, .1);
transform: rotate(-15deg);
box-shadow: 0 0 16px rgba(0, 104, 117, .15);
}
@media (max-width: 1280px) {
.theme-tgl {
width: 42px;
height: 42px;
margin-right: .5rem;
}
}
/* ── Light: form borders subtle ── */
html[data-theme="light"] .vtab {
border-color: rgba(0, 80, 100, .14);
}
html[data-theme="light"] .rmbtn {
border-color: rgba(0, 80, 100, .14);
}
html[data-theme="light"] .op-chip {
border-color: rgba(0, 80, 100, .14);
}
html[data-theme="light"] .range-btn {
border-color: rgba(0, 80, 100, .14);
}
html[data-theme="light"] .trip-mode-btn {
border-color: rgba(0, 80, 100, .14);
}
html[data-theme="light"] .altbtn {
border-color: rgba(0, 80, 100, .14);
}
html[data-theme="light"] .soh-wrap {
border-color: rgba(0, 80, 100, .14);
}
html[data-theme="light"] .vcustom {
border-color: rgba(0, 80, 100, .14);
}
html[data-theme="light"] .batt-alert {
border-color: rgba(204, 136, 0, .25);
}
html[data-theme="light"] .tesla-notice {
border-color: rgba(209, 26, 31, .2);
}
html[data-theme="light"] .guest-ctrl {
border-color: rgba(0, 80, 100, .14);
background: rgba(0, 80, 100, .03);
}
html[data-theme="light"] .hero-stat {
border-color: rgba(0, 80, 100, .12);
}
html[data-theme="light"] .hero-stats {
border-color: rgba(0, 80, 100, .12);
}
html[data-theme="light"] .ptabs {
border-color: rgba(0, 80, 100, .12);
}
/* ════════════════════════════════════════════
27. RESPONSIVE BACKGROUND IMAGES
Europe-mobile.png per smartphone (≤768px)
Europe-web.png per desktop/tablet (≥769px)
════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Hero background (dark theme default) */
.hero-photo-bg::before {
background: url('/Europe-mobile.png') 50% 72% / cover no-repeat;
opacity: .6;
mix-blend-mode: screen;
}
/* Hero background — light theme */
html[data-theme="light"] .hero-photo-bg::before {
background: url('/Europe-mobile.png') 50% 72% / cover no-repeat;
mix-blend-mode: multiply;
opacity: .22;
filter: none;
}
/* Planner section: mappa mobile sempre visibile (uniforme tra tab)
Usa 100vw auto invece di cover+fixed: iOS Safari ha bug noti con fixed.
Cosi la mappa ha SEMPRE le stesse dimensioni (larghezza 100vw, altezza proporzionale)
indipendentemente dall'altezza del .planner che varia tra Pianifica e Esplora. */
.planner {
background:
linear-gradient(rgba(8, 8, 8, .87), rgba(8, 8, 8, .87)),
url('/Europe-mobile.png') center top / 200vw auto no-repeat;
background-color: var(--bg);
}
html[data-theme="light"] .planner {
background:
linear-gradient(rgba(242, 245, 249, .88), rgba(242, 245, 249, .88)),
url('/Europe-mobile.png') center top / 200vw auto no-repeat;
background-color: var(--bg);
}
}
/* ── NAV RESPONSIVENESS AND OVERFLOW CONTROL ── */
@media (max-width: 1200px) {
.nav-links {
gap: 1.2rem !important;
}
nav {
padding: 1rem 1.5rem !important;
}
}
@media (max-width: 900px) {
.nav-links {
gap: 0.8rem !important;
}
.nav-links a {
font-size: 0.62rem !important;
letter-spacing: 0.08em !important;
}
}
/* ══ Soste Fuori Filtro (isOutOfFilter: true) & Soste Stimate (isEstimated: true) ══ */
/* 1. Soste fuori filtro (terze parti) */
.tl-item.out-of-filter {
border: 1px dashed var(--gold) !important;
background: rgba(20, 18, 12, 0.90) !important;
}
.tl-item.out-of-filter:hover {
background: rgba(28, 24, 15, 0.95) !important;
border-color: var(--gold) !important;
}
.tl-dot.out-of-filter {
background: var(--gold) !important;
box-shadow: 0 0 10px var(--gold) !important;
}
.tag-out-of-filter {
background: rgba(254, 201, 49, .10) !important;
color: var(--gold) !important;
border: 1px solid rgba(254, 201, 49, .3) !important;
font-weight: 600 !important;
}
/* 2. Soste teoriche stimate */
.tl-item.estimated-stop {
border: 1px dashed var(--tr) !important;
background: rgba(22, 14, 14, 0.90) !important;
}
.tl-item.estimated-stop:hover {
background: rgba(30, 18, 18, 0.95) !important;
border-color: var(--tr) !important;
}
.tl-dot.estimated-stop {
background: var(--tr) !important;
box-shadow: 0 0 10px var(--tr) !important;
}
.tag-estimated {
background: rgba(219, 5, 19, .10) !important;
color: #ff5560 !important;
border: 1px solid rgba(219, 5, 19, .3) !important;
font-weight: 600 !important;
}
/* Tema chiaro - override contrasto WCAG 2.1 */
html[data-theme="light"] .tag-out-of-filter {
background: rgba(192, 128, 0, .1) !important;
color: #9a6500 !important;
border-color: rgba(192, 128, 0, .3) !important;
}
html[data-theme="light"] .tag-estimated {
background: rgba(196, 24, 32, .08) !important;
color: #c41820 !important;
border-color: rgba(196, 24, 32, .25) !important;
}
html[data-theme="light"] .tl-item.out-of-filter {
border: 1px dashed #c08000 !important;
background: #fffdf2 !important;
}
html[data-theme="light"] .tl-item.out-of-filter:hover {
background: #fff9e6 !important;
border-color: #c08000 !important;
}
html[data-theme="light"] .tl-item.estimated-stop {
border: 1px dashed #c41820 !important;
background: #fffcfc !important;
}
html[data-theme="light"] .tl-item.estimated-stop:hover {
background: #fff3f3 !important;
border-color: #c41820 !important;
}
/* === CORREZIONI DI ACCESSIBILITA' E LAYOUT (PLAN.md) === */
/* 1. Ottimizzazione responsiva dell'Action Bar mobile (sotto 600px) */
@media (max-width: 600px) {
.action-bar {
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.8rem 1rem !important;
}
.action-bar-left {
flex: none !important;
width: 100% !important;
margin-bottom: 0.3rem !important;
}
.action-bar .btn-viral,
.action-bar .btn-share,
.action-bar .btn-tesla-route {
border-radius: 999px !important; /* Uniforma la forma a capsula */
justify-content: center;
}
}
/* 2. Contrasto Pulsante Tesla Nav & Tag Sosta Stimata in Dark Mode */
.btn-tesla-route {
color: #ff8080 !important; /* Passa a un rosso più leggibile (#ff8080 invece di #e06060) */
background: rgba(232, 33, 39, 0.15) !important;
border-color: rgba(232, 33, 39, 0.45) !important;
}
.tag-estimated {
color: #ff7580 !important;
}
/* 3. Contrasto Pulsante Info Guide in Light Mode (Override stili in linea JS) */
html[data-theme="light"] .action-bar button[onclick="showTeslaInfoModal()"] {
color: #005f73 !important; /* Blu scuro ad alto contrasto per WCAG AA */
background: rgba(0, 100, 120, 0.08) !important;
border-color: rgba(0, 100, 120, 0.25) !important;
}
/* 4. Contrasto Selettore Lingue in Dark & Light Mode */
.lang-flag {
color: var(--text) !important;
opacity: 0.9 !important;
}
html[data-theme="light"] .lang-flag {
color: var(--text) !important;
opacity: 0.95 !important;
}
/* 5. Contrasto Bordi Input in Light Mode per leggibilità sotto luce solare */
html[data-theme="light"] .form-input,
html[data-theme="light"] .cs-trigger,
html[data-theme="light"] .date-trigger {
border-color: rgba(13, 31, 45, 0.3) !important;
}