@charset "utf-8"; /* POC v3 — Pagina di ACQUISTO EVENTO allineata al nuovo design system "Fdo". Stile SPECIFICO della pagina evento (prefisso "FdoEvt"). Token, reset e componenti generici (Section, Heading, Button, VideoWrapper) vivono in global.css / home.css; header/footer negli include comuni. Sostituirebbe /css/evento.css sulle pagine con . Storico revisioni: v2 header blu (no id="hero"), hero 95% non-fullscreen, 2 immagini, bleed, niente CTA hero, video watch->embed. v3 (feedback): 1/5. ICONE come SVG inline (currentColor), non piu' Font Awesome. 2. Ridotto lo spazio tra hero e box acquisto (sezione "tight"). 3. Desktop a DUE COLONNE: box acquisto a SINISTRA, testo a DESTRA; date impilate (una sopra l'altra). 4. "non vincolante" NON evidenziato (testo normale). 6. Video con lo stesso componente della home (FdoEvtVideoWrapper 16/9), embed youtube-nocookie grande. 7. Le due colonne (box + testo) insieme sono larghe quanto il video (entrambi dentro il container 1200px). */ /* ============================== icona SVG generica ============================== */ .FdoEvtIcon { display: inline-block; flex-shrink: 0; width: 20px; height: 20px; vertical-align: middle; } /* ============================== HERO evento (testata) ============================== */ /* Testata allineata al pattern .FdoAreaHeader (aree-culturali): 95% di larghezza con margini (NON fullscreen), sfondo responsive a due immagini, contenuto a sinistra, chiusura con bleed. NIENTE id="hero" sul
-> header blu. */ .FdoEvtHero { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 95%; margin: 0 auto; overflow-x: clip; min-height: 100svh; padding: var(--space-8) var(--space-4) var(--space-7); background-image: var(--evt-hero-bg-mobile); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 641px) { .FdoEvtHero { background-image: var(--evt-hero-bg); } } @media (min-width: 1025px) { .FdoEvtHero { justify-content: center; padding: var(--space-10) var(--space-6) var(--space-9); } } .FdoEvtHero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(105deg, rgba(3,22,43,.80) 0%, rgba(3,22,43,.45) 44%, rgba(3,22,43,.06) 74%), linear-gradient(0deg, rgba(3,22,43,.55) 0%, rgba(3,22,43,0) 40%); pointer-events: none; } .FdoEvtHeroInner { position: relative; z-index: 1; width: 100%; max-width: 707px; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); text-align: left; } .FdoEvtHeroTitle { width: 100%; font-size: clamp(40px, 8vw, 80px); line-height: 1.1; text-align: left; text-wrap: pretty; } .FdoEvtHeroPink { margin: 0; width: 100%; font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 400; text-align: left; color: var(--color-button-secondary-bg); } .FdoEvtHeroBody { margin: 0; width: 100%; max-width: 60ch; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: #ffeaf3; } .FdoEvtHeroMeta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; font-family: var(--font-body); font-size: var(--text-body-size); line-height: 1.4; color: #ffeaf3; } .FdoEvtHeroMeta span { display: inline-flex; align-items: center; gap: var(--space-2); } .FdoEvtHeroMeta .FdoEvtIcon { color: var(--color-h3); } /* Bleed di chiusura: silhouette in basso all'hero (fondo blu = colore pagina). Altezza contenuta -> banda decorativa che non copre il contenuto. */ .FdoEvtHeroBleed { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; width: 100%; height: clamp(90px, 15vh, 190px); object-fit: fill; pointer-events: none; user-select: none; } /* ============================== sezione "acquista + testo" (due colonne) ============================== */ /* Contenitore a larghezza container (1200px), lo stesso del video sotto -> le due colonne (box + testo) insieme sono larghe quanto l'embed video (punto 7). Padding-top ridotto per avvicinare il box alla fine dell'hero (punto 2). */ .FdoEvtBuy { position: relative; z-index: 1; width: 100%; padding: var(--space-4) var(--space-4) var(--space-7); scroll-margin-top: 80px; } @media (min-width: 1025px) { .FdoEvtBuy { padding: var(--space-5) var(--space-6) var(--space-9); } } .FdoEvtBuyInner { width: 100%; max-width: var(--container-max); margin: 0 auto; } /* Mobile: colonna unica (box sopra, testo sotto). Desktop: box a sinistra (colonna piu' stretta), testo a destra (colonna piu' larga). */ .FdoEvtBuyGrid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; } @media (min-width: 1025px) { .FdoEvtBuyGrid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: var(--space-6); } } /* Un solo contenuto (solo box o solo testo): colonna unica a tutta larghezza. */ .FdoEvtBuyGrid--single { grid-template-columns: 1fr !important; } .FdoEvtBuyGrid--single .FdoEvtBookingCard { max-width: 720px; margin: 0 auto; } .FdoEvtBuyGrid--single .FdoEvtText { max-width: 72ch; margin: 0 auto; } /* Nessuna data disponibile (evento acquistabile fuori dalla finestra di vendita): avviso in oro sopra il testo, e contenuto centrato nella pagina (max 65% su desktop). Su mobile resta a piena larghezza come il resto della pagina, con l'avviso centrato. */ /* La griglia è a colonna unica: centro davvero i grid item (con solo margin:auto resterebbero a sinistra, perché justify-self di default è stretch). */ .FdoEvtBuyGrid--nodates { justify-items: center; } .FdoEvtBuyGrid--nodates .FdoEvtText { text-align: center; } .FdoEvtNoDates { margin: 0 auto var(--space-5); text-align: center; font-family: var(--font-display); font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-body-bold-weight); color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media (min-width: 1025px) { .FdoEvtBuyGrid--nodates .FdoEvtNoDates, .FdoEvtBuyGrid--nodates .FdoEvtText { max-width: 65%; } } /* ============================== box acquisto (Programmazione) ============================== */ .FdoEvtBookingCard { width: 100%; box-sizing: border-box; padding: var(--space-6); border: 1px solid var(--color-border-accent); border-radius: var(--radius); background-color: var(--color-card-prereg); text-align: left; } .FdoEvtBookingHead { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); } .FdoEvtBookingIcon { flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: rgba(255,174,206,.14); color: var(--color-h3); } .FdoEvtBookingIcon .FdoEvtIcon { width: 24px; height: 24px; } /* .FdoPage prefisso: batte ".FdoPage h4" (global.css) che imporrebbe il font display (serif) su questo titolo-etichetta. */ .FdoPage .FdoEvtBookingTitle { margin: 0; font-family: var(--font-body); font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-body-bold-weight); color: var(--color-h3); text-wrap: pretty; } .FdoEvtBookingSubtitle { margin: var(--space-1) 0 0; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-line); color: var(--color-body); } /* Date IMPILATE (una sopra l'altra): sempre colonna singola. Radio nativo nascosto; stato "checked" reso dal