` si somma al `gap` di `.card__corpo` invece di sostituirlo, e fra le righe resta uno spazio doppio del previsto. */ .card__riga { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .875rem; color: var(--grigio); } /* `1em` e non un valore fisso: l'icona cresce col testo che accompagna, in una riga di scheda come in testata. `currentColor` fa il resto. */ .icona { width: 1em; height: 1em; flex: none; vertical-align: -.125em; } .card__riga .icona { color: var(--rosso); } .dettaglio__dati dt .icona { color: var(--rosso); } .testata__azioni a { display: inline-flex; align-items: center; gap: .4rem; } .testata__azioni .icona { width: 1.35em; height: 1.35em; } /* ---- Bottoni ---- */ .bottone { display: inline-block; padding: .55rem 1.15rem; border-radius: var(--raggio); border: 1px solid transparent; font-weight: 600; cursor: pointer; text-decoration: none; } .bottone:hover { text-decoration: none; } .bottone--primario { background: var(--rosso); border-color: var(--rosso); color: #fff; } .bottone--primario:hover { background: var(--rosso-scuro); border-color: var(--rosso-scuro); color: #fff; } .bottone--primario:focus-visible { outline: 3px solid var(--rosso-focus); outline-offset: 2px; } .bottone--fantasma { background: transparent; border-color: currentColor; } /* ---- Piede ---- */ .piede { background: var(--rosso); color: #fff; padding: 3rem 0 2rem; margin-top: 3rem; } .piede a { color: #fff; text-decoration: underline; } .piede__colonne { display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr; } @media (max-width: 900px) { .piede__colonne { grid-template-columns: 1fr; } } .piede__legale { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.3); font-size: .8125rem; opacity: .9; } .piede__logo { display: block; height: 32px; width: auto; } .piede__finanziamento { display: block; margin-top: .5rem; max-width: 260px; width: 100%; height: auto; } /* ---- Accessibilita' ---- */ .salta-al-contenuto { position: absolute; left: -9999px; } .salta-al-contenuto:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; color: var(--testo); padding: .6rem 1rem; border-radius: var(--raggio); } /* ---- Elenco con filtri ---- */ .elenco { display: grid; gap: 2rem; grid-template-columns: 260px 1fr; align-items: start; } @media (max-width: 900px) { .elenco { grid-template-columns: 1fr; } } .filtri { background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .filtri__titolo { font-size: 1.05rem; margin: 0; } .filtri__campo { display: block; font-size: .875rem; } .filtri__campo > span, .filtri__campo > legend { display: block; margin-bottom: .25rem; color: var(--grigio); } .filtri__campo input, .filtri__campo select { width: 100%; padding: .45rem .6rem; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; } fieldset.filtri__campo { border: 0; padding: 0; margin: 0; } .filtri__giorno { display: inline-flex; align-items: center; gap: .25rem; margin-right: .5rem; } .filtri__giorno input { width: auto; } .filtri__azioni { display: flex; gap: .5rem; } .card__categoria { text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; } .card__titolo a { color: var(--testo); } .card__disponibilita { margin-top: auto; padding-top: .5rem; } .card__esaurito { color: var(--grigio); } .card__vetrina { color: var(--rosso); font-weight: 600; } .ordinamento select { padding: .35rem .5rem; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; } .vuoto { padding: 2rem; text-align: center; color: var(--grigio); } /* La regola `.paginazione svg` che stava qui serviva alle frecce SVG della vista di Livewire, che non rendiamo piu'. */ .paginazione { margin-top: 2rem; } .paginazione__voci { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; list-style: none; margin: 0; padding: 0; } .paginazione__voci a, .paginazione__corrente, .paginazione__spento { display: inline-block; padding: .4rem .75rem; border: 1px solid var(--bordo); border-radius: var(--raggio); font-size: .9rem; line-height: 1.2; } .paginazione__voci a { background: #fff; color: var(--testo); text-decoration: none; } .paginazione__voci a:hover { border-color: var(--rosso); color: var(--rosso); } .paginazione__corrente { background: var(--rosso); border-color: var(--rosso); color: #fff; font-weight: 600; } .paginazione__spento { color: var(--grigio); opacity: .55; } /* ---- Dettaglio corso ---- */ .dettaglio { display: grid; gap: 2.5rem; grid-template-columns: 1fr 420px; align-items: start; } @media (max-width: 900px) { .dettaglio { grid-template-columns: 1fr; } } .dettaglio__foto { width: 100%; border-radius: var(--raggio); aspect-ratio: 16/9; object-fit: cover; } .dettaglio__descrizione { margin-top: 1.5rem; } .dettaglio__scelta { background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); padding: 1.5rem; } /* Il prezzo e' verde, come sulle schede: il badge `#71DD37` e' un segno del marchio (spec §1), e averlo rosso qui lo faceva sembrare un'altra cosa. Badge e non testo colorato: `#71DD37` su bianco sta a 1,73:1, sotto qualunque soglia leggibile. La coppia del badge — `#06300a` su `#71DD37` — sta a 8,44:1, cioe' oltre l'AAA, ed e' gia' quella delle schede. */ .dettaglio__prezzo span { color: var(--grigio); font-size: .875rem; display: block; margin-bottom: .35rem; } .dettaglio__prezzo strong { display: inline-block; font-size: 2rem; line-height: 1.1; padding: .2rem .7rem; border-radius: var(--raggio); background: var(--verde); color: #06300a; } .dettaglio__dati { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1.5rem 0; font-size: .9rem; } .dettaglio__dati dt { color: var(--grigio); } .dettaglio__dati dd { margin: 0; } .scelta__blocco { border: 0; padding: 0; margin: 0 0 1.5rem; } .scelta__blocco legend { font-weight: 600; margin-bottom: .5rem; padding: 0; } .scelta__taglia { display: flex; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: .35rem; cursor: pointer; } .scelta__taglia strong { margin-left: auto; } .scelta__taglia em { flex-basis: 100%; font-size: .75rem; color: var(--grigio); font-style: normal; } .scelta__taglia--no { opacity: .55; cursor: not-allowed; flex-wrap: wrap; } .scelta__giorno { margin-bottom: .75rem; } /* Niente `text-transform: capitalize` qui, ne' sul mese piu' sotto: in italiano giorni e mesi sono minuscoli, e `capitalize` non tocca la prima lettera della riga — le tocca tutte, e trasformava «venerdì 4 settembre» in «Venerdì 4 Settembre». Carbon la data la produce gia' giusta: era la presentazione a guastarla. */ .scelta__data { font-size: .8125rem; color: var(--grigio); margin: 0 0 .25rem; } .scelta__ore { display: flex; flex-wrap: wrap; gap: .35rem; } .chip { display: inline-flex; } .chip input { position: absolute; opacity: 0; } .chip span { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--bordo); border-radius: 999px; font-size: .875rem; cursor: pointer; } .chip input:checked + span { background: var(--rosso); border-color: var(--rosso); color: #fff; } .chip input:focus-visible + span { outline: 3px solid var(--rosso-focus); outline-offset: 2px; } .scelta__nota { font-size: .8125rem; color: var(--grigio); margin-top: .75rem; } .avviso { padding: .75rem 1rem; border-radius: var(--raggio); margin-bottom: 1rem; } .avviso--errore { background: #fdeaea; border: 1px solid var(--rosso); color: #5a0000; } .avviso--ok { background: #eefbe6; border: 1px solid var(--verde); color: #14400a; } .avviso--attesa { background: var(--sfondo-alt); border: 1px solid var(--bordo); color: var(--testo); } /* ---- Il docente (dettaglio corso) ---- */ /* Piccolo avatar accanto al nome, nell'elenco dati compatto. */ .docente-mini { display: inline-flex; align-items: center; gap: .4rem; } .docente-mini__foto { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; } /* La sezione estesa, con foto piu' grande e bio: compare solo se il docente ha almeno una delle due, altrimenti resterebbe un placeholder vuoto sotto un titolo che promette qualcosa che non c'e'. */ .dettaglio__docente { margin-top: 1.5rem; } .dettaglio__docente h2 { font-size: 1.15rem; } .docente { display: flex; gap: 1.25rem; align-items: flex-start; } .docente__foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; } .docente__nome { font-weight: 600; margin: 0 0 .35rem; } .docente__bio { margin: 0; color: var(--grigio); } /* ---- Pagina scuola ---- */ .scuola { display: grid; gap: 2.5rem; grid-template-columns: 1fr 320px; align-items: start; } @media (max-width: 900px) { .scuola { grid-template-columns: 1fr; } } .scuola__copertina { width: 100%; border-radius: var(--raggio); aspect-ratio: 21/9; object-fit: cover; } .scuola__scheda { background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); padding: 1.5rem; } .scuola__logo { max-width: 140px; height: auto; margin-bottom: 1rem; } /* ---- Home ---- */ .contenuto--stretto { max-width: 62ch; } .passi { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); list-style: none; margin: 0; padding: 0; counter-reset: none; } .passo__numero { font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--rosso); opacity: .35; margin: 0 0 .25rem; } .passo h3 { letter-spacing: .06em; margin-bottom: .5rem; } /* Scorrimento orizzontale senza JavaScript: `scroll-snap` da' l'aggancio delle schede. Sotto i 700px la scheda occupa l'82% della larghezza, cosi' della successiva si vede un pezzo: e' l'anteprima parziale che la specifica chiede su mobile, ed e' anche il modo in cui si capisce che si scorre. */ .carosello { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; } .carosello > * { scroll-snap-align: start; } @media (max-width: 700px) { .carosello { grid-auto-columns: 82%; } } .strumenti { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); list-style: none; margin: 0; padding: 0; } .strumento { display: flex; align-items: flex-end; min-height: 140px; padding: 1rem; border-radius: var(--raggio); color: #fff; text-decoration: none; } .strumento:hover { text-decoration: none; filter: brightness(1.12); } .strumento__titolo { font-weight: 600; font-size: 1.05rem; } /* ---- Accesso e iscrizione ---- Fondo rosso pieno e schede bianche affiancate, come il sito vecchio. E' la sola pagina che non ha l'hero: il rosso pieno fa quel lavoro da se'. */ .accesso { background: var(--rosso); padding: 3rem 0 4rem; } .accesso__colonne { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; align-items: start; } .accesso__colonne--una { grid-template-columns: minmax(0, 480px); justify-content: center; } @media (max-width: 820px) { .accesso__colonne { grid-template-columns: 1fr; } } .accesso__scheda { background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); padding: 2rem; } .accesso__scheda h1 { font-size: 1.6rem; } .modulo { display: flex; flex-direction: column; gap: 1rem; } /* Città e provincia sulla stessa riga, come un indirizzo compatto — le due .modulo__campo dentro restano quelle di sempre, solo affiancate. */ .modulo__riga { display: flex; gap: 1rem; } .modulo__riga > .modulo__campo { flex: 1; min-width: 0; } @media (max-width: 480px) { .modulo__riga { flex-direction: column; } } .modulo__campo { display: block; font-size: .9rem; } .modulo__campo > span { display: block; margin-bottom: .25rem; font-weight: 600; } .modulo__campo > span em { font-weight: 400; font-style: normal; color: var(--grigio); } .modulo__campo input, .modulo__campo select { width: 100%; padding: .55rem .7rem; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; } .modulo__campo input:focus-visible, .modulo__campo select:focus-visible { outline: 3px solid var(--rosso-focus); outline-offset: 1px; } .modulo__spunta { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; } .modulo__spunta input { margin-top: .2rem; flex: none; } .modulo__aiuto { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--grigio); font-style: normal; } .modulo__errore { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--rosso); font-style: normal; font-weight: 600; } .modulo__nota { font-size: .875rem; margin: 0; } .modulo__blocco { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1rem; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .modulo__blocco legend { font-weight: 600; font-size: .875rem; padding: 0 .35rem; } /* `display: flex` sopra ha la stessa specificita' di `[hidden] { display: none }` dello UA stylesheet, e vince per ordine in cascata: senza questa riga l'attributo `hidden` non nasconde piu' niente su questo elemento. */ .modulo__blocco[hidden] { display: none; } /* Il bottone di uscita e' dentro un form ma deve leggersi come le altre voci della testata: nessun fondo, nessun bordo, il font di intorno. `appearance: none` non e' cosmetica come le altre righe: senza, il bottone porta ancora il "chrome" nativo del sistema operativo — un riquadro/altezza minima che padding e border a zero non tolgono, perche' vive in un livello di rendering diverso. E' la causa vera dello sfalsamento (bug 8, 25 agosto 2026): sembrava un problema di spaziatura, era il bottone che restava, sotto, un controllo di modulo nativo. Residuo dello stesso bug (25 agosto 2026, seconda parte): il fix sopra sistemava il bottone, ma il `