/* =========================================================================
LAVASECCO POINT — SITO
Componenti e sezioni. I token stanno in css/sistema.css e vanno caricati
prima di questo file.
-------------------------------------------------------------------------
INDICE
1. Testata e navigazione
2. Hero
3. Binario dei fatti
4. Come funziona: tre passi animati (v6, al posto della scena)
6. Manifesto e fascia oraria
7. Trova un Point
8. Servizi per bisogno
9. Dietro lo sportello
10. Domande frequenti
11. Fascia business
12. Testata di pagina interna
13. Verifica consegna (scheda ordine)
14. Piede e barra cookie
15. Fascia promozione
16. Servizi: vetrina, listino, prezzo
17. Video: facciata con consenso
18. Recensioni
19. Dall'altra parte c'e' una persona
20. Scheda del singolo servizio
21. Azioni fisse su telefono
22. Preferenze cookie
23. App: scaricala (v6)
24. Prodotti: il listino vero dei negozi
25. La fascia di fotografie
27. Offerte: le stesse dell'app (v6)
28. Pagina app (v6)
29. Punti vendita: mappa in cima, elenco completo (v6)
30. La qualita' prima di tutto: il confronto (v6, 01/10/2026)
26. I bottoni non sono link (in fondo di proposito)
-------------------------------------------------------------------------
v6: le griglie non condividono piu' i fili. Ogni scheda ha il suo bordo,
gli angoli da 5 px e la fuga (--fuga) che la stacca dalle vicine.
========================================================================= */
/* =========================================================================
1. TESTATA E NAVIGAZIONE
-------------------------------------------------------------------------
Barra piena color inchiostro su ogni pagina, comprese quelle con la foto.
Due ragioni: il logo del marchio esiste solo in bianco, e una barra scura
costante fa da cornice al sito, come il profilo nero delle vetrine dei
punti vendita.
========================================================================= */
.sito-testata {
position: sticky;
top: 0;
/* Sopra la barra cookie (150): su telefono il menu aperto e' figlio della
testata, e deve poter coprire tutto. Sul desktop la testata e' una
striscia in alto e la barra sta in basso a destra: non si toccano. */
z-index: 160;
background: var(--fondo-scuro);
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* Il filo teal sotto la barra compare solo quando la pagina si stacca dal
principio: e' l'unico segnale di scorrimento del sito. */
.sito-testata::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--verde);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--medio) var(--curva);
}
.sito-testata.staccata::after { transform: scaleX(1); }
.testata-interna {
display: flex;
align-items: center;
gap: var(--s6);
min-height: var(--header);
}
.marchio { display: flex; align-items: center; flex: none; }
/* Logo della testata: 30-40 px di altezza secondo la larghezza dello schermo
(era 21 px; 09/10/2026, richiesta del committente: «e' troppo piccolo»).
Il PNG e' largo 824 px: resta nitido anche a 2x. */
.marchio img { width: auto; height: clamp(30px, 2.8vw, 40px); }
.navigazione {
display: flex;
align-items: center;
gap: clamp(16px, 1.7vw, 32px);
margin-left: auto;
}
.navigazione a {
font-size: var(--t-sm);
font-weight: 500;
color: var(--bianco);
text-decoration: none;
padding: var(--s2) 0;
border-bottom: 1px solid transparent;
transition: color var(--veloce) var(--curva), border-color var(--veloce) var(--curva);
}
.navigazione a:hover { color: var(--bianco); border-bottom-color: var(--verde); }
.navigazione a[aria-current] { color: var(--bianco); border-bottom-color: var(--verde); }
/* L'azione di testata, separata dal menu da un filo verticale: non deve
sembrare una voce di menu qualsiasi. «Apri un Point» e' uscito dalla
testata il 23/09/2026 (richiesta del committente): chi vuole aprirne uno
lo trova nel piede e nella fascia business in fondo alla home. */
.azioni-testata {
display: flex;
align-items: center;
gap: var(--s5);
padding-left: clamp(16px, 1.7vw, 32px);
border-left: 1px solid rgba(255, 255, 255, .16);
}
.azioni-testata .b { min-height: 40px; padding: 0 var(--s5); font-size: var(--t-xs); }
.azioni-testata .b--point { border-color: var(--verde); }
.apri-menu { display: none; margin-left: auto; padding: var(--s2); color: var(--bianco); }
.apri-menu .ico-chiudi { display: none; }
.apri-menu[aria-expanded="true"] .ico-apri { display: none; }
.apri-menu[aria-expanded="true"] .ico-chiudi { display: block; }
/* --- Menu su telefono ---------------------------------------------------
Pannello a tutta pagina, voci a corpo grande e ben distanziate: su
telefono il menu e' una pagina, non una tendina. Dalla v6 il menu ha
due voci in piu' (Promozioni, App) e passa al pannello sotto i 1200 px:
fra 980 e 1200 le sei voci e i due bottoni non stanno su una riga. */
@media (max-width: 1200px) {
.apri-menu { display: block; }
.navigazione {
position: fixed;
inset: var(--header) 0 0;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
margin: 0;
padding: var(--s6) var(--margine) var(--s8);
background: var(--fondo-scuro);
overflow-y: auto;
/* Chiuso di default: translate invece di display:none per poter
animare, e visibility per toglierlo dalla tabulazione. */
transform: translateY(-8px);
opacity: 0;
visibility: hidden;
transition: opacity var(--medio) var(--curva),
transform var(--medio) var(--curva),
visibility var(--medio);
}
.navigazione.aperto { transform: none; opacity: 1; visibility: visible; }
.navigazione > a {
font-size: 1.7rem;
font-weight: 600;
letter-spacing: var(--cr-tit);
color: var(--bianco);
padding: var(--s4) 0;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.navigazione > a:hover { border-bottom-color: rgba(255, 255, 255, .12); }
.azioni-testata {
flex-direction: column;
align-items: stretch;
gap: var(--s4);
margin-top: var(--s7);
padding: 0;
border: 0;
}
.azioni-testata .b { min-height: 56px; font-size: var(--t-sm); }
}
/* =========================================================================
2. HERO
-------------------------------------------------------------------------
Due campi affiancati che si toccano: a sinistra il testo su carta, a
destra la fotografia vera di un punto vendita, a filo del bordo della
finestra. Nessun velo sopra la foto, nessun testo dentro la foto: e'
l'unica immagine autentica che abbiamo e va vista.
========================================================================= */
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
align-items: stretch;
border-bottom: var(--filo-forte);
}
.hero__testo {
display: flex;
flex-direction: column;
justify-content: center;
padding-block: clamp(56px, 7vw, 128px);
padding-right: clamp(28px, 4vw, 72px);
/* Allinea il bordo sinistro del testo con quello di .contenuto, qualunque
sia la larghezza della finestra. */
padding-left: max(var(--margine), calc((100vw - var(--max)) / 2 + var(--margine)));
}
.hero__occhiello { display: block; margin-bottom: var(--s5); }
/* Nessun max-width: l'a capo lo decide il
nel markup, cosi' la spezzatura
e' sempre "Lavanderia, / senza orari." e non cambia da schermo a schermo. */
.hero__titolo { max-width: none; }
.hero__sommario {
margin-top: var(--s6);
font-size: var(--t-lead);
line-height: 1.5;
color: var(--inchiostro-2);
max-width: 40ch;
}
/* Le tre parole chiave del meccanismo — consegni, laviamo, ritiri — sono in
nero pieno dentro un sommario grigio: e' la sintesi del servizio letta in
un secondo, senza doverla mettere in un titolo. */
.hero__sommario b { color: var(--inchiostro); font-weight: 600; }
.hero__azioni {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin-top: var(--s7);
}
/* v6: il rimando all'app sotto ai due bottoni. Una riga di testo e non un
terzo bottone: l'azione principale dell'hero resta trovare un Point. */
.hero__app {
display: flex;
align-items: flex-start;
gap: var(--s2);
margin-top: var(--s5);
font-size: var(--t-sm);
color: var(--inchiostro-2);
}
.hero__app svg { flex: none; margin-top: 2px; color: var(--verde-scuro); }
.hero__app a { font-weight: 600; }
.hero__foto { position: relative; background: var(--verde-900); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* La targa con l'orario che stava in basso sulla foto (06:30 -> 23:30) e'
stata tolta nella v6: l'orario cambia da un Point all'altro (Desenzano e'
aperto 24 ore su 24) e sta sulla scheda di ogni negozio. */
@media (max-width: 980px) {
.hero { grid-template-columns: 1fr; }
.hero__testo {
padding: clamp(40px, 9vw, 64px) var(--margine);
order: 1;
}
.hero__foto { order: 2; aspect-ratio: 4 / 3; }
.hero h1 { max-width: 14ch; }
.hero__azioni .b { flex: 1 1 100%; }
}
/* =========================================================================
3. BINARIO DEI FATTI
-------------------------------------------------------------------------
Tre affermazioni verificabili in fila sotto l'hero, su fondo scuro. Sono
i tre motivi per cui il servizio esiste, non tre "feature".
Colonne larghe quanto il loro testo, gruppo al centro della fascia. Con
tre terzi di schermo (v5, v6 fino al 23/09/2026) le voci finivano a
quasi 200 px l'una dall'altra su un 1440: il committente le voleva piu'
raccolte. Sotto i 1000 px circa le colonne si stringono da sole e il
testo va a capo; sotto i 700 diventano una colonna sola.
========================================================================= */
.binario {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: center;
background: var(--fondo-scuro);
color: var(--bianco);
}
.binario__voce {
padding: var(--s5) clamp(20px, 2.2vw, 32px);
border-left: 1px solid rgba(255, 255, 255, .14);
}
.binario__voce:first-child { border-left: 0; }
/* Il trattino giallo davanti a ogni fatto: e' un tratto, non un testo, e sul
verde della fascia sta a 3.85 (la soglia dei tratti e' 3). Tre segni gialli
in fila sotto all'hero sono il primo posto in cui il secondo colore del
marchio si vede. */
.binario strong {
display: block;
font-size: var(--t-sm);
font-weight: 600;
padding-left: 20px;
position: relative;
}
.binario strong::before {
content: "";
position: absolute;
left: 0; top: .62em;
width: 12px; height: 2px;
/* Bianco e non giallo: sul verde dell'insegna il giallo sta a 1.70 e
scomparirebbe. Il giallo, qui sopra, puo' solo essere un pieno con
l'inchiostro sopra -- il bottone, l'etichetta, l'evidenziatore. */
background: var(--bianco);
}
.binario span { display: block; margin-top: 2px; padding-left: 20px; font-size: var(--t-xs); color: var(--bianco); }
@media (max-width: 700px) {
.binario { grid-template-columns: 1fr; }
.binario__voce {
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, .14);
padding-inline: var(--margine);
}
.binario__voce:first-child { border-top: 0; }
}
/* =========================================================================
4. COME FUNZIONA: TRE PASSI ANIMATI
-------------------------------------------------------------------------
Fino alla v5 accanto ai tre passi c'era la "composizione": il totem e la
parete da 2 metri disegnati in scala, con le quote. Il committente l'ha
fatta togliere. Al suo posto ogni passo ha un'icona animata che racconta
il gesto:
01 Consegna il capo appeso scende nell'armadietto, lo sportello
si apre, si richiude, la spia torna verde
02 Lavorazione il cestello gira, l'acqua ondeggia, salgono le bolle
03 Ritiro il telefono vibra, arriva l'SMS, il codice si
compone, "apri" si accende
e i tre passi sono legati da un filo lungo cui corre un punto giallo,
dal primo al secondo e dal secondo al terzo.
UN CICLO SOLO. Tutte le animazioni durano --ciclo-passi (6 s) e ogni
icona fa il suo gesto nel primo 45 % del proprio ciclo; il secondo e il
terzo passo partono con 2 e 4 secondi di ritardo (--ritardo). Il gesto
passa cosi' da un passo all'altro, e il riquadro del passo che si muove
si accende.
SOLO QUANDO SI VEDE. Le animazioni esistono solo dentro a
.tre-passi.in-vista, classe che js/main.js mette e toglie con un
IntersectionObserver: tre icone che girano fuori schermo consumano
batteria per niente. Senza JavaScript, e con "riduci movimento", ogni
icona resta ferma sul fotogramma che spiega di piu' (lo sportello aperto
con il capo dentro, il cestello con le bolle, il codice composto).
========================================================================= */
.tre-passi {
--icona-passo: clamp(92px, 8.4vw, 120px);
--passi-fuga: clamp(28px, 4vw, 64px);
--ciclo-passi: 6s;
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--passi-fuga);
}
.passo6 {
--ritardo: 0s;
position: relative;
display: flex;
flex-direction: column;
gap: var(--s3);
}
.passo6:nth-child(2) { --ritardo: 2s; }
.passo6:nth-child(3) { --ritardo: 4s; }
/* Il riquadro dell'icona: velo verde, filo, angoli da 5 px. */
.passo6__icona {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: var(--icona-passo);
height: var(--icona-passo);
margin-bottom: var(--s3);
background: var(--verde-50);
border: 1px solid var(--verde-100);
border-radius: var(--raggio);
}
.passo6__icona svg { width: 80%; height: 80%; overflow: visible; }
.passo6 .dato { display: block; }
.passo6 h3 { font-size: var(--t-xl); }
.passo6 p { color: var(--inchiostro-2); }
.passo6__nota {
margin-top: var(--s2);
padding-top: var(--s3);
border-top: var(--filo);
font-size: var(--t-sm);
color: var(--inchiostro-3);
}
/* --- Il filo fra un passo e il successivo --------------------------------
Ogni passo tranne l'ultimo disegna il proprio tratto: dal bordo della sua
icona al bordo dell'icona dopo. Il punto giallo (::before) lo percorre
una volta per ciclo, subito prima che il passo successivo si muova. */
.passo6:not(:last-child)::after {
content: "";
position: absolute;
top: calc(var(--icona-passo) / 2 - 1px);
left: calc(var(--icona-passo) + 12px);
right: calc(-1 * var(--passi-fuga) + 12px);
height: 2px;
background-image: linear-gradient(90deg, var(--verde-100) 55%, transparent 0);
background-size: 12px 2px;
}
.passo6:not(:last-child)::before {
content: "";
position: absolute;
z-index: 2;
top: calc(var(--icona-passo) / 2 - 5px);
left: calc(var(--icona-passo) + 8px);
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ambra);
box-shadow: 0 0 0 4px var(--ambra-velo);
opacity: 0;
}
/* --- Le icone: colori --------------------------------------------------- */
.ip { display: block; }
.ip * { vector-effect: non-scaling-stroke; }
.ip-ombra { fill: rgba(1, 48, 47, .08); }
.ip-tratto { fill: none; stroke: var(--verde-800); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* 01 · armadietto */
.ip-mobile { fill: var(--verde-100); stroke: var(--verde-800); stroke-width: 2.4; }
.ip-vano { fill: var(--verde-900); }
.ip-asta { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2; stroke-linecap: round; }
.ip-gancio { fill: none; stroke: var(--ambra); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ip-maglia { fill: var(--bianco); stroke: var(--verde-800); stroke-width: 2; stroke-linejoin: round; }
.ip-collo { fill: none; stroke: var(--verde-800); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ip-porta { fill: var(--bianco); stroke: var(--verde-800); stroke-width: 2.4; }
.ip-maniglia{ fill: none; stroke: var(--inchiostro-3); stroke-width: 3; stroke-linecap: round; }
.ip-targhetta { fill: none; stroke: var(--verde-100); stroke-width: 2; stroke-linecap: round; }
.ip-spia { fill: var(--ambra); }
.ip-ok circle { fill: var(--verde); }
.ip-ok path { fill: none; stroke: var(--bianco); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* 02 · lavatrice */
.ip-lavatrice { fill: var(--bianco); stroke: var(--verde-800); stroke-width: 2.4; }
.ip-plancia { fill: none; stroke: var(--verde-800); stroke-width: 2; }
.ip-display { fill: var(--verde-900); }
.ip-cifre { fill: none; stroke: var(--ambra); stroke-width: 1.6; stroke-linecap: round; }
.ip-led { fill: var(--verde); }
.ip-manopola { fill: var(--verde-50); stroke: var(--verde-800); stroke-width: 2; }
.ip-oblo { fill: var(--verde-100); stroke: var(--verde-800); stroke-width: 2.4; }
.ip-vetro { fill: var(--verde-50); stroke: var(--verde-800); stroke-width: 1.6; }
.ip-onda { fill: rgba(0, 154, 156, .3); }
.ip-panno { fill: var(--ambra); stroke: var(--verde-800); stroke-width: 1.5; stroke-linejoin: round; }
.ip-foro { fill: var(--verde-100); }
.ip-bolla { fill: var(--bianco); stroke: var(--verde); stroke-width: 1.3; }
.ip-riflesso { fill: none; stroke: var(--bianco); stroke-width: 2.6; stroke-linecap: round; }
.ip-brilla { fill: none; stroke: var(--ambra); stroke-width: 2.6; stroke-linecap: round; }
/* 03 · telefono */
.ip-cornice { fill: var(--verde-900); stroke: var(--verde-800); stroke-width: 2; }
.ip-schermo { fill: var(--bianco); }
.ip-altoparlante { fill: none; stroke: var(--verde-100); stroke-width: 2; stroke-linecap: round; }
.ip-fumetto { fill: var(--verde); }
.ip-righe { fill: none; stroke: var(--bianco); stroke-width: 2.4; stroke-linecap: round; }
.ip-cifra { fill: var(--ambra); stroke: var(--verde-800); stroke-width: 1.4; }
.ip-apri { fill: var(--verde); }
.ip-freccia { fill: none; stroke: var(--bianco); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ip-notifica { fill: var(--ambra); stroke: var(--bianco); stroke-width: 2; }
/* --- Punti di rotazione ---------------------------------------------------
Coordinate del viewBox (0 0 120 120), non del riquadro dell'elemento: il
cestello deve girare sul centro dell'oblo', non sul centro del panno. */
.ip-anta { transform-box: view-box; transform-origin: 31px 60px; transform: scaleX(.14); }
.ip-capo { transform-box: view-box; }
.ip-ok { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.ip--ritiro .ip-ok { opacity: 1; }
.ip-cestello { transform-box: view-box; transform-origin: 60px 68px; }
.ip-onda { transform-box: view-box; }
.ip-bolla { transform-box: fill-box; }
.ip-brilla { transform-box: fill-box; transform-origin: 50% 50%; }
.ip-telefono { transform-box: view-box; transform-origin: 60px 105px; }
.ip-sms { transform-box: view-box; }
.ip-notifica { transform-box: fill-box; transform-origin: 50% 50%; }
/* --- Le animazioni: solo in vista e solo se il movimento e' permesso --- */
@media (prefers-reduced-motion: no-preference) {
.tre-passi.in-vista .passo6 * {
animation-duration: var(--ciclo-passi);
animation-iteration-count: infinite;
animation-delay: var(--ritardo);
animation-fill-mode: backwards;
animation-timing-function: var(--curva);
}
/* il riquadro del passo che si muove si accende */
.tre-passi.in-vista .passo6__icona { animation-name: passo-acceso; }
/* il punto che corre sul filo */
.tre-passi.in-vista .passo6:not(:last-child)::before {
animation: passo-treno var(--ciclo-passi) var(--ritardo) infinite backwards;
}
/* 01 */
.tre-passi.in-vista .ip-capo { animation-name: ip1-capo; }
.tre-passi.in-vista .ip-anta { animation-name: ip1-anta; }
.tre-passi.in-vista .ip--consegna .ip-spia { animation-name: ip1-spia; }
.tre-passi.in-vista .ip--consegna .ip-ok { animation-name: ip1-ok; }
/* 02: il cestello e l'acqua girano sempre, il resto a turno */
.tre-passi.in-vista .ip-cestello { animation: ip2-gira 2.2s linear infinite; }
.tre-passi.in-vista .ip-onda { animation: ip2-onda 1.6s linear infinite; }
.tre-passi.in-vista .ip-bolla { animation-name: ip2-bolla; }
.tre-passi.in-vista .ip-bolla--2 { animation-delay: calc(var(--ritardo) + .35s); }
.tre-passi.in-vista .ip-bolla--3 { animation-delay: calc(var(--ritardo) + .7s); }
.tre-passi.in-vista .ip-led { animation-name: ip2-led; }
.tre-passi.in-vista .ip-brilla { animation-name: ip2-brilla; }
/* 03 */
.tre-passi.in-vista .ip-notifica { animation-name: ip3-notifica; }
.tre-passi.in-vista .ip-telefono { animation-name: ip3-vibra; animation-timing-function: linear; }
.tre-passi.in-vista .ip-sms { animation-name: ip3-sms; }
.tre-passi.in-vista .ip-cifra { animation-name: ip3-cifra; }
.tre-passi.in-vista .ip-cifra:nth-of-type(2) { animation-delay: calc(var(--ritardo) + .22s); }
.tre-passi.in-vista .ip-cifra:nth-of-type(3) { animation-delay: calc(var(--ritardo) + .44s); }
.tre-passi.in-vista .ip-cifra:nth-of-type(4) { animation-delay: calc(var(--ritardo) + .66s); }
.tre-passi.in-vista .ip-apri { animation-name: ip3-apri; }
.tre-passi.in-vista .ip--ritiro .ip-ok { animation-name: ip3-ok; }
}
/* Il primo fotogramma e' "spento": con fill-mode backwards e' quello che
il secondo e il terzo passo mostrano durante il loro ritardo. */
@keyframes passo-acceso {
0% { border-color: var(--verde-100); box-shadow: 0 0 0 0 rgba(0, 154, 156, 0); }
3%, 36% { border-color: var(--verde); box-shadow: 0 0 0 5px var(--verde-velo); }
46%, 100% { border-color: var(--verde-100); box-shadow: 0 0 0 0 rgba(0, 154, 156, 0); }
}
@keyframes passo-treno {
0%, 20% { left: calc(var(--icona-passo) + 8px); opacity: 0; }
23% { left: calc(var(--icona-passo) + 8px); opacity: 1; }
33% { left: calc(100% + var(--passi-fuga) - 18px); opacity: 1; }
36%, 100% { left: calc(100% + var(--passi-fuga) - 18px); opacity: 0; }
}
/* 01 · il capo scende, lo sportello si apre e si richiude sopra di lui */
@keyframes ip1-capo {
0%, 3% { transform: translateY(-34px); opacity: 0; }
8% { transform: translateY(-34px); opacity: 1; }
19%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes ip1-anta {
0%, 9% { transform: scaleX(1); }
14%, 21% { transform: scaleX(.14); }
27%, 100% { transform: scaleX(1); }
}
@keyframes ip1-spia {
0%, 11% { fill: var(--verde); }
13%, 24% { fill: var(--ambra); }
27%, 100% { fill: var(--verde); }
}
@keyframes ip1-ok {
0%, 27% { transform: scale(0); opacity: 0; }
31% { transform: scale(1.15); opacity: 1; }
34%, 62% { transform: scale(1); opacity: 1; }
68%, 100% { transform: scale(.6); opacity: 0; }
}
/* 02 · cestello, acqua, bolle, spia e il lampo del pulito */
@keyframes ip2-gira { to { transform: rotate(360deg); } }
@keyframes ip2-onda { to { transform: translateX(-28px); } }
@keyframes ip2-bolla {
0% { transform: translateY(4px); opacity: 0; }
5% { opacity: 1; }
30%, 100% { transform: translateY(-24px); opacity: 0; }
}
@keyframes ip2-led {
0%, 3%, 9%, 15%, 100% { fill: var(--verde); }
6%, 12%, 18%, 40% { fill: var(--ambra); }
}
@keyframes ip2-brilla {
0%, 28% { transform: scale(0) rotate(0deg); opacity: 0; }
34% { transform: scale(1.15) rotate(45deg); opacity: 1; }
40% { transform: scale(1) rotate(90deg); opacity: 1; }
48%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}
/* 03 · notifica, vibrazione, SMS, codice, "apri", fatto */
@keyframes ip3-notifica {
0% { transform: scale(0); }
4% { transform: scale(1.25); }
7%, 86% { transform: scale(1); }
92%, 100% { transform: scale(0); }
}
@keyframes ip3-vibra {
0%, 2% { transform: rotate(0deg); }
4% { transform: rotate(-5deg); }
6% { transform: rotate(5deg); }
8% { transform: rotate(-4deg); }
10% { transform: rotate(3deg); }
12%, 100% { transform: rotate(0deg); }
}
@keyframes ip3-sms {
0%, 10% { transform: translateY(8px); opacity: 0; }
16%, 86% { transform: translateY(0); opacity: 1; }
92%, 100% { transform: translateY(0); opacity: 0; }
}
@keyframes ip3-cifra {
0%, 20% { fill: var(--verde-50); }
22%, 86% { fill: var(--ambra); }
92%, 100% { fill: var(--verde-50); }
}
@keyframes ip3-apri {
0%, 36% { fill: var(--verde-100); }
38%, 86% { fill: var(--verde); }
92%, 100% { fill: var(--verde-100); }
}
@keyframes ip3-ok {
0%, 40% { transform: scale(0); opacity: 0; }
44% { transform: scale(1.15); opacity: 1; }
47%, 84% { transform: scale(1); opacity: 1; }
90%, 100% { transform: scale(.6); opacity: 0; }
}
/* --- Telefono: i passi in colonna, il filo diventa verticale ------------ */
@media (max-width: 860px) {
.tre-passi {
--icona-passo: 78px;
--passi-fuga: var(--s7);
grid-template-columns: 1fr;
}
.passo6 {
display: grid;
grid-template-columns: var(--icona-passo) minmax(0, 1fr);
column-gap: var(--s5);
row-gap: var(--s2);
align-content: start;
}
.passo6__icona { grid-row: 1 / span 4; margin-bottom: 0; }
.passo6 > :not(.passo6__icona) { grid-column: 2; }
.passo6:not(:last-child)::after {
top: calc(var(--icona-passo) + 10px);
bottom: calc(-1 * var(--passi-fuga) + 10px);
left: calc(var(--icona-passo) / 2 - 1px);
right: auto;
width: 2px;
height: auto;
background-image: linear-gradient(180deg, var(--verde-100) 55%, transparent 0);
background-size: 2px 12px;
}
/* In colonna il punto che corre non aggiunge niente: il filo basta. */
.passo6:not(:last-child)::before { display: none; }
}
/* =========================================================================
6. MANIFESTO E FASCIA ORARIA
-------------------------------------------------------------------------
Il punto piu' alto della pagina: una frase, molto spazio, un dato vero.
========================================================================= */
/* Verde profondo, non verde dell'insegna: in home il manifesto viene subito
dopo la sezione app, e con lo stesso fondo le due fasce si leggevano come
una sola. Lo stacco lo fa il colore, senza righe ne' strisce (una
striscia bianca e' stata provata e scartata dal committente). Il bianco
sopra sta a 11.46 : 1. Vedi --fondo-notte in sistema.css. */
.manifesto { background: var(--fondo-notte); color: var(--bianco); }
/* .dato su carta e' verde scuro: qui sopra sarebbe verde su verde (1.32).
Il manifesto e la fascia business non hanno la classe .su-verde perche'
si portano il fondo da soli, e vanno quindi elencati. */
.manifesto .dato,
.manifesto .occhiello,
.business .dato,
.business p,
.video__lato .dato { color: var(--bianco); }
.manifesto h2 {
font-size: var(--t-mega);
line-height: var(--lh-mega);
letter-spacing: var(--cr-mega);
font-weight: 600;
max-width: 14ch;
}
/* La parola in evidenza e' un evidenziatore pieno: giallo come FONDO con
l'inchiostro sopra, 6.86 : 1. Nato quando il manifesto era sul verde
dell'insegna, dove il giallo come testo stava a 1.70; sul verde profondo
resta cosi', come la sottolineatura gialla di «orari» nell'hero. E' il
posto in cui il secondo colore del marchio si vede di piu' in tutta la
pagina. */
.manifesto h2 em {
font-style: normal;
color: var(--inchiostro);
background: var(--ambra);
padding: 0 .12em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.manifesto__sotto {
margin-top: clamp(32px, 4vw, 56px);
font-size: var(--t-lead);
line-height: 1.5;
color: var(--bianco);
max-width: 46ch;
}
/* --- Fascia oraria ------------------------------------------------------
Ventiquattro ore su una riga, con illuminata la fascia in cui il punto
vendita e' accessibile. E' un grafico, non un ornamento: mostra il dato
reale letto sulla vetrina (6:30 - 23:30, festivi compresi) e rende
evidente in un colpo d'occhio quanto sia piu' larga di una lavanderia
con orario di negozio.
========================================================================= */
.orario { margin-top: clamp(48px, 6vw, 80px); }
.orario__pista {
position: relative;
height: 56px;
border-top: 1px solid rgba(255, 255, 255, .28);
border-bottom: 1px solid rgba(255, 255, 255, .28);
}
/* Tacche orarie: un gradiente ripetuto costa una sola regola e nessun nodo
nel DOM. Una tacca ogni 1/24 della larghezza. */
.orario__pista::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
to right,
rgba(255, 255, 255, .22) 0 1px,
transparent 1px calc(100% / 24)
);
}
/* 6:30 -> 23:30 su 24 ore: inizio 27.08%, larghezza 70.83%. */
.orario__aperto {
position: absolute;
top: 0; bottom: 0;
left: 27.08%;
width: 70.83%;
/* Giallo: la fascia sta su un fondo verde pieno, e in verde chiaro non si
distinguerebbe dal fondo. Cosi' e' il pieno giallo con l'orario in
inchiostro sopra, 6.86 : 1, ed e' anche il dato piu' importante della
sezione. */
background: var(--ambra);
transform-origin: left;
transform: scaleX(0);
transition: transform 1s var(--curva);
}
.js .orario.si-vede .orario__aperto { transform: scaleX(1); }
.orario__aperto span {
position: absolute;
left: var(--s3); top: 50%;
transform: translateY(-50%);
font-family: var(--f-dato);
font-size: var(--t-dato);
font-weight: 600;
letter-spacing: var(--cr-dato);
color: var(--inchiostro);
white-space: nowrap;
}
.orario__scala {
display: flex;
justify-content: space-between;
margin-top: var(--s2);
}
.orario__legenda { margin-top: var(--s4); color: var(--bianco); }
@media (max-width: 560px) {
.orario__aperto span { font-size: 10px; letter-spacing: .08em; }
}
/* =========================================================================
7. TROVA UN POINT
-------------------------------------------------------------------------
La conversione principale del sito per il cliente finale. Ricerca,
posizione, elenco. Ogni punto vendita e' una cella della parete.
========================================================================= */
/* Larghezza limitata: un campo di ricerca lungo 1300 px sembra una fascia
decorativa, non una cosa in cui si scrive. */
.cerca-point {
display: flex;
flex-wrap: wrap;
gap: var(--s3);
margin-bottom: var(--s6);
max-width: 760px;
}
.cerca-point__campo { position: relative; flex: 1 1 300px; }
.cerca-point__campo input { padding-left: 46px; }
.cerca-point__campo svg {
position: absolute;
left: var(--s4); top: 50%;
transform: translateY(-50%);
color: var(--inchiostro-3);
pointer-events: none;
}
.stato-ricerca {
margin-bottom: var(--s5);
font-size: var(--t-sm);
color: var(--inchiostro-2);
min-height: 1.5em;
}
/* Schede staccate (v6): ogni Point ha il suo bordo e i suoi angoli, e la
fuga le separa. Funziona con qualunque numero di negozi, anche con una
riga incompleta. */
.punti {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--fuga);
}
.punto {
display: flex;
flex-direction: column;
gap: var(--s3);
padding: clamp(20px, 2.2vw, 32px);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
transition: background var(--veloce) var(--curva), border-color var(--veloce) var(--curva);
}
@media (max-width: 1080px) { .punti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .punti { grid-template-columns: 1fr; } }
.punto:hover { background: var(--carta-2); border-color: var(--verde-100); }
.punto__alto { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.punto__citta { display: block; margin-bottom: var(--s1); }
.punto__nome { font-size: var(--t-lg); }
.punto__distanza {
flex: none;
font-family: var(--f-dato);
font-size: var(--t-dato);
font-weight: 600;
letter-spacing: .04em;
color: var(--verde-scuro);
white-space: nowrap;
}
.punto__indirizzo { font-style: normal; font-size: var(--t-sm); color: var(--inchiostro-2); }
.punto__orario {
display: flex;
align-items: center;
gap: var(--s2);
font-family: var(--f-dato);
font-size: var(--t-xs);
color: var(--inchiostro-2);
}
.punto__orario svg { flex: none; color: var(--verde-scuro); }
.punto__azioni {
display: flex;
flex-wrap: wrap;
gap: var(--s4);
margin-top: auto;
padding-top: var(--s4);
border-top: var(--filo-chiaro);
}
.punto__azioni a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--t-sm);
font-weight: 500;
color: var(--inchiostro);
text-decoration: none;
border-bottom: 1px solid var(--linea);
padding-bottom: 2px;
transition: border-color var(--veloce) var(--curva);
}
.punto__azioni a:hover { border-bottom-color: var(--inchiostro); }
.punto__azioni svg { color: var(--inchiostro-3); }
/* Nessun risultato: non un vicolo cieco ma due strade, l'elenco completo e
la richiesta di aprire un Point in quella zona. */
.senza-risultati { padding: var(--s7) 0; }
/* --- Mappa --------------------------------------------------------------
Servizio Google: niente iframe finche' non c'e' un consenso esplicito. */
.mappa {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--carta-2);
border: var(--filo);
border-radius: var(--raggio);
}
.mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mappa__consenso {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s4);
padding: var(--s6);
text-align: center;
}
.mappa__consenso p { max-width: 44ch; font-size: var(--t-sm); color: var(--inchiostro-2); }
@media (max-width: 620px) { .mappa { aspect-ratio: 4 / 5; } }
/* =========================================================================
8. SERVIZI PER BISOGNO
-------------------------------------------------------------------------
Quattro campi divisi da una croce di fili. Il cliente non cerca "lavaggio
a secco": cerca il posto dove sta il suo piumone.
========================================================================= */
.bisogni {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--fuga);
}
.bisogno {
display: flex;
flex-direction: column;
padding: clamp(28px, 3.2vw, 52px);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
}
.bisogno__n { display: block; margin-bottom: var(--s4); color: var(--verde-scuro); }
.bisogno h3 { font-size: var(--t-xl); margin-bottom: var(--s4); }
.bisogno__sommario { font-size: var(--t-sm); color: var(--inchiostro-2); margin-bottom: var(--s5); }
/* I capi come testo corrente separato da punti mediani, non come una
pioggia di etichette: sono trentacinque, e trentacinque riquadri
sarebbero rumore. */
.bisogno__capi {
font-size: var(--t-sm);
line-height: 1.85;
color: var(--inchiostro-2);
border-top: var(--filo-chiaro);
padding-top: var(--s4);
margin-top: auto;
max-width: none;
}
.bisogno__capi b { color: var(--inchiostro); font-weight: 500; }
@media (max-width: 820px) { .bisogni { grid-template-columns: 1fr; } }
/* Variante a tre colonne, stessa tecnica dei bordi: usata per i trattamenti
in servizi.html e per i blocchi del percorso in apri-un-point.html. */
.celle-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--fuga);
}
.cella-b {
display: flex;
flex-direction: column;
gap: var(--s3);
padding: clamp(24px, 2.6vw, 40px);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
}
.cella-b h3 { font-size: var(--t-lg); }
.cella-b .elenco { margin-top: auto; padding-top: var(--s4); border-top: var(--filo-chiaro); }
.cella-b p { max-width: none; }
@media (max-width: 1000px) { .celle-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .celle-3 { grid-template-columns: 1fr; } }
/* =========================================================================
9. DIETRO LO SPORTELLO
-------------------------------------------------------------------------
Sei righe numerate: cosa succede davvero dal momento in cui il cliente
chiude lo sportello. Sono i passaggi che il gestionale traccia davvero,
non un racconto di marca.
========================================================================= */
.catena { border-top: var(--filo); }
.catena__riga {
display: grid;
grid-template-columns: 68px 1fr;
gap: var(--s5);
align-items: baseline;
padding-block: var(--s5);
border-bottom: var(--filo);
}
.catena__n { font-family: var(--f-dato); font-size: var(--t-sm); color: var(--verde-scuro); }
/* 27ch e non 22: sotto quella misura i titoli piu' lunghi ("L'ordine entra
nel sistema") vanno a capo su due righe e la riga perde l'allineamento
con la descrizione accanto. */
.catena__testo { display: grid; grid-template-columns: minmax(0, 27ch) minmax(0, 1fr); gap: var(--s6); }
.catena__testo strong { font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--cr-tit); }
.catena__testo p { color: var(--inchiostro-2); font-size: var(--t-sm); }
@media (max-width: 780px) {
.catena__riga { grid-template-columns: 44px 1fr; gap: var(--s4); }
.catena__testo { grid-template-columns: 1fr; gap: var(--s2); }
}
/* =========================================================================
10. DOMANDE FREQUENTI
========================================================================= */
/* Le domande stanno in una colonna piu' stretta della pagina: una riga di
Q&A larga 1300 px si legge male, e la larghezza ridotta e' anche il modo
in cui il sito dice "questo si legge", non "questo si scorre". */
.faq-blocco { max-width: 900px; }
.faq { border-top: var(--filo-forte); }
.faq__voce { border-bottom: var(--filo); }
.faq__voce summary {
display: grid;
grid-template-columns: 46px 1fr auto;
align-items: baseline;
gap: var(--s3);
padding: var(--s5) 0;
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: var(--cr-tit);
cursor: pointer;
list-style: none;
transition: color var(--veloce) var(--curva);
}
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary:hover { color: var(--verde-scuro); }
.faq__n { font-family: var(--f-dato); font-size: var(--t-dato); font-weight: 400; color: var(--inchiostro-3); }
/* Il segno + diventa − quando la voce e' aperta: due tratti sovrapposti,
quello verticale si accorcia a zero. */
.faq__segno { position: relative; width: 16px; height: 16px; align-self: center; flex: none; }
.faq__segno::before, .faq__segno::after {
content: "";
position: absolute;
left: 50%; top: 50%;
background: var(--fondo-scuro);
transform: translate(-50%, -50%);
transition: transform var(--medio) var(--curva);
}
.faq__segno::before { width: 16px; height: 1.5px; }
.faq__segno::after { width: 1.5px; height: 16px; }
.faq__voce[open] .faq__segno::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__risposta { padding: 0 0 var(--s6) 46px; }
.faq__risposta p { color: var(--inchiostro-2); }
.faq__risposta p + p { margin-top: var(--s3); }
@media (max-width: 620px) {
.faq__voce summary { grid-template-columns: 32px 1fr auto; font-size: 1.1rem; }
.faq__risposta { padding-left: 32px; }
}
/* =========================================================================
11. FASCIA BUSINESS
-------------------------------------------------------------------------
Il secondo pubblico compare una volta sola, in fondo, e in un colore
diverso: chi cerca una lavanderia non deve inciampare nel franchising a
meta' pagina.
========================================================================= */
.business {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s6);
padding: clamp(36px, 4.5vw, 64px) clamp(28px, 4vw, 64px);
background: var(--fondo-scuro-2);
border-radius: var(--raggio);
color: var(--bianco);
}
.business h2 { font-size: var(--t-xl); max-width: 20ch; }
.business p { margin-top: var(--s3); color: var(--bianco); font-size: var(--t-sm); max-width: 46ch; }
/* =========================================================================
12. TESTATA DI PAGINA INTERNA
========================================================================= */
.testata-pagina {
padding-block: clamp(48px, 6vw, 96px) clamp(36px, 4.5vw, 64px);
border-bottom: var(--filo-forte);
}
.testata-pagina h1 { font-size: var(--t-xxl); max-width: 20ch; }
.testata-pagina .occhiello { margin-top: var(--s5); }
/* v6, punti-vendita.html: intestazione corta, perche' la prima cosa della
pagina deve essere la mappa. */
.testata-pagina--compatta { padding-block: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px); border-bottom: 0; }
.testata-pagina--compatta h1 { font-size: var(--t-xl); max-width: none; }
.testata-pagina--compatta .occhiello { margin-top: var(--s3); max-width: 70ch; }
.briciole {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-bottom: var(--s5);
font-family: var(--f-dato);
font-size: var(--t-dato);
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--inchiostro-3);
}
.briciole li + li::before { content: "/ "; color: var(--linea); }
.briciole a { color: var(--inchiostro-3); text-decoration: none; }
.briciole a:hover { color: var(--inchiostro); }
/* Pannello dei moduli: verifica consegna, assistenza, contatti. */
.pannello {
padding: clamp(28px, 3.4vw, 48px);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
}
/* Modulo a sinistra, spiegazioni a destra. La colonna di lato e' piu'
stretta perche' e' contorno, non compito: chi arriva qui deve compilare
il modulo, non leggere l'aside. */
.due-colonne {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: clamp(32px, 4vw, 72px);
align-items: start;
}
.colonna-lato { padding-top: var(--s2); }
.colonna-lato .righe p { max-width: none; margin-top: 4px; }
@media (max-width: 900px) { .due-colonne { grid-template-columns: 1fr; } }
/* =========================================================================
13. VERIFICA CONSEGNA
-------------------------------------------------------------------------
Classi usate anche dal markup generato da js/verifica-consegna.js: se ne
rinomini una, cerca prima la stringa in quel file.
========================================================================= */
.scheda-ordine { overflow: hidden; border: var(--filo-forte); border-radius: var(--raggio); background: var(--bianco); }
.scheda-ordine__alto {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s4);
padding: var(--s5);
background: var(--verde-950);
color: var(--bianco);
}
.scheda-ordine__id small {
display: block;
font-family: var(--f-dato);
font-size: var(--t-dato);
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--bianco);
}
.scheda-ordine__id strong {
display: block;
margin-top: 2px;
font-family: var(--f-dato);
font-size: 1.15rem;
font-weight: 500;
letter-spacing: .04em;
}
.scheda-ordine__corpo { padding: clamp(24px, 3vw, 40px); }
.pastiglia {
display: inline-flex;
align-items: center;
gap: var(--s2);
padding: 6px var(--s3);
border: 1px solid rgba(255, 255, 255, .35);
border-radius: var(--raggio);
font-family: var(--f-dato);
font-size: var(--t-dato);
font-weight: 500;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
}
.pastiglia__punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Il filo puo' essere verde pieno (e' un tratto, 3.44 contro una soglia di
3), la scritta no: scende a verde-scuro, 5.90. */
.pastiglia--pronto { border-color: var(--verde); color: var(--verde-scuro); }
.pastiglia--fatto { border-color: var(--bianco); color: var(--bianco); }
/* --- Percorso dell'ordine ----------------------------------------------- */
.percorso { margin-bottom: var(--s6); }
.percorso__tappa {
position: relative;
padding: 0 0 var(--s5) var(--s6);
border-left: 1px solid var(--linea);
}
.percorso__tappa:last-child { border-left-color: transparent; padding-bottom: 0; }
.percorso__segno {
position: absolute;
left: -8px; top: 2px;
width: 15px; height: 15px;
display: grid;
place-items: center;
background: var(--bianco);
border: 1px solid var(--linea);
border-radius: var(--raggio-s);
color: transparent;
}
.percorso__tappa.fatta { border-left-color: var(--verde); }
.percorso__tappa.fatta .percorso__segno { background: var(--ambra); border-color: var(--ambra); color: var(--inchiostro); }
.percorso__tappa.corrente .percorso__segno { border-color: var(--inchiostro); }
.percorso__titolo { display: block; font-weight: 600; font-size: var(--t-sm); }
.percorso__meta { display: block; margin-top: 2px; font-family: var(--f-dato); font-size: var(--t-xs); color: var(--inchiostro-3); }
/* --- Righe di dettaglio -------------------------------------------------- */
.dettagli { border-top: var(--filo); margin-bottom: var(--s6); }
.dettagli__riga {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--s4);
padding: var(--s3) 0;
border-bottom: var(--filo);
}
.dettagli__riga dt { font-size: var(--t-sm); color: var(--inchiostro-3); }
.dettagli__riga dd { margin: 0; font-size: var(--t-sm); font-weight: 500; text-align: right; }
/* --- Capi dell'ordine ---------------------------------------------------- */
.capi { border-top: var(--filo); }
.capi li {
display: flex;
gap: var(--s4);
padding: var(--s3) 0;
border-bottom: var(--filo);
font-size: var(--t-sm);
}
.capi__q { flex: none; font-family: var(--f-dato); color: var(--inchiostro-3); }
.capi__nome { display: block; }
.capi__opz { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--inchiostro-3); }
.capi__stato {
margin-left: var(--s2);
font-family: var(--f-dato);
font-size: 10px;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--ok);
}
/* Il codice di ritiro, quando i capi sono pronti: e' l'informazione per cui
il visitatore e' arrivato su questa pagina, e va letta da lontano.
Il selettore include .avviso perche' dentro a un avviso il testo eredita
il colore dello stato: qui serve il nero pieno, e' un codice da copiare. */
.codice-grande,
.avviso .codice-grande {
font-family: var(--f-dato);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--inchiostro);
}
/* =========================================================================
14. PIEDE E BARRA COOKIE
========================================================================= */
.sito-pieta { background: var(--fondo-scuro); color: var(--bianco); }
.sito-pieta a { color: var(--bianco); text-decoration: none; }
.sito-pieta a:hover { color: var(--bianco); text-decoration: underline; }
.pieta-griglia {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--s7);
padding-block: clamp(48px, 5vw, 80px);
}
.pieta-marchio img { width: auto; height: 24px; margin-bottom: var(--s4); }
.pieta-marchio p { font-size: var(--t-sm); max-width: 34ch; }
.pieta-social { display: flex; gap: var(--s3); margin-top: var(--s5); }
.pieta-social a {
display: grid;
place-items: center;
width: 38px; height: 38px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: var(--raggio);
color: var(--bianco);
transition: background var(--veloce) var(--curva), color var(--veloce) var(--curva);
}
.pieta-social a:hover { background: var(--bianco); color: var(--inchiostro); }
/* .55 e non .45: sotto quell'opacita' il grigio risultante scende a 4.5:1
esatti sul fondo inchiostro, ed e' testo di 12 px. */
.pieta-colonna h2 {
margin-bottom: var(--s4);
font-family: var(--f-dato);
font-size: var(--t-dato);
font-weight: 500;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--bianco);
}
.pieta-colonna li { margin-bottom: var(--s3); font-size: var(--t-sm); }
.pieta-basso {
display: flex;
flex-wrap: wrap;
gap: var(--s4) var(--s6);
justify-content: space-between;
padding-block: var(--s5);
border-top: 1px solid rgba(255, 255, 255, .14);
font-size: var(--t-xs);
color: var(--bianco);
}
.pieta-legale { display: flex; flex-wrap: wrap; gap: var(--s5); }
.pieta-cookie {
padding: 0;
background: none;
border: 0;
font: inherit;
color: var(--bianco);
cursor: pointer;
}
.pieta-cookie:hover { text-decoration: underline; }
@media (max-width: 900px) {
.pieta-griglia { grid-template-columns: 1fr 1fr; gap: var(--s6); }
.pieta-marchio { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.pieta-griglia { grid-template-columns: 1fr; }
}
/* --- Barra cookie -------------------------------------------------------
In basso a destra, non a tutta larghezza: e' una richiesta, non un muro.
A destra e non a sinistra perche' le azioni principali del sito — i
bottoni dell'hero, quelli delle sezioni — stanno tutte a sinistra, e un
banner non deve mai coprire la CTA della pagina che sta aprendo. */
.barra-cookie {
position: fixed;
right: var(--s4); bottom: var(--s4);
z-index: 150;
width: min(400px, calc(100vw - var(--s6)));
padding: var(--s5);
background: var(--fondo-scuro);
color: var(--bianco);
/* Sul piede, che ha lo stesso fondo, il bordo chiaro e l'ombra dicono
dove finisce la finestra (10/10/2026). */
border: 1px solid rgba(255, 255, 255, .16);
border-left: 3px solid var(--verde);
border-radius: var(--raggio);
box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
transform: translateY(calc(100% + var(--s6)));
/* Chiusa, sparisce del tutto a fine corsa: sul telefono sta sopra la
barra delle azioni, piu' in alto di quanto la spinga giu' il
translate, e ne restava fuori una striscia (10/10/2026). */
visibility: hidden;
transition: transform var(--lento) var(--curva), visibility 0s linear var(--lento);
}
.barra-cookie.si-vede {
transform: none;
visibility: visible;
transition: transform var(--lento) var(--curva), visibility 0s;
}
.barra-cookie h2 {
margin-bottom: var(--s3);
font-family: var(--f-dato);
font-size: var(--t-dato);
font-weight: 500;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
}
.barra-cookie p { font-size: var(--t-sm); color: var(--bianco); max-width: none; }
.barra-cookie a { color: var(--bianco); }
.barra-cookie__azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.barra-cookie__azioni .b { flex: 1 1 auto; min-height: 44px; font-size: var(--t-xs); }
/* =========================================================================
15. FASCIA PROMOZIONE
-------------------------------------------------------------------------
Una riga sola sotto la testata, e solo se PROMO.attiva e' true in
js/config.js. E' l'unica cosa del sito che si muove sopra il contenuto,
quindi vale una regola: puo' esistere una promozione per volta, e si
chiude. Chiusa, resta chiusa per la sessione (sessionStorage): un banner
che ritorna a ogni pagina e' un banner che si impara a saltare.
========================================================================= */
.promo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s3) var(--s5);
padding: var(--s3) var(--margine);
/* Ambra e non verde pieno: qui c'e' del testo sopra, e sul verde starebbe
a 4.04. Ed e' comunque il posto giusto per il colore dell'azione: una
promozione o si legge o non esiste. */
background: var(--ambra);
color: var(--inchiostro);
}
.promo__testo { font-size: var(--t-sm); font-weight: 500; max-width: none; }
.promo__testo b { font-weight: 600; }
.promo a {
color: var(--inchiostro);
font-weight: 600;
font-size: var(--t-sm);
text-underline-offset: 3px;
}
.promo__chiudi {
margin-left: auto;
display: grid;
place-items: center;
width: 28px; height: 28px;
color: var(--inchiostro);
border: 1px solid rgba(20, 24, 26, .25);
border-radius: var(--raggio-s);
}
.promo__chiudi:hover { background: rgba(20, 24, 26, .1); }
/* =========================================================================
16. SERVIZI: VETRINA, LISTINO, PREZZO
-------------------------------------------------------------------------
La differenza piu' grande rispetto alla versione precedente del sito:
i servizi smettono di essere quattro paragrafi ("quello che indossi",
"quello che non entra in lavatrice") e diventano quattordici oggetti
con un nome, un prezzo di partenza e una pagina propria.
Il paragrafo per bisogno resta — e' ancora il modo giusto per far capire
che cosa si puo' portare — ma viene dopo, in servizi.html: chi cerca
"quanto costa lavare un piumone" deve trovare la risposta prima.
Quattro in vetrina, quattordici nel listino. Non e' una gerarchia di
valore: sono i quattro che coprono la quasi totalita' delle ricerche.
========================================================================= */
/* --- Etichetta ----------------------------------------------------------
Due varianti, e la differenza e' il peso dell'informazione.
.etichetta il caso normale: fondo teal chiaro, bordo teal-100,
testo teal-800. 6.96 : 1. E' una targhetta, si legge
e non urla.
.etichetta--primo il servizio piu' richiesto, uno solo in tutta la
pagina: fondo VERDE del marchio con l'inchiostro
sopra, 5.69 : 1. E' l'unico posto del sito in cui
compare il verde, ed e' l'unico modo in cui puo'
comparire — come tratto o come testo su fondo chiaro
starebbe a 2.76 : 1.
Il teal pieno non e' un'opzione: e' gia' il bottone principale, e
un'etichetta dello stesso colore glielo toglierebbe di dosso. */
.etichetta {
display: inline-block;
padding: 3px var(--s2);
background: var(--verde-50);
border: 1px solid var(--verde-100);
border-radius: var(--raggio);
color: var(--verde-800);
font-family: var(--f-dato);
font-size: 10px;
font-weight: 600;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
white-space: nowrap;
}
.etichetta--primo {
/* Il giallo del marchio con l'inchiostro sopra: 6.86 : 1. E' l'unica
etichetta gialla di tutta la pagina, come il bottone primario e' l'unico
bottone giallo. */
background: var(--ambra);
border-color: var(--ambra);
color: var(--inchiostro);
}
/* "Presto disponibile" sui richiami dell'app finche' non e' negli store
(data-app-presto, li toglie avviaApp() in js/main.js quando
APP.pubblicata diventa true). Stessa etichetta di "Stagionale": cambia
solo lo spazio, sopra a un titolo o accanto a un occhiello. */
.etichetta--sopra { display: table; margin-bottom: var(--s3); }
.etichetta--accanto { margin-left: var(--s2); vertical-align: 1px; }
/* Sul telefono occhiello ed etichetta non stanno su una riga: l'etichetta
va sotto, allineata al testo (senza il rientro del margine sinistro). */
@media (max-width: 620px) {
.etichetta--accanto { display: table; margin: var(--s2) 0 0; }
}
/* --- Prezzo -------------------------------------------------------------
Il prezzo e' un dato, quindi e' in mono: la stessa voce degli orari, dei
codici di ritiro e delle distanze. Il "da" resta piccolo perche' la cifra
e' l'informazione e la preposizione e' il contorno. */
.prezzo {
display: flex;
align-items: baseline;
gap: 5px;
font-family: var(--f-dato);
color: var(--verde-scuro);
white-space: nowrap;
}
.prezzo__da {
font-size: 10px;
font-weight: 500;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--inchiostro-3);
}
.prezzo__cifra { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.prezzo__unita { font-size: var(--t-xs); color: var(--inchiostro-3); }
/* "Su preventivo" non e' una cifra: non va in corpo grande, altrimenti
sembra un prezzo scritto male. Il doppio .prezzo nel selettore serve a
battere le regole di contesto che ingrandiscono la cifra (.listino, la
striscia dei numeri): senza, "SU PREVENTIVO" finirebbe piu' grande dei
prezzi veri. */
.prezzo.prezzo--preventivo .prezzo__cifra {
font-size: var(--t-xs);
font-weight: 500;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--inchiostro-2);
}
/* Sul verde il prezzo e' bianco: il verde del marchio su se stesso non si
legge (1.9), e il giallo a 3.85 basterebbe solo ai corpi grandi. */
.su-verde .prezzo { color: var(--bianco); }
.su-verde .prezzo__da, .su-verde .prezzo__unita { color: var(--bianco); }
/* --- Vetrina: i quattro in evidenza ------------------------------------- */
.vetrina {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--fuga);
}
.vetrina__voce {
display: flex;
flex-direction: column;
gap: var(--s3);
overflow: hidden;
padding: clamp(24px, 2.4vw, 36px);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
color: var(--inchiostro);
text-decoration: none;
transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.vetrina__voce:hover { transform: translateY(-3px); box-shadow: var(--ombra-su); }
.vetrina__alto { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); min-height: 34px; }
.vetrina__voce h3 { font-size: var(--t-lg); }
.vetrina__voce p { font-size: var(--t-sm); color: var(--inchiostro-2); max-width: none; }
.vetrina__basso {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
margin-top: auto;
padding-top: var(--s4);
border-top: var(--filo-chiaro);
}
.vetrina__vai {
font-family: var(--f-dato);
font-size: var(--t-dato);
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--inchiostro-3);
transition: transform var(--medio) var(--curva), color var(--veloce) var(--curva);
}
.vetrina__voce:hover .vetrina__vai { color: var(--inchiostro); transform: translateX(3px); }
@media (max-width: 1080px) { .vetrina { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vetrina { grid-template-columns: 1fr; } }
/* --- Icona del servizio -------------------------------------------------
Disegnate con lo stesso filo di un pixel del resto del sito: sono
pittogrammi, non illustrazioni, e non portano informazione che non sia
gia' nel titolo accanto. */
.ico-servizio { flex: none; color: var(--verde-scuro); }
.vetrina__voce:hover .ico-servizio { color: var(--verde-scuro); }
/* --- Listino: tutti i servizi in righe -----------------------------------
Due colonne di righe, non un carosello. Un carosello nasconde meta'
listino dietro a un gesto e costringe a leggere in orizzontale: qui i
quattordici servizi si vedono tutti insieme, che e' esattamente cio' che
serve a chi sta cercando se trattiamo la sua roba. */
.listino {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px var(--fuga);
}
.listino__voce {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
align-items: center;
gap: var(--s4);
padding: var(--s4) var(--s5);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
color: var(--inchiostro);
text-decoration: none;
transition: background var(--veloce) var(--curva), border-color var(--veloce) var(--curva);
}
.listino__voce:hover { background: var(--carta-2); border-color: var(--verde-100); }
.listino__nome { display: block; font-weight: 600; font-size: var(--t-sm); }
.listino__nota { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--inchiostro-3); }
.listino .prezzo { justify-content: flex-end; }
.listino .prezzo__cifra { font-size: var(--t-testo); }
@media (max-width: 820px) { .listino { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
.listino__voce { grid-template-columns: 26px minmax(0, 1fr); row-gap: var(--s2); padding: var(--s4); }
.listino .prezzo { grid-column: 2; justify-content: flex-start; }
}
/* Riga di chiusura del listino: la nota sui prezzi sta subito sotto al
listino, non in fondo alla pagina, perche' e' li' che serve. */
.nota-prezzi {
display: flex;
gap: var(--s3);
margin-top: 8px;
padding: var(--s4) var(--s5);
border: var(--filo);
border-radius: var(--raggio);
background: var(--carta-2);
font-size: var(--t-xs);
color: var(--inchiostro-2);
}
.nota-prezzi p { max-width: 78ch; }
.nota-prezzi svg { flex: none; margin-top: 2px; color: var(--inchiostro-3); }
/* =========================================================================
17. VIDEO: FACCIATA CON CONSENSO
-------------------------------------------------------------------------
Un video ospitato da terzi e' una richiesta al loro server, quindi un
trasferimento di IP: come la mappa, non parte finche' non lo chiedi tu.
Finche' non premi, quello che vedi e' un rettangolo disegnato qui.
Se in js/config.js non c'e' nessun video, la sezione non compare
affatto: e' js/main.js a toglierla.
========================================================================= */
.video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: clamp(24px, 4vw, 64px); align-items: center; }
.video__telaio {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--verde-950);
border: var(--filo-forte);
border-radius: var(--raggio);
}
.video__telaio iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__facciata {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s4);
padding: var(--s6);
text-align: center;
color: var(--bianco);
}
.video__facciata p { font-size: var(--t-xs); color: var(--bianco); max-width: 40ch; }
/* Il triangolo di riproduzione dentro a un riquadro da 5 px. */
.video__play {
display: grid;
place-items: center;
width: 64px; height: 64px;
border: 1px solid rgba(255, 255, 255, .45);
border-radius: var(--raggio);
color: var(--bianco);
transition: background var(--veloce) var(--curva), color var(--veloce) var(--curva);
}
.video__play:hover { background: var(--ambra); color: var(--inchiostro); border-color: var(--ambra); }
.video h3 { font-size: var(--t-xl); margin-bottom: var(--s4); }
.video__lato p { color: var(--inchiostro-2); }
@media (max-width: 900px) { .video { grid-template-columns: 1fr; } }
/* =========================================================================
18. RECENSIONI
-------------------------------------------------------------------------
Tre celle, come le altre. Le stelle sono in teal-scuro: e' il colore dei
dati del sito — prezzi, distanze, link — e qui il voto e' un dato. Il
teal pieno non passerebbe come tratto su fondo chiaro (3.44 : 1),
teal-scuro sta a 5.90.
Ogni recensione porta il Point da cui arriva: e' una rete di negozi
diversi, e una recensione senza il negozio non vuol dire niente.
========================================================================= */
.recensioni {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--fuga);
}
.recensione {
display: flex;
flex-direction: column;
gap: var(--s4);
padding: clamp(24px, 2.6vw, 40px);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
}
.stelle { display: flex; gap: 3px; color: var(--verde-scuro); }
.recensione blockquote {
margin: 0;
font-size: var(--t-lead);
line-height: 1.5;
letter-spacing: var(--cr-tit);
max-width: none;
}
.recensione figcaption {
margin-top: auto;
padding-top: var(--s4);
border-top: var(--filo-chiaro);
font-size: var(--t-sm);
font-weight: 600;
}
.recensione figcaption span {
display: block;
margin-top: 2px;
font-family: var(--f-dato);
font-size: var(--t-dato);
font-weight: 400;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--inchiostro-3);
}
@media (max-width: 900px) { .recensioni { grid-template-columns: 1fr; } }
/* =========================================================================
19. DALL'ALTRA PARTE C'E' UNA PERSONA
-------------------------------------------------------------------------
La cosa che il sito precedente non diceva da nessuna parte: il negozio
e' automatico, l'assistenza no. E' la contro-obiezione all'unica vera
perplessita' di chi non ha mai usato un armadietto — "e se qualcosa va
storto, con chi parlo?".
========================================================================= */
.persona {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
overflow: hidden;
border: var(--filo-forte);
border-radius: var(--raggio);
background: var(--bianco);
}
.persona__testo { padding: clamp(28px, 3.4vw, 56px); }
.persona__testo h2 { font-size: var(--t-xl); max-width: 18ch; }
.persona__testo p { margin-top: var(--s5); color: var(--inchiostro-2); }
.persona__lato {
padding: clamp(28px, 3.4vw, 56px);
background: var(--carta-2);
border-left: var(--filo);
}
.persona__lato .righe { border-top: 0; }
.persona__lato .righe > li:first-child { padding-top: 0; }
.persona__lato strong { display: block; font-size: var(--t-sm); }
.persona__lato p { margin-top: 2px; font-size: var(--t-xs); color: var(--inchiostro-3); max-width: none; }
.persona__azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
@media (max-width: 860px) {
.persona { grid-template-columns: 1fr; }
.persona__lato { border-left: 0; border-top: var(--filo); }
}
/* =========================================================================
20. SCHEDA DEL SINGOLO SERVIZIO
-------------------------------------------------------------------------
Le quattordici pagine servizio-*.html sono generate da
tools/genera-servizi.py a partire da dati/servizi.json: se una di queste
classi cambia nome, va cambiata anche li'.
========================================================================= */
.scheda-testata { padding-block: clamp(40px, 5vw, 80px) 0; }
.scheda-testata h1 { font-size: var(--t-xxl); max-width: 18ch; }
.scheda-testata .occhiello { margin-top: var(--s5); }
.scheda-icona { margin-bottom: var(--s5); color: var(--verde-scuro); }
/* Striscia dei numeri: prezzo, tempo standard, tempo urgente. Sono le tre
cose che si cercano su una pagina di servizio, e stanno sopra al testo. */
.scheda-numeri {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--fuga);
margin-top: clamp(32px, 4vw, 56px);
}
.scheda-numeri > div {
padding: var(--s5);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
}
.scheda-numeri .dato { display: block; margin-bottom: var(--s2); }
.scheda-numeri strong {
font-family: var(--f-dato);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: -.01em;
}
.scheda-numeri .prezzo__cifra { font-size: 1.15rem; }
@media (max-width: 640px) { .scheda-numeri { grid-template-columns: 1fr; } }
.scheda-corpo {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
gap: clamp(32px, 5vw, 88px);
align-items: start;
}
.scheda-testo > * + * { margin-top: var(--s5); }
.scheda-testo p { color: var(--inchiostro-2); }
.scheda-testo h2 {
margin-top: clamp(40px, 5vw, 72px);
padding-top: var(--s5);
border-top: var(--filo-forte);
font-size: var(--t-xl);
}
/* Che cosa comprende: righe, non riquadri. */
.include { border-top: var(--filo); }
.include > li {
display: grid;
grid-template-columns: minmax(0, 24ch) minmax(0, 1fr);
gap: var(--s3) var(--s6);
padding: var(--s4) 0;
border-bottom: var(--filo);
}
.include strong { font-size: var(--t-sm); font-weight: 600; }
.include p { font-size: var(--t-sm); color: var(--inchiostro-2); max-width: none; }
@media (max-width: 640px) { .include > li { grid-template-columns: 1fr; } }
/* La colonna di lato resta appesa mentre si scorre: contiene l'azione. */
.scheda-lato { position: sticky; top: calc(var(--header) + var(--s5)); }
.scheda-lato .pannello > * + * { margin-top: var(--s4); }
.scheda-lato h2 { font-size: var(--t-lg); }
.scheda-lato .b { width: 100%; }
.scheda-lato .dato { display: block; }
@media (max-width: 980px) {
.scheda-corpo { grid-template-columns: 1fr; }
.scheda-lato { position: static; }
}
/* Altri servizi in fondo alla scheda: tre celle, stessa griglia a bordi. */
.altri {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--fuga);
}
.altri__voce {
display: flex;
align-items: center;
gap: var(--s4);
padding: var(--s5);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
color: var(--inchiostro);
text-decoration: none;
transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.altri__voce:hover { transform: translateY(-2px); box-shadow: var(--ombra-su); }
.altri__voce strong { display: block; font-size: var(--t-sm); }
.altri__voce span { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--inchiostro-3); }
@media (max-width: 820px) { .altri { grid-template-columns: 1fr; } }
/* =========================================================================
21. AZIONI FISSE SU TELEFONO
-------------------------------------------------------------------------
Su telefono le due azioni del sito — trovare un Point e farsi richiamare
— restano in fondo allo schermo. Su desktop no: li' la testata e' sempre
visibile e ha gia' il bottone.
Non e' un pulsante tondo che galleggia: e' una barra a filo del bordo,
divisa in due dallo stesso filo di tutto il resto.
========================================================================= */
.azioni-fisse { display: none; }
@media (max-width: 760px) {
/* Senza JavaScript la barra c'e' comunque, ferma in fondo allo schermo:
e' markup vero, non un elemento costruito a runtime. Con JavaScript
compare quando si e' scorso oltre l'hero, per non coprire subito le due
azioni che sono gia' li' sopra. */
html:not(.js) .azioni-fisse { transform: none; }
.azioni-fisse {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 140;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--fondo-scuro);
border-top: 1px solid rgba(255, 255, 255, .16);
/* Sotto la barra di sistema di iOS non deve finire meta' bottone */
padding-bottom: env(safe-area-inset-bottom, 0);
transform: translateY(100%);
transition: transform var(--medio) var(--curva);
}
.azioni-fisse.si-vede { transform: none; }
.azioni-fisse a {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s2);
min-height: 56px;
font-size: var(--t-sm);
font-weight: 600;
text-decoration: none;
}
.azioni-fisse a:first-child { background: var(--ambra); color: var(--inchiostro); }
.azioni-fisse a:last-child { color: var(--bianco); border-left: 1px solid rgba(255, 255, 255, .16); }
/* Il piede finisce sotto la barra: senza questo le ultime due righe non
si leggono mai. E la barra cookie sale sopra le azioni invece di
coprirle. Valgono sempre sotto i 760 px, anche senza JavaScript: sono
compensazioni di ingombro, non effetti. */
.sito-pieta { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.barra-cookie { bottom: calc(56px + var(--s3) + env(safe-area-inset-bottom, 0px)); }
}
/* =========================================================================
22. PREFERENZE COOKIE
-------------------------------------------------------------------------
Tre livelli invece di due: necessari (che non sono una scelta),
statistiche e mappa. La mappa e' separata dalle statistiche perche' e'
un trattamento diverso — un iframe di Google caricato solo se lo chiedi
— e perche' chi rifiuta le statistiche spesso vuole comunque vedere dove
sono i negozi.
Il pannello vive dentro alla stessa .barra-cookie: e' la stessa
finestra che cambia faccia, non una seconda finestra sopra la prima.
========================================================================= */
.barra-cookie__scelte { display: none; }
.barra-cookie.mostra-scelte .barra-cookie__sommario { display: none; }
.barra-cookie.mostra-scelte .barra-cookie__scelte { display: block; }
.cookie-livello {
display: flex;
gap: var(--s3);
align-items: flex-start;
padding: var(--s3) 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.cookie-livello:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.cookie-livello input {
flex: none;
width: 20px; height: 20px;
margin: 2px 0 0;
border: 1px solid rgba(255, 255, 255, .45);
background: transparent;
border-radius: var(--raggio-s);
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.cookie-livello input:checked {
background: var(--ambra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='m1 5 3.4 3.4L11 1.5' stroke='%2314312f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
border-color: var(--verde);
}
.cookie-livello input:disabled { opacity: .5; cursor: default; }
.cookie-livello__testo strong { display: block; font-size: var(--t-sm); font-weight: 600; }
.cookie-livello__testo span { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--bianco); }
.barra-cookie__minori {
display: flex;
flex-wrap: wrap;
gap: var(--s4);
margin-top: var(--s4);
}
.barra-cookie__minori button,
.barra-cookie__minori a {
font-size: var(--t-xs);
font-weight: 500;
color: var(--bianco);
text-decoration: underline;
text-underline-offset: 3px;
}
.barra-cookie__minori button:hover,
.barra-cookie__minori a:hover { color: var(--bianco); }
/* Il richiamo permanente. Piccolo, in basso a sinistra, dalla parte
opposta della barra: e' un ripensamento, non un'azione. */
.gestisci-cookie {
position: fixed;
left: var(--s4); bottom: var(--s4);
z-index: 140;
display: none;
align-items: center;
gap: 6px;
padding: 8px var(--s3);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
color: var(--inchiostro-2);
font-family: var(--f-dato);
font-size: 10px;
font-weight: 500;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
}
.gestisci-cookie.si-vede { display: inline-flex; }
.gestisci-cookie:hover { color: var(--inchiostro); border-color: var(--inchiostro-3); }
/* Sul telefono il bottone fisso copriva il testo mentre si scorre (sopra la
barra delle azioni): li' il richiamo e' "Gestisci cookie" nel piede. */
@media (max-width: 760px) {
.gestisci-cookie,
.gestisci-cookie.si-vede { display: none; }
}
/* =========================================================================
23. APP: SCARICALA
-------------------------------------------------------------------------
Dalla v6 la sezione non annuncia piu' un'app "in prova": deve far venire
voglia di scaricarla. Quindi dice che cosa si guadagna ad averla nel
telefono (sei vantaggi, ognuno con la sua icona), mette i due bottoni
degli store e, su schermo grande, un QR da inquadrare. Accanto, un
telefono disegnato con le schermate vere dell'app: la vetrina con la
combo in evidenza, le scorciatoie, i codici sconto.
I bottoni degli store esistono sempre. Finche' in js/config.js
APP.pubblicata e' false dicono "in arrivo" e non sono collegamenti: un
bottone verso una scheda che non c'e' porterebbe a un 404.
La pagina app.html usa gli stessi pezzi, piu' grandi.
========================================================================= */
.app6 {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: clamp(36px, 5vw, 96px);
align-items: center;
}
.app6 h2 { font-size: var(--t-xxl); max-width: 16ch; }
.app6__sotto {
margin-top: var(--s5);
font-size: var(--t-lead);
line-height: 1.5;
color: var(--bianco);
max-width: 50ch;
}
/* I vantaggi: due colonne di righe con icona. Su fondo verde le icone
stanno in un riquadro bianco velato, il testo e' bianco pieno. */
.vantaggi {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s5) var(--s6);
margin-top: var(--s7);
}
.vantaggio {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: var(--s4);
align-items: start;
}
.vantaggio__ico {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--raggio);
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .28);
color: var(--bianco);
}
.vantaggio strong { display: block; font-size: var(--t-sm); font-weight: 600; }
.vantaggio p { margin-top: 3px; font-size: var(--t-xs); line-height: 1.5; color: var(--bianco); }
/* Su carta (app.html) le stesse righe cambiano colore. */
.vantaggi--carta .vantaggio__ico {
background: var(--verde-50);
border-color: var(--verde-100);
color: var(--verde-800);
}
.vantaggi--carta .vantaggio p { color: var(--inchiostro-2); }
@media (max-width: 620px) { .vantaggi { grid-template-columns: 1fr; } }
/* --- I bottoni degli store ---------------------------------------------- */
.store { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s7); }
.store__bottone {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 0 22px 0 16px;
border-radius: var(--raggio);
background: var(--verde-950);
border: 1px solid rgba(255, 255, 255, .28);
color: var(--bianco);
text-decoration: none;
line-height: 1.15;
transition: background var(--veloce) var(--curva), transform var(--veloce) var(--curva);
}
.store__bottone svg { flex: none; }
.store__bottone small {
display: block;
font-size: 11px;
font-weight: 500;
letter-spacing: .02em;
}
.store__bottone strong { display: block; font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; }
a.store__bottone:hover { background: var(--verde-900); }
a.store__bottone:active { transform: translateY(1px); }
/* In arrivo: resta leggibile (non e' un disabilitato grigio), ma non
risponde al mouse come un collegamento. */
.store__bottone[aria-disabled="true"] { cursor: default; }
.su-carta .store__bottone,
.store--carta .store__bottone { border-color: var(--verde-950); }
/* Il QR: solo dove c'e' un telefono da tirare fuori, cioe' su schermo
grande. Su telefono si e' gia' nel telefono. */
.store__qr {
display: flex;
align-items: center;
gap: var(--s3);
margin-left: var(--s4);
padding-left: var(--s5);
border-left: 1px solid rgba(255, 255, 255, .3);
}
.store__qr img {
width: 96px;
height: 96px;
padding: 6px;
background: var(--bianco);
border-radius: var(--raggio);
}
.store__qr p { max-width: 15ch; font-size: var(--t-xs); line-height: 1.45; color: inherit; }
.store--carta .store__qr { border-left-color: var(--linea); }
.store--carta .store__qr img { border: var(--filo); }
@media (max-width: 900px) { .store__qr { display: none; } }
/* --- Il telefono con le schermate dell'app ------------------------------
E' l'unico oggetto del sito con angoli piu' tondi di 5 px: e' il
disegno di un telefono, e un telefono ha gli angoli di un telefono.
Dentro, i colori sono quelli dell'app (app/src/tema.ts): verde acqua del
totem, gradiente del sito, ambra delle offerte. */
.app6__telefoni { display: flex; justify-content: center; gap: clamp(16px, 2vw, 28px); }
.telefono6 {
flex: none;
width: min(290px, 78vw);
padding: 11px;
background: #0d2221;
border-radius: 38px;
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.telefono6--piccolo { width: min(250px, 70vw); margin-top: 64px; }
.telefono6__schermo {
position: relative;
display: flex;
flex-direction: column;
aspect-ratio: 9 / 19;
overflow: hidden;
background: #fff;
border-radius: 28px;
color: #1b2b2a;
font-size: 12px;
line-height: 1.35;
}
.telefono6__stato {
display: flex;
justify-content: space-between;
padding: 10px 20px 6px;
font-size: 10px;
font-weight: 700;
}
.telefono6__barra {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 14px 10px;
font-size: 11px;
font-weight: 800;
}
.telefono6__barra span:last-child { color: #219590; font-weight: 700; }
/* la vetrina: la combo in evidenza su gradiente */
.telefono6__vetrina {
padding: 14px 14px 16px;
color: #fff;
background: linear-gradient(170deg, #12b3b5 0%, #009a9c 38%, #04565c 100%);
}
.telefono6__collage { display: flex; justify-content: center; margin-bottom: 10px; }
.telefono6__collage span {
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin-left: -16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
overflow: hidden;
}
.telefono6__collage span:first-child { margin-left: 0; }
.telefono6__collage img { width: 80%; height: 80%; object-fit: contain; }
.telefono6__occhiello { font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.telefono6__titolo { display: block; margin-top: 2px; font-size: 17px; font-weight: 900; line-height: 1.15; }
.telefono6__prezzi { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.telefono6__prezzi s { font-size: 11px; color: rgba(255, 255, 255, .8); }
.telefono6__prezzi b { font-size: 18px; font-weight: 900; color: #f5a623; }
.telefono6__vai {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
font-size: 11px;
font-weight: 800;
}
.telefono6__vai i {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
color: #1b2b2a;
font-style: normal;
}
/* le tre scorciatoie */
.telefono6__sezione { padding: 12px 14px 6px; font-size: 13px; font-weight: 900; }
.telefono6__griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px; }
.telefono6__riquadro {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px;
border: 1px solid #e2e2e2;
border-radius: 10px;
font-size: 9.5px;
font-weight: 800;
line-height: 1.2;
}
.telefono6__riquadro i { font-style: normal; font-size: 16px; }
/* i codici sconto */
.telefono6__codici { display: flex; gap: 8px; padding: 0 14px 14px; }
.telefono6__codice {
padding: 6px 10px;
border: 1.5px dashed #b36a00;
border-radius: 10px;
background: #f1f1f1;
text-align: center;
}
.telefono6__codice b { display: block; font-size: 13px; font-weight: 900; color: #b36a00; }
.telefono6__codice span { font-size: 8px; font-weight: 800; letter-spacing: .08em; }
/* una notizia della home dell'app (NOTIZIE in contenuti.ts) */
.telefono6__notizia { display: block; margin: 0 14px; border: 1px solid #e2e2e2; border-radius: 12px; overflow: hidden; }
.telefono6__notizia-alto {
position: relative;
display: grid;
place-items: center;
height: 58px;
font-size: 24px;
}
.telefono6__notizia-alto em {
position: absolute;
top: 7px;
left: 8px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(0, 0, 0, .32);
color: #fff;
font-size: 7.5px;
font-style: normal;
font-weight: 800;
letter-spacing: .08em;
}
.telefono6__notizia-basso { display: block; padding: 7px 9px; background: #1b2b2a; color: #fff; font-size: 10px; font-weight: 800; }
/* la barra in basso */
.telefono6__tab {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-top: auto;
padding: 8px 6px 14px;
border-top: 1px solid #e2e2e2;
font-size: 8px;
font-weight: 700;
text-align: center;
color: #7b7b7b;
}
.telefono6__tab span:first-child { color: #219590; }
.telefono6__tab i { display: block; font-style: normal; font-size: 13px; }
/* la seconda schermata (app.html): l'elenco delle offerte */
.telefono6__lista { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px; }
.telefono6__card { border: 1px solid #e2e2e2; border-radius: 12px; overflow: hidden; }
.telefono6__card-alto {
position: relative;
display: grid;
place-items: center;
height: 62px;
color: #fff;
font-size: 22px;
font-weight: 900;
}
.telefono6__card-alto em {
position: absolute;
top: 7px;
left: 8px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(0, 0, 0, .32);
font-size: 7.5px;
font-style: normal;
font-weight: 800;
letter-spacing: .08em;
}
.telefono6__card-basso { padding: 7px 9px; font-size: 10px; font-weight: 800; }
.telefono6__card-basso span { display: block; font-size: 9px; font-weight: 600; color: #7b7b7b; }
@media (max-width: 900px) {
.app6 { grid-template-columns: 1fr; }
.app6__telefoni { order: -1; }
.telefono6--piccolo { display: none; }
}
/* =========================================================================
24. PRODOTTI: IL LISTINO VERO DEI NEGOZI
-------------------------------------------------------------------------
Dalla v5 i prezzi e le fotografie dei capi non stanno piu' nel sito:
arrivano dai gestionali dei punti vendita (tools/sync-listino.py) e sono
gli stessi che il cliente vede sul totem, con la stessa figura. Il prezzo
pubblicato e' il prezzo di partenza (il minimo fra i Point).
Le figure dei prodotti sono fotografie su fondo bianco, ritagliate male
dal fornitore: appoggiate su un fondo colorato lascerebbero un rettangolo
bianco. mix-blend-mode: multiply lo fa sparire e tiene solo il capo -- e'
il motivo per cui il vano delle figure e' verde-50 e non bianco.
========================================================================= */
/* --- La figura dentro alla tessera della vetrina ------------------------- */
.vetrina__figura {
margin: calc(-1 * clamp(24px, 2.4vw, 36px));
margin-bottom: var(--s2);
aspect-ratio: 5 / 4;
display: grid;
place-items: center;
background: var(--verde-50);
border-bottom: var(--filo);
overflow: hidden;
}
.vetrina__foto {
width: 62%;
max-height: 84%;
object-fit: contain;
mix-blend-mode: multiply;
transition: transform var(--lento) var(--curva);
}
.vetrina__voce:hover .vetrina__foto { transform: scale(1.04); }
/* --- La figura nell'elenco dei quattordici servizi ----------------------- */
.listino__foto {
width: 56px;
height: 56px;
object-fit: contain;
mix-blend-mode: multiply;
flex: none;
}
/* --- La griglia dei capi dentro a una scheda servizio -------------------- */
.prodotti {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
gap: var(--fuga);
margin-top: var(--s5);
}
.prodotto {
display: flex;
flex-direction: column;
gap: 5px;
overflow: hidden;
padding: var(--s4);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
}
.prodotto__figura {
margin: calc(-1 * var(--s4));
margin-bottom: var(--s3);
aspect-ratio: 1;
display: grid;
place-items: center;
background: var(--verde-50);
border-bottom: var(--filo-chiaro);
overflow: hidden;
}
.prodotto__figura img {
width: 78%;
max-height: 84%;
object-fit: contain;
mix-blend-mode: multiply;
}
.prodotto__nofoto {
width: 40%;
aspect-ratio: 1;
border: 1px dashed var(--verde-100);
border-radius: var(--raggio);
}
.prodotto__nome { font-size: var(--t-sm); font-weight: 600; line-height: 1.35; }
.prodotto__nota {
font-size: var(--t-xs);
line-height: 1.45;
color: var(--inchiostro-3);
}
.prodotto__prezzo { margin-top: auto; padding-top: var(--s3); }
.prodotto__meta,
.prodotto__pochi {
font-family: var(--f-dato);
font-size: 10px;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--inchiostro-3);
}
/* --- La coda lunga: gli altri capi, senza figura ------------------------- */
.prodotti-altri { margin-top: var(--s5); border-bottom: var(--filo); }
.prodotti-altri > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s4);
padding: var(--s4) 0;
border-top: var(--filo);
font-weight: 600;
font-size: var(--t-sm);
cursor: pointer;
list-style: none;
}
.prodotti-altri > summary::-webkit-details-marker { display: none; }
.prodotti-elenco {
columns: 2;
column-gap: var(--s7);
padding-bottom: var(--s5);
}
.prodotti-elenco li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s3);
padding: 7px 0;
border-bottom: var(--filo-chiaro);
font-size: var(--t-sm);
break-inside: avoid;
}
.prodotto__cifra {
font-family: var(--f-dato);
font-size: var(--t-sm);
font-weight: 600;
color: var(--verde-scuro);
white-space: nowrap;
}
@media (max-width: 620px) {
.prodotti-elenco { columns: 1; }
}
/* --- Il catalogo completo in servizi.html -------------------------------
Sedici categorie, come le vede il totem in negozio: e' l'unico posto del
sito in cui compaiono tutti i capi a listino.
Una categoria per fascia, non una griglia di riquadri: le categorie hanno
ventisei capi ("solo stiro") o tre ("camicie"), e affiancate lascerebbero
buchi alti mezzo schermo. Dentro alla fascia i capi scorrono in colonne,
che e' il modo in cui si impagina un listino da sempre. */
.catalogo { border-top: var(--filo); }
.catalogo__gruppo {
padding: clamp(22px, 2.2vw, 34px) 0;
border-bottom: var(--filo);
}
.catalogo__titolo {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s3);
margin-bottom: var(--s4);
font-size: var(--t-lg);
}
.catalogo__da {
font-family: var(--f-dato);
font-size: var(--t-xs);
font-weight: 600;
color: var(--verde-scuro);
white-space: nowrap;
}
.catalogo__capi {
columns: 300px;
column-gap: clamp(24px, 3vw, 56px);
}
.catalogo__capi li {
display: flex;
align-items: center;
gap: var(--s3);
padding: 6px 0;
border-bottom: var(--filo-chiaro);
break-inside: avoid;
}
.catalogo__capi img {
width: 38px;
height: 38px;
object-fit: contain;
mix-blend-mode: multiply;
flex: none;
}
.catalogo__nome { flex: 1 1 auto; font-size: var(--t-sm); line-height: 1.35; }
.catalogo__capi .prodotto__pochi { display: block; }
/* Il prezzo che si e' appena aggiornato dal vivo: un lampo verde e via.
E' l'unica animazione del sito che non nasce da un gesto dell'utente, e
dura meno di un secondo. */
@keyframes prezzo-cambiato {
0% { background: var(--verde-velo); }
100% { background: transparent; }
}
.prezzo--aggiornato { animation: prezzo-cambiato 1.1s var(--curva); }
@media (prefers-reduced-motion: reduce) {
.prezzo--aggiornato { animation: none; }
}
/* =========================================================================
25. LA FASCIA DI FOTOGRAFIE
-------------------------------------------------------------------------
Il sito ha sempre avuto una fotografia sola, quella dell'hero, e per il
resto disegni. Funzionava per spiegare il meccanismo e non funzionava per
una cosa sola: convincere chi non e' mai entrato in un Point che
l'oggetto esiste davvero, ed e' pulito, illuminato e nuovo.
Da qui in poi le fotografie sono contenuto: tre per la sezione "come
funziona" e quelle per chi vuole aprire un Point (la fotografia larga dei
punti vendita e' stata tolta nella v6). Dalla v6 hanno gli angoli da 5 px
come tutte le altre schede, e mai l'ombra.
========================================================================= */
.fotostrip {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--fuga);
margin-top: clamp(48px, 6vw, 88px);
}
.fotostrip__voce {
display: flex;
flex-direction: column;
overflow: hidden;
border: var(--filo);
border-radius: var(--raggio);
background: var(--bianco);
}
.fotostrip__voce img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
/* Le fotografie sono verticali e gli interni dei negozi stanno in alto:
tagliare dal basso perde il pavimento, non il soggetto. */
object-position: 50% 32%;
border-bottom: var(--filo);
}
.fotostrip__voce figcaption {
padding: clamp(18px, 1.8vw, 26px);
font-size: var(--t-sm);
line-height: 1.6;
color: var(--inchiostro-2);
}
.fotostrip__voce .dato { display: block; margin-bottom: var(--s2); color: var(--inchiostro); }
/* Una fotografia larga quanto la sezione, usata come stacco fra due
blocchi di testo. */
.fotolarga {
position: relative;
overflow: hidden;
border: var(--filo);
border-radius: var(--raggio);
background: var(--verde-900);
}
.fotolarga img {
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
object-position: 50% 40%;
}
.fotolarga figcaption {
position: absolute;
left: 0; bottom: 0;
max-width: 46ch;
padding: var(--s4) var(--s5);
background: var(--verde-950);
color: var(--bianco);
font-size: var(--t-xs);
line-height: 1.55;
}
@media (max-width: 860px) {
.fotostrip { grid-template-columns: 1fr; }
.fotostrip__voce img { aspect-ratio: 16 / 10; }
.fotolarga img { aspect-ratio: 4 / 3; }
.fotolarga figcaption { position: static; max-width: none; }
}
/* --- La figura in testa alla scheda servizio -----------------------------
Il capo di cui parla la pagina, fotografato dal fornitore e servito dal
catalogo del negozio: la stessa immagine che compare sul totem quando lo
si sceglie. A meno di 900 px scende sotto al titolo e si rimpicciolisce:
su un telefono la prima cosa da leggere resta il titolo. */
.scheda-testata__griglia {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 320px);
gap: clamp(24px, 4vw, 64px);
align-items: center;
}
.scheda-figura {
aspect-ratio: 1;
display: grid;
place-items: center;
background: var(--verde-50);
border: var(--filo);
border-radius: var(--raggio);
}
.scheda-figura img {
width: 74%;
max-height: 82%;
object-fit: contain;
mix-blend-mode: multiply;
}
@media (max-width: 900px) {
.scheda-testata__griglia { grid-template-columns: 1fr; }
.scheda-figura { max-width: 260px; }
}
/* =========================================================================
27. OFFERTE: LE STESSE DELL'APP
-------------------------------------------------------------------------
La sezione promozioni della home e la pagina promozioni.html mostrano le
offerte che il cliente trova nell'app, lette dalle stesse fonti e
disegnate con le stesse card: "In promozione oggi" (i capi scontati del
listino del Point), le combo (pannello colorato con il collage dei capi)
e, quando l'hub dell'app e' collegato, i codici sconto.
I colori delle combo sono quelli dichiarati nell'app per ogni combo: il
pannello li riceve come variabili (--c1, --c2, --c3, --angolo) scritte
da js/offerte.js, con la stessa sfumatura di PannelloMarchio. Nessuna
tinta nuova entra nel sito: sono le tinte dell'app.
Tutto il contenuto arriva da js/offerte.js. Senza JavaScript la sezione
mostra il paragrafo di ripiego (le offerte le trovi sul totem e
nell'app) e il bottone per scaricarla.
========================================================================= */
.offerte-barra {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s3) var(--s5);
margin-bottom: var(--s6);
}
.offerte-barra label {
font-family: var(--f-dato);
font-size: var(--t-dato);
font-weight: 500;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--inchiostro-2);
}
.offerte-barra select { width: auto; min-width: min(300px, 100%); }
.offerte-stato { margin: 0; font-size: var(--t-sm); color: var(--inchiostro-3); }
.offerte__gruppo + .offerte__gruppo { margin-top: clamp(40px, 5vw, 64px); }
.offerte__titolo {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s2) var(--s4);
margin-bottom: var(--s4);
}
.offerte__titolo h3 { font-size: var(--t-lg); }
.offerte__titolo p { margin: 0; font-size: var(--t-xs); color: var(--inchiostro-3); }
.offerte__griglia {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(236px, 100%), 1fr));
gap: var(--fuga);
}
.offerte__griglia--larga { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
/* Ripiego senza JavaScript, e stato vuoto. */
.offerte__ripiego {
padding: clamp(20px, 2.4vw, 32px);
border: 1px dashed var(--verde-100);
border-radius: var(--raggio);
color: var(--inchiostro-2);
}
.offerte__ripiego p { max-width: 60ch; }
/* Le schede in attesa dei dati: rettangoli fermi, niente luccichio che
gira. Spariscono appena arrivano i cataloghi. */
.offerta--attesa { min-height: 280px; background: var(--carta-2); border-style: dashed; }
/* --- La card di un capo in promozione ----------------------------------- */
.offerta {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
color: var(--inchiostro);
text-decoration: none;
transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
a.offerta:hover { transform: translateY(-3px); box-shadow: var(--ombra-su); }
.offerta__figura {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
background: var(--verde-50);
border-bottom: var(--filo-chiaro);
}
.offerta__figura img {
width: 60%;
max-height: 84%;
object-fit: contain;
mix-blend-mode: multiply;
}
/* Lo sconto: pieno ambra con l'inchiostro sopra (6.86), come il badge
"-30%" dell'app. */
.offerta__sconto {
position: absolute;
top: var(--s3);
left: var(--s3);
padding: 4px 9px;
border-radius: var(--raggio);
background: var(--ambra);
color: var(--inchiostro);
font-family: var(--f-dato);
font-size: .95rem;
font-weight: 700;
letter-spacing: -.01em;
}
.offerta__sconto small { font-size: .7em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.offerta__corpo { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: var(--s4); }
.offerta__nome { font-size: var(--t-sm); font-weight: 600; line-height: 1.35; }
.offerta__prezzi {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px var(--s2);
margin-top: auto;
padding-top: var(--s2);
font-family: var(--f-dato);
}
.offerta__da {
font-size: 10px;
font-weight: 500;
letter-spacing: var(--cr-dato);
text-transform: uppercase;
color: var(--inchiostro-3);
}
.offerta__prezzo { font-size: 1.2rem; font-weight: 700; color: var(--verde-scuro); }
.offerta__pieno { font-size: var(--t-xs); color: var(--inchiostro-3); text-decoration: line-through; }
.offerta__dove {
margin-top: 4px;
padding-top: var(--s2);
border-top: var(--filo-chiaro);
font-size: var(--t-xs);
line-height: 1.45;
color: var(--inchiostro-2);
}
.offerta__dove b { font-weight: 600; color: var(--inchiostro); }
/* --- La card di una combo ----------------------------------------------- */
.combo {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
color: var(--inchiostro);
text-decoration: none;
transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
a.combo:hover { transform: translateY(-3px); box-shadow: var(--ombra-su); }
.combo__pannello {
--c1: #38d2d4;
--c2: #009a9c;
--c3: #046a70;
--angolo: 135deg;
position: relative;
display: grid;
place-items: center;
height: 156px;
background: linear-gradient(var(--angolo), var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
}
.combo__pastiglia {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 10px;
border-radius: var(--raggio);
background: rgba(0, 0, 0, .32);
color: var(--bianco);
font-family: var(--f-dato);
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.combo__collage { display: flex; }
.combo__tondo {
display: grid;
place-items: center;
width: 84px;
height: 84px;
margin-left: -24px;
overflow: hidden;
border-radius: 50%;
background: var(--bianco);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}
.combo__tondo:first-child { margin-left: 0; }
.combo__tondo img { width: 78%; height: 78%; object-fit: contain; }
.combo__glifo { font-size: 52px; line-height: 1; }
/* Il bollo dello sconto, quando un codice del Point rende la combo
conveniente: ambra, come nell'app. */
.combo__bollo {
position: absolute;
right: 12px;
bottom: 12px;
padding: 5px 10px;
border-radius: var(--raggio);
background: var(--ambra);
color: var(--inchiostro);
font-family: var(--f-dato);
text-align: center;
line-height: 1.2;
}
.combo__bollo b { display: block; font-size: .95rem; }
.combo__bollo span { display: block; font-size: 9px; letter-spacing: .08em; }
.combo__corpo { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: var(--s4); }
.combo__occhiello {
font-family: var(--f-dato);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ambra-testo);
}
.combo__titolo { font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--cr-tit); }
.combo__testo { font-size: var(--t-sm); color: var(--inchiostro-2); }
.combo__capi { font-size: var(--t-xs); color: var(--inchiostro-3); }
.combo__prezzi {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px var(--s2);
margin-top: auto;
padding-top: var(--s3);
font-family: var(--f-dato);
}
.combo__prezzo { font-size: 1.2rem; font-weight: 700; color: var(--verde-scuro); }
.combo__pieno { font-size: var(--t-xs); color: var(--inchiostro-3); text-decoration: line-through; }
.combo__codice { font-size: var(--t-xs); color: var(--ambra-testo); }
.combo__dove {
padding-top: var(--s2);
border-top: var(--filo-chiaro);
font-size: var(--t-xs);
color: var(--inchiostro-2);
}
/* --- La card di un codice sconto ---------------------------------------- */
.codice {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
}
.codice__pannello {
--c1: #ffc561;
--c2: #b36a00;
--c3: #8a5300;
--angolo: 150deg;
position: relative;
display: grid;
place-items: center;
height: 124px;
background: linear-gradient(var(--angolo), var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
color: var(--bianco);
}
.codice__valore { font-size: 2.7rem; font-weight: 700; letter-spacing: -.03em; }
.codice__nome {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 10px;
border-radius: var(--raggio);
background: rgba(0, 0, 0, .32);
font-family: var(--f-dato);
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.codice__corpo { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: var(--s4); }
.codice__titolo { font-size: var(--t-sm); font-weight: 600; line-height: 1.4; }
.codice__note { display: flex; flex-wrap: wrap; gap: 6px; }
.codice__note span {
padding: 3px 8px;
border-radius: var(--raggio);
background: var(--carta-2);
font-size: 11px;
font-weight: 600;
color: var(--inchiostro-2);
}
.codice__dove { margin-top: auto; padding-top: var(--s2); border-top: var(--filo-chiaro); font-size: var(--t-xs); color: var(--inchiostro-2); }
/* --- Il rimando all'app, in fondo alle offerte -------------------------- */
.offerte-app {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s5);
margin-top: clamp(32px, 4vw, 56px);
padding: clamp(22px, 2.6vw, 36px);
border-radius: var(--raggio);
background: var(--verde-950);
color: var(--bianco);
}
.offerte-app strong { display: block; font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--cr-tit); }
.offerte-app p { margin-top: 4px; font-size: var(--t-sm); color: var(--bianco); max-width: 56ch; }
.offerte-app .b { flex: none; }
/* =========================================================================
28. PAGINA APP (app.html)
-------------------------------------------------------------------------
La pagina a cui porta ogni "Scarica l'app" del sito, e l'indirizzo
dentro al QR. Riusa i pezzi della sezione 23 in grande; qui ci sono solo
la testata e i tre passi dell'ordine dall'app.
========================================================================= */
.app-testata { padding-block: clamp(48px, 6vw, 104px); }
.app-testata h1 { font-size: var(--t-mega); line-height: var(--lh-mega); letter-spacing: var(--cr-mega); max-width: 12ch; }
.app-testata .app6__sotto { margin-top: var(--s6); }
/* Le briciole su fondo verde: bianco pieno, come tutto il testo della
fascia (su #009a9c l'inchiostro-3 non si leggerebbe). */
.su-verde .briciole,
.su-verde .briciole a,
.su-verde .briciole a:hover { color: var(--bianco); }
.su-verde .briciole li + li::before { color: rgba(255, 255, 255, .6); }
/* I tre passi dell'ordine dall'app: stesse parole della schermata "Come
funziona" dell'app (app/app/come-funziona.tsx). */
.passi-app { counter-reset: passo-app; }
.passi-app .cella-b { position: relative; padding-top: clamp(56px, 5vw, 72px); }
.passi-app .cella-b::before {
counter-increment: passo-app;
content: "0" counter(passo-app);
position: absolute;
top: clamp(20px, 2vw, 28px);
left: clamp(24px, 2.6vw, 40px);
font-family: var(--f-dato);
font-size: var(--t-dato);
font-weight: 600;
letter-spacing: var(--cr-dato);
color: var(--verde-scuro);
}
/* =========================================================================
29. PUNTI VENDITA (v6): MAPPA IN CIMA, ELENCO COMPLETO SOTTO
-------------------------------------------------------------------------
La pagina si apre sulla stessa mappa di www.lavaseccopoint.it (Google My
Maps). Finche' il visitatore non da' il consenso al posto dell'iframe c'e'
uno schema disegnato qui, con i Point nella loro posizione vera
(coordinate di js/config.js): la pagina mostra subito dove siamo, e
nessuna richiesta parte verso Google prima di una scelta.
Sotto, l'elenco completo, con il filtro per il tipo di Point: negozio
dedicato oppure dentro a una lavanderia self service.
========================================================================= */
.mappa--grande { aspect-ratio: 16 / 9; max-height: 640px; width: 100%; }
/* Lo schema: pallini e nomi posizionati da js/mappa.js sopra a una
quadrettatura leggera. Sono elementi HTML e non un SVG scalato: cosi' i
nomi restano a 13 px su qualunque schermo. */
.mappa__schema {
position: absolute;
inset: 0;
background-color: var(--carta-2);
background-image:
linear-gradient(var(--linea-chiara) 1px, transparent 1px),
linear-gradient(90deg, var(--linea-chiara) 1px, transparent 1px);
background-size: 56px 56px;
background-position: -1px -1px;
}
.ms-segno {
position: absolute;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: var(--verde);
border: 2px solid var(--bianco);
box-shadow: 0 0 0 5px var(--verde-velo);
}
.ms-segno--prossimo { background: var(--bianco); border: 2px dashed var(--verde-scuro); box-shadow: none; }
.ms-nome {
position: absolute;
left: 0;
top: 0;
padding: 2px 6px;
border-radius: var(--raggio-s);
background: rgba(255, 255, 255, .88);
color: var(--inchiostro);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
visibility: hidden; /* finche' js/mappa.js non l'ha messa al suo posto */
}
.ms--pronto .ms-nome { visibility: visible; }
.ms-nome--prossimo { font-weight: 500; color: var(--inchiostro-3); }
.ms-scala {
position: absolute;
left: 20px;
top: 18px;
padding-bottom: 5px;
border: 2px solid var(--inchiostro-3);
border-top: 0;
height: 16px;
color: var(--inchiostro-3);
font-family: var(--f-dato);
font-size: 10px;
line-height: 1;
letter-spacing: .1em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
/* Il riquadro del consenso sta sopra allo schema, non al posto suo. */
.mappa--grande .mappa__consenso {
inset: auto;
left: 50%;
bottom: var(--s5);
transform: translateX(-50%);
width: min(520px, calc(100% - 2 * var(--s4)));
padding: var(--s5);
background: rgba(255, 255, 255, .96);
border: var(--filo);
border-radius: var(--raggio);
box-shadow: var(--ombra-su);
}
.mappa--grande .mappa__consenso p { font-size: var(--t-xs); }
.mappa__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
/* Su telefono lo schema e il riquadro del consenso stanno uno sotto
l'altro: sovrapposti, il riquadro coprirebbe meta' dei Point. */
@media (max-width: 620px) {
.mappa--grande { aspect-ratio: auto; max-height: none; }
.mappa--grande .mappa__schema { position: relative; inset: auto; height: 400px; }
.mappa--grande .mappa__consenso {
position: static;
transform: none;
width: auto;
border: 0;
border-top: var(--filo);
border-radius: 0;
box-shadow: none;
}
.mappa--grande.mappa--caricata { aspect-ratio: 4 / 5; }
}
.mappa__legenda {
display: flex;
flex-wrap: wrap;
gap: var(--s2) var(--s5);
margin-top: var(--s3);
font-size: var(--t-xs);
color: var(--inchiostro-3);
}
.mappa__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.mappa__legenda i { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.mappa__legenda i.prossimo { background: var(--bianco); border: 2px dashed var(--verde); }
/* --- Filtri per tipo di Point ------------------------------------------- */
.filtri { display: flex; flex-wrap: wrap; gap: var(--s2); margin: calc(-1 * var(--s3)) 0 var(--s5); }
.filtro {
display: inline-flex;
align-items: center;
gap: var(--s2);
min-height: 42px;
padding: 0 var(--s4);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
color: var(--inchiostro-2);
font-size: var(--t-sm);
font-weight: 600;
transition: background var(--veloce) var(--curva), color var(--veloce) var(--curva), border-color var(--veloce) var(--curva);
}
.filtro:hover { border-color: var(--verde-800); color: var(--inchiostro); }
.filtro[aria-pressed="true"] { background: var(--verde-800); border-color: var(--verde-800); color: var(--bianco); }
.filtro__n { font-family: var(--f-dato); font-size: 11px; font-weight: 500; }
/* --- Il tipo di Point sulla scheda --------------------------------------- */
.punto__sede {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
padding: 4px 9px;
border-radius: var(--raggio);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
}
.punto__sede svg { flex: none; }
.punto__sede--lavanderia { background: var(--verde-50); border: 1px solid var(--verde-100); color: var(--verde-800); }
.punto__sede--negozio { background: var(--carta-2); border: 1px solid var(--linea); color: var(--inchiostro-2); }
/* La spiegazione dei due tipi, sopra all'elenco. */
.sedi {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--fuga);
margin-bottom: var(--s6);
}
.sede {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: var(--s4);
padding: var(--s5);
background: var(--bianco);
border: var(--filo);
border-radius: var(--raggio);
}
.sede__ico {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: var(--raggio);
background: var(--verde-50);
color: var(--verde-800);
}
.sede strong { display: block; font-size: var(--t-sm); }
.sede p { margin-top: 3px; font-size: var(--t-xs); color: var(--inchiostro-2); }
@media (max-width: 700px) { .sedi { grid-template-columns: 1fr; } }
/* --- Prossime aperture ---------------------------------------------------- */
.prossime {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
gap: var(--fuga);
}
.prossima {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--s5);
border: 1px dashed var(--verde-100);
border-radius: var(--raggio);
background: var(--bianco);
}
.prossima h3 { font-size: var(--t-lg); }
.prossima .etichetta { align-self: flex-start; }
.prossima p { font-size: var(--t-xs); color: var(--inchiostro-3); }
/* In home l'elenco si ferma ai primi sei: il resto e' a un clic. */
.punti-altri { margin-top: var(--s4); font-size: var(--t-sm); color: var(--inchiostro-3); }
/* =========================================================================
30. LA QUALITA' PRIMA DI TUTTO: IL CONFRONTO
-------------------------------------------------------------------------
Dal 01/10/2026, su richiesta del committente, subito dopo «Come
funziona»: di automatico c'e' il Point, non il lavoro sui capi.
Una griglia sola a due colonne, non due schede separate, perche' ogni
riga sia un confronto: la stiratura con la stiratura, i bottoni con i
bottoni. A sinistra la lavasecco discount, sulla carta alternativa, con
le croci; a destra Lavasecco Point sul verde profondo del manifesto
(--fondo-notte), con le spunte gialle: giallo su verde-900 sta a 5.65,
bianco a 11.46. Sotto i 760 px le colonne diventano due schede una sotto
l'altra (order): prima la discount, poi il Point.
========================================================================= */
.confronto {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--fuga);
}
.confronto__testa,
.confronto__voce { padding: var(--s5) clamp(18px, 2.4vw, 36px); }
.confronto__testa { border-radius: var(--raggio) var(--raggio) 0 0; }
.confronto__testa .dato { display: block; }
.confronto__testa strong {
display: block;
margin-top: var(--s2);
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: var(--cr-tit);
}
.confronto__voce {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: var(--s4);
align-items: start;
}
.confronto__voce strong { display: block; font-size: var(--t-sm); font-weight: 600; }
.confronto__voce p { margin-top: 3px; font-size: var(--t-xs); line-height: 1.5; }
.confronto__voce--ultima { border-radius: 0 0 var(--raggio) var(--raggio); }
.confronto__segno {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
}
/* La lavasecco discount: in secondo piano */
.confronto__testa--loro,
.confronto__voce--loro { background: var(--carta-2); color: var(--inchiostro-2); }
.confronto__testa--loro .dato { color: var(--inchiostro-3); }
.confronto__voce--loro { border-top: 1px solid var(--linea); }
.confronto__voce--loro .confronto__segno {
background: var(--bianco);
border: 1px solid var(--linea);
color: var(--inchiostro-3);
}
/* Lavasecco Point: il verde profondo, le spunte gialle */
.confronto__testa--noi,
.confronto__voce--noi { background: var(--fondo-notte); color: var(--bianco); }
.confronto__testa--noi .dato { color: var(--ambra); }
.confronto__voce--noi { border-top: 1px solid rgba(255, 255, 255, .14); }
.confronto__voce--noi p { color: var(--bianco); }
.confronto__voce--noi .confronto__segno { background: var(--ambra-velo); color: var(--ambra); }
@media (max-width: 760px) {
.confronto { grid-template-columns: minmax(0, 1fr); }
.confronto__testa--loro,
.confronto__voce--loro { order: 1; }
.confronto__testa--noi,
.confronto__voce--noi { order: 2; }
.confronto__testa--noi { margin-top: var(--fuga); }
}
/* =========================================================================
26. I BOTTONI NON SONO LINK
-------------------------------------------------------------------------
Sia la testata sia le sezioni verdi dichiarano il colore dei propri
collegamenti (`.sito-testata a`, `.su-verde a`: bianco). Un bottone che
sta dentro a uno dei due e' pero' un , e si portava a casa quel bianco
sopra al proprio fondo: "Trova un Point" era bianco su giallo (1.74) e i
badge degli store bianco su bianco (1.00).
Queste tre righe stanno in fondo al foglio di proposito: hanno la stessa
specificita' delle regole di contesto, e vincono perche' vengono dopo.
========================================================================= */
a.b--point { color: var(--inchiostro); }
a.b--chiaro { color: var(--inchiostro); }
a.b--scuro { color: var(--bianco); }