/* ================================================================================================== Tema "Fdo" per la pagina "Scegli i biglietti" — SOLO modalità POSTI LIBERI. Ri-skinna il markup esistente (classi legacy .PostoLibero/.Fascia/.Tariffa/.Totale/#TotaleCarrello/ .ButtonProceed/#ReqCoupon) SENZA toccarne struttura, id, name, data-cart e hook JS: le regole sono tutte scoped sotto .FdoPage (aggiunta al solo per i posti liberi), quindi non toccano la modalità "posti in pianta" (che resta su evento_scelta_posti.css) né il resto del sito. Le variabili (--color-*, --space-*, --radius, --font-display, --gradient-heading) vengono da variables.css/global.css, caricati ovunque. Caricare DOPO evento_scelta_posti.css. ================================================================================================== */ /* Contenitore centrato come una FdoSection (sfondo blu dal ) */ .FdoPage .Container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: var(--space-7) var(--space-4); background: transparent; } @media (min-width: 1025px) { .FdoPage .Container { padding: var(--space-9) var(--space-6); } } .FdoPage .PostoLibero { width: 100%; } /* ------------------------------ Testata evento ------------------------------ */ .FdoPage .Container .EventInfo { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; margin: 0; } .FdoPage .Container .PageTitle { margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(32px, 6vw, var(--text-h2-size)); line-height: 1.14; font-weight: var(--text-h2-weight); color: #d89958; background: var(--gradient-heading); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .1em; } /* "Salerno 2026" leggermente più grande; sottotitolo/data/luogo stesso font (bianchi). */ .FdoPage .Container .EventTitle { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 30px); line-height: 1.3; font-weight: 400; color: var(--color-h3); } .FdoPage .Container .EventSubTitle, .FdoPage .Container .EventDates, .FdoPage .Container .EventLocation { margin: 0; font-family: var(--font-display); font-size: clamp(calc(1.125rem - 0.3rem), 4.2vw, calc(var(--text-h3-size) - 0.3rem)); line-height: 1.3; font-weight: 400; color: #ffffff; } /* ------------------------------ Coupon (label sopra, input + Applica in riga) ------------------------------ */ .FdoPage .Container .EventInfo #ReqCoupon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); width: auto; margin: var(--space-6) auto 0; padding: 0; border: none; background: none; text-align: left; } .FdoPage .Container .EventInfo #ReqCoupon SPAN { flex: 0 0 100%; margin: 0; padding: 0; color: var(--color-body); font-weight: 600; } .FdoPage .Container .EventInfo #ReqCoupon #CouponCode { height: 44px; box-sizing: border-box; min-width: 220px; margin: 0; padding: 0 var(--space-3); border: 1px solid #ffffff33; border-radius: var(--radius); background-color: #ffffff14; color: var(--color-body); font-size: var(--text-body-size); } .FdoPage .Container .EventInfo #ReqCoupon #CouponCode::placeholder { color: #ffffff80; } .FdoPage .Container .EventInfo #ReqCoupon BUTTON { display: inline-flex; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0 var(--space-5); border: none; border-radius: var(--radius); background-color: var(--color-button-secondary-bg); color: var(--color-button-secondary-text); font-family: var(--font-body); font-size: var(--text-body-size); font-weight: 600; cursor: pointer; } .FdoPage .Container .EventInfo #ReqCoupon BUTTON:hover { background-color: var(--color-button-secondary-bg-hover); } /* ------------------------------ Tabella tariffe (card + griglia) ------------------------------ */ .FdoPage .Container .PostoLibero #Selector { margin: 0; } .FdoPage .Container .PostoLibero #Selector .Fascia { display: block; width: 100%; margin: var(--space-6) auto 0; border: 1px solid #ffffff26; border-radius: var(--radius); background-color: #ffffff0f; overflow: hidden; } .FdoPage .Container .PostoLibero #Selector .Fascia .NomeFascia { margin: 0; padding: var(--space-4) var(--space-5) 0; font-family: var(--font-display); font-size: var(--text-h3-size); color: var(--color-h3); } /* Righe come griglia a 5 colonne (settore, tariffa, prezzo, quantità, totale) */ /* height/line-height: reset del vincolo legacy (evento_scelta_posti.css impone height:54px e line-height:54px, che schiaccia la riga e fa sforare il Quantità sfora sulla colonna Totale (accavallamento). Il breakpoint 1025px è lo stesso usato altrove nel tema Fdo per lo switch mobile↔desktop. */ @media (max-width: 1024px) { .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa.Head { display: none; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-4); } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa SPAN { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); text-align: right; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .NomeSettore { text-align: right; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa SPAN::before { color: var(--color-h3); font-size: var(--text-caption-size); text-transform: uppercase; letter-spacing: .04em; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .NomeSettore::before { content: "Settore"; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .NomeTariffa::before { content: "Tariffa"; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .Prezzo::before { content: "Prezzo"; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .Quantita::before { content: "Quantità"; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .Totale::before { content: "Totale"; } .FdoPage .Container .PostoLibero .Totali { flex-direction: column; align-items: stretch; text-align: center; gap: var(--space-2); } .FdoPage .Container .PostoLibero .Totali .FdoBuyCartSummary { justify-content: center; } .FdoPage .Container .PostoLibero .ButtonProceed { width: 100%; margin-left: 0; } }