/* Hydra Health — foglio di stile unico del sito. Struttura dai mockup Broadsheet (design/_ds/…): titoli in serif, filetti doppi da prima pagina, spazi ampi. Colori dalla scala di Plastic Jumper letta con la psicologia dei colori in sanità: - petrolio (il secondario di Plastic Jumper, #0082a2, scurito per l'AA): il colore di Hydra, fra il blu della fiducia e il verde della cura; - verde salvia come secondo accento: equilibrio, benessere; - fondi bianco-acqua e bianchi veri, non grigi: igiene, luce; - il viola di Plastic Jumper solo come firma dell'azienda nel piede: nella sanità il viola si usa poco, e qui resta un segno di marca. Caratteri aperti serviti da qui: Lora per titoli e testo, Titillium Web per l'interfaccia. 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. Tema e dimensione del testo li scrive sull'elemento js/aspetto-iniziale.js, prima che la pagina venga disegnata. Contrasto verificato da test_stile.py: testo 4,5:1 su ogni fondo, bordi dei campi, anello di messa a fuoco e figure 3:1. */ :root{ --fondo:#f4f8fa; --superficie:#ffffff; --campo:#ffffff; --tinta:#e2f0f4; --tinta-2:#e3f2ea; --testo:#0d1b24; --testo-2:#3d4f5c; --accento:#00657f; --accento-2:#1e6b4f; --marca-pj:#6326a6; --pulsante:#00657f; --pulsante-testo:#ffffff; --pulsante-sopra:#004151; --bordo-campo:#6b7c88; --filo:#0d1b24; --divisore:#d3e0e7; --fuoco:#00657f; --errore:#b3261e; --errore-fondo:#fdecea; --ombra:rgb(13 27 36 / 0.1); 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; --raggio-grande:0.75rem; --margine:clamp(1rem, 5vw, 4.5rem); --larghezza:75rem; } /* Penombra: blu ardesia, per chi trova il bianco troppo luminoso ma non vuole il nero. */ :root[data-tema="penombra"]{ --fondo:#1b2a36; --superficie:#223442; --campo:#2a3e4d; --tinta:#1f4450; --tinta-2:#234536; --testo:#eef5f8; --testo-2:#c3d3dc; --accento:#7fd4e8; --accento-2:#8fdcb4; --marca-pj:#d2b4f7; --pulsante:#7fd4e8; --pulsante-testo:#03232c; --pulsante-sopra:#b2e8f3; --bordo-campo:#8fa6b4; --filo:#eef5f8; --divisore:#3a5060; --fuoco:#7fd4e8; --errore:#ffb4ab; --errore-fondo:#43282a; --ombra:rgb(0 0 0 / 0.3); color-scheme:dark; } /* Scuro: il blu notte di Plastic Jumper (#020e17). */ :root[data-tema="scuro"]{ --fondo:#04121b; --superficie:#0b1d28; --campo:#102532; --tinta:#0b3340; --tinta-2:#0e3326; --testo:#eaf2f6; --testo-2:#b1c3cd; --accento:#5ccbe4; --accento-2:#72d3a3; --marca-pj:#c5a6f5; --pulsante:#5ccbe4; --pulsante-testo:#01202a; --pulsante-sopra:#9be2f1; --bordo-campo:#7d95a3; --filo:#eaf2f6; --divisore:#213845; --fuoco:#5ccbe4; --errore:#ffb4ab; --errore-fondo:#3b1a1c; --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{-webkit-text-size-adjust:100%; /* Chi scorre con la tastiera non deve finire sotto «Torna all'inizio». */ scroll-padding-bottom:5rem} 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} 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,.testata:focus-visible{outline:none} [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)} .figura{width:3rem;height:3rem;flex:none;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)} /* — il simbolo: croce e battito, colori dal tema — */ .simbolo{width:2.25rem;height:2.25rem;flex:none} .simbolo-croce{fill:var(--accento)} .simbolo-battito{stroke:var(--accento-2)} /* — 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} .pulsante.leggero{background:transparent;color:var(--accento);padding-inline:var(--spazio-2); text-decoration:underline;text-decoration-thickness:1px} .pulsante.leggero:hover{background:var(--tinta);text-decoration-thickness:2px} /* — barra del superadmin — */ .barra-gestione{background:var(--tinta);border-bottom:1px solid var(--divisore); font-family:var(--font-interfaccia);font-size:0.9375rem} .barra-gestione p{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spazio-1) var(--spazio-4); margin:0;padding-top:var(--spazio-1);padding-bottom:var(--spazio-1)} .barra-gestione a{display:inline-flex;align-items:center;gap:var(--spazio-1);min-height:2.75rem; font-weight:600} /* — testata — */ .testata{padding:0 var(--margine);max-width:calc(var(--larghezza) + 2 * var(--margine));margin:0 auto} .testata-riga{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} .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,.voci a[aria-current="page"]{border-bottom-color:var(--accento);color:var(--accento)} /* Il pulsante «Aspetto» mostra il simbolo del tema attivo, come in albada; apre un piccolo pannello con temi e dimensione del testo. */ .aspetto{position:relative} .aspetto[hidden]{display:none} .aspetto-apri{display:inline-flex;align-items:center;gap:var(--spazio-2);min-height:2.75rem; padding:0 var(--spazio-3);font:inherit;font-size:1rem;color:var(--testo);background:var(--campo); border:1px solid var(--bordo-campo);border-radius:1.5rem;cursor:pointer} .aspetto-apri:hover,.aspetto-apri[aria-expanded="true"]{background:var(--tinta)} .tema-simbolo{width:1.35rem;height:1.35rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .tema-simbolo .pieno{fill:currentColor;stroke:none} .aspetto-apri .tema-simbolo{display:none} :root:not([data-tema]) .aspetto-apri .tema-chiaro, :root[data-tema="chiaro"] .aspetto-apri .tema-chiaro, :root[data-tema="penombra"] .aspetto-apri .tema-penombra, :root[data-tema="scuro"] .aspetto-apri .tema-scuro{display:block} .pannello-aspetto{position:absolute;right:0;top:calc(100% + var(--spazio-2));z-index:20; width:max-content;max-width:min(22rem, calc(100vw - 2 * var(--margine))); padding:var(--spazio-4);background:var(--superficie);border:1px solid var(--bordo-campo); border-radius:var(--raggio-grande);box-shadow:0 8px 24px var(--ombra); display:flex;flex-direction:column;gap:var(--spazio-4)} .pannello-aspetto[hidden]{display:none} .aspetto-gruppo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spazio-1)} .aspetto-etichetta{width:100%;margin:0 0 var(--spazio-1);font-weight:600;color:var(--testo-2); font-size:0.9375rem} .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;font-size:1rem; 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} /* 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(3rem, 8vw, 7rem) 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} .attacco p{margin-bottom:var(--spazio-3)} .azioni{display:flex;flex-wrap:wrap;gap:var(--spazio-3);margin-top:var(--spazio-6)} /* La scena: medico, paziente a letto con il battito, infermiera. Figure Health Icons su una linea di terra, come un disegno a tratto. */ .scena{display:flex;align-items:flex-end;justify-content:flex-start;gap:var(--spazio-4); padding:0 var(--spazio-2) var(--spazio-2);margin-bottom:var(--spazio-6);max-width:26rem; border-bottom:3px solid var(--accento-2)} /* Misure relative alla scena, non fisse: con il testo al 200% le figure si stringono invece di uscire dallo schermo. */ .scena .figura{width:min(4.5rem, 24%);height:auto;aspect-ratio:1} .scena-paziente{display:flex;flex-direction:column;align-items:center;width:min(6.5rem, 34%)} .scena .scena-letto{width:100%;height:auto;color:var(--testo)} .scena .scena-battito{width:42%;height:auto;color:var(--accento-2);margin-bottom:-1rem} .scena .scena-infermiera{color:var(--accento-2)} /* — 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-2)} .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-top:4px solid var(--accento);border-radius:var(--raggio);box-shadow:0 2px 8px 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-figura{display:inline-flex;padding:var(--spazio-2);background:var(--tinta);border-radius:50%} .scheda-figura .figura{width:3.5rem;height:3.5rem} .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-2);margin-top:0.2em;vertical-align:0} .scheda-azioni{display:flex;flex-wrap:wrap;gap:var(--spazio-2);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-grande);padding:var(--spazio-4); display:flex;flex-direction:column;gap:var(--spazio-3);font-family:var(--font-interfaccia); background:var(--superficie)} .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 .figura,.schema-livello .simbolo{width:2rem;height:2rem} .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(--campo);border:1px solid var(--accento);border-radius:var(--raggio); font-size:1rem;line-height:1.3} .schema-servizi .figura{width:2.25rem;height:2.25rem} .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); background:var(--tinta-2);border-radius:var(--raggio);font-size:0.9375rem} .schema-base .figura{width:2rem;height:2rem;color:var(--accento-2)} .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} .contatti-figura{display:inline-flex;margin-bottom:var(--spazio-4);padding:var(--spazio-3); background:var(--tinta-2);border-radius:50%} .contatti-figura .figura{width:4rem;height:4rem;color:var(--accento-2)} .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 testo (privacy, accessibilità, documenti, conferma) — */ .pagina-testo{max-width:calc(46rem + 2 * var(--margine));padding-top:clamp(2.5rem, 6vw, 5rem); padding-bottom:clamp(3rem, 7vw, 6rem)} .pagina-capo{display:flex;flex-wrap:wrap-reverse;align-items:flex-start;justify-content:space-between; gap:0 var(--spazio-4)} .pagina-capo > div{flex:1 1 16rem;min-width:0} .pagina-figura{display:inline-flex;flex:none;padding:var(--spazio-3);background:var(--tinta); border-radius:50%;margin-bottom:var(--spazio-4)} .pagina-figura .figura{width:4rem;height:4rem} .pagina-testo h1{font-size:clamp(2.25rem, 1.5rem + 3vw, 3.5rem);max-width:20ch} .testo-lungo h2{font-size:1.5rem;margin-top:var(--spazio-8);margin-bottom:var(--spazio-2)} .testo-lungo h3{font-size:1.2rem;margin-top:var(--spazio-6);margin-bottom:var(--spazio-2)} .pagina-testo ul,.pagina-testo ol{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} /* — documenti — */ .pagina-testo .documenti{list-style:none;padding:0;display:flex;flex-direction:column; gap:var(--spazio-4);margin-top:var(--spazio-8)} .pagina-testo .documento{display:flex;gap:var(--spazio-4);align-items:flex-start;margin:0; padding:var(--spazio-6);background:var(--superficie);border:1px solid var(--divisore); border-left:4px solid var(--accento);border-radius:var(--raggio)} .documento h2{font-size:1.375rem;margin:0 0 var(--spazio-2);max-width:none} .documento-dati{font-family:var(--font-interfaccia);color:var(--testo-2);font-size:0.9375rem} .documento .pulsante{margin-top:0} .documento-vuoto{color:var(--testo-2)} /* — piè di pagina, come in albada: tre colonne e la riga legale — */ .piede{border-top:1px solid var(--filo);background:var(--superficie);font-family:var(--font-interfaccia); font-size:0.9375rem;margin-top:var(--spazio-8)} .piede-colonne{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap:var(--spazio-6) var(--spazio-12);padding-top:var(--spazio-8);padding-bottom:var(--spazio-6)} .piede p{margin:0 0 var(--spazio-2)} .piede-titolo{font-weight:700;color:var(--testo-2);letter-spacing:0.04em} .marchio-piede{display:flex;align-items:center;gap:var(--spazio-2);font-family:var(--font-testo); font-size:1.25rem;color:var(--testo);letter-spacing:0} .marchio-piede .simbolo{width:1.75rem;height:1.75rem} .piede-voci{list-style:none;display:flex;flex-direction:column} .piede-voci a,.piede-legale a{display:inline-flex;align-items:center;gap:var(--spazio-1);min-height:2.75rem} .piede-orari{display:flex;align-items:center;gap:var(--spazio-1);min-height:2.75rem;color:var(--testo-2)} .marca-pj{color:var(--marca-pj);font-weight:600} .piede-legale{border-top:1px solid var(--divisore);padding-top:var(--spazio-4); padding-bottom:var(--spazio-12);color:var(--testo-2)} .piede-legale .icona{color:var(--accento-2)} /* «Torna all'inizio»: compare quando si è scesi oltre la prima schermata (per esempio dopo un collegamento a una sezione). In basso a destra, lontano dal testo; scroll-padding-bottom evita che copra ciò che ha la messa a fuoco (WCAG 2.4.11). */ .torna-su{position:fixed;right:var(--spazio-4);bottom:var(--spazio-4);z-index:15; display:inline-flex;align-items:center;gap:var(--spazio-2);min-height:2.75rem; padding:var(--spazio-2) var(--spazio-4);background:var(--pulsante);color:var(--pulsante-testo); border-radius:1.5rem;font-family:var(--font-interfaccia);font-weight:600;text-decoration:none; box-shadow:0 4px 14px var(--ombra)} .torna-su:hover{background:var(--pulsante-sopra);text-decoration:underline} .torna-su[hidden]{display:none} @media (max-width: 52rem){ .eroe{grid-template-columns:minmax(0, 1fr)} } /* Sugli schermi stretti il menu va sotto il marchio, «Prenota» prende tutta la riga e «Torna all'inizio» mostra solo la freccia. */ @media (max-width: 40rem){ .testata-riga .prenota{width:100%} .navigazione{order:3;width:100%} .aspetto{order:2} .prenota{order:4} .pannello-aspetto{right:auto;left:auto} .torna-su span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); white-space:nowrap} .torna-su{padding:0;width:2.75rem;justify-content:center} } /* Chi ha chiesto meno movimento non deve subire scorrimenti animati. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important;transition:none !important} } @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} } @media print{ .aspetto,.prenota,.modulo,.salta,.torna-su,.barra-gestione{display:none} body{background:none} }