/* ═══════════════════════════════════════════
TEATRO AURORA — HOME PAGE
═══════════════════════════════════════════ */
/* ─── HERO ─── */
#hero {
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.hero-spotlight {
position: absolute;
width: 820px;
height: 820px;
background: radial-gradient(ellipse at center,
rgba(201,168,76,.1) 0%,
rgba(201,168,76,.04) 40%,
transparent 70%);
top: -220px;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
animation: spotPulse 7s ease-in-out infinite;
transition: transform .1s linear;
}
/* Le linee decorative della hero — i due montanti dorati verticali
(.hero-curtain-l / -r) e il filo a terra (.hero-floor) — sono state
rimosse: nate sul vecchio hero a fondo pieno, sopra le immagini a
tutto schermo del carosello tagliavano la foto invece di incorniciarla.
Restano nella cronologia git se dovessero riservire. */
/* ⚠️ In index.html questo elemento è l' della pagina, non un
.
Serve quindi `font-weight` esplicito: un h1 di default è bold, e Syncopate
ha il 700 caricato — senza questa riga la scritta cambierebbe peso. */
.hero-eyebrow {
font-family: var(--font-label);
font-weight: 400;
font-size: var(--fs-label);
letter-spacing: .55em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 2rem;
opacity: 0;
animation: fadeUp .8s ease forwards .4s;
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(5.5rem, 13vw, 12rem);
font-weight: 300;
line-height: .88;
letter-spacing: -.02em;
opacity: 0;
animation: fadeUp .9s ease forwards .6s;
}
.hero-title em {
font-style: italic;
color: var(--gold-light);
display: block;
}
.hero-sub {
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
color: var(--text-dim);
margin-top: 2rem;
letter-spacing: .06em;
opacity: 0;
animation: fadeUp .9s ease forwards .9s;
}
.hero-actions {
display: flex;
gap: 1.2rem;
margin-top: 3.5rem;
opacity: 0;
animation: fadeUp .9s ease forwards 1.2s;
}
/* ═══════════════════════════════════════════
CAROSELLO HERO
Una slide per spettacolo: l'immagine riempie
lo schermo, il testo le sta sopra sulla metà
sinistra. Gestito da js/carosello.js.
═══════════════════════════════════════════ */
#hero.hero--carousel {
justify-content: center;
padding: 7rem var(--pad-x) 6rem;
}
/* intestazione fissa sopra il carosello: dice di chi è il sito,
che il logo gigante non lo dice più */
.hero-eyebrow--carousel {
position: relative;
z-index: 2;
margin-bottom: 0;
font-size: var(--fs-label);
letter-spacing: .42em;
text-shadow: 0 1px 12px rgba(4,16,17,.9);
}
.hero-slides {
position: relative;
width: 100%;
max-width: 1120px;
flex: 1;
display: flex;
align-items: center;
}
.hero-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity .7s ease, visibility .7s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
/* ═══ SFONDI A TUTTO SCHERMO ═══
Un .hero-bg-item per slide; solo quello attivo è visibile. */
.hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
z-index: -2;
pointer-events: none;
}
.hero-bg-item {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .9s ease;
}
.hero-bg-item.is-active { opacity: 1; }
/* Le immagini restano a piena luminosità: a scurirle ci pensa il velo,
che agisce solo dove passa il testo.
⚠️ Selettore DISCENDENTE, non `>`. Qui c'era `.hero-bg-item > img` e si è
rotto il 21 ago 2026, quando le immagini sono state avvolte in per
servire il WebP: `display: contents` toglie il dal LAYOUT ma non
dall'albero dei SELETTORI, quindi il genitore dell'![]()
resta e la
regola non matchava più. L'immagine perdeva width/height/object-fit e tornava
alla sua dimensione intrinseca.
Il difetto era invisibile intorno ai 1440px — con srcset+sizes l'intrinseca
vale circa la larghezza della finestra, quindi l'immagine riempiva l'hero per
coincidenza — e si vedeva solo sugli schermi larghi. Verificato ora fino a
2560px. */
.hero-bg-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(1.08) contrast(1.05);
}
/* Velo: scurisce quanto basta a far leggere il testo, senza cancellare
l'immagine. Più denso in basso, dove passano i pulsanti. */
#hero.hero--carousel::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background:
/* Fascia scura sotto il testo. Deve reggere anche le locandine, che
hanno il proprio lettering al centro: senza, si leggerebbero due
titoli sovrapposti. Dopo il 70% l'immagine resta libera. */
linear-gradient(95deg, rgba(8,31,33,.95) 0%, rgba(8,31,33,.88) 30%,
rgba(8,31,33,.6) 50%, rgba(8,31,33,.2) 70%,
transparent 84%),
/* appena un accenno sopra e sotto, per nav e comandi */
linear-gradient(to bottom, rgba(8,31,33,.62) 0%, transparent 22%,
transparent 74%, rgba(8,31,33,.66) 100%);
pointer-events: none;
}
/* ─── Testo della slide ─── */
/* Larghezza contenuta: a tutto schermo il testo lascerebbe un vuoto a destra.
L'ombra permette di tenere il velo leggero: senza, su una foto chiara il
titolo bianco sparirebbe. */
.hero-slide-body {
text-align: left;
max-width: 620px;
text-shadow: 0 2px 18px rgba(4,16,17,.85), 0 1px 3px rgba(4,16,17,.7);
}
.hero-slide-label {
font-family: var(--font-label);
font-size: var(--fs-label);
letter-spacing: .3em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1.1rem;
}
.hero-slide-title {
font-family: var(--font-display);
font-size: clamp(2.6rem, 6vw, 5rem);
font-weight: 300;
line-height: .98;
letter-spacing: -.015em;
margin-bottom: 1.2rem;
}
.hero-slide-title em { font-style: italic; color: var(--gold-light); }
.hero-slide-sub {
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
color: var(--text-light);
margin-bottom: 1.6rem;
}
.hero-slide-meta {
display: flex;
flex-wrap: wrap;
gap: 2.2rem;
margin-bottom: 2.2rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(201,168,76,.15);
}
.hero-slide-meta-l {
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: .35rem;
}
.hero-slide-meta-v {
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--cream);
}
.hero-slide-meta-v em { font-style: italic; color: var(--gold-light); }
.hero-slide-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* Il pulsante secondario è trasparente: sopra una foto chiara sparirebbe.
Un fondo scuro lo stacca senza toglierlo dal fondo dell'immagine. */
.hero-slide-actions .btn-ghost {
background: rgba(8,31,33,.55);
backdrop-filter: blur(3px);
text-shadow: none;
}
.hero-slide-actions .btn-ghost:hover { background: rgba(201,168,76,.16); }
/* il pulsante pieno ha già il suo fondo: l'ombra ereditata sporcherebbe il testo */
.hero-slide-actions .btn-gold { text-shadow: none; }
/* ─── Comandi ─────────────────────────────────
Frecce e pallini stanno insieme in basso: ai
lati le frecce finirebbero sopra il titolo,
che ora occupa tutta la metà sinistra.
═══════════════════════════════════════════════ */
.hero-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1.6rem;
margin-top: 2.5rem;
position: relative;
z-index: 3;
}
.hero-nav {
width: 38px;
height: 38px;
background: rgba(8,31,33,.45);
border: 1px solid rgba(201,168,76,.25);
color: var(--gold);
font-family: var(--font-display);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
transition: background var(--transition-normal), border-color var(--transition-normal);
}
.hero-nav:hover { background: rgba(201,168,76,.15); border-color: var(--gold); }
/* Il riquadro resta 38px, il bersaglio arriva a 44: come per i social del
footer, si allarga l'area senza toccare il disegno. */
.hero-nav { position: relative; }
.hero-nav::after { content: ''; position: absolute; inset: -3px; }
/* ─── PAUSA ───
Lo crea js/carosello.js: con una slide sola non serve, e con
prefers-reduced-motion l'autoplay non parte nemmeno. Stessa forma delle
frecce, così i tre comandi si leggono come un gruppo. */
.hero-pause {
position: relative;
width: 38px;
height: 38px;
background: rgba(8,31,33,.45);
border: 1px solid rgba(201,168,76,.25);
color: var(--gold);
/* è un glifo-icona (❚❚ / ▶), non testo: il nome accessibile lo dà
l'aria-label che scrive js/carosello.js */
font-size: .7rem;
line-height: 1;
cursor: pointer;
transition: background var(--transition-normal), border-color var(--transition-normal);
}
/* Il bottone e' 38x38 a video e allarga il bersaglio con questo ::after.
⚠️ -4px e non -3: a -3 il conto tornava sulla carta (38+3+3=44) ma la misura
vera sotto il dito dava 43x42 — gli arrotondamenti subpixel si mangiano un
pixel per lato. Si misura camminando dal centro con elementFromPoint, non
sommando i numeri del CSS: `driver.py check`, sezione bersagli tattili. */
.hero-pause::after { content: ''; position: absolute; inset: -4px; }
.hero-pause:hover { background: rgba(201,168,76,.15); border-color: var(--gold); }
.hero-dots {
display: flex;
gap: .7rem;
justify-content: center;
}
/* Il trattino visibile è alto 2px: da solo sarebbe un bersaglio impossibile
da centrare col dito. Il padding verticale lo porta a 44px di area
cliccabile lasciando il segno grafico dov'è, e `background-clip: content-box`
impedisce che il colore riempia anche il padding. */
.hero-dot {
width: 44px;
height: 2px;
box-sizing: content-box;
padding: 21px 0;
border: none;
background: rgba(201,168,76,.25);
background-clip: content-box;
cursor: pointer;
transition: background var(--transition-normal);
}
.hero-dot:hover { background: rgba(201,168,76,.5); background-clip: content-box; }
.hero-dot.is-active { background: var(--gold); background-clip: content-box; }
/* Il gruppo comandi si allinea al centro nonostante i pallini ora siano alti */
.hero-controls { margin-top: 1rem; }
/* focus visibile per chi naviga da tastiera.
Questa regola batte quella globale di base.css (specificità più alta) ed è
voluto: sopra l'hero il --gold stacca meglio del --gold-light. */
.hero-nav:focus-visible,
.hero-pause:focus-visible,
.hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* .hero-scroll / .hero-scroll-line (l'invito a scorrere, con il suo filo
dorato) erano rimasti dal template e non li usava nessuna pagina:
rimossi insieme alle altre linee della hero. */
/* ─── CONTO ALLA ROVESCIA ─────────────────────────────────
Il riquadro è quello di .next-inner (stesso bordo dorato
tenue, stesso filo in sfumatura sul bordo alto): è già il
modo in cui la home incornicia un evento singolo, e due
riquadri diversi nella stessa pagina si noterebbero.
Qui però il contenuto è centrato, come .quote-band: le
quattro celle sono simmetriche e un titolo a bandiera
sopra a una fila centrata sembrerebbe storto.
Il pannello video riusa .ev-video-frame di evento.css.
─────────────────────────────────────────────────────────── */
.countdown-band {
position: relative;
border: 1px solid rgba(201,168,76,.15);
padding: 4rem 3rem;
margin-top: 5rem;
text-align: center;
}
.countdown-band::before {
content: '';
position: absolute;
top: -1px; left: 30%; right: 30%;
height: 2px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}
/* ⚠️ Nel sito non esiste nessuna regola globale per [hidden]: senza questa
riga il `display: grid` delle due parti batterebbe l'attributo e si
vedrebbero conto e video insieme. È il selettore che tiene in piedi
l'alternanza, non un dettaglio. */
.countdown-band [hidden] { display: none; }
.cd-eyebrow {
font-family: var(--font-label);
font-size: var(--fs-label);
letter-spacing: .38em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1.2rem;
}
.cd-title {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4.5vw, 3.4rem);
font-weight: 300;
line-height: 1.08;
margin-bottom: .6rem;
}
.cd-title em { font-style: italic; color: var(--gold-light); }
.cd-when {
font-family: var(--font-display);
font-style: italic;
font-size: 1.1rem;
color: var(--text-dim);
}
/* `grid-auto-flow: column` e non quattro colonne dichiarate: con
reduced-motion la cella dei secondi sparisce, e con un
`repeat(4, 1fr)` avrebbe lasciato la sua colonna vuota. Così le
celle vive si dividono lo spazio qualunque sia il loro numero. */
.cd-timer {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 1rem;
max-width: 620px;
margin: 2.5rem auto 0;
}
.cd-cell {
border: 1px solid rgba(201,168,76,.18);
background: rgba(13,59,62,.35);
padding: 1.4rem .6rem 1.1rem;
}
.cd-num {
display: block;
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 300;
line-height: 1;
color: var(--gold-light);
/* ⚠️ Due cose diverse, e servono tutte e due.
`tnum` — le cifre di Cormorant non hanno la stessa larghezza: senza,
a ogni secondo la cella si allargava e si stringeva.
`lnum` — Cormorant usa di default le cifre "old-style", che hanno
altezze diverse e alcune sotto la linea di base (il 4 e il 5
scendono, l'1 è basso). Su una data ferma è un pregio ed è il
motivo per cui il resto del sito le tiene così; su un numero che
cambia ogni secondo la fila balla su e giù. Qui, e solo qui,
passano alle cifre allineate: stessa altezza, stessa base.
Verificato che il webfont di Google le contenga. */
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: 'lnum', 'tnum';
margin-bottom: .5rem;
}
.cd-unit {
display: block;
font-family: var(--font-label);
font-size: var(--fs-micro);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-dim);
}
/* Chi ha chiesto meno movimento non si tiene una cifra che cambia sessanta
volte al minuto: la cella sparisce e il conto si aggiorna al minuto
(vedi js/countdown.js). */
.cd-senza-secondi .cd-cell--sec { display: none; }
.cd-video {
/* a tutta larghezza il riquadro 16:9 arriverebbe a 1170px e da solo
riempirebbe uno schermo: è lo stesso tetto del video di chi-siamo */
max-width: 760px;
margin: 2.5rem auto 0;
text-align: left;
}
.cd-video .ev-video-play-privacy { margin-inline: auto; }
/* ─── IL SIPARIO ──────────────────────────────────────────
Due tende che si aprono e scoprono l'anteprima del trailer.
⚠️ NON è velluto rosso, ed è una scelta. Il rosso è la
convenzione del teatro, ma in questo sito sarebbe l'unico
punto con quel colore: si leggerebbe come un'immagine
incollata sopra, non come parte della pagina. Il velluto è
petrolio scuro con il filo dorato — quello che lo fa
leggere come un sipario sono le pieghe, il peso e l'ombra
al centro, non la tinta.
─────────────────────────────────────────────────────────── */
.cd-stage {
position: relative;
/* il riquadro video è 16:9 e le tende escono dai suoi lati:
senza questo, uscendo allargherebbero la pagina */
overflow: hidden;
}
.cd-sipario {
position: absolute;
inset: 0;
/* ⚠️ SEMPRE, anche a tende chiuse e anche a metà corsa: il pulsante play
sotto deve restare premibile. Un pannello a copertura totale che si
prende i click è il difetto che in questo sito ha già reso inutilizzabile
l'hamburger del menu. Si verifica con document.elementFromPoint(). */
pointer-events: none;
}
/* A video partito le tende non servono più, e lasciarle lì significherebbe
tenere due elementi trasparenti sopra un player che va. `is-loaded` lo
mette evento.js al click sul play. */
.ev-video-frame.is-loaded ~ .cd-sipario { display: none; }
.cd-tenda {
position: absolute;
top: 0;
bottom: 0;
/* +1px: a metà di una larghezza dispari due pannelli al 50% lasciano una
fessura di mezzo pixel al centro, e prima dell'apertura si vede una riga
di anteprima in mezzo al sipario — sembra un errore di caricamento. */
width: calc(50% + 1px);
background:
/* ⚠️ DUE serie di pieghe a periodo diverso (38px e 67px), non una.
Con una sola il disegno torna identico ogni 38px e a video si legge
come un pannello a righe, non come un tessuto: le pieghe di un drappo
non sono mai equidistanti. La seconda serie, più larga e più tenue,
ne rompe la cadenza e fa comparire solchi più profondi a intervalli
irregolari. */
repeating-linear-gradient(90deg,
rgba(0,0,0,.34) 0px,
rgba(0,0,0,0) 23px,
rgba(0,0,0,.34) 67px),
/* le pieghe strette: chiaro sulla cresta, scuro nel solco */
repeating-linear-gradient(90deg,
rgba(0,0,0,.46) 0px,
rgba(0,0,0,.10) 11px,
rgba(201,168,76,.07) 19px,
rgba(0,0,0,.10) 27px,
rgba(0,0,0,.46) 38px),
/* il drappo: più chiaro a metà altezza, come un tessuto illuminato
dalla ribalta */
linear-gradient(180deg, #06181a 0%, #0d3b3e 48%, #051618 100%);
/* la corsa vera: lento a staccarsi, poi scorre, poi si posa. Un sipario
non è una micro-interazione da 200ms: sotto il secondo non si legge
come un sipario ma come un pannello che scatta via. */
transition: transform 1.8s cubic-bezier(.62,.02,.3,1);
/* ⚠️ `will-change` qui è sicuro: la tenda è una foglia e non contiene
nessun `position: fixed`. La regola del sito — mai transform/will-change
su un ANTENATO di un elemento fisso — vale ancora, non è un'eccezione. */
will-change: transform;
}
/* Il filo dorato sta sul bordo interno di CIASCUNA tenda, non sulla linea di
mezzo del sipario. A tende chiuse il risultato a video è lo stesso — una
cucitura dorata al centro — ma aprendosi il filo se ne va con la sua tenda,
che è quello che fa davvero il bordo di un drappo. Un filo fermo al centro
resterebbe invece sopra l'immagine scoperta, e si leggerebbe come un
graffio sulla foto: provato, ed era proprio così.
Il secondo inset è l'ombra del drappo che ricade verso l'interno. */
.cd-tenda--sx {
left: 0;
box-shadow: inset -1px 0 0 rgba(201,168,76,.55),
inset -7px 0 12px -7px rgba(245,230,184,.30),
inset -26px 0 34px -26px rgba(0,0,0,.85);
}
.cd-tenda--dx {
right: 0;
box-shadow: inset 1px 0 0 rgba(201,168,76,.55),
inset 7px 0 12px -7px rgba(245,230,184,.30),
inset 26px 0 34px -26px rgba(0,0,0,.85);
}
.cd-video.is-aperto .cd-tenda--sx { transform: translateX(-100.5%); }
.cd-video.is-aperto .cd-tenda--dx { transform: translateX( 100.5%); }
/* Chi l'ha già visto una volta non se lo rivede a ogni visita: le tende non
compaiono proprio, e fra lui e il trailer non c'è 1,8s di attesa. */
.cd-video.senza-sipario .cd-sipario { display: none; }
/* Chi ha chiesto meno movimento non riceve una versione più corta
dell'animazione: riceve il trailer, e basta. */
@media (prefers-reduced-motion: reduce) {
.cd-sipario { display: none; }
}
/* ─── PREVIEW STRIP ─── */
.preview-strip {
padding: 7rem 0 5rem;
}
.strip-label {
font-family: var(--font-label);
font-size: var(--fs-label);
letter-spacing: .42em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 3rem;
}
.strip-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 1px;
}
.strip-card {
position: relative;
padding: 3rem 2.5rem;
background: rgba(13, 59, 62, .25);
border: 1px solid rgba(201,168,76,.1);
text-decoration: none;
color: inherit;
display: block;
overflow: hidden;
transition: background var(--transition-slow),
border-color var(--transition-slow);
}
.strip-card:hover {
background: rgba(13, 59, 62, .5);
border-color: rgba(201,168,76,.3);
}
.strip-card-num {
font-family: var(--font-display);
font-size: 5rem;
font-style: italic;
color: rgba(201,168,76,.06);
position: absolute;
top: .5rem; right: 1.5rem;
line-height: 1;
transition: color var(--transition-slow);
}
.strip-card:hover .strip-card-num { color: rgba(201,168,76,.13); }
.strip-card-label {
font-family: var(--font-label);
font-size: var(--fs-label);
letter-spacing: .28em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1rem;
}
.strip-card-title {
font-family: var(--font-display);
font-size: 2rem;
font-weight: 300;
line-height: 1.2;
margin-bottom: .8rem;
}
.strip-card-desc {
font-size: var(--fs-sm);
color: var(--text-dim);
line-height: 1.72;
}
.strip-card-arrow {
position: absolute;
bottom: 2rem; right: 2rem;
font-size: 1.2rem;
color: var(--gold);
opacity: 0;
transform: translateX(-8px);
transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.strip-card:hover .strip-card-arrow { opacity: 1; transform: none; }
/* ─── NEXT SHOW ─── */
.next-show {
padding: 0 0 8rem;
}
.next-inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 5rem;
align-items: center;
border: 1px solid rgba(201,168,76,.15);
padding: 4rem;
position: relative;
}
.next-inner::before {
content: '';
position: absolute;
top: -1px; left: 8%; right: 55%;
height: 2px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}
/* il badge non ha margini suoi: ogni contesto se li aggiunge
(vedi le stesse righe in spettacoli.css e show.css) */
.next-inner .badge-auto { margin-bottom: .7rem; }
.next-label {
font-family: var(--font-label);
font-size: var(--fs-label);
letter-spacing: .38em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 1.2rem;
}
.next-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 300;
line-height: 1.05;
margin-bottom: .5rem;
}
.next-title em {
font-style: italic;
color: var(--gold-light);
}
.next-author {
font-family: var(--font-display);
font-style: italic;
font-size: 1.1rem;
color: var(--text-dim);
margin-bottom: 2rem;
}
.next-meta {
display: flex;
gap: 2.5rem;
margin-bottom: 2rem;
}
.meta-item .meta-l {
font-family: var(--font-label);
font-size: var(--fs-label);
letter-spacing: .28em;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: .25rem;
}
.meta-item .meta-v {
font-family: var(--font-display);
font-size: 1.05rem;
}
.next-desc {
font-size: var(--fs-base);
line-height: 1.88;
color: var(--text-light);
}
.next-actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ─── QUOTE BAND ─── */
.quote-band {
padding: 6rem var(--pad-x);
text-align: center;
border-top: 1px solid rgba(201,168,76,.08);
border-bottom: 1px solid rgba(201,168,76,.08);
margin-bottom: 2rem;
}
.quote-band blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 300;
color: var(--gold-pale);
line-height: 1.45;
max-width: 800px;
margin: 0 auto 1.5rem;
}
.quote-band cite {
font-family: var(--font-label);
font-style: normal;
font-size: var(--fs-label);
letter-spacing: .42em;
color: var(--gold);
text-transform: uppercase;
}
/* ─── HOME RESPONSIVE ─── */
@media (max-width: 1200px) {
/* meno spazio: il testo si stringe per lasciar respirare l'immagine */
.hero-slide-body { max-width: 52%; }
}
@media (max-width: 900px) {
.strip-grid { grid-template-columns: 1fr; }
.next-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
#hero.hero--carousel { height: auto; min-height: 100vh; padding-top: 7rem; }
.hero-slide { position: relative; justify-content: center; }
/* fuori dal flusso solo le slide non attive: così l'altezza segue quella visibile */
.hero-slide:not(.is-active) { position: absolute; inset: 0; }
.hero-slide-body { text-align: center; }
.hero-slide-meta,
.hero-slide-actions { justify-content: center; }
.hero-nav { width: 38px; height: 56px; font-size: 1.3rem; }
/* il testo passa al centro e non ha più una metà libera: serve buio uniforme */
.hero-slide-body { max-width: 100%; }
#hero.hero--carousel::before {
background: linear-gradient(to bottom, rgba(8,31,33,.88) 0%, rgba(8,31,33,.62) 35%,
rgba(8,31,33,.68) 65%, rgba(8,31,33,.92) 100%);
}
}
/* Le quattro celle in fila reggono fino a qui: sotto, con i 5% di
riempimento di .wrap e il riempimento del riquadro, la cella scende
sotto i 60px e "Secondi" — sette lettere di Syncopate spaziate — non
ci sta più. A 2×2 la cella torna larga il doppio. */
@media (max-width: 560px) {
.cd-timer {
grid-auto-flow: row;
grid-template-columns: repeat(2, 1fr);
gap: .8rem;
}
}
@media (max-width: 600px) {
/* Il gradino per telefono: la misura sta in base.css. Erano 112px sopra. */
.preview-strip { padding: var(--sez-y) 0; }
/* Su telefono il riquadro teneva 4rem di riempimento per lato: 128px dei
~350 disponibili. Vedi la nota di .next-inner qui sotto. */
.countdown-band { padding: var(--sez-y) 1.4rem; margin-top: var(--sez-y); }
.cd-timer { margin-top: 1.8rem; }
.cd-video { margin-top: 1.8rem; }
.cd-cell { padding: 1rem .4rem .8rem; }
.cd-unit { letter-spacing: .1em; }
.hero-actions { flex-direction: column; align-items: center; }
/* a spaziatura piena la riga si spezza su "stagione 2026" */
/* La spaziatura si stringe, il corpo no: a spaziatura piena la riga si
spezzava su "stagione 2026". */
.hero-eyebrow--carousel { letter-spacing: .26em; }
.hero-slide-meta { gap: 1.4rem; }
.hero-slide-actions{ flex-direction: column; width: 100%; }
.hero-slide-actions .btn { width: 100%; text-align: center; }
/* le frecce coprirebbero il testo: restano i pallini */
.hero-nav { display: none; }
/* Il blocco "Prossimo evento" cambia a ogni rotazione: con 4rem di padding
e i tre dati in fila, bastava un nome di teatro un po' lungo per far
sbordare la pagina. Ora il padding si stringe e i dati vanno a capo. */
.next-inner { padding: 2.5rem 1.5rem; }
.next-meta { flex-wrap: wrap; gap: 1.4rem 2rem; }
}
/* Niente dissolvenze né autoplay per chi ha chiesto meno animazioni */
@media (prefers-reduced-motion: reduce) {
.hero-slide, .hero-bg-img { transition: none; }
}