/* 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 - il pulsante "Procedi" non finisce dietro la barra ----------------------------------------------------------------------------- Il cassetto laterale del carrello (Modern Cart) e' alto 100vh. Sui telefoni veri pero' la barra degli indirizzi del browser mangia 60-100px di schermo, e 100vh la IGNORA: il fondo del cassetto, con il pulsante "Procedi", finiva dietro la barra e non si poteva premere. Nell'emulatore non si vedeva, perche' li' il viewport e' pulito: il difetto esisteva solo sui dispositivi reali. Due cure insieme: 1. 100dvh: l'unita' DINAMICA, che segue la barra del browser quando appare e scompare (100vh resta come ripiego per i browser piu' vecchi: scritto prima, viene sovrascritto dove dvh esiste); 2. il pannello diventa una colonna flessibile: testata e fondo fissi, lista prodotti che scorre in mezzo. Cosi' il pulsante sta nel visibile QUALUNQUE sia l'altezza reale, anche con dieci articoli in lista. Il padding col safe-area-inset protegge dalla barra gesti degli iPhone. ============================================================================= */ .moderncart-modal.moderncart-cart-style-slideout { height: 100vh; height: 100dvh; } .moderncart-modal .moderncart-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; } .moderncart-modal .moderncart-slide-out-header, .moderncart-modal .moderncart-slide-out-footer { flex: 0 0 auto; } .moderncart-modal .moderncart-slide-out-cart { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .moderncart-modal .moderncart-slide-out-footer { padding-bottom: calc(8px + env(safe-area-inset-bottom)); } /* Il pulsante "Procedi" deve stare INCOLLATO alla riga del Totale: e' li' che l'occhio arriva dopo aver letto il conto. In mezzo pero' c'era la barra della spedizione gratuita, alta piu' di 100px, che lo spingeva contro il bordo dello schermo. Non si toglie: si SPOSTA SOPRA i totali, dove peraltro si legge meglio (prima l'incentivo, poi i conti, poi l'azione). */ .moderncart-modal .moderncart-cart-total { display: flex; flex-direction: column; } .moderncart-modal .moderncart-cart-total .abm-fsl-bar-wrap { order: -1; } /* ----------------------------------------------------------------------------- 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; } }