/* ═══════════════════════════════════════════
TEATRO AURORA — BASE STYLES
Variables · Reset · Typography · Utilities
═══════════════════════════════════════════ */
/* ⚠️ I caratteri NON si caricano più da qui.
L'@import che stava su questa riga creava una catena seriale: il browser
doveva scaricare base.css, parsarlo, solo allora scoprire il font, connettersi
a fonts.googleapis.com, scaricare il suo CSS e infine i file veri. Cinque
round trip prima che comparisse il testo giusto.
Ora i
del modulo contatti (+17px), la griglia del cast di robin-hood (+49px) e
le card di biglietti (+6px). Sono stati corretti alla radice; oggi sotto
questa riga non si nasconde più niente.
Resta perché il contenuto si aggiorna a mano (nomi di teatri lunghi, date
nuove) e una barra di scorrimento orizzontale è peggio di una rete.
Per ricontrollare: disattivarlo e verificare che
`document.documentElement.scrollWidth - clientWidth` dia 0 a
320, 375, 414, 768, 1024 e 1440px su tutte le pagine. */
overflow-x: hidden;
/* ⚠️ Lo stato di partenza NON è più `opacity: 0`, ed è voluto.
Prima il body nasceva invisibile e a riaccenderlo era l'animazione: se
quella per qualsiasi motivo non partiva, il sito restava una pagina
bianca — la peggiore avaria possibile, perché non lascia nemmeno un
messaggio. Ora l'opacità naturale è 1 e la dissolvenza in entrata la
ottiene `backwards`, che applica il fotogramma iniziale solo durante i
40ms di ritardo. A video è identico; la differenza è che se l'animazione
non gira il sito si vede lo stesso.
Regola generale per questo file: non far dipendere la VISIBILITÀ di
qualcosa dalla riuscita di un'animazione. */
animation: pageIn .55s ease .04s backwards;
}
body.page-out {
animation: pageOut .38s ease forwards;
}
img, svg { display: block; max-width: 100%; }
/* Le immagini di img/spettacoli/ sono avvolte in per servire il WebP
(e, per gli sfondi hero, la variante da 960px). `display: contents` fa
sparire la scatola del dal layout: l': qualunque regola scritta con
il combinatore figlio — `.contenitore > img` — smette di matchare.
È già successo con `.hero-bg-item > img` in home.css, e lo sfondo dell'hero
si è disallineato solo sopra i ~1500px, dove il difetto si vede.
Quindi: **per un'immagine dentro un si usa il discendente**
(`.contenitore img`), oppure si nomina il picture per esteso. */
picture { display: contents; }
a { color: inherit; }
button { font-family: inherit; }
/* ─── FOCUS ───
Fino al 21 ago 2026 l'unico focus visibile del sito era sulle frecce del
carosello (css/home.css): chi naviga da tastiera non sapeva mai dove si
trovava. Questa regola copre tutto in un colpo solo.
`:where()` tiene la specificità a ZERO: le regole dei componenti vincono
comunque su colori e bordi, e nessuna di loro cancella l'anello per sbaglio.
Se serve un focus diverso su un componente, si scrive la sua regola normale.
`--gold-light` e non `--gold` perché deve staccare anche sopra le card in
--petrolio, che sono più chiare del fondo pagina.
⚠️ Non rimettere `outline: none` da nessuna parte senza un sostituto
visibile: cambiare il colore del bordo non basta, è lo stesso trattamento
dell'hover e quindi non distingue lo stato. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--gold-light);
outline-offset: 3px;
}
/* ─── SKIP LINK ───
Prima di questo, arrivare al contenuto costava 9 Tab su OGNI pagina: logo,
sei voci di menu, CTA, hamburger. Ora il primo Tab lo offre.
Da visibile deve stare SOTTO la nav (fissa, 97px) e sopra tutto il resto:
la nav ha z-index 500, quindi 501. */
.skip-link {
position: fixed;
top: -100px;
left: var(--pad-x);
z-index: 501;
padding: .9rem 1.6rem;
background: var(--gold);
color: var(--petrolio-dark);
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 105px;
}
/* ─── SOLO PER SCREEN READER ───
Testo che deve essere annunciato ma non disegnato: i conteggi dei filtri,
l'avviso "si apre in una nuova scheda". Non usare `display: none`, che lo
toglierebbe anche agli screen reader. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ─── PAGE TRANSITIONS ───
⚠️ Qui NON ci va `transform`, per quanto una scivolata d'ingresso sia
tentante. Queste keyframes girano sul con fill-mode: forwards, e
in quel caso Chrome tiene applicato il transform finale come matrice
identità invece che come `none`. Un transform sul body — anche identico —
crea il containing block per i figli `position: fixed`: la nav si ancora
alla pagina invece che al viewport e scorre via insieme al contenuto,
su tutte le pagine. Sintomo: scrolli e la barra del menu sparisce.
Verifica veloce in console: `document.getElementById('main-nav').offsetParent`
deve essere `null`; se risponde `` qualcuno ha rimesso un transform.
La sola dissolvenza dà lo stesso effetto senza il difetto. */
@keyframes pageIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes pageOut {
to { opacity: 0; }
}
/* ─── NOISE OVERLAY ─── */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 900;
opacity: .5;
}
/* ─── TYPOGRAPHY ─── */
.t-display {
font-family: var(--font-display);
font-weight: 300;
}
.t-label {
font-family: var(--font-label);
text-transform: uppercase;
letter-spacing: .3em;
font-size: var(--fs-micro);
}
.t-italic { font-style: italic; }
.t-gold { color: var(--gold); }
.t-gold-light { color: var(--gold-light); }
.t-dim { color: var(--text-dim); }
.t-light { color: var(--text-light); }
/* ─── LAYOUT UTILITIES ─── */
/* Aria fra la fine dei contenuti e la riga dorata del footer, uguale su tutte
e 18 le pagine. Misurato il 23 ago 2026 a 1280 e 390px: prima passavano
90-185px, e su concerti.html il bottone «Richiedi un preventivo» finiva
12px SOTTO la riga. Sta qui e non sul footer perché il riempimento si somma
sempre, mentre un margine si fonderebbe con quello dell'ultima sezione. */
main { padding-bottom: 2.5rem; }
.wrap {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--pad-x);
}
.gold-line {
width: 50px;
height: 1px;
background: var(--gold);
margin: 1.5rem 0;
}
.gold-divider {
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(201,168,76,.2) 30%, rgba(201,168,76,.2) 70%, transparent);
}
/* ─── REVEAL ON SCROLL ─── */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes spotPulse {
0%, 100% { opacity: .7; }
50% { opacity: 1; }
}
@keyframes scrollDrop {
0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}
/* ─── BUTTONS ─── */
.btn {
display: inline-block;
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .22em;
text-transform: uppercase;
text-decoration: none;
border: none;
transition: background var(--transition-normal),
color var(--transition-normal),
transform var(--transition-fast),
box-shadow var(--transition-normal);
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
padding: 1rem 2.4rem;
background: var(--gold);
color: var(--petrolio-dark);
}
.btn-gold:hover {
background: var(--gold-light);
box-shadow: 0 10px 34px rgba(201,168,76,.22);
}
.btn-ghost {
padding: 1rem 2.4rem;
background: transparent;
color: var(--gold);
border: 1px solid rgba(201,168,76,.4);
}
.btn-ghost:hover { background: rgba(201,168,76,.1); border-color: var(--gold); }
/* La variante piccola si distingue per il riempimento, non più per il corpo:
sotto --fs-micro non si scende. */
.btn-sm {
padding: .82rem 1.5rem;
font-size: var(--fs-micro);
}
/* ─── WHATSAPP BUTTON (show + sponsor) ─── */
.btn-whatsapp {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .85rem 1.4rem;
background: #25D366;
color: #fff;
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s, transform .15s;
margin-top: 1.5rem;
border: none;
}
.btn-whatsapp:hover {
background: #1ebe5d;
transform: translateY(-1px);
}
.btn-whatsapp svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ─── BADGE AUTOPRODUZIONE ─── */
/* Marca le opere originali prodotte da S.P. Emme Production */
.badge-auto {
display: inline-flex;
align-items: center;
gap: .4rem;
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
background: rgba(201,168,76,.08);
border: 1px solid rgba(201,168,76,.3);
padding: .38rem .7rem;
white-space: nowrap;
}
.badge-auto::before {
content: '★';
font-size: .8rem;
line-height: 1;
}
/* ─── PAGE HEADER (inner pages) ─── */
.page-header {
position: relative;
padding: 11rem var(--pad-x) 5rem;
overflow: hidden;
}
.page-header::after {
content: '';
position: absolute;
bottom: 0; left: var(--pad-x); right: var(--pad-x);
height: 1px;
background: linear-gradient(to right, transparent, rgba(201,168,76,.3), transparent);
}
.page-header .ph-deco {
position: absolute;
right: var(--pad-x);
top: 45%;
transform: translateY(-50%);
font-family: var(--font-display);
font-style: italic;
font-size: 18rem;
font-weight: 300;
color: rgba(201,168,76,.03);
line-height: 1;
pointer-events: none;
user-select: none;
}
.page-header .ph-label {
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .5em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1rem;
opacity: 0;
animation: fadeUp .7s ease forwards .2s;
}
.page-header .ph-title {
font-family: var(--font-display);
font-size: clamp(3.5rem, 8vw, 7rem);
font-weight: 300;
line-height: .95;
opacity: 0;
animation: fadeUp .8s ease forwards .4s;
}
.page-header .ph-title em {
font-style: italic;
color: var(--gold-light);
}
.page-header .ph-sub {
font-family: var(--font-display);
font-style: italic;
font-size: 1.4rem;
color: var(--text-dim);
margin-top: 1.5rem;
opacity: 0;
animation: fadeUp .8s ease forwards .6s;
}
/* ─── BANDA RECAPITI ───
I recapiti in fondo alla pagina esistevano in TRE copie della stessa cosa:
`.show-contacts` in show.css (11 pagine spettacolo), `.sp-contacts-grid`
dentro `.sp-cta` in sponsor.css, e una terza in `concerti.html` che non
aveva NESSUNO stile — quella pagina non carica show.css, quindi le classi
`.show-*` cadevano nel vuoto: link sottolineati, carattere del corpo al
posto di Syncopate e Cormorant, zero riempimento, e il bottone «Richiedi un
preventivo» che finiva 12px SOTTO la riga del footer.
Misurato il 23 ago 2026 su tutte e 18 le pagine: ogni altra teneva 90-185px
fra l'ultimo inchiostro e il footer, `concerti.html` -12.
Ora è un componente solo, e sta qui in base.css perché lo usano pagine che
caricano fogli diversi (show.css, sponsor.css, spettacoli.css): metterlo in
uno dei tre lo renderebbe di nuovo invisibile agli altri due. È la stessa
scelta già fatta per `.btn-whatsapp`.
Il disegno è quello di `.sp-cta`, l'unica delle tre che fosse già un vero
riquadro: bordo dorato tenue, fondo appena più chiaro del petrolio, filo in
sfumatura sul bordo alto. La novità è dentro — i recapiti non sono più una
fila che va a capo come capita, ma righe etichetta/valore incolonnate in una
colonna propria accanto al titolo. */
.contatti-band {
position: relative;
margin: 5rem 0 4rem;
padding: 3.5rem 4rem;
border: 1px solid rgba(201,168,76,.15);
background: rgba(13,59,62,.18);
display: grid;
grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
column-gap: 3.5rem;
row-gap: 2.5rem;
/* `center` e non `start`: la colonna dei recapiti è quasi sempre la più
alta (tre righe da 44px più i bottoni), quindi con `start` il titolo
restava appeso in cima e sotto rimaneva mezzo riquadro vuoto. */
align-items: center;
}
/* Il filo dorato sul bordo alto: veniva da `.sp-cta` delle pagine sponsor,
che questo componente ha sostituito. */
.contatti-band::before {
content: '';
position: absolute;
top: -1px; left: 5%; right: 60%;
height: 2px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.cb-eyebrow {
font-family: var(--font-label);
font-size: var(--fs-label);
letter-spacing: .3em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: .8rem;
}
.cb-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 300;
line-height: 1.15;
}
.cb-title em { font-style: italic; color: var(--gold-light); }
.cb-text {
font-size: var(--fs-base);
line-height: 1.8;
color: var(--text-light);
max-width: var(--measure);
margin-top: 1.2rem;
}
/* La colonna dei recapiti è staccata dal titolo da un filo verticale: senza,
sopra i 1000px le due metà si leggono come due blocchi scollegati in mezzo
al vuoto invece che come le due facce dello stesso riquadro. */
.cb-recapiti {
min-width: 0;
border-left: 1px solid rgba(201,168,76,.14);
padding-left: 3.5rem;
}
/* La colonna delle etichette è larga quanto la più lunga DI QUESTA pagina, non
una misura fissa indovinata: le etichette vanno da `EMAIL` (~60px) a
`EMAIL PRODUZIONE` di canto-di-natale.html (~143px), e un valore unico o
mandava a capo la più lunga o lasciava un vuoto di 90px accanto alla più
corta. `max-content` sulla lista + `subgrid` sulle righe: le righe restano
scatole vere, quindi il filo di separazione e la semantica di tengono.
⚠️ Dove `subgrid` non c'è, la dichiarazione viene scartata e la riga torna a
una colonna sola: etichetta sopra, valore sotto — cioè esattamente il
ripiego che serve, lo stesso che il componente usa sotto i 600px. */
.cb-list {
list-style: none;
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
column-gap: 1.5rem;
}
.cb-item {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
align-items: center;
padding: .3rem 0;
}
/* Il filo solo FRA le righe: sopra la prima e sotto l'ultima disegnerebbe una
scatola dentro la scatola. */
.cb-item + .cb-item { border-top: 1px solid rgba(201,168,76,.1); }
.cb-label {
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .2em;
color: var(--text-dim);
text-transform: uppercase;
}
.cb-value {
min-width: 0;
font-family: var(--font-display);
font-size: var(--fs-md);
color: var(--gold-light);
/* `@lasirenettadiandersen_ilmusical` è una parola sola da 32 caratteri: a
320px, dentro una colonna da ~190px, senza questo allarga la pagina. */
overflow-wrap: anywhere;
}
.cb-value a {
/* bersaglio minimo per il dito: cresce l'area, non il disegno */
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--gold-light);
text-decoration: none;
transition: color var(--transition-fast);
}
.cb-value a:hover { color: var(--gold); }
.cb-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-top: 2rem;
}
/* `.btn-whatsapp` porta un `margin-top: 1.5rem` suo, che qui si sommerebbe */
.cb-actions .btn-whatsapp { margin-top: 0; }
/* ─── FOOTER ─── */
/* La distanza dai contenuti sta sul `padding-bottom` di , non su un
`margin-top` qui, e la differenza NON è di gusto: i margini verticali
adiacenti si fondono, quindi un `margin-top: 2.5rem` sul footer non si
somma al margine di chiusura dell'ultima sezione — vince il più grande.
Provato il 23 ago 2026: sulle pagine spettacolo, dove la banda recapiti
chiude con 6rem di margine, quei 40px sparivano del tutto. Il riempimento
non si fonde mai, quindi si aggiunge sempre.
Il `padding-top` del footer sale invece a 3,5rem: la riga dorata si stacca
dal contenuto sopra, ma anche il marchio deve staccarsi dalla riga. */
footer {
padding: 3.5rem var(--pad-x) 3rem;
border-top: 1px solid rgba(201,168,76,.1);
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Stesso marchio della nav, più piccolo. Vedi css/nav.css e tools-build-logo.py */
.footer-logo {
line-height: 0;
}
.footer-logo img {
height: 34px;
width: auto;
}
.footer-copy {
font-size: var(--fs-label);
color: var(--text-dim);
}
.footer-links {
display: flex;
gap: 2rem;
list-style: none;
}
/* Erano a .42rem, cioè 6,7px: i due link legali del sito — Contatti e Privacy —
praticamente illeggibili. Il padding verticale porta il bersaglio a 44px
senza spostare il testo, che resta allineato al resto del footer. */
.footer-links a {
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-dim);
text-decoration: none;
transition: color var(--transition-normal);
display: inline-flex;
align-items: center;
min-height: 44px;
}
.footer-links a:hover { color: var(--gold); }
/* ─── FOOTER SOCIAL ─── */
.footer-inner {
flex-wrap: wrap;
gap: .8rem;
}
.footer-social {
display: flex;
gap: .8rem;
}
/* Il riquadro resta 34px — è il disegno — ma il bersaglio arriva a 44 con uno
pseudo-elemento steso attorno: cambia l'area che risponde al dito, non la
grafica. Il `gap: .8rem` del contenitore evita che le due aree si tocchino. */
.footer-social-link {
position: relative;
width: 34px;
height: 34px;
border: 1px solid rgba(201,168,76,.2);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--gold);
transition: background var(--transition-normal),
border-color var(--transition-normal);
}
.footer-social-link::after {
content: '';
position: absolute;
inset: -5px;
}
.footer-social-link svg {
width: 15px;
height: 15px;
}
.footer-social-link:hover {
background: rgba(201,168,76,.1);
border-color: var(--gold);
}
/* ─── FOOTER CREDIT ─── */
/* Firma dello studio: va a capo da sola sotto tutto il resto. */
.footer-credit {
flex-basis: 100%;
text-align: center;
margin-top: 1.4rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(201,168,76,.08);
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .24em;
text-transform: uppercase;
/* Era .3, cioè 2,55:1 a 7,4px: invisibile per chiunque non avesse una vista
perfetta su un buon schermo. A .55 sono 5,2:1 e resta comunque una firma
discreta, che è il ruolo che deve avere. */
color: rgba(249, 243, 227, 0.55);
}
/* ─── FORM ELEMENTS ─── */
.fg {
display: flex;
flex-direction: column;
gap: .4rem;
margin-bottom: 1rem;
}
.fg label {
font-family: var(--font-label);
font-size: var(--fs-label);
letter-spacing: .28em;
text-transform: uppercase;
color: var(--gold);
}
/* L'asterisco dei campi obbligatori. `aria-hidden` sul segno in HTML: agli
screen reader lo dice già l'attributo `required`, sentire "asterisco" a ogni
campo è rumore. */
.fg label .req {
color: var(--gold-light);
margin-left: .25rem;
}
.fg input,
.fg select,
.fg textarea {
background: rgba(13, 59, 62, .35);
border: 1px solid rgba(201,168,76,.18);
color: var(--cream);
font-family: var(--font-body);
/* ⚠️ 16px NON è una scelta estetica: sotto questa soglia Safari su iOS zooma
da solo la pagina appena si tocca il campo, e l'utente si ritrova la
schermata ingrandita a metà compilazione. Non scendere. */
font-size: var(--fs-base);
padding: .85rem 1.1rem;
transition: border-color var(--transition-normal),
background var(--transition-normal);
}
/* ⚠️ Qui c'era `outline: none`. Non rimetterlo: il solo cambio di bordo è lo
stesso trattamento dell'hover e non distingue lo stato di focus. L'anello
globale (vedi sezione FOCUS) fa il lavoro; questa regola aggiunge solo il
rinforzo di bordo e fondo. */
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
border-color: var(--gold);
background: rgba(13, 59, 62, .6);
}
/* ⚠️ `min-width: 0` non è pignoleria: un prende la sua larghezza
minima dall'OPZIONE PIÙ LUNGA, e in contatti.html «Prenotazione di gruppo
(10+ persone)» chiedeva 321px. Dentro una griglia i figli hanno
`min-width: auto`, quindi quella misura risaliva fino alla pagina e a 320px
la faceva sbordare di 17px. Il difetto era mascherato da `overflow-x: hidden`
sul body. Vale anche per input e textarea, che hanno una larghezza
intrinseca propria (`size`, `cols`). */
.fg input,
.fg select,
.fg textarea {
width: 100%;
min-width: 0;
}
.fg textarea { height: 130px; resize: vertical; }
.fg select option { background: var(--petrolio-dark); }
/* ─── ERRORI DI CAMPO ───
Prima l'errore era SOLO un bordo che cambiava colore: invisibile a chi è
daltonico, muto per uno screen reader. Ora ogni campo invalido ha un
messaggio scritto, legato con aria-describedby, e il bordo è il rinforzo —
non l'unico segnale. */
.fg-error {
display: none;
font-size: var(--fs-label);
line-height: 1.5;
color: #f0a196;
}
.fg-error::before {
content: '▲';
font-size: .62em;
margin-right: .4rem;
vertical-align: 1px;
}
.fg-error.is-visible { display: block; }
.fg input[aria-invalid="true"],
.fg select[aria-invalid="true"],
.fg textarea[aria-invalid="true"] {
border-color: #c8564a;
background: rgba(120, 40, 32, .16);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* Consenso privacy nei moduli */
.fg-consent {
display: flex;
align-items: flex-start;
gap: .7rem;
margin: 1.2rem 0 1.4rem;
}
.fg-consent input[type="checkbox"] {
width: 18px;
height: 18px;
min-width: 18px;
margin-top: .15rem;
accent-color: var(--gold);
cursor: pointer;
}
/* La label è collegata col `for`, quindi è cliccabile quanto la casella: fra le
due il bersaglio reale è ampiamente sopra i 44px. */
.fg-consent label {
font-size: var(--fs-sm);
line-height: 1.7;
color: var(--text-dim);
cursor: pointer;
}
.fg-consent input[aria-invalid="true"] {
outline: 2px solid #c8564a;
outline-offset: 2px;
}
.fg-consent a {
color: var(--gold);
text-decoration: underline;
text-underline-offset: 3px;
}
.fg-consent a:hover { color: var(--gold-light); }
/* ─── RESPONSIVE ─── */
/* La banda recapiti passa a una colonna a 1150px, non a 900 né a 1000: le sue
due metà non sono un testo che si stringe ma due colonne piene — titolo
grande a sinistra, righe etichetta/valore a destra.
⚠️ La soglia è **misurata sul caso peggiore**, che è `canto-di-natale.html`:
etichetta più lunga del sito (`EMAIL PRODUZIONE`, ~143px) e valori più
lunghi (`cantodinatale2023@gmail.com`, `@cantodinatale_lafavolamusicale`).
A 1010px la colonna del valore scendeva a ~180px e l'indirizzo si spezzava
a metà parola — «cantodinatale2023@g / mail.com» — perché un'email non ha
spazi dove andare a capo e `overflow-wrap: anywhere` taglia dove capita.
A 1160px ne restano ~270 e le righe stanno su una riga sola. Se si allunga
un'etichetta o un recapito, questa soglia va rimisurata.
Il filo verticale diventa orizzontale: separa comunque le due parti, ma nel
verso giusto. */
@media (max-width: 1150px) {
.contatti-band {
grid-template-columns: 1fr;
row-gap: 2.2rem;
padding: 3rem 2.5rem;
}
.cb-recapiti {
border-left: none;
border-top: 1px solid rgba(201,168,76,.14);
padding-left: 0;
padding-top: 2rem;
}
}
@media (max-width: 900px) {
.form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.page-header .ph-deco { display: none; }
/* Sotto i 600px l'etichetta va sopra il valore: affiancate, a 320px
restano ~120px per il valore e ogni indirizzo va a capo due volte. */
.contatti-band {
margin: var(--sez-y) 0 var(--sez-y);
padding: 2.2rem 1.5rem;
}
.cb-list { grid-template-columns: 1fr; }
.cb-item {
grid-column: 1;
grid-template-columns: 1fr;
padding: .55rem 0;
}
}