/* ============================================= MBcRETICA — stylesheet dedicato al mobile Regole aggiuntive, separate da style.css, attive solo sotto i 768px. ============================================= */ @media (max-width: 768px) { /* ---- Blocca ogni overflow orizzontale: la pagina non deve mai sforare i 100vw ---- */ html, body { overflow-x: hidden; max-width: 100vw; } .main-header, .hero, .section, .main-footer, .footer-inner { max-width: 100vw; } /* Il badge anno della timeline è tirato indietro di 2.5rem: allineato alla riduzione del padding (2.5rem -> 2rem) applicata da style.css su mobile, altrimenti sporge di mezzo rem oltre il bordo sinistro della sezione. */ .timeline__year { left: -2rem; } /* ---- Valori (Innovazione, Etica, Affidabilità, Collaborazione): erano in griglia 2x2 (regola di style.css a 1024px), troppo stretta su telefono: ogni card scendeva sotto i 90px di contenuto utile. ---- */ .cards--4 { grid-template-columns: 1fr; gap: 1rem; } .cards--4 .card { padding: 1.5rem; } /* ---- Tutti i pulsanti: una sola riga, centrati, larghezza piena ---- */ .btn-hero, .btn-header-cta, .btn-submit, .btn-pill, .cta-card__btn, .footer-social__btn, .gov-card__btn, .wb-platform-card__header .btn-hero { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; justify-content: center; align-items: center; text-align: center; white-space: nowrap; align-self: stretch; } /* Pulsanti dentro le card (es. ecosistema brand): occupano tutta la larghezza disponibile */ .panel__btn { align-self: stretch; } /* Box "I nostri riferimenti" della pagina contatti: padding ridotto come nell'originale (@media 768 di assets/css/style.css dello stato 14/04/26). Il pulsante WhatsApp è già width:100% di suo, quindi non serve nella lista dei pulsanti qui sopra. */ .lpw-card-box { padding: 25px 20px; } /* In colonna unica il titolo del form non deve allinearsi a niente: i 40px che su desktop lo pareggiano a "I nostri riferimenti" qui si sommerebbero al gap di 4rem della griglia. */ .contatti-form-heading { padding-top: 0; } /* ---- Modale: a tutto schermo, non una scatola centrata ---- Su telefono un riquadro con i margini attorno spreca larghezza e il form ha sei campi: meglio occupare tutta l'altezza utile. */ .mbc-dialog__box { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; padding: 3.5rem 1.25rem 1.5rem; } .mbc-dialog__head { margin-bottom: 1.5rem; padding-right: 0; } /* Su una riga sola i due campi affiancati diventerebbero illeggibili. */ .mbc-dialog .contatti-form__row { grid-template-columns: 1fr; } /* Contenitori che affiancano più pulsanti: li impilano invece di metterli in riga */ .hero__actions, .section__cta, .header-cta-group, .wb-platform-card__header { flex-direction: column; align-items: stretch; } /* Nel menu aperto i due pulsanti si staccano dall'ultima voce di menu una volta sola, come gruppo: style.css mette quel margine su ogni .btn-header-cta, e con due pulsanti si sarebbe visto anche in mezzo. */ .header-cta-group { width: 100%; gap: .6rem; margin-top: 1.25rem; } .header-cta-group .btn-header-cta { margin-top: 0; } /* ---- Footer: le 4 colonne impilate, allineate a sinistra, con una linea divisoria tra un blocco e l'altro per leggerle bene in colonna unica. ---- */ .footer-inner { gap: 2.5rem; text-align: left; padding-bottom: 2.5rem; } .footer-brand, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; } .footer-brand { padding-bottom: 2rem; border-bottom: 1px solid rgba(0,88,102,.12); } .footer-garanzie-card { width: 100%; } /* ---- Footer: colonne di navigazione come accordion ---- */ .footer-nav { border-bottom: 1px solid #eef2f6; } .footer-nav__title.footer-accordion-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 0; padding: 14px 0; cursor: pointer; text-align: left; } .footer-mob-chev { display: block; font-size: 1.3rem; transition: transform .3s ease; } .footer-accordion-toggle.active .footer-mob-chev { transform: rotate(180deg); } .footer-nav .footer-accordion-content { display: none; flex-direction: column; gap: .5rem; padding-top: 6px; padding-bottom: 16px; } .footer-accordion-toggle.active + .footer-accordion-content { display: flex; } /* Riga finale: copyright e dati legali impilati e allineati a sinistra */ .footer-bottom { text-align: left; } .footer-legal-flex { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: .6rem; line-height: 1.8; } /* ---- Pagina Retica: alcune griglie usavano colonne "1fr"/"repeat()" senza un minimo di 0, quindi se il contenuto di una card non poteva restringersi abbastanza, la griglia si allargava oltre il contenitore e "sbordava". Aggiungiamo minmax(0, 1fr) ovunque e permettiamo alle card di restringersi. ---- */ .cog-wrapper { grid-template-columns: minmax(0, 1fr); } .cog-aderenti { grid-template-columns: minmax(0, 1fr); gap: .75rem; } .retica-network-row { grid-template-columns: minmax(0, 1fr); } .cog-wrapper, .cog-aderenti, .retica-network-row, .cog-wrapper > *, .cog-aderenti > *, .retica-network-row > * { min-width: 0; } /* ---- Card CTA navy (Partner24 "Un network di competenze al tuo servizio", Cluster SCP "Domande sulla governance"): usano stile inline con margin:0 auto e max-width:900px. Su desktop lo spazio in eccesso del viewport la centra da sola; sotto i 900px il margine "auto" si azzera e la card tocca i bordi dello schermo, tagliando anche gli angoli arrotondati. Forziamo un margine laterale fisso (serve !important per battere lo style inline). ---- */ .section--cta-navy { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } /* ========================================================= EDITORIALE — tutto il mobile della sezione news vive qui (prima era mescolato al @media 768 di style.css). ========================================================= */ /* ---- Colonna unica ovunque: contenuti + sidebar, griglia articoli, griglia categorie, i due box CTA. ---- */ .editorial-layout { grid-template-columns: 1fr; } .editorial-grid { grid-template-columns: 1fr; } .editorial-categories__grid { grid-template-columns: 1fr; } .editorial-ctas__grid { grid-template-columns: 1fr; } .editorial-stats { gap: 1.5rem; } /* La sidebar scende sotto al contenuto già a 1024px (vedi style.css), dove però i due box CTA restano affiancati: qui non c'è larghezza per due colonne, quindi tornano impilati. Così la sequenza sullo schermo è condividi → articolo → allegati → tag → newsletter → consulenza. */ .editorial-sidebar { position: static; flex-direction: column; } /* ---- Slider "in primo piano": una card per schermata ---- */ .editorial-pp { flex-direction: column; } .editorial-pp__img { flex: none; } .editorial-pp__img img { min-height: 200px; } .editorial-pp-slider__viewport > .editorial-card { flex: 0 0 100%; } /* ---- Toolbar di ricerca: i tre campi impilati, ognuno a piena larghezza. L'altezza (--filter-h) e la freccia disegnata dei