/* ══ IL MODAL «IN EVIDENZA» ═══════════════════════════════════════════════════ Quasi tutto viene da `scena.css`, che è lo stesso foglio della card: qui c'è solo quello che una card in un elenco non ha — la finestra intorno, il chip a cavallo, il dropdown della mappa e la descrizione sotto. Se qui si ritrovasse a scrivere di nuovo il velo, il titolo o la Sicilia, vorrebbe dire che le due cose stanno per divergere. */ /* ═══ LARGO QUANTO LA CARD ════════════════════════════════════════════════ Il modal è la card aperta: se è più stretto, aprendolo la cosa si RIMPICCIOLISCE invece di crescere, e il gesto sembra andare all'indietro. Il margine intorno è quello che la pagina lascia alle card ai lati — dieci pixel — non uno spazio scelto a occhio per «far respirare» la finestra. */ .promo-velo{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:10px; background:rgba(8,12,24,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .3s ease; } .promo-velo.aperto{ opacity:1; pointer-events:auto; } .promo{ position:relative; width:100%; max-width:440px; max-height:90vh; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; background:#fff; border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.45); transform:translateY(16px) scale(.96); transition:transform .32s cubic-bezier(.22,.61,.36,1); } .promo-velo.aperto .promo{ transform:none; } /* ═══ ALTA QUANTO LA CARD, NON IN PROPORZIONE ═════════════════════════════ Con un rapporto fisso la fotografia cambiava altezza col telefono, e su uno schermo largo diventava una fascia molto più alta della card da cui si era appena usciti: la stessa cosa, aperta, non deve cambiare formato. Il numero è `--hero-h`, la stessa variabile dell'insegna della maschera e della card dell'evento. Non si copia: copiato, il giorno che quella cambia questa resta indietro e nessuno collega le due cose leggendo. */ .promo-scena{ flex:none; height:var(--hero-h, 196px); border-radius:20px 20px 0 0; } /* Il chip: dove finisce la scena. `top` in percentuale della finestra non si può — sta a cavallo dell'altezza della scena, che è i due terzi della larghezza. Lo si tiene ancorato al fondo della scena con `--scena-fondo`, che il copione misura quando apre. */ .promo-chip{ top:calc(var(--scena-fondo, 240px) - 30px); right:1rem; } /* ── I PALLINI E LA TIPOLOGIA, SULLA FOTOGRAFIA ───────────────────────────── */ .promo-barra{ position:absolute; top:.65rem; left:.65rem; z-index:5; display:flex; align-items:center; gap:.45rem; } /* Il link e la stella: un gruppo solo, in alto al centro della fotografia. */ .promo-centro{ position:absolute; top:.65rem; left:50%; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:.45rem; } .promo-tondo{ flex:none; width:32px; height:32px; border:0; border-radius:50%; cursor:pointer; background:rgba(0,0,0,.42); color:#fff; font-size:.95rem; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); transition:transform .12s, background .15s; } .promo-tondo:active{ transform:scale(.9); } .promo-tondo:hover{ background:rgba(0,0,0,.68); } /* La tipologia è un pallino come gli altri due, con dentro l'icona del genere: tre tondi uguali in riga, e l'unica cosa che cambia è cosa c'è dentro. */ /* ═══ L'ICONA DEL TIPO SI VESTE COME LA DATA ══════════════════════════════ Era oro, unica cosa colorata in una fila di tondi di vetro scuro. Adesso è bianca come le altre: il chip della data, i tondi dei gesti e questa sono la stessa famiglia — vetro scuro, filo bianco, contenuto bianco — e chi guarda vede una barra sola invece di quattro cose che si somigliano poco. Il tipo lo dice la FORMA dell'icona, non il colore: un tondo d'oro fra tondi scuri urla, e su una fotografia gialla non si vede nemmeno. */ .promo-genere{ color:#fff; } .promo-genere[hidden]{ display:none; } /* La Sicilia nel modal è un bottone vero, e un po' più grande. Scesa come sulla card: in cima le stanno accanto la data e i tondi dei gesti, e la sagoma — che è l'unica che dice DOVE — faceva loro da sfondo. Un quinto dell'altezza la libera e la lascia comunque in alto. */ .promo .sc-mini{ top:21%; right:.7rem; width:84px; cursor:pointer; } /* ── IL DROPDOWN DELLA MAPPA ──────────────────────────────────────────────── */ /* `flex:none` perché il modal è una colonna flessibile: quando quello che c'è dentro non ci sta — una fotografia alta, un racconto lungo — il flex STRINGE i figli che glielo permettono, e la mappa era il primo a cedere. Si apriva con la sua altezza e restava alta zero: la Sicilia si toccava, la classe cambiava, e non si vedeva succedere niente. */ .promo-mappa{ flex:none; height:0; overflow:hidden; position:relative; background:rgba(10,61,98,.08); transition:height .35s ease; } .promo-mappa.aperta{ height:200px; } .promo-mappa .maplibregl-map{ position:absolute; inset:0; } /* ═══ QUI I PUNTINI NON SI TOCCANO ═══════════════════════════════════════════ Nel modal la mappa serve a UNA cosa: far vedere dove sta il posto che stai già guardando. Sui suoi puntini non c'è niente da aprire — e toccandoli saltavano in alto a sinistra: il marker ha addosso un `transform` messo da MapLibre per tenerlo sulla sua coordinata, e il tocco ne innescava un altro che glielo azzerava. Un puntino che scappa mentre lo tocchi fa sembrare rotta tutta la pagina. Solo qui dentro: sulle mappe vere i puntini si toccano, ed è il modo di aprire quello che raccontano. */ /* ═══ QUI DENTRO I SEGNI NON SI TOCCANO, FIGLI COMPRESI ════════════════════ La regola diceva «il marker non riceve tocchi», e bastava finché il marker era l'unica cosa. Poi la goccia dentro ha avuto la sua regola — `.stmap-pin` torna a sentire il tocco, perché sulle altre mappe serve — e quella, essendo più precisa, vinceva anche qui: nel modal il segno tornava toccabile, e toccandolo perdeva il posto. Qui non c'è niente da aprire: la mappa del modal mostra dov'è la cosa che stai già guardando. Sordi tutti, dal marker all'ultima icona. */ .promo-mappa .maplibregl-marker, .promo-mappa .maplibregl-marker *, /* ═══ E QUESTE DUE PER FORZA ══════════════════════════════════════════════ La goccia e il nome hanno una regola loro in `visore.css` che li rende toccabili — due classi, come questa qui sopra col suo asterisco. A parità di forza vince chi arriva dopo, e `visore.css` si carica dopo: la mia regola perdeva, e nel modal il segno restava toccabile. Scritte per nome sono TRE classi, e allora comandano. */ .promo-mappa .maplibregl-marker .stmap-pin, .promo-mappa .maplibregl-marker .stmap-nome{ pointer-events:none; } /* ═══ I COMANDI DELLA MAPPA VANNO IN BASSO ════════════════════════════════ MapLibre li mette in alto a destra, che è il posto giusto in una mappa intera. Qui però in alto a destra sporge il chip della data, e ci finiva sopra: i tasti c'erano, si vedevano a metà, e il più non si prendeva. Non si sposta il chip — sta a cavallo, è il suo posto — e non si tocca il visore, che serve a tutto il sito: si spostano i comandi, ma solo dentro questo riquadro. A metà altezza e non in fondo: il riquadro è basso, e in fondo i tasti starebbero appiccicati al corpo che comincia subito sotto. Al centro stanno nel mezzo di quello che si vede, e il pollice ci arriva senza mirare. */ .promo-mappa .maplibregl-ctrl-top-right{ top:50%; transform:translateY(-50%); } /* ── QUELLO CHE LA CARD NON HA: LA DESCRIZIONE ────────────────────────────── */ .promo-sotto{ padding:1.1rem 1.2rem 1.2rem; } .promo-ora{ margin:0 0 .6rem; font-size:.84rem; font-weight:700; color:#0a3d62; display:flex; align-items:center; gap:.4rem; } .promo-ora[hidden]{ display:none; } .promo-ora i{ color:#f0a640; } .promo-desc{ margin:0; font-size:.9rem; line-height:1.55; color:#3a444f; } .promo-desc:empty{ display:none; } .promo-desc:not(:empty) + .promo-cta{ margin-top:1.1rem; } .promo-cta{ display:block; padding:.72rem .9rem; border-radius:999px; background:#1a86c8; color:#fff; font-weight:800; font-size:.92rem; text-align:center; text-decoration:none; } .promo-cta:active{ transform:scale(.98); } .promo-avviso{ position:absolute; left:.65rem; top:3.6rem; z-index:6; background:rgba(0,0,0,.82); color:#fff; font-size:.8rem; font-weight:700; padding:.4rem .8rem; border-radius:999px; white-space:nowrap; box-shadow:0 0 0 1px rgba(255,255,255,.5); opacity:0; transform:translateY(-6px); transition:opacity .2s, transform .2s; pointer-events:none; } .promo-avviso.si-vede{ opacity:1; transform:translateY(0); } /* L'indirizzo sotto il titolo apre la mappa come la Sicilia: si vede che si può toccare — sottolineato appena, e col dito che cambia — se no resta un bottone che nessuno prova. */ .promo .sc-riga.si-tocca{ cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.45); } /* La stella nel modal: stesso tondo degli altri comandi, stessi due stati della card — vuota contorno, piena oro. Chi tocca la card e si ritrova il modal deve vedere la stessa cosa più grande, non un'altra cosa. */ .promo-stella.su{ color:#f2b705; } .promo-stella[hidden]{ display:none; } /* ══ LA SCENA SENZA FOTOGRAFIA ════════════════════════════════════════════════ Un gradiente vero e il segno di quello che si sta guardando. Il grigio liscio di prima sembrava un'immagine non arrivata; questo è un fondo scelto, e la differenza è tutta lì: uno dice «manca qualcosa», l'altro «non c'è ancora una fotografia, ed è normale». */ .promo-scena.promo-vuota{ background:linear-gradient(150deg, #ffd98a 0%, #f2a743 45%, #d97a1f 100%); } /* ═══ IL TESTO SI DEVE LEGGERE ANCHE QUI ═════════════════════════════════════ Il velo della scena sale dal basso, ed è fatto per le fotografie: su un gradiente chiaro il titolo bianco resta bianco su giallo, cioè illeggibile. Sulla scena senza fotografia il velo scende ANCHE dall'alto, dove il testo sta davvero, e resta un velo — il fondo si vede ancora. */ .promo-scena.promo-vuota::before{ background: linear-gradient(to bottom, rgba(52,33,4,.55) 0%, rgba(52,33,4,.18) 34%, rgba(52,33,4,0) 58%), linear-gradient(to top, rgba(52,33,4,.5) 0%, rgba(52,33,4,0) 42%); } /* Un filo d'ombra sotto le lettere: costa niente e regge anche se un giorno il gradiente diventasse più chiaro. */ .promo-scena.promo-vuota .sc-titolo{ text-shadow:0 1px 3px rgba(52,33,4,.55); } .promo-scena.promo-vuota .sc-riga{ text-shadow:0 1px 2px rgba(52,33,4,.5); } /* Il segno resta dietro il testo, non in mezzo: è un fondo, non un disegno da guardare. Più grande e più scarico. */ .promo-segno{ z-index:0; font-size:4.2rem; color:rgba(255,255,255,.24); } .promo-segno{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); } .promo-segno[hidden]{ display:none; } /* ══ «LA MIA POSIZIONE» ═══════════════════════════════════════════════════════ Subito sotto la mappa del modal: allarga l'inquadratura fino a contenere il punto e te. Sta attaccato alla mappa — non alla fine del modal — perché si capisca che comanda quella e non altro. */ /* Il guscio: la mappa dentro, il bottone sotto. Serve a tenere il bottone FUORI dal contenitore che MapLibre governa — là in mezzo se lo ritrovava spostato a ogni respiro della mappa. `flex:none` perché il modal è una colonna flessibile e stringe i figli che glielo permettono. */ .promo-carta-mappa{ position:relative; flex:none; } .promo-mappa{ position:relative; } /* ═══ UN TASTO DELLA COLONNINA ═══════════════════════════════════════════════ Non più un pillolone appeso a un bordo che si muoveva, e nemmeno una riga sotto la mappa: il mirino sta nella colonnina di destra, sotto le freccette del nord, con la stessa faccia degli altri tasti — ventinove pixel per ventinove, fondo bianco, il segno azzurro. Le parole restano per chi legge con le orecchie (`aria-label`): in un tasto di quella misura non ci stanno, e accanto a una bussola non servono. */ /* Dentro il gruppo di MapLibre il tasto è un fratello degli altri: misura e filo separatore glieli dà il foglio della libreria, qui solo il segno. */ .promo-mappa .promo-iosono{ display:flex; align-items:center; justify-content:center; width:29px; height:29px; padding:0; border:0; background:transparent; color:#2e86de; font-size:.82rem; cursor:pointer; } .promo-iosono[hidden]{ display:none; } /* ═══ PRIMA CHE LA COLONNINA ESISTA ══════════════════════════════════════════ Appena la tendina si apre il mirino è già acceso, ma la colonnina dei comandi nasce solo con la mappa: nel frattempo sta qui — figlio della carta, nel punto ESATTO dove la colonnina lo metterà: sotto le frecce dello zoom e il nord, come dappertutto. Il conto dei 106 pixel è quello della colonnina: 10 di margine, ~90 del gruppo zoom+bussola, e i 6 del suo distacco. In alto non poteva stare — lì c'è il chip della data, e lo copriva. Quando trasloca non si vede nessun salto: i comandi gli compaiono sopra. */ .promo-carta-mappa > .promo-iosono{ position:absolute; top:106px; right:10px; /* SOTTO i comandi di MapLibre (loro stanno a 2): se per un istante convivono, a vincere sono quelli veri — mai il provvisorio stampato sopra le frecce. */ z-index:1; width:29px; height:29px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:4px; cursor:pointer; background:#fff; color:#2e86de; font-size:.82rem; box-shadow:0 0 0 2px rgba(0,0,0,.1); } .promo-carta-mappa > .promo-iosono[hidden]{ display:none; } /* Mentre il telefono cerca: il tasto lo dice e non si può premere due volte. */ .promo-iosono.cerca{ opacity:.65; pointer-events:none; } /* ═══ IL VELO NERO DEL MODAL, PIÙ SCURO ═════════════════════════════════════ Lo stesso della card degli eventi: su una fotografia chiara il titolo e le righe bianche si perdevano. Più fitto in basso, e una fascia in cima dietro i bottoni. Non tocca la scena «vuota» (senza fotografia), che ha il suo. */ .promo .promo-scena:not(.promo-vuota)::before{ background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 14%, rgba(0,0,0,0) 28%), linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.74) 22%, rgba(0,0,0,.4) 42%, rgba(0,0,0,0) 62%); } .promo .promo-scena .sc-titolo, .promo .promo-scena .sc-riga{ text-shadow:0 1px 3px rgba(0,0,0,.85); } /* Il giorno della settimana nel quadratino della data: era un grigio chiaro che su bianco quasi non si leggeva. Nel modal è quasi nero. */ .promo .promo-chip .w{ color:#10161d; } /* La domenica nel quadratino della data: rossa, tutta — giorno, numero e mese. */ .promo .promo-chip.promo-domenica .w, .promo .promo-chip.promo-domenica .d, .promo .promo-chip.promo-domenica .m{ color:#c62828; }