/* ============================================================ FONDAMENTA MOBILE · Ceramiche Corallo ------------------------------------------------------------ Questo file va caricato PER ULTIMO, dopo styles.css, redesign-a3.css e mobile-nav.css. Qui non ci sono decorazioni ne' eccezioni di singole sezioni. Ci stanno solo le regole che valgono ovunque sul telefono: quanto il contenuto sta lontano dal bordo, quanto sono alte le fasce a tutto schermo, quanto e' grande un campo da compilare, quanto e' grande una zona da toccare. Regola d'oro: se una misura serve in due punti diversi, diventa una variabile qui sopra. Non si scrive due volte. ============================================================ */ :root { /* Livello 1 — stacco della card dal bordo dello schermo */ --m-edge: 12px; /* Livello 2 — padding interno delle sezioni (il testo principale) */ --m-pad: 18px; /* Livello 3 — padding delle card annidate dentro le sezioni. Stesso valore del livello 2: cosi' sul telefono esiste UNA sola distanza orizzontale in tutto il sito, non sei. */ --m-pad-nested: 18px; /* Altezza minima di una zona toccabile (linea guida Apple/Google) */ --m-tap: 44px; } /* ============================================================ 1 · RADICE — niente scorrimento laterale, e senza cerotti ------------------------------------------------------------ styles.css e mobile-nav.css mettevano "overflow-x: hidden" su . Quello nasconde il problema ma trasforma in un contenitore di scorrimento: su iOS rende lo scroll legnoso e rompe gli elementi "sticky". "clip" taglia allo stesso modo ma NON crea un contenitore di scorrimento: stessa protezione, scroll fluido. ============================================================ */ html { overflow-x: clip; } body { overflow-x: clip; } /* iOS e Android ingrandiscono il testo da soli quando decidono che una colonna e' troppo stretta. E' una delle ragioni per cui il sito "si ingrandisce" senza che tu abbia toccato niente. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ============================================================ 2 · ALTEZZE CHE NON SALTANO ------------------------------------------------------------ Su telefono "vh" viene calcolato con la barra degli indirizzi NASCOSTA. Quando scorri e la barra si ritrae o riappare, l'altezza cambia davvero e tutta la pagina sotto si sposta. E' il salto che vedi mentre scorri. svh = altezza minima garantita, non cambia MAI durante lo scorrimento -> per le fasce dentro la pagina. dvh = segue la barra -> solo per i pannelli fissi sopra la pagina (carrello, menu), che devono coprire lo schermo. ============================================================ */ .hero { min-height: 64vh; /* fallback per browser vecchi */ min-height: 64svh; } @media (max-width: 760px) { body.home-page .hero::before, body.home-page .a3-hero-photo, body.home-page .a3-grain, body.home-page .hero::after { height: 58vh; /* fallback */ height: 58svh; } } /* Pannelli fissi: qui dvh e' quello giusto, devono coprire esattamente la parte di schermo visibile in quel momento, altrimenti il pulsante in fondo finisce sotto la barra. */ .cart-drawer { height: 100vh; /* fallback */ height: 100dvh; } /* ============================================================ 3 · GRONDA UNICA ------------------------------------------------------------ Prima il testo partiva da 22, 29, 31, 33, 48, 56 px a seconda della sezione, perche' ogni sezione aveva il suo padding. Da qui in poi le distanze sono due e solo due: bordo schermo -> card: --m-edge (12px) card -> testo: --m-pad (18px) quindi il testo di primo livello parte SEMPRE da 30px. ============================================================ */ @media (max-width: 760px) { .site-shell, [class*="-page"] .site-shell { --shell-inline-size: min(1200px, calc(100vw - (var(--m-edge) * 2))); /* styles.css:6179 scavalcava la variabile scrivendo la larghezza a mano solo per bomboniere (32px invece di 24px). Qui torna tutto a una misura sola. */ width: var(--shell-inline-size); } .site-shell main > section, .site-shell main > footer, .site-shell main > div > section, .site-shell main > div > footer { padding-inline: var(--m-pad); } /* La hero della home e' un banner fotografico: il padding sta sul blocco di testo, non sulla sezione. redesign-a3.css lo fissava a 20px con !important, lo riallineo agli altri. */ body.home-page .hero-copy { padding-inline: var(--m-pad) !important; } /* Livello 3 — le card dentro le sezioni. Prima erano a 12px (schede prodotto), 18px (fascia garanzie, piede pagina), 22px (blocchi racconto) e 24px (scheda prenotazione): quattro valori per la stessa identica cosa. */ .site-shell main section > article:not(.product-card):not(.product-similar-card), .site-shell main section > aside, .site-shell main section > div > aside, .site-shell main section > details, .site-shell main section > div > details, .site-shell main section > form, .site-shell main section > div > form, .site-shell main section > .section-heading, .site-shell main section > div > .section-heading, .site-shell main section > div > article:not(.product-card):not(.product-similar-card), .site-shell main footer > article, .site-shell main footer > div > article, .booking-card, .home-path-tile, .product-body, .legal-panel, .returns-panel, .collection-preview-note { padding-inline: var(--m-pad-nested); } /* Le schede prodotto sono un'eccezione voluta: il loro margine interno sta su .product-body, non sulla scheda. Se lo mettessi anche fuori il testo finirebbe a 62px dal bordo, il doppio di tutto il resto. */ .product-card, .product-similar-card { padding-inline: 0; } /* Una card dentro un'altra card non rientra una terza volta: su uno schermo da 375px il terzo rientro si mangia meta' riga. (Era il caso del riepilogo di checkout: il testo finiva a 93px dal bordo, contro i 31px del resto del sito.) Nota: la condizione e' "card DENTRO una card", non "card al terzo livello". Il primo tentativo contava i livelli e ha azzerato il modulo d'ordine, che e' figlio di un semplice contenitore senza padding. */ [class*="-card"] [class*="-card"], [class*="-card"] [class*="-panel"], [class*="-card"] [class*="-steps"], [class*="-panel"] [class*="-panel"], [class*="-panel"] [class*="-card"] { padding-inline: 0; } /* Gli elenchi di testo: il rientro predefinito del browser e' 40px, pensato per una pagina larga. Qui vale un quinto della riga. */ ul:not([class]), ol:not([class]) { padding-inline-start: 20px; } } /* ============================================================ 4 · CAMPI: MAI SOTTO I 16px ------------------------------------------------------------ Safari su iPhone ingrandisce la pagina DA SOLO quando tocchi un campo con testo sotto i 16px, e non torna piu' indietro. E' il motivo principale per cui il sito "si ingrandisce e non si rimpicciolisce piu'". max(16px, 1em) = non scende mai sotto 16, ma se un campo era gia' piu' grande resta come sta. ============================================================ */ @media (max-width: 760px) { input, select, textarea { font-size: max(16px, 1em) !important; } } /* ============================================================ 5 · ZONE DI TOCCO ------------------------------------------------------------ Un dito copre circa 44px. Sotto quella misura si sbaglia bersaglio, e sbagliare bersaglio su un e-commerce vuol dire uscire dal sito. ============================================================ */ /* ATTENZIONE al !important qui sotto. Con !important questa regola non ALZA soltanto: SOSTITUISCE. Quindi abbassa anche un minimo piu' generoso gia' scelto da un altro disegno. E' successo davvero: nell'editor le tessere di navigazione sono da 64px e questa regola le ha portate a 53. Il !important serve perche' nel sito ci sono una ventina di min-height sotto i 44px scritti con selettori molto specifici (es. ".home-page .collection-section-actions .ghost-button: 40px"): senza, il pavimento non regge. La soluzione e' escludere chi ha gia' una sua scala piu' generosa. Oggi e' solo il pannello di gestione; se ne nasce un altro, si aggiunge qui il suo nome e basta. */ @media (max-width: 760px) { body:not(.editor-page) :is( button, select, summary, [role="button"], input[type="submit"], input[type="button"], .primary-button, .ghost-button, .secondary-button, a[class*="button"], a[class*="-btn"], a[class*="btn-"], a[class*="-link"], a[class*="-cta"] ) { /* !important solo qui, e solo su min-height: la misura minima di un bersaglio da toccare e' un pavimento, non una scelta di stile. Senza, regole molto specifiche sparse in styles.css (per esempio ".home-page .collection-section-actions .ghost-button { min-height: 40px }") lo riportano sotto soglia una pagina alla volta. */ min-height: var(--m-tap) !important; } /* ATTENZIONE, imparato rompendo l'intestazione: queste fondamenta non devono MAI toccare "display". Mezzo sito nasconde elementi con display:none a seconda della pagina o della larghezza (le scorciatoie in alto, per dire). Scrivere display qui le fa ricomparire tutte. Per allargare un'area toccabile si usa il padding, che non puo' resuscitare niente. */ /* Link di navigazione e di piede pagina: cresce l'area da toccare, il testo non si sposta. */ .nav-links a, .site-footer nav a, .site-footer li > a, .site-footer article > a, a[class*="-link"] { /* Il padding allarga l'area toccabile senza spostare il testo; il min-height copre l'ultimo pixel mancante. Nessuno dei due puo' far ricomparire un elemento nascosto, a differenza di display. */ padding-block: 12px; min-height: var(--m-tap); } } /* ============================================================ 6 · NIENTE SFONDAMENTI ------------------------------------------------------------ Rete di sicurezza: media e tabelle non possono essere piu' larghi della colonna che li contiene. Cosi' il taglio al punto 1 resta una protezione, non una necessita'. ============================================================ */ @media (max-width: 760px) { img, video, canvas, svg, iframe { max-width: 100%; height: auto; } /* (Nessuna regola sulle tabelle: nelle pagine pubbliche non ce ne sono, e per farle scorrere servirebbe display:block — vedi l'avvertimento qui sopra. Se un domani ne arriva una, si mette il suo contenitore in overflow, non la tabella.) */ /* Parole lunghe (URL, codici ordine) vanno a capo invece di allargare il blocco che le contiene. */ h1, h2, h3, p, li, dd, dt, td, th { overflow-wrap: anywhere; } } /* ============================================================ 7 · I BOTTONI FLOTTANTI NON COPRONO PIU' IL TESTO ------------------------------------------------------------ Nell'angolo in basso a destra vivono due cose fisse: il dock WhatsApp + Instagram (.cc-fab, 56x114) e sopra di lui Mora (.cc-shopping-assistant, 68x68). Insieme occupano una colonna di ~214px di altezza sul bordo destro, sempre. Il problema erano due problemi diversi: a) La fine di OGNI pagina restava intrappolata sotto il dock. mobile-nav.js pubblica gia' --cc-fab-reserve (126px), ma nessuno la usava per il contenuto:
aveva padding-bottom 0. La variabile c'era, mancava chi la legge. b) Nel mezzo della pagina galleggiano sopra le parole che passano sotto di loro. Restano visibili per scelta (sono il contatto principale): a tenerli lontani dal testo ci pensa la riserva del punto (a), non il farli sparire. ============================================================ */ @media (max-width: 760px) { /* a) Spazio riservato in fondo, cosi' l'ultima riga di testo non finisce mai sotto i bottoni. --cc-fab-reserve e' gia' pubblicata da mobile-nav.js e copre il dock. */ .site-shell main { padding-bottom: var(--cc-fab-reserve, 0px); } /* Mora sta SOPRA il dock e nella variabile non e' compresa, quindi serve altro spazio — ma solo dove Mora c'e' davvero (su 7 pagine su 14 non viene iniettata, e li' sarebbero 88px di vuoto). Il :has() si riaggiorna da solo quando lo script la aggiunge. */ body:has(.cc-shopping-assistant) .site-shell main { /* 68px il tondo + 20px di stacco */ padding-bottom: calc(var(--cc-fab-reserve, 0px) + 88px); } /* b) I bottoni restano SEMPRE visibili: sono il canale di contatto principale (il click su WhatsApp e' tracciato come generate_lead), quindi non spariscono mentre si scorre. A non farli coprire il testo ci pensa la riserva qui sopra: il contenuto non finisce mai sotto di loro, e nel mezzo della pagina galleggiano sopra lo sfondo, non sulle parole. */ } /* ============================================================ 8 · LE ETICHETTINE SI DEVONO POTER LEGGERE ------------------------------------------------------------ .eyebrow e' l'occhiello che sta sopra quasi ogni titolo del sito ("CERAMICHE ARTISTICHE DI CALTAGIRONE", "COLLEZIONE", "ANTEPRIMA COLLEZIONE"). Ce ne sono 54 solo nelle prime pagine, e sul telefono arrivavano a 11,2px — tre di loro a 9,3px. Due problemi insieme, che e' il caso peggiore: - troppo piccole: 9px su un telefono al sole non si leggono; - troppo chiare: il terracotta --terra (#c8642f) sulla carta crema da' un contrasto di 3,79:1, sotto il 4,5:1 che serve per il testo normale (misurato, non stimato). Qui non cambio il terracotta del marchio: resta identico su pulsanti, bordi e riempimenti. Introduco un terracotta piu' scuro SOLO per queste scritte piccole — stessa tinta, un gradino sotto, 4,92:1. Chi guarda vede lo stesso colore, ma lo legge. ============================================================ */ :root { /* terracotta da inchiostro: come --terra ma leggibile in piccolo */ --m-terra-ink: #b0521f; } @media (max-width: 760px) { /* !important su tutte e due perche' redesign-a3.css scrive ".eyebrow, .hero-logo-kicker { font-size: 0.7rem !important; color: var(--terra) !important }". Senza, questa regola non tocca palla. */ .eyebrow { font-size: max(12px, 0.72rem) !important; color: var(--m-terra-ink) !important; /* un filo di spaziatura in meno: a 12px le maiuscole spaziate diventavano piu' larghe della riga su cui stanno */ letter-spacing: 0.1em; } /* L'occhiello della hero ha una sua regola a specificita' 0,3,0 (anch'essa !important), quindi va nominato per esteso. Su telefono la hero non e' piu' foto sotto il testo: redesign-a3 mette il blocco di testo su carta, quindi qui vale la stessa regola di leggibilita' del resto. */ body.home-page .hero-copy .eyebrow, body.home-page #hero-eyebrow { color: var(--m-terra-ink) !important; } /* Le tre tessere della home ("COLLEZIONE", "BOMBONIERE", "ATELIER") stanno su tre colonne dentro 375px, e styles.css le rimpicciolisce a 0.58rem = 9,3px con !important per farcele stare. A 9px non si legge niente: le riporto a 12 come tutte le altre. */ body.home-page .home-path-copy .eyebrow { font-size: 12px !important; } } /* ============================================================ 9 · IL PIEDE PAGINA SU DUE COLONNE ------------------------------------------------------------ Conseguenza diretta della regola dei 44px di questo stesso file: portando i link del piede alla soglia del dito sono passati da 23 a 47px l'uno, e l'elenco "Pagine utili" ne ha dieci. Da 230px e' diventato 470px — su tutte e 17 le pagine. Il piede intero era arrivato a 1638px, due schermate piene di solo piede. Non si torna indietro sui 44px: si mettono i link su due colonne. Cinque righe invece di dieci, l'area da toccare resta quella. Il :has() serve a colpire solo gli elenchi veri: un articolo con almeno cinque link. Quelli con un indirizzo o due righe di testo restano a colonna singola, dove stanno bene. ============================================================ */ @media (max-width: 760px) { .site-footer-grid article:has(> a:nth-of-type(5)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 0; align-items: start; } /* il titoletto dell'elenco sta su tutta la larghezza */ .site-footer-grid article:has(> a:nth-of-type(5)) > strong { grid-column: 1 / -1; } } /* ============================================================ 10 · IL CHECKOUT E' UN MODULO, NON UNA COPERTINA ------------------------------------------------------------ Misurato: prima del primo campo ci sono 343px di intestazione, di cui 149 di solo titolo — quattro righe a 39px. Quella misura e' giusta per l'apertura di una pagina che racconta; su una pagina dove uno vuole solo pagare e' cerimonia. Stesse parole, corpo piu' piccolo: tre righe invece di quattro. Nota sulla proporzione, per onesta': qui si guadagna qualche decina di pixel su quasi cinquemila. Le pagine di questo sito sono lunghe perche' il testo e' lungo, non perche' il CSS spreca (su guide.html solo il 10% dell'altezza e' aria). Accorciarle sul serio vuol dire tagliare contenuto, e non e' una decisione che spetta a un foglio di stile. ============================================================ */ @media (max-width: 760px) { body.checkout-page-body .section-heading h1 { font-size: clamp(1.9rem, 7.4vw, 2.5rem); line-height: 1.05; } body.checkout-page-body .section-heading { margin-bottom: 14px; } /* i campi si avvicinano fra loro: su un modulo lungo ogni riga di respiro in meno e' una schermata in meno da scorrere */ body.checkout-page-body .form-grid { gap: 12px; } }