/* ============================================================ gr-hybrid — la vetrina prodotti della home ------------------------------------------------------------ Veste le due fasce che il tema rende con i moduli nativi `ps_featuredproducts` e `ps_specials`: «Prodotti in vetrina» e «Offerte speciali». Da dove nasce questo foglio. Il committente ha messo la home nuova accanto a quella che sostituisce e ha chiesto come si presenta un lavoro cosi'. Su queste due fasce aveva ragione tre volte: sotto ogni prodotto c'era un selettore di quantita' con i pulsanti - e + e un bottone col carrello, cioe' la faccia di un portale all'ingrosso; le fotografie erano servite a 336px e stirate a piu' di 400, quindi molli; e la fascia non aveva ne' il respiro verticale ne' il titolo delle altre sezioni della pagina, percio' si leggeva come una parte incollata da un altro sito. I comandi del carrello sono stati tolti dalla MARCATURA, non da qui: la spiegazione sta in `templates/catalog/_partials/miniatures/product.tpl`. Un `display:none` avrebbe lasciato in pagina form, token, campo quantita' e bottone — invisibili all'occhio e vivissimi per il lettore di schermo e per il JavaScript. Questo foglio si occupa di cio' che RESTA: quanto e' grande la fotografia, come e' scritto il nome, quanto piano si dice il prezzo. ------------------------------------------------------------ I due agganci, e perche' sono due ------------------------------------------------------------ `.product-miniature--vetrina` la mette la miniatura stessa quando si accorge di essere in home. E' l'unica condizione del fronte, ed e' scritta in un posto solo: cosi' marcatura e stile non possono divergere, e la scheda resta vestita giusta anche se domani la includesse un blocco di `grcontentblocks` invece del modulo nativo. `.gr-vetrina` la mettono i due template di modulo sulla `
`. Serve per cio' che sta FUORI dalla scheda — titolo, griglia, piede della fascia — che nessuna miniatura puo' raggiungere dall'interno. Scartato: agganciare tutto a `#index`, cioe' all'id che il tema scrive sul `body` della home (`theme.css` lo fa: `body:not(#index)`). Funziona, ma lega lo stile alla pagina invece che all'oggetto, e la condizione finirebbe scritta due volte — una in Smarty e una qui — con la certezza che prima o poi una delle due cambia da sola. ------------------------------------------------------------ Livelli e priorita' ------------------------------------------------------------ Le regole della miniatura che stiamo scavalcando vivono in `@layer ps-components` dentro `theme.css`. Qualunque livello `gr-*` le batte per ordine dei livelli, senza rincorrere la specificita' e senza un solo `!important`. Si sta quindi in `gr-layouts` per la fascia e la griglia e in `gr-components` per la scheda, che e' la stessa divisione che usa `gr-sezioni.css`. Il foglio e' dichiarato in `config/theme.yml` a priorita' 80, subito dopo `gr-sezioni.css` (70). L'ordine conta davvero: `gr-sezioni.css` veste la miniatura dentro il carosello di `grcontentblocks` (`.gr-prodotti__voce .product-miniature__title`, 0,2,0) e le regole qui sotto valgono anch'esse 0,2,0. A pari specificita' e pari livello decide chi arriva dopo, e dopo deve arrivare la vetrina. Nessun colore letterale: ogni tinta passa da una `var()` dei token in `gr-tokens.css` con un ripiego grigio neutro, cosi' la fascia resta leggibile anche se il foglio dei token non arriva. ============================================================ */ @layer gr-layouts { /* ------------------------------------------------------------ La fascia ------------------------------------------------------------ I due template di modulo mettono sulla sezione anche `gr-blocco`, che porta il ritmo verticale delle altre fasce della home. Il guaio e' che dentro c'e' `div.module-products.container`, cioe' un container di Bootstrap col suo padding e il suo max-width: si sommava al `padding-inline: var(--gutter)` di `gr-blocco` e la vetrina finiva piu' stretta di ogni altra sezione, sfalsata rispetto alle tessere categoria che le stanno sopra. Il padding del container si azzera e la larghezza torna a `--dentro`, che e' la misura che tutte le altre fasce usano. Non e' pignoleria tipografica: due sezioni una sotto l'altra con i bordi disallineati di dodici pixel si vedono, ed e' esattamente il genere di sbavatura che fa sembrare una pagina montata in fretta. Scartato: togliere `container` dalla marcatura. La classe la mette `components/module-products.tpl`, che e' condiviso con `ps_newproducts`, `ps_bestsellers`, `ps_categoryproducts` e il cross-selling del carrello: cambiarla la' per aggiustare la home vorrebbe dire spostare il problema su cinque pagine. */ .gr-vetrina > .module-products { max-width: var(--dentro, 1240px); margin-inline: auto; padding-inline: 0; } /* ------------------------------------------------------------ La griglia ------------------------------------------------------------ Le colonne le decide `theme.css` in base al layout della pagina (quattro a tutta larghezza sopra i 992px, due sotto): qui non si tocca, perche' il numero di prodotti che la fascia mostra lo decide il back office e una griglia da tre con quattro prodotti lascia un orfano in seconda riga. Cambia il vuoto fra le schede. A 1,5rem le fotografie si toccano quasi e la fila si legge come un listino; il respiro e' la differenza fra quattro prodotti in fila e quattro prodotti esposti. */ .gr-vetrina .products { column-gap: clamp(1.25rem, 2.4vw, 2.5rem); row-gap: clamp(2rem, 4vw, 3.25rem); } /* Il piede della fascia (il collegamento «Tutti i prodotti in vetrina») va staccato dall'ultima riga di schede, altrimenti sembra il bottone della quarta scheda invece della fascia. */ .gr-vetrina .module-products__buttons { margin-block-start: clamp(2rem, 4vw, 3rem); } } @layer gr-components { /* ------------------------------------------------------------ Il titolo della fascia ------------------------------------------------------------ Arriva da `components/section-title.tpl` come `h2.section-title` e il tema gli da' solo un margine: eredita quindi il corpo dell'interfaccia, 13px, allineato a sinistra. Nell'originale il titolo di sezione e' grande e centrato, ed e' uno dei tre appunti del committente. Le misure NON sono inventate qui: sono le stesse del cappello di sezione in `gr-sezioni.css`, che a sua volta le ha prese misurandole sull'originale (Montserrat 600, 58px, interlinea 1,0, `letter-spacing: normal`, centrato; 30px sotto i 768px). Due scale tipografiche sulla stessa pagina sono peggio di una scala sbagliata, e qui i due titoli finiscono uno sotto l'altro nella stessa schermata: «I marchi che trattiamo» e «Prodotti in vetrina» si vedono insieme scorrendo. I numeri sono ricopiati e non ereditati perche' i due titoli sono due elementi diversi in due fogli diversi: `.section-title` la scrive `components/section-title.tpl`, il tema, e `gr-sezioni` non la puo' raggiungere senza andare a vestire anche quelle della pagina prodotto. Se un giorno divergono, e' questo commento a dire da dove venivano. La regola e' ristretta a `.gr-vetrina`: `.section-title` compare anche nella pagina prodotto e nei commenti, e centrare quelle non e' cio' che si sta decidendo. Se chi tiene `gr-sezioni.css` decide di allineare tutti i titoli di sezione del negozio, questa diventa ridondante e si cancella in un colpo. Il ripiego del carattere non e' piu' `Georgia, "Times New Roman", serif`: era la coda giusta quando i titoli erano un Bodoni, ed e' esattamente la coda sbagliata adesso. Se `--display` non arrivasse, il negozio si vestirebbe del serif che il committente ha appena bocciato. La coda ora e' la stessa catena di sistema che il token dichiara al suo interno. */ .gr-vetrina .section-title { margin-block-end: clamp(1.8rem, 3.5vw, 2.6rem); font-family: var(--display, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); /* Stesso peso del cappello di sezione: i due titoli sono gemelli — stessa scala, stessa spaziatura — e uno dei due piu' leggero dell'altro sulla stessa pagina si vede. */ font-weight: var(--peso-titoli, 600); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: normal; text-align: center; text-wrap: balance; color: inherit; } /* ------------------------------------------------------------ La stessa fascia, ma in home: li' e' un cappello di sezione ------------------------------------------------------------ `ps_featuredproducts` e `ps_specials` non stanno solo in home: il tema li aggancia anche a `displayCrossSellingShoppingCart` e a `displayOrderConfirmation2`. Verificato sul servito, non dedotto: `https://idainterni-gr.it/carrello?action=show` rende davvero una `section.ps-featuredproducts.gr-blocco.gr-vetrina` col suo `h2.section-title`. E li' 58px sono un errore misurabile: l'`h1` di quella pagina — «Carrello» — sta a 31,99px e l'`h2` «Riepilogo dell'ordine» a 32px. Un titolo di cross-selling a 58px e' 1,8 volte il titolo della pagina su cui sta: la fascia dei suggerimenti griderebbe piu' forte della cosa che il cliente sta comprando. (Non e' un guaio che ho introdotto io — a 43,2px faceva gia' 1,35 volte — ma l'avrei peggiorato, e correggerlo costa una riga.) Quindi la regola base sopra tiene la fascia allineata all'`h2` della pagina che la ospita (2rem = 32px a 1366), e la misura da cappello di sezione — quella dell'originale — arriva solo quando la fascia E' un cappello di sezione. PERCHE' `:has(.product-miniature--vetrina)` E NON `body#index` Perche' e' la stessa identica condizione, decisa in un posto solo. `--vetrina` la mette la miniatura quando si accorge di essere in home (`catalog/_partials/miniatures/product.tpl`, che ragiona su `page.page_name`): se un domani quella condizione cambia — una landing, una pagina CMS che vuole la stessa vetrina — il titolo la segue senza che nessuno debba ricordarsi di aggiornare anche questo foglio. Ancorarsi a `#index` vorrebbe dire scrivere la stessa condizione due volte, una in Smarty e una qui, con la certezza che prima o poi una delle due cambia da sola: e' l'alternativa che l'intestazione di questo file scarta gia', per questa stessa ragione. `:has()` non e' una scommessa: questo foglio lo usa gia' poche righe piu' sotto, su `.product-miniature__inner:has(:focus-visible)`. */ .gr-vetrina:has(.product-miniature--vetrina) .section-title { font-size: clamp(1.875rem, 4.25vw, 3.625rem); line-height: 1.05; } /* ------------------------------------------------------------ La scheda: via la cornice ------------------------------------------------------------ Il tema disegna la miniatura come una carta: fondo proprio, angoli stondati, ombra al passaggio del mouse. In un catalogo va bene — separa un prodotto dall'altro in una griglia lunga. In una vetrina di quattro pezzi la carta e' una cornice intorno a una fotografia che vorrebbe essere l'unica cosa in pagina. Fondo trasparente e non `--fondo`: cosi' se la fascia prende una tinta (`gr-blocco--alt`, che chi tiene il ritmo della home potrebbe aggiungere) la scheda non le stampa sopra un quadrato piu' chiaro. */ .product-miniature--vetrina .product-miniature__inner, .product-miniature--vetrina .product-miniature__top { background-color: transparent; border-radius: 0; } /* L'ombra al passaggio del mouse serviva a sollevare la carta: via la carta, l'ombra e' un alone. Il ritorno visivo resta — la fotografia si avvicina appena e il nome passa all'accento — ed e' un ritorno che non aggiunge una scatola alla pagina. `:has(:focus-visible)` va spento insieme al `:hover` per la stessa ragione: e' la stessa ombra, presa da tastiera. Il contorno di messa a fuoco non si tocca, e' l'unico modo di sapere dove si e'. */ .product-miniature--vetrina .product-miniature__inner:hover, .product-miniature--vetrina .product-miniature__inner:has(:focus-visible) { box-shadow: none; } /* ------------------------------------------------------------ Nome e prezzo ------------------------------------------------------------ Centrati sotto la fotografia, come nell'originale. Il padding laterale del tema (0,5rem) sparisce: la colonna di testo deve stare esattamente sotto i bordi dello scatto, non rientrata di mezza riga. */ .product-miniature--vetrina .product-miniature__bottom { gap: 0.45rem; padding: 1.1rem 0 0; text-align: center; } .product-miniature--vetrina .product-miniature__infos { gap: 0.45rem; } /* Il nome nel carattere dei titoli e non in quello d'interfaccia: e' il nome di un pezzo di arredamento, non l'etichetta di un comando. Il peso era 400, deciso quando il carattere dei titoli era un Bodoni: li' il grassetto su un nome proprio lo faceva sembrare un'offerta. Col carattere del marchio la ragione cade, e il sito originale i nomi di prodotto li scrive in 600 — misurato, non dedotto. `text-wrap: balance` perche' «Divano Grantorino 3 posti - Poltrona Frau» va a capo comunque, e una riga da sette parole sopra una da una si vede. IL CORPO E' QUELLO DELL'ORIGINALE: 16px, tondi. Misurato sull'originale a 1366 a carosello impaginato: `.product-miniature .product-title` sta a 16px, peso 600, centrato. Qui era `clamp(1.02rem, 1.5vw, 1.24rem)`, cioe' 19,84px — e la sproporzione era piu' grande del numero. Sull'originale quei 16px stanno dentro una colonna di testo larga 545px (due schede per volta, scatto 583x778): il nome occupa circa quaranta battute per riga. Da noi la stessa fascia mostra quattro schede da 285px: a 19,84px il nome andava a capo ogni quattordici battute, e «MADIA GAGA' COLLECTION - Opinion Ciatti» diventava tre righe di titolo sotto una fotografia quadrata. A 16px ne fa due. Ripiego del carattere: non piu' `Georgia, "Times New Roman", serif`. Era la coda giusta per un Bodoni ed e' esattamente quella sbagliata adesso — se `--display` mancasse, i nomi dei prodotti tornerebbero al serif appena bocciato. `letter-spacing: normal` come l'originale: lo 0,005em serviva ad aprire un Bodoni in maiuscoletto, e su un geometrico a 16px non fa altro che allontanare le lettere di 0,08px. */ .product-miniature--vetrina .product-miniature__title { font-family: var(--display, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif); font-weight: var(--peso-titoli, 600); font-size: 1rem; line-height: 1.3; letter-spacing: normal; text-wrap: balance; text-decoration: none; color: var(--testo, #1a1a1a); } .product-miniature--vetrina .product-miniature__title:hover, .product-miniature--vetrina .product-miniature__title:focus-visible { color: var(--accento, #8a8a8a); } .product-miniature--vetrina .product-miniature__prices, .product-miniature--vetrina .product-miniature__variants { justify-content: center; } /* «Prezzo sobrio» in tre mosse, e sono tutte sottrazioni: il tema lo scrive a peso 600, cioe' piu' marcato del nome del prodotto, e nella fascia degli sconti anche in colore d'accento. Qui torna al peso normale, al carattere d'interfaccia e a un corpo piu' piccolo del nome: su un divano da quattromila euro il prezzo e' una nota, non un richiamo. Cifre a larghezza fissa: in una fila di quattro i prezzi si incolonnano davvero invece di ballare da una scheda all'altra. Il corpo e' sceso da 0,92rem a 0,85rem insieme al nome. Non e' un ritocco: la regola che questo blocco si e' dato e' «il prezzo e' una nota, non un richiamo», e una nota si riconosce dal GRADINO, non dal valore assoluto. Col nome a 19,84px il gradino era 5,1px; col nome a 16px, tenendo 0,92rem, sarebbe stato di 1,3px — cioe' nessuno, e prezzo e nome si sarebbero letti come due righe dello stesso peso. A 0,85rem il gradino torna 2,4px e la scala della scheda resta 16 / 13,6 / 12. */ .product-miniature--vetrina .product-miniature__price { font-family: var(--corpo, system-ui, sans-serif); font-weight: 400; font-size: 0.85rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--testo, #1a1a1a); } /* Il prezzo pieno barrato resta piu' piccolo e smorzato: e' un riferimento, e se pesa quanto il prezzo vero si finisce per leggere due numeri e non capire quale si paga. */ .product-miniature--vetrina .product-miniature__regular-price { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--testo-tenue, #6e6e6e); } /* ------------------------------------------------------------ Il collegamento in fondo alla fascia ------------------------------------------------------------ Arriva come `btn btn-outline-primary`, cioe' vestito col primario di Bootstrap. Su questo negozio quel primario e' ponticellato all'accento del marchio dai token, ma un bottone pieno di colore sotto una vetrina rifa' esattamente il rumore che si e' appena tolto dalle schede. Si riscrivono le variabili `--bs-btn-*` invece delle proprieta': e' il modo in cui Bootstrap 5.3 vuole essere rivestito, e lascia al componente il compito di comporre stati, contorni e focus. Sovrascrivere `background`/`color` a mano avrebbe funzionato a riposo e lasciato lo stato premuto col colore vecchio. */ .gr-vetrina .module-products__buttons .btn { --bs-btn-color: var(--testo, #1a1a1a); --bs-btn-bg: transparent; --bs-btn-border-color: var(--filetto, rgba(0, 0, 0, 0.14)); --bs-btn-hover-color: var(--accento-testo, #ffffff); --bs-btn-hover-bg: var(--accento-fondo, #1a1a1a); --bs-btn-hover-border-color: var(--accento-fondo, #1a1a1a); --bs-btn-active-color: var(--accento-testo, #ffffff); --bs-btn-active-bg: var(--accento-fondo, #1a1a1a); --bs-btn-active-border-color: var(--accento-fondo, #1a1a1a); padding: 0.85rem 1.9rem; border-radius: 2px; font-family: var(--corpo, system-ui, sans-serif); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; } }