/* ============================================================================= scatole.com — OFFICINA · 11 · TIPOGRAFIA LEGGIBILE ----------------------------------------------------------------------------- Il proprietario ha detto: «i caratteri e l'interfaccia sono troppo piccoli». Non e' un'opinione. Misurato nel browser, sui nodi davvero disegnati (Chromium sul server, a 2560 / 1440 / 1024 / 390 px): pagina nodi sotto 12 px corpo minimo peso funzionale < 600 home 110 43 10 px 59 categoria 91 41 10 px 66 prodotto 219 135 10 px 154 carrello 52 23 10 px 39 Il censimento per classe dice che non sono difetti sparsi ma UNA decisione ripetuta: quasi tutto cio' che sta sotto i 12 px e' la stessa cosa — monospaziato, maiuscolo, spaziato, peso 400 o 500 — e quasi sempre eredita la misura dallo stesso gettone, `--sc-t-mono`, che vale `clamp(10.5px, .18vw + 10px, 11.5px)` ed e' richiamato in una cinquantina di punti fra i fogli 01, 02, 03, 04, 06, 08 e 09. --------------------------------------------------------------------------- PERCHE' IL VALORE SI CAMBIA QUI E NON IN 00-FONDAMENTA --------------------------------------------------------------------------- La leva giusta e' una sola, ed e' quel gettone. Ma 00-fondamenta e' il pavimento su cui poggia tutto — comprese due pagine che in questo momento vengono rifatte da altri — e cambiarlo alla radice significherebbe far muovere il terreno mentre ci si lavora sopra. Quindi il gettone viene RIDEFINITO, non modificato, e con un ambito dichiarato: `#header`, `#main`, `#footer`. Tre radici, tutto il sito che si vede, e nulla fuori. Il laboratorio della grafica (`.bla`) ha la sua scala e non passa di qui. Il valore esatto da portare in 00-fondamenta sta nel resoconto: quando ci andra', questa riga diventera' ridondante e si potra' cancellare senza che cambi niente. Nessuna regola di questo foglio abbassa qualcosa. --------------------------------------------------------------------------- LE TRE LEVE, E PERCHE' LE PAGINE NON SI ALLUNGANO --------------------------------------------------------------------------- 1. CORPO PIU' GRANDE, SPAZIATURA PIU' PICCOLA. Il maiuscoletto spaziato a .12–.16em era il modo di far sembrare "tipografia" un corpo troppo piccolo. A .05em un'etichetta di dieci lettere si riprende una ventina di pixel: e' quella larghezza a pagare i due punti di corpo in piu'. Le etichette occupano lo stesso posto di prima. La spaziatura compensa il corpo piccolo — dove il corpo piccolo non c'e' piu', serve meno, non di piu'. 2. VIA IL MONOSPAZIATO DALLE ETICHETTE. Misurato con measureText sulle tre famiglie del sito: a parita' di corpo il monospaziato costa il 15% di larghezza in piu' di Lato su una parola breve e il 24% su una frase italiana. E c'e' di peggio: "IBM Plex Mono" non e' MAI stato caricato da questo sito — nessun @font-face, nessun collegamento a un servizio di caratteri — quindi quello che i clienti vedono e' il monospaziato di sistema. Verificato col motore di disegno (CSS.getPlatformFontsForNode): DejaVu Sans Mono su Linux, e sara' Consolas su Windows, SF Mono su Mac. Tre disegni diversi, nessuno dei tre scelto da noi. Resta dove il suo mestiere e' vero: PREZZI e MISURE, che vanno incolonnati e confrontati a colpo d'occhio. 3. PESO INVECE DI CORPO. Una parte del difetto non e' la grandezza ma la sottigliezza: 26 nodi in home a peso 300. Portarli a 600 fa guadagnare leggibilita' senza aggiungere un pixel di altezza, e alza il contrasto percepito invece di abbassarlo. Nessun colore letterale: solo gettoni di 00-fondamenta. ========================================================================== */ :root { /* Gettoni NUOVI, additivi: aggiungo, non ridefinisco. Cosi' nessun altro foglio cambia comportamento senza che qualcuno lo scriva a mano. */ --sc11-et: 13px; /* etichetta di comando, navigazione, cartellino */ --sc11-mini: 12.5px; /* il pavimento: sotto questo non si scende */ --sc11-cifra: 13.5px; /* prezzi e misure: restano monospaziati */ --sc11-ls: .05em; /* spaziatura del maiuscoletto. Era .12–.16em */ } /* ============================================================================= 0 · LA LEVA UNICA ----------------------------------------------------------------------------- Una riga, una cinquantina di posti. Tutto il resto di questo foglio serve a fare in modo che questa riga non allunghi le pagine e non tronchi niente. ========================================================================== */ #header, #main, #footer { --sc-t-mono: var(--sc11-et); } /* ============================================================================= 1 · LA NAVIGAZIONE ----------------------------------------------------------------------------- Nove voci a 11,5 px, peso 500, monospaziate, maiuscole, spaziate .12em. E' la prima cosa che si legge del sito e la si leggeva peggio del resto — il corpo non arrivava nemmeno dal gettone, era scritto a mano nel foglio 01. Lato maiuscolo ha la maiuscola piu' alta delle tre famiglie (0,73 del corpo contro 0,71 di Poppins): a 13 px rende come un monospaziato a 13,4. La specificita' ricalca quella del foglio 01 (1 id + 2 classi); questo foglio arriva dopo, quindi vince senza `!important`. ========================================================================== */ #header .elementor-nav-menu--main .elementor-item { font-family: var(--sc-disp); font-size: var(--sc11-et); font-weight: 700; letter-spacing: var(--sc11-ls); min-height: 44px; /* bersaglio da dito, era 38 */ } #header li.sc-voce-nuova > a.elementor-item { font-family: var(--sc-disp); font-size: var(--sc11-et); font-weight: 800; letter-spacing: var(--sc11-ls); } /* Il menu a tendina e i sottomenu stavano a 14 px peso 300. Il corpo va bene, il peso no: 300 su fondo bianco e' un grigio, non un testo. */ #header .elementor-nav-menu--dropdown .elementor-item, #header .elementor-nav-menu.sm-vertical .elementor-item { font-weight: 600; } /* Il numero sul carrello stava a 10 px: e' l'unica cosa che dice quanti pezzi ci sono dentro, e si leggeva peggio di qualunque altra cosa in pagina. */ #header .elementor-menu-cart__toggle_button .elementor-button-icon-qty { font-family: var(--sc-disp); font-size: var(--sc11-mini); font-weight: 800; } /* ============================================================================= 2 · I PULSANTI ----------------------------------------------------------------------------- Il corpo arriva dal gettone e sale da solo. Qui si sistemano famiglia, peso e spaziatura — cioe' le tre cose che il gettone non governa. ========================================================================== */ #main .elementor-button, #main .button, #main button[type="submit"], #main input[type="submit"], #main .sib-default-btn, #footer .elementor-button, #header .elementor-menu-cart__footer-buttons .elementor-button { font-family: var(--sc-disp); font-weight: 700; letter-spacing: var(--sc11-ls); } #main .elementor-button .elementor-button-text, #footer .elementor-button .elementor-button-text, #header .elementor-button .elementor-button-text { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; } /* Un collegamento in mezzo a una frase NON e' un pulsante e non deve diventarlo: il foglio 01 lo prende nello stesso elenco dei bottoni, e va rimesso al corpo del testo che lo contiene — l'unica misura giusta per una parola dentro un paragrafo. */ #main :is(p, dd, td, figcaption, blockquote) a { font-family: inherit; font-size: inherit; font-weight: 700; letter-spacing: inherit; text-transform: none; } /* ============================================================================= 3 · IL CARTELLINO TECNICO ----------------------------------------------------------------------------- `.sc-etichetta` e i titolini che i fogli 01/02/06/08/09 hanno reso monospaziati: "Starting from", "PERSONAL CARE", "custom quote", le intestazioni di colonna del piede, gli occhielli delle sezioni. Il maiuscoletto RESTA — qui e' un cartellino, non un titolo — ma peso e famiglia lo compensano, e la spaziatura scende da .16em a .05em: e' cio' che rende il cambio gratuito in larghezza. ========================================================================== */ #main .sc-etichetta, #footer .sc-etichetta, #main .sc-pi__occhiello, #footer .sc-dati__nome, #main .blp__occhiello, body.home #main .elementor-element-383965d .elementor-heading-title, body.home #main .elementor-element-5b4c7c8 .elementor-heading-title, body.home #main .elementor-element-d54ad18 .elementor-heading-title, body.single-product #main .elementor-location-single .elementor-element-5943aeb h2.elementor-heading-title, body.tax-product_cat #main .porto_products_filter_form .widget-title, body.post-type-archive-product #main .porto_products_filter_form .widget-title, body.tax-product_cat #main li.product .category-list, body.post-type-archive-product #main li.product .category-list, body.tax-product_cat #main li.product .category-list a, body.post-type-archive-product #main li.product .category-list a { font-family: var(--sc-disp); font-weight: 800; letter-spacing: var(--sc11-ls); } /* Gli occhielli delle schede di categoria in home ("Starting from", "PERSONAL CARE") non hanno una classe: i fogli li raggiungono per identificativo Elementor, e li seguo dove sono. Se un domani quel blocco viene risalvato dall'editor l'identificativo cambia, questa riga smette di avere effetto e resta il corpo del gettone — che e' gia' 13 px. Nessuna pagina si rompe: peggiora di un peso, non di tre punti di corpo. */ body.home #main .elementor-element-c817df9 .elementor-widget-heading .elementor-heading-title { letter-spacing: var(--sc11-ls); } /* Il nome della categoria sopra ogni scheda ("PERSONAL CARE", "FOOD") stava a peso 400: il corpo l'ha gia' alzato il gettone, restava la sottigliezza. */ body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(1) .elementor-heading-title { font-family: var(--sc-disp); font-weight: 800; letter-spacing: var(--sc11-ls); } /* ============================================================================= 4 · LA SCHEDA PRODOTTO — le opzioni che si comprano ----------------------------------------------------------------------------- E' il punto peggiore del sito: 135 nodi su 219 sotto i 12 px, e sono proprio i nomi delle carte, i Pantone e i sovrapprezzi — le tre cose su cui il cliente decide quanto spendere. "Smooth BOUGANVILLE" e "(€2.00)" a 11,5 px peso 500. ========================================================================== */ body.single-product #main .wcpa_wrap .wcpa_image_label, body.single-product #main .wcpa_wrap .wcpa_color_label { font-family: var(--sc-disp); font-weight: 700; letter-spacing: var(--sc11-ls); line-height: 1.25; /* la riga si stringe: il corpo sale, la piastrella resta alta come prima */ } /* Il sovrapprezzo resta monospaziato: e' una cifra, e incolonnata sotto le altre si confronta senza doverla leggere. */ body.single-product #main .wcpa_wrap .wcpa_option_price { font-family: var(--sc-mono); font-size: var(--sc11-mini); font-weight: 700; letter-spacing: 0; } /* La descrizione sotto il campo e' prosa: Poppins, che ha l'altezza della x piu' alta delle tre e a 13 px si legge meglio di qualunque maiuscoletto. */ body.single-product #main .wcpa_wrap .wcpa_desc, body.single-product #main .wcpa_wrap .wcpa_field_desc { font-family: var(--sc-testo); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.4; } /* La tabella dei prezzi a scaglioni: quantita', prezzo pieno, prezzo scontato, mese di consegna. Numeri, quindi monospaziati — ma a peso 400 erano filiformi, e sono i numeri su cui si decide un ordine da mille pezzi. */ body.single-product #main .dd_quantity_table span.dd_regular_price, body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col span:first-child, body.single-product #main .dd_quantity_table thead th.dd_date div.dd_col span:last-child, body.single-product #main .dd_quantity_table .dd_table_title div.dd_col, body.single-product #main .dd_quantity_table thead th.dd_quantity_title div.dd_col { font-weight: 700; letter-spacing: var(--sc11-ls); } /* L'anteprima dal vivo della scatola (000912). */ #main .blp__sugg, #main .blp__nota, #main .blp__vuoto { font-family: var(--sc-testo); font-size: var(--sc11-et); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.4; } #main .blp__comandi button { font-family: var(--sc-disp); font-size: var(--sc11-et); font-weight: 700; letter-spacing: var(--sc11-ls); min-height: 44px; } #main .blp__dati dt { font-family: var(--sc-disp); font-size: var(--sc11-mini); font-weight: 800; letter-spacing: var(--sc11-ls); } #main .blp__dati dd { font-family: var(--sc-mono); font-size: var(--sc11-cifra); font-weight: 700; } /* I titoli delle fisarmoniche ("Project recap", "Your quote"): a 11,5 px peso 500 sembravano una didascalia, e sono l'unico modo per sapere cosa c'e' dentro un blocco chiuso prima di aprirlo. */ body.single-product #main .elementor-location-single .e-n-accordion-item-title-text { font-family: var(--sc-disp); font-size: 14px; font-weight: 800; letter-spacing: var(--sc11-ls); } #main summary.e-n-accordion-item-title { min-height: 44px; } /* ============================================================================= 5 · L'EROE E LE SCHEDE DELLA HOME — qui il difetto e' il peso ----------------------------------------------------------------------------- Corpo gia' giusto, sottigliezza no: peso 300 su fondo bianco. Alzare il corpo qui allungherebbe la home senza guadagno, quindi si alza solo il peso. ========================================================================== */ #main .sc-eroe__eyebrow, #main .sc-prog__somm, #main .sc-prog__invito, #main .sc-camp__cta, #main .elementor-icon-list-text, #main .sbi_bio { font-weight: 600; } /* Le tre prove sotto l'eroe ("minimum order", "handmade in Italy") stavano a 11,5 px peso 300 monospaziate: sotto ogni soglia contemporaneamente. */ #main .sc-eroe__prova { font-family: var(--sc-disp); font-weight: 700; letter-spacing: var(--sc11-ls); } /* ============================================================================= 6 · IL PIEDE ----------------------------------------------------------------------------- L'indirizzo, la partita IVA, il recapito. Sono i dati che qualcuno copia davvero, e sbagliare a copiare una partita IVA costa una fattura. Il corpo arriva dal gettone; qui restano peso e famiglia. ========================================================================== */ #footer .elementor-widget-heading .elementor-heading-title, #footer .elementor-heading-title a { font-family: var(--sc-disp); font-weight: 700; letter-spacing: var(--sc11-ls); } #footer .elementor-icon-list-text { font-weight: 600; } /* ============================================================================= 7 · IL CARRELLO E LA CASSA ----------------------------------------------------------------------------- Poche righe, ma se qui qualcosa non si legge non si compra. Il corpo sale col gettone; le etichette dei campi non ci passavano e vanno dichiarate. ========================================================================== */ /* Le intestazioni della tabella (Product · Price · Quantity · Subtotal), i pulsanti d'azione (Apply coupon, Update cart, Update totals) e i titoli dei totali stavano a peso 500 in maiuscoletto monospaziato. Il corpo lo aveva gia' alzato il gettone; qui resta la sottigliezza, che sulle intestazioni di una tabella di numeri e' la differenza fra leggere una colonna e cercarla. */ body.woocommerce-cart #main table.shop_table th, body.woocommerce-checkout #main table.shop_table th, body.woocommerce-cart #main table.shop_table th > span, body.woocommerce-checkout #main table.shop_table th > span, body.woocommerce-cart #main .card-sub-title, body.woocommerce-checkout #main .card-sub-title, body.woocommerce-cart #main tr.order-total th h4, body.woocommerce-checkout #main tr.order-total th h4, body.woocommerce-cart #main .wc-action-btn, body.woocommerce-checkout #main .wc-action-btn, body.woocommerce-cart #main .woocommerce-shipping-destination, body.woocommerce-checkout #main .woocommerce-shipping-destination { font-family: var(--sc-disp); font-weight: 700; letter-spacing: var(--sc11-ls); } /* Le cifre della riga IVA e dei totali restano monospaziate — sono numeri da incolonnare — ma a peso 400 su una riga alta 13,7 px sparivano. */ body.woocommerce-cart #main tr.tax-rate th, body.woocommerce-checkout #main tr.tax-rate th, body.woocommerce-cart #main .woocommerce-Price-amount, body.woocommerce-checkout #main .woocommerce-Price-amount { font-weight: 600; } /* Le etichette dei campi della cassa. `label` da solo non bastava: il tema le veste con classi proprie (`.porto-control-label`, `.required_field`) e con il rimpiazzo di select2, che disegna una `` al posto della tendina e non eredita niente. Nove campi su undici passavano di li'. */ body.woocommerce-cart #main label, body.woocommerce-checkout #main label, body.woocommerce-account #main label, body.woocommerce-checkout #main .porto-control-label, body.woocommerce-checkout #main .required_field, body.woocommerce-account #main .porto-control-label, body.woocommerce-checkout #main .select2-selection__rendered, body.woocommerce-cart #main .select2-selection__rendered { font-size: var(--sc11-et); font-weight: 600; } /* Le etichette dei campi della cassa hanno gia' un padrone: il foglio 03 le scrive a 15 px peso 500 con una specificita' piu' alta della mia, e per questo il primo giro non le aveva toccate. Ricopio quel selettore — corpo invariato (15 px va benissimo, alzarlo allungherebbe la cassa di undici righe), sale soltanto il peso. E' il caso in cui il difetto non e' la grandezza: e' che a 500 su bianco l'etichetta e' piu' chiara del valore che sta per accoglierla. */ body.woocommerce-checkout #main .form-row > label, body.woocommerce-account #main .form-row > label, body.woocommerce-checkout #main .woocommerce-address-fields label { font-weight: 600; } body.woocommerce-checkout #main .porto-checkbox .porto-control-label, body.woocommerce-checkout #main .porto-radio .porto-control-label, body.woocommerce-cart #main ul#shipping_method .porto-control-label, body.woocommerce-checkout #main ul#shipping_method .porto-control-label { font-weight: 600; } /* I titoli dei blocchi della cassa e del carrello ("Cart totals", "Total", "Billing details") sono `h4` con classi di utilita' del tema. */ body.woocommerce-cart #main h4.card-sub-title, body.woocommerce-checkout #main h4.card-sub-title, body.woocommerce-cart #main tr.order-total th h4.mb-0, body.woocommerce-checkout #main tr.order-total th h4.mb-0 { font-weight: 800; } /* Le righe del carrello: nome dell'opzione scelta e suo prezzo. Sono la ricevuta di quello che si sta comprando — se non si rileggono, l'errore si scopre quando arriva il pacco. */ body.woocommerce-cart #main .wcpa_cart_meta, body.woocommerce-checkout #main .wcpa_cart_meta, body.woocommerce-cart #main .wcpa_cart_price, body.woocommerce-checkout #main .wcpa_cart_price, body.woocommerce-cart #main .price_value, body.woocommerce-checkout #main .price_value { font-weight: 600; } /* I tre pulsanti d'azione del carrello. La regola generica non arrivava: il tema li veste come `button.wc-action-btn`, e un elemento in piu' nel selettore e' esattamente il peso che mancava. */ /* Ricopiati dal foglio 03 CARATTERE PER CARATTERE, e non per pigrizia: lui scrive `.button.wc-action-btn` (due classi) e io avevo scritto `button.wc-action-btn` (un elemento e una classe). Vale 1-4-1 contro 1-3-2: perdevo di una classe, e il pulsante restava a peso 500. E' l'errore che si fa quando si scrive un selettore "che sembra giusto" invece di andare a leggere quello che c'e' gia'. */ body.woocommerce-cart #main .button.wc-action-btn, body.woocommerce-checkout #main .button.wc-action-btn, body.woocommerce-account #main .button.wc-action-btn { font-family: var(--sc-disp); font-weight: 700; letter-spacing: var(--sc11-ls); } /* Stessa storia per le intestazioni della tabella e i titoli dei totali. */ body.woocommerce-cart #main .cart-table thead th span, body.woocommerce-checkout #main .review-order thead th h4, body.woocommerce-cart #main .cart_totals .card-sub-title, body.woocommerce-checkout #main #order_review_heading, body.woocommerce-checkout #main #payment > h4, body.woocommerce-account #main .woocommerce-MyAccount-navigation h5, body.woocommerce-account #main .account-sub-title, body.woocommerce-checkout #main .woocommerce-billing-fields > h3, body.woocommerce-checkout #main .woocommerce-shipping-fields > h3 { font-family: var(--sc-disp); font-weight: 800; letter-spacing: var(--sc11-ls); } body.woocommerce-checkout #main .form-row label .optional, body.woocommerce-account #main .form-row label .optional { font-weight: 600; letter-spacing: var(--sc11-ls); } /* I campi della cassa restano a 16 px per una ragione che non e' estetica: sotto i 16, iOS ingrandisce la pagina da solo quando si tocca il campo, e la cassa parte storta. E' gia' cosi' in 00-fondamenta (--sc-t-campo) e qui si dichiara solo per non lasciarlo all'eredita'. */ body.woocommerce-checkout #main :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) { font-size: var(--sc-t-campo, 16px); } /* ============================================================================= 7bis · I POSTI CHE LA LEVA NON RAGGIUNGE ----------------------------------------------------------------------------- Dopo il primo giro di misure sono rimasti dodici nodi in home e ventisette sulla scheda prodotto. Chiesto al motore quale regola vincesse davvero (CSS.getMatchedStylesForNode, non "leggo i fogli e indovino"), la risposta e' stata la stessa quattro volte su cinque: un corpo scritto A MANO in px da qualche altro foglio, che il gettone non poteva toccare. Qui si scavalcano uno per uno, ricalcando il loro selettore — non uno piu' largo, perche' un selettore piu' largo prende anche i titoli veri e li rimpicciolisce. ========================================================================== */ /* 1. LA STRISCIA IN TESTA (recapito, campionario, FAQ, lingue). Il foglio 04 le da' 11 px con un `:where()` che copre a, p, span e div dentro la striscia della bandierina. Tre voci, ed e' la prima riga della pagina. */ /* La catena di `:not()` non e' ornamentale: il foglio 04 scrive `:not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *)`, che vale 1-6-0. Una regola piu' corta perde, e perde in silenzio — l'avevo scritta corta e a schermo non era cambiato niente. La ricopio identica: il mio foglio arriva dopo e quel pareggio lo vinco per ordine, non per forza. */ #header .e-con.e-parent:has(.gtranslate_wrapper) :where(a, p, span, div):not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { font-size: var(--sc11-et); font-weight: 600; } #header .e-con.e-parent:has(.gtranslate_wrapper) h3.elementor-heading-title > a, #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button-text { font-family: var(--sc-disp); font-weight: 700; letter-spacing: var(--sc11-ls); } /* Il pulsante FAQ della striscia era l'ultimo nodo a 10,5 px di tutto il sito, e per una ragione precisa: la regola del foglio 04 si esclude da sola i discendenti di `.elementor-button`, quindi il corpo gli arrivava dal CSS che Elementor genera per quel widget. Serve una riga sua. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button .elementor-button-text { font-size: var(--sc11-et); } /* 2. IL MENU DEL PIEDE. Sta in `#footer`, non in `#header`: undici voci a peso 300, che su bianco e' un grigio. Il corpo (14 px) va gia' bene. */ #footer .elementor-nav-menu .elementor-item { font-weight: 600; } /* 3. GLI OCCHIELLI "STARTING FROM" DELLE SEI SCHEDE IN HOME. Il foglio 08 li scrive a 10,5 px: e' il corpo piu' piccolo rimasto in tutto il sito, e sta sopra il prezzo — cioe' sopra il numero che si va a cercare. */ body.home #main .elementor-element-c817df9 .e-con > .elementor-widget-heading:nth-child(4) .elementor-heading-title { font-size: var(--sc11-et); font-family: var(--sc-disp); font-weight: 800; letter-spacing: var(--sc11-ls); } /* 4. L'ANTEPRIMA DAL VIVO (000912). Le sue regole arrivano da un blocco