/* =================================================================== SOLIDIS SRL — style.css Concept: LE SETTE LETTERE · binario doppio ciano/arancione Palette campionata dal vettoriale del cliente. =================================================================== */ /* ---- font serviti dal sito: nessuna chiamata esterna, nessun cookie ---- */ @font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('../fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Archivo';src:url('../fonts/archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Archivo';src:url('../fonts/archivo-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} /* ═══════════════════════ I DUE TEMI ═══════════════════════ Le variabili dicono il RUOLO, non il colore: --fondo è «lo sfondo», --inchiostro è «il testo». Cambiando questi valori cambia tutto il sito. Di partenza il tema è CHIARO. L'attributo data-tema="scuro" sull' accende quello scuro; lo mette l'interruttore in testata, e lo ricorda il browser. Chi ha il sistema impostato su scuro lo trova già scuro. */ :root{ --fondo:#FFFFFF; --fondo-2:#F3F6F8; --fondo-3:#FFFFFF; --inchiostro:#0B0D10; --inchiostro-2:#1A2029; --tenue:#66707B; --tenue-2:#414B56; --pieno:#0B0D10; --bordo:rgba(var(--linea-rgb),.16); --linea-rgb:11,13,16; --fondo-rgb:255,255,255; --ombra-rgb:15,28,45; --ciano-t:#00769E; --arancio-t:#BC4D15; --fuoco:#00658A; --arancio-b:#B84A12; --ciano:#00A5DF; --arancio:#E56323; --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --testo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --gut:clamp(1.25rem,4vw,2.5rem); --max:1280px; --r:14px; --rail:3px; --t-fast:.22s cubic-bezier(.22,.61,.36,1); --t:.45s cubic-bezier(.22,.61,.36,1); --t-slow:.9s cubic-bezier(.22,.61,.36,1); color-scheme:light; } :root[data-tema="scuro"]{ --fondo:#0B0D10; --fondo-2:#0F1216; --fondo-3:#151A20; --inchiostro:#F4F6F8; --inchiostro-2:#E6EAEE; --tenue:#8A939B; --tenue-2:#C9D1D8; --pieno:#FFFFFF; --bordo:rgba(var(--linea-rgb),.16); --linea-rgb:201,209,216; --fondo-rgb:11,13,16; --ombra-rgb:0,0,0; --ciano-t:#00A5DF; --arancio-t:#E56323; --fuoco:#57C8F5; --arancio-b:#B84A12; color-scheme:dark; } /* ---- LE ZONE ---- Una zona è un pezzo di pagina che non segue il tema. · .zona-scura — la prima schermata: i sette video e gli ingranaggi sono nati per il fondo nero e sul bianco perderebbero. · .sez--banda — la fascia di Servizi e Contatti: è sempre l'OPPOSTO della pagina, così quelle due sezioni si staccano dalle altre in tutti e due i temi. */ .zona-scura, .lb, :root:not([data-tema="scuro"]) .sez--banda{ --fondo:#0B0D10; --fondo-2:#0F1216; --fondo-3:#151A20; --inchiostro:#F4F6F8; --inchiostro-2:#E6EAEE; --tenue:#8A939B; --tenue-2:#C9D1D8; --pieno:#FFFFFF; --bordo:rgba(var(--linea-rgb),.16); --linea-rgb:201,209,216; --fondo-rgb:11,13,16; --ombra-rgb:0,0,0; --ciano-t:#00A5DF; --arancio-t:#E56323; --fuoco:#57C8F5; --arancio-b:#B84A12; } .zona-chiara, :root[data-tema="scuro"] .sez--banda{ --fondo:#FFFFFF; --fondo-2:#F3F6F8; --fondo-3:#FFFFFF; --inchiostro:#0B0D10; --inchiostro-2:#1A2029; --tenue:#66707B; --tenue-2:#414B56; --pieno:#0B0D10; --bordo:rgba(var(--linea-rgb),.16); --linea-rgb:11,13,16; --fondo-rgb:255,255,255; --ombra-rgb:15,28,45; --ciano-t:#00769E; --arancio-t:#BC4D15; --fuoco:#00658A; --arancio-b:#B84A12; } .zona-scura,.zona-chiara,.sez--banda{background:var(--fondo);color:var(--inchiostro)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--fondo);color:var(--inchiostro); font-family:var(--testo);font-size:clamp(1rem,.97rem + .18vw,1.09rem); line-height:1.65;-webkit-font-smoothing:antialiased; overflow-x:hidden; } img,video{max-width:100%;display:block} /* senza questo l'attributo height="…" resta come altezza fissa e stira l'immagine */ img{height:auto} a{color:inherit} h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0} p{margin:0} button{font:inherit;color:inherit} .wrap{width:min(100% - var(--gut)*2,var(--max));margin-inline:auto} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* skip link */ .skip{position:absolute;left:.5rem;top:-4rem;z-index:200;background:var(--ciano);color:#001018; padding:.7rem 1.1rem;border-radius:8px;font-weight:700;transition:top var(--t-fast)} .skip:focus{top:.5rem} :focus-visible{outline:3px solid var(--fuoco);outline-offset:3px;border-radius:4px} /* ===================== LOADER ===================== */ #loader{position:fixed;inset:0;z-index:300;background:var(--fondo); display:grid;place-items:center;transition:opacity .38s ease,visibility .38s} #loader.via{opacity:0;visibility:hidden} #loader svg{width:min(30vw,150px);height:auto;overflow:visible} /* tutta l'animazione sta dentro il secondo: 0.62s tracciato + 0.26s marchio = 0.88s */ #loader .tratto{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900); animation:traccia .62s cubic-bezier(.5,0,.2,1) forwards} #loader .t-c{stroke:var(--ciano)} #loader .t-a{stroke:var(--arancio);animation-delay:.12s} @keyframes traccia{to{stroke-dashoffset:0}} #loader .marchio{opacity:0;animation:sfuma .26s ease .56s forwards;font-family:var(--display); font-size:.72rem;letter-spacing:.5em;color:var(--tenue);text-align:center;margin-top:1.1rem;text-indent:.5em} @keyframes sfuma{to{opacity:1}} /* ===================== HEADER ===================== */ .testata{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(var(--fondo-rgb),.92); border-bottom:1px solid rgba(var(--linea-rgb),.12);transition:background var(--t-fast),border-color var(--t-fast)} .testata.giu{background:var(--fondo);border-bottom-color:rgba(var(--linea-rgb),.2)} .testata__in{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.6rem);min-height:84px;padding-block:.7rem} /* logo grande e leggibile: è il primo segno di riconoscimento */ .testata__logo img{height:54px;width:auto;transition:height var(--t-fast)} .testata.giu .testata__logo img{height:46px} .nav{margin-left:auto;display:flex;gap:clamp(1rem,1.8vw,1.7rem);align-items:center} .nav a{text-decoration:none;font-size:.97rem;font-weight:600;color:var(--tenue-2); position:relative;padding-block:.45rem;transition:color var(--t-fast);white-space:nowrap} /* sottolineatura arancione: si allunga al passaggio e resta sulla sezione in cui sei */ .nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px; background:var(--arancio);transition:right .28s cubic-bezier(.22,.61,.36,1)} .nav a:hover{color:var(--pieno)} .nav a:hover::after{right:0} .nav a.attivo{color:var(--pieno);font-weight:700} .nav a.attivo::after{right:0} .tel-top{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.93rem; text-decoration:none;color:var(--inchiostro);white-space:nowrap} .bt-wa{display:inline-flex;align-items:center;gap:.55rem;background:var(--arancio-b);color:#fff; text-decoration:none;font-weight:700;font-size:.9rem;padding:.68rem 1.15rem;border-radius:999px; transition:transform var(--t-fast),box-shadow var(--t-fast);white-space:nowrap} .bt-wa:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(229,99,35,.38)} /* .nav a ha specificità più alta e vinceva sul bianco del pulsante: il testo restava grigio su arancione, 2,6:1 */ .nav a.bt-wa,.nav a.bt-wa:hover{color:#fff} .nav a.tel-top{color:var(--inchiostro)} .bt-wa svg{width:17px;height:17px;flex:none;fill:currentColor} .burger{display:none;margin-left:auto;background:none;border:1px solid rgba(var(--linea-rgb),.3); border-radius:9px;width:44px;height:44px;cursor:pointer;position:relative} .burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--inchiostro); transition:transform var(--t-fast),opacity var(--t-fast)} .burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media(max-width:520px){.testata__logo img{height:42px}.testata.giu .testata__logo img{height:38px}} @media(max-width:1100px){ .nav{position:fixed;inset:84px 0 auto 0;flex-direction:column;align-items:stretch;gap:0; background:var(--fondo);border-bottom:1px solid rgba(var(--linea-rgb),.18);padding:.5rem var(--gut) 1.2rem; transform:translateY(-120%);margin:0; /* su telefono in orizzontale il menu è più alto dello schermo: senza questo l'ultima voce resta irraggiungibile */ max-height:calc(100svh - 84px);overflow-y:auto;overscroll-behavior:contain; /* senza visibility i sei link restano raggiungibili col Tab anche a menu chiuso, fuori schermo: si tabula nel vuoto */ visibility:hidden; transition:transform var(--t),visibility 0s linear var(--t-dur,.45s)} .nav.aperta{transform:translateY(0);visibility:visible;transition:transform var(--t),visibility 0s} .nav a{padding:.95rem 0;border-bottom:1px solid rgba(var(--linea-rgb),.1);font-size:1.05rem} /* nel menu a tendina la sezione attiva si riconosce da una barretta arancione */ .nav a::after{left:-.75rem;right:auto;top:50%;bottom:auto;width:3px;height:0; transform:translateY(-50%);transition:height .25s ease} .nav a:hover::after,.nav a.attivo::after{right:auto;height:60%} .nav a.attivo{color:var(--arancio-t)} .nav .bt-wa{margin-top:1rem;justify-content:center;padding:.9rem} .tel-top{display:none} .burger{display:block} } /* ===================== HERO ===================== */ /* il fondo lascia spazio alla barra cookie e al pulsante WhatsApp flottante */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; padding-top:120px;padding-bottom:clamp(4.5rem,7vh,5.5rem);overflow:hidden} .hero__media{position:absolute;inset:0;z-index:0} .hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover} .hero__velo{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(var(--fondo-rgb),.86) 0%,rgba(var(--fondo-rgb),.6) 35%,rgba(var(--fondo-rgb),.82) 72%,var(--fondo) 100%)} .hero__velo::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,rgba(var(--fondo-rgb),.8) 0%,transparent 62%)} .hero__in{position:relative;z-index:2;display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(1.2rem,3.5vw,3rem);align-items:center} @media(max-width:1000px){.hero__in{grid-template-columns:1fr}} .hero__testo{position:relative;z-index:2} /* ============ IL PRODOTTO NELLA PRIMA SCHERMATA ============ Al posto degli ingranaggi (14/09/2026: al cliente non piacevano) c'è l'estintore col suo marchio, fotografato su fondo scuro. Sta dentro la zona scura dell'apertura, quindi il fondo della foto e quello della sezione sono lo stesso nero e il prodotto sembra ritagliato. Respira piano: solo transform, nessun fotogramma perso. */ .hero__prod{position:relative;width:100%;display:flex;justify-content:center; align-items:center;pointer-events:none} .hero__prod img{width:auto;max-width:100%;max-height:min(66vh,620px); object-fit:contain; /* La foto ha il suo fondo grigio scuro: senza questa maschera si vedrebbe il rettangolo. I bordi sfumano e il prodotto sembra appoggiato sulla sezione. -webkit- serve per Safari, che vuole ancora il prefisso. */ -webkit-mask-image:radial-gradient(ellipse 72% 74% at 50% 48%,#000 58%,transparent 100%); mask-image:radial-gradient(ellipse 72% 74% at 50% 48%,#000 58%,transparent 100%); animation:respira 7s ease-in-out infinite;will-change:transform} @keyframes respira{ 0%,100%{transform:translateY(0) rotate(-1.2deg)} 50% {transform:translateY(-14px) rotate(1.2deg)} } @media(max-width:1000px){ /* su schermo stretto il prodotto sta dietro al testo, sulla destra: si vede, ma non allunga la prima schermata */ .hero__prod{position:absolute;top:8%;right:-10%;width:58%;z-index:1;opacity:.42} .hero__prod img{max-height:none} .hero__in{position:static} } @media(max-width:620px){.hero__prod{top:6%;right:-16%;width:66%;opacity:.3}} .occhiello{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--display); font-size:.73rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--tenue-2)} .occhiello::before{content:'';width:30px;height:var(--rail);background:var(--ciano);flex:none} .occhiello--a::before{background:var(--arancio)} h1{font-size:clamp(2rem,1.1rem + 3.7vw,4rem);margin:1.1rem 0 0;max-width:20ch} h1 .riga{display:block;overflow:hidden} h1 .riga>span{display:block} h1 em,h1 .acc-c{font-style:normal;color:var(--ciano)} h1 i,h1 .acc-a{font-style:normal;color:var(--arancio)} .hero__sub{margin-top:1.3rem;max-width:52ch;color:var(--tenue-2);font-size:clamp(1rem,.95rem + .35vw,1.2rem)} .hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem} .bt{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-decoration:none; font-weight:700;padding:.95rem 1.6rem;border-radius:999px;border:1.5px solid transparent; transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast),color var(--t-fast); cursor:pointer;font-size:.97rem} .bt--wa{background:var(--arancio-b);color:#fff} .bt--wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(229,99,35,.4)} .bt--ghost{border-color:rgba(var(--linea-rgb),.4);color:var(--inchiostro);background:transparent} .bt--ghost:hover{border-color:var(--ciano-t);color:var(--ciano-t);transform:translateY(-2px)} .bt--pieno{background:var(--ciano);color:#001018} .bt--pieno:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,165,223,.4)} .bt svg{width:18px;height:18px;fill:currentColor;flex:none} .cifre{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.4rem);margin-top:clamp(2.2rem,5vh,3.4rem); padding-top:1.7rem;border-top:1px solid rgba(var(--linea-rgb),.16)} .cifra__n{font-family:var(--display);font-weight:800;font-size:clamp(2rem,1.3rem + 2.4vw,3rem); line-height:1;color:var(--pieno);display:block} .cifra:nth-child(1) .cifra__n{color:var(--ciano)} .cifra:nth-child(3) .cifra__n{color:var(--arancio)} .cifra__t{display:block;margin-top:.45rem;font-size:.83rem;color:var(--tenue);max-width:19ch;line-height:1.45} /* Su telefono le cifre vanno a due per riga e la prima schermata lascia in fondo lo spazio occupato da barra cookie e pulsante WhatsApp, che sono fissi. */ @media(max-width:620px){ .hero{padding-top:104px;padding-bottom:7.5rem} .hero__sub{margin-top:1rem} .hero__cta{margin-top:1.5rem;gap:.6rem} .cifre{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1rem; margin-top:1.8rem;padding-top:1.3rem} .cifra__n{font-size:1.9rem} .cifra__t{font-size:.76rem;max-width:none} .cifra:nth-child(3){grid-column:1/-1} .giu-cue{display:none} } .giu-cue{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:3; display:grid;place-items:center;gap:.5rem;color:var(--tenue);font-size:.68rem; letter-spacing:.22em;text-transform:uppercase;font-family:var(--display);font-weight:700} .giu-cue i{display:block;width:1px;height:38px;background:linear-gradient(var(--tenue),transparent); animation:cue 1.9s ease-in-out infinite} @keyframes cue{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}} /* ===================== SEZIONI ===================== */ .sez{padding-block:clamp(4rem,9vh,7.5rem);position:relative} .sez--banda .occhiello{color:var(--tenue)} .sez--alt{background:var(--fondo-2)} .sez__cap{max-width:62ch} h2{font-size:clamp(1.75rem,1.2rem + 2.3vw,3rem);margin-top:1rem} .sez__testo{margin-top:1.2rem;color:var(--tenue-2);max-width:58ch;font-size:1.05rem} .sez--banda .sez__testo{color:var(--tenue-2)} /* ---- binari ---- */ .binario{position:absolute;top:0;bottom:0;width:var(--rail);opacity:.75; background-size:100% 220%;animation:scorre-binario 9s linear infinite} .binario--c{left:0;background-image:linear-gradient(180deg,transparent,var(--ciano) 18%,var(--ciano) 82%,transparent)} .binario--g{right:0;background-image:linear-gradient(180deg,transparent,var(--arancio) 18%,var(--arancio) 82%,transparent)} @keyframes scorre-binario{from{background-position:0 0}to{background-position:0 -220%}} @media(max-width:760px){.binario{display:none}} /* ---- DUE MESTIERI ---- */ .mestieri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);margin-top:clamp(2rem,5vh,3.4rem)} @media(max-width:900px) and (min-width:620px){ .mestieri{grid-template-columns:1fr 1fr} .mestieri>*:last-child{grid-column:1/-1} } @media(max-width:619px){.mestieri{grid-template-columns:1fr}} .mestiere{position:relative;padding:clamp(1.6rem,3.5vw,2.6rem);border-radius:var(--r); background:var(--fondo-3);border:1px solid rgba(var(--linea-rgb),.12);overflow:hidden; transition:transform var(--t-fast),border-color var(--t-fast)} .mestiere:hover{transform:translateY(-4px)} .mestiere::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--rail);background:var(--ciano)} .mestiere--g::before{background:var(--arancio)} .mestiere--p::before{background:var(--tenue)} .mestiere:hover{border-color:rgba(0,165,223,.45)} .mestiere--g:hover{border-color:rgba(229,99,35,.45)} .mestiere--p:hover{border-color:rgba(var(--linea-rgb),.5)} .mestiere h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);margin-top:.5rem;position:relative} .mestiere p{margin-top:.8rem;color:var(--tenue-2);font-size:.98rem;position:relative} /* ---- SERVIZI ---- */ /* Cinque riquadri: 3 + 2, mai uno solo in fondo a una riga. Griglia a 6 colonne: i primi tre occupano 2 colonne, gli ultimi due 3. */ .griglia-serv{display:grid;grid-template-columns:repeat(6,1fr); gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2rem,5vh,3.2rem)} .griglia-serv>*{grid-column:span 2} .griglia-serv>*:nth-child(4),.griglia-serv>*:nth-child(5){grid-column:span 3} @media(max-width:980px){ .griglia-serv{grid-template-columns:repeat(2,1fr)} .griglia-serv>*, .griglia-serv>*:nth-child(4),.griglia-serv>*:nth-child(5){grid-column:span 1} .griglia-serv>*:nth-child(5){grid-column:span 2} } @media(max-width:620px){ .griglia-serv{grid-template-columns:1fr} .griglia-serv>*,.griglia-serv>*:nth-child(5){grid-column:span 1} } .serv{position:relative;padding:clamp(1.5rem,3vw,2.1rem);border-radius:var(--r);background:var(--fondo-3); border:1px solid rgba(var(--linea-rgb),.16);display:flex;flex-direction:column;gap:.7rem; transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)} .serv:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(var(--ombra-rgb),.13);border-color:rgba(0,165,223,.5)} .serv--fire:hover{border-color:rgba(229,99,35,.5)} .serv__ico{width:46px;height:46px;display:grid;place-items:center;border-radius:11px; background:rgba(0,165,223,.1);color:var(--ciano-t);flex:none} .serv--fire .serv__ico{background:rgba(229,99,35,.1);color:var(--arancio-t)} .serv__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .serv h3{font-size:1.18rem;color:var(--inchiostro)} .serv p{color:var(--tenue-2);font-size:.95rem} .serv__b2b{margin-top:auto;font-size:.78rem;font-weight:700;color:var(--arancio-t); text-transform:uppercase;letter-spacing:.1em;font-family:var(--display)} /* ============ I QUATTRO FATTI ============ Quattro schede numerate, sullo stesso impianto delle altre. Due per riga da tablet in su, una per riga sul telefono: mai una sola scheda in fila. */ .pilastri{display:grid;gap:clamp(.9rem,2vw,1.4rem); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} @media(min-width:1100px){.pilastri{grid-template-columns:repeat(4,1fr)}} .pilastro{position:relative;background:var(--fondo-3);border:1px solid var(--bordo); border-radius:var(--r);padding:clamp(1.3rem,2.4vw,1.8rem)} .pilastro__n{display:block;font-family:var(--display);font-weight:800; font-size:.82rem;letter-spacing:.18em;color:var(--ciano-t);margin-bottom:.9rem} .pilastro h3{font-size:clamp(1.02rem,.95rem + .3vw,1.2rem);margin-bottom:.5rem;color:var(--inchiostro)} .pilastro p{font-size:.92rem;line-height:1.6;color:var(--tenue)} .pilastro:nth-child(1) .pilastro__n{color:var(--arancio-t)} /* Con tre divisioni le schede stanno tre per riga: le regole di span della griglia a sei colonne qui non servono e vanno azzerate, altrimenti la terza scheda finisce da sola su una riga. */ .griglia-serv--tre{grid-template-columns:repeat(3,1fr)} .griglia-serv--tre>*, .griglia-serv--tre>*:nth-child(4), .griglia-serv--tre>*:nth-child(5){grid-column:span 1} @media(max-width:980px){ .griglia-serv--tre{grid-template-columns:repeat(2,1fr)} .griglia-serv--tre>*:nth-child(3){grid-column:span 2} } @media(max-width:620px){ .griglia-serv--tre{grid-template-columns:1fr} .griglia-serv--tre>*:nth-child(3){grid-column:span 1} } .serv__punti{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.45rem} .serv__punti li{position:relative;padding-left:1.35rem;font-size:.89rem;color:var(--tenue);line-height:1.5} .serv__punti li::before{content:'';position:absolute;left:0;top:.52em;width:7px;height:7px; border-radius:2px;background:var(--ciano)} .serv--fire .serv__punti li::before{background:var(--arancio)} .sez--alt .serv__punti li,#manutenzione .serv__punti li{color:var(--tenue)} /* ---- MANUTENZIONE E OBBLIGHI ---- */ /* ---- NOTE DELLE CERTIFICAZIONI ---- */ .cert-note{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr)); gap:clamp(.9rem,1.8vw,1.3rem);margin-top:1.8rem} .cert-nota{padding:1.3rem 1.4rem;border-radius:var(--r);background:var(--fondo-2); border:1px solid rgba(var(--linea-rgb),.12);transition:border-color var(--t-fast),transform var(--t-fast)} .cert-nota:hover{border-color:rgba(0,165,223,.4)} .cert-nota h3{font-size:1rem;color:var(--pieno)} .cert-nota p{margin-top:.5rem;font-size:.9rem;color:var(--tenue)} /* ---- NASTRO DELLE MARCHE — scorre sempre, non si ferma mai ---- */ .marche{background:var(--fondo);border-block:1px solid rgba(var(--linea-rgb),.12); padding-block:1.5rem;overflow:hidden} .marche__et{text-align:center;font-family:var(--display);font-size:.7rem;font-weight:700; letter-spacing:.22em;text-transform:uppercase;color:var(--tenue);margin-bottom:1.1rem} .marche__pista{display:flex;width:max-content;animation:marquee 42s linear infinite} .marche__gr{display:flex;align-items:center;gap:clamp(2rem,5vw,4rem);padding-right:clamp(2rem,5vw,4rem)} .marche__m{font-family:var(--display);font-weight:700;font-size:clamp(1rem,.9rem + .5vw,1.35rem); color:var(--tenue-2);opacity:.65;white-space:nowrap;letter-spacing:.02em} @keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} /* ---- LE SETTE LETTERE — due righe, niente scorrimento bloccato ---- Griglia a 12 colonne: riga 1 = A B C D (3 colonne l'una), riga 2 = E F G (4 colonne l'una). Le due righe restano piene. */ #lettere{background:var(--fondo)} .lettere-griglia{display:grid;grid-template-columns:repeat(12,1fr); gap:clamp(.8rem,1.5vw,1.1rem);margin-top:clamp(2rem,5vh,3rem);align-items:stretch} .lettera{grid-column:span 3} .lettera:nth-child(n+5){grid-column:span 4} .lettera{background:var(--fondo-3);border:1px solid rgba(var(--linea-rgb),.13); border-radius:var(--r);padding:clamp(1rem,1.8vw,1.35rem);cursor:pointer;text-align:left; display:flex;flex-direction:column;gap:.4rem;height:100%; transition:border-color var(--t-fast),transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast)} .lettera:hover{transform:translateY(-4px);border-color:rgba(var(--linea-rgb),.34); box-shadow:0 14px 30px rgba(var(--ombra-rgb),.34)} .lettera__c{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.2vw,2.7rem); line-height:.9;color:var(--tenue);opacity:.75;transition:color var(--t-fast),opacity var(--t-fast)} .lettera__n{font-family:var(--display);font-size:.99rem;font-weight:700;color:var(--inchiostro); line-height:1.2;text-wrap:balance} .lettera__s{font-size:.85rem;color:var(--tenue);line-height:1.5;text-wrap:pretty; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .lettera--on .lettera__c{opacity:1;color:var(--ciano-t)} .lettera--on{border-color:rgba(0,165,223,.5);background:linear-gradient(180deg,rgba(0,165,223,.1),transparent 60%)} .lettera--fire .lettera__c{opacity:1;color:var(--arancio-t)} .lettera--fire{border-color:rgba(229,99,35,.5);background:linear-gradient(180deg,rgba(229,99,35,.1),transparent 60%)} @media(max-width:900px){ /* due per riga: la settima occupa tutta la larghezza */ .lettera,.lettera:nth-child(n+5){grid-column:span 6} .lettera:last-child{grid-column:span 12} } @media(max-width:560px){ .lettera,.lettera:nth-child(n+5){grid-column:span 6} .lettera:last-child{grid-column:span 12} .lettera{padding:.9rem} .lettera__c{font-size:1.9rem} .lettera__n{font-size:.93rem} .lettera__s{font-size:.8rem;-webkit-line-clamp:3} } .targhette{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem} .targhetta{display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(var(--linea-rgb),.25); border-radius:999px;padding:.5rem 1rem;font-size:.84rem;color:var(--tenue-2);white-space:normal;max-width:100%} .targhetta b{color:var(--pieno);font-family:var(--display)} .onesta{margin-top:1.8rem;padding:1.1rem 1.3rem;border-left:var(--rail) solid var(--tenue); background:var(--fondo-2);border-radius:0 var(--r) var(--r) 0;color:var(--tenue-2); font-size:.95rem;max-width:64ch;text-wrap:pretty} /* ---- blocco media + testo ---- */ .duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center} .duo--inv{grid-template-columns:.95fr 1.05fr} .duo--inv .duo__media{order:-1} @media(max-width:860px){.duo,.duo--inv{grid-template-columns:1fr}.duo--inv .duo__media{order:0}} .duo__media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--fondo-3)} .duo__media video,.duo__media img{width:100%;height:100%;object-fit:cover} .duo__media--alta{aspect-ratio:4/5} /* due video affiancati: mai uno grande sotto l'altro */ .coppia-video{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .coppia-video .duo__media{aspect-ratio:3/4} @media(max-width:520px){.coppia-video{gap:.55rem}} /* ---- STRUMENTO OBBLIGO ---- */ .obb{margin-top:clamp(2rem,5vh,3rem)} .obb__tab{display:flex;flex-wrap:wrap;gap:.6rem} .obb__t{background:var(--fondo-3);border:1px solid rgba(var(--linea-rgb),.16);color:var(--tenue-2); padding:.85rem 1.3rem;border-radius:999px;cursor:pointer;font-weight:600;font-size:.93rem; transition:all var(--t-fast)} .obb__t:hover{border-color:rgba(var(--linea-rgb),.4);color:var(--pieno)} .obb__t[aria-selected="true"]{background:var(--ciano);border-color:var(--ciano);color:#001018} .obb__p{margin-top:1.6rem;background:var(--fondo-3);border:1px solid rgba(var(--linea-rgb),.14); border-radius:var(--r);padding:clamp(1.4rem,3vw,2.2rem);position:relative;overflow:hidden} .obb__p::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--rail);background:var(--ciano)} .obb__p[hidden]{display:none} .obb__ob{font-family:var(--display);font-size:clamp(1.15rem,1rem + .7vw,1.5rem);color:var(--pieno);font-weight:700} .obb__d{margin-top:.8rem;color:var(--tenue-2);max-width:58ch} .obb__s{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid rgba(var(--linea-rgb),.14); color:var(--tenue);font-size:.93rem} .obb__s b{color:var(--ciano-t);font-weight:600} .obb .bt{margin-top:1.4rem} /* ---- PERCHÉ ---- */ .perche{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:2.4rem} .punto{padding:1.5rem;border-radius:var(--r);background:var(--fondo-3);border:1px solid rgba(var(--linea-rgb),.12); transition:transform var(--t-fast),border-color var(--t-fast)} .punto:hover{transform:translateY(-4px);border-color:rgba(0,165,223,.4)} .punto h3{font-size:1.06rem;color:var(--pieno)} .punto p{margin-top:.55rem;font-size:.92rem;color:var(--tenue)} .punto__n{font-family:var(--display);font-size:.75rem;font-weight:700;color:var(--ciano-t); letter-spacing:.18em;display:block;margin-bottom:.7rem} /* ---- GALLERIA ---- */ .filtri{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.8rem} .filtro{background:transparent;border:1px solid rgba(var(--linea-rgb),.24);color:var(--tenue-2); padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;font-size:.88rem;font-weight:600; transition:all var(--t-fast)} .filtro:hover{border-color:var(--tenue-2);color:var(--pieno)} .filtro[aria-pressed="true"]{background:var(--inchiostro);border-color:var(--inchiostro);color:var(--fondo)} .galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:.8rem;margin-top:1.8rem} @media(max-width:520px){.galleria{grid-template-columns:1fr 1fr;gap:.55rem}} .scatto{position:relative;margin:0;border-radius:10px;overflow:hidden;background:var(--fondo-3); aspect-ratio:4/5;cursor:zoom-in;border:0;padding:0;display:block;width:100%} .scatto img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow)} .scatto:hover img{transform:scale(1.07)} .scatto .scatto__cap{position:absolute;inset:auto 0 0 0;padding:2.4rem .8rem .7rem;text-align:left; background:linear-gradient(transparent,rgba(var(--fondo-rgb),.92));font-size:.78rem;color:var(--inchiostro); opacity:0;transform:translateY(8px);transition:opacity var(--t-fast),transform var(--t-fast); line-height:1.35} .scatto:hover .scatto__cap,.scatto:focus-visible .scatto__cap{opacity:1;transform:translateY(0)} .scatto[hidden]{display:none} .tutte-wrap{margin-top:1.8rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center} .tutte-nota{font-size:.85rem;color:var(--tenue)} /* ---- SEQUENZA PRIMA/DURANTE ---- */ .seq{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:2rem} @media(max-width:760px){.seq{grid-template-columns:1fr 1fr}.seq>*:last-child{grid-column:1/-1}} .seq__c{margin:0;padding:0;border:0;border-radius:var(--r);overflow:hidden;position:relative; background:var(--fondo-3);cursor:zoom-in;display:block;width:100%;text-align:left;color:inherit;font:inherit} .seq__c:focus-visible{outline:3px solid var(--fuoco);outline-offset:3px} .seq img{aspect-ratio:3/4;object-fit:cover;width:100%} .seq__cap{display:block;padding:.85rem 1rem;font-size:.85rem;color:var(--tenue)} .seq__et{position:absolute;top:.7rem;left:.7rem;background:var(--fondo);color:var(--ciano-t); font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.2em; padding:.35rem .7rem;border-radius:6px} /* ---- CONTATTI ---- */ .cont{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);margin-top:2.6rem} @media(max-width:860px){.cont{grid-template-columns:1fr}} .dati{display:grid;gap:1rem} .dato{display:flex;gap:.9rem;align-items:flex-start;text-decoration:none;padding:1rem 1.2rem; border-radius:var(--r);background:var(--fondo-3);border:1px solid rgba(var(--linea-rgb),.12); transition:transform var(--t-fast),border-color var(--t-fast)} .dato:hover{transform:translateX(4px);border-color:rgba(0,165,223,.45)} .dato svg{width:21px;height:21px;flex:none;margin-top:.2rem;fill:none;stroke:var(--ciano-t); stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .dato b{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.14em; color:var(--tenue);font-family:var(--display)} .dato span{color:var(--inchiostro);font-weight:600;font-size:1.02rem;word-break:break-word} form{display:grid;gap:.9rem} .campo{display:grid;gap:.4rem} .campo label{font-size:.82rem;color:var(--tenue);font-weight:600} .campo input,.campo select,.campo textarea{background:var(--fondo-3);border:1px solid rgba(var(--linea-rgb),.2); color:var(--inchiostro);border-radius:10px;padding:.85rem 1rem;font:inherit;font-size:.97rem;width:100%} .campo textarea{min-height:110px;resize:vertical} .campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{ border-color:var(--ciano);outline:3px solid var(--fuoco);outline-offset:2px} .campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--ciano)} .due-campi{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} @media(max-width:520px){.due-campi{grid-template-columns:1fr}} .nota-form{font-size:.8rem;color:var(--tenue)} .mappa{margin-top:1rem;border-radius:var(--r);overflow:hidden;position:relative;background:var(--fondo-3); border:1px solid rgba(var(--linea-rgb),.14);min-height:230px;display:grid;place-items:center;text-align:center;padding:1.5rem} .mappa iframe{width:100%;height:300px;border:0;display:block} .mappa__ph p{color:var(--tenue);font-size:.9rem;margin-bottom:1rem;max-width:40ch} /* ---- FOOTER ---- */ footer{background:var(--fondo-2);border-top:1px solid rgba(var(--linea-rgb),.12);padding-block:clamp(2.5rem,6vh,4rem) 1.5rem} .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(1.5rem,4vw,3rem)} @media(max-width:1000px){.foot{grid-template-columns:1fr 1fr;gap:2rem}} @media(max-width:760px){.foot{grid-template-columns:1fr;gap:2rem}} .foot img{height:38px;width:auto} .foot p,.foot li{color:var(--tenue);font-size:.9rem} .foot h4{font-family:var(--display);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase; color:var(--inchiostro);margin-bottom:.9rem} .foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem} .foot a{text-decoration:none;transition:color var(--t-fast)} .foot a:hover{color:var(--ciano-t)} .legale{margin-top:2.5rem;padding-top:1.3rem;border-top:1px solid rgba(var(--linea-rgb),.12); display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;align-items:center} .legale p{font-size:.82rem;color:var(--tenue)} .credit a{color:var(--tenue-2);text-decoration:underline;text-underline-offset:3px} .credit a:hover{color:var(--ciano-t)} /* ---- WHATSAPP FLOTTANTE ---- */ .wa-float{position:fixed;right:1rem;bottom:1rem;z-index:90;width:56px;height:56px;border-radius:50%; background:#25D366;display:grid;place-items:center;box-shadow:0 8px 26px rgba(var(--ombra-rgb),.45); transition:transform var(--t-fast);text-decoration:none} .wa-float:hover{transform:scale(1.08)} .wa-float svg{width:29px;height:29px;fill:#fff;position:relative;z-index:1} /* anello che pulsa: richiama l'occhio senza muovere il pulsante */ .wa-float::before{content:'';position:absolute;inset:0;border-radius:50%; border:2px solid #25D366;animation:pulsa 2.6s cubic-bezier(.3,0,.5,1) infinite} @keyframes pulsa{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.65);opacity:0}100%{opacity:0}} @media(max-width:520px){.wa-float{width:52px;height:52px;bottom:.8rem;right:.8rem}} /* ---- LIGHTBOX ---- Regola d'oro: la didascalia NON esce mai dallo schermo. La griglia è minmax(0,1fr) per la foto + auto per il testo: la foto si rimpicciolita da sola per lasciare posto al testo, mai il contrario. */ .lb{position:fixed;inset:0;z-index:200;background:rgba(6,8,10,.96);display:none; grid-template-rows:minmax(0,1fr) auto;gap:clamp(.7rem,2vh,1.2rem); padding:clamp(3.6rem,7vh,4.6rem) clamp(.8rem,3vw,2.2rem) clamp(.9rem,3vh,1.8rem)} .lb[open],.lb.on{display:grid} .lb__vista{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; gap:clamp(.4rem,1.5vw,1rem);min-height:0} /* La foto è in posizione assoluta dentro il riquadro: cosi non può MAI sforare. max-height:100% su un elemento centrato in griglia non si risolve, e l'immagine usciva a tutta altezza naturale sopra la didascalia. */ .lb__fig{margin:0;position:relative;min-height:0;min-width:0;height:100%;overflow:hidden} .lb__fig img,.lb__fig video{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;border-radius:8px} .lb__cap{max-width:68ch;margin-inline:auto;text-align:center;color:var(--tenue-2); font-size:.96rem;line-height:1.6;max-height:34vh;overflow-y:auto;overscroll-behavior:contain; padding-inline:.2rem} .lb__cap b{display:block;color:var(--pieno);font-family:var(--display);margin-bottom:.45rem;font-size:1.06rem} .lb__conta{display:block;margin-top:.7rem;font-family:var(--display);font-size:.72rem; letter-spacing:.18em;color:var(--tenue)} .lb__x{position:absolute;top:.8rem;right:.8rem;width:48px;height:48px;border-radius:50%;z-index:2; background:rgba(244,246,248,.14);border:1px solid rgba(244,246,248,.32);color:var(--inchiostro); cursor:pointer;display:grid;place-items:center;transition:background var(--t-fast),transform var(--t-fast)} .lb__x:hover{background:var(--arancio);border-color:var(--arancio);transform:rotate(90deg)} .lb__x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round} .lb__nav{width:46px;height:46px;border-radius:50%;flex:none; background:rgba(244,246,248,.1);border:1px solid rgba(244,246,248,.22);color:var(--inchiostro);cursor:pointer; display:grid;place-items:center;transition:background var(--t-fast),color var(--t-fast)} .lb__nav:hover{background:var(--ciano);border-color:var(--ciano);color:#001018} .lb__nav svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round} @media(max-width:640px){ .lb{padding:3.4rem .7rem 1rem;gap:.6rem} .lb__vista{grid-template-columns:1fr} /* su telefono le frecce stanno SOPRA la foto, non sopra il testo */ .lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px; background:rgba(var(--fondo-rgb),.6);backdrop-filter:none} .lb__prev{left:.5rem}.lb__next{right:.5rem} .lb__cap{font-size:.88rem;max-height:38vh} } /* ---- COOKIE ---- */ .cookie-bar{position:fixed;inset:auto 0 0 0;z-index:95;display:flex;gap:1rem;align-items:center; justify-content:center;padding:.6rem 1rem;font-size:.82rem;line-height:1.35; background:var(--fondo-2);border-top:1px solid rgba(var(--linea-rgb),.18);opacity:.97;color:var(--tenue-2)} .cookie-bar a{color:inherit;text-decoration:underline;text-underline-offset:2px} .cookie-bar__x{background:none;border:0;font-size:1.3rem;line-height:1;cursor:pointer;opacity:.6;padding:0 .3rem} .cookie-bar__x:hover{opacity:1} .cookie-bar[hidden]{display:none} @media(max-width:560px){.cookie-bar{font-size:.74rem;padding:.5rem .7rem;gap:.5rem} .wa-float{bottom:3.6rem}} /* ===================== REVEAL ===================== Il nascondino vale solo con «.js» sulla pagina, classe che mette lo script in testa. Se il JavaScript non parte, i testi restano visibili invece di sparire per sempre. */ .js .rv{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1)} .js .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s} .rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s} /* maschera per i titoli */ .masch{overflow:hidden;display:block} .js .masch>span{display:block;transform:translateY(105%);transition:transform .85s cubic-bezier(.22,.61,.36,1)} .in .masch>span,.masch.in>span{transform:none} /* ===================== TITOLO PAROLA PER PAROLA ===================== */ h1 .pw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em} h1 .pw>span{display:inline-block;transform:translateY(112%);opacity:0; transition:transform .78s cubic-bezier(.22,.61,.36,1),opacity .5s ease} h1 .pw.in>span{transform:none;opacity:1} /* quando le parole sono state separate, la maschera di riga non serve più */ h1 .masch.parole>span{transform:none} /* ===================== PROFONDITA' SULLE SCHEDE ===================== */ .tilt{transform-style:preserve-3d;transition:transform var(--t) ,border-color var(--t-fast),box-shadow var(--t)} @media(hover:hover) and (min-width:900px){ .tilt:hover{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-5px)} .tilt>*{transform:translateZ(22px)} } /* ===================== INGRANAGGIO DI SFONDO ===================== */ /* Tornato al suo posto: era stato tolto insieme agli ingranaggi, ma la ruota di filigrana delle sottopagine lo usa ancora. */ @keyframes gira{from{transform:rotate(0)}to{transform:rotate(360deg)}} .ruota-sfondo{position:absolute;pointer-events:none;opacity:.045;z-index:0; animation:gira 90s linear infinite;transform-origin:50% 50%} .ruota-sfondo svg{width:100%;height:auto;display:block} #lettere .ruota-sfondo{width:min(46vw,560px);right:-12%;top:4%} #perche .ruota-sfondo{width:min(38vw,440px);left:-10%;bottom:-6%;animation-direction:reverse;animation-duration:75s} #lettere,#perche{position:relative;overflow:hidden} #lettere .wrap,#perche .wrap,#lettere .nastro-zona{position:relative;z-index:1} /* ===================== FOOTER ===================== */ footer{position:relative;overflow:hidden} footer::before{content:'';position:absolute;inset:0 0 auto 0;height:2px; background:linear-gradient(90deg,var(--ciano),var(--arancio),var(--ciano)); background-size:220% 100%;animation:scorre-filo 14s linear infinite} @keyframes scorre-filo{from{background-position:0 0}to{background-position:220% 0}} .foot{position:relative;z-index:1} .foot__marchio{display:block;margin-bottom:1.1rem} .foot__claim{max-width:40ch;color:var(--tenue)} .foot__contatto{display:flex;align-items:center;gap:.6rem;text-decoration:none; padding:.35rem 0;transition:transform var(--t-fast),color var(--t-fast)} .foot__contatto:hover{transform:translateX(5px);color:var(--ciano-t)} .foot__contatto svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--ciano-t); stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .foot ul a{display:inline-block;position:relative;padding-block:.12rem} .foot ul a::after{content:'';position:absolute;left:0;right:100%;bottom:.05rem;height:1px; background:var(--ciano);transition:right var(--t-fast)} .foot ul a:hover::after{right:0} .foot__bollo{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.3rem; border:1px solid rgba(var(--linea-rgb),.22);border-radius:999px;padding:.45rem .95rem; font-family:var(--display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--tenue-2)} .foot__bollo b{color:var(--ciano-t)} .legale{align-items:flex-start} .legale__dati{display:grid;gap:.25rem} /* ===================== LIGHTBOX DI SOLO TESTO (lettere A-G) ===================== */ .lb--testo{grid-template-rows:1fr auto 1fr} .lb--testo .lb__vista{display:none} .lb--testo .lb__cap{max-width:62ch;max-height:none;font-size:1.02rem;text-align:left; grid-row:2;align-self:center} .lb--testo .lb__cap b{font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);margin-bottom:1rem; color:var(--pieno);line-height:1.15} .lb--testo .lb__conta{display:none} /* ===================== TESTO ORDINATO ===================== */ /* i titoli si spezzano in modo equilibrato, i paragrafi non lasciano parole orfane */ h1,h2,h3,h4,.lettera__n,.serv h3,.punto h3,.manut__c h3,.cert-nota h3{text-wrap:balance} p,.sez__testo,.serv p,.punto p,.manut__c p,.cert-nota p,.lettera__s, .hero__sub,.foot__claim,.obb__d,.onesta,.lb__cap{text-wrap:pretty} /* etichette corte: mai a capo */ .occhiello,.mestiere__tag,.serv__b2b,.punto__n,.manut__n,.cifra__n, .lettera__piu,.lettere-nota,.foot__bollo,.marche__m,.filtro,.obb__t{text-wrap:nowrap} /* schede della stessa riga alte uguali */ .griglia-serv>*,.perche>*,.manut>*,.cert-note>*,.mestieri>*{height:100%} .serv,.punto,.manut__c,.cert-nota,.mestiere{display:flex;flex-direction:column} .serv p,.punto p,.manut__c p,.cert-nota p{flex:0 0 auto} /* ===================== ICONE CHE ENTRANO ===================== */ .serv__ico{transform:scale(.72);opacity:0; transition:transform .5s cubic-bezier(.34,1.56,.64,1) .12s,opacity .4s ease .12s} .rv.in .serv__ico,.in .serv__ico{transform:scale(1);opacity:1} .serv:hover .serv__ico{transform:scale(1.08) rotate(-4deg)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} .rv{opacity:1;transform:none} .masch>span{transform:none} h1 .pw>span{transform:none;opacity:1} #loader{display:none} .hero__prod img{animation:none} .ruota-sfondo{animation:none} .serv__ico{transform:none;opacity:1} } /* ═══════════ INTERRUTTORE CHIARO / SCURO ═══════════ */ /* Ordine in testata: logo … menu, interruttore, hamburger. L'ordine visivo lo decidono queste tre righe, non la posizione nel codice: così nel codice si può mettere il menu prima dell'interruttore e da tastiera il fuoco segue l'occhio invece di saltare avanti e indietro. */ .nav{order:2} .tema{order:3} .burger{order:4} .tema{display:grid;place-items:center;width:44px;height:44px;flex:none;cursor:pointer; background:none;border:1px solid rgba(var(--linea-rgb),.3);border-radius:9px; color:var(--inchiostro);transition:border-color var(--t-fast),transform var(--t-fast)} .tema:hover{border-color:var(--ciano);transform:translateY(-1px)} .tema:focus-visible{outline:2px solid var(--ciano);outline-offset:2px} .tema__i{width:19px;height:19px} /* si mostra l'icona di DOVE SI VA, non di dove si è: sul chiaro la luna (porta allo scuro), sullo scuro il sole. */ .tema__sole{display:none} :root[data-tema="scuro"] .tema__sole{display:block} :root[data-tema="scuro"] .tema__luna{display:none} @media(max-width:1100px){ .tema{margin-left:auto} .burger{margin-left:.6rem} } /* ═══════════ IL LOGO SEGUE IL FONDO ═══════════ */ /* logo.png ha la scritta bianca: va sul fondo scuro. logo-scuro.png ha la scritta nera: va sul fondo chiaro. */ .testata__logo{display:inline-flex;align-items:center} .logo--chiaro{display:none} .logo--scuro{display:block} :root[data-tema="scuro"] .logo--chiaro{display:block} :root[data-tema="scuro"] .logo--scuro{display:none} /* ═══════════ RITOCCHI DEL TEMA CHIARO ═══════════ */ /* Sul bianco le schede hanno bisogno di un filo d'ombra, altrimenti con il solo bordo chiaro non si staccano dal fondo. */ :root:not([data-tema="scuro"]) .serv, :root:not([data-tema="scuro"]) .punto, :root:not([data-tema="scuro"]) .lettera, :root:not([data-tema="scuro"]) .mestiere, :root:not([data-tema="scuro"]) .cert-nota, :root:not([data-tema="scuro"]) .dato{box-shadow:0 1px 2px rgba(var(--ombra-rgb),.05),0 8px 24px rgba(var(--ombra-rgb),.04)} /* la barra dei cookie e il lightbox restano leggibili in tutti e due i temi */ :root:not([data-tema="scuro"]) .cookie-bar{box-shadow:0 -6px 24px rgba(var(--ombra-rgb),.08)} /* ═══════════ TESTATA DELLE PAGINE INTERNE ═══════════ */ /* Ogni pagina si apre con una fascia scura, come la prima schermata della home: è il segno che si è dentro lo stesso sito. Poi il corpo torna chiaro. */ .testa-pagina{position:relative;overflow:hidden; padding-top:calc(84px + clamp(2.2rem,5vh,3.6rem)); padding-bottom:clamp(2.4rem,6vh,4rem)} .testa-pagina h1{font-size:clamp(1.9rem,1.35rem + 2.4vw,3.2rem);margin-top:.7rem;max-width:22ch} .testa-pagina__sub{margin-top:1.1rem;color:var(--tenue-2);max-width:60ch;font-size:1.05rem} /* l'ingranaggio in filigrana, come nelle sezioni della home */ .testa-pagina .ruota-sfondo{opacity:.05} /* briciole di pane: dove sono e come torno indietro */ .briciole{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap; font-family:var(--display);font-size:.76rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--tenue)} .briciole a{color:var(--tenue);text-decoration:none;transition:color var(--t-fast)} .briciole a:hover{color:var(--ciano-t)} .briciole span{opacity:.5} .briciole b{color:var(--ciano-t);font-weight:700} /* la voce del menu della pagina in cui si è */ .nav a[aria-current="page"]{color:var(--arancio-t);font-weight:700} .nav a[aria-current="page"]::after{right:0;height:2px} /* ═══════════ RIMANDO ALLA PAGINA DEDICATA ═══════════ */ /* Sulla home ogni sezione ha il suo «vedi tutto»: la home resta il riassunto. */ .vedi-tutto{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem; font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.02em; color:var(--ciano-t);text-decoration:none;border-bottom:1px solid transparent; transition:border-color var(--t-fast),gap var(--t-fast)} .vedi-tutto:hover{border-bottom-color:var(--ciano-t);gap:.8rem} .vedi-tutto svg{width:15px;height:15px;flex:none} /* ═══════════ CHIUSA DELLE PAGINE ═══════════ */ .chiusa{text-align:center} .chiusa h2{max-width:24ch;margin-inline:auto} .chiusa p{margin-top:1rem;color:var(--tenue-2);max-width:52ch;margin-inline:auto} .chiusa .hero__cta{justify-content:center;margin-top:2rem} /* ═══════════ LE SETTE LETTERE, VERSIONE ESTESA ═══════════ */ /* Sulla home stanno in griglia con una riga a testa; qui, nella pagina dedicata, ognuna ha il suo testo di legge. */ .lettere-piene{display:grid;gap:clamp(.8rem,1.6vw,1.1rem);margin-top:clamp(2rem,5vh,3.4rem)} .lettera-piena{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.5vw,1.8rem); align-items:start;padding:clamp(1.2rem,2.6vw,1.8rem);border-radius:var(--r); background:var(--fondo-3);border:1px solid rgba(var(--linea-rgb),.13); transition:border-color var(--t-fast),transform var(--t-fast)} .lettera-piena:hover{transform:translateY(-3px);border-color:rgba(var(--linea-rgb),.3)} .lettera-piena__c{font-family:var(--display);font-weight:800;line-height:.8; font-size:clamp(2.4rem,2rem + 2vw,3.6rem);color:var(--tenue);opacity:.45; width:1.6em;text-align:center;flex:none} .lettera-piena h3{font-size:clamp(1.05rem,.98rem + .4vw,1.3rem)} .lett-breve{margin-top:.35rem;color:var(--tenue-2);font-size:.98rem} .lett-legge{margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(var(--linea-rgb),.12); color:var(--tenue);font-size:.88rem;line-height:1.55} .lett-legge b{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase; font-size:.7rem;color:var(--tenue);display:block;margin-bottom:.3rem} .lett-nota{margin-top:.7rem;font-size:.9rem;color:var(--ciano-t)} /* le due lettere che Solidis fa davvero si riconoscono al volo */ .lettera-piena.lettera--on{border-color:rgba(0,165,223,.45)} .lettera-piena.lettera--on .lettera-piena__c{color:var(--ciano-t);opacity:1} .lettera-piena.lettera--fire{border-color:rgba(229,99,35,.45)} .lettera-piena.lettera--fire .lettera-piena__c{color:var(--arancio-t);opacity:1} .lettera-piena.lettera--fire .lett-nota{color:var(--arancio-t)} @media(max-width:560px){ .lettera-piena{grid-template-columns:1fr;gap:.5rem} .lettera-piena__c{text-align:left;width:auto} } /* il marchio nel piè di pagina segue il fondo come quello in testata (serve la doppia classe: .foot__marchio ha già un display suo) */ .foot__marchio.logo--chiaro{display:none} .foot__marchio.logo--scuro{display:block} :root[data-tema="scuro"] .foot__marchio.logo--chiaro{display:block} :root[data-tema="scuro"] .foot__marchio.logo--scuro{display:none} /* ═══════════ EVIDENZIATURA NELL'ANTEPRIMA DEL PANNELLO ═══════════ */ /* Quando il cliente tocca un campo, il pezzo corrispondente si illumina un istante: serve a capire «sto modificando QUESTO». Fuori dal pannello questa classe non viene mai messa. */ .in-modifica{ outline:3px solid var(--ciano); outline-offset:5px; border-radius:4px; animation:lampo-modifica 1.6s ease-out} @keyframes lampo-modifica{ 0%{outline-color:var(--arancio)} 100%{outline-color:transparent}} @media(prefers-reduced-motion:reduce){ .in-modifica{animation:none;outline-color:var(--ciano)}} /* ============ SCEGLI L'ESTINTORE ============ La cosa da fare del sito. Due domande, e sotto restano i modelli adatti. Tutto a chip cliccabili: niente menù a tendina, che da telefono sono scomodi e nascondono le scelte. */ .scelta{margin-top:clamp(1.8rem,4vh,2.6rem);border:1px solid var(--bordo); border-radius:var(--r);background:var(--fondo-3);padding:clamp(1.2rem,3vw,2rem)} .scelta__q{border:0;padding:0;margin:0 0 clamp(1.1rem,2.4vw,1.6rem)} .scelta__q legend{font-family:var(--display);font-weight:700;font-size:.78rem; letter-spacing:.14em;text-transform:uppercase;color:var(--tenue-2);margin-bottom:.8rem;padding:0} .scelta__opz{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .chip{text-align:left;cursor:pointer;font:inherit;color:var(--inchiostro); background:var(--fondo);border:1.5px solid var(--bordo);border-radius:12px; padding:.75rem .9rem;display:block; transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)} .chip:hover{border-color:var(--fuoco);transform:translateY(-2px)} .chip b{display:block;font-family:var(--display);font-size:.98rem;margin-bottom:.15rem} .chip span{display:block;font-size:.78rem;color:var(--tenue);line-height:1.4} .chip[aria-pressed="true"]{border-color:var(--arancio-t);background:rgba(229,99,35,.09)} .chip[aria-pressed="true"] b{color:var(--arancio-t)} .scelta__out{margin-top:clamp(1.2rem,2.6vw,1.8rem);padding-top:clamp(1.2rem,2.6vw,1.8rem); border-top:1px solid var(--bordo)} .scelta__vuoto{color:var(--tenue);font-size:.92rem} .scelta__ris{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .mod{display:flex;gap:.9rem;align-items:center;background:var(--fondo); border:1px solid var(--bordo);border-radius:12px;padding:.8rem .9rem; color:inherit;text-decoration:none;transition:border-color var(--t-fast),transform var(--t-fast)} .mod:hover{border-color:var(--fuoco);transform:translateY(-2px)} .mod img{width:44px;height:62px;object-fit:contain;flex:none} .mod b{display:block;font-family:var(--display);font-size:.96rem;margin-bottom:.2rem} .mod span{display:block;font-size:.76rem;color:var(--tenue);line-height:1.45} .mod .mod__cl{display:inline-flex;gap:.25rem;margin-top:.35rem} .mod .mod__cl i{font-style:normal;font-family:var(--display);font-weight:800;font-size:.62rem; width:17px;height:17px;display:grid;place-items:center;border-radius:4px; background:var(--ciano);color:#0B0D10} .scelta__nota{margin-top:1.1rem;font-size:.78rem;color:var(--tenue-2);line-height:1.5} @media(max-width:620px){.scelta__opz{grid-template-columns:1fr 1fr}.chip span{display:none}} /* ============ CATALOGO ESTINTORI ============ */ .indice-mod{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1.4rem,3vh,2rem)} .indice-mod a{font-family:var(--display);font-weight:700;font-size:.82rem; padding:.42rem .8rem;border:1px solid var(--bordo);border-radius:999px; color:var(--tenue);text-decoration:none;transition:border-color var(--t-fast),color var(--t-fast)} .indice-mod a:hover{border-color:var(--fuoco);color:var(--fuoco)} .schede{display:grid;gap:clamp(1rem,2.4vw,1.6rem)} @media(min-width:900px){.schede{grid-template-columns:1fr 1fr}} .scheda{background:var(--fondo-3);border:1px solid var(--bordo);border-radius:var(--r); padding:clamp(1.1rem,2.4vw,1.6rem);scroll-margin-top:110px} .scheda__testa{display:flex;gap:clamp(.9rem,2vw,1.3rem);align-items:flex-start} .scheda__testa>img{width:clamp(74px,11vw,104px);height:auto;flex:none} .scheda h3{font-size:clamp(1.1rem,1rem + .4vw,1.35rem);margin-bottom:.45rem;color:var(--inchiostro)} .scheda__cl{font-size:.78rem;color:var(--tenue);display:flex;align-items:center; gap:.5rem;flex-wrap:wrap;margin-bottom:.85rem} .classi{display:inline-flex;gap:.25rem} .classi i{font-style:normal;font-family:var(--display);font-weight:800;font-size:.66rem; width:19px;height:19px;display:grid;place-items:center;border-radius:5px; /* testo scuro, non bianco: bianco su arancione non arriva a 4,5:1 in nessuno dei due temi, nero sì (6,1:1) */ background:var(--arancio);color:#0B0D10} /* Etichetta sopra, valore sotto: due colonne qui non stanno, perché la scheda è larga meno di metà pagina e i valori sono lunghi («Azoto (N₂) – pressurizzazione esterna, pressione permanente»). Nome proprio: «dato» era già preso dalla pagina contatti. */ .specs{display:grid;gap:.55rem} .spec{font-size:.82rem;line-height:1.5;padding-bottom:.5rem;border-bottom:1px solid var(--bordo)} .spec dt{font-family:var(--display);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; color:var(--tenue-2);margin-bottom:.12rem} .spec dd{color:var(--inchiostro);margin:0} .impieghi{margin-top:.9rem} .impieghi h4{font-family:var(--display);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--tenue-2);margin-bottom:.4rem} .impieghi ul{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;padding:0;margin:0} .impieghi li{font-size:.72rem;color:var(--tenue);border:1px solid var(--bordo); border-radius:999px;padding:.16rem .55rem} .scheda__comp{margin-top:1.1rem;border-top:1px solid var(--bordo);padding-top:.9rem} .scheda__comp summary{cursor:pointer;font-family:var(--display);font-weight:700; font-size:.84rem;color:var(--fuoco);list-style:none} .scheda__comp summary::-webkit-details-marker{display:none} .scheda__comp summary::before{content:'+ ';font-weight:800} .scheda__comp[open] summary::before{content:'– '} /* la tabella scorre dentro il suo riquadro: la pagina non si allarga mai */ .tab-wrap{overflow-x:auto;margin-top:.8rem;-webkit-overflow-scrolling:touch} .tab-comp{width:100%;border-collapse:collapse;font-size:.78rem;min-width:330px} .tab-comp th{text-align:left;font-family:var(--display);font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;color:var(--tenue-2);padding:.4rem .5rem;border-bottom:1px solid var(--bordo)} .tab-comp td{padding:.4rem .5rem;border-bottom:1px solid var(--bordo);color:var(--tenue);vertical-align:top} .tab-comp td:nth-child(2){color:var(--inchiostro)} .tab-comp .num{color:var(--arancio-t);font-weight:700;width:2.2rem} .scheda__nota{margin-top:.8rem;font-size:.74rem;line-height:1.5;color:var(--tenue-2); border-left:2px solid var(--arancio-t);padding-left:.6rem} /* legenda delle classi di fuoco sotto i risultati del selettore */ .scelta__legenda{margin-top:.9rem;font-size:.76rem;color:var(--tenue-2);line-height:1.6} .scelta__legenda b{color:var(--inchiostro)}