/* Theme Name: PROBAR CLAUDE Theme URI: https://www.attrezzaturabarman.it/ Description: Tema child di Astra per ProBar (attrezzaturabarman.it). Author: Performize Author URI: https://performize.it/ Template: astra Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: probar */ /* Gli stili personalizzati del tema child vanno qui sotto. */ /* ============================================================================= SFONDO DEL SITO - nero pieno ----------------------------------------------------------------------------- Prima qui viveva body-bg-free-img.jpg: un'immagine dimostrativa arrivata col template nel 2018 (1920x1280, cartella uploads), montata con background-attachment: fixed. Perche' e' stata tolta: 1. FLUIDITA'. Uno sfondo "fixed" obbliga il browser a ridipingere il fondo a ogni fotogramma di scorrimento. Misurato dal vivo su questa home: 9 fotogrammi oltre i 32 ms (il peggiore a 72) contro ZERO col fondo piatto. Su un telefono, in una pagina catalogo lunga, si sente. 2. LEGGIBILITA'. Il contrasto si calcola su un fondo uniforme: una trama screziata lo rende imprevedibile, e il fondo scuro un costo di lettura ce l'ha gia'. 3. COERENZA. Le miniature prodotto sono in letterbox bianco: su un campo screziato i loro bordi fanno rumore, sul nero pieno sembrano oggetti appoggiati. La sezione showroom era gia' #0a0a0a: ora tutto il sito parla la stessa lingua. Perche' #0a0a0a e non #000: il nero assoluto con testo bianco produce alone e vibrazione, soprattutto sugli OLED. Il quasi-nero e' gia' il colore dei pannelli del tema, quindi i pannelli possono stare un gradino sopra e leggersi come sollevati. PER TORNARE INDIETRO: basta cancellare questo blocco. L'impostazione originale vive ancora nel Customizer di Astra e torna da sola. ============================================================================= */ body, .ast-separate-container { background-image: none !important; background-color: #0a0a0a !important; background-attachment: scroll !important; } /* ============================================================================= INTESTAZIONE - la navigazione non poggia mai su una fotografia ----------------------------------------------------------------------------- La banda del logo era gia' nera (.ast-above-header); la riga del menu e quella della ricerca erano invece TRASPARENTI, sospese sopra l'immagine della hero. Il contrasto del testo bianco dipendeva quindi da cosa passava sotto, e cambiava da pagina a pagina. Misurato sulla home campionando i pixel sotto ogni voce (soglia di legge: 4,5): Attrezzatura Bar 18,06 - Bicchieri 13,67 - Banconi 15,62 Barista Coffee 1,81 (illeggibile) Libri sui Cocktail 3,23 (insufficiente) Offerte WOW 10,53 Le due voci sopra la camicia bianca del barista sparivano. E sarebbe tornato a succedere a ogni cambio di immagine, su ogni pagina: un difetto che non si puo' tenere sotto controllo. Un menu e' uno strumento di lavoro, non un elemento decorativo: chi entra deve trovare la categoria in un secondo, spesso col telefono in mano dietro al banco. Quindi fondo pieno, contrasto 18 ovunque e per sempre. LA RICERCA RESTA SULLA FOTO, DI PROPOSITO. Il suo campo e' una scatola bianca piena: si legge da sola su qualunque sfondo, non ha bisogno di una barra sotto. Cosi' il blocco nero si ferma al menu, l'immagine respira e si tiene un pezzo dell'effetto immersivo. Fondo pieno solo dove il testo e' nudo: e' li' che serve. PER TORNARE INDIETRO: cancellare questo blocco. ============================================================================= */ .site-header .main-header-bar { background-color: #0a0a0a !important; } /* ============================================================================= INTESTAZIONE - allineare le pagine interne alla home ----------------------------------------------------------------------------- Astra usa DUE loghi: quello "transparent-custom-logo" (home, intestazione sovrapposta all'immagine) e quello normale (tutte le altre pagine). Il secondo usciva a 300px contro i circa 130 della home: oltre a essere sproporzionato, occupava la colonna sinistra della griglia e spingeva la riga della ricerca 15px oltre il bordo destro, creando la barra di scorrimento orizzontale e il riquadro che "usciva male". Misurato: scrollWidth 1455 su viewport 1440 -> con il logo a 190px scende a 1433, niente sbordo. ============================================================================= */ .site-header .custom-logo-link:not(.transparent-custom-logo) img.custom-logo { max-width: 190px !important; width: auto !important; height: auto !important; } .site-header .ast-builder-grid-row-has-sides { max-width: 100% !important; } /* ============================================================================= PAGINE CATEGORIA - la striscia grigia sopra l'immagine ----------------------------------------------------------------------------- Il contenitore del contenuto (.ast-woocommerce-container) ha un fondo #141516, un gradino sopra il nero della pagina, e un padding superiore di 1,5em. L'immagine di intestazione della categoria e' a tutta larghezza e parte SOTTO quel padding: il risultato era una banda grigia di 22px sul telefono e 25px sul desktop, incastrata tra la barra di ricerca e la foto. Non si leggeva come una scelta, si leggeva come un pezzo fuori posto. Si toglie solo il padding, e solo dove c'e' davvero la hero (:has): cosi' la foto tocca l'intestazione e le pagine senza immagine tengono il loro respiro in alto. ============================================================================= */ body.tax-product_cat .ast-woocommerce-container:has(.pb-cat-hero) { padding-top: 0 !important; } /* ============================================================================= BARRA DI RICERCA - larghezza fluida invece di 1000px fissi ----------------------------------------------------------------------------- Il campo di ricerca aveva una larghezza fissa di 1000px impostata nel Customizer. Su uno schermo largo non si nota; sotto i 1250px di finestra quel numero non entra piu' e la pagina sborda: tablet 768 -> campo 1000px, scrollWidth 1022, striscia bianca che esce da entrambi i lati portatile 1090 -> scrollWidth 1252, barra di scorrimento orizzontale Il problema non si risolve con max-width: TUTTA la catena dei contenitori (sezione, elemento, form, label) si dimensiona sul contenuto, quindi il 100% si calcola su un genitore gia' fuori misura ed e' circolare. Servono tre cose insieme: 1. min-width: 0 sui contenitori, altrimenti gli elementi flex e grid si rifiutano di scendere sotto la larghezza del contenuto; 2. la colonna centrale della griglia da "auto" a "minmax(0, 1fr)", cosi' prende lo spazio che avanza invece di reclamare quello del contenuto; 3. width: 100% sul campo e sulla label che lo avvolge. Il telefono resta fuori (media query da 545px in su): sotto quella soglia il campo e' impostato a 260px e sta benissimo dov'e'. Misurato dopo: 375 -> 260px invariato | 768 -> 711px | 1090 -> 803px, scrollWidth da 1252 a 1075 | 1300 -> 968px, scrollWidth 1285. ============================================================================= */ @media (min-width: 545px) { .ast-below-header-bar .site-header-below-section-center, .ast-below-header-bar .site-header-below-section-center > .ast-builder-layout-element, .ast-header-search, .ast-header-search .ast-search-menu-icon, .ast-header-search form.search-form { min-width: 0 !important; max-width: 100% !important; width: 100% !important; } .ast-below-header-bar .ast-builder-grid-row-has-sides { grid-template-columns: auto minmax(0, 1fr) auto !important; } .ast-header-search form.search-form label { display: block !important; width: 100% !important; } .ast-header-search .search-field { width: 100% !important; max-width: 100% !important; } } /* ============================================================================= CARRELLO A SCOMPARSA - UNA riga sola, il resto e' del plugin ----------------------------------------------------------------------------- STORIA (leggere prima di rimettere le mani qui). Quattro versioni di correzioni a questo cassetto sono state RITIRATE il 6 agosto 2026: flex sul pannello, sticky sul pulsante, riordino della barra, sblocco delle altezze con !important. Ognuna rompeva qualcosa di diverso, perche' il plugin (Modern Cart) governa le altezze VIA JAVASCRIPT con stili inline e ricalcoli propri: combatterlo dal CSS produce effetti diversi su ogni telefono. Lo stato voluto e' quello concepito in stage, senza interventi. Resta UNA sola regola: l'altezza in 100dvh, l'unita' che tiene conto della barra degli indirizzi dei browser mobili. Il 100vh originale del plugin la ignorava e il fondo del cassetto finiva dietro la barra. 100vh resta come ripiego per i browser che non conoscono dvh. ============================================================================= */ /* L'altezza vera del cassetto e' governata in css/shop-ui.css (sez. 34), dove sta tutto il progetto delle proporzioni. Qui resta solo il ripiego per i browser molto vecchi, senza unita' dinamiche. */ .moderncart-modal.moderncart-cart-style-slideout { height: 100vh; } /* ----------------------------------------------------------------------------- TABLET - la ricerca non scivola sotto la barra nera Alla larghezza del tablet Astra passa all'intestazione mobile, e la riga della ricerca porta con se' un margine superiore negativo di 20px pensato per il desktop. Il risultato e' che il campo saliva DENTRO la barra del logo, che ha z-index 999 e fondo pieno: si vedeva solo la meta' inferiore del testo "Cerca bar spoon...". Misurato: campo a y=166 con la barra nera opaca fino a y=185. Sul telefono il margine e' -10px e non causa sovrapposizione: lo si lascia. ----------------------------------------------------------------------------- */ @media (min-width: 545px) and (max-width: 921px) { .ast-header-break-point .ast-below-header-bar { margin-top: 0 !important; } } /* ============================================================================= LA SCALA TIPOGRAFICA, E I TRE SCAGLIONI (28 agosto 2026) ----------------------------------------------------------------------------- Chiesto dal committente: microcopy, etichette informative e testi di supporto devono leggersi a colpo d'occhio, con davanti una persona di quarant'anni e passa, su un telefono, spesso dentro un locale poco illuminato. PRIMA DI OGGI NON C'ERA NESSUNA SCALA. I `--pb-*` sparsi nei fogli erano colori, raggi e curve di animazione: le misure del testo si sceglievano una per una, e cosi' in diciannove fogli erano finite **248 dichiarazioni sotto i 14 pixel**, nessuna delle quali dentro una media query da desktop. Erano tutte, tutte, anche sul telefono. IL PAVIMENTO A 14 PIXEL NON VALE PER TUTTO, e la ragione e' che sotto quella soglia ci sono tre cose diverse che si somigliano solo a guardarle in un elenco: 1. IL TESTO CHE SI LEGGE -> 14px Microcopy, righe di rassicurazione, note, testi di supporto. Qui la misura decide se una frase si legge o si salta, e si alza. 2. GLI OCCHIELLI -> 12px Due o tre parole in maiuscolo con la spaziatura aperta, sopra un titolo. A 14 pixel una riga cosi' si allarga finche' non spacca la griglia che la contiene, e per leggere "IL TUO ORDINE" non servono 14 pixel: serve contrasto, e quello si alza lo stesso. 3. LE FORME -> non si toccano Contatori dentro un cerchio, pastiglie dello sconto, il numero del passo, le spunte disegnate con un glifo. Li' il `font-size` non decide quanto si legge, decide **quanto e' grande la forma**: alzarlo non rende leggibile niente, fa scoppiare il cerchio. IL CONTRASTO CONTA PIU' DI UN PIXEL. Misurato sul pannello #0a0a0a, il bianco con alpha si appiattisce sul fondo e diventa un grigio calcolabile: 0.42 4.06:1 sotto anche AA <- dov'era l'occhiello 0.55 6.28:1 AA, non AAA <- dov'era --pb-muted 0.62 7.76:1 AAA <- dove stanno adesso 0.62 e' la piu' bassa che passa i 7:1 su tutti e due i fondi del sito, cioe' il grigio piu' discreto che si legge lo stesso. Ed era gia' il valore di `.pb-gate__text`, la scheda che il committente ha indicato come metro: il resto del sito lo ha raggiunto, non il contrario. RESTANO PIU' CHIARI DI COSI' due casi, ed e' voluto: i segnaposto dei campi e gli stati spenti. Un segnaposto ad AAA fa sembrare il campo gia' compilato, e un pulsante disabilitato che si legge come uno acceso e' un difetto nuovo, non un rimedio. COME SI USA DA QUI IN AVANTI. Una sezione informativa nuova non sceglie piu' una misura a mano: prende `--pb-t-testo` per il corpo e `--pb-t-occhiello` per l'eventuale sopratitolo, e il pavimento e' rispettato da solo. ============================================================================= */ :root { /* I tre scaglioni. */ --pb-t-testo: 14px; /* microcopy, note, rassicurazioni: il pavimento */ --pb-t-occhiello: 12px; /* maiuscolo con tracking, due o tre parole */ /* La scala sopra il pavimento, quella che c'era gia' nei fogli e che qui prende finalmente un nome. */ --pb-t-corpo: 16px; /* il testo lungo */ --pb-t-guida: 15px; /* voci di elenco, celle, riepiloghi */ --pb-t-titolo: 19px; /* titolo di scheda, in Playfair */ /* Le interlinee: sotto 1.5 il microcopy si impasta. */ --pb-i-testo: 1.7; --pb-i-corpo: 1.75; --pb-i-stretta: 1.45; /* solo per titoli e occhielli */ /* Il grigio che si legge. Vale come riferimento per i fogli che non dichiarano un `--pb-muted` proprio. */ --pb-t-grigio: rgba(255, 255, 255, 0.62); } /* ============================================================================= LE IMMAGINI DENTRO LE TENDINE: UNA VESTE SOLA (28 agosto 2026) ----------------------------------------------------------------------------- Fino a oggi la stessa tendina poteva contenere due immagini scritte in due modi diversi: quelle delle guide di categoria con lo stile a mano dentro il tag (`style="max-width:420px;width:100%"`), quelle degli schemi prodotto con una classe. Le prime senza raggio di curvatura, le seconde con. La classe `pb-visual` la mette `inc/abm-visual-fisarmonica.php`, che passa su ogni immagine dentro ogni tendina del sito. Qui si vestono. TRE COSE E BASTA, e la brevita' e' voluta: max-width e height perche' un'immagine larga 1000 dentro un telefono da 375 non deve spingere fuori la pagina. `height: auto` insieme a `max-width` e' quello che tiene le proporzioni quando la larghezza cede. border-radius gli stessi 10px di `.abm-schema img`, che era l'unico posto dove il raggio c'era gia'. nessun `display` ed e' la riga piu' importante di questo commento. PERCHE' NESSUN `display`. Gli schemi vivono in coppia, uno largo e uno verticale, e il CSS ne nasconde uno con `.abm-schema img.abm-schema-mobile { display: none }`. Quella regola vale (0,2,1). Se qui dichiarassimo un `display: block` sulla sola classe varrebbe (0,1,0) e perderebbe, quindi andrebbe tutto bene... finche' qualcuno non la rafforza. E' successo davvero ad agosto, ed e' costato 206 schede con tutte e due le figure in pagina, la larga e la verticale alta 2600. Il modo di non ripetere quell'errore e' non avere niente da far vincere: qui il `display` non si nomina. Lo stile scritto a mano dentro il tag non si tocca: sta nel database, dentro il copy del committente. Un `max-width: 420px` dichiarato li' continua a valere, perche' inline batte la classe, ed e' giusto cosi': quella misura l'ha scelta lui per quella immagine. ============================================================================= */ .pb-fisarmonica__corpo .pb-visual, .abm-cat-guide__body .pb-visual { max-width: 100%; height: auto; border-radius: 10px; } /* ============================================================================= IL PAVIMENTO, SECONDA PASSATA: DOVE NON AVEVA PRESO (28 agosto 2026) ----------------------------------------------------------------------------- La prima passata ha alzato 186 dichiarazioni scritte in pixel. Poi ho misurato le pagine vere a 375, e sette cose erano ancora sotto la soglia. Non perche' la passata avesse sbagliato: perche' cercava la cosa sbagliata. DUE MODI DI RESTARE PICCOLI CHE UNA RICERCA NEI FILE NON VEDE: 1. LE MISURE RELATIVE. `font-size: 0.72rem` e `0.85em` non contengono la parola "px" e non finivano nemmeno nell'elenco. Nel tema ce ne sono **250**, e un `em` non si puo' nemmeno giudicare leggendolo: dipende dal genitore, quindi il suo valore vero esiste solo a pagina disegnata. 2. LA CASCATA. Una dichiarazione alzata puo' perdere lo stesso, se un'altra regola piu' specifica la scavalca. `.single-product .product_meta` era gia' a 14px e in pagina si misurava 13,1. PERCIO' QUESTA SECONDA PASSATA NON NASCE DA UNA RICERCA NEI FILE, NASCE DA UNA MISURA. Una sonda percorre gli elementi che portano testo proprio, visibili, e chiede al browser il `font-size` che ha deciso davvero. Quello che resta sotto i 14 e' un difetto vero, chiunque lo abbia causato. GLI `!important` QUI NON SONO UN VEZZO: la riga "IVA incl." e' dichiarata con `!important` dalla regola che la teneva a 0,72rem, e una regola senza perderebbe in silenzio. Dove la regola avversaria non ne aveva, qui non c'e'. ============================================================================= */ /* 2. La categoria sulle schede prodotto della griglia. Nei caroselli e nei correlati era gia' a 14px; nella griglia principale nessuno la dichiarava, e restava quella di Astra. */ .astra-shop-summary-wrap .ast-woo-product-category { font-size: 14px; } /* 3. I metadati sotto la scheda prodotto (codice, categoria). Dichiarati a 14px in `single-product.css` e misurati a 13,1: qui la specificita' e' quella che serve per vincere. */ .single-product .abm-product-meta, .single-product .abm-product-meta .sku_wrapper, .single-product .abm-product-meta .sku, .single-product .abm-product-meta .posted_in, .single-product .abm-product-meta .posted_in a { font-size: 14px; } /* 4. La didascalia sotto gli schemi. Era `0.85em`, che dentro un corpo a 14,6 faceva 12,4: e' la riga che spiega il disegno, ed e' la piu' letta di tutte perche' arriva quando si sta gia' guardando. */ .abm-schema figcaption { font-size: 14px; } /* 6. Consenso privacy e riquadro newsletter. Vengono dal costruttore di pagine, non da un nostro foglio, quindi non c'era niente da alzare alla fonte: e' testo di supporto e sta sotto la stessa regola degli altri. */ body .probar-privacy-label, body .probar-privacy-testo, body .probar-newsletter-testo { /* Queste tre vengono dal costruttore di pagine e la regola che le tiene piccole non sta in un file nostro: qui l'!important e' l'unico modo di vincere una gara con un avversario che non si puo' correggere alla fonte. */ font-size: 14px !important; } /* ============================================================================= DA SAPERE PRIMA DI SCRIVERE UN "rem" IN QUESTO TEMA ----------------------------------------------------------------------------- La radice non e' a 16 pixel. Misurata dal vivo il 28 agosto 2026 vale **14,592px**, e quindi "0.875rem", che su un sito qualunque fa esattamente 14 pixel, qui ne fa 12,77. Non e' una curiosita': e' successo dentro questa stessa passata. La prima stesura scriveva "0.875rem" convinta di mettere il pavimento a 14, e in pagina la riga "IVA incl." misurava 12,8. La regola era giusta, l'unita' no. PER UNA SOGLIA SI USANO I PIXEL. Il "rem" serve dove si vuole una proporzione che segue il resto; dove si vuole un minimo che non deve cedere, il pixel e' l'unica unita' che dice quello che sembra dire. ============================================================================= */