/* ============================================================================= scatole.com — DIREZIONE "BIANCO CANDIDO" · 06 · ECCELLENZA ============================================================================= Si carica PER ULTIMO, dopo 00 → 05. Non ha una zona del sito da sé: prende il lavoro già fatto e lo porta un gradino più su. LA TESI, IN TRE RIGHE Questo non è un negozio di oggetti: è un negozio di CARTA. La carta ha una superficie, uno spessore e un modo di prendere la luce, e finché la pagina non lo mostra, una scatola da 8 € e una da 80 € si somigliano. Perciò: dare a ogni piano una materia e una direzione della luce, far posare gli oggetti su qualcosa invece di lasciarli galleggiare, e promuovere le prove del lavoro fatto a mano da nota a piè di pagina ad argomento. COSA NON HO FATTO, E PERCHÉ CONTA I cinque fogli sotto sono scritti bene e i loro contrasti sono verificati uno per uno. Non li rifaccio. Dove una mia regola ne scavalca una loro l'ho scritto nel commento con il motivo; sono SEI punti in tutto il file e li elenco qui perché chi arriva dopo non debba cercarli: § 4 `.sc-eroe__prove` — il filo di 04 diventa una riga millimetrata § 5 la fascia vantaggi di 01 § 8 — respiro e disco di carta § 6b il filetto sotto il capo-sezione della home (aggiunta, non modifica) § 6c il piano immagine di 01 § 9 — sfondo piatto → luce di studio § 7 il bottone di scheda di 01 § 5 — pieno → contorno, pieno al passaggio § 8 la valutazione a zero stelle nella griglia — nascosta LA REGOLA CHE MI SONO DATO SUI CONTRASTI Nessun rapporto peggiora. Nemmeno di un decimo, nemmeno restando sopra la soglia. Ogni volta che una mia regola tocca un colore ho calcolato il prima e il dopo; i numeri sono nei commenti, accanto alla regola che li produce. Dove il calcolo dava un peggioramento — anche largamente in regola — ho cambiato la regola, non la soglia. Sono tre casi, segnati con «SCARTATO». GETTONI CHE NON C'ERANO Uno solo: l'ombra di contatto. Non è un colore nuovo — è lo stesso inchiostro delle ombre di 00-fondamenta, `rgb(15 17 21 / …)`, a un'altra opacità — ma un nome ce l'ha e in 00 non c'è. L'ho dichiarato qui con il prefisso `--sce-` e l'ho segnalato al proprietario di 00-fondamenta: se lo adotta, questa riga sparisce. UNA TRAPPOLA CHE MI HA MORSO DUE VOLTE, scritta qui perche' morde chiunque Fra una sezione Elementor `e-con-full` e il suo `.e-con-inner` puo' esserci un contenitore intermedio (`e-con-boxed`) che in pagina non si vede e nel pannello non compare. Il selettore col figlio diretto `.sezione > .e-con-inner` aggancia ZERO elementi e la regola sparisce senza errore. Succede almeno sulla fascia vantaggi della home (766f39d) e sul testo di about-us. Regola pratica: verso `.e-con-inner` si va sempre per discendenza, mai col `>`. COSTO Niente JavaScript, nessun carattere nuovo, nessuna immagine scaricata. Le due grane sono SVG in linea come data URI: il browser le rasterizza una volta a 180×180 e riusa la stessa piastrella ovunque. Si animano solo `transform`, `opacity`, `color` e `background-color`. Nessuna animazione infinita. Nessun `backdrop-filter`. Nessun filtro sulle fotografie: le foto dei campionari e delle categorie sono carta vera e i loro colori sono il prodotto. ========================================================================== */ /* ============================================================================= 1 · I GETTONI DI QUESTO FOGLIO ----------------------------------------------------------------------------- Prefisso `--sce-` (Scatole · Eccellenza) per non invadere lo spazio dei nomi di 00-fondamenta. Tutto quello che sta qui è composto con i gettoni di 00: l'unico valore letterale è l'inchiostro delle ombre, che è già letterale anche in 00 (`--sc-ombra-1` e compagnia lo scrivono per esteso). ========================================================================== */ :root { /* --- LA GRANA DELLA CARTA ------------------------------------------------- Due piastrelle di rumore, e la differenza fra le due è una questione di accessibilità, non di gusto. --- UNA SOLA GRANA, E QUI C'È SCRITTO PERCHÉ NON SONO DUE --- Ne avevo scritte due: una a due versi (chiaro + scuro) per i piani senza testo, e una a solo chiaro per i piani con il testo sopra, così da non abbassare nemmeno di un centesimo il contrasto nei punti scuri della grana. La seconda l'ho MISURATA e l'ho buttata: su `--sc-carta` (#FAFAF8) il bianco ha solo cinque livelli di margine prima del bianco pieno, quindi una grana chiara al 15% sposta il fondo da #FAFAF8 a #FBFBF9 — UN livello. Non si vede. Faceva finta. La grana visibile su quei piani dovrebbe scurire, e scurire costa: con nero al 3,5% il fondo va a #F1F1EF e l'etichetta più tenue della fascia vantaggi scende da 5,25:1 a 4,85:1. Resta AA, ma è un peggioramento, e in questo foglio non se ne fa nessuno. Sta nel resoconto: è una riga sola, se il proprietario decide che vale. Resta quella che funziona davvero, e funziona perché il piano è più scuro e sopra non c'è nessun testo: i riquadri immagine della home. Lì la fibra lavora in tutti e due i versi, come quella vera. `color-interpolation-filters='sRGB'` non è un vezzo: senza, il filtro lavora in lineare e la stessa alfa rende quasi il doppio. */ --sce-fibra-carta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.20 0 0 0 0'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.74' numOctaves='2' stitchTiles='stitch' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23a)'/%3E%3Crect width='180' height='180' filter='url(%23b)'/%3E%3C/svg%3E"); /* --- L'OMBRA DI CONTATTO -------------------------------------------------- GETTONE MANCANTE IN 00-FONDAMENTA, segnalato. Stesso inchiostro delle `--sc-ombra-*` (rgb 15 17 21), altra opacità. Serve a una cosa sola e non ne esiste un'altra che la faccia: dire dove un oggetto TOCCA il piano. Un `box-shadow` non può, perché segue il rettangolo dell'elemento e non la sagoma del disegno dentro. */ --sce-contatto: rgb(15 17 21 / .16); --sce-contatto0: rgb(15 17 21 / 0); /* --- LA LUCE DI STUDIO ---------------------------------------------------- È il fondale a cova ("sweep") con cui si fotografa il packaging: chiaro in alto al centro, dove batte la luce, e via via più profondo verso il basso e verso gli angoli. Tre strati, tutti con gettoni di 00. Il bianco a zero opacità è scritto `rgb(255 255 255 / 0)` e non `transparent`: sono lo stesso colore ma il secondo, in alcuni motori, interpola passando dal nero e sporca la sfumatura di grigio. */ --sce-luce: radial-gradient(118% 96% at 50% -12%, var(--sc-fondo) 0%, rgb(255 255 255 / 0) 66%); --sce-piano: linear-gradient(180deg, var(--sc-incasso) 0%, var(--sc-rilievo) 100%); /* Posizione presa a schermo, non a occhio: il vertice piu' basso dei sei disegni cade fra l'83% e l'86% dell'altezza del riquadro. L'ellisse sta all'85%: sotto le scatole appoggiate, appena dietro quelle inclinate. */ --sce-appoggio: radial-gradient(44% 6.5% at 50% 85%, var(--sce-contatto) 0%, var(--sce-contatto0) 76%); } /* ============================================================================= 2 · LA MATERIA — dove va la grana, e dove non va ----------------------------------------------------------------------------- La grana si vede meglio di quanto si guardi: a queste opacità nessuno la nota, ma il piano smette di sembrare un rettangolo di colore e comincia a sembrare un foglio. È esattamente la differenza fra un catalogo qualunque e uno che uno tiene. DOVE NON VA, e sono decisioni: · sul fondo pagina `--sc-fondo`. Il bianco puro è la richiesta del proprietario ed è il fondo delle fotografie di prodotto: sporcarlo vorrebbe dire far comparire un bordo attorno a ogni foto scontornata. · sopra le fotografie. Mai un filtro, mai una trama: la carta ritratta ha già la sua. · nel carrello e alla cassa. Lì comanda 03-negozio e la sua regola è che la fiducia batte l'estetica; una texture sotto un campo da compilare non aggiunge fiducia. ========================================================================== */ /* La grana sta in un posto solo, § 6c: i riquadri immagine della home. Le tre bande di `--sc-carta` — fascia vantaggi, «previous projects», riquadro Instagram — le avevo texturizzate e poi le ho lasciate lisce: il conto è in § 1, sotto il gettone. Su un piano a due livelli dal bianco una grana o è invisibile o costa contrasto, e nessuna delle due è un miglioramento. Quelle bande guadagnano in altro modo: spazio (§ 5), gerarchia (§ 6b) e cornice (§ 9). */ /* ============================================================================= 3 · L'EROE — la fotografia arriva al bordo ----------------------------------------------------------------------------- 04 costruisce l'eroe: due colonne, testo a sinistra, fotografia a destra dentro un riquadro con l'angolo morbido. È giusto, e non lo rifaccio. Quello che aggiungo è una cosa sola: la fotografia esce dalla spaziatura della sezione e va a toccare il bordo dello schermo. PERCHÉ. Un'immagine che si ferma a 72 px dal bordo è un'illustrazione messa in una pagina. Un'immagine che tocca il bordo è una finestra. Il prodotto qui è una superficie fotografata da vicino: più grande è, più si vede la carta, ed è tutto quello che questa fotografia deve fare. COSTO ZERO: `.sc-eroe` ha già `overflow: hidden`, quindi il margine negativo viene ritagliato dalla sezione e non dal corpo pagina — nessuna barra di scorrimento orizzontale, verificato (§ 8b di 05 non viene disturbato). Solo da 881 px in su: sotto, 04 mette la figura in cima a tutta larghezza e il pareggio dei margini è già suo. ========================================================================== */ @media (min-width: 881px) { .sc-eroe__figura { margin-right: calc(-1 * clamp(20px, 5vw, 72px)); border-radius: var(--sc-r) 0 0 var(--sc-r); /* Una stampa appoggiata sul foglio, non un div colorato: il filo la stacca dal bianco anche dove la foto è chiarissima. */ box-shadow: 0 0 0 1px var(--sc-linea), var(--sc-ombra-2); } } /* ============================================================================= 3b · IL RITAGLIO DELL'EROE (scavalca 04: `scale(2.15)` → invariante) ----------------------------------------------------------------------------- QUESTA È LA CORREZIONE CHE CAMBIA DI PIÙ LA PRIMA IMPRESSIONE DEL SITO, e nasce da una misura, non da un'opinione. IL PROBLEMA. La fotografia dell'eroe ha il titolo «CIAO! we are SCATOLE.COM» STAMPATO DENTRO, sulla destra. 04 lo taglia fuori ingrandendo l'immagine di 2,15 volte e ancorandola a sinistra. Il numero 2,15 è giusto — l'ho ricalcolato — ma è giusto A UNA LARGHEZZA SOLA: quella dello schermo su cui è stato scelto, 2560 px. L'ingrandimento necessario dipende dalle PROPORZIONI del riquadro, e quelle cambiano con la finestra, perché il riquadro è alto quanto la colonna di testo accanto. Misurato dentro un telaio, riquadro e ritaglio a sette larghezze: finestra riquadro porzione di foto visibile con scale(2.15) 1024 px 489 x 570 17 % 1366 px 650 x 592 20 % 1440 px 684 x 592 23 % 1920 px 912 x 526 34 % 2560 px 1216 x 526 47 % ← l'unica giusta A 1440 px — la larghezza da ufficio più comune che ci sia — si vede il 23% della fotografia, cioè un pezzo di spigolo sfocato e irriconoscibile. La prima immagine del sito non mostra una scatola: mostra una diagonale grigia. DOVE COMINCIA LA SCRITTA. Misurata sul file, non stimata: la «C» di CIAO! parte al 51,2% della larghezza dell'immagine. Quindi qualunque ritaglio che resti sotto il 50% è al sicuro, a ogni larghezza. LA CORREZIONE. Via l'ingrandimento, e al suo posto un'invariante geometrica: l'immagine è larga il 215% del riquadro, ancorata a sinistra, e il riquadro la ritaglia (`overflow: hidden`, già suo). Con `object-fit: cover` la porzione visibile diventa min( 100/215 , larghezza / (2,373 x altezza) ) = al più il 46,5% qualunque siano le proporzioni del riquadro. Non è una taratura: è un limite superiore. La scritta non può comparire — né a 1024, né a 1440, né a 2560, né su un ultra-panoramico da 3440, dove invece il 2,15 fisso l'avrebbe scoperta (calcolato: 61%). EFFETTO COLLATERALE, GRATIS: A 1440 px L'IMMAGINE È PIÙ NITIDA. Prima veniva disegnata a 3021 px di larghezza, adesso a 1471. Il file che il sito consegna davvero è largo 662 px (`slider1-828.webp`, misurato in pagina: `naturalWidth` 662): l'ingrandimento passa da 4,6x a 2,2x. Resta comunque un ingrandimento — la vera correzione è consegnare un file più grande, ed è nel resoconto, perché non è CSS. MOVIMENTO: 04 passa da 2,15 a 2,22 al passaggio del mouse (+3,3%). Qui il gesto resta identico — un +3% — ma l'origine è il bordo sinistro, così l'ingrandimento mangia altra foto sulla destra invece di scoprirne: l'invariante regge anche durante l'animazione. ========================================================================== */ /* SECONDO EFFETTO DELL'USCITA DAL FLUSSO, e mi è costato una misura. Il widget HTML che ospita l'eroe è un elemento flessibile in riga con `flex: 0 1 auto`: la sua larghezza è la larghezza MAX-CONTENT del suo contenuto. Finché l'immagine stava nel flusso, quel max-content era la larghezza intrinseca della foto (1896 px) e il widget riempiva la pagina per caso. Tolta l'immagine dal flusso, il max-content è crollato a 1487 px e l'eroe si è ristretto a metà schermo. Non è una regressione della mia regola: è una fragilità che c'era già e che nessuno aveva visto perché il caso la copriva. Gliela tolgo dicendo quello che si voleva davvero, cioè «riempi». */ #main .elementor-widget:has(> .elementor-widget-container > .sc-eroe) { flex: 1 1 100%; } /* L'IMMAGINE ESCE DAL FLUSSO, e non è un dettaglio: è il difetto che questa riga ripara. Con `width: 215%` e `height: 100%` lasciata nel flusso, il browser non ha un'altezza definita a cui riferire il 100% e ripiega sull'altezza intrinseca: 215% di 1216 px diviso 2,373 fa 1101 px, e il riquadro — quindi tutta la prima videata — diventava alto 1160 px invece di 667. Visto a schermo prima di accorgermi del perché. In posizione assoluta l'immagine non può più decidere l'altezza di niente: la decide la colonna di testo accanto, come vuole 04. */ .sc-eroe__figura img { position: absolute; left: 0; top: 0; width: 215%; max-width: none; /* 05 § 8 mette `max-width: 100%` con `:where()`, specificità zero: questa riga è per chiarezza, non per forza */ height: 100%; object-fit: cover; object-position: left center; transform: none; transform-origin: left center; } .sc-eroe:hover .sc-eroe__figura img { transform: scale(1.03); } /* ----------------------------------------------------------------------------- 3c · IL SECONDO BOTTONE DELL'EROE — un difetto di contrasto, non un gusto «Get a free sample pack» è, insieme alla spedizione gratuita, l'argomento più forte che questo negozio abbia: un campionario di carte vere, gratis, a casa. 04 lo disegna come bottone di contorno con il filo `--sc-linea-2`. Misurato su bianco: 1,31:1. La soglia WCAG 1.4.11 per il contorno di un comando è 3:1, quindi quel bottone oggi NON ha un perimetro percepibile — sembra un'etichetta scritta lì. Il filo diventa `--sc-mar-testo` (5,88:1 su bianco): quattro volte e mezzo la soglia, e il petrolio resta l'unico colore. Il testo non lo tocco (`--sc-ink`, 18,9:1) — così il bottone pieno accanto resta il primo, e questo il secondo. -------------------------------------------------------------------------- */ .sc-eroe__cta2 { border-color: var(--sc-mar-testo); } .sc-eroe__cta2:hover { border-color: var(--sc-mar-scuro); color: var(--sc-mar-testo); } /* ============================================================================= 4 · LA RIGA MILLIMETRATA (scavalca 04: `border-top` → riga di misura) ----------------------------------------------------------------------------- Il titolo dell'eroe dice «built to your millimetre» e subito sotto, a dividere le tre prove, c'è un filo grigio come tutti gli altri fili del sito. Quel filo diventa una riga graduata. PERCHÉ QUI E IN NESSUN ALTRO POSTO. La scala è il problema numero uno del packaging in rete e non si risolve con la grafica: si risolve con una foto che abbia accanto una mano o una moneta (vedi il resoconto). Quello che la grafica può fare è DICHIARARE che qui si lavora al millimetro, una volta sola, nel punto in cui la frase lo dice già a parole. Ripeterla sotto ogni scheda sarebbe decorazione, e la decorazione ripetuta smette di significare. NON È UNA MISURA. Le tacche non corrispondono a millimetri veri e non pretendono di farlo: sono il segno di un righello, come la filigrana su un foglio è il segno di una cartiera. È un motivo, e va letto come tale. SCAVALCO DICHIARATO: 04 mette qui `border-top: 1px solid var(--sc-linea)`. Lo spengo e ridisegno il filo dentro lo sfondo, perché il bordo non sa fare le tacche. Il filo resta dov'era, alla stessa altezza e dello stesso peso. ========================================================================== */ .sc-eroe__prove { border-top: 0; /* il filo torna sotto, disegnato */ padding-top: var(--sc-s5); background-image: /* tacca lunga ogni cinque */ repeating-linear-gradient(90deg, var(--sc-quota) 0 1px, rgb(255 255 255 / 0) 1px 45px), /* tacche corte */ repeating-linear-gradient(90deg, var(--sc-quota) 0 1px, rgb(255 255 255 / 0) 1px 9px), /* il filo che c'era prima */ linear-gradient(var(--sc-linea-2), var(--sc-linea-2)); background-repeat: repeat-x, repeat-x, no-repeat; background-size: 100% 9px, 100% 5px, 100% 1px; background-position: 0 0, 0 0, 0 0; } /* ============================================================================= 5 · LA FASCIA DELLA FIDUCIA (scavalca 01 § 8: respiro e disco) ----------------------------------------------------------------------------- «Custom quote · Handmade in Italy · No robots here» sono i tre argomenti che questo negozio ha e che i suoi concorrenti industriali non hanno. Oggi stanno in una striscia alta 85 px fra un eroe di 667 e una griglia di 1620: tipograficamente è una nota a piè di pagina. Non aggiungo parole — il testo generato in CSS non viene tradotto da GTranslate e questo sito parla quattro lingue (è la stessa ragione per cui 03-negozio ha limitato le sue due parole in `::after` a un caso solo). Aggiungo spazio, peso e un piano: l'icona su un disco di carta bianca, tre colonne separate da un filo, e la fascia che diventa un respiro vero fra le due sezioni grandi. CONTRASTO — il disco è BIANCO e non petrolio velato, ed è una decisione presa sul calcolo, non sull'occhio: icona `--sc-mar-vivo` su `--sc-carta` (oggi) 5,63:1 icona `--sc-mar-vivo` su `--sc-mar-velo` (SCARTATO) 5,21:1 ← peggiora icona `--sc-mar-vivo` su `--sc-fondo` (scelto) 5,88:1 ← migliora Le etichette non le tocco: restano `--sc-ink-2` su `--sc-carta`, 9,02:1. ========================================================================== */ body.home #main .elementor-element-383965d { /* da 20 a 40 px per lato: la fascia passa da 85 a ~150 px e comincia a leggersi come una sezione invece che come un margine */ padding-block: var(--sc-s6); } body.home #main .elementor-element-383965d .elementor-icon { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--sc-fondo); /* il filo e l'ombra bassa: un dischetto di carta appoggiato sulla fascia */ box-shadow: 0 0 0 1px var(--sc-linea), var(--sc-ombra-1); } body.home #main .elementor-element-383965d .elementor-icon svg { width: 34px; height: 34px; } /* I tre gruppi erano appesi a sinistra dentro colonne da 520 px: su uno schermo largo diventavano tre grappoli con mezzo metro di vuoto a destra. Centrati, la fascia ha un ritmo. */ body.home #main .elementor-element-383965d .e-con-inner > .e-con { justify-content: center; } /* i due fili verticali fra le tre colonne. `--sc-linea` e non `--sc-linea-2`: qui serve una cucitura, non un bordo. NB il selettore passa per `.e-con-inner` SENZA `>` diretto: fra la fascia e l'inner c'e' un contenitore intermedio (766f39d) che Elementor infila e che non si vede in pagina. Con il figlio diretto la regola non aggancia niente: verificato, zero corrispondenze. */ body.home #main .elementor-element-383965d .e-con-inner > .e-con + .e-con { border-left: 1px solid var(--sc-linea); } /* L'etichetta accanto a un disco di 72 px non puo' restare a 11 px: il gruppo si sbilancia e la parola sembra una didascalia dell'icona invece che l'argomento. Da `--sc-t-mono` a 13 px, colore invariato (`--sc-ink-2` su `--sc-carta`, 9,02:1): il testo cresce, il contrasto no. */ body.home #main .elementor-element-383965d .elementor-heading-title { font-size: 13px; } /* ============================================================================= 6 · LA HOME · "OUR BEST SELLER" ========================================================================== */ /* ----------------------------------------------------------------------------- 6b · IL SEGNO DEL CAPO-SEZIONE Un filetto petrolio corto sotto la riga di servizio. Serve a chiudere il capo-sezione: senza, titolo e sottotitolo galleggiano sopra la griglia e la pagina si legge come un elenco. È il solo segno decorativo di tutto il foglio, e ce n'è uno per sezione. NON sono i crocini d'angolo: 01 § 10 li ha tolti con ragione, appartenevano al tavolo da disegno della direzione scura. Questo è un filetto tipografico, e il suo mestiere è la gerarchia, non l'ambientazione. `content: ""` su selettore chiuso: nessun elemento di passaggio può finirci dentro (trappola di 01 § 1). -------------------------------------------------------------------------- */ body.home #main .elementor-element-d54ad18 .elementor-heading-title::after { content: ""; display: block; width: 56px; height: 2px; margin: var(--sc-s5) auto 0; background-color: var(--sc-mar); /* segno grafico: 3,94:1, soglia 3:1 */ border-radius: 2px; } body.home #main .elementor-element-d54ad18 { margin-bottom: var(--sc-s6); } /* Lo stesso segno sotto «Let yourself be inspired by our previous projects»: se il filetto è il modo in cui questo sito chiude un capo-sezione, deve valere per tutti i capi-sezione. Uno solo sarebbe un ornamento; due sono un linguaggio. */ body.home #main .elementor-element-afa4d66 .elementor-heading-title::after { content: ""; display: block; width: 56px; height: 2px; margin: var(--sc-s5) auto 0; background-color: var(--sc-mar); border-radius: 2px; } /* ----------------------------------------------------------------------------- 6b-bis · LE SCHEDE NON DEVONO TOCCARE IL BORDO DELLO SCHERMO Il contenitore della sezione è largo 1600 px al massimo, ma sotto quella larghezza si prende tutto e non lascia margini: a 1440 px le sei schede partono da x = 0 e finiscono a x = 1425, cioè appiccicate ai due bordi della finestra, mentre il riquadro Instagram poco sotto ne lascia 16 e il piè di pagina 27. Tre margini diversi nella stessa pagina. E non è solo simmetria: la scheda ha un angolo morbido e un'ombra, e sul bordo dello schermo l'una e l'altra vengono tagliate via. Solo dove serve, cioè finché il contenitore è più stretto del suo massimo. -------------------------------------------------------------------------- */ @media (max-width: 1660px) { body.home #main .elementor-element-c817df9 .e-con-inner { padding-inline: clamp(16px, 2.4vw, 36px); } } /* ----------------------------------------------------------------------------- 6c · IL PIANO IMMAGINE (scavalca 01 § 9: fondo piatto → luce di studio) Questa è la modifica più importante del foglio. IL PROBLEMA, detto per bene. Le sei immagini della home non sono fotografie: sono disegni a tratto con le facce bianche, PNG con lo sfondo trasparente. Oggi stanno su un rettangolo `--sc-incasso` piatto. Un rettangolo piatto non ha né alto né basso, quindi il disegno non poggia su niente: galleggia. Ed è il motivo per cui sei scatole diverse si somigliano tutte — non è colpa del disegno, è colpa del piano. LA CORREZIONE, in tre strati, e nessuno tocca il disegno: 1. LUCE. Un fondale a cova: quasi bianco in alto al centro, `--sc-incasso` a metà, `--sc-rilievo` in basso. È come si fotografa il packaging da sempre. Effetto collaterale che è il vero guadagno: le facce BIANCHE della scatola, che prima erano bianco su grigio uniforme, adesso in basso staccano su un fondo più profondo — la scatola si accende. 2. APPOGGIO. Un'ellisse d'ombra bassa e larga sotto il disegno. Non è un `box-shadow`: quello seguirebbe il rettangolo dell'immagine, non la sagoma della scatola. Questa è dentro lo sfondo, quindi passa SOTTO il disegno e si vede solo dove il disegno non copre — che è esattamente come funziona un'ombra portata. 3. FIBRA. La grana a due versi (§ 1). Qui può scurire perché su questo piano non poggia nessun testo. CONTRASTO: nessuno. Su questo piano non c'è testo, e il disegno è a tratto `--sc-ink` scuro: contro `--sc-rilievo` (il punto più profondo del fondale) fa 16,3:1, contro `--sc-fondo` 18,9:1. Prima era uniforme 17,8:1. Nessun valore scende sotto quello di prima in modo apprezzabile e tutti restano AAA con dieci volte il margine. -------------------------------------------------------------------------- */ body.home #main .elementor-element-c817df9 .e-con:has(> .elementor-widget-image) { background-image: var(--sce-fibra-carta), var(--sce-appoggio), var(--sce-luce), var(--sce-piano); background-repeat: repeat, no-repeat, no-repeat, no-repeat; background-size: 180px 180px, 100% 100%, 100% 100%, 100% 100%; /* un filo sotto, dove il piano incontra il corpo della scheda: è il bordo del tavolo. Senza, il fondale scuro in basso sfuma nel bianco del testo e sembra una sbavatura di stampa. */ border-bottom: 1px solid var(--sc-linea); /* Il disegno respira: 01 gli dà `padding-block: var(--sc-s4)` uguale sopra e sotto. Con un fondale, sopra e sotto non sono più la stessa cosa: sotto c'è il piano d'appoggio e vuole aria, altrimenti la scatola sta seduta sul filo. */ padding-block: var(--sc-s5) var(--sc-s6); } /* ----------------------------------------------------------------------------- 6d · IL SOLLEVAMENTO 01 alza la scheda di 3 px e ingrandisce il disegno del 3%. Aggiungo la sola cosa che manca perché il gesto sembri fatto a mano invece che generato: il disegno si alza INSIEME alla scheda e con un tempo diverso, come un oggetto che ha una sua inerzia. Due `transform`, zero ridisegni. -------------------------------------------------------------------------- */ body.home #main .elementor-element-c817df9 .elementor-widget-image img { transition: transform 460ms var(--sc-curva); will-change: auto; /* nessuna promozione permanente */ } body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):hover .elementor-widget-image img { transform: translateY(-4px) scale(1.035); } /* ============================================================================= 7 · IL BOTTONE DI SCHEDA (scavalca 01 § 5: pieno → contorno) ----------------------------------------------------------------------------- SEI BARRE PETROLIO PIENE, una sotto ogni scheda, sulla home e sulla categoria. Tutte uguali, tutte con lo stesso peso della cosa più importante della pagina — che è il prodotto. Quando tutto grida, niente si sente. «Discover more» non è un'azione: è una porta. La porta si segna, non si accende. Il bottone diventa di contorno a riposo e si accende PIENO quando il dito o il cursore sono sulla scheda (`:hover`) o quando la tastiera è dentro la scheda (`:focus-within`): l'affordanza non si perde, si sposta al momento in cui serve. NON È UN LINGUAGGIO NUOVO. 01 § 5 dichiara già `.sc-bottone-vuoto` («seconda scelta, non deve rubare la scena»): riuso quella, cambiando solo il colore del filo da `--sc-linea-2` a petrolio, perché qui il bottone è pur sempre l'uscita della scheda. IL CARRELLO NON SI TOCCA. Sulla categoria un bottone su sei è un vero «Add to cart» (`.ajax_add_to_cart`): quello resta pieno. Un acquisto non è una porta. CONTRASTI — nessuno scende, due salgono: etichetta oggi bianco su --sc-mar-vivo 5,88:1 ora --sc-ink su --sc-carta 18,08:1 ▲ freccia oggi bianco su --sc-mar-vivo 5,88:1 ora --sc-ink su --sc-carta 18,08:1 ▲ perimetro oggi --sc-mar-vivo contro --sc-carta 5,63:1 ora filo --sc-mar-testo (stesso colore) 5,63:1 = acceso bianco su --sc-mar-vivo 5,88:1 = SCARTATO: filo `--sc-mar` (#2F8C98). Più vivo, ma il perimetro sarebbe sceso a 3,77:1. Sopra la soglia 3:1 dei componenti, però sarebbe stato un peggioramento — e la regola di questo foglio è che non se ne fa nessuno. SCARTATO: etichetta petrolio `--sc-mar-testo` su carta, 5,63:1. Bella, ma 0,25 punti sotto quella di oggi. Il petrolio resta nel filo. ========================================================================== */ /* --- home ----------------------------------------------------------------- */ body.home #main .elementor-element-c817df9 .elementor-widget-button .elementor-button { background-color: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-mar-testo); /* solo colore e fondo in transizione: l'anello scatta, e su un anello di un pixel nessuno se ne accorge. Animare `box-shadow` costerebbe un ridisegno per fotogramma (01 § 5 lo dice, ed è giusto). */ transition: background-color var(--sc-veloce) var(--sc-curva), color var(--sc-veloce) var(--sc-curva), transform var(--sc-veloce) var(--sc-curva); } body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):hover .elementor-button, body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):focus-within .elementor-button, body.home #main .elementor-element-c817df9 .elementor-button:hover { background-color: var(--sc-mar-vivo); color: var(--sc-fondo); box-shadow: inset 0 0 0 1px var(--sc-mar-vivo), var(--sc-ombra-1); } /* il bottone sotto il puntatore va comunque un gradino più scuro: è il linguaggio di 01 § 5 e qui non cambia */ body.home #main .elementor-element-c817df9 .elementor-button:hover { background-color: var(--sc-mar-scuro); box-shadow: inset 0 0 0 1px var(--sc-mar-scuro), var(--sc-ombra-1); } /* --- categoria e archivio -------------------------------------------------- */ body.tax-product_cat #main li.product .add-links .button:not(.ajax_add_to_cart), body.post-type-archive-product #main li.product .add-links .button:not(.ajax_add_to_cart) { background-color: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-mar-testo); transition: background-color var(--sc-veloce) var(--sc-curva), color var(--sc-veloce) var(--sc-curva), transform var(--sc-veloce) var(--sc-curva); } body.tax-product_cat #main li.product .product-inner:hover .button:not(.ajax_add_to_cart), body.tax-product_cat #main li.product .product-inner:focus-within .button:not(.ajax_add_to_cart), body.post-type-archive-product #main li.product .product-inner:hover .button:not(.ajax_add_to_cart), body.post-type-archive-product #main li.product .product-inner:focus-within .button:not(.ajax_add_to_cart) { background-color: var(--sc-mar-vivo); color: var(--sc-fondo); box-shadow: inset 0 0 0 1px var(--sc-mar-vivo), var(--sc-ombra-1); } body.tax-product_cat #main li.product .button:not(.ajax_add_to_cart):hover, body.post-type-archive-product #main li.product .button:not(.ajax_add_to_cart):hover { background-color: var(--sc-mar-scuro); color: var(--sc-fondo); box-shadow: inset 0 0 0 1px var(--sc-mar-scuro), var(--sc-ombra-1); } /* ----------------------------------------------------------------------------- 7b · I 42 PIXEL RUBATI AL BOTTONE DALLA "QUICK VIEW" Nella griglia di categoria, accanto al bottone c'è un quadratino di 36 px: è la «Quick View» di Porto, un
vuoto la cui icona compare solo al passaggio del mouse. A riposo non si vede niente, ma il posto se lo prende lo stesso: il bottone della scheda è largo 216 px invece di 258, cioè il 16% in meno, e finisce disallineato rispetto al prezzo e al nome sopra di lui. Non la tolgo — è una funzione, e togliere funzioni non è compito della grafica. La rimetto dove Porto la mette di solito e dove ha senso: sopra la fotografia, in alto a destra, come una pastiglia di carta bianca che compare quando la scheda si accende. Il bottone recupera tutta la larghezza. `position: static` su `.add-links` serve perché è lei, oggi, il blocco di riferimento della pastiglia. Spostandolo su `.product-inner` la pastiglia può salire fino alla foto. Gli unici altri figli in posizione assoluta lì dentro sono gli `.screen-reader-text`, che sono invisibili per definizione: controllato prima di spostare il riferimento. CONTRASTO: l'icona era `--sc-ink-3` sulla carta della scheda (5,25:1); ora è la stessa icona su un dischetto bianco (5,49:1). Sale. -------------------------------------------------------------------------- */ body.tax-product_cat #main li.product .add-links, body.post-type-archive-product #main li.product .add-links { position: static; } body.tax-product_cat #main li.product .add-links .button, body.post-type-archive-product #main li.product .add-links .button { width: 100%; } body.tax-product_cat #main li.product .quickview, body.post-type-archive-product #main li.product .quickview { position: absolute; top: var(--sc-s3); right: var(--sc-s3); width: 40px; height: 40px; margin: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--sc-fondo); box-shadow: 0 0 0 1px var(--sc-linea), var(--sc-ombra-1); z-index: 3; opacity: 0; transition: opacity var(--sc-medio) var(--sc-curva); } body.tax-product_cat #main li.product .product-inner:hover .quickview, body.tax-product_cat #main li.product .product-inner:focus-within .quickview, body.post-type-archive-product #main li.product .product-inner:hover .quickview, body.post-type-archive-product #main li.product .product-inner:focus-within .quickview { opacity: 1; } /* ============================================================================= 8 · CINQUE STELLE VUOTE SOTTO OGNI PRODOTTO (scavalca 01 § 10) ----------------------------------------------------------------------------- Nella griglia di categoria ogni prodotto porta una fila di cinque stelle GRIGIE, cioè una valutazione di zero su cinque. Non è un difetto di stile: è quello che WooCommerce disegna quando nessuno ha ancora recensito. Il markup lo dice per esteso, ``. Cinque stelle spente sono un argomento CONTRO il prodotto: dicono «nessuno», non «non lo sappiamo». E sulla home gli stessi prodotti mostrano cinque stelle petrolio piene, perché lì sono un widget Elementor con il valore scritto a mano: due pagine dello stesso sito che si contraddicono. Qui tolgo la fila vuota — solo quella: la regola aggancia la larghezza zero, quindi il giorno in cui arriva la prima recensione la valutazione ricompare da sola, senza che nessuno tocchi niente. La contraddizione con la home NON è un problema di CSS: le cinque stelle piene sono contenuto e la decisione è del proprietario. È nel resoconto. ========================================================================== */ body.tax-product_cat #main li.product .star-rating:has(> span[style*="width:0%"]), body.post-type-archive-product #main li.product .star-rating:has(> span[style*="width:0%"]) { display: none; } /* ============================================================================= 9 · LE FOTOGRAFIE — il patrimonio che il sito non usa ----------------------------------------------------------------------------- Il riquadro Instagram in fondo alla home è la cosa più convincente di tutto il sito: mani con i guanti, macchine, fustelle, scatole vere. È la prova di «handmade in Italy» e di «no robots here», e sta in coda alla pagina trattata come un widget. Non posso spostarla (è ordine del documento: spostarla in CSS scollerebbe l'ordine di lettura da quello visivo, e chi naviga da tastiera o con uno screen reader ci perderebbe — WCAG 1.3.2). Quello che posso fare è inquadrarla: ogni riquadro diventa una stampa con il suo filo, e al passaggio del mouse si avvicina. ========================================================================== */ body.home #main .elementor-element-df728b3 { padding-block: var(--sc-s6); } body.home #main #sb_instagram .sbi_photo_wrap { box-shadow: 0 0 0 1px var(--sc-linea), var(--sc-ombra-1); } body.home #main #sb_instagram .sbi_photo_wrap img { transition: transform 520ms var(--sc-curva); } body.home #main #sb_instagram .sbi_photo_wrap:hover img { transform: scale(1.05); } /* ============================================================================= 10 · LA SCHEDA PRODOTTO — la galleria diventa una stampa ----------------------------------------------------------------------------- 02 mette la galleria in un riquadro `--sc-incasso` con l'angolo morbido, e la fotografia lo riempie tutto: è una foto opaca, quindi né fondale né grana si vedrebbero mai. L'unica cosa che si può fare da fuori — e vale la pena farla — è darle uno spessore: filo e ombra, come una stampa appoggiata sulla pagina invece di un rettangolo ritagliato dentro. Niente filtri, niente veli: la carta fotografata è il prodotto. ========================================================================== */ body.single-product #main .elementor-widget-image-carousel > .elementor-widget-container { box-shadow: 0 0 0 1px var(--sc-linea), var(--sc-ombra-2); } /* ============================================================================= 11 · ABOUT-US — il paragrafo scentrato ----------------------------------------------------------------------------- DIFETTO VERO, misurato: il titolo «Hey there!» è centrato nella pagina, i tre paragrafi sotto no. Il widget di testo ha `max-width: 746px` (è il 46,6% impostato in Elementor) dentro una colonna di 1600 px che allinea a `normal`: il testo resta appeso a sinistra e il capoverso finisce 393 px più a sinistra del suo titolo. Su uno schermo largo si vede benissimo ed è la prima cosa che si nota della pagina. Una riga. È la correzione col miglior rapporto fra fatica e resa di tutto il foglio, e non c'entra niente con la mia direzione: era rotto. ========================================================================== */ /* Non aggancio la sola sezione col difetto: sulla stessa pagina ce ne sono DUE («Hey there!» e «Unwavering Quality, Unmatched Service.»), stesso errore, stessa causa. La regola vale per tutti i widget di testo di about-us: sono tre in tutto, tutti e tre allineati al centro nel pannello, quindi centrarli nella colonna è quello che l'autore aveva chiesto. Non tocca i titoli, che su questa pagina stanno di proposito a sinistra sopra le fotografie («Great BRANDS deserve great PACKAGING!»). */ body.page-id-1384 #main .e-con-inner > .elementor-widget-text-editor { margin-inline: auto; } /* ============================================================================= 11b · IL PIÈ DI PAGINA — cinque colonne, due ritmi diversi ----------------------------------------------------------------------------- Misurato: nelle colonne MENU, COMPANY e INFO le voci hanno un passo di 36 px; in PAYMENT METHODS e SHIPPING di 61 px. Cinque colonne affiancate con due interlinee diverse: l'occhio non sa dire perché, ma vede che il piè di pagina non è allineato. LA CAUSA, e non è una scelta di nessuno. 01 § 12 scrive `padding-block: var(--sc-s2); min-height: 36px` in un elenco che contiene SIA `.elementor-icon-list-item` SIA `.elementor-icon-list-text` — e il secondo sta dentro il primo. Le colonne costruite col menu di navigazione hanno un livello solo e prendono il riempimento una volta (24+8+8 = 36); quelle costruite con l'elenco puntato ne hanno due e lo prendono due volte (36+8+8 = 56, più 5 di distanza = 61). Tolgo il riempimento al figlio e lo lascio al padre: il bersaglio da toccare resta di 36 px (44 sotto i 1024 px, dove 01 lo alza apposta) e le cinque colonne tornano sullo stesso passo. Nessun colore toccato. ========================================================================== */ #footer .elementor-icon-list-text { padding-block: 0; min-height: 0; } /* Restano 5 px di distacco: è la «distanza fra le voci» impostata nel widget (10 px, che Elementor traduce in `margin-top: 5px` su ogni voce tranne la prima). Le colonne del menu non ce l'hanno. Tolta anche quella, il passo delle cinque colonne è 36 px esatti — misurato, non stimato. */ #footer .elementor-icon-list-item { padding-block: 6px; /* 24 di riga + 12 = 36, come il menu */ } #footer .elementor-icon-list-item + .elementor-icon-list-item { margin-top: 0; } /* ============================================================================= 12 · IL DETTAGLIO FATTO A MANO — micro-interazioni ----------------------------------------------------------------------------- Tre cose piccolissime. Una interfaccia sembra fatta a mano quando risponde al tocco con una fisica plausibile, non quando ha più effetti. ========================================================================== */ /* 12a · LA PRESSIONE. 01 riporta il bottone a `translateY(0)` quando si preme: giusto, ma è solo l'annullamento del sollevamento. Un oggetto premuto CEDE. Mezzo punto percentuale di scala: non si vede, si sente. */ #main .elementor-button:active, #main .button:active, #main button[type="submit"]:active, #main input[type="submit"]:active, .sc-eroe__cta:active, .sc-eroe__cta2:active { transform: translateY(0) scale(.985); } /* 12b · I COLLEGAMENTI NEL TESTO. 01 § 4 li colora dove sono davvero collegamenti in mezzo al testo. La sottolineatura di serie passa attraverso le pance delle lettere: staccarla di tre pixel e assottigliarla è la differenza fra un link di sistema e un link composto. Nessun colore toccato: solo la posizione del filo. */ #main p a:not(.button):not(.elementor-button), #main li a:not(.button):not(.elementor-button):not([class*="elementor"]) { text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color var(--sc-veloce) var(--sc-curva); } /* 12c · LA MESSA A FUOCO SUL BOTTONE DI SCHEDA — regola scritta e poi TOLTA. Il bottone di scheda a riposo è chiaro, ma quando la scheda prende il fuoco si accende pieno petrolio: un anello petrolio su un pieno petrolio non si vedrebbe. Avevo quindi scritto qui un anello a due tinte. Provato con il tabulatore VERO (con `.focus()` da script Chrome non accende `:focus-visible`, e ci si casca): la mia regola non prende, e fa bene. 05 § 3 ha già un anello a due tinte — `--sc-ink` 3 px staccato di 2, più un anello bianco di 2 px che riempie lo stacco — dichiarato `!important` perché il tema Porto scrive `body a { outline: none !important }` su OGNI collegamento del sito. Misurato sul bottone acceso: anello scuro su distanziatore bianco, leggibile sul pieno petrolio come sul bianco. Il lavoro era già fatto, e meglio: una regola in meno. */ /* ============================================================================= 13 · TELEFONO — 390 px ----------------------------------------------------------------------------- Provato dentro un telaio della stessa origine largo 390 px, non con la finestra ridimensionata (su questo browser non si può). ========================================================================== */ @media (max-width: 880px) { /* MISURATO NEL TELAIO A 390 px, e la prima versione di questa regola era sbagliata: davo per scontato che le tre colonne si impilassero e mettevo un filo orizzontale sopra la seconda e la terza. Non si impilano mai — restano tre colonne da 124 px anche a 390 — e quei due fili comparivano in mezzo al nulla. Il filo verticale resta quello giusto a ogni larghezza; quello che deve rimpicciolire è il disco. E l'etichetta torna a `--sc-t-mono`: a 13 px «NO ROBOTS HERE» non sta in 124 px. Il contrasto non cambia (`--sc-ink-2` su `--sc-carta`, 9,02:1), cambia solo il corpo. */ body.home #main .elementor-element-383965d .elementor-icon { width: 46px; height: 46px; } body.home #main .elementor-element-383965d .elementor-icon svg { width: 22px; height: 22px; } body.home #main .elementor-element-383965d .elementor-heading-title { font-size: var(--sc-t-mono); } /* a 390 px le colonne sono da 124 px e le etichette arrivavano a toccare il filo divisorio: otto pixel di respiro per lato */ body.home #main .elementor-element-383965d .e-con-inner > .e-con { padding-inline: var(--sc-s2); } /* La riga millimetrata: a 390 px le tacche ogni 9 px diventano una retinatura. Passo più largo, e la tacca lunga sparisce. */ .sc-eroe__prove { background-image: repeating-linear-gradient(90deg, var(--sc-quota) 0 1px, rgb(255 255 255 / 0) 1px 12px), linear-gradient(var(--sc-linea-2), var(--sc-linea-2)); background-repeat: repeat-x, no-repeat; background-size: 100% 4px, 100% 1px; } /* Il piano immagine: la scheda è larga ~340 px e l'ellisse di appoggio starebbe troppo stretta sotto il disegno. Si allarga e si abbassa. */ body.home #main .elementor-element-c817df9 .e-con:has(> .elementor-widget-image) { background-image: var(--sce-fibra-carta), radial-gradient(52% 6% at 50% 92%, var(--sce-contatto) 0%, var(--sce-contatto0) 74%), var(--sce-luce), var(--sce-piano); padding-block: var(--sc-s4) var(--sc-s5); } /* Sul telefono non esiste il passaggio del mouse: il bottone di scheda resterebbe a contorno per sempre. Va bene — a contorno è leggibile (18,08:1) e il bersaglio resta di 44 px — ma il filo va reso più evidente, perché su uno schermo piccolo un anello di un pixel al 5,63:1 è poco. Due pixel: stesso colore, stesso rapporto, il doppio del segno. */ body.home #main .elementor-element-c817df9 .elementor-widget-button .elementor-button, body.tax-product_cat #main li.product .add-links .button:not(.ajax_add_to_cart), body.post-type-archive-product #main li.product .add-links .button:not(.ajax_add_to_cart) { box-shadow: inset 0 0 0 2px var(--sc-mar-testo); } } /* ============================================================================= 14 · MOVIMENTO RIDOTTO ----------------------------------------------------------------------------- 00-fondamenta azzera durate di animazione e transizione su `*` con `!important`, e basta per tutto quello che ho scritto. Aggiungo l'unica cosa che quella regola non copre: i miei ingrandimenti al passaggio del mouse non sono transizioni, sono STATI. Se qualcuno chiede meno movimento, lo stato non deve nemmeno esistere. ========================================================================== */ @media (prefers-reduced-motion: reduce) { body.home #main .elementor-element-c817df9 .e-con:has(> .e-con > .elementor-widget-image):hover .elementor-widget-image img, body.home #main #sb_instagram .sbi_photo_wrap:hover img { transform: none; } #main .elementor-button:active, #main .button:active, .sc-eroe__cta:active, .sc-eroe__cta2:active { transform: none; } } /* ============================================================================= 15 · COSE CHE HO GUARDATO E NON HO FATTO ----------------------------------------------------------------------------- Le scrivo qui e non solo nel resoconto, con lo stesso criterio di 05 § 9: chi apre questo file fra sei mesi deve sapere che sono state valutate. · SPOSTARE «New to Scatole.com?» DOPO IL RIQUADRO INSTAGRAM. La banda «Let yourself be inspired by our previous projects» promette una galleria e subito sotto c'è un riquadro promozionale; la galleria vera arriva dopo. In CSS si farebbe con `order`, ma l'ordine di lettura resterebbe quello del documento: chi naviga da tastiera salterebbe in un punto diverso da dove guarda. Va spostato in Elementor. Segnalato. · L'OMBRA DI CONTATTO SUI CAMPIONI DI CARTA della scheda prodotto. Sarebbe bellissima — sono fotografie di angoli di carta vera — ma 02 § 7 usa `box-shadow` su quella piastrella per TRE stati (riposo, passaggio, scelto) e per l'anello di selezione. Aggiungere un livello vorrebbe dire ridichiarare tutta la catena, cioè riscrivere il lavoro di un altro foglio da fuori. Il posto giusto è 02. · LA GRIGLIA ASIMMETRICA sulla home (prima scheda a due colonne). Ritmo da rivista, ma sei schede diventano 2+1 / 3 / 1 e l'ultima riga resta spaiata. Con otto prodotti funzionerebbe. · IL PIANO DI STUDIO ANCHE SULLE SCHEDE DI CATEGORIA. Lì la miniatura è una fotografia opaca 300×300 che copre tutto il riquadro: il fondale non si vedrebbe in nessun pixel. Costo senza resa. · LA GRANA SULLE BANDE DI CARTA. Misurata e scartata: vedi § 1. Se un giorno la tavolozza avesse un `--sc-carta` un gradino più scuro — un avorio vero invece di un bianco appena caldo — la grana ci starebbe con margine di contrasto da vendere. È l'unico caso in cui chiederei di toccare 00-fondamenta. · SCURIRE `--sc-mar` PER POTERLO USARE COME TESTO. È il gettone di 00-fondamenta e tutta la gerarchia del petrolio è costruita su quel valore. Non si tocca da qui. ========================================================================== */