/* ============================================================ gr-hybrid — sezioni riusabili ------------------------------------------------------------ Le sezioni del mockup portate qui come componenti del tema. Niente nome di negozio nelle classi. Il mockup si chiamava `.categoria`, `.showroom`, `.rate`; qui le stesse regole si chiamano `.gr-tessere`, `.gr-apertura`, `.gr-richiamo`, perche' descrivono la forma e non il contenuto di un cliente. Un tema con dentro `.showroom-ida` e' un tema che serve un negozio solo, e la prossima volta lo si riscrive da capo. Nessun colore letterale se non quelli del mockup su fondo scuro, e in quel caso il valore fisso resta come ripiego e subito sotto c'e' la versione che segue il token: cosi' le stesse classi funzionano anche con una tavolozza diversa dalla nostra. Tutto sta dentro i @layer che `theme.css` dichiara gia'. Fuori dai layer queste regole batterebbero qualunque cosa nel tema, anche quando non e' quello che serve: dentro, si inseriscono nella cascata al posto giusto e restano scavalcabili dal BO. L'ordine dichiarato da theme.css e': … gr-base, gr-components, gr-pages, gr-layouts, gr-modules. `gr-layouts` viene DOPO `gr-components`: e' li' che si mette una regola che deve vincere su un componente senza rincorrerne la specificita'. ------------------------------------------------------------ Le classi di `grcontentblocks` ------------------------------------------------------------ Da qui in giu' compaiono anche nomi che questo tema non inventa: `gr-slider__…`, `gr-tessera__…`, `gr-marchio__…`, `gr-prodotti__…`. Sono i nomi che emette il modulo `grcontentblocks`, e il modulo e' la fonte: i suoi template hanno i loro test e l'importatore ci scrive dentro. Rinominarli li' per comodita' nostra vorrebbe dire rompere l'importazione per non riscrivere trenta righe di CSS. Le sezioni del mockup erano state portate qui con nomi generici (`.gr-scheda`, `.gr-loghi`, `.gr-tessera__nome`) prima che i template esistessero. Dove il modulo emette un nome proprio, e' quello a essere vestito: tenere le due famiglie in parallelo significa avere due posti dove cambiare una misura e ricordarsene uno solo. ============================================================ */ @layer gr-base { /* IL PESO DEI TITOLI ------------------------------------------------------------ `theme.css` scrive `font-weight: 400` su h1-h6. Con un Bodoni funzionava: un serif a forte contrasto a 43px ha gia' il suo peso ottico. Con Montserrat no — un geometrico in tondo, alla stessa misura, e' una riga sottile che non legge come titolo. 600 non e' un gusto: e' quello che l'originale usa su h2 e h3. Il valore sta in `gr-tokens.css` perche' e' identita'; la regola sta qui, dentro un livello, cosi' un componente che voglia un titolo piu' leggero puo' ancora dirlo da `gr-components` in poi. Fuori dai livelli vincerebbe su tutto e non si potrebbe piu'. L'elenco dei selettori ricalca quello di `theme.css`, classi comprese, e non e' ridondanza: il titolo della scheda prodotto e' un `h1` che porta anche `class="h2"`, e contro una classe (0,1,0) un selettore di solo tag (0,0,1) perde. Stesso elenco, stesso livello, file caricato dopo: vince per ordine e non per forza. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .left-block__title, .right-block__title { font-weight: var(--peso-titoli, 600); } /* Il contorno di messa a fuoco e' l'unico modo di sapere dove si e' quando si naviga da tastiera. Colore d'accento e distacco di 3px: si vede anche sopra un bottone pieno. */ :focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; } /* Chi ha chiesto meno movimento al sistema lo ha chiesto perche' il movimento gli da' fastidio, non per gusto. Per alcune persone un'immagine che si ingrandisce sotto il puntatore o una fascia che scatta da sola sono nausea, non effetto. */ } @layer gr-layouts { /* Fascia: il respiro laterale. Dentro: la colonna di lettura. Sono due cose diverse e vanno tenute separate, altrimenti una sezione a tutta larghezza col fondo colorato non si puo' fare. */ .gr-fascia { padding-inline: var(--gutter); } .gr-dentro { max-width: var(--dentro); margin-inline: auto; } /* ------------------------------------------------------------ La misura del sito, in un elemento solo ------------------------------------------------------------ `.gr-fascia > .gr-dentro` sono due elementi, e servono quando il fondo deve arrivare ai bordi mentre il contenuto no. Testata, topbar, barra del menu, briciole, contenuto e piede hanno UN elemento solo da vestire: infilarci un div in mezzo vorrebbe dire riscrivere la marcatura di sette template e di ogni modulo che ci stampa dentro. Questa classe fa la stessa identica cosa con un elemento solo. Non e' un'approssimazione, e' la stessa aritmetica. Con W la finestra, g il gutter e D la misura: fascia + dentro → inchiostro a g + max(0, (W - 2g - D) / 2) gr-misura → inchiostro a g + max(0, (W - 2g - D) / 2) perche' `box-sizing: border-box` — che il tema mette su tutto — fa misurare a `max-width` la SCATOLA, non l'inchiostro: chiedendo D + 2g alla scatola, dentro restano esattamente D. Il `+ 2 * var(--gutter)` non e' cosmesi. Senza, la scatola si fermerebbe a D e l'inchiostro cadrebbe a D - 2g: il contenuto si restringerebbe di due gutter proprio sugli schermi larghi, cioe' dove si guarda per giudicare se un sito e' fatto bene. Sostituisce `container` e `container-md` di Bootstrap ovunque, e va sostituito OVUNQUE in una volta. Le due misure non erano conciliabili: Bootstrap va a gradini (720/960/1140/1320 ai punti 768/992/1200/1400) piu' 12px di padding, questa e' fluida. Il segno dello scarto si rovesciava a 1400 — sotto le fasce sporgevano oltre la testata, sopra rientravano — e fra 1399 e 1400 il bordo saltava di quasi novanta pixel per un pixel di finestra. Non e' una cosa che si aggiusta una fascia per volta: e' proprio il MISTO delle due misure a fare il gradino, e finche' ne resta una sola addosso a un elemento il gradino ricompare dove nessuno lo guarda. */ .gr-misura { max-width: calc(var(--dentro) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } /* Un `container` di Bootstrap dentro `.gr-misura` e' un contenimento impilato: il suo padding si somma al gutter e il suo max-width a gradini rientra rispetto alla misura del sito. E' il difetto che aveva il piede (fascia col gutter + container dentro + i 12px di Bootstrap = tre bordi sinistri diversi nella stessa pagina) e tornerebbe da solo ogni volta che un modulo stampa un `container` dentro il contenuto: `components/module-products.tpl` lo fa per cinque moduli, e quel template e' condiviso, quindi toglierlo li' sposterebbe il problema altrove invece di risolverlo. Qui si disinnesca il livello di troppo una volta sola, e i template dei moduli restano come sono. */ .gr-misura :is(.container, .container-md) { max-width: none; padding-inline: 0; } /* Stessa storia per le fasce. `.gr-blocco` porta il gutter perche' in home e' una fascia a tutta larghezza; ma i moduli vetrina (`ps_featuredproducts`, `ps_crossselling` e compagnia) escono con le stesse classi anche DENTRO il contenuto — nel carrello stanno in fondo alla pagina — e li' il respiro laterale ce l'ha gia' `.gr-misura`. Misurato sul carrello a 1400: il riquadro «potrebbe interessarti» partiva a 124,6 mentre tutto il resto della pagina parte a 80. Non e' un difetto nuovo, e' lo stesso di prima con un altro numero: prima partiva a 96,6 contro 60. */ .gr-misura .gr-blocco { padding-inline: 0; } /* Se pero' la fascia e' figlia di una `row`, il padding non va azzerato: va RIMESSO quello della colonna. La `row` si tira indietro di mezzo gutter di Bootstrap e conta sulle colonne per recuperarlo; una colonna senza padding sporge di quei 12px oltre la misura. E' lo stesso tranello del marchio in testata, al contrario: li' i due si annullavano da soli, qui bisogna ridarglielo. `--bs-gutter-x` lo dichiara la `row` stessa, quindi il conto resta giusto anche dove il tema cambia il passo (`.columns-container` lo porta a 2.5rem). */ .gr-misura .row > .gr-blocco { padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5); } /* ------------------------------------------------------------ Le pagine che devono restare strette ------------------------------------------------------------ Accesso, registrazione, recupero password e le pagine di errore stanno volutamente su una colonna piu' corta: un campo largo 1240px non si compila, si attraversa, e un messaggio d'errore lungo una riga intera non si legge come un messaggio. Ma «piu' stretta» deve valere sulla COLONNA, non sul respiro laterale. Con le classi di Bootstrap che c'erano prima (`container--limited-sm/md`) il fianco tornava ai 12px fissi del container: a 375 il modulo di accesso partiva a 12 mentre tutta la pagina intorno parte a 20. Otto pixel — cioe' abbastanza pochi da passare una revisione e restare li' per sempre, e abbastanza per far sembrare il modulo incollato al bordo su un telefono. Qui il gutter resta quello del sito e cambia solo la colonna. I 540 e i 720 sono gli stessi numeri di prima, per non ridiscutere una scelta editoriale mentre se ne sistema una tecnica. */ .gr-misura--stretta { max-width: calc(540px + 2 * var(--gutter)); } .gr-misura--media { max-width: calc(720px + 2 * var(--gutter)); } /* Sezione. Il corpo del tema sta a 13px, misura da interfaccia: va bene per il carrello, e' stretta per una pagina che si legge. Qui dentro si torna alla misura del mockup senza toccare il resto del negozio. */ .gr-blocco { position: relative; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); font-size: 1rem; line-height: 1.6; } .gr-blocco--alt { background: var(--fondo-alt); } /* ------------------------------------------------------------ La colonna di lettura dentro un blocco del modulo ------------------------------------------------------------ `blocchi.tpl` non emette un involucro interno: dentro la sezione il contenuto e' figlio diretto, e senza questa regola su uno schermo largo si allarga quanto la fascia. Il mockup teneva la `.dentro` come elemento separato; qui la stessa misura si da' ai figli, che e' l'unico punto che il tema puo' toccare senza chiedere al modulo di cambiare marcatura. */ .gr-blocco > .gr-blocco__intestazione, .gr-blocco > .gr-tessere, .gr-blocco > .gr-marchi, .gr-blocco > .gr-prodotti, .gr-blocco > .gr-html { max-width: var(--dentro); margin-inline: auto; } /* Il testo redazionale non va a 1240px: un paragrafo largo quanto una griglia di otto tessere non si legge, si scansiona. Resta alla misura tipografica e allineato a sinistra come nel mockup, dove la citazione occupava meta' della fascia. */ .gr-blocco > .gr-testo { max-width: var(--misura); } /* ------------------------------------------------------------ Sezioni impaginate a colonne ------------------------------------------------------------ La configurazione dei blocchi puo' aggiungere alla sezione una classe del tema: sulla home di un negozio il punto vendita puo' arrivare come `gr-blocco gr-blocco--banner_grid gr-apertura gr-apertura--secondaria`. `.gr-apertura` la trasforma in una griglia a due colonne, e le due colonne diventano l'intestazione e la tessera. Serve solo dirle come stanno in verticale. */ .gr-blocco.gr-apertura { gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; } /* Quando la sezione e' a colonne, l'intestazione e' una colonna e non un cappello: il margine sotto la sfalserebbe rispetto all'altra. */ :is(.gr-apertura, .gr-newsletter, .gr-editoriale) > .gr-blocco__intestazione { margin-bottom: 0; } /* ------------------------------------------------------------ Il blocco slider e' l'apertura della pagina ------------------------------------------------------------ Due classi e non una (`.gr-blocco.gr-blocco--slider`) perche' la configurazione gli mette addosso anche `gr-apertura`, che vale 0,2,0: con una classe sola questa regola perderebbe e lo slider finirebbe schiacciato nella prima delle due colonne, con l'altra meta' della fascia vuota e scura. La griglia a due colonne, qui, la fa la diapositiva. Padding a zero: l'apertura arriva fino ai bordi della fascia, ed e' il rientro interno della diapositiva a tenere il testo lontano dal margine. */ .gr-blocco.gr-blocco--slider { display: block; padding: 0; } /* Se pero' lo slider porta un'intestazione, quella il rientro lo vuole: senza, il titolo tocca il bordo dello schermo. */ .gr-blocco--slider > .gr-blocco__intestazione { max-width: calc(var(--dentro) + var(--gutter) * 2); margin-inline: auto; padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 1.5rem; } } @layer gr-components { /* ============================================================ I quattro punti in cui il tema mette testo bianco sull'accento ------------------------------------------------------------ `theme.css` ha un accento solo, `--gr-accent`, e lo usa per due mestieri diversi: come colore grafico (contorno di messa a fuoco, link al passaggio del mouse, bordi) e come *superficie* con sopra del testo bianco. Sono quattro posti in tutto il tema, e sono tutti posti che contano — il bottone primario e' quello di «aggiungi al carrello» e di «paga». Queste regole nacquero perche' il rosso di allora, #EC1C24, col bianco sopra faceva 4,40:1: sotto la soglia di 4,5 per il testo normale. Servivano a portare le superfici su un secondo rosso piu' scuro. Col rosso del marchio, #851316, il problema non c'e' piu': bianco sopra fa 9,99:1, e `--accento-fondo` punta oggi allo stesso colore di `--accento`. Le regole restano perche' nominano il ruolo giusto — «questa e' una superficie, non un filetto» — e perche' il giorno in cui l'accento tornera' chiaro tornano a lavorare da sole. Sono documentazione eseguibile, non un cerotto. La specificita' e' quella delle regole originali e il file arriva dopo `theme.css`, quindi vincono per ordine e non per forza. */ .btn-primary { --bs-btn-bg: var(--accento-fondo); --bs-btn-border-color: var(--accento-fondo); --bs-btn-disabled-bg: var(--accento-fondo); --bs-btn-disabled-border-color: var(--accento-fondo); } /* Da vuoto a pieno: finche' e' vuoto il rosso e' solo testo e bordo e resta quello grafico; riempiendosi diventa una superficie con sopra del bianco. */ .btn-outline-primary { --bs-btn-hover-bg: var(--accento-fondo); --bs-btn-hover-border-color: var(--accento-fondo); --bs-btn-active-bg: var(--accento-fondo); --bs-btn-active-border-color: var(--accento-fondo); } /* Il contatore del carrello: due cifre bianche dentro un cerchio piccolo. Piccolo e bianco su rosso e' proprio il caso peggiore. */ .gr-minicart__count { background: var(--accento-fondo); } /* ---------- occhiello ---------- L'etichettina sopra un titolo. Il filetto che sfuma a destra tiene la riga senza chiuderla: e' un invito a continuare, non un bordo. Maiuscolo con 0.18em di spaziatura, perche' il maiuscolo stretto non si legge. */ .gr-occhiello { display: flex; align-items: center; gap: 0.9rem; margin: 0; font-family: var(--corpo); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--testo-tenue); } .gr-occhiello::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--filetto), transparent); } /* ---------- intestazione di sezione ---------- */ .gr-intestazione { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 2.2rem; } .gr-intestazione h2, .gr-intestazione .gr-titolo { font-family: var(--display); font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.1; text-wrap: balance; margin: 0; } .gr-intestazione p { margin: 0; max-width: var(--misura); color: var(--testo-tenue); } /* ---------- barra promozionale ---------- */ .gr-barra-promo { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 1rem; padding: 0.6rem var(--gutter); background: var(--scuro-fondo); color: var(--scuro-testo); font-size: 0.8rem; } .gr-barra-promo strong { color: var(--accento); font-weight: 600; } /* ---------- marchio ---------- Due file, non una scritta che gli somiglia: il lockup per i fondi chiari e il monogramma per quelli scuri. Si scambiano col tema — e' proprio a questo che serve avere due varianti. Entrambe le immagini stanno nel documento e a decidere quale si vede e' il CSS: cosi' lo scambio avviene anche a JavaScript spento, e non c'e' un lampo di logo sbagliato al caricamento. */ .gr-logo { display: block; line-height: 0; } .gr-logo img { display: block; width: auto; height: 44px; } /* Lo scambio col tema riguarda solo il marchio appoggiato al fondo di pagina. Nel piede il fondo e' scuro in entrambi i temi e lo scambio non deve avvenire: per questo le regole qui sotto escludono la variante `--piede` invece di essere poi disfatte da lei. Disfarle avrebbe voluto dire rincorrere la specificita' di `:not()` con un `:not()` piu' lungo, cioe' scrivere una regola che si capisce solo contando i due punti. */ .gr-logo:not(.gr-logo--piede) .gr-logo__su-scuro { display: none; } /* QUI C'ERA lo scambio del marchio sulla PREFERENZA DI SISTEMA (`prefers-color-scheme: dark`), ed e' stato tolto perche' rendeva il marchio invisibile. Il tema non ha una tavolozza scura: `--fondo` resta #F7F5F3 in tutti e due i modi, e nessun'altra regola del tema risponde a quella preferenza. Scambiando il file, chi ha il telefono in modo scuro riceveva la variante per fondi scuri — inchiostro bianco — su un fondo chiaro: contrasto misurato 1,01:1, cioe' un buco di 89x40 pixel al posto della ragione sociale. La testata si apriva senza insegna, ed e' la prima cosa che si vede. Lo scambio resta invece sotto `[data-theme="dark"]` e `[data-bs-theme="dark"]` qui sotto: quelli non sono una preferenza del visitatore ma l'interruttore di grthemekit, e quando e' acceso la tavolozza scura c'e' davvero. Il marchio segue il FONDO, non il sistema operativo — che e' la regola, e prima non lo era. Il giorno che il tema avra' una vera tavolozza scura legata alla preferenza di sistema, questa regola va rimessa INSIEME a quella, mai da sola. Effetto collaterale che vale la pena sapere: il file chiaro e' largo 170,5px e quello scuro 89,3. Finche' lo scambio c'era, una prova fatta in modo scuro misurava una testata con ottantun pixel in piu' di spazio libero — e quegli ottantun pixel sono esattamente quelli che decidono se il carrello resta in riga a 768. Un collaudo fatto in scuro dava percio' esito buono su una testata che in chiaro era rotta. */ :root[data-theme="dark"] .gr-logo:not(.gr-logo--piede) .gr-logo__su-chiaro, :root[data-bs-theme="dark"] .gr-logo:not(.gr-logo--piede) .gr-logo__su-chiaro { display: none; } :root[data-theme="dark"] .gr-logo:not(.gr-logo--piede) .gr-logo__su-scuro, :root[data-bs-theme="dark"] .gr-logo:not(.gr-logo--piede) .gr-logo__su-scuro { display: block; height: 40px; } :root[data-theme="light"] .gr-logo:not(.gr-logo--piede) .gr-logo__su-chiaro, :root[data-bs-theme="light"] .gr-logo:not(.gr-logo--piede) .gr-logo__su-chiaro { display: block; height: 44px; } :root[data-theme="light"] .gr-logo:not(.gr-logo--piede) .gr-logo__su-scuro, :root[data-bs-theme="light"] .gr-logo:not(.gr-logo--piede) .gr-logo__su-scuro { display: none; } /* Nel piede vale sempre la variante per fondi scuri. Manca il lockup completo in bianco nel kit del cliente: li' si e' costretti al monogramma, che dice il nome ma non la ragione sociale estesa. E' un file da far produrre, non una scelta di disegno. */ .gr-logo--piede .gr-logo__su-chiaro { display: none; } .gr-logo--piede .gr-logo__su-scuro { display: block; height: 38px; margin-bottom: 1rem; } /* ---------- ricerca ---------- */ .gr-cerca { display: flex; flex: 1 1 260px; overflow: hidden; border: 1px solid var(--filetto); border-radius: 2px; } .gr-cerca__campo { flex: 1; border: 0; padding: 0.7rem 0.9rem; font: inherit; font-size: 0.9rem; background: transparent; color: var(--testo); } /* Il bottone porta la parola «Cerca»: prende il rosso leggibile, non quello grafico. */ .gr-cerca__invio { border: 0; padding-inline: 1.1rem; font: inherit; font-size: 0.85rem; background: var(--accento-fondo); color: var(--accento-testo); cursor: pointer; } /* ---------- navigazione ---------- */ .gr-navigazione { padding: 0 var(--gutter); border-bottom: 1px solid var(--filetto); } .gr-navigazione .gr-dentro { display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 2rem); overflow-x: auto; scrollbar-width: thin; } .gr-navigazione__voce { padding: 1rem 0; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color 0.2s, color 0.2s; } .gr-navigazione__voce:hover { border-bottom-color: var(--accento); } .gr-navigazione__voce--risalto { margin-left: auto; padding: 0.5rem 1.1rem; border-bottom: 0; border-radius: 2px; background: var(--accento-fondo); color: var(--accento-testo); } /* ---------- apertura ---------- Testo a sinistra, immagine a destra, fondo scuro. Sotto i 900px le due meta' si impilano invece di stringersi: una colonna di testo larga meta' schermo su un telefono non e' una colonna, e' una striscia. */ .gr-apertura { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--scuro-fondo); color: var(--scuro-testo); font-size: 1rem; line-height: 1.6; } @media (min-width: 900px) { .gr-apertura { grid-template-columns: 0.95fr 1.05fr; } /* Variante per le sezioni scure che non aprono la pagina — il punto vendita, un servizio — dove il testo pesa piu' dell'immagine. */ .gr-apertura--secondaria { grid-template-columns: 1.1fr 0.9fr; } } .gr-apertura__testo { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter); } .gr-apertura--secondaria .gr-apertura__testo { gap: 1.2rem; padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); } .gr-apertura__titolo { font-family: var(--display); font-size: clamp(2.4rem, 5.2vw, 4.2rem); line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; margin: 0; } .gr-apertura--secondaria .gr-apertura__titolo, .gr-apertura--secondaria h2 { font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0; } /* La parola in corsivo prende il rosso grafico: e' un accento visivo, non una superficie che porta testo. */ .gr-apertura__titolo em { font-style: italic; color: var(--accento); } /* Il testo dentro le sezioni scure e' leggermente spento rispetto al bianco pieno. Il valore fisso e' quello del mockup e resta come ripiego; la riga sotto lo ricava dal token, cosi' la stessa classe regge anche una tavolozza che non sia la nostra. */ .gr-apertura__testo p:not(.gr-occhiello) { max-width: 46ch; margin: 0; font-size: 1.02rem; color: rgba(247, 245, 243, 0.8); color: color-mix(in srgb, var(--scuro-testo) 80%, transparent); } .gr-apertura .gr-occhiello { color: rgba(247, 245, 243, 0.6); color: color-mix(in srgb, var(--scuro-testo) 60%, transparent); } .gr-apertura .gr-occhiello::after { background: linear-gradient(to right, rgba(247, 245, 243, 0.28), transparent); background: linear-gradient(to right, color-mix(in srgb, var(--scuro-testo) 28%, transparent), transparent); } /* Elenco di dati — indirizzo, telefono, orari — dentro una sezione scura. */ .gr-dettagli { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; } .gr-dettagli span { color: rgba(247, 245, 243, 0.6); color: color-mix(in srgb, var(--scuro-testo) 60%, transparent); } /* ---------- azioni e bottoni ---------- */ .gr-azioni { display: flex; flex-wrap: wrap; gap: 0.9rem; } .gr-bottone { display: inline-block; padding: 0.85rem 1.7rem; font-family: var(--corpo); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: transform 0.15s, background 0.2s; } .gr-bottone:hover { transform: translateY(-1px); } /* Porta parole su fondo rosso: il rosso leggibile, sempre. */ .gr-bottone--pieno { border: 0; background: var(--accento-fondo); color: var(--accento-testo); cursor: pointer; } .gr-bottone--vuoto { border: 1px solid rgba(247, 245, 243, 0.45); border-color: color-mix(in srgb, var(--scuro-testo) 45%, transparent); color: var(--scuro-testo); } .gr-bottone--vuoto:hover { border-color: var(--accento); color: var(--accento); } /* Su fondo chiaro il contrasto piu' forte non e' il rosso: e' il nero del testo. Serve dove il rosso c'e' gia' nel filetto della sezione e un secondo rosso farebbe rumore. */ .gr-bottone--scuro { background: var(--testo); color: var(--fondo); } /* ---------- segnaposto fotografico ---------- Non finge una foto che non c'e': dichiara l'inquadratura prevista. Un mockup che finge di avere le foto finali fa approvare una pagina che poi non esiste. */ .gr-scatto { position: relative; display: flex; align-items: flex-end; min-height: 320px; padding: 1.2rem; background: radial-gradient(120% 90% at 70% 18%, rgba(236, 28, 36, 0.20), transparent 62%), linear-gradient(150deg, #3A2C26 0%, #211A17 55%, #14100E 100%); /* Stesso segnaposto ricavato dai token: e' lo stesso fondo che porta la diapositiva dello slider, e le due misure devono restare una cosa sola anche il giorno che la tavolozza cambia. */ background: radial-gradient(120% 90% at 70% 18%, color-mix(in srgb, var(--accento) 20%, transparent), transparent 62%), linear-gradient(150deg, color-mix(in srgb, var(--inchiostro-2) 82%, var(--grigio)) 0%, var(--inchiostro-2) 55%, var(--inchiostro) 100%); } .gr-scatto--basso { min-height: 260px; } .gr-scatto__nota { margin: 0; padding-left: 0.6rem; border-left: 2px solid var(--accento); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 245, 243, 0.55); color: color-mix(in srgb, var(--scuro-testo) 55%, transparent); } /* Quando la foto vera arriva, entra qui sotto e copre il segnaposto senza che cambi il markup intorno. */ .gr-scatto__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------- garanzie ---------- */ .gr-garanzie { padding: 1.6rem var(--gutter); border-bottom: 1px solid var(--filetto); background: var(--fondo-alt); } .gr-garanzie .gr-dentro { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .gr-garanzia strong { display: block; margin-bottom: 0.15rem; font-size: 0.88rem; letter-spacing: 0.03em; } .gr-garanzia span { font-size: 0.83rem; color: var(--testo-tenue); } /* ============================================================ TESSERE — blocco `banner_grid` di grcontentblocks ------------------------------------------------------------ Marcatura vera (banner_grid.tpl): ul.gr-tessere[data-gr-tessere="8"] li.gr-tessera a.gr-tessera__collegamento ← facoltativo img.gr-tessera__immagine ← facoltativo span.gr-tessera__testo span.gr-tessera__titolo span.gr-tessera__sottotitolo span.gr-tessera__bottone Facoltativo vuol dire che va disegnata anche la tessera senza foto e senza collegamento. Oggi sulla home NON c'e' una sola immagine: e' esattamente il caso da cui parte il disegno, non un'eccezione da rimandare. La griglia non ha spazi fra le tessere: il fondo del filetto passa dalle fessure di 1px, e le celle sembrano ritagliate da un foglio solo invece che appoggiate una accanto all'altra. */ .gr-tessere { display: grid; gap: 1px; /* 320 e non 210, ed e' una correzione che si vede solo a pagina aperta. A 210 la griglia da otto voci diventava cinque per riga piu' tre, con una casella vuota in fondo che si legge come un errore. Ma soprattutto: una tessera e' una FOTOGRAFIA con sopra una parola, e a duecento pixel la fotografia non si capisce e la parola non si legge. Il sito da cui questo nasce ne mette tre, grandi, ed e' la scelta giusta — una tessera esiste per far venire voglia di cliccarla, non per stare in elenco. */ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* E' un `ul`: senza questi tre azzeramenti la griglia parte rientrata di 40px e con i pallini in mezzo alle fessure. */ margin: 0; padding: 0; list-style: none; background: var(--filetto); border: 1px solid var(--filetto); } /* Tre e sei voci: righe da tre esatte, mai una riga spaiata in fondo. `auto-fit` da solo, su un contenitore largo, ne metterebbe quattro e lascerebbe la seconda riga con due tessere e un buco. */ @media (min-width: 62rem) { .gr-tessere[data-gr-tessere="3"], .gr-tessere[data-gr-tessere="6"] { grid-template-columns: repeat(3, 1fr); } } /* Il modulo dichiara quante tessere sono, e non per decorazione: una tessera sola non e' una griglia da una cella, e' un pannello. Le si da' l'altezza di un'immagine invece che quella di una miniatura. */ .gr-tessere[data-gr-tessere="1"] .gr-tessera { min-height: 260px; } .gr-tessera { /* Il testo delle tessere sta sempre sopra una velatura scura, in tutti e due i temi. Il suo colore non e' `--scuro-testo`, che segue il tema e di notte cambia valore, ma la carta, che nella tavolozza grezza sta ferma: sotto c'e' del nero comunque. */ --su-velatura: var(--carta, #F7F5F3); position: relative; display: flex; align-items: flex-end; /* Alta come una fotografia, non come una riga d'elenco. A 210 pixel una stanza inquadrata non si legge: si vede un ritaglio. Il rapporto che ne esce, 320 per 340, e' quasi quadrato ed e' quello che regge meglio fotografie d'interni girate sia in orizzontale sia in verticale. */ min-height: 340px; /* Il rientro sta sul collegamento e non qui: se lo tenesse la tessera, la fascia di 1.1rem lungo i bordi resterebbe fuori dall'area cliccabile, e su una tessera si clicca dappertutto. */ padding: 0; overflow: hidden; background: var(--fondo); } /* Il segnaposto fotografico. Due tinte passate dal contenuto con --c1 e --c2; se non arrivano — e oggi non arrivano mai — resta il bruno scuro del catalogo. E' questo a garantire il vincolo di leggibilita': una tessera senza foto ha comunque un fondo scuro sotto un testo chiaro, invece del testo quasi nero su fondo quasi nero che si vede adesso sul sito. */ .gr-tessera::before { content: ""; position: absolute; inset: 0; /* Un fondo decorativo non deve mai rubare il clic al collegamento che ricopre: senza questa riga la tessera «Divani» sembra un bottone e non porta da nessuna parte. */ pointer-events: none; background: linear-gradient(160deg, var(--c1, var(--inchiostro-2)), var(--c2, var(--inchiostro))); opacity: 0.9; transition: transform 0.5s ease; } /* La foto copre il segnaposto perche' viene dopo nell'ordine del documento: fra elementi posizionati senza z-index vince l'ultimo, e la velatura qui sotto viene dopo di lei. E' l'unica ragione per cui questi tre non hanno bisogno di uno z-index a testa. */ .gr-tessera__immagine { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* La velatura. Sul sito vecchio «Sedie» era bianco su fotografia chiara e non si leggeva. Una velatura piena spegnerebbe la foto; una velatura solo nella fascia bassa risolve il contrasto dove c'e' scritto e lascia vedere il prodotto dove non c'e'. */ .gr-tessera::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none; background: linear-gradient(to top, rgba(12, 10, 9, 0.82), transparent); background: linear-gradient(to top, color-mix(in srgb, var(--inchiostro) 82%, transparent), transparent); } .gr-tessera:hover::before, .gr-tessera:focus-within::before { transform: scale(1.05); } /* Il collegamento avvolge tutta la tessera: `flex: 1` lo porta fino ai bordi in larghezza, senza bisogno di stenderlo in assoluto sopra il contenuto. `align-self: stretch` non e' un di piu': la tessera allinea i suoi figli in basso (serve alla tessera senza collegamento, dove il testo e' figlio diretto), e allineare in basso vuol dire NON stirare. Senza questa riga il collegamento e' alto quanto le sue parole — su «Divani» sono 60 pixel su 210 — e i due terzi superiori della tessera non portano da nessuna parte, pur sembrando cliccabili. */ .gr-tessera__collegamento { /* Posizionato, e non per capriccio: `::before` (il segnaposto) e `::after` (la velatura) sono elementi assoluti e vengono dopo di lui nell'ordine di disegno. Un collegamento statico ci finisce sotto, e con lui il suo contorno di messa a fuoco: chi naviga da tastiera arriva sulla tessera e non vede dove si trova. Il testo dentro era gia' stato alzato; mancava il collegamento, che e' proprio l'elemento che riceve la messa a fuoco. */ position: relative; z-index: 1; display: flex; flex: 1; align-self: stretch; align-items: flex-end; min-width: 0; padding: 1.1rem; text-decoration: none; color: inherit; } /* Il contorno di messa a fuoco sta DENTRO la tessera: `overflow: hidden` taglierebbe quello standard, che sporge di 3px, e chi naviga da tastiera si troverebbe sulla tessera senza vederlo. */ .gr-tessera__collegamento:focus-visible { outline-offset: -4px; } /* z-index 1 e non `position: relative` e basta: la velatura e' un elemento posizionato che viene dopo nel documento, e senza un livello esplicito il testo le finirebbe sotto. */ .gr-tessera__testo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; } /* Senza collegamento il testo e' figlio diretto della tessera, e il rientro non gliel'ha dato nessuno. */ .gr-tessera > .gr-tessera__testo { padding: 1.1rem; } .gr-tessera__titolo { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; letter-spacing: 0.01em; color: var(--su-velatura, #F7F5F3); } /* Nel mockup questa riga era un conteggio — «24 prodotti» — e stava in maiuscoletto spaziato. Qui ci arrivano frasi intere («Lunedi – sabato, 9:30 – 13:00»): il maiuscolo su una frase la rende un cartello stradale. Resta minuscola e piu' tenue del titolo. */ .gr-tessera__sottotitolo { margin-top: 0.2rem; font-family: var(--corpo); font-size: 0.84rem; line-height: 1.45; color: rgba(247, 245, 243, 0.78); color: color-mix(in srgb, var(--su-velatura, #F7F5F3) 78%, transparent); } /* Non e' un bottone: e' uno `span` dentro il collegamento, e fingere un bottone dove non c'e' un elemento premibile e' una promessa che la tastiera non mantiene. Un'etichetta sottolineata dice «di qui si prosegue» senza mentire. */ .gr-tessera__bottone { align-self: flex-start; margin-top: 0.8rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--accento); font-family: var(--corpo); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--su-velatura, #F7F5F3); transition: border-color 0.2s ease; } .gr-tessera__collegamento:hover .gr-tessera__bottone, .gr-tessera__collegamento:focus-visible .gr-tessera__bottone { border-bottom-color: var(--su-velatura, #F7F5F3); } /* Dentro una sezione scura il filetto chiaro sparisce: le fessure fra le tessere diventano invisibili e la griglia si sfalda. */ .gr-apertura .gr-tessere { background: rgba(242, 238, 234, 0.14); background: color-mix(in srgb, var(--scuro-testo) 14%, transparent); border-color: rgba(242, 238, 234, 0.14); border-color: color-mix(in srgb, var(--scuro-testo) 14%, transparent); } /* ---------- carosello ---------- Scorre col dito e si aggancia all'inizio della scheda. Niente frecce e niente JavaScript: e' una lista che si trascina, e funziona anche col pollice su un telefono. `.gr-prodotti__elenco` e' il nome che il modulo da' alla stessa cosa. Sta nello stesso gruppo e non in una copia piu' sotto: due liste scorrevoli con misure diverse sono il modo piu' rapido di far scorrere due caroselli in modo diverso sulla stessa pagina senza che nessuno capisca perche'. */ .gr-carosello, .gr-prodotti__elenco { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 1.5rem; padding-bottom: 1rem; /* Lo scorrimento sta QUI dentro e non sul corpo della pagina: una fila di dodici schede larga il doppio dello schermo che sfora dal `body` fa comparire la barra orizzontale sotto tutto il sito, non solo sotto il carosello. */ overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x mandatory; } .gr-carosello > *, .gr-prodotti__voce { scroll-snap-align: start; min-width: 0; } /* ---------- scheda prodotto ---------- */ .gr-scheda { display: flex; flex-direction: column; gap: 0.8rem; text-decoration: none; } .gr-scheda__scatto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(155deg, var(--c1, var(--inchiostro-2)), var(--c2, var(--inchiostro))); } .gr-scheda__scatto img { width: 100%; height: 100%; object-fit: cover; } .gr-scheda__scatto span { position: absolute; left: 0.7rem; bottom: 0.7rem; font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.68); color: color-mix(in srgb, var(--carta) 68%, transparent); } .gr-scheda__marca { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--testo-tenue); } .gr-scheda__nome { font-family: var(--display); font-size: 1.12rem; line-height: 1.25; } /* Cifre a larghezza fissa: in colonna i prezzi si incolonnano davvero, invece di ballare da una riga all'altra. */ .gr-scheda__prezzo { font-size: 0.92rem; font-variant-numeric: tabular-nums; } .gr-scheda__prezzo em { font-style: normal; font-size: 0.78rem; color: var(--testo-tenue); } /* ---------- editoriale ---------- */ .gr-editoriale { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; } @media (min-width: 860px) { .gr-editoriale { grid-template-columns: 1fr 1fr; } } .gr-citazione { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.24; font-style: italic; } .gr-firma { margin-top: 1.4rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--testo-tenue); } .gr-firma::before { content: "— "; color: var(--accento); } /* ============================================================ MARCHI — blocco `manufacturer_carousel` di grcontentblocks ------------------------------------------------------------ Marcatura vera (manufacturer_carousel.tpl): ul.gr-marchi[data-gr-carosello] li.gr-marchio a.gr-marchio__collegamento img.gr-marchio__logo ← se c'e' l'immagine span.gr-marchio__nome ← altrimenti il nome, nel carattere dei titoli Qui c'era `.gr-loghi` / `.gr-logo`, portate dal mockup prima che il template esistesse. Sono state tolte per due motivi, e il secondo e' un difetto vero: `.gr-logo` era gia' il marchio del negozio in testata, e la stessa classe gli imponeva `height: 108px` e `display: grid`. Due componenti diversi con lo stesso nome non convivono, convivono finche' nessuno guarda la testata. Altezza fissa e fondo neutro: sul sito attuale la fila mescola fotografie di prodotto e loghi e sembra disordinata. Qui tutte le celle sono uguali e a variare e' solo cio' che ci sta dentro. */ .gr-marchi { /* Griglia in colonna e non a capo automatico: i marchi sono dieci e crescono col catalogo. A capo diventerebbero tre file di loghi alte trecento pixel in mezzo alla home; in colonna restano una fascia sola che scorre. */ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity; background: var(--filetto); border: 1px solid var(--filetto); } .gr-marchio { display: grid; height: 108px; scroll-snap-align: start; background: var(--fondo); } .gr-marchio__collegamento { display: grid; place-items: center; height: 100%; padding: 0.9rem; text-align: center; text-decoration: none; color: var(--testo-tenue); transition: color 0.2s ease, background 0.2s ease; } .gr-marchio__collegamento:hover { color: var(--testo); background: var(--fondo-alt); } /* La cella non ha margine intorno: il contorno standard, che sporge di 3px, finirebbe sotto la cella accanto. */ .gr-marchio__collegamento:focus-visible { outline-offset: -4px; } /* Il vincolo e' l'altezza, non la larghezza: e' l'altezza che fa sembrare disordinata una fila di loghi. `contain` non ritaglia — un logo tagliato non e' piu' quel marchio. */ .gr-marchio__logo { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; } /* Dove il logo manca resta il nome, ed e' comunque un marchio leggibile: nel carattere dei titoli, alla misura della cella. */ .gr-marchio__nome { font-family: var(--display); font-size: 1.05rem; line-height: 1.2; letter-spacing: 0.08em; color: inherit; } /* ---------- richiamo ---------- Una riga di testo che vende qualcosa — le rate, una spedizione, una garanzia. Testo e non immagine: un PNG nero con dentro delle parole Google non lo legge, non si adatta al telefono, e una promessa commerciale merita di essere una frase. Il filetto rosso a sinistra e' l'unica grafica che serve. */ .gr-richiamo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.6rem; padding: 1.6rem 1.8rem; border: 1px solid var(--filetto); border-left: 3px solid var(--accento); } .gr-richiamo h3, .gr-richiamo .gr-titolo { margin: 0; font-family: var(--display); font-size: 1.35rem; } .gr-richiamo p { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--testo-tenue); } /* ---------- iscrizione ---------- */ .gr-newsletter { display: grid; gap: 1.6rem; align-items: center; } @media (min-width: 820px) { .gr-newsletter { grid-template-columns: 1fr 1fr; } } .gr-iscrizione { display: flex; flex-wrap: wrap; gap: 0.6rem; } .gr-iscrizione__campo { flex: 1 1 220px; padding: 0.85rem 1rem; border: 1px solid var(--filetto); border-radius: 2px; background: transparent; color: var(--testo); font: inherit; font-size: 0.92rem; } .gr-consenso { margin-top: 0.7rem; font-size: 0.76rem; color: var(--testo-tenue); } /* ---------- piede ---------- Scuro in entrambi i temi: e' il fondo su cui il monogramma bianco funziona, ed e' anche il modo in cui la pagina dichiara di essere finita. */ /* Niente gutter laterale qui: lo mette `.gr-misura` sul figlio. Prima ce l'avevano tutti e due — la fascia col suo `var(--gutter)` e il `container` dentro col suo padding e il suo max-width a gradini — e i due contenimenti si sommavano: il piede finiva su una misura tutta sua, diversa sia dalla testata sia dalle fasce della home, e a 1024, 1400 e 1440 nella stessa pagina si potevano contare tre bordi sinistri distinti. Non si aggiusta cambiando la classe al figlio: finche' il genitore tiene il suo gutter, qualunque cosa gli si metta dentro parte da un'altra parte. Va tolto uno dei due livelli, ed e' questo. */ .gr-piede { padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; background: var(--scuro-fondo); color: var(--scuro-testo); } /* Il tema aveva gia' un suo interruttore per il piede scuro: `data-footer-style="dark"` sul