/* =========================================================================== sv-responsive.css — layer responsive autoritativo. Caricato per ULTIMO. Breakpoint stile UIkit: 1200 (l) · 960 (m) · 640 (s). Perché serve: la consegna era un'app React desktop-first. Non aveva né un menu mobile né il collasso delle griglie, e i CSS di pagina ridefiniscono spesso .nav-links e le griglie SENZA media query — caricando dopo sv-base vincerebbero. Da qui si forza con !important dove necessario. Trucco di targeting: grid-template-columns è INERTE sugli elementi non-grid, quindi targettare per suffisso di classe è sicuro e copre anche le griglie dichiarate inline nei template. =========================================================================== */ /* ============ ≤ 1200px ============ */ @media (max-width: 1200px) { :root { --gutter: 20px; } .mega { width: min(90vw, 640px); } /* L'apertura della home da' due terzi al testo (vedi pages/home.css). Col riquadro prezzi acceso qui no: e' largo 300px fissi e sborda di 52 sulla colonna del testo, quindi in una colonna foto da 370px resterebbe una striscia di ritratto larga un centinaio di pixel. Si torna vicini alla meta' finche' a 960 le due colonne collassano del tutto. Senza riquadro il problema non c'e' e la foto puo' restare stretta. */ .hp-hero-split.con-prezzi { grid-template-columns: 1.3fr 1fr; } .hp-hero-testo h1 { font-size: 54px; } /* Colonna piu' stretta: base piu' corta, se no la quarta credenziale va a capo da sola. */ .hp-cred li { flex: 1 1 120px; max-width: none; } } /* ============ ≤ 960px (tablet) ============ */ @media (max-width: 960px) { /* Griglie di card → 2 colonne */ [class*="-grid"], [class*="-cards"], [class*="-cols"], [class*="-strip"], [class*="-steps"], [class*="-inner"], [class*="-table"], .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } /* Layout a due colonne asimmetriche → una colonna già da tablet */ .hero-split-grid, .cta-form-wrap, .foot-grid, [class*="-split"], [class*="-aside"] { grid-template-columns: 1fr !important; } /* ── Nav mobile ──────────────────────────────────────────────────────── Forzata con !important: i CSS di pagina ridefiniscono .nav-links senza media query e caricano prima di questo file. Il drawer e' ancorato all'header (top: 100%), non a una distanza fissa dall'alto: sopra l'header c'e' una barra promozionale, e con un valore fisso il drawer si apriva sovrapposto al logo o staccato, a seconda che la barra andasse su una riga o due. */ #main-nav .nav-links { display: none !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 8px 0; max-height: 80vh; overflow-y: auto; } #main-nav.nav-open .nav-links { display: flex !important; } #main-nav .nav-links > a, #main-nav .nav-links .has-mega { padding: 14px 20px !important; font-size: 16px !important; border-bottom: 1px solid var(--border-soft); } #main-nav .nav-burger { display: flex !important; } #main-nav .nav-cta { display: none !important; } /* Mega menu: in linea nel drawer, aperto al tap (classe da sv-app.js) */ #main-nav .mega-wrap { position: static; } #main-nav .mega { position: static; transform: none !important; width: auto; opacity: 1; pointer-events: auto; display: none; grid-template-columns: 1fr !important; border: 0; border-radius: 0; box-shadow: none; background: var(--bg-alt); padding: 4px 8px; } #main-nav .mega-wrap.mega-open .mega { display: grid; } #main-nav .mega-wrap:hover .mega:not(.mega-open) { opacity: 1; } .mega-foot { flex-direction: column; gap: 4px; } } /* ============ ≤ 640px (mobile): tutto a 1 colonna ============ */ @media (max-width: 640px) { [class*="-grid"], [class*="-cards"], [class*="-cols"], [class*="-strip"], [class*="-steps"], [class*="-inner"], [class*="-table"], [class*="-section"], [class*="-content"], [class*="-row"], [class*="-split"], [class*="-aside"], .grid-2, .grid-3, .grid-4, .form-grid, .foot-grid, .cta-form-wrap { grid-template-columns: 1fr !important; } /* ---- Rientri: 16, e uno solo ---------------------------------------- Su uno schermo da 390px ogni padding conta: 16 di sezione più 16 di contenitore fanno 32 per parte, cioè un sesto della larghezza mangiato da niente. Il testo si stacca 16px dal bordo, punto. L'eccezione sono le CARD — quelle con un bordo o uno sfondo loro: lì dentro un po' d'aria ci vuole, ma 16, non 26 o 34. Si controlla con `bash .pw/rientri-tutto.sh`, che misura da dove comincia il testo e non da come sono scritte le regole. */ :root { --gutter: 16px; } /* Il 16 della pagina lo mette chi sta più fuori, una volta sola. */ section, .site-footer { padding-left: 16px !important; padding-right: 16px !important; } #main-nav .container { padding-left: 16px !important; padding-right: 16px !important; } /* Un .container dentro una sezione non ne aggiunge un altro (il .container della barra di navigazione non è dentro una sezione: quello lo tiene). */ section .container { padding-left: 0 !important; padding-right: 0 !important; } /* ⚠️ E nemmeno una SECTION dentro una section. La regola qui sopra dà 16 a ogni `section`, compresa quella annidata: nel checkout `.cs-pagamento` e `.cs-riepilogo-clone` sono `
` dentro la section della pagina, e facevano 32. Dentro un metodo di pagamento diventavano 48 — «PayPal» partiva da metà schermo. Non lo segnala niente: sembra solo un po' stretto. È lo stesso 16+16 già pagato coi `.container`, con un altro tag. */ section section { padding-left: 0 !important; padding-right: 0 !important; } /* Contenitori nudi — niente sfondo, niente bordo: non aggiungono niente. */ .hp-hero-testo, .cs-hero-testo, .lv-hero-testo, .dp-hero-testo, .foot-grid, .pr-orari { padding-left: 0 !important; padding-right: 0 !important; } /* Card: un solo 16 dentro. Il padding verticale resta quello che è — qui si guadagna larghezza, non si comprime il ritmo della pagina. */ .card, .cta-form-aside, .cta-form-body, .hp-ambito, .hp-studio, .hp-newsletter, .cs-studi, .lv-scheda, .lv-presenza-testo, .dr-scheda, .dr-chiusura, .dp-casi li, .ct-blocco, .pr-bia, .bl-newsletter, .bl-categorie, /* Carrello e checkout: il riepilogo e la colonna dei totali sono card, e avevano 20 e 22 invece di 16. Poco, ma è la stessa aria in due misure diverse nella stessa schermata. */ .cs-riepilogo-corpo, .cs-cart-side { padding-left: 16px !important; padding-right: 16px !important; } /* La fascia di chiusura di «Dove ricevo» è una card larga quanto la pagina: il suo margine laterale è il gutter, non 40. */ .dr-chiusura { margin-left: 16px !important; margin-right: 16px !important; } .cta-form-aside, .cta-form-body { padding-top: 32px !important; padding-bottom: 32px !important; } .card { padding-top: 22px !important; padding-bottom: 22px !important; } /* Righe flex: vanno a capo o si impilano */ [class*="-actions"], [class*="-pills"], [class*="-meta"], [class*="-badges"], .foot-bottom, .nav-cta { flex-wrap: wrap; } .foot-bottom { flex-direction: column; gap: 10px; align-items: flex-start; } /* Titoli: contenuti su schermo stretto */ h1 { font-size: clamp(30px, 8.5vw, 40px) !important; } .section-head h2 { font-size: clamp(25px, 7vw, 34px) !important; } /* Nessun media sfora la viewport */ img, video, iframe, svg { max-width: 100%; } /* L'eyebrow è nowrap by design: su schermi stretti deve poter andare a capo, altrimenti sfora (un sopratitolo lungo sfora). */ .eyebrow { white-space: normal !important; } /* Anche i testi che la consegna forzava su una riga sola. */ .section-head p { white-space: normal !important; } /* Tabelle: scrollabili invece che rotte */ table { display: block; overflow-x: auto; white-space: nowrap; } /* Spazio in fondo per non finire sotto la CTA telefono fissa */ .site-footer { padding-bottom: 96px; } } /* =========================================================================== Specifico di questo progetto. Il resto del file targetta per suffisso di classe e copre da solo le griglie. Qui stanno i pezzi che un suffisso non puo' indovinare: un riquadro in posizionamento assoluto, i padding generosi dell'apertura e la barra promozionale sopra l'header. =========================================================================== */ /* ============ ≤ 960px ============ */ @media (max-width: 960px) { #main-nav .nav-links > .nav-cta-btn { margin: 8px 20px; justify-content: center; } .hp-hero-testo { padding: 56px 24px !important; } /* In colonna la foto torna nel flusso: lasciandola in position:absolute il contenitore resterebbe alto quanto il solo riquadro prezzi e la foto coprirebbe il riquadro invece di stargli sopra. */ .hp-hero-media { min-height: 0; } .hp-hero-img { position: static; height: 380px; } /* ⚠️ In colonna la FOTO VA PRIMA del testo, e si fa da qui. Nel markup il testo viene prima perché a due colonne è la colonna di sinistra: quello è l'ordine giusto per il desktop e per chi legge con uno screen reader (il titolo h1 resta il primo contenuto della pagina). Appena le colonne collassano però quell'ordine mette al primo schermo 88px di padding e un titolo, e la foto comincia sotto la piega: chi atterra sulla home da telefono non vede mai la persona da cui sta per prenotare. Con `order` si scambia la resa senza toccare il DOM, quindi il documento resta letto nell'ordine giusto. Vale da 960 e non da 640 perché è a 960 che `[class*="-split"]` fa collassare le due colonne: legarlo a 640 lascerebbe una fascia fra i due in cui la pagina è già in colonna ma con la foto ancora in fondo. */ .hp-hero-media { order: -1; } .hp-hero-testo { order: 0; } /* Il riquadro prezzi sborda sopra la foto solo dove c'e' spazio: sotto, sovrapporrebbe il viso nella foto e si leggerebbe male. */ /* `relative` e non `static`: lo z-index vale solo sugli elementi posizionati, quindi con `static` veniva ignorato e la foto — che e' un elemento sostituito, e quelli si disegnano sopra gli sfondi dei blocchi — copriva il primo rigo del riquadro, «Prenotabile subito». */ .hp-prezzi { position: relative; left: auto; bottom: auto; width: auto; box-shadow: none; margin: -40px 24px 0; z-index: 2; } /* In colonna il ritratto non deve piu' reggere l'altezza del testo: torna a una fascia alta quanto basta. */ .cs-ritratto-box { min-height: 0; height: 420px; } .hp-ambiti, .hp-studi, .hp-ricette, .hp-test { padding: 56px 24px; } .hp-metodo-split { padding: 56px 24px; gap: 32px; } .hp-blog-split { padding: 0 24px 56px; gap: 32px; } .hp-metodo-img { height: 320px; } /* Le foto di apertura sono riempitivi, non contenuto: in colonna una verticale da 480-520px si mangia due schermate prima del testo che conta. Diventano orizzontali, come quelle della home. */ .lv-hero-img, .dp-hero-img, .dp-metodo-img { height: 320px; } /* La fascia newsletter in fondo ad articolo e ricetta: testo sopra, modulo sotto. Il margine laterale sostituisce il `margin: auto` del centraggio, che sotto i 1080px non lascerebbe nessuno stacco dai bordi. */ .sv-newsletter { grid-template-columns: 1fr !important; gap: 24px; margin: 48px 24px; padding: 34px; } .sv-newsletter h2 { font-size: 26px; } } /* ============ ≤ 640px ============ */ @media (max-width: 640px) { /* La barra in alto ha due blocchi che su schermo stretto non ci stanno affiancati: vanno in colonna, allineati a sinistra. */ .topbar { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px !important; font-size: 12px; } .topbar-links { gap: 16px; flex-wrap: wrap; } .nav { padding: 12px 16px !important; } .brand-logo { height: 32px; } .cs-ritratto-box { height: 340px; } /* Solo verticale: il 16 di lato lo mette già la sezione (vedi «Rientri»). */ .hp-hero-testo { padding: 40px 0 !important; gap: 20px; } .hp-hero-img { height: 300px; } /* I due bottoni dell'apertura: a tutta larghezza, uno sotto l'altro. Affiancati su 390px stavano in 170px l'uno — «Prenota una visita» andava a capo dentro il bottone e i due bersagli finivano appiccicati, che è il modo in cui da telefono si preme quello sbagliato. In colonna e larghi quanto la pagina sono due bersagli pieni e leggibili, ed è anche l'ordine di importanza: prima prenotare, poi il resto. `align-items: stretch` serve perché il flex di `.hp-hero-cta` è `align-items: center`, che in colonna stringe i figli al loro contenuto: senza, il `width: 100%` sotto non avrebbe niente da riempire. */ .hp-hero-cta { flex-direction: column; align-items: stretch; gap: 12px; } /* `justify-content` perché `.btn` è un inline-flex allineato a sinistra: allargandolo il testo resterebbe appiccicato al bordo sinistro. */ .hp-hero-cta .btn { width: 100%; justify-content: center; } .hp-prezzi { margin: -32px 16px 0; } .hp-cred { gap: 16px; } .hp-cred li { max-width: none; flex: 1 1 140px; } .hp-ambiti, .hp-studi, .hp-ricette, .hp-test { padding: 48px 16px; } .hp-metodo-split { padding: 48px 16px; } .hp-blog-split { padding: 0 16px 48px; } .hp-ambito { min-height: 0; } .hp-ricetta-img { height: 200px; } /* Su 390px una foto alta 220 è già una fascia larga: si vede che c'è, non ruba la schermata al testo. */ .lv-hero-img, .dp-hero-img, .dp-metodo-img { height: 220px; } /* «Dieta personalizzata», in fondo al metodo: da telefono resta il solo invito a prenotare, largo quanto la colonna. Due bottoni affiancati su 390px vanno a capo e si somigliano troppo per far capire quale conta; le ricette si raggiungono comunque dal menu e dalla home. */ .dp-metodo-testo .riga-cta { display: block; } .dp-metodo-testo .riga-cta .btn-primary { display: flex; width: 100%; justify-content: center; } .dp-metodo-testo .riga-cta .btn-ghost { display: none; } .hp-newsletter { padding: 28px 16px; } .hp-newsletter h2 { font-size: 26px; } /* La riga articolo resta a due colonne: la miniatura si stringe invece di andare a capo, altrimenti l'elenco diventa lunghissimo. */ .hp-articoli a { grid-template-columns: 96px 1fr !important; gap: 16px; } .hp-articoli .hp-card-titolo { font-size: 19px; } /* Stessa riga, ma nell'archivio e in fondo all'articolo (`.bl-lista`). Senza questa regola la miniatura restava a 180px: con i 32px di margine della pagina, su un telefono da 390 al titolo avanzavano centoquattro pixel e ogni riga diventava una colonna di parole spezzate. */ .bl-articolo a { grid-template-columns: 120px 1fr !important; gap: 16px; } .bl-articolo .card-titolo { font-size: 19px; } .bl-img { height: 90px; } .bl-evidenza a { grid-template-columns: 1fr !important; } .bl-evidenza .card-titolo { font-size: 26px; } .bl-img-grande { height: 220px; } .foot-grid { padding: 40px 0; gap: 28px; } .blocco-testa { gap: 16px; } .hp-passi li { grid-template-columns: 40px 1fr !important; gap: 12px; } /* Blog e articolo: i blocchi con 40px di lato che NON sono
e quindi non li tocca la regola generale qui sopra. Sono un
, un
, un