/* SITO PUBBLICO SUL TELEFONO (27/09/2026) Caricato DOPO style.css e solo sulle pagine pubbliche (include/inc_head_script.asp: stessa condizione di client-side.js, quindi non in /dashboard/; il pannello /_csxp/ ha un CSS suo). Tutte le regole che cambiano l'aspetto stanno sotto i 1025 px, come il blocco "max-width:1024px" di style.css (che fino a 1024 px usa gia' la grafica del telefono), i metodi di pagamento sotto i 768: sul computer non cambia niente. Fuori dalle media query ci sono solo gli elementi nuovi, nascosti sul computer. Vanno con le funzioni IntestazioneTelefono() e PassoTelefono() di include/js/frontend.js. */ /*elementi nuovi: solo sul telefono*/ .passo-telefono, .riepilogo-fatturazione-telefono, .solo-telefono{display: none;} @media only screen and (max-width:1024px) { /*--- PAGINA: il body cresce con il contenuto, cosi' l'intestazione "sticky" resta disponibile su tutta la pagina. (style.css da' a html e body l'altezza dello schermo: serve all'area riservata, qui no) ---*/ body{height: auto; min-height: 100%;} /*--- INTESTAZIONE: si nasconde scorrendo in giu', ricompare appena si risale (classe messa da frontend.js) ---*/ .StyleIntestazione{transition: transform .25s ease, box-shadow .25s ease;} .StyleIntestazione.intestazione-nascosta{transform: translateY(-110%); box-shadow: none;} /*logo intero (prima si vedeva solo il simbolo, largo 40 px)*/ .StyleIntestazione #logohead{width: auto; max-width: 45%;} .StyleIntestazione #logohead img{height: 34px; width: auto; max-width: 100%; object-fit: contain;} /*pulsanti dell'intestazione da 44 px*/ .StyleIntestazione .logiin, .StyleIntestazione .badgecartint, .StyleIntestazione .logout{height: 44px; min-width: 44px; box-sizing: border-box; justify-content: center;} .StyleIntestazione .logout{background: #5a6784;} .StyleIntestazione .logout:hover{background: #3f51b5;} /*col mouse resta il colore di style.css*/ /*--- PIEDE: nessuno scorrimento laterale (il blocco "fade-right" prima di comparire usciva di 40 px) e link da 44 px ---*/ .footer1-cont{overflow: hidden;} /*solo i link della colonna di sinistra (Contatti, Condizioni di vendita, Consenso Cookies, Privacy Policy): nella colonna dei contatti telefono ed email restano alla stessa distanza delle righe degli indirizzi*/ .footer1-cont a[href^="/it/page/"], .footer1-cont #open_preferences_center{display: inline-block; padding: 10px 0; line-height: 24px;} /*--- CARRELLO: "Passo N di 5" (la barra dei 5 passi sul telefono e' nascosta da style.css) ---*/ .passo-telefono{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #dce2ef; font-size: 14px; line-height: 20px; color: #0f3c64;} .passo-telefono strong{font-weight: 800; color: #0f3c64;} .passo-telefono-barra{flex: 0 0 80px; height: 6px; border-radius: 3px; background: #dce2ef; overflow: hidden;} .passo-telefono-barra span{display: block; height: 100%; width: 0; background: #2252b8; border-radius: 3px;} /*giorni di una sessione affiancati (prima 44% + bordi e margini: andavano uno sotto l'altro)*/ .contentstep .aulecont{gap: 8px; justify-content: flex-start;} .contentstep .aulecont .aulaitem{box-sizing: border-box; width: calc(50% - 4px); margin: 0 0 8px 0; padding: 8px 6px;} /*passo 3 (Riepilogo): corso e date sono gia' nel riquadro sopra, nella card restano i conti*/ body[data-passo="3"] .card-totale-body > .midtext, body[data-passo="3"] .card-totale-body > .mintext:not(.check_contratto), body[data-passo="3"] .card-totale-body > .badge-corso, body[data-passo="3"] .card-totale-body > #auladateSel, body[data-passo="3"] .card-totale-body > #auladateSel + .separatoreTotali{display: none;} /*campi dei moduli: 16 px (su iPhone niente ingrandimento al tocco), alti 44 px, bordo trasparente cosi' al tocco il campo non cambia misura*/ .contentstep input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]), .contentstep select, .contentstep textarea{font-size: 16px !important;} .contentstep input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]){min-height: 24px; border: 1px solid transparent;} .contentstep input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):focus{border-color: #0f3c64;} .contentstep select{height: 46px;} .contentstep input::placeholder{color: #6b7280;} /*grigi piu' leggibili nel carrello (#7080a0 su bianco era sotto 4,5:1)*/ .contentstep .mintext, .contentstep .cartbntprev{color: #5a6784;} .contentstep .cartbntprev:hover{color: #0f3c64;} /*col mouse resta il colore di style.css*/ /*tasti da 44 px: X del partecipante, Modifica / X del corso, svuota carrello*/ .rowdipendente-frontend .bnt-del-partecipante{top: 0; right: 0; width: 44px; height: 44px; line-height: 44px;} .rowdipendente-frontend .bnt-del-partecipante a{display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; text-decoration: none;} .box-edit-corso-cart{padding-top: 56px;} .box-edit-corso-cart .bnt-edit-record-cart{top: 6px; left: 8px; font-size: 14px;} .box-edit-corso-cart .bnt-edit-record-cart a{display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px;} .box-edit-corso-cart .bnt-del-record-cart{top: 6px; right: 6px; width: 44px; height: 44px; line-height: 44px;} .box-edit-corso-cart .bnt-del-record-cart a{display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; text-decoration: none;} .card-svuota-cart a{display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px;} /*--- CONFERMA ORDINE: riepilogo con totale e codice sconto sopra "Invia ordine" (lo sposta commerce/carrello/conferma/default.asp) ---*/ /*min-height 0: sopra i 786 px AdattaRiepilogoOrdine() (client-side.js) da' alla card l'altezza del passo visibile, che qui comprende la card stessa; senza questa regola fra "Totale" e "Invia ordine" restavano 2000 px vuoti (tablet, telefono in orizzontale). Con !important vince sullo style messo da jQuery, anche dopo un resize.*/ #postoRiepilogoTelefono .card-totale-dx{width: 100% !important; margin: 0 0 15px 0; min-height: 0 !important;} #postoRiepilogoTelefono .card-totale{position: static;} /*codice sconto: campo, pulsante "Applica" e X da 44 px*/ .buono-riga{align-items: center; gap: 8px;} .buono-riga .buono-campo{flex: 1; width: auto !important;} .buono-riga .buono-campo input{margin: 0;} .buono-riga .buono-applica, .buono-riga .buono-togli{width: auto !important; line-height: normal !important;} .buono-riga .buono-applica a{display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 10px; background: #243870; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;} .buono-riga .buono-applica a em{display: none;} .buono-riga .buono-togli a{display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; text-decoration: none;} .solo-telefono{display: inline;} /*dati di fatturazione in poche righe con "Modifica" (al posto dei campi grigi)*/ .riepilogo-fatturazione-telefono{display: block; margin: 10px 0 0 0; font-size: 15px; line-height: 22px; color: #1f2937;} .riepilogo-fatturazione-telefono .rft-riga{margin: 0 0 4px 0; overflow-wrap: anywhere;} .riepilogo-fatturazione-telefono .rft-nome{font-weight: 700; color: #0f3c64;} .riepilogo-fatturazione-telefono .rft-modifica{display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; margin-top: 6px; border: 1px solid #dce2ef; border-radius: 10px; color: #0f3c64; font-weight: 700; text-decoration: none;} #riepilogo_dati_fatturazione .box-edit-utente-cart{padding-top: 15px;} #riepilogo_dati_fatturazione .box-edit-utente-cart .form-grid{display: none;} /*--- PAGINE D'ESITO DEL PAGAMENTO E PAGINA D'ERRORE: riquadro dei recapiti chiuso e tocco su tutta la "pillola" ---*/ .box-buy.recapiti-esito{width: auto !important; margin: 0 0 20px 0; padding: 12px !important; border: 1px solid #dce2ef; border-radius: 15px; box-shadow: none;} .recapiti-esito p{position: relative; padding: 10px; line-height: 24px;} .recapiti-esito p a::after{content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 10px;} .grazie-passi .grazie-passo span{color: #5a6784;} /*due classi: lo