/* ================================================================================================== 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. Il breakpoint 1025px è lo stesso usato altrove nel tema Fdo per lo switch mobile↔desktop. ⚠️ Su questa pagina si caricano DUE CSS e il legacy (evento_scelta_posti.css) viene PRIMA: nel suo @media (max-width:440px) lascia appese agli della riga tariffa alcune proprietà (Quantità in position:absolute, padding-left, larghezze fisse 6rem/8rem). La versione precedente di questo blocco non le azzerava, quindi sotto i 440px i due layout si sovrapponevano e la scheda si rompeva (Quantità sopra al Totale, voci rientrate). Da qui il reset esplicito sugli SPAN qui sotto. Il legacy NON va toccato: è condiviso con altre pagine. */ @media (max-width: 1024px) { /* Riepilogo tariffe (posto libero) su mobile: ogni tariffa diventa una CARD autonoma [ nome tariffa (select quantità) ] [ prezzo ] ------------------------------------------- (linea) [ TOTALE € valore ] Markup invariato: si riordinano i 5 con una griglia ad aree. */ /* padding:0 azzera il "padding:1rem" che .Fascia eredita dal legacy: rientrava le card, che risultavano più strette del box note e del box "Totale nel carrello". Solo su mobile — su desktop quel padding serve ancora (vedi il commento alle regole base). */ .FdoPage .Container .PostoLibero #Selector .Fascia { border: none; background: none; border-radius: 0; overflow: visible; padding: 0; } .FdoPage .Container .PostoLibero #Selector .Fascia .NomeFascia { padding: 0 0 var(--space-2); } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa.Head { display: none; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name qty" "price qty" "total total"; align-items: center; column-gap: var(--space-4); row-gap: 4px; width: auto; margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid #ffffff26; border-radius: 12px; background-color: #ffffff0f; } /* padding-bottom ripristinato: la regola base desktop ".Tariffa:last-child { padding-bottom:0 }" resta attiva anche qui e lasciava l'ultima card senza spazio sotto la riga TOTALE. */ .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa:last-child { margin-bottom: 0; padding-bottom: var(--space-4); } /* Reset dei residui del CSS legacy sugli span */ .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa SPAN { position: static; right: auto; bottom: auto; top: auto; left: auto; width: auto; padding: 0; margin: 0; } /* Settore nascosto (come nel design approvato). Se servisse per eventi con più settori, rimuovere questa riga o trasformarlo in eyebrow. */ .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .NomeSettore { display: none; } /* Nome tariffa: titolo in alto a sinistra */ .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .NomeTariffa { grid-area: name; display: block; text-align: left; font-size: 18px; line-height: 24px; font-weight: 600; color: #fff; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .NomeTariffa::before { content: none; } /* Prezzo: sotto il nome */ .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .Prezzo { grid-area: price; display: block; text-align: left; white-space: nowrap; color: var(--color-body); font-size: var(--text-body-size); line-height: var(--text-body-line); } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .Prezzo::before { content: none; } /* Quantità: select a destra, centrato verticalmente sul blocco nome+prezzo */ .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .Quantita { grid-area: qty; display: flex; justify-content: flex-end; align-self: center; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .Quantita::before { content: none; } /* Totale: etichetta a sinistra (float), valore inline a destra così "€ 0,00" resta unito, sotto una linea */ .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .Totale { grid-area: total; display: block; text-align: right; white-space: nowrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid #ffffff26; color: #fff; line-height: 24px; } .FdoPage .Container .PostoLibero #Selector .Fascia .Tariffa .Totale::before { content: "Totale"; float: left; line-height: 24px; color: var(--color-h3); font-size: var(--text-caption-size); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; } /* --- invariate rispetto a prima --- */ .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; } }