/* Pixelized.ch — sito pubblico Colori ufficiali dal file vettoriale del marchio: blu scuro #064667 · blu #0075B2 · grigio del testo #414142 */ :root{ --navy:#064667; --navy-scuro:#053A55; --blu:#0075B2; --blu-chiaro:#6FB4DA; --testo:#414142; --corpo:#54565A; --tenue:#7C8085; --linea:#DCE3E8; --velo:#F4F7F9; --bianco:#fff; --raggio:4px; --colonna:1240px; } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;padding:0} body{ background:var(--bianco);color:var(--corpo); /* Un filo d'aria sopra la testata: si vede all'apertura della pagina e scorre via appena si scende, quando la barra si attacca in alto. */ padding-top:24px; font:16px/1.62 system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; } h1,h2,h3{margin:0;color:var(--testo);font-weight:600;line-height:1.18;letter-spacing:-.01em} h1{font-size:clamp(30px,4.2vw,48px)} h2{font-size:clamp(23px,2.6vw,31px)} h3{font-size:20px} p{margin:0 0 14px 0} p:last-child{margin-bottom:0} img,svg{max-width:100%;display:block} a{color:var(--blu);text-decoration:none} a:hover{color:var(--navy)} :focus-visible{outline:2px solid var(--blu);outline-offset:2px} .riga{max-width:var(--colonna);margin:0 auto;padding:0 28px} .sezione{padding-top:72px;padding-bottom:72px} .fascia-chiara{background:var(--velo);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)} .fascia-scura{background:var(--navy);color:#C9DCE8;padding:72px 0} .fascia-scura h1,.fascia-scura h2,.fascia-scura h3,.fascia-scura b{color:#fff} .fascia-scura a{color:#fff} .salta{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:10px 16px;z-index:99} .salta:focus{left:12px;top:12px;color:#fff} /* ---------- testata ---------- */ .testata{background:#fff;border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:40} .testata-in{display:flex;align-items:center;gap:30px;padding-top:16px;padding-bottom:16px} .marchio img{height:30px;width:auto} .menu{display:flex;gap:26px;font-size:15.5px;margin-left:auto} .menu a{color:var(--testo);padding:4px 0;border-bottom:2px solid transparent} .menu a:hover{color:var(--blu)} .menu a.on{color:var(--blu);border-bottom-color:var(--blu)} .apri-menu,.bottone-menu{display:none} /* Il selettore della lingua compare solo quando le lingue sono piu di una. */ .lingue{display:flex;gap:10px;font-size:14px;margin-left:22px} .lingue a{color:var(--tenue)} .lingue a.on{color:var(--navy);font-weight:600} /* ---------- il segno del marchio dietro alla home ---------- */ /* In home la X e una sola e grande, come sullo sfondo delle fatture A4: sta su uno strato dietro, cosi non tocca ne il testo ne le fasce scure. Le altre pagine tengono la filigrana piccola in alto a destra dell'apertura. */ /* Lo strato con la X sta dietro al contenuto senza toccarlo: il bianco lo tiene , il corpo resta trasparente e la X gli passa sotto. Cosi non serve dare una posizione ai blocchi della pagina, che spegnerebbe sia lo sticky della testata sia il fuori-schermo del collegamento "Vai al contenuto". */ .corpo-home{position:relative;background:transparent} .corpo-home::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:url('/assets/img/favicon.svg') no-repeat right -190px top -150px/1180px 1180px; opacity:.05} /* L'apertura ha fondo bianco: in home lo togliamo, se no copre la X. */ .corpo-home .apertura{background:transparent} /* ---------- apertura ---------- */ .apertura{position:relative;overflow:hidden;background:#fff} /* Il segno di sfondo e la X del marchio, non una forma inventata: cosi le proporzioni e gli allineamenti sono quelli veri. Sta qui e non nelle viste, cosi ogni pagina ce l'ha senza doverselo ricordare. */ .apertura::before,.testa-pagina::before{content:"";position:absolute; top:-60px;right:-70px;width:420px;height:420px; background:url('/assets/img/favicon.svg') center/contain no-repeat;opacity:.05; pointer-events:none} /* In home comanda la X grande dietro tutta la pagina: qui la filigrana toglie il disturbo. */ .corpo-home .apertura::before{display:none} .apertura h1{max-width:900px;margin-bottom:22px} .occhiello{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--blu);font-weight:600;margin-bottom:18px} .occhiello.chiaro{color:var(--blu-chiaro)} .sommario{font-size:18.5px;max-width:680px;color:var(--corpo)} .fascia-scura .sommario{color:#C9DCE8} /* L'apertura della home e della Fotografia e la testa delle altre pagine avevano due spaziature diverse di pochi pixel: qui stanno insieme, cosi non possono piu allontanarsi senza che ce ne accorgiamo. */ .testa-pagina{position:relative;overflow:hidden} /* Le pagine di solo testo hanno una testata corta: senza un'altezza minima la X del marchio verrebbe tagliata a meta. */ .testa-pagina.con-segno{min-height:300px} .apertura,.testa-pagina{padding:84px 0 56px 0} .testa-pagina h1{max-width:880px;margin-bottom:20px} .marchio-grande{height:38px;width:auto;margin-bottom:26px} /* ---------- schede e griglie ---------- */ .scheda{background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:28px 26px} .griglia-due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .griglia-tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .due-colonne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start} .strade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:8px;padding-bottom:76px} .strada h2{margin:12px 0 12px 0;font-size:28px} .azioni{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px} .bottone{display:inline-block;padding:13px 26px;border-radius:var(--raggio);background:var(--blu); color:#fff !important;font-weight:600;font-size:15px;border:1px solid var(--blu)} .bottone:hover{background:var(--navy);border-color:var(--navy)} .bottone.vuoto{background:transparent;color:var(--navy) !important;border-color:#B9C6D0} .bottone.vuoto:hover{border-color:var(--blu);color:var(--blu) !important} .bottone.chiaro{background:#fff;color:var(--navy) !important;border-color:#fff} .bottone.chiaro:hover{background:#E7F0F6} .oltre{font-size:15px;font-weight:500} .oltre::after{content:" \2192"} .nota{font-size:14.5px;color:var(--tenue)} .fascia-scura .nota{color:#9FBDCE} .minuta{font-size:13px;margin-top:14px} .filetto{display:block;width:44px;height:3px;background:var(--blu);border-radius:2px;margin-bottom:18px} .intestazione-sezione{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;margin-bottom:32px} .intestazione-sezione h2{max-width:660px} .intestazione-sezione .nota{max-width:280px} h2.piccolo{font-size:20px;margin-bottom:20px} /* ---------- numeri ---------- */ .numeri{padding:52px 0} .numeri-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center} .numero{font-size:clamp(30px,3.6vw,44px);font-weight:600;color:#fff;line-height:1;margin:0} .numero-etichetta{font-size:14.5px;color:#9FBDCE;margin:10px 0 0 0} /* ---------- progetti ---------- */ .scheda-progetto{display:flex;flex-direction:column;gap:10px;color:var(--corpo)} .scheda-progetto:hover{border-color:var(--blu);color:var(--corpo)} .scheda-progetto p{font-size:15px;margin:0} .titolo-riga{display:flex;align-items:center;justify-content:space-between;gap:12px} .stato{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600; padding:4px 9px;border-radius:2px;background:var(--velo);color:var(--tenue);border:1px solid var(--linea);white-space:nowrap} .stato.acceso{background:var(--blu);color:#fff;border-color:var(--blu)} .scheda-futura{border-style:dashed;background:transparent} .scheda-futura h3{color:var(--tenue)} .percorso{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding-top:52px} .momento{padding:0 22px;border-left:1px solid var(--linea)} .momento:first-child{padding-left:0;border-left:0} .momento-numero{font-size:13px;letter-spacing:.08em;color:var(--blu);font-weight:600;margin-bottom:0} /* Il titolo della tappa resta leggero: i nomi delle piattaforme devono essere la prima cosa che si vede. Il filetto separa il titolo dai nomi. */ .momento h2{font-size:15px;font-weight:400;line-height:1.45;letter-spacing:0; min-height:44px;margin:12px 0 0 0;padding-bottom:14px;border-bottom:1px solid var(--linea)} .momento-progetti{display:flex;flex-direction:column;gap:6px;padding:14px 0 0 0;margin-bottom:10px} .momento-progetti a{font-weight:600;color:var(--navy);font-size:16px} .momento-progetti a:hover{color:var(--blu)} .momento-vuoto{font-weight:600;color:var(--tenue);font-size:16px;margin:0} .momento-futuro{opacity:.72} /* A chi si rivolge la tappa: pastiglie leggere, due per riga sulle colonne strette. */ .pubblico{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 0 0} .pubblico span{font-size:11.5px;line-height:1;padding:5px 9px;border-radius:999px; background:#fff;border:1px solid var(--linea);color:var(--corpo);white-space:nowrap} .legenda-pubblico{margin:0;padding:16px 0 52px 0; font-size:13px;line-height:1.6;color:var(--tenue)} .legenda-pubblico b{color:var(--corpo);font-weight:600} /* ---------- scheda progetto ---------- */ .briciole{padding-top:22px;font-size:13.5px;color:var(--tenue)} .briciole a{color:var(--tenue)} .briciole a:hover{color:var(--blu)} .testa-progetto{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start;padding-top:26px;padding-bottom:56px} .riga-stato{display:flex;align-items:center;gap:12px;margin-bottom:16px} .testa-progetto h1{margin-bottom:16px} /* Il caso di studio: due colonne come la fascia del libro, ma su fondo bianco e con un filo sopra che lo stacca dalla griglia delle piattaforme. */ .caso{border-top:1px solid var(--linea)} .caso h2{margin-bottom:18px} .scheda-dati{background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:6px 24px} .scheda-dati>div{padding:16px 0;border-bottom:1px solid #EEF2F5} .scheda-dati>div:last-child{border-bottom:0} .scheda-dati span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);margin-bottom:5px} .scheda-dati b{font-weight:500;color:var(--testo)} .scheda-dati.scura{background:transparent;border-color:#1D5A7D} .scheda-dati.scura>div{border-bottom-color:#1D5A7D} .scheda-dati.scura span{color:#9FBDCE} .scheda-dati.scura b{color:#fff} /* ---------- servizi ---------- */ .elenco-capacita{padding-bottom:40px;border-top:1px solid var(--linea)} .capacita{display:grid;grid-template-columns:64px minmax(0,1fr) 300px;gap:34px;padding:30px 0;border-bottom:1px solid var(--linea);align-items:start} .capacita h2{font-size:23px;margin-bottom:8px} .capacita p{font-size:15.5px;margin:0;max-width:620px} .capacita-numero{font-size:15px;font-weight:600;color:var(--blu);padding-top:4px;margin:0} .prova{border-left:3px solid var(--blu);padding:2px 0 2px 18px} .prova-titolo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);margin-bottom:5px} .prova p{color:var(--testo);font-size:15px} .su-richiesta{background:var(--velo);display:flex;align-items:center;justify-content:space-between;gap:36px;margin-bottom:76px} .su-richiesta strong{color:var(--testo)} /* ---------- listino hosting ---------- */ /* Due versioni dello stesso listino: la tabella unica per confrontare tutto, e una tabella per famiglia quando lo schermo non regge quattro colonne. */ .listino-largo{overflow-x:auto;-webkit-overflow-scrolling:touch} .listino-stretto{display:none} .listino{width:100%;border-collapse:collapse;min-width:900px} .listino td,.listino th{text-align:left;font-weight:400} .listino .vuota{border:0;background:#fff} .listino .famiglia{padding:0 18px 10px 18px;font-size:11.5px;letter-spacing:.11em; text-transform:uppercase;font-weight:600;color:var(--navy);text-align:center} .listino .riga-famiglie th{border-bottom:2px solid var(--navy)} .listino .famiglia-commerciale{color:var(--blu)} .listino .riga-famiglie .famiglia-commerciale{border-bottom-color:var(--blu)} .listino .stacco{border-left:1px solid var(--linea)} .listino .riga-famiglie th+th{padding-left:26px} .listino .piano{padding:14px 18px 18px 18px;vertical-align:bottom;border-bottom:1px solid var(--linea); border-top:3px solid transparent} .listino .piano.evidenza{border-top-color:var(--blu)} .listino .etichetta{display:inline-block;font-size:10px;letter-spacing:.09em;text-transform:uppercase; font-weight:600;background:var(--blu);color:#fff;padding:3px 8px;border-radius:2px;margin-bottom:8px} .listino .piano-nome{display:block;font-size:19px;font-weight:600;color:var(--testo);margin-bottom:8px} .listino .piano-prezzo{display:block;font-size:31px;font-weight:600;color:var(--navy);line-height:1} .listino .piano-prezzo small{font-size:13px;font-weight:400;color:var(--tenue);margin-left:6px} .listino tbody th{padding:13px 20px 13px 0;font-size:14.5px;color:var(--corpo);white-space:nowrap; border-bottom:1px solid #EEF2F5} .listino tbody td{padding:13px 18px;font-size:14.5px;color:var(--testo);border-bottom:1px solid #EEF2F5} .listino .evidenza{background:#F1F8FC} .listino tfoot td{padding:22px 18px 26px 18px;border:0} .listino .si{color:var(--blu);font-weight:700} .listino .no{color:#C3CED6} .listino-famiglia{min-width:0;margin-bottom:40px} .listino-famiglia caption{text-align:left;padding:0 0 12px 0;border-bottom:2px solid var(--navy)} .listino-famiglia caption.famiglia-commerciale{border-bottom-color:var(--blu)} .listino-famiglia .piano{padding:16px 10px 18px 10px;text-align:center} .listino-famiglia .piano-nome{font-size:16px} .listino-famiglia .piano-prezzo{font-size:25px} .listino-famiglia .piano-prezzo small{display:block;margin:4px 0 0 0} .listino-famiglia tbody th{padding:11px 10px 11px 0;font-size:13.5px;white-space:normal} .listino-famiglia tbody td{padding:11px 10px;font-size:13.5px;text-align:center} .listino-famiglia tfoot td{padding:18px 8px 0 8px;text-align:center} .listino-famiglia .bottone{display:block;padding-left:8px;padding-right:8px;font-size:14px} .opzioni{margin-top:4px} .opzione{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:20px 24px} .opzione span{color:var(--testo)} .opzione b{color:var(--navy);white-space:nowrap;text-align:right} /* "a partire da" sta sopra al prezzo, piccolo: il numero resta la cosa che si legge. */ .opzione .da{display:block;font-size:11.5px;font-weight:400;color:var(--tenue);letter-spacing:.02em} .opzione small.nota{display:block;font-size:13px;margin-top:4px} /* ---------- nomi clienti ---------- */ /* Ogni nome e un blocco che non si spezza, e porta con se il separatore: cosi il punto non finisce mai da solo a inizio riga. */ /* I nomi stanno in colonne invece che in una riga continua con i puntini: allineati incolonnati si leggono come un elenco, di fila sembravano buttati li. */ .nomi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 24px; font-size:16.5px;color:var(--testo);margin:0} .nomi span{display:block;overflow-wrap:anywhere} /* ---------- contatti ---------- */ .contatti{padding-bottom:80px;gap:72px} .dati-contatto .voce{padding:18px 0;border-bottom:1px solid var(--linea)} .dati-contatto .voce:first-child{padding-top:0} .dati-contatto .voce:last-child{border-bottom:0} .voce-titolo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);margin-bottom:6px} .dati-contatto p{color:var(--testo);margin:0} .modulo{background:#fff;border:1px solid var(--linea);border-radius:var(--raggio);padding:28px 26px} .campo{margin-bottom:18px} .campo label{display:block;font-size:13px;color:var(--tenue);margin-bottom:6px} .campo input,.campo textarea{width:100%;padding:12px 14px;border:1px solid var(--linea); border-radius:3px;font:inherit;font-size:16px;color:var(--testo);background:#fff} .campo input:focus,.campo textarea:focus{outline:2px solid var(--blu);outline-offset:1px;border-color:var(--blu)} .modulo button{cursor:pointer;font-family:inherit} .esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .avviso{border-radius:var(--raggio);padding:16px 18px;font-size:15px} .avviso-ok{background:#EAF6EE;border:1px solid #BFE3CC;color:#1B5E32} .avviso-errore{background:#FDECEA;border:1px solid #F3C4BF;color:#8E2018;margin-bottom:20px} /* Inviti in fondo alle pagine: sfondo chiaro, altrimenti attaccati alla chiusura blu sembrano un piede di pagina alto il doppio. */ .fascia-invito{background:var(--velo);border-top:1px solid var(--linea);padding:64px 0} .fascia-invito h2{margin-bottom:12px} /* ---------- chiusura ---------- */ .chiusura{background:var(--navy);color:#9FBDCE;padding:64px 0 26px 0;font-size:15px;margin-top:0} .chiusura h2{color:#fff;font-size:15px;font-weight:600;margin-bottom:14px} .chiusura a{color:#C9DCE8} .chiusura a:hover{color:#fff} .chiusura-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px} .marchio-negativo{height:26px;width:auto;margin-bottom:16px;opacity:.96} .fitto{line-height:1.8} .idi{color:#7EA3B8;font-size:13.5px} .sotto-titolo{margin:-6px 0 22px 0;max-width:620px} .chiusura-fondo{margin-top:48px;padding-top:20px;border-top:1px solid #1D5A7D; display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#7EA3B8} /* Il collegamento alla privacy sta sulla stessa riga del copyright e ha lo stesso tono: e una nota a pie di pagina, non un invito. */ .chiusura-fondo a{color:#7EA3B8} .chiusura-fondo a:hover{color:#fff} /* ---------- adattamento ---------- */ @media (max-width:1080px){ .nomi{grid-template-columns:repeat(4,minmax(0,1fr))} .capacita{grid-template-columns:48px minmax(0,1fr);gap:20px} .prova{grid-column:2;margin-top:6px} .testa-progetto{grid-template-columns:1fr;gap:34px} .percorso{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0} .momento{padding:0 20px} .momento:nth-child(odd){padding-left:0;border-left:0} .momento h2{min-height:0} .chiusura-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px} .numeri-griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px} } @media (max-width:820px){ .riga{padding-left:20px;padding-right:20px} .sezione{padding-top:56px;padding-bottom:56px} .strade,.griglia-tre,.griglia-due,.due-colonne{grid-template-columns:1fr;gap:18px} .due-colonne{gap:34px} .intestazione-sezione{flex-direction:column;align-items:flex-start;gap:16px} .intestazione-sezione .nota{max-width:none} .su-richiesta{flex-direction:column;align-items:flex-start;gap:16px} .contatti{gap:40px} .apertura::before,.testa-pagina::before{width:260px;height:260px;top:-40px;right:-60px;opacity:.04} .testa-pagina.con-segno{min-height:200px} .listino-largo{display:none} .listino-stretto{display:block} .corpo-home::before{background-size:760px 760px;background-position:right -250px top -70px;opacity:.045} /* menu a scomparsa, senza JavaScript */ .testata-in{flex-wrap:wrap;gap:14px} .marchio{margin-right:auto} .bottone-menu{display:flex;flex-direction:column;justify-content:center;gap:5px; width:42px;height:38px;padding:0 8px;border:1px solid var(--linea);border-radius:3px;cursor:pointer} .bottone-menu span{display:block;height:2px;background:var(--testo);border-radius:2px} .menu{display:none;order:5;width:100%;flex-direction:column;gap:0;margin:0} .menu a{padding:12px 0;border-bottom:1px solid var(--linea)} .menu a.on{border-bottom-color:var(--linea)} .apri-menu:checked ~ .menu{display:flex} } @media (max-width:520px){ .nomi{grid-template-columns:repeat(2,minmax(0,1fr))} .numeri-griglia{grid-template-columns:1fr;gap:24px} .chiusura-griglia{grid-template-columns:1fr} .capacita{grid-template-columns:1fr} .prova{grid-column:1} .percorso{grid-template-columns:1fr} .momento{padding:0;border-left:0} /* Sui telefoni piu stretti il listino si stringe ancora un po'. */ .listino-famiglia tbody th{padding-right:8px;font-size:12.5px} .listino-famiglia tbody td{padding:11px 6px;font-size:12.5px} .listino-famiglia .piano{padding:16px 6px 18px 6px} .listino-famiglia .piano-nome{font-size:15px} .listino-famiglia .piano-prezzo{font-size:22px} .listino-famiglia .bottone{font-size:13px} } /* ---------- lavori ---------- */ .scheda-lavoro{display:flex;flex-direction:column;gap:10px;color:var(--corpo);padding:0;overflow:hidden} .scheda-lavoro:hover{border-color:var(--blu)} .scheda-lavoro .anteprima{width:100%;height:180px;object-fit:cover;background:var(--velo)} .scheda-lavoro .titolo-riga,.scheda-lavoro p{padding:0 22px} .scheda-lavoro .titolo-riga{padding-top:18px} .scheda-lavoro p{padding-bottom:22px;font-size:15px;margin:0} .galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px} .galleria figure{margin:0} .galleria img{width:100%;border:1px solid var(--linea);border-radius:var(--raggio)} /* La colonna di lettura sta dentro la riga, non al posto suo: se sostituisse la larghezza della .riga il testo finirebbe centrato invece che allineato al titolo, come su ogni altra pagina. */ .testo-lungo{max-width:760px} .testo-lungo p{margin-bottom:16px} /* ---------- anteprima di un lavoro privato ---------- Si vede solo da chi e entrato nel pannello. Deve stonare: se somigliasse al sito, prima o poi qualcuno manderebbe in giro un indirizzo che per tutti gli altri non esiste. */ .fascia-anteprima{margin:0;padding:14px 20px;background:#FFF4D6; border-bottom:1px solid #E8CF8A;color:#6B4E00;font-size:15px;text-align:center} .fascia-anteprima b{color:#4A3600} /* ---------- ingrandimento di un'immagine ---------- Il collegamento porta all'originale: senza JavaScript l'immagine si apre in una scheda nuova, e questa parte non entra in gioco. */ .galleria figure a{display:block;border-radius:var(--raggio);overflow:hidden} .galleria figure a:focus-visible{outline:2px solid var(--blu);outline-offset:3px} .galleria figure a img{transition:transform .25s ease} .galleria figure a:hover img{transform:scale(1.02)} .ingranditore{position:fixed;inset:0;z-index:100;display:flex;align-items:center; justify-content:center;padding:40px 24px;background:rgba(6,70,103,.92)} .ingranditore[hidden]{display:none} .ingranditore-dentro{max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:12px} .ingranditore img{max-width:100%;max-height:calc(100vh - 130px);width:auto;height:auto; margin:0 auto;border-radius:var(--raggio);background:var(--bianco)} .ingranditore-nome{margin:0;text-align:center;color:var(--bianco);font-size:14px;opacity:.9} .ingranditore-chiudi{position:absolute;top:14px;right:18px;width:44px;height:44px; font-size:28px;line-height:1;color:var(--bianco);background:transparent;border:0; cursor:pointer;padding:0} .ingranditore-chiudi:hover{opacity:.7} .con-ingranditore{overflow:hidden} /* ---------- stacchi verticali fuori misura ---------- Erano attributi style= scritti dentro le viste: la CSP del sito (style-src 'self') li rifiuta, quindi non venivano mai applicati. */ .sezione.senza-stacco{padding-top:0} .sezione.stacco-minimo{padding-top:20px} .testa-pagina.stacco-corto{padding-top:26px} /* ---------- area clienti ---------- Usa il vestito del sito pubblico, perche' chi la guarda e' un cliente e non un impiegato: stessa colonna, stessi colori, stessi bottoni. Le pagine sono sempre noindex, lo decide il controller e non la vista. */ .area-stretta{max-width:560px;padding-top:52px;padding-bottom:72px} .area-stretta h1{margin-bottom:14px} .area-stretta > p{margin-bottom:22px} .area-corpo{padding-top:8px;padding-bottom:72px} .area-corpo h1{margin-bottom:14px} .area-corpo > p{margin-bottom:24px;max-width:680px} .area-testa{display:flex;justify-content:space-between;align-items:flex-end; gap:24px;flex-wrap:wrap;padding:34px 0 16px 0;border-bottom:1px solid var(--linea); margin-bottom:26px} .area-chi{margin:0 0 8px 0;font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:var(--blu);font-weight:600} .area-menu{display:flex;gap:22px;flex-wrap:wrap} .area-menu a{color:var(--testo);padding-bottom:3px;border-bottom:2px solid transparent} .area-menu a:hover{color:var(--blu)} .area-menu a.on{color:var(--blu);border-bottom-color:var(--blu)} .area-esci button{background:transparent;border:1px solid #B9C6D0;border-radius:var(--raggio); padding:9px 18px;font:inherit;font-size:14px;color:var(--navy);cursor:pointer} .area-esci button:hover{border-color:var(--blu);color:var(--blu)} /* Moduli. Il pannello ha i suoi, ma quelli stanno in admin.css e questa e' una pagina pubblica: qui servono le stesse classi con i colori del sito. */ .form-area{margin-bottom:26px} .form-area .row{margin-bottom:18px} .form-area label{display:block;font-size:13px;color:var(--tenue);margin-bottom:6px} .form-area input,.form-area select,.form-area textarea{width:100%;padding:12px 14px; border:1px solid var(--linea);border-radius:var(--raggio);font:inherit;font-size:15px; color:var(--testo);background:#fff} .form-area input:focus,.form-area select:focus,.form-area textarea:focus{ outline:2px solid var(--blu);outline-offset:1px;border-color:var(--blu)} .form-area input:disabled{background:var(--velo);color:var(--tenue)} .form-area .due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px} .form-area .tre{display:grid;grid-template-columns:.6fr 1.4fr 1fr;gap:0 20px} .form-area .aiuto{font-size:13px;color:var(--tenue);margin:6px 0 0 0;line-height:1.55} .form-area .azioni-form{margin-top:8px} .form-area button[type=submit]{display:inline-block;padding:13px 26px;border-radius:var(--raggio); background:var(--blu);color:#fff;font-weight:600;font-size:15px;border:1px solid var(--blu); font-family:inherit;cursor:pointer} .form-area button[type=submit]:hover{background:var(--navy);border-color:var(--navy)} .facoltativo{color:var(--tenue);font-weight:400;text-transform:none;letter-spacing:0} /* Il campo esca: fuori dallo schermo, non display:none. Un programma che compila i moduli spesso salta quello che e' nascosto del tutto, mentre questo lo vede e ci casca. Per una persona non esiste: aria-hidden lo toglie ai lettori di schermo e tabindex="-1" alla tastiera. */ .esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .flash{padding:12px 15px;border-radius:var(--raggio);font-size:14.5px;margin-bottom:22px} .flash-error{background:#FDECEA;color:#8E2018;border:1px solid #F3C4BF} .flash-success{background:#EAF6EE;color:#1B5E32;border:1px solid #BFE3CC} .avviso-conferma,.avviso-dati{background:#FEF8E7;border:1px solid #E8CF8A; border-radius:var(--raggio);padding:16px 18px;margin-bottom:24px;color:#5C4400} .avviso-conferma p,.avviso-dati p{margin:0;font-size:14.5px;line-height:1.6} .avviso-conferma a,.avviso-dati a{color:#7A4E00;text-decoration:underline} .avviso-conferma form{margin-top:12px} .avviso-conferma button{background:transparent;border:1px solid #D8BE72;border-radius:var(--raggio); padding:8px 16px;font:inherit;font-size:14px;color:#5C4400;cursor:pointer} .avviso-conferma button:hover{background:#F7EDD2} .area-vuota{background:var(--velo);border:1px solid var(--linea);border-radius:var(--raggio); padding:30px 28px} .area-vuota p{margin:0 0 10px 0} .area-vuota p:last-child{margin-bottom:0} @media (max-width:720px){ .form-area .due,.form-area .tre{grid-template-columns:1fr} .area-testa{align-items:flex-start} }