, quindi lo spazio va riservato all'ultima sezione dentro main, non a un fratello diretto. --- */ /* il footer non usa piu' il raccordo a onda: ha i crinali */ /* nessuno spaziatore prima del footer: i crinali occupano spazio proprio */ /* fra due sezioni scure il profilo non si vede: e' corretto cosi', la continuita' la da' il colore */ /* --- Barra "riprendi il preventivo" --- */ .quote-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--accent-light); border: 1px solid var(--accent); font-size: 0.9rem; font-weight: 500; color: var(--text); } .quote-resume span { flex: 1 1 auto; } .quote-resume button { font-family: inherit; font-size: 0.85rem; font-weight: 600; padding: 8px 16px; border-radius: 50px; cursor: pointer; border: 1px solid transparent; transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .quote-resume-yes { background: var(--accent); color: var(--on-accent); } .quote-resume-yes:hover { background: var(--accent-dark); } .quote-resume-no { background: transparent; color: var(--text-secondary); border-color: var(--border); } .quote-resume-no:hover { color: var(--text); border-color: var(--text-secondary); } /* --- Referenze --- */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; text-align: left; margin-top: 8px; } .testimonial { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); } .testimonial blockquote { font-size: 0.98rem; line-height: 1.7; color: var(--text); margin-bottom: 16px; quotes: '\201C' '\201D'; } .testimonial blockquote::before { content: open-quote; color: var(--accent); font-size: 1.6em; line-height: 0; vertical-align: -0.28em; margin-right: 2px; } .testimonial figcaption { font-size: 0.85rem; line-height: 1.45; } .testimonial figcaption strong { display: block; color: var(--text); } .testimonial figcaption span { color: var(--text-secondary); } .served-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin-top: 8px; } .served-list a { display: inline-block; padding: 9px 18px; border-radius: 50px; border: 1px solid var(--accent); background: var(--accent-light); color: var(--accent-text); font-size: 0.88rem; font-weight: 600; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .served-list a:hover { background: var(--accent); color: var(--on-accent); } /* --- Chip di stile: icona a tratto al posto dell'emoji --- */ .style-chip .style-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; color: var(--accent-text); transition: color 0.25s var(--ease); } .style-chip .style-icon svg { width: 19px; height: 19px; } .style-chip.checked .style-icon { color: var(--primary-text); } .style-chip:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* --- Intestazione di settore con la propria fotografia --- */ .page-header.has-foto { background-color: var(--navy-900); background-image: linear-gradient(180deg, rgba(6,22,38,0.82) 0%, rgba(6,22,38,0.62) 42%, rgba(6,22,38,0.88) 100%), radial-gradient(90% 70% at 50% 55%, rgba(8,26,42,0.55) 0%, transparent 78%), var(--foto); background-size: cover, cover, cover; background-position: center, center, center 55%; background-repeat: no-repeat; } @media (max-width: 900px) { .page-header.has-foto { background-image: linear-gradient(180deg, rgba(6,22,38,0.84) 0%, rgba(6,22,38,0.68) 42%, rgba(6,22,38,0.90) 100%), radial-gradient(110% 76% at 50% 55%, rgba(8,26,42,0.60) 0%, transparent 80%), var(--foto-s); } } /* parallasse lenta, come hero e fascia */ @supports (animation-timeline: scroll()) { .page-header.has-foto { animation: fotoDrift linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; } } @keyframes fotoDrift { from { background-position: center, center, center 48%; } to { background-position: center, center, center 66%; } } @media (prefers-reduced-motion: reduce) { .page-header.has-foto { animation: none !important; } } /* ========================================================================== PANNELLO WHATSAPP Si apre sopra al pulsante flottante. Il messaggio e' gia' scritto: l'ostacolo da togliere e' "cosa scrivo?", non "dove clicco". ========================================================================== */ .wa-panel { position: fixed; right: 24px; bottom: 96px; z-index: 1000; width: min(340px, calc(100vw - 32px)); border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(6,22,38,0.18), 0 40px 80px rgba(6,22,38,0.16); opacity: 0; transform: translateY(12px) scale(0.97); transform-origin: 100% 100%; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); } .wa-panel.is-open { opacity: 1; transform: translateY(0) scale(1); } .wa-panel[hidden] { display: none; } .wa-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: #075e54; color: #fff; } .wa-avatar { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; } .wa-avatar svg { width: 21px; height: 21px; } .wa-head-text { flex: 1; line-height: 1.3; min-width: 0; } .wa-head-text strong { display: block; font-size: 0.95rem; } .wa-head-text span { font-size: 0.78rem; color: rgba(255,255,255,0.78); } .wa-close { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--ease); } .wa-close:hover { background: rgba(255,255,255,0.28); } .wa-status { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 0.78rem; background: var(--bg-alt); border-bottom: 1px solid var(--border); color: var(--text-secondary); } .wa-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .wa-status.is-open .wa-dot { background: #25d366; } .wa-status.is-closed .wa-dot { background: #b9a24a; } .wa-body { padding: 14px 16px 16px; } .wa-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; } .wa-choice { font-family: inherit; font-size: 0.79rem; font-weight: 500; padding: 7px 12px; border-radius: 50px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .wa-choice:hover { color: var(--text); border-color: var(--text-light); } .wa-choice.is-on { background: var(--accent-light); border-color: var(--accent); color: var(--accent-text); font-weight: 600; } .wa-label { display: block; font-size: 0.76rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; } .wa-text { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); color: var(--text); font-size: 0.88rem; line-height: 1.5; resize: vertical; min-height: 68px; } .wa-text:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24,91,139,0.14); } .wa-send { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 12px 18px; border-radius: 50px; background: #25d366; color: #06251a; font-weight: 700; font-size: 0.9rem; transition: background 0.22s var(--ease), transform 0.22s var(--ease); } .wa-send svg { width: 17px; height: 17px; } .wa-send:hover { background: #1fbe5a; transform: translateY(-1px); } .wa-hours { margin-top: 10px; font-size: 0.73rem; text-align: center; color: var(--text-light); } /* Su schermi piccoli il pannello occupa la larghezza utile e sta piu' in alto */ @media (max-width: 480px) { .wa-panel { right: 12px; left: 12px; width: auto; bottom: 88px; } } @media (prefers-reduced-motion: reduce) { .wa-panel { transition: none; } .wa-send:hover { transform: none; } } /* ========================================================================== TIPOGRAFIA — due voci Montserrat regge il testo, Archivo i titoli grandi: geometrica contro grottesca, tonda contro squadrata. Il contrasto si vede senza che la lettura ne risenta. ========================================================================== */ :root { --font-display: 'Archivo', 'Montserrat', sans-serif; } .hero h1, .page-header h1, .section-title, .band h2, .cta-banner h2, .quote-success h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.022em; /* le righe si distribuiscono invece di andare a capo come capita */ text-wrap: balance; } .hero h1 { letter-spacing: -0.03em; } /* Anche i titoli minori guadagnano dall'equilibrio delle righe */ h3, h4, .section-subtitle, .testimonial blockquote { text-wrap: pretty; } /* Le etichette di sezione restano Montserrat: sono piccole e spaziate, la grottesca stretta le renderebbe meno leggibili. */ .section-label { font-family: var(--font); } /* ========================================================================== TRANSIZIONI FRA PAGINE Il sito ha 76 pagine fittamente collegate: senza queste, ogni link e' un ricaricamento freddo con lampo bianco e scroll che riparte. Con queste, navbar e footer restano fermi e il contenuto si sostituisce. Dove non e' supportato non cambia nulla: navigazione normale. ========================================================================== */ @view-transition { navigation: auto; } /* Gli elementi permanenti non devono ridisegnarsi a ogni pagina */ .navbar { view-transition-name: navbar; } .footer { view-transition-name: footer; } .whatsapp-float{ view-transition-name: wa; } .back-to-top { view-transition-name: btt; } .scroll-progress { view-transition-name: progresso; } /* Il corpo entra da sotto, appena */ ::view-transition-old(root) { animation: vtEsce 0.22s cubic-bezier(0.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: vtEntra 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes vtEsce { to { opacity: 0; transform: translateY(-8px); } } @keyframes vtEntra { from { opacity: 0; transform: translateY(12px); } } /* Gli elementi con nome proprio non si dissolvono: restano dove sono */ ::view-transition-group(navbar), ::view-transition-group(footer), ::view-transition-group(wa), ::view-transition-group(btt), ::view-transition-group(progresso) { animation-duration: 0.001s; } /* L'intestazione della landing cresce dalla card del settore da cui si arriva */ .page-header.has-foto { view-transition-name: intestazione; } ::view-transition-old(intestazione), ::view-transition-new(intestazione) { animation-duration: 0.36s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } /* ========================================================================== CONTAINER QUERIES Le card si adattano allo spazio che hanno, non alla larghezza dello schermo: la stessa card funziona in griglia da quattro, da due o in colonna stretta senza breakpoint dedicati. ========================================================================== */ .sectors-grid, .services-grid, .about-grid, .testimonials-grid, .process-list { container-type: inline-size; } .sector-card, .service-card, .about-card, .testimonial, .process-step { container-type: inline-size; } @container (max-width: 230px) { .sector-card { flex-direction: column; align-items: flex-start; gap: 10px; } .sector-card .sector-sub { display: none; } } @container (max-width: 260px) { .service-card { padding: 26px 20px; } .service-card h3 { font-size: 1.08rem; } .process-step { flex-direction: column; gap: 10px; } } @container (min-width: 420px) { .about-card { text-align: left; } .about-card .about-icon { margin-left: 0; } } /* ========================================================================== MICRO-INTERAZIONI Tre soltanto, e tutte legate a un'azione dell'utente: il difetto da evitare e' il movimento che non significa niente. ========================================================================== */ /* 1. Il totale reagisce quando cambia davvero */ .summary-total .total-value { transition: color 0.3s var(--ease); } .summary-total.is-changed .total-value { color: var(--accent-text); } /* 2. Il pulsante assorbe il click invece di ignorarlo */ .btn:active, .quote-next:active, .wa-send:active { transform: translateY(1px) scale(0.985); } /* 3. Le card di settore si sollevano dal lato da cui arriva il puntatore */ .sector-card { transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), border-color 0.32s var(--ease); } .sector-card:hover { transform: translateY(-3px) rotate(var(--inclina, 0deg)); } @media (prefers-reduced-motion: reduce) { .summary-total .total-value { transition: none; } .btn:active, .quote-next:active, .wa-send:active { transform: none; } .sector-card:hover { transform: none; } } /* --- Fascia intermedia nelle landing: una pausa fra due muri di testo. Ritaglio diverso della stessa fotografia, nessun asset in piu'. --- */ /* La fascia fotografica dei luoghi porta lo stesso vestito di quella dei settori: stessi veli, stessa altezza, stesso scorrimento lento. Due nomi e una regola sola — duplicarla voleva dire vederle divergere al primo ritocco fatto su una delle due. */ .sector-band, .luogo-fascia { height: clamp(180px, 26vw, 320px); background-color: var(--navy-900); background-image: linear-gradient(180deg, rgba(6,22,38,0.55) 0%, rgba(6,22,38,0.30) 45%, rgba(6,22,38,0.60) 100%), var(--foto); background-size: cover, cover; background-position: center, center 22%; background-repeat: no-repeat; } @media (max-width: 900px) { .sector-band, .luogo-fascia { background-image: linear-gradient(180deg, rgba(6,22,38,0.55) 0%, rgba(6,22,38,0.32) 45%, rgba(6,22,38,0.62) 100%), var(--foto-s); } } @supports (animation-timeline: view()) { .sector-band, .luogo-fascia { animation: bandaScorre linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } @keyframes bandaScorre { from { background-position: center, center 10%; } to { background-position: center, center 42%; } } @media (prefers-reduced-motion: reduce) { .sector-band, .luogo-fascia { animation: none !important; } } /* ========================================================================== SETTORI IN HOME SU SCHERMO STRETTO In colonna singola le 13 card occupavano 2,2 schermate: troppo da scorrere per una sezione di passaggio. Diventano un nastro orizzontale su due righe — 7 colonne invece di 13 righe — con aggancio allo scorrimento. Vale solo per la home: nella pagina indice l'elenco verticale e' il contenuto, e li' ha senso restare com'e'. ========================================================================== */ @media (max-width: 768px) { #settori .sectors-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: none; grid-auto-columns: 68%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 24px; /* il nastro esce dal contenitore e tocca i bordi dello schermo */ margin-inline: -24px; padding-inline: 24px; padding-block: 4px 14px; scrollbar-width: none; } #settori .sectors-grid::-webkit-scrollbar { display: none; } /* Mentre il nastro scorre da solo l'aggancio alle schede lo frenerebbe a scatti: si spegne, e torna appena il nastro passa in mano a chi legge. */ #settori .sectors-grid.scorre-solo { scroll-snap-type: none; } #settori .sector-card { scroll-snap-align: start; min-width: 0; } #settori .sector-card .sector-name { overflow-wrap: anywhere; } /* Sfumatura a destra: dice che il nastro continua, senza aggiungere frecce */ #settori .sectors-wrap { position: relative; } #settori .sectors-wrap::after { content: ''; position: absolute; top: 0; right: -24px; bottom: 14px; width: 44px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg) 78%); } #settori .sectors-wrap.is-end::after { opacity: 0; transition: opacity 0.25s var(--ease); } /* Il suggerimento compare solo finche' non si e' scorso */ #settori .sectors-hint { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 4px; font-size: 0.78rem; color: var(--text-light); transition: opacity 0.3s var(--ease); } #settori .sectors-wrap.is-scrolled ~ .sectors-hint { opacity: 0; } #settori .sectors-hint svg { width: 15px; height: 15px; } } @media (min-width: 769px) { #settori .sectors-hint { display: none; } } /* ========================================================================== CRINALI SOPRA IL FOOTER Al posto dell'onda piatta: tre profili di montagna sovrapposti sopra la fotografia della valle, che si scoprono a velocita' diverse mentre la sezione entra nel viewport. Il movimento e' legato allo scorrimento, non e' un ciclo: si ferma quando ci si ferma. ========================================================================== */ .footer { position: relative; padding-top: 0; } .footer-ridges { position: relative; height: clamp(130px, 17vw, 240px); margin-bottom: 44px; overflow: hidden; /* la valle sotto, quasi spenta: da' materia, non soggetto */ background-color: var(--navy-900); background-image: /* Il velo parte CHIUSO — navy pieno — e si apre sulla fotografia nei primi quaranta pixel: cosi' il blocco dei crinali non comincia mai con un colore diverso da quello che ha sopra, da qualsiasi sezione arrivi. Prima partiva al 50% e la foto si accendeva di colpo. */ linear-gradient(180deg, var(--navy-900) 0%, rgba(6,22,38,0.74) 9%, rgba(6,22,38,0.50) 20%, rgba(6,22,38,0.82) 52%, var(--navy-900) 86%, var(--navy-900) 100%), image-set(url('/img/hero/valle-1600.webp') type('image/webp'), url('/img/hero/valle-1400.jpg') type('image/jpeg')); background-size: cover, cover; background-position: center, center 30%; background-repeat: no-repeat; } .footer-ridges span { position: absolute; left: 0; right: 0; bottom: 0; display: block; background-repeat: no-repeat; background-position: bottom center; background-size: 100% 100%; will-change: transform; } /* Tre profili: il piu' lontano e' basso e chiaro, il piu' vicino alto e quasi del colore del footer, cosi' il passaggio non ha un bordo. */ .fr-lontano { height: 62%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 76 L86 62 L142 70 L238 44 L318 66 L404 52 L472 68 L566 38 L648 64 L742 50 L826 72 L918 46 L1002 68 L1094 54 L1178 70 L1268 42 L1352 66 L1440 56 L1440 120 L0 120 Z' fill='%2316344a'/%3E%3C/svg%3E"); } .fr-medio { height: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 88 L64 70 L128 82 L206 48 L268 76 L352 58 L430 84 L512 40 L594 74 L668 60 L748 86 L832 52 L912 78 L996 46 L1078 80 L1160 62 L1244 86 L1330 54 L1400 76 L1440 66 L1440 120 L0 120 Z' fill='%230f2739'/%3E%3C/svg%3E"); } .fr-vicino { height: 38%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 96 L92 84 L166 94 L248 72 L336 92 L418 80 L500 98 L588 68 L672 90 L760 78 L844 96 L930 74 L1014 92 L1102 82 L1186 98 L1274 76 L1360 92 L1440 84 L1440 120 L0 120 Z' fill='%23061626'/%3E%3C/svg%3E"); } /* I crinali si avvicinano mentre si scorre. Ogni strato sale di quel tanto in piu' del precedente — il piu' vicino corre, quello in fondo quasi sta fermo: e' la differenza fra i due che fa la profondita'. Insieme al movimento crescono un poco, ancorati alla base: una montagna che si avvicina si alza sull'orizzonte, non scivola di lato. Tutto e' legato alla posizione nella pagina, non al tempo: scorrendo piano si muovono piano, scorrendo di scatto scattano anche loro, e tornando indietro si allontanano. Si usano 'translate' e 'scale' separati e non 'transform': cosi' restano una animazione sola, e due animazioni sullo stesso elemento con linee del tempo diverse si annullerebbero. */ @supports (animation-timeline: view()) { .footer-ridges span { transform-origin: bottom center; animation: crinaleAvvicina linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; } .fr-lontano { --sale: 26px; --da: 1; --a: 1.015; } .fr-medio { --sale: 66px; --da: 1.02; --a: 1.07; } .fr-vicino { --sale: 108px; --da: 1.05; --a: 1.14; } } @keyframes crinaleAvvicina { from { translate: 0 var(--sale, 40px); scale: var(--da, 1); } to { translate: 0 0; scale: var(--a, 1); } } /* Su schermo stretto i profili sono piu' bassi e il movimento piu' corto: la fascia non deve mangiarsi mezzo schermo. */ @media (max-width: 640px) { .footer-ridges { height: clamp(96px, 26vw, 150px); margin-bottom: 34px; } /* la cresta intera schiacciata in 375px diventa un dente di sega: ne mostro un tratto, cosi' le cime restano larghe come su schermo grande */ .footer-ridges span { background-size: 260% 100%; background-position: bottom left; } .fr-medio { background-position: bottom 0 left -30%; } .fr-vicino { background-position: bottom 0 left -62%; } .fr-lontano { --sale: 14px; --da: 1; --a: 1.01; } .fr-medio { --sale: 34px; --da: 1.015; --a: 1.05; } .fr-vicino { --sale: 56px; --da: 1.04; --a: 1.10; } } @media (prefers-reduced-motion: reduce) { .footer-ridges span { animation: none !important; translate: none !important; scale: none !important; } } /* ========================================================================== PAROLE SOTTOLINEATE Il tratto si disegna da sinistra quando la frase arriva in posizione di lettura. Usa background-size e non un ::after, cosi' regge anche quando la parola va a capo. Dove la funzione non c'e', il tratto resta disegnato: nessuno vede una sottolineatura mancante. ========================================================================== */ /* Il colore del tratto e' una proprieta' registrata, cosi' si puo' animare con una sfumatura invece che a scatti. */ @property --kw-tratto { syntax: ''; inherits: false; initial-value: #86b55d; } .kw { background-image: linear-gradient(var(--kw-tratto), var(--kw-tratto)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; padding-bottom: 0.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; /* Una sola animazione su questo elemento, e a tempo normale. Prima il tratto si disegnava seguendo lo scorrimento: bello, ma bastava aggiungere una seconda animazione perche' le due linee del tempo si annullassero e il tratto sparisse del tutto. Meglio una sottolineatura che c'e' sempre e respira, che una che a volte non compare. */ animation: kwPulsa 4.5s ease-in-out infinite; } /* Sta nel verde di casa per quasi tutto il tempo, poi schiarisce un attimo: un respiro che porta l'occhio sulla parola, non un lampeggio. */ @keyframes kwPulsa { 0%, 58%, 100% { --kw-tratto: #86b55d; } 76% { --kw-tratto: #c3e79b; } } /* Su fondo scuro il tratto va un filo piu' spesso per non sparire. */ .section-dark .kw, .hero .kw { background-size: 100% 3px; } @media (prefers-reduced-motion: reduce) { .kw { animation: none !important; } } /* ========================================================================== MARCHIO NELLA BARRA In cima alla pagina il marchio grande e' gia' nella hero: ripeterlo in alto a sinistra e' una doppia. Compare scorrendo e torna a sparire quando si risale. Solo dove la hero impila e il marchio sta al centro. ========================================================================== */ @media (max-width: 1024px) { .navbar .nav-logo { transition: opacity .45s ease, transform .45s ease, visibility 0s; } .navbar.logo-nascosto .nav-logo { opacity: 0; transform: translateY(-8px); visibility: hidden; /* toglie anche il fuoco da tastiera */ pointer-events: none; transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; } } @media (prefers-reduced-motion: reduce) { .navbar .nav-logo, .navbar.logo-nascosto .nav-logo { transition: opacity .01s; transform: none; } } /* ========================================================================== FOOTER SU SCHERMO STRETTO Sette voci piu' sei piu' quattro in colonna unica facevano scorrere troppo: i tre gruppi si affiancano a due a due. ========================================================================== */ @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; } .footer-brand { grid-column: 1 / -1; } .footer-grid > div:not(.footer-brand) { min-width: 0; } .footer-grid h4 { margin-bottom: 10px; } .footer-grid ul { line-height: 1.5; } .footer-grid ul li { margin-bottom: 8px; } /* l'indirizzo di posta non sta in mezza larghezza e si spezzava a meta' parola: l'ultimo gruppo prende tutta la riga */ .footer-grid > div:last-child { grid-column: 1 / -1; } .footer-grid ul a { overflow-wrap: break-word; } } @media (max-width: 360px) { .footer-grid { grid-template-columns: 1fr; } /* sotto i 360 due colonne strozzano */ .footer-brand { grid-column: auto; } } /* ========================================================================== WHATSAPP: ENTRATA RITARDATA Non compare col resto della pagina: si presenta dopo tre secondi, quando chi legge ha gia' messo gli occhi sul contenuto. Fatto con un'animazione e non con una classe messa dal JS di proposito: se uno script piu' a monte si rompesse, il bottone comparirebbe lo stesso. Il ritardo vive nel foglio di stile, il JS lo azzera soltanto dopo la prima volta. E' un collegamento normale: senza JS la regola non si applica affatto (manca .js) e il bottone si vede da subito, come prima. Si muove con 'translate' e 'scale' separati e non con 'transform', perche' quello serve gia' all'ingrandimento al passaggio del puntatore: cosi' i due non si sovrascrivono. ========================================================================== */ .js .whatsapp-float { animation: waEntra 0.5s var(--ease) 3s both; } @keyframes waEntra { from { opacity: 0; visibility: hidden; translate: 0 14px; scale: 0.7; } to { opacity: 1; visibility: visible; translate: none; scale: 1; } } /* Gia' visto durante questa visita: cambiando pagina si rivede subito, invece di sparire e riapparire ogni volta. */ .js .whatsapp-float.wa-subito { animation-delay: 0s; animation-duration: 0.28s; } @media (prefers-reduced-motion: reduce) { .js .whatsapp-float { animation: waEntraFermo 0.01s linear 3s both; } .js .whatsapp-float.wa-subito { animation-delay: 0s; } } @keyframes waEntraFermo { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } } /* ========================================================================== MODALITA' DI PAGAMENTO Le due schede riprendono l'aspetto di quelle del tipo di sito: e' la stessa decisione, presa un passo prima. Sono due sole, quindi stanno affiancate anche su schermo stretto. ========================================================================== */ .pay-mode-grid { display: grid; /* minmax(0,1fr) e non 1fr: con 1fr la colonna di "Abbonamento", che e' una parola sola e lunga, si prendeva piu' spazio dell'altra */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; } .pay-card { text-align: center; } /* Niente nowrap qui: "da CHF 105.90/mese" e' piu' lungo di mezza scheda su telefono e usciva dal bordo. Va a capo, e il periodo resta attaccato all'importo perche' spezzarli in due righe non si legge. */ .pay-card .type-price { white-space: normal; overflow-wrap: break-word; line-height: 1.3; } .pay-card .type-price .pm { white-space: nowrap; } .pay-card-note { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--text-light); text-wrap: pretty; } .pay-card.active .pay-card-note { color: var(--text); } @media (max-width: 480px) { /* Restano affiancate anche sul telefono: impilarle allungava la pagina, e su schermo stretto ogni schermata in piu' e' uno scorrimento in piu'. Sparisce la frase di contorno, restano nome e prezzo, che sono quello su cui si decide. */ .pay-mode-grid { gap: 8px; } .pay-card-note { display: none; } .pay-card { padding-inline: 6px; } .pay-card .type-icon { width: 40px; height: 40px; } .pay-card .type-icon svg { width: 20px; height: 20px; } /* "Einmalzahlung" e' una parola sola larga 119 px dove ce ne sono 96: senza un punto in cui spezzarsi usciva dalla scheda. La sillabazione tedesca la divide correttamente; se il browser non ce l'ha, il testo va a capo lo stesso, senza trattino, ma dentro il bordo. */ .pay-card h4 { font-size: 0.85rem; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .pay-card .type-price { font-size: 0.78rem; } } /* Riga sotto la cifra grande: dice per quanti mesi e quanto fa in tutto, cosi' la rata non sembra un prezzo pieno. */ .summary-rata-nota { margin-top: 4px; font-size: 0.82rem; color: var(--text-light); text-align: right; } .quote-summary.is-abbonamento .summary-total .total-value { white-space: nowrap; } /* ========================================================================== PREVENTIVO SU SCHERMO STRETTO Prima c'erano due cose che dicevano lo stesso prezzo: una pastiglia che seguiva lo scorrimento e il riquadro del riepilogo, che stava sotto al modulo e obbligava a scendere per leggere il dettaglio. Ora il riquadro e' una barra appoggiata in fondo allo schermo: la cifra si vede sempre, il dettaglio si apre verso l'alto con un tocco. Nessuno deve scorrere per sapere quanto costa. ========================================================================== */ @media (max-width: 768px) { .quote-floating-total { display: none !important; } /* la barra la sostituisce */ .quote-summary { position: fixed; /* su schermo largo il riquadro sta appiccicato con un top: lasciandolo qui, con top e bottom insieme l'altezza si stira a tutto lo schermo */ top: auto; left: 0; right: 0; bottom: 0; z-index: 900; margin: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(6, 22, 38, 0.28); max-height: 82vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0); /* fuori dalla sezione del preventivo la barra non ha motivo di stare li': scende. Si muove con 'translate' e non con 'transform', che serve gia' alla comparsa in scorrimento del riquadro. */ translate: 0 115%; transition: translate 0.32s var(--ease); } .quote-summary.in-vista { translate: none; } @media (prefers-reduced-motion: reduce) { .quote-summary { transition: translate 0.01s; } } /* chiusa: si vede solo quanto costa */ .quote-summary .quote-summary-header, .quote-summary .quote-summary-footer, .quote-summary .summary-line { display: none; } .quote-summary.aperta .quote-summary-header, .quote-summary.aperta .quote-summary-footer, .quote-summary.aperta .summary-line { display: block; } .quote-summary.aperta .summary-line { display: flex; justify-content: space-between; } .quote-summary-body { overflow-y: auto; overscroll-behavior: contain; padding-top: 0; } .quote-summary:not(.aperta) .quote-summary-body { padding-block: 0 6px; } .quote-summary:not(.aperta) .summary-total { border-top: 0; margin-top: 0; } /* la maniglia: tutta la riga superiore e' il bersaglio, non un'iconcina */ .quote-maniglia { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 16px 2px; border: 0; background: none; color: inherit; font: inherit; font-size: 0.78rem; opacity: 0.75; cursor: pointer; } .quote-maniglia::before { content: ''; width: 34px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.45; } .quote-maniglia .quote-maniglia-testo { position: absolute; left: -9999px; } /* il modulo non deve finire sotto la barra */ .quote-wrapper { padding-bottom: 132px; } } @media (min-width: 769px) { .quote-maniglia { display: none; } } /* ========================================================================== WHATSAPP SOPRA IL PREVENTIVO Sul modulo il pollice lavora in basso a destra, dove sta il bottone: li' si toglie di mezzo. Torna appena la sezione e' passata. ========================================================================== */ .whatsapp-float.wa-entrato { animation: none; opacity: 1; visibility: visible; } .whatsapp-float.wa-entrato.wa-lontano { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.8); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; } .whatsapp-float.wa-entrato { transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .whatsapp-float.wa-entrato, .whatsapp-float.wa-entrato.wa-lontano { transition: opacity 0.01s; transform: none; } } /* Anche il bottone per tornare su sparisce sul modulo del preventivo: la' sotto ci sono i pulsanti Indietro/Avanti e la barra del riepilogo. */ .back-to-top { transition: opacity 0.35s ease, visibility 0s; } .back-to-top.wa-lontano { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0s linear 0.35s; } @media (prefers-reduced-motion: reduce) { .back-to-top, .back-to-top.wa-lontano { transition: opacity 0.01s; } } /* ========================================================================== TELEFONI STRETTI (320-380 px) Il modulo del preventivo chiedeva piu' spazio di quanto ce ne fosse: la riga dei pulsanti Indietro/Avanti non scende sotto i 270 px e, sommati i 24 px di margine interno per lato, la colonna ne pretendeva 318 dove lo schermo ne offre 272. Risultato: la pagina scorreva di lato. ========================================================================== */ @media (max-width: 400px) { /* la colonna non puo' piu' allargarsi oltre lo spazio disponibile: 'minmax(0, 1fr)' invece di '1fr', che invece cede al contenuto */ .quote-wrapper { grid-template-columns: minmax(0, 1fr); } .quote-form { padding-inline: 14px; } /* I pulsanti Indietro/Avanti non hanno la classe .btn: si prendono per quello che sono, altrimenti la regola non li tocca e continuano a spingere il modulo fuori dallo schermo. */ .quote-nav { gap: 8px; } .quote-nav > button, .quote-nav > a, .quote-nav .quote-prev, .quote-nav .quote-next { padding-inline: 12px; font-size: 0.86rem; min-width: 0; flex: 0 1 auto; white-space: nowrap; } /* la barra del riepilogo sta dentro lo schermo anche qui */ .quote-summary .quote-summary-body { padding-inline: 14px; } .quote-summary .summary-total { gap: 8px; } .quote-summary .total-value { min-width: 0; } .quote-summary .summary-line .label { min-width: 0; overflow-wrap: anywhere; } /* "ab CHF 105.90/Monat" tenuto tutto su una riga non ci sta: qui puo' spezzarsi dopo CHF. L'importo e il periodo restano comunque insieme. */ .pay-card .type-price .pm { white-space: normal; } .pay-card .type-price { font-size: 0.76rem; } /* "247.80 CHF/Monat" accanto a "Pro Monat" non ci sta: la cifra scende di un poco e, se proprio non basta, etichetta e importo vanno su due righe */ .quote-summary .summary-total { flex-wrap: wrap; row-gap: 2px; } .quote-summary .total-label { font-size: 0.9rem; } .quote-summary .total-value { font-size: 1.55rem; } .quote-summary .total-value small { font-size: 0.52em; } } /* ========================================================================== PAROLE LUNGHE SU SCHERMO STRETTO Il tedesco compone parole che su un telefono sono piu' larghe della colonna ("Allgemeine Geschaeftsbedingungen", "Einmalzahlung"): senza un punto dove spezzarsi escono dal riquadro. La sillabazione le divide dove va divise; dove il browser non ha il dizionario, il ripiego le manda a capo comunque, senza trattino, ma dentro il bordo. Vale per tutte le lingue: 'hyphens: auto' agisce solo dove la lingua dichiarata nella pagina ha regole per farlo. ========================================================================== */ @media (max-width: 560px) { h1, h2, h3, h4, h5, .modal-content h2, .modal-content h3, .quote-step-title h3, .feature-label, .radio-label { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } } /* ========================================================================== STAMPA Un preventivo si stampa o si salva in PDF: e' il momento in cui il cliente lo porta a chi decide. Senza regole uscivano barra di navigazione, riepilogo appiccicato in fondo, bottone WhatsApp e cursore finto. Qui resta il contenuto, su carta bianca, con gli indirizzi dei collegamenti scritti per esteso: su carta un link non si puo' cliccare. ========================================================================== */ @media print { /* tutto quello che serve solo a schermo */ .navbar, .footer-ridges, .whatsapp-float, .wa-panel, .back-to-top, .quote-floating-total, .quote-maniglia, .sectors-hint, .cursore, .cursore-punto, .intro, .quote-nav, .quote-progress, .lang-switcher, .nav-toggle, .quote-bozza, .step-error, .hero-logo-wrapper { display: none !important; } /* niente animazioni ne' effetti: la carta e' ferma */ *, *::before, *::after { animation: none !important; transition: none !important; translate: none !important; scale: none !important; box-shadow: none !important; text-shadow: none !important; } html, body { background: #fff !important; color: #000 !important; font-size: 11pt; } .section-dark, .hero, .footer, .band, .bg-deep { background: #fff !important; color: #000 !important; background-image: none !important; } .section-dark *, .hero *, .footer *, .band * { color: #000 !important; } section { padding: 0 0 12pt !important; } .container { max-width: none; padding: 0 !important; } /* Il riepilogo torna nel flusso: appiccicato in fondo allo schermo finirebbe sopra il testo o su una pagina da solo. */ .quote-summary { position: static !important; translate: none !important; max-height: none !important; border: 1pt solid #000 !important; page-break-inside: avoid; } .quote-summary .quote-summary-header, .quote-summary .quote-summary-footer, .quote-summary .summary-line { display: block !important; } .quote-summary .summary-line { display: flex !important; justify-content: space-between; } /* tutti i passi visibili: su carta non si preme "Avanti" */ .quote-form .quote-step { display: block !important; } .quote-wrapper { display: block !important; padding-bottom: 0 !important; } /* non spezzare a meta' quello che si legge come un blocco unico */ .sector-card, .service-card, .about-card, .portfolio-card, .quote-step, .faq-item, figure, table { page-break-inside: avoid; } h1, h2, h3, h4 { page-break-after: avoid; } /* su carta un indirizzo va letto, non cliccato */ a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; } a[href^="#"]::after, .nav-logo a::after, a[href^="/"]::after { content: ""; } img { max-width: 100% !important; page-break-inside: avoid; } .kw { background-image: none !important; font-weight: 700; } } /* ========================================================================== BANDIERINA DEL MOESANO Sta sempre in vista, anche da spenta: dice che il territorio lo incentiviamo, e chi e' della valle capisce subito che vale per lui. ========================================================================== */ .summary-moesano { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 12px; padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); } .summary-moesano:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); } .summary-moesano:has(input:checked) { border-style: solid; background: color-mix(in srgb, var(--accent) 18%, transparent); } .summary-moesano input { margin-top: 2px; accent-color: var(--accent); flex: none; } .summary-moesano .sm-testo { display: flex; flex-direction: column; line-height: 1.3; } .summary-moesano .sm-testo strong { font-size: 0.9rem; } .summary-moesano .sm-sotto { font-size: 0.78rem; opacity: 0.8; } /* dentro il riquadro scuro del riepilogo il tratteggio deve vedersi */ .quote-summary .summary-moesano { border-color: var(--accent); } @media (max-width: 400px) { .summary-moesano { padding: 8px 10px; margin: 8px 0 10px; } .summary-moesano .sm-sotto { display: none; } } /* Senza JavaScript le FAQ non avrebbero modo di aprirsi: le risposte restano visibili. Chiuderle e' un progresso, non un requisito. */ html:not(.js) .faq-answer { max-height: none; } /* ========================================================================== SOTTOTITOLI DENTRO UN PASSO Consegna e manutenzione stavano in due passi separati: due scelte da un clic ciascuna, una dopo l'altra, che allungavano il percorso senza dare niente in cambio. Uniti in uno, servono due intestazioni piccole perche' restino due decisioni distinte e non un elenco unico confuso. ========================================================================== */ .quote-sub { margin: 0 0 10px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light); } /* fra il primo gruppo e il secondo serve una pausa, non una riga */ .radio-group + .quote-sub { margin-top: 28px; } /* Due righe accanto al bottone finale. Chi e' arrivato in fondo ha investito qualche minuto: e' il momento in cui un dubbio non detto ("e adesso chi mi chiama?") costa piu' caro. Meglio rispondergli prima che se lo chieda. */ .quote-fiducia { display: none; } .quote-nav.e-ultimo .quote-fiducia { display: block; margin: 0 0 12px; font-size: 0.84rem; line-height: 1.45; color: var(--text-light); text-wrap: pretty; } .quote-fiducia strong { color: var(--accent-text); } @media (min-width: 769px) { /* accanto ai pulsanti la riga sta a sinistra, non sotto */ .quote-nav.e-ultimo { flex-wrap: wrap; } .quote-nav.e-ultimo .quote-fiducia { flex: 1 1 260px; margin-bottom: 0; align-self: center; } } /* ========================================================================== PASSI DEL NUMERO DI PAGINE Il cursore da 3 a 15 chiede mira: col dito, centrare "7" su trecento pixel e' un tiro al bersaglio. I due pulsanti danno un passo per volta; il cursore resta per chi vuole spostarsi in fretta. ========================================================================== */ .page-step { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--primary-text); font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s var(--ease), border-color 0.18s var(--ease); } .page-step:hover:not(:disabled) { background: var(--primary-light); border-color: var(--primary); } .page-step:active:not(:disabled) { transform: translateY(1px); } .page-step:disabled { opacity: 0.35; cursor: default; } /* Il bottone ne mostra 38, ma l'area che risponde al dito ne misura 46: 38 piu' 4 per lato. Sotto i 44 raccomandati il dito sbaglia, ed e' esattamente il problema che questi pulsanti risolvono — sarebbe curioso riproporlo in piccolo. */ .page-step::after { content: ''; position: absolute; inset: -4px; } .page-step { position: relative; } /* Il cursore e' un elemento flessibile: senza min-width:0 non scende sotto la propria misura naturale e, aggiunti i due pulsanti, spinge la riga fuori dallo schermo — sedici pixel di scorrimento laterale. */ .page-slider-wrap { flex-wrap: wrap; } .page-slider-wrap input[type="range"] { min-width: 0; } @media (max-width: 560px) { .page-slider-wrap { gap: 10px; } .page-step { width: 42px; height: 42px; } /* meno / cursore / piu' sulla prima riga, il conteggio sotto e centrato: su schermo stretto le quattro cose in fila non ci stanno */ .page-slider-wrap input[type="range"] { flex: 1 1 90px; } .page-slider-wrap .page-count { flex: 1 0 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .page-step, .page-step:active:not(:disabled) { transition: none; transform: none; } } /* ========================================================================== PIANI IN ABBONAMENTO Il listino mensile: tre schede, prezzo di listino sbarrato e prezzo Moesa accanto. Tutto il colore viene dalle variabili dei due poli, quindi la stessa marcatura regge sia su .section-light sia su .section-dark senza una sola regola duplicata. ========================================================================== */ /* ═══════════════════════════ «Abbonati ora» ═══ Il pulsante non porta da nessuna parte e non apre niente sotto di sé: **si trasforma**. Pulsante, campo e conferma stanno tutti e tre nella stessa casella, uno sopra l'altro, e la casella la misura il pulsante. Perché così e non con un `hidden` sul pulsante: nascondendolo la scheda si accorciava e tutto quello che sta sotto saltava. Qui il pulsante resta al suo posto — invisibile ma ingombrante — e il campo gli si appoggia sopra: nella scheda non si muove un pixel. Il campo esca sta FUORI dallo schermo, non a `display:none`: i programmi che compilano tutto ignorano quello che è nascosto in modo ovvio, e riempiono invece quello che sembra un campo vero. */ .abbonati { position: relative; margin-top: auto; } .abbonati__esca { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* La casella: la sua altezza è quella del pulsante, e non cambia mai. */ .abbonati__slot { position: relative; } .abbonati__via { width: 100%; } /* Aperto: il pulsante diventa invisibile ma tiene il posto. */ .abbonati.is-aperto .abbonati__via { visibility: hidden; } .abbonati__campo, .abbonati__fatto { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 8px; } .abbonati__campo[hidden] { display: none; } .abbonati__campo { animation: abb-apre 0.3s cubic-bezier(0.22, 1.2, 0.4, 1) both; } @keyframes abb-apre { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } } .abbonati__campo input[type="email"] { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 16px; font: 400 0.95rem/1 var(--font-body, inherit); color: var(--text, #0d202f); background: #ffffff; border: 1.5px solid var(--border, #d8e3ec); border-radius: 999px; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .abbonati__campo input[type="email"]:focus { border-color: var(--primary, #185b8b); box-shadow: 0 0 0 3px rgba(24, 91, 139, 0.18); } .abbonati__campo input[type="email"]:user-invalid { border-color: #c0563f; } .abbonati__invia { flex: 0 0 auto; width: 15%; min-width: 46px; height: 100%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary, #185b8b); color: #fff; border: 0; border-radius: 999px; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease; } .abbonati__invia svg { width: 20px; height: 20px; } .abbonati__invia:hover { background: var(--primary-dark, #0d3f65); transform: translateX(2px); } .abbonati__invia[disabled] { opacity: .55; cursor: default; transform: none; } /* Lo stato finale: ha la forma del pulsante, ma non è un pulsante — non si clicca e non prende il fuoco, perché non c'è più niente da fare. */ .abbonati__fatto { align-items: center; justify-content: center; gap: 9px; padding: 0 16px; font: 600 0.92rem/1.25 var(--font-body, inherit); text-align: center; color: #14532d; background: #e8f3de; border: 1.5px solid #bcd9a4; border-radius: 999px; animation: abb-fatto 0.4s cubic-bezier(0.22, 1.3, 0.4, 1) both; } .abbonati__fatto svg { width: 18px; height: 18px; flex: 0 0 auto; } @keyframes abb-fatto { 0% { opacity: 0; transform: scale(0.9); } 55% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } } .section-dark .abbonati__fatto { color: #dff0d0; background: rgba(134,181,93,.16); border-color: rgba(134,181,93,.45); } /* L'errore è raro e non deve allungare la scheda: si appoggia sotto la casella, sopra il margine che c'è già. */ .abbonati__esito { position: absolute; top: calc(100% + 6px); left: 2px; right: 2px; margin: 0; font-size: 0.78rem; line-height: 1.35; color: #c0563f; pointer-events: none; } .section-dark .abbonati__esito { color: #ffb3a0; } @media (prefers-reduced-motion: reduce) { .abbonati__campo, .abbonati__fatto { animation: none !important; } } .piani-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; text-align: left; align-items: stretch; /* Due piani, non tre: la seconda lingua è diventata un'opzione del calcolatore. Senza questo limite `auto-fit` allargava le due schede rimaste a 578px l'una; così restano della misura di prima e stanno in mezzo alla fascia. */ max-width: 780px; margin-inline: auto; } .piano-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .piano-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); } /* La scheda consigliata: bordo d'accento e una fascetta in alto. Non e' piu grande delle altre — su schermo stretto le tre schede si incolonnano e una scheda alta il doppio sposta soltanto il pollice piu' in basso. */ .piano-card.is-consigliato { border-color: var(--primary); border-width: 2px; background: var(--card-raised); } .piano-nastro { position: absolute; /* sopra al riflesso del tilt (z-index:1), che altrimenti gli schiarirebbe la meta' bassa al passaggio del puntatore */ z-index: 2; top: -12px; left: 24px; padding: 3px 12px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .piano-card h3 { font-size: 1.15rem; margin-bottom: 6px; } .piano-desc { font-size: 0.88rem; line-height: 1.55; color: var(--text-light); margin-bottom: 18px; min-height: 2.8em; } .piano-prezzo { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } .piano-listino { display: block; font-size: 0.85rem; color: var(--text-light); text-decoration: line-through; text-decoration-thickness: 1px; } .piano-cifra { display: block; font-size: 2.1rem; font-weight: 800; line-height: 1.15; color: var(--text); letter-spacing: -0.02em; } .piano-cifra small { font-size: 0.95rem; font-weight: 600; color: var(--text-light); letter-spacing: 0; } .piano-sconto { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--accent-light); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; } .piano-lista { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; font-size: 0.88rem; line-height: 1.5; } .piano-lista li { /* ⚠ NON una griglia. Con `display:grid` ogni figlio della voce — anche un semplice e il pezzo di testo che lo segue — diventava una cella nuova: il testo finiva nella colonna da 18px e si spezzava una parola per riga. La spunta ora è appoggiata sopra il testo, così dentro la voce si può scrivere quello che si vuole. */ position: relative; padding-left: 27px; color: var(--text-secondary); } /* Il segno di spunta e' disegnato in CSS: una casella in meno da caricare e nessuna icona che resti indietro quando cambia il colore del polo. */ .piano-lista li::before { content: ""; position: absolute; left: 1px; top: 0.42em; width: 15px; height: 9px; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg); } .piano-lista li.is-piu { font-weight: 600; color: var(--text); } .piano-card .btn { margin-top: auto; width: 100%; justify-content: center; } .piani-nota { margin-top: 32px; font-size: 0.9rem; line-height: 1.6; color: var(--text-light); } .piani-nota strong { color: var(--text); } /* Le tre righe in chiaro sotto le schede: IVA, dominio, disdetta. Sono la promessa commerciale, non una nota a pie' di pagina, quindi stanno in fila e si leggono da sole. */ .piani-garanzie { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 28px; font-size: 0.86rem; font-weight: 600; color: var(--text-secondary); } .piani-garanzie span { display: inline-flex; align-items: center; gap: 7px; } .piani-garanzie span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text); } @media (max-width: 560px) { .piano-card { padding: 24px 20px 20px; } .piano-cifra { font-size: 1.9rem; } .piano-desc { min-height: 0; } } /* La riga che manda dal preventivo una tantum ai piani in abbonamento: le due offerte sono diverse, e chi arriva qui deve poter tornare all'altra. */ /* La manutenzione è compresa nell'abbonamento e non nella una tantum: lo si dice accanto alla scelta, dove nasce il dubbio, non in una pagina di condizioni che nessuno apre. */ .quote-nota-manut { margin: -4px 0 16px; font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); } .quote-nota-manut a { color: inherit; border-bottom: 1px solid var(--border); text-decoration: none; } .quote-nota-manut a:hover { color: var(--primary-text); border-bottom-color: currentColor; } .pay-mode-nota { margin-top: 12px; font-size: 0.84rem; line-height: 1.55; color: var(--text-light); } .pay-mode-nota a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); } .pay-mode-nota a:hover { color: var(--primary-text); border-bottom-color: currentColor; } .pay-mode-nota strong { color: var(--text); } /* ── Il calcolatore in abbonamento ─────────────────────────────────────── I canoni dei piani sono gia' il prezzo Moesa: lo sconto valle e lo sconto nuovo cliente non si applicano una seconda volta, quindi le due caselle spariscono invece di restare lì a non muovere il totale. Al loro posto una riga che dice perche'. */ /* Lo sconto valle in abbonamento RESTA VISIBILE e parte spuntato: i prezzi mostrati sono quelli del Moesano, e chi non e' della valle deve poterselo togliere e vedere il listino. Sparisce solo lo sconto nuovo cliente, che sommato agli altri porterebbe sotto il prezzo delle mail. */ .quote-wrapper.is-abbonamento .first-client-wrap { display: none; } .quote-wrapper.is-abbonamento .summary-moesano { border-color: var(--accent); } .quote-wrapper .abbonamento-nota { display: none; } .quote-wrapper.is-abbonamento .abbonamento-nota { display: block; margin: 0 0 12px; padding: 9px 12px; border-left: 3px solid var(--accent); background: var(--accent-light); color: var(--accent-text); font-size: 0.8rem; font-weight: 600; line-height: 1.45; border-radius: 0 6px 6px 0; } /* In abbonamento la manutenzione non si sceglie: è dentro il canone. Tre opzioni che dicono tutte «Incluso» sono una domanda senza risposta, quindi al loro posto va una riga sola che lo dice. */ .quote-wrapper.is-abbonamento .quote-sub-manut, .quote-wrapper.is-abbonamento .quote-nota-manut, .quote-wrapper.is-abbonamento .radio-group[data-group="maintenance"] { display: none; } .quote-wrapper .manut-inclusa { display: none; } .quote-wrapper.is-abbonamento .manut-inclusa { display: block; margin: 14px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--text-light); } .quote-wrapper .manut-inclusa strong { color: var(--text); } /* ========================================================================== PAGINE DI LUOGO Impaginazione svizzera: griglia, filetti sottili, molta aria, nessun riquadro. Il colore lo mettono le fotografie, non i fondi. Il movimento e' legato allo scorrimento, non a un ciclo: si ferma quando ci si ferma. Dove il browser non lo sa fare, resta tutto fermo e leggibile. ========================================================================== */ .luogo { --filetto: 1px solid var(--border); --colonna: minmax(0, 62ch); } /* --- L'apertura: la fotografia a tutta pagina e il titolo appoggiato in basso a sinistra, dove cade l'occhio in un impaginato a griglia. La fotografia e' un e non un fondo CSS: cosi' il browser sceglie la misura giusta con srcset — la versione precedente stirava un file da 1200 px su schermi da 1920 e si vedeva. --- */ .luogo-eroe { position: relative; min-height: clamp(420px, 66svh, 660px); display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-900); isolation: isolate; } .luogo-eroe__foto { position: absolute; inset: 0; z-index: -2; } .luogo-eroe__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 52%; display: block; } /* Il velo: scuro in basso dove sta la scritta, quasi trasparente in alto dove si guarda la valle. Due sfumature invece di una: una sola, tirata da cima a fondo, spegneva anche il cielo. */ .luogo-eroe::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,22,38,0.62) 0%, rgba(6,22,38,0.18) 34%, rgba(6,22,38,0.86) 100%), linear-gradient(90deg, rgba(6,22,38,0.55) 0%, rgba(6,22,38,0) 62%); } .luogo-eroe__testo { position: relative; width: 100%; padding: 0 0 clamp(38px, 6vw, 72px); } .luogo-eroe__griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; } .luogo-eroe__blocco { grid-column: 1 / span 8; } .luogo-occhiello { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 18px; } .luogo-occhiello i { font-style: normal; color: var(--accent); } .luogo-eroe h1 { color: #fff; font-family: var(--font-display); font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 0.98; letter-spacing: -0.032em; margin: 0; text-wrap: balance; } /* Il filetto si tira da sinistra mentre la pagina entra: e' l'unico movimento dell'apertura, e basta. */ .luogo-eroe__filo { height: 2px; width: min(180px, 40%); background: var(--accent); margin: 26px 0 18px; transform-origin: left; } .js .luogo-eroe__filo { animation: filoEntra .7s var(--ease) .15s both; } @keyframes filoEntra { from { transform: scaleX(0); } to { transform: scaleX(1); } } .luogo-eroe__sub { color: rgba(255,255,255,0.9); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.55; max-width: 52ch; margin: 0; } /* I crediti dell'immagine: obbligo delle licenze di Wikimedia, quindi sempre presenti — ma nell'angolo, piccoli, senza rubare la scena. */ .luogo-firma { position: absolute; right: 20px; bottom: 14px; font-size: 0.66rem; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; } .luogo-firma a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .luogo-firma a:hover { color: #fff; } /* La fotografia si avvicina piano mentre si scorre: due punti percentuali di ingrandimento in tutta la corsa. Si nota solo se la si cerca, ed e' esattamente quello che deve fare. */ @supports (animation-timeline: view()) { .luogo-eroe__foto img { animation: eroeAvvicina linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } @keyframes eroeAvvicina { from { transform: scale(1.005) translateY(-1.2%); } to { transform: scale(1.06) translateY(1.2%); } } /* --- I dati del posto: una tabella a filetti, non quattro scatole. Le etichette in alto piccole e spaziate, i valori sotto: e' la forma che una scheda tecnica ha in tipografia svizzera. --- */ .luogo-scheda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--filetto); margin: 0; } .luogo-scheda > div { padding: 22px 20px 24px 0; border-bottom: var(--filetto); } .luogo-scheda > div + div { padding-left: 24px; border-left: var(--filetto); } .luogo-scheda dt { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; } .luogo-scheda dd { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--text); } @media (max-width: 860px) { .luogo-scheda { grid-template-columns: repeat(2, minmax(0, 1fr)); } .luogo-scheda > div:nth-child(odd) { padding-left: 0; border-left: 0; } .luogo-scheda > div:nth-child(even) { padding-left: 20px; border-left: var(--filetto); } } @media (max-width: 480px) { .luogo-scheda { grid-template-columns: minmax(0, 1fr); } /* Anche `nth-child(even)`: la regola dei due a fianco ha piu' peso di quella generica, e sul telefono lasciava una riga su due rientrata con il suo filetto a sinistra, come se fosse annidata. */ .luogo-scheda > div, .luogo-scheda > div + div, .luogo-scheda > div:nth-child(even), .luogo-scheda > div:nth-child(odd) { padding-left: 0; border-left: 0; } } /* --- Sezioni numerate. Il numero resta appeso mentre il testo scorre: da' il senso della posizione senza aggiungere una barra di navigazione che qui non serve. --- */ .luogo-sez { display: grid; grid-template-columns: 92px var(--colonna); gap: 0 40px; align-items: start; } .luogo-sez__n { position: sticky; top: 120px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; color: var(--primary); padding-top: 6px; } .luogo-sez__n::after { content: ''; display: block; width: 28px; height: 1px; background: var(--accent); margin-top: 12px; } .luogo-sez h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; } .luogo-sez p { font-size: 1.02rem; line-height: 1.78; margin: 0 0 16px; } /* Il primo paragrafo fa da attacco: un filo piu' grande e piu' scuro, come il sommario di un articolo. */ .luogo-sez .luogo-attacco { font-size: 1.16rem; line-height: 1.62; color: var(--text); margin-bottom: 22px; } .luogo-sez--scura .luogo-attacco { color: #fff; } .luogo-sez p:last-child { margin-bottom: 0; } @media (max-width: 780px) { .luogo-sez { grid-template-columns: minmax(0, 1fr); gap: 14px; } .luogo-sez__n { position: static; } .luogo-sez__n::after { margin-top: 8px; } } /* La sezione scura tiene lo stesso impianto, colori invertiti. */ .luogo-sez--scura .luogo-sez__n { color: var(--accent); } .luogo-sez--scura h2 { color: #fff; } .luogo-sez--scura p { color: rgba(255,255,255,0.86); } /* --- La figura: fotografia grande con didascalia a fianco, come in un impaginato di rivista. Nessun velo sopra: qui la si guarda. --- */ .luogo-figura { margin: 0; } .luogo-figura img { width: 100%; height: clamp(260px, 42vw, 520px); object-fit: cover; display: block; border-radius: 2px; } .luogo-figura figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 12px; border-top: var(--filetto); margin-top: 14px; font-size: 0.78rem; color: var(--text-secondary); } .luogo-figura figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .luogo-figura figcaption a:hover { color: var(--primary); } /* --- I tre punti pratici: numerati, separati da filetti, senza scatole. */ .luogo-punti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--filetto); } .luogo-punto { padding: 26px 26px 30px 0; border-bottom: var(--filetto); } .luogo-punto + .luogo-punto { padding-left: 28px; border-left: var(--filetto); } .luogo-punto__n { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent-dark, #6f9c48); display: block; margin-bottom: 12px; } .luogo-punto h3 { font-size: 1.02rem; line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.01em; } .luogo-punto p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.68; margin: 0; } @media (max-width: 820px) { .luogo-punti { grid-template-columns: minmax(0, 1fr); } .luogo-punto, .luogo-punto + .luogo-punto { padding: 22px 0 24px; border-left: 0; } } /* --- I paesi dentro la valle (solo Calanca): elenco a filetti. --- */ .luogo-dentro { margin-top: 8px; } .luogo-paese { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 32px; padding: 24px 0; border-bottom: var(--filetto); scroll-margin-top: 100px; } .luogo-paese:first-of-type { border-top: var(--filetto); } .luogo-paese h3 { font-size: 1.02rem; margin: 0; letter-spacing: -0.01em; } .luogo-paese p { margin: 0; color: var(--text-secondary); line-height: 1.72; font-size: 0.95rem; } @media (max-width: 700px) { .luogo-paese { grid-template-columns: minmax(0, 1fr); gap: 8px; } } /* --- Titoletto di sezione, ovunque serva. --- */ .luogo-etichetta { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); margin: 0 0 26px; } .luogo-sez--scura .luogo-etichetta, .section-dark .luogo-etichetta { color: var(--accent); } /* --- L'indice: schede con la fotografia. --- */ .luoghi-intro { max-width: 64ch; } .luoghi-intro p { font-size: 1.05rem; line-height: 1.75; margin: 0 0 18px; } .luoghi-intro p:first-child { font-size: 1.18rem; line-height: 1.6; color: var(--text); margin-bottom: 22px; } .luoghi-intro p:last-child { margin-bottom: 0; } .luoghi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 28px 24px; margin-top: 22px; } .luoghi-grid--valli { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); } .luogo-card { display: flex; flex-direction: column; text-decoration: none; background: none; border: 0; } .luogo-card__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-800); border-radius: 2px; } .luogo-card__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform .7s var(--ease); } .luogo-card:hover .luogo-card__foto img { transform: scale(1.05); } .luogo-card__testo { padding-top: 14px; margin-top: 12px; border-top: var(--filetto, 1px solid var(--border)); display: flex; flex-direction: column; gap: 5px; transition: border-color .3s var(--ease); } .luogo-card:hover .luogo-card__testo { border-color: var(--primary); } .luogo-card__nome { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.015em; color: var(--text); } .luogo-card__sotto { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.5; } .luogo-card--valle .luogo-card__nome { font-size: 1.5rem; } .luogo-card--valle .luogo-card__foto { aspect-ratio: 16 / 9; } /* --- I due pulsanti in fondo. --- */ /* Nelle pagine di luogo il blocco dei settori vive dentro la griglia: testo a misura di lettura, non centrato. */ .luogo .related-sectors { max-width: 62ch; } .cta-azioni { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* --- L'intestazione dell'indice: niente fotografia (non esiste una foto «del Moesano intero» che non sia la foto di un posto solo), ma lo stesso impianto: occhiello, titolo grande, filetto, sommario. --- */ .luoghi-testa { text-align: left; padding-bottom: clamp(48px, 6vw, 76px); } /* `.page-header p` ha `margin: 0 auto`: da solo `text-align: left` non bastava, il blocco restava centrato lo stesso. */ .luoghi-testa p { margin-left: 0; margin-right: auto; } .luoghi-testa .luogo-occhiello { color: rgba(255,255,255,0.7); margin-bottom: 16px; } .luoghi-testa h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; max-width: 18ch; } .luoghi-testa .luogo-eroe__filo { margin: 24px 0 18px; } .luoghi-testa__sub { color: rgba(255,255,255,0.86); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; max-width: 56ch; margin: 0; } /* ========================================================================== TELEFONO: BERSAGLI E CORPI DI TESTO Misurato a 390 px con un banco che apre le pagine in una cornice e legge le dimensioni vere. Quello che ne e' uscito: · il pulsante del menu era alto 24 px — il piu' importante di tutti; · quattro collegamenti su cinque nel pie' stavano sotto i 32 px; · certe scritte scendevano a 10,6 px, che sul telefono non si leggono. Le linee guida chiedono almeno 44 px di bersaglio: qui si arriva a 44 allargando l'area sensibile, senza gonfiare la grafica. ========================================================================== */ /* Il pulsante del menu: le tre righe restano di 24 px, l'area che risponde al dito diventa 44. */ .nav-toggle { padding: 10px; margin: -10px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } @media (max-width: 820px) { /* Collegamenti del pie' di pagina: incolonnati, quindi si puo' allargare in verticale senza spostare niente. */ .footer-grid ul a, .footer-legal a { display: inline-block; padding: 7px 0; } .footer-grid ul li { margin-bottom: 0; } /* Briciole e «vedi tutti»: stessa cura. */ .breadcrumb ol a, .breadcrumb ol span { display: inline-block; padding: 6px 0; } .related-all { padding: 8px 0; } /* Corpi minimi: sotto i 12,5 px sul telefono non si legge comodamente. */ .wa-hours { font-size: 0.78rem; } .luogo-occhiello { font-size: 0.76rem; letter-spacing: 0.13em; } .luogo-etichetta { font-size: 0.76rem; letter-spacing: 0.12em; } .luogo-firma { font-size: 0.74rem; } .luogo-firma a { padding: 4px 0; display: inline-block; } .luogo-figura figcaption { font-size: 0.8rem; } .luogo-figura figcaption a { padding: 3px 0; display: inline-block; } } /* ========================================================================== PAGINE LEGALI Privacy e impressum erano le piu' spoglie del sito: un muro di testo con i titoli sottolineati. Restano documenti, quindi niente decorazione — ma la stessa grammatica delle pagine di luogo: numero staccato, filetto, colonna di lettura giusta, molta aria fra una sezione e l'altra. I testi non si toccano: sono documenti legali e vanno alla lettera. ========================================================================== */ .legal-page { padding: clamp(48px, 6vw, 76px) 0 clamp(64px, 8vw, 104px); } .legal-page .container { max-width: 68ch; } /* I titoli portano gia' il numero dentro il testo («1. Titolare del trattamento»): non serve inventarne un altro, serve dargli aria e un filetto che separi le sezioni. */ .legal-page h2 { font-size: 1.18rem; letter-spacing: -0.015em; margin: clamp(44px, 5vw, 64px) 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .legal-page h2:first-child { margin-top: 0; } .legal-page p { margin-bottom: 16px; line-height: 1.8; font-size: 0.98rem; } .legal-page p:last-child { margin-bottom: 0; } .legal-page a { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .legal-page a:hover { color: var(--primary-dark, var(--navy-800)); } .legal-list { margin: 0 0 20px; } .legal-list li { font-size: 0.96rem; line-height: 1.78; } /* Sul telefono il testo di un documento va largo quanto la colonna, ma il corpo non deve scendere: si legge peggio di tutto il resto del sito. */ @media (max-width: 820px) { .legal-page p, .legal-list li { font-size: 1rem; } .legal-page h2 { font-size: 1.08rem; margin-top: 38px; } } /* ========================================================================== PAGINE DI SETTORE Sono tredici per quattro lingue: cinquantadue pagine lunghe che nessuno aveva piu' guardato. Due difetti veri, trovati misurando: · i paragrafi non avevano NESSUNO spazio fra loro — quattro capoversi di fila diventavano un muro (la regola `p` del sito non mette margine, e per queste pagine non c'era una regola sua); · tre soli elementi animati su quasi seimila pixel di altezza. I testi non si toccano: sono in cinquantadue file, e il difetto non era nei testi. ========================================================================== */ .sector-content p { margin-bottom: 16px; line-height: 1.78; } .sector-content p:last-child { margin-bottom: 0; } .sector-content h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.18; letter-spacing: -0.02em; margin-bottom: 18px; text-wrap: balance; } /* Il primo capoverso di ogni blocco fa da attacco, come nelle pagine di luogo: stessa grammatica in tutto il sito. */ .sector-content > .container > div > p:first-of-type { font-size: 1.1rem; line-height: 1.66; color: var(--text); } /* Le schede: il fondo pieno le faceva sembrare sei riquadri incollati. Filetto sottile e fondo appena accennato — le stesse dei luoghi. */ .sett-scheda { background: var(--bg) !important; border: 1px solid var(--border) !important; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .sett-scheda:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 10px 26px rgba(24, 91, 139, 0.10); } .sett-scheda h4 { letter-spacing: -0.01em; } /* L'icona e' un'emoji dentro il testo: si tiene, ma smorzata e staccata, che non sembri un adesivo. */ .sett-scheda > div:first-child { font-size: 1.15rem !important; opacity: 0.72; margin-bottom: 12px !important; } /* `hidden` da solo non basta: `.feature-item` ha un `display:flex` esplicito, e la regola del CSS vince sull'attributo. Senza questa riga le due voci tolte dall'abbonamento resterebbero a schermo. */ .feature-item[hidden] { display: none !important; } /* ========================================================================== IL CANTIERE — l'editor che digita, il sito che si monta Sta nella fascia «Come lavoriamo»: i quattro passaggi raccontano il metodo, questo lo mostra. Il PHP consegna la scena FINITA (codice scritto, sito montato, «Online» acceso): senza JavaScript o con meno movimento si vede quella. Il copione aggiunge `.gioca` e da lì in poi dirige lui: righe che si digitano, pezzi che compaiono. ========================================================================== */ .cantiere { margin-top: 64px; } .cantiere-claim { font-size: 1.02rem; font-weight: 600; margin-bottom: 28px; } /* Nella fascia scura il claim eredita gia' il colore giusto da .band p */ .cantiere-scena { display: grid; grid-template-columns: 1.06fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; text-align: left; position: relative; } /* Il comando per fermare il giro: un'animazione che dura piu' di cinque secondi DEVE potersi fermare (WCAG 2.2.2). Lo crea il copione (senza copione non c'e' niente da fermare) e sta FUORI dalla scena nascosta agli screen reader: e' un comando vero, non decorazione. Poggia sulla barra dell'editor, in alto a destra. */ .cant-pausa { position: absolute; z-index: 3; top: 4px; /* il bordo destro dell'editor: colonne 1.06fr/1fr con 22px di vuoto */ right: calc(48.54% + 21px); width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.72); cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .cant-pausa:hover { background: rgba(255, 255, 255, 0.18); color: #fff; } .cant-pausa svg { width: 12px; height: 12px; } .cant-pausa .icona-riprendi { display: none; } .cantiere.in-pausa .cant-pausa .icona-pausa { display: none; } .cantiere.in-pausa .cant-pausa .icona-riprendi { display: block; } /* in pausa anche il trattino smette di battere */ .cantiere.in-pausa .cant-caret { animation-play-state: paused; } @media (max-width: 860px) { .cant-pausa { right: 10px; top: 3px; } } /* --- La finestra: barra con tre luci, corpo sotto --- */ .cant-finestra { border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; height: 380px; box-shadow: 0 18px 48px rgba(3, 12, 22, 0.45); border: 1px solid rgba(255, 255, 255, 0.10); } .cant-barra { display: flex; align-items: center; gap: 10px; padding: 9px 14px; flex-shrink: 0; font-size: 0.72rem; font-weight: 600; } .cant-luci { display: inline-flex; gap: 6px; } .cant-luci i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); } /* --- L'editor: navy piu' fondo della fascia, mono di sistema --- */ .cant-editor { background: #04101d; } .cant-editor .cant-barra { background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.55); } .cant-tab { padding: 3px 10px; border-radius: 6px; background: rgba(134, 196, 238, 0.12); color: #a9d6f4; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; } .cant-codice { flex: 1; margin: 0; padding: 16px 18px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; /* 14 righe per 1.78 di interlinea stanno nei 380px della finestra, barra e margini compresi: e' un conto, non un caso */ line-height: 1.78; white-space: pre-wrap; word-break: break-word; } .cant-riga { display: block; min-height: 1.78em; } .c-p { color: rgba(255, 255, 255, 0.42); } .c-t { color: #86c4ee; } .c-a { color: #aacf87; } .c-s { color: #d9b98a; } .c-x { color: rgba(255, 255, 255, 0.92); } /* Il trattino che batte: c'e' solo mentre si digita */ .cant-caret { display: none; width: 7px; height: 1.15em; margin-left: 1px; vertical-align: text-bottom; background: #86c4ee; border-radius: 1px; animation: cant-batte 1.06s steps(2, start) infinite; } .gioca .cant-caret { display: inline-block; } @keyframes cant-batte { to { visibility: hidden; } } /* --- Il browser: chiaro, con lucchetto e spia --- */ .cant-browser { background: var(--paper); border-color: rgba(255, 255, 255, 0.16); /* la sezione scura qui intorno ribalta i token (testo bianco, filetti chiari): dentro questa finestra e' giorno, e i valori tornano quelli del tema chiaro — altrimenti il nome dell'attivita' sparisce, bianco su bianco */ --text: #0a2237; --text-secondary: #4a6377; --border: #dbe6ee; --accent-light: #eaf5dc; --accent-text: #4a6e31; --primary-light: #e6f0f7; --primary: #185b8b; } .cant-browser .cant-barra { background: #e4edf4; border-bottom: 1px solid #d3e0ea; color: var(--text-secondary); } .cant-browser .cant-luci i { background: #c2d2de; } .cant-url { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; justify-content: center; padding: 3px 12px; border-radius: 999px; background: #fff; border: 1px solid #d3e0ea; font-weight: 500; white-space: nowrap; overflow: hidden; } .cant-url svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--accent-dark); } /* La spia: spenta durante il montaggio, verde a lavoro finito */ .cant-online { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; background: var(--accent-light); color: var(--accent-text); transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease); } .cant-online::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .gioca .cant-online:not(.acceso) { background: rgba(10, 34, 55, 0.07); color: rgba(10, 34, 55, 0.45); } .gioca .cant-online:not(.acceso)::before { background: rgba(10, 34, 55, 0.25); } /* All'accensione: un'onda sola verso fuori, come il puntino dell'anello */ .cant-online.acceso { animation: cant-spia 0.5s var(--ease) both; } @keyframes cant-spia { 0% { transform: scale(0.92); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } } /* --- Il sito in miniatura --- */ .cant-pagina { flex: 1; padding: 18px; overflow: hidden; display: flex; } .cant-sito { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 10px rgba(6, 22, 38, 0.06); } /* Ogni pezzo: gia' al suo posto per il PHP; mentre si gioca parte invisibile e `.su` lo materializza. */ .gioca [data-pezzo] { opacity: 0; transform: translateY(9px) scale(0.985); /* anche l'uscita sfuma: al reset si toglie `.su`, e senza questa transizione i pezzi sparirebbero di colpo */ transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .gioca [data-pezzo].su { opacity: 1; transform: none; transition: opacity 0.45s var(--ease), transform 0.55s var(--ease); } .cant-s-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--border); font-size: 0.7rem; } .cant-s-marchio { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); white-space: nowrap; } .cant-s-marchio i { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg, var(--primary), var(--accent)); } .cant-s-menu { color: var(--text-secondary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cant-s-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 6px 0 2px; } .cant-s-h1 { font-family: Archivo, var(--font); font-size: 1.28rem; font-weight: 800; letter-spacing: -0.02em; color: var(--navy-800); line-height: 1.1; } .cant-s-riga { width: 78%; height: 7px; border-radius: 4px; background: var(--paper-2); } .cant-s-riga.corta { width: 52%; } .cant-s-btn { margin-top: 6px; padding: 5px 13px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.68rem; font-weight: 700; } .cant-s-carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: auto; } .cant-s-carte i { height: 44px; border-radius: 6px; border: 1px solid var(--border); background: linear-gradient(var(--paper-2), var(--paper-2)) 8px 26px / 26px 5px no-repeat, linear-gradient(var(--primary-light), var(--primary-light)) 8px 8px / 12px 12px no-repeat, #fff; } /* Su schermo stretto le due finestre si incolonnano: prima il codice, sotto il risultato, come i passaggi che stanno sopra. */ @media (max-width: 860px) { .cantiere-scena { grid-template-columns: 1fr; max-width: 480px; } /* Su schermo stretto le righe lunghe di EN/DE/FR vanno a capo (pre-wrap) e le 14 righe diventano fino a 16: all'editor serve piu' altezza del browser, che invece ha un contenuto suo fisso. */ .cant-editor { height: 384px; } .cant-browser { height: 344px; } .cant-codice { font-size: 11px; } } /* Con meno movimento chiesto: niente regia, resta la scena finita. La regola c'e' anche se il copione gia' non parte: e' la cintura oltre alle bretelle. */ @media (prefers-reduced-motion: reduce) { .gioca [data-pezzo] { opacity: 1 !important; transform: none !important; } .cant-caret { display: none !important; } } /* ========================================================================== LE CARTE DEI PIANI SI INCLINANO SOTTO IL PUNTATORE Un'inclinazione vera in prospettiva, con un riflesso che segue la mano: al massimo 4 gradi, che e' un cenno, non una giostra. Solo dove c'e' un puntatore fine; al tocco e con meno movimento non esiste. Il copione scrive --rx/--ry/--gx/--gy, il foglio li mette in scena. ========================================================================== */ @media (hover: hover) and (pointer: fine) { .js .piano-card { transform-style: preserve-3d; } .js .piano-card.inclinata { transform: perspective(920px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); /* il transform ha una transizione breve e lineare: ammorbidisce il gradino d'ingresso (il -4px scattava di colpo) e si somma alla rincorsa del copione senza farsi sentire nel tracciamento */ transition: transform 0.09s linear, box-shadow var(--transition), border-color var(--transition); box-shadow: var(--shadow-lg); border-color: var(--primary); } /* Il rientro e' morbido; l'inseguimento lo smorza il copione via rAF */ .js .piano-card.rientra { transform: perspective(920px) rotateX(0deg) rotateY(0deg) translateY(0); transition: transform 0.55s var(--ease), box-shadow var(--transition), border-color var(--transition); } .js .piano-card .piano-riflesso { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; /* 0.16 e non di piu': la card e' scura con il testo bianco, e sotto un riflesso a 0.55 il bianco scendeva a 2.6:1 di contrasto proprio dove passa il puntatore. A 0.16-0.18 resta sopra il 4.5:1. */ background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%); transition: opacity 0.35s var(--ease); /* sopra al contenuto della carta, sotto al nastro (che sporge fuori) */ z-index: 1; } .js .piano-card.inclinata .piano-riflesso { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .js .piano-card.inclinata, .js .piano-card.rientra { transform: none !important; } .js .piano-card .piano-riflesso { opacity: 0 !important; } } /* ========================================================================== BOTTONI MAGNETICI Le chiamate principali vengono incontro alla mano: pochi pixel verso il puntatore quando e' vicino, e un ritorno con la molla quando se ne va. Lo spostamento lo scrive il copione nello stile in linea (cosi' vince sull'hover); qui stanno solo le due andature del movimento. ========================================================================== */ @media (hover: hover) and (pointer: fine) { .js .magnete { will-change: transform; } /* la lista ripete le voci di .btn: una scorciatoia con il solo transform CANCELLEREBBE le sfumature di colore e ombra dell'hover */ .js .magnete.magnete-segue { transition: transform 0.16s ease-out, background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .js .magnete.magnete-torna { transition: transform 0.5s cubic-bezier(0.22, 1.6, 0.36, 1), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } } @media (prefers-reduced-motion: reduce) { /* lo spostamento sta nello stile in linea: serve la forza */ .js .magnete { transform: none !important; transition: none !important; } .cant-pausa { display: none !important; } } /* ========================================================================== I NUMERI DELLA VALLE Tre cifre vere sotto le carte del «perché noi», alla svizzera: grandi, asciutte, separate da filetti. Il conteggio lo fa il copione; qui il numero e' gia' scritto, cosi' senza JavaScript non manca niente. ========================================================================== */ .numeri { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 760px; margin: 64px auto 0; padding-top: 40px; border-top: 1px solid var(--border); } .numeri-voce { text-align: center; padding: 0 16px; } .numeri-voce + .numeri-voce { border-left: 1px solid var(--border); } .numeri-cifra { display: block; font-family: Archivo, var(--font); font-size: clamp(2.2rem, 4.5vw, 3.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--primary-text); font-variant-numeric: tabular-nums; } .numeri-eti { display: block; margin-top: 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); } @media (max-width: 560px) { .numeri { padding-top: 28px; margin-top: 48px; } .numeri-voce { padding: 0 8px; } .numeri-cifra { font-size: 1.9rem; } .numeri-eti { font-size: 0.62rem; letter-spacing: 0.05em; } } /* ========================================================================== IL FILO DEL METODO Una linea tratteggiata che si disegna con lo scorrimento e cuce i quattro passi di «Come lavoriamo»: orizzontale quando i passi stanno in fila (le colonne scattano a 4 sopra i ~1180px di finestra), verticale quando stanno in colonna. Nella via di mezzo (griglia 2x2) il filo non c'e': una linea dritta li' racconterebbe una bugia. ========================================================================== */ .process-list { position: relative; } .process-list::before { content: ''; position: absolute; display: none; pointer-events: none; } /* La soglia e' 1200 e non 1180: la media query misura la finestra CON la barra di scorrimento, la griglia senza. Su Windows (barra classica da 15-17px) fra 1180 e 1188 la griglia scendeva a 3 colonne mentre il filo restava lungo da 4 — 95px di tratteggio nel vuoto. A 1200 anche la barra piu' grassa lascia le 4 colonne al loro posto. */ @media (min-width: 1200px) { .process-list::before { display: block; top: 19px; /* il centro dei cerchi */ left: 19px; /* fino al cerchio dell'ultima colonna: 3/4 della griglia piu' i vuoti */ width: calc((100% - 84px) * 0.75 + 84px); height: 0; border-top: 2px dashed rgba(255, 255, 255, 0.28); transform-origin: 0 50%; } } /* In colonna il filo e' fatto di SEGMENTI, uno per passo: dal fondo del proprio cerchio fino al cerchio del passo dopo (il -28px attraversa il vuoto della griglia). Cosi' l'ultimo tratto finisce ESATTO sul quarto cerchio: la prima stesura usava un filo unico alto quanto la lista, e 66px di tratteggio penzolavano oltre l'ultimo cerchio. */ @media (max-width: 595px) { .process-step { position: relative; } .process-step:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 38px; bottom: -28px; width: 0; border-left: 2px dashed rgba(255, 255, 255, 0.28); transform-origin: 50% 0; pointer-events: none; } } /* Il filo passa DIETRO ai cerchi: per contratto, non per fortuna (oggi li terrebbe sopra lo stacking context del will-change dei .reveal, ma un giorno quello puo' sparire). */ .process-num { position: relative; z-index: 1; } /* Dove lo scorrimento guida le animazioni, il filo si DISEGNA: parte da zero e si stende mentre la lista attraversa lo schermo. */ @supports (animation-timeline: view()) { @media (min-width: 1200px) { .process-list::before { animation: filo-orizzontale linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; } } @media (max-width: 595px) { /* ogni segmento si stende mentre il SUO passo entra: a ingresso compiuto il tratto e' intero (con una finestra fino all'uscita resterebbe a meta' per tutta la lettura) */ .process-step:not(:last-child)::after { animation: filo-verticale linear both; animation-timeline: view(); animation-range: entry 30% entry 100%; } } } @keyframes filo-orizzontale { from { transform: scaleX(0); } } @keyframes filo-verticale { from { transform: scaleY(0); } } @media (prefers-reduced-motion: reduce) { .process-list::before, .process-step::after { animation: none !important; transform: none !important; } } /* ========================================================================== ICONE CHE SI RIDISEGNANO Al passaggio sulla card, il tratto dell'icona si ridisegna da zero, come ripassato a penna. Funziona perche' il copione (icone() in showcase.js) imposta pathLength=1 su ogni segno: cosi' un solo paio di valori di dasharray va bene per qualunque forma. Solo con un puntatore vero e solo per chi non ha chiesto meno movimento. ========================================================================== */ @media (hover: hover) and (pointer: fine) { .about-card:hover .about-icon svg .si-disegna, .service-card:hover .service-icon svg .si-disegna, .sector-card:hover .sector-icon svg .si-disegna { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: tratto-disegna 0.6s ease-out forwards; } /* i segni si susseguono: prima il primo tratto, poi gli altri */ .about-card:hover .about-icon svg .si-disegna:nth-child(2), .service-card:hover .service-icon svg .si-disegna:nth-child(2), .sector-card:hover .sector-icon svg .si-disegna:nth-child(2) { animation-delay: 0.08s; } .about-card:hover .about-icon svg .si-disegna:nth-child(n+3), .service-card:hover .service-icon svg .si-disegna:nth-child(n+3), .sector-card:hover .sector-icon svg .si-disegna:nth-child(n+3) { animation-delay: 0.16s; } } @keyframes tratto-disegna { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .si-disegna { animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } } /* ========================================================================== RIFINITURE ========================================================================== */ /* La selezione del testo veste i colori della casa */ ::selection { background: var(--accent); color: var(--navy-900); } /* Sui bottoni gia' verdi la selezione verde sparirebbe: si ribalta */ .btn-accent::selection, .quote-resume-yes::selection { background: var(--navy-900); color: #ffffff; } /* La voce di menu della sezione in vista resta sottolineata (scrollspy). Riusa la stessa lineetta dell'hover — ma qui e' un indicatore di STATO e sulla barra chiara il verde sta a 2.4:1 sul bianco, sotto il 3:1 che chiede la WCAG 1.4.11: la lineetta della voce attiva e' blu (7.2:1); sulla barra scura il verde va benissimo (6.8:1) e resta. */ .nav-links a.attiva { color: var(--primary-text); } .nav-links a.attiva::after { width: 100%; background: var(--primary); } .navbar.on-dark .nav-links a.attiva { color: #fff; } .navbar.on-dark .nav-links a.attiva::after { background: var(--accent); } /* Chi arriva col Tab sulle card dei settori merita lo stesso ridisegno di chi ci passa col mouse (le altre card non prendono il focus). Fuori dal cancello hover/pointer: dove il copione non ha marcato i segni la regola semplicemente non trova nulla. */ .sector-card:focus-visible .sector-icon svg .si-disegna { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: tratto-disegna 0.6s ease-out forwards; } /* ========================================================================== LA MAPPA DELLA VALLE Il Moesano disegnato a filo nei contatti: due linee (la Mesolcina che sale, la Calanca che si stacca a Grono) e i dieci collegamenti veri alle pagine di luogo. E' navigazione, non decorazione: i nomi sono sempre visibili — sul telefono l'hover non esiste — e ogni punto prende il focus come qualunque link. Soazza ha il punto pieno e l'onda: e' la sede. ========================================================================== */ .mappa { margin-top: 40px; } .mappa-eti { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; } .mappa-nav svg { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; } .mp-valle { stroke: var(--primary); stroke-opacity: 0.4; stroke-width: 2; stroke-linecap: round; } .mp-ramo { stroke-opacity: 0.28; } .mp-cerchio { fill: var(--accent); stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform 0.25s var(--ease), fill 0.25s var(--ease); } .mp-tocco { fill: transparent; } .mp-punto text, .mp-vallelink text { font-family: var(--font); /* 12.5 unita' del viewBox ≈ 13px resi: sotto, il banco di prova mobile del progetto boccerebbe i corpi — e avrebbe ragione */ font-size: 12.5px; font-weight: 500; fill: var(--text-secondary); transition: fill 0.25s var(--ease); } .mp-vallelink text { font-style: italic; font-size: 11.5px; letter-spacing: 0.04em; /* pieno, non velato: sono link, e il velo al 78% scendeva a 3.7:1 di contrasto su carta — sotto il 4.5 che spetta al testo piccolo. A distinguerli dal resto bastano corsivo e crenatura. */ fill: var(--text-secondary); } .mp-punto:hover .mp-cerchio, .mp-punto:focus-visible .mp-cerchio { transform: scale(1.45); fill: var(--accent-dark); } .mp-punto:hover text, .mp-punto:focus-visible text { fill: var(--text); font-weight: 600; } .mp-vallelink:hover text, .mp-vallelink:focus-visible text { fill: var(--primary-text); } /* La sede: punto blu pieno e UN'onda al passaggio, come il puntino dell'anello nell'eroe — stessa famiglia, stesso gesto. */ .mp-sede .mp-cerchio { fill: var(--primary); } .mp-sede text { font-weight: 700; fill: var(--text); } .mp-onda { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; } .mp-sede:hover .mp-onda, .mp-sede:focus-visible .mp-onda { animation: onda-luogo 0.95s ease-out 1 both; } .mp-sede:hover .mp-cerchio { fill: var(--primary-dark); } /* Le valli si DISEGNANO mentre la mappa entra: pathLength=1 nel markup, quindi basta una coppia di dash qualunque sia la lunghezza vera. */ @supports (animation-timeline: view()) { .js .mp-valle { /* «1 2» e non «1 1»: con il vuoto lungo quanto il pieno, allo stato di partenza (offset 1) il linecap tondo dipingerebbe un punto orfano al capo del percorso; con 2 di vuoto non c'e' niente da dipingere, e a fine corsa la linea e' piena uguale. */ stroke-dasharray: 1 2; animation: mp-disegna linear both; animation-timeline: view(); animation-range: entry 10% entry 85%; } } @keyframes mp-disegna { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .mp-valle { animation: none !important; stroke-dasharray: none !important; } .mp-onda { animation: none !important; opacity: 0 !important; } .mp-cerchio { transition: none !important; } } /* ========================================================================== LA SPIA DEGLI ORARI Verde quando adesso siamo aperti, spenta quando no. La riempie il copione sull'ora di Zurigo; senza copione resta nascosta. ========================================================================== */ .orari-spia { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 3px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; /* paper-2, non bg-alt: bg-alt E' il fondo della sezione contatti, e da «chiusi» la pillola spariva lasciando il testo nudo */ background: var(--paper-2); color: var(--text-secondary); } /* `hidden` da solo perde contro il display esplicito qui sopra: la trappola nota del progetto, disinnescata come per .feature-item */ .orari-spia[hidden] { display: none !important; } .orari-spia::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text-light); flex-shrink: 0; } .orari-spia.is-aperta { background: var(--accent-light); color: var(--accent-text); } .orari-spia.is-aperta::before { background: var(--accent); animation: spia-batte 2.4s ease-in-out infinite; } @keyframes spia-batte { 0%, 100% { box-shadow: 0 0 0 0 rgba(134, 181, 93, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(134, 181, 93, 0); } } @media (prefers-reduced-motion: reduce) { .orari-spia.is-aperta::before { animation: none !important; } } /* ========================================================================== LA BARRA DEL POLLICE (solo telefono) Le tre azioni che contano — Chiama, WhatsApp, Preventivo — ancorate in fondo allo schermo, dove sta il pollice. Vetro navy sopra i contenuti; si ritira scendendo (si sta leggendo), torna risalendo, e sul modulo del preventivo si toglie: il fondo li' serve al riepilogo. Senza copione resta ferma e visibile. ========================================================================== */ .pollice { display: none; } @media (max-width: 768px) { .pollice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; display: flex; background: rgba(8, 26, 43, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(0); transition: transform 0.35s var(--ease); } .pollice.ritirata, .pollice.via { transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))); /* fuori schermo = fuori dall'ordine di tabulazione, come il menu: senza, il Tab finiva su tre link invisibili */ visibility: hidden; transition: transform 0.35s var(--ease), visibility 0s linear 0.35s; } .pollice a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 7px; color: #e5eef5; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; } .pollice a + a { border-left: 1px solid rgba(255, 255, 255, 0.10); } .pollice svg { width: 19px; height: 19px; } .pollice a:active { background: rgba(255, 255, 255, 0.08); } /* la barra assorbe i compiti del pulsante flottante: doppio comando, doppio ingombro — il flottante sul telefono si spegne, e il torna-su sale sopra la barra */ .whatsapp-float { display: none !important; } .back-to-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 18px; } /* il piede respira: l'ultima riga non deve dormire sotto la barra */ .footer { padding-bottom: calc(24px + 58px + env(safe-area-inset-bottom, 0px)); } } /* ========================================================================== IL MENU DI MONTAGNA (schermi stretti) Il cassetto bianco era l'unico pezzo del sito senza carattere: ora e' un pannello a tutto schermo, navy di notte, con le voci grandi in Archivo che entrano una dopo l'altra e i crinali sul fondo — lo stesso profilo del piede della pagina. Solo CSS: apertura, chiusura ed Esc erano gia' nel copione. ========================================================================== */ @media (max-width: 1080px) { .nav-links { width: 100%; max-width: none; background: /* i crinali: due profili di montagna sovrapposti, come nel piede. Toni un gradino sopra il fondo, sennò non si vedono */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 120' preserveAspectRatio='none'%3E%3Cpath d='M0 78 40 52 78 70 120 38 158 62 200 30 244 58 288 42 326 64 360 48V120H0Z' fill='%2316405f' opacity='.75'/%3E%3Cpath d='M0 96 48 74 92 88 140 60 186 82 232 56 278 78 322 64 360 80V120H0Z' fill='%231d5580' opacity='.85'/%3E%3C/svg%3E") bottom / 100% 130px no-repeat, linear-gradient(180deg, #061626 0%, #0a2237 78%, #0c2a42 100%); box-shadow: none; justify-content: center; gap: 6px; padding: 90px 40px calc(150px + env(safe-area-inset-bottom, 0px)); } .nav-links a { color: #fff; font-family: Archivo, var(--font); font-size: 1.65rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; /* chiusi: fuori posto e trasparenti; l'apertura li fa salire in fila */ opacity: 0; transform: translateY(16px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), color 0.3s var(--ease); } .nav-links a::after { height: 3px; bottom: -4px; background: var(--accent); } .nav-links a:hover { color: var(--accent); } .nav-links.open a { opacity: 1; transform: none; } .nav-links.open a:nth-child(1) { transition-delay: 0.06s; } .nav-links.open a:nth-child(2) { transition-delay: 0.11s; } .nav-links.open a:nth-child(3) { transition-delay: 0.16s; } .nav-links.open a:nth-child(4) { transition-delay: 0.21s; } .nav-links.open a:nth-child(5) { transition-delay: 0.26s; } .nav-links .lang-switcher { margin-top: 30px; border-color: rgba(255, 255, 255, 0.28); opacity: 0; transform: translateY(16px); transition: opacity 0.4s var(--ease) 0.32s, transform 0.5s var(--ease) 0.32s; } .nav-links.open .lang-switcher { opacity: 1; transform: none; } .nav-links .lang-switcher a { /* le sigle restano piccole: sono un comando, non una voce */ font-family: var(--font); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); opacity: 1; transform: none; transition: color 0.3s var(--ease), background 0.3s var(--ease); } .nav-links .lang-switcher a.active { background: #fff; color: var(--navy-800); } /* sopra il pannello la X e' bianca, e il marchio pure — ma il marchio va anche SOLLEVATO: il pannello e' fixed a tutto schermo e senza z-index il logo finirebbe dipinto sotto, bianco per nessuno */ .nav-toggle.active span { background: #fff; } .navbar:has(.nav-links.open) .nav-logo { position: relative; z-index: 1; } .navbar:has(.nav-links.open) .nav-logo-text span:first-child { color: #fff; } .navbar:has(.nav-links.open) .nav-logo-text span:last-child { color: rgba(255, 255, 255, 0.6); } } /* ========================================================================== PRIMA / DOPO Il confine si trascina: sotto c'e' il web del 2008, sopra il sito che il cantiere monta riga per riga. Il comando e' un steso su tutta la scena — trascinamento e frecce arrivano gratis — e il copione ricopia il valore nella variabile --pd che taglia il pannello nuovo. Senza copione il confine sta a meta'. ========================================================================== */ .primadopo { max-width: 760px; margin: 64px auto 0; } .pd-claim { font-size: 1.02rem; font-weight: 600; margin-bottom: 22px; } .pd-claim strong { color: var(--accent-text); } .pd-scena { position: relative; height: 340px; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px rgba(3, 12, 22, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); text-align: left; } .pd-pannello { position: absolute; inset: 0; } .pd-eti { position: absolute; top: 12px; padding: 3px 11px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .pd-prima .pd-eti { left: 12px; background: rgba(60, 56, 48, 0.75); color: #f3efe6; } .pd-dopo .pd-eti { right: 12px; background: var(--accent); color: var(--on-accent); } /* --- Il 2008: Times, link blu, il contatore delle visite --- */ .pd-prima { background: #e9e6de; font-family: 'Times New Roman', Times, serif; color: #2a2a2a; } .pd-v-testa { background: linear-gradient(180deg, #3a66b0, #1d3f7d); color: #fff; font-size: 1.5rem; font-weight: 700; /* il titolo parte SOTTO la riga della pillola «Prima»: le due cose condividevano l'angolo e la pillola copriva «La tua» */ padding: 40px 18px 12px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); } .pd-v-nav { display: flex; gap: 16px; padding: 8px 18px; background: #d5d0c4; border-bottom: 2px ridge #f5f2ea; font-size: 0.85rem; } .pd-v-nav span { color: #0033a0; text-decoration: underline; } .pd-v-corpo { padding: 18px; } .pd-v-corpo h4 { font-family: inherit; font-size: 1.3rem; color: #8a1010; margin-bottom: 12px; } .pd-v-riga { height: 8px; background: #c9c4b6; margin-bottom: 8px; width: 88%; } .pd-v-riga.corta { width: 55%; } .pd-v-box { display: inline-block; margin-top: 10px; padding: 6px 14px; background: #d5d0c4; border: 2px outset #f5f2ea; font-size: 0.9rem; color: #0033a0; } .pd-v-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 8px 18px; background: #d5d0c4; border-top: 2px groove #f5f2ea; font-size: 0.72rem; color: #5c584e; } /* --- Il dopo: il Grotto Ramofelce come lo faremmo noi — hero fotografica vera (CC0, vedi il partial) e la carta coi prezzi --- */ .pd-dopo { background: var(--paper); clip-path: inset(0 0 0 var(--pd, 50%)); display: flex; flex-direction: column; --border: #dbe6ee; } /* Tutto pende verso destra: col confine a meta' il sito nuovo si deve gia' leggere, senza trascinare fino in fondo. E la scala e' un passo indietro: corpi piccoli, piu' righe di pagina (barra, hero, carta, piede), come una schermata intera vista da lontano. */ .pd-r-hero { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 11px 22px 14px; background: /* velo scuro sopra e sotto: il nome in alto e i testi in basso devono reggere su qualunque punto della fotografia */ linear-gradient(180deg, rgba(6, 22, 38, 0.6) 0%, rgba(6, 22, 38, 0.14) 42%, rgba(6, 22, 38, 0.66) 100%), url('/img/demo/ramofelce.webp') center 55% / cover no-repeat; color: #fff; } .pd-r-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pd-r-marchio { display: inline-flex; align-items: center; gap: 6px; font-family: Archivo, var(--font); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } .pd-r-marchio i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); } .pd-r-voci { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.85); white-space: nowrap; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45); /* la pillola «Dopo» sta nell'angolo: le voci si fermano prima */ margin-right: 56px; } .pd-r-testi { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 4px; margin-left: auto; } .pd-r-h1 { font-family: Archivo, var(--font); font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } .pd-r-sub { font-size: 0.7rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); } .pd-r-btn { margin-top: 6px; padding: 5px 13px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 0.66rem; font-weight: 700; } /* la carta: tre piatti coi prezzi, allineati a destra come il resto */ .pd-r-menu { flex-shrink: 0; display: flex; justify-content: flex-end; gap: 20px; padding: 9px 22px 10px; background: #fff; border-top: 1px solid var(--border); } .pd-r-piatto { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; } .pd-r-piatto em { font-style: normal; font-size: 0.68rem; font-weight: 600; color: #0a2237; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pd-r-piatto b { font-size: 0.64rem; font-weight: 700; color: var(--accent-text, #4a6e31); font-variant-numeric: tabular-nums; } /* il piede: la riga in piu' che fa «pagina intera» */ .pd-r-pie { flex-shrink: 0; padding: 5px 22px 6px; background: var(--navy-800); color: rgba(255, 255, 255, 0.66); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.04em; text-align: right; } @media (max-width: 640px) { .pd-r-h1 { font-size: 1.02rem; } .pd-r-voci { display: none; } .pd-r-piatto:nth-child(3) { display: none; } .pd-r-hero { padding: 10px 16px 12px; } .pd-r-menu, .pd-r-pie { padding-left: 16px; padding-right: 16px; } } /* --- Il confine e la maniglia --- */ .pd-maniglia { position: absolute; top: 0; bottom: 0; left: var(--pd, 50%); width: 0; border-left: 2px solid #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); pointer-events: none; } .pd-nodo { position: absolute; top: 50%; left: 0; transform: translate(calc(-50% - 1px), -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--navy-800); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .pd-nodo svg { width: 18px; height: 18px; } /* il comando vero: un range steso su tutta la scena. `pan-y` lascia passare lo scorrimento verticale della pagina: senza, il dito che attraversa la scena per scorrere restava intrappolato */ .pd-corsa { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; } .pd-corsa:focus-visible ~ .pd-maniglia .pd-nodo, .pd-scena:has(.pd-corsa:focus-visible) .pd-nodo { outline: 3px solid var(--accent); outline-offset: 2px; } @media (max-width: 640px) { .pd-scena { height: 300px; } .pd-v-testa { font-size: 1.15rem; } .pd-n-h1 { font-size: 1.3rem; } } /* col pannello di WhatsApp aperto, il torna-su gli finirebbe dietro */ body.wa-aperto .back-to-top { opacity: 0; pointer-events: none; } /* ========================================================================== L'ORA DELLA VALLE La fotografia dell'hero segue l'ora di chi guarda: alba dorata, giorno neutro, sera ambrata, notte blu — un velo, non un teatro. Le classi le mette il copione; senza copione resta il giorno. ========================================================================== */ .hero::before { transition: filter 1.4s ease; } .hero.ora-alba::before { filter: sepia(0.16) saturate(1.14) brightness(1.03) hue-rotate(-8deg); } .hero.ora-giorno::before { filter: none; } .hero.ora-sera::before { filter: sepia(0.24) saturate(1.18) brightness(0.93) hue-rotate(-12deg); } .hero.ora-notte::before { filter: saturate(0.7) brightness(0.66) hue-rotate(10deg); } /* di notte il puntino dei paesi e' una piccola luce accesa in valle */ .hero.ora-notte .hero-ring-dot { box-shadow: 0 0 12px 3px rgba(134, 181, 93, 0.5); } /* ========================================================================== «DI COSA TI OCCUPI?» — le chips nel modulo dei contatti Un tocco e il messaggio parte gia' impostato. La classe e' sorella di .style-chip del preventivo (stessa faccia) ma il nome e' suo: condividere la classe la incatenerebbe al copione del calcolatore. ========================================================================== */ .chi-blocco { margin-bottom: 16px; } .chi-label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: var(--text); } .chi-chips { display: flex; flex-wrap: wrap; gap: 8px; } .chi-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); } .chi-chip:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary-text); } .chi-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-light); color: var(--accent-text); font-weight: 600; } /* ========================================================================== IL GRIP Le cose che si sentono sotto le dita: la pressione fisica sul tocco, la barra di scorrimento nei colori della casa, il modulo che si accende quando ci si scrive dentro. ========================================================================== */ html { -webkit-tap-highlight-color: transparent; /* solo i colori moderni: le regole ::-webkit-scrollbar costringerebbero macOS alla barra classica sempre visibile, e non vale la pena */ scrollbar-color: var(--navy-500) transparent; } @media (hover: none) { .about-card:active, .service-card:active, .sector-card:active, .piano-card:active, .portfolio-card:active, .faq-question:active, .btn:active, .chi-chip:active, .mp-punto:active .mp-cerchio { transform: scale(0.982); transition: transform 0.09s ease; } } .contact-form:focus-within, .quote-form:focus-within { border-color: var(--primary); box-shadow: 0 14px 44px rgba(24, 91, 139, 0.16); } .contact-form, .quote-form { transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } @media (prefers-reduced-motion: reduce) { .pollice { transition: none !important; } .nav-links a, .nav-links .lang-switcher { transition: none !important; } .hero::before { transition: none !important; } }