/* Hydra Health — foglio di stile unico del sito. Viene dal design system Broadsheet dei mockup (design/_ds/…): fondo carta, inchiostro quasi nero, accento ciano, secondo accento magenta usato di rado, filetti doppi da prima pagina. I colori sono stati corretti per il livello AA e i caratteri cambiati con due famiglie aperte servite da qui: Lora per titoli e testo, Titillium Web per l'interfaccia (menu, pulsanti, etichette). Regole di questo file, controllate dai test (landing/tests/): - i colori stanno SOLO nelle variabili dei temi qui sotto; nel resto del file si usa var(--…), mai un colore scritto a mano; - niente opacity per spegnere un testo: un testo secondario ha il suo colore, misurato; - misure in rem, così la dimensione del testo scelta dall'utente ingrandisce tutto insieme. Temi: :root è il tema chiaro; [data-tema="penombra"] e [data-tema="scuro"] ridefiniscono i colori. Il tema e la dimensione del testo li scrive sull'elemento js/aspetto-iniziale.js, prima che la pagina venga disegnata. Contrasto verificato da test_contrasto.py: testo 4,5:1 su ogni fondo, bordi dei campi e anello di messa a fuoco 3:1. */ :root{ --fondo:#f3f2f2; --superficie:#fbfbfa; --campo:#ffffff; --tinta:#e3f3fa; --testo:#201e1d; --testo-2:#4a4746; --accento:#006786; --accento-2:#aa0b56; --pulsante:#006786; --pulsante-testo:#ffffff; --pulsante-sopra:#004961; --bordo-campo:#767271; --filo:#201e1d; --divisore:#d7d3d3; --fuoco:#006786; --errore:#aa0b56; --errore-fondo:#fff1f4; --ombra:rgb(45 43 43 / 0.14); color-scheme:light; --font-testo:"Lora",Georgia,"Times New Roman",serif; --font-interfaccia:"Titillium Web","Segoe UI",system-ui,sans-serif; --spazio-1:0.3125rem; --spazio-2:0.625rem; --spazio-3:0.9375rem; --spazio-4:1.25rem; --spazio-6:1.875rem; --spazio-8:2.5rem; --spazio-12:3.75rem; --spazio-16:5rem; --raggio:2px; --margine:clamp(1rem, 5vw, 4.5rem); --larghezza:75rem; } /* Penombra: grigio ardesia, per chi trova il bianco troppo luminoso ma non vuole il nero. */ :root[data-tema="penombra"]{ --fondo:#2a2f35; --superficie:#323840; --campo:#3a414a; --tinta:#29485a; --testo:#f2f3f5; --testo-2:#cdd3da; --accento:#8fd6f2; --accento-2:#ffb0cb; --pulsante:#8fd6f2; --pulsante-testo:#0a2733; --pulsante-sopra:#bfe9f9; --bordo-campo:#9aa4af; --filo:#f2f3f5; --divisore:#4c545e; --fuoco:#8fd6f2; --errore:#ffb0cb; --errore-fondo:#43303a; --ombra:rgb(0 0 0 / 0.3); color-scheme:dark; } :root[data-tema="scuro"]{ --fondo:#121212; --superficie:#1c1b1b; --campo:#242222; --tinta:#0f3444; --testo:#f1efee; --testo-2:#c4c0be; --accento:#62c5ee; --accento-2:#ff90b1; --pulsante:#62c5ee; --pulsante-testo:#0a303e; --pulsante-sopra:#99e0ff; --bordo-campo:#8a8583; --filo:#f1efee; --divisore:#3a3737; --fuoco:#62c5ee; --errore:#ff90b1; --errore-fondo:#3a1a25; --ombra:rgb(0 0 0 / 0.5); color-scheme:dark; } /* Dimensione del testo: sette passi dal 87,5% al 200%. Tutte le misure sono in rem, quindi crescono insieme. */ html{font-size:100%} html[data-testo="87"]{font-size:87.5%} html[data-testo="112"]{font-size:112.5%} html[data-testo="125"]{font-size:125%} html[data-testo="150"]{font-size:150%} html[data-testo="175"]{font-size:175%} html[data-testo="200"]{font-size:200%} /* — caratteri, serviti da questo server (licenza OFL, vedi font/) — */ @font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap; src:url("../font/lora-latin-400-normal.5d5a586a9741.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap; src:url("../font/lora-latin-ext-400-normal.6b6382ec0af7.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap; src:url("../font/lora-latin-400-italic.e7ae818b8c7b.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap; src:url("../font/lora-latin-ext-400-italic.059c98dd80a1.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap; src:url("../font/lora-latin-600-normal.5ec93d4b0359.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap; src:url("../font/lora-latin-ext-600-normal.7ac3cf55df28.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Lora";font-style:italic;font-weight:600;font-display:swap; src:url("../font/lora-latin-600-italic.3ecd02775047.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Lora";font-style:italic;font-weight:600;font-display:swap; src:url("../font/lora-latin-ext-600-italic.f25bf9fd5194.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap; src:url("../font/titillium-web-latin-400-normal.cfb5bec034d2.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap; src:url("../font/titillium-web-latin-ext-400-normal.0180cb3f1ae2.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap; src:url("../font/titillium-web-latin-600-normal.b65bd9e79f1d.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap; src:url("../font/titillium-web-latin-ext-600-normal.087727664a10.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;font-display:swap; src:url("../font/titillium-web-latin-700-normal.6a025e378400.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;font-display:swap; src:url("../font/titillium-web-latin-ext-700-normal.74b01ace6370.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* — base — */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:auto;-webkit-text-size-adjust:100%} body{margin:0;background:var(--fondo);color:var(--testo);font-family:var(--font-testo); font-size:1.0625rem;line-height:1.65;overflow-wrap:break-word;text-wrap:pretty} h1,h2,h3{font-family:var(--font-testo);font-weight:600;line-height:1.15;margin:0 0 var(--spazio-4); letter-spacing:-0.01em;hyphens:manual} h2{font-size:clamp(1.875rem, 1.3rem + 2vw, 3rem);max-width:22ch} h3{font-size:1.4rem} p{margin:0 0 var(--spazio-3)} ul{margin:0;padding:0} a{color:var(--accento);text-underline-offset:0.2em;text-decoration-thickness:1px} a:hover{text-decoration-thickness:2px} em{font-style:italic} :focus{outline:none} :focus-visible{outline:3px solid var(--fuoco);outline-offset:3px;border-radius:var(--raggio)} ::selection{background:var(--tinta);color:var(--testo)} main:focus-visible{outline:none} /* Chi naviga ai paragrafi con #ancora non deve finire sotto il bordo. */ [id]{scroll-margin-top:var(--spazio-4)} .icona{width:1.2em;height:1.2em;flex:none;vertical-align:-0.2em} .icona.media{width:1.75rem;height:1.75rem;color:var(--accento)} .icona.grande{width:2.5rem;height:2.5rem;color:var(--accento)} /* Nascosto alla vista, letto dal lettore di schermo. */ .vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .salta{position:absolute;left:var(--spazio-2);top:-100rem;z-index:10;background:var(--pulsante); color:var(--pulsante-testo);font-family:var(--font-interfaccia);font-weight:600; padding:var(--spazio-2) var(--spazio-4);border-radius:var(--raggio);text-decoration:none} .salta:focus{top:var(--spazio-2)} /* Testata e contenuto hanno lo stesso bordo sinistro: larghezza utile più i margini. */ .contenitore{max-width:calc(var(--larghezza) + 2 * var(--margine));margin:0 auto;padding:0 var(--margine)} /* — pulsanti — */ .pulsante{display:inline-flex;align-items:center;justify-content:center;gap:var(--spazio-2); min-height:2.75rem;padding:var(--spazio-2) var(--spazio-4);border:2px solid transparent; border-radius:var(--raggio);font-family:var(--font-interfaccia);font-size:1rem;font-weight:600; line-height:1.2;text-decoration:none;cursor:pointer;text-align:center} .pulsante.grande{font-size:1.0625rem;padding:var(--spazio-3) var(--spazio-6)} .pulsante.primario{background:var(--pulsante);color:var(--pulsante-testo)} .pulsante.primario:hover{background:var(--pulsante-sopra);text-decoration:underline} .pulsante.secondario{background:transparent;color:var(--accento);border-color:var(--accento)} .pulsante.secondario:hover{background:var(--tinta);text-decoration:underline} /* — testata — */ .testata{padding:0 var(--margine);max-width:calc(var(--larghezza) + 2 * var(--margine));margin:0 auto} .aspetto{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--spazio-2) var(--spazio-6); padding:var(--spazio-2) 0;font-family:var(--font-interfaccia);font-size:0.9375rem; border-bottom:1px solid var(--divisore)} .aspetto[hidden]{display:none} .aspetto-comandi{display:contents} .aspetto .apri-aspetto{display:none} .aspetto-gruppo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spazio-1)} .aspetto-etichetta{display:inline-flex;align-items:center;gap:var(--spazio-1);color:var(--testo-2); margin-right:var(--spazio-1)} .aspetto-tasto{display:inline-flex;align-items:center;gap:var(--spazio-1);min-height:2.75rem; min-width:2.75rem;justify-content:center;padding:0 var(--spazio-2);font:inherit; color:var(--testo);background:var(--campo);border:1px solid var(--bordo-campo); border-radius:var(--raggio);cursor:pointer} .aspetto-tasto:hover{background:var(--tinta)} .aspetto-tasto[aria-pressed="true"]{background:var(--pulsante);color:var(--pulsante-testo); border-color:var(--pulsante);font-weight:600} .aspetto-tasto:disabled{cursor:not-allowed;color:var(--testo-2);background:var(--superficie); border-style:dashed} .navigazione{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spazio-3) var(--spazio-6); padding:var(--spazio-4) 0 var(--spazio-3);font-family:var(--font-interfaccia)} .marchio{display:inline-flex;align-items:center;gap:var(--spazio-2);margin-right:auto; font-family:var(--font-testo);font-size:1.5rem;font-weight:600;color:var(--testo); text-decoration:none;letter-spacing:-0.01em} .marchio .icona{width:1.75rem;height:1.75rem;color:var(--accento)} .voci{display:flex;flex-wrap:wrap;gap:var(--spazio-1) var(--spazio-4);list-style:none} .voci a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:1.0625rem; color:var(--testo);text-decoration:none;border-bottom:2px solid transparent} .voci a:hover{border-bottom-color:var(--accento);color:var(--accento)} /* I filetti da prima pagina: uno spesso e uno sottile, a pieno inchiostro. */ .filetto-doppio{height:0.5rem;border-top:3px solid var(--filo);border-bottom:1px solid var(--filo)} /* — prima schermata — */ .eroe{display:grid;grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:var(--spazio-8) clamp(2rem, 5vw, 5rem);align-items:end; padding:clamp(3.5rem, 9vw, 8.5rem) 0 clamp(3rem, 6vw, 6rem)} /* Il titolo non va mai a capo dentro una parola: la misura è scelta perché «piattaforma.» stia intera nella colonna, anche a 320 pixel. */ .eroe-titolo{font-size:clamp(2.25rem, 0.9rem + 4.2vw, 5.25rem);line-height:1.04; letter-spacing:-0.02em;margin:0;max-width:none;overflow-wrap:normal} .eroe-titolo span{display:block} .eroe-titolo em{color:var(--accento)} .attacco{font-size:clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);line-height:1.6;max-width:52ch} .azioni{display:flex;flex-wrap:wrap;gap:var(--spazio-3);margin-top:var(--spazio-6)} /* — fascia di sintesi — */ .sintesi{padding-bottom:clamp(3rem, 6vw, 6rem)} .dateline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--spazio-2) var(--spazio-6); list-style:none;padding:var(--spazio-3) 0;font-family:var(--font-interfaccia);font-size:0.875rem; letter-spacing:0.08em;text-transform:uppercase;color:var(--testo-2);border-bottom:1px solid var(--filo)} .indice{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap:var(--spazio-2) var(--spazio-12);margin:0;padding:var(--spazio-4) 0 var(--spazio-6); border-bottom:1px solid var(--filo)} .indice-riga{display:flex;align-items:baseline;gap:var(--spazio-2)} /* I puntini di guida fra la voce e il valore, come nell'indice di un giornale. */ .indice-riga dt{display:flex;flex:1;align-items:baseline;gap:var(--spazio-2)} .indice-riga dt::after{content:"";flex:1;min-width:1.5rem;border-bottom:1px dotted var(--testo-2)} .indice-riga dd{margin:0;font-size:1.25rem;font-weight:600;white-space:nowrap} .indice-riga:first-child dd{color:var(--accento)} /* — sezioni — */ .sezione{padding:clamp(2.5rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 7.5rem)} .occhiello{display:flex;align-items:center;gap:var(--spazio-2);font-family:var(--font-interfaccia); font-size:0.875rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase; color:var(--testo-2);margin-bottom:var(--spazio-3)} .occhiello.accento{color:var(--accento)} .sezione > h2{margin-bottom:var(--spazio-8)} /* — i tre servizi — */ .servizi{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap:var(--spazio-6);list-style:none} .servizi > li{display:flex} .scheda{display:flex;flex-direction:column;gap:var(--spazio-2);width:100%; padding:clamp(1.25rem, 4vw, 2.5rem); background:var(--superficie);border:1px solid var(--divisore);border-radius:var(--raggio); box-shadow:0 1px 2px var(--ombra)} .scheda h3{font-size:1.6875rem;margin-bottom:var(--spazio-2)} .scheda .occhiello{margin-bottom:0} .scheda-capo{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spazio-2)} .scheda-numero{font-size:2rem;font-weight:600;color:var(--testo-2)} .spunte{list-style:none;display:flex;flex-direction:column;gap:var(--spazio-2);font-size:1rem; margin-bottom:var(--spazio-4)} .spunte li{display:flex;gap:var(--spazio-2);align-items:flex-start} .spunte .icona{color:var(--accento);margin-top:0.2em;vertical-align:0} .scheda-azioni{margin:auto 0 0;padding-top:var(--spazio-2)} /* — la piattaforma — */ .piattaforma{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap:var(--spazio-8) clamp(2rem, 6vw, 6rem);align-items:start} .piattaforma h2{font-size:clamp(1.75rem, 1.4rem + 1vw, 2.25rem);max-width:none} .principi{list-style:none;display:flex;flex-direction:column;gap:var(--spazio-6)} .principi li{display:grid;grid-template-columns:2.25rem 1fr;gap:var(--spazio-3)} .principi h3{font-size:1.1875rem;margin:0 0 var(--spazio-1)} .principi p{margin:0;color:var(--testo-2)} /* Lo schema della piattaforma, disegnato con i riquadri: si adatta allo schermo e il lettore di schermo lo legge come un elenco. */ .schema{margin:0} .schema-server{border:2px solid var(--filo);border-radius:var(--raggio);padding:var(--spazio-4); display:flex;flex-direction:column;gap:var(--spazio-3);font-family:var(--font-interfaccia)} .schema-livello{display:flex;align-items:center;gap:var(--spazio-2);margin:0;font-weight:600; font-size:0.9375rem;letter-spacing:0.06em;text-transform:uppercase} .schema-livello .icona{color:var(--accento)} .schema-servizi{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap:var(--spazio-2);list-style:none} .schema-servizi li{display:flex;flex-direction:column;gap:var(--spazio-1);padding:var(--spazio-3); background:var(--superficie);border:1px solid var(--accento);border-radius:var(--raggio); font-size:1rem;line-height:1.3} .schema-servizi .icona{width:1.75rem;height:1.75rem;color:var(--accento)} .schema-numero{font-weight:700;color:var(--accento)} .schema-nucleo{background:var(--tinta);border-radius:var(--raggio);padding:var(--spazio-3)} .schema-nucleo ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--spazio-2);margin-top:var(--spazio-2)} .schema-nucleo li{background:var(--campo);border:1px solid var(--bordo-campo); border-radius:var(--raggio);padding:var(--spazio-1) var(--spazio-2);font-size:0.9375rem} .schema-base{display:flex;align-items:center;gap:var(--spazio-2);margin:0;padding:var(--spazio-3); border:1px dashed var(--bordo-campo);border-radius:var(--raggio);font-size:0.9375rem} .schema figcaption{margin-top:var(--spazio-3);font-size:0.9375rem;color:var(--testo-2)} /* — contatti e modulo — */ .contatti{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap:var(--spazio-8) clamp(2rem, 6vw, 6rem);align-items:start} .contatti h2{max-width:18ch} .modulo{display:flex;flex-direction:column;gap:var(--spazio-4);max-width:34rem; font-family:var(--font-interfaccia)} .nota-obbligatori{margin:0;color:var(--testo-2);font-size:0.9375rem} .campo{display:flex;flex-direction:column;gap:var(--spazio-1)} .campo label{font-size:1rem;font-weight:600} .obbligatorio{font-weight:400;color:var(--testo-2)} .aiuto{margin:0;font-size:0.9375rem;color:var(--testo-2)} .campo input:not([type="checkbox"]),.campo select,.campo textarea{width:100%;min-height:2.75rem; padding:var(--spazio-2) var(--spazio-3);font:inherit;font-size:1.0625rem;color:var(--testo); background:var(--campo);border:1px solid var(--bordo-campo);border-radius:var(--raggio); caret-color:var(--accento)} .campo textarea{min-height:8rem;resize:vertical;font-family:var(--font-testo)} .campo select{appearance:auto} .campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--testo)} .campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{ outline:3px solid var(--fuoco);outline-offset:0;border-color:var(--fuoco)} .con-errore input:not([type="checkbox"]),.con-errore select,.con-errore textarea{ border:2px solid var(--errore)} .errore{display:flex;gap:var(--spazio-1);align-items:flex-start;margin:0;font-weight:600; color:var(--errore)} .errore .icona{margin-top:0.2em;vertical-align:0} .spunta{display:flex;gap:var(--spazio-3);align-items:flex-start} .spunta input{width:1.5rem;height:1.5rem;margin:0.1rem 0 0;flex:none;accent-color:var(--pulsante)} .spunta label{font-weight:400} .con-errore .spunta input{outline:2px solid var(--errore);outline-offset:2px} .trappola{display:none} .modulo button{align-self:flex-start} .riepilogo-errori{padding:var(--spazio-4);border:2px solid var(--errore);border-left-width:0.5rem; border-radius:var(--raggio);background:var(--errore-fondo)} .riepilogo-errori h3{display:flex;align-items:center;gap:var(--spazio-2);font-size:1.25rem; color:var(--errore);margin-bottom:var(--spazio-2)} .riepilogo-errori p{margin-bottom:var(--spazio-2)} .riepilogo-errori ul{padding-left:var(--spazio-4)} .riepilogo-errori a{color:var(--testo)} .riepilogo-errori:focus-visible{outline:3px solid var(--fuoco);outline-offset:3px} /* — pagine di solo testo (privacy, accessibilità, conferma) — */ .pagina-testo{max-width:calc(46rem + 2 * var(--margine));padding-top:clamp(2.5rem, 6vw, 5rem); padding-bottom:clamp(3rem, 7vw, 6rem)} .pagina-testo h1{font-size:clamp(2.25rem, 1.5rem + 3vw, 3.5rem);max-width:20ch} .pagina-testo h2{font-size:1.5rem;margin-top:var(--spazio-8);margin-bottom:var(--spazio-2)} .pagina-testo ul{padding-left:var(--spazio-6);margin-bottom:var(--spazio-4)} .pagina-testo li{margin-bottom:var(--spazio-2)} .pagina-testo .pulsante{margin-top:var(--spazio-4)} .aggiornamento{margin-top:var(--spazio-8);color:var(--testo-2);font-size:0.9375rem} /* — piè di pagina — */ .piede{border-top:1px solid var(--filo);font-family:var(--font-interfaccia);font-size:0.9375rem} .piede-righe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spazio-2) var(--spazio-6); padding-top:var(--spazio-6);padding-bottom:var(--spazio-12)} .piede p{margin:0} .piede-nome{font-weight:600} .piede-voci{display:flex;flex-wrap:wrap;gap:var(--spazio-1) var(--spazio-6);list-style:none} .piede-voci a{display:inline-flex;align-items:center;gap:var(--spazio-1);min-height:2.75rem} .piede-nota{margin-left:auto !important;color:var(--testo-2)} /* Sugli schermi stretti i comandi dell'aspetto vanno a sinistra, sotto il marchio c'è il menu e il pulsante prende tutta la riga. */ @media (max-width: 52rem){ .eroe{grid-template-columns:minmax(0, 1fr)} } @media (max-width: 40rem){ .aspetto{justify-content:flex-start} /* Sul telefono i comandi dell'aspetto stanno dietro un pulsante. */ .aspetto .apri-aspetto{display:inline-flex} .aspetto-comandi{display:none} .aspetto.aperto .aspetto-comandi{display:flex;flex-direction:column;gap:var(--spazio-2);width:100%} .navigazione .pulsante{width:100%} .piede-nota{margin-left:0 !important} } /* Chi ha chiesto meno movimento non deve subire scorrimenti animati. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important;transition:none !important} } @media print{ .aspetto,.navigazione .pulsante,.modulo,.salta{display:none} body{background:none} }