/* ============================================================================= scatole.com — OFFICINA · 13 · LA STRISCIA IN TESTA ----------------------------------------------------------------------------- AMBITO: la sola fascia sottile sopra il logo (campione gratuito, lingue, recapito, FAQ). NON tocca la barra di navigazione sotto, che e' di 000941-scatole-menu-sei-sezioni.php ed e' viva. ----------------------------------------------------------------------------- COM'ERA — quattro misure prese dal vivo, non a occhio (Chromium headless + DevTools Protocol, viewport 1440x900, home) · il richiamo al campione partiva da x = 0 il logo, nella fascia subito sotto, parte da x = 50 -> la prima riga del sito era l'unica fuori dalla gabbia di tutte le altre. Sessanta pixel di disallineamento che si vedono anche senza misurarli, perche' il pallino tocca il bordo dello schermo. · il selettore di lingua stava a x = 628…813, centro 720 = meta' esatta del viewport. Non era allineato a niente: ne' alla gabbia, ne' al logo, ne' al menu (che e' centrato sul suo contenitore, non sul viewport). Tre elementi a destra, uno al centro, uno a sinistra: nessun gruppo. · le distanze fra le voci: 194 px fra lingue e recapito, 41 px fra recapito e FAQ, 0 px fra il bordo e il campione. Tre vuoti diversi senza una ragione: il flex distribuiva quello che avanzava. · i corpi del testo: 13 px il campione, 13 px il recapito, 10,5 px le sigle di lingua, 10,5 px il pulsante FAQ. Due misure diverse nella stessa riga alta 42 px — e la piu' piccola era quella dentro l'unico blocco pieno, cioe' la piu' gridata. E poi il peso. Il pulsante FAQ era una pastiglia piena #1A555E con un'ombra colorata: il rettangolo piu' scuro di tutta la pagina stava nella riga di servizio. Sotto, negli Studio e in home, il pieno petrolio e' riservato allo STATO ATTIVO (la scheda su cui sei, la vista scelta): usarlo per un collegamento all'assistenza prometteva un'importanza che non c'e'. Stessa cosa per il selettore di lingua: pastiglia grigia incassata, bordo, pastiglia interna piena con ombra petrolio. Due comandi vestiti da protagonisti in una riga che deve sparire. ----------------------------------------------------------------------------- COSA FA QUESTO FOGLIO, IN QUATTRO MOSSE 1. UNA GABBIA SOLA. La striscia rientra di 50 px come il logo. Il numero non e' scelto: e' misurato. Su telefono rientra di 20 px, che e' dove parte il logo mobile — e li' e' anche un gettone, `--sc-s4`. 2. DUE GRUPPI, NON QUATTRO VOCI. A sinistra l'offerta; a destra il servizio (lingua · recapito · FAQ). Il vuoto elastico sta tutto in mezzo ai due gruppi; dentro il gruppo di destra le distanze sono fisse e piu' strette. Cosi' la spaziatura dice a cosa appartiene ogni cosa. 3. UN REGISTRO SOLO. Tutto a `--sc11-et` (13 px), maiuscoletto monospaziato con la spaziatura di casa `--sc11-ls` (.05em, non .1em), peso 500. L'unica eccezione e' l'indirizzo di posta, che resta minuscolo perche' un indirizzo si scrive come si scrive. 4. UN ACCENTO SOLO. Il petrolio resta due volte, e sempre come segnale: il pallino dell'offerta e la lingua in cui stai leggendo. Nessun blocco pieno, nessuna ombra: il FAQ diventa una pastiglia di contorno, come i riquadri non attivi degli Studio. ----------------------------------------------------------------------------- PERCHE' NON RISCRIVO 04-rifiniture.css Perche' 000941 (il menu) neutralizza alcune sue regole e riscriverlo significa rompere il menu. Questo foglio arriva DOPO 04, 05 e 11 e vince la cascata per ordine. Non c'e' un `!important` in tutto il file. COME SI VINCE, RIGA PER RIGA Le tre regole da scavalcare hanno specificita' alta perche' sono scritte con catene di `:not()`: 04 § C `#header .e-con.e-parent:has(.gtranslate_wrapper) :where(a,p,span,div):not(.glink):not(.glink *) :not(.elementor-button):not(.elementor-button *)` = 1-7-0 11 § 1 la stessa catena, ricopiata li' per lo stesso motivo = 1-7-0 05 § 2b `#header .gtranslate_wrapper a.glink.gt-current-lang` = 1-4-1 Dove serve, le ricopio IDENTICHE: pareggio la specificita' e vinco per posizione. Una regola piu' corta perderebbe, e perderebbe in silenzio. ----------------------------------------------------------------------------- IL SELETTORE DI LINGUA E' DI GTRANSLATE: SI VESTE DA FUORI GTranslate ricostruisce il proprio pezzo di DOM a runtime (e su questo sito ha gia' rotto prezzi, ragione sociale e frasi con
quando qualcuno gli e' entrato dentro). Qui non c'e' una sola riga che sposti, avvolga o ristrutturi i suoi nodi: solo colore, corpo e spaziatura su `.gtranslate_wrapper` e su `a.glink`, che sono le classi che GTranslate stesso rigenera ogni volta. Il contenitore che sposto (`margin-inline-start: auto`) e' il contenitore ELEMENTOR che gli sta intorno, non il suo. CONTRASTO — misurato, non stimato La lingua attiva perde la pastiglia piena e diventa testo petrolio: --sc-mar-vivo #226E78 su bianco = 5,88:1 (AA per qualunque corpo) era bianco su #226E78, cioe' lo stesso rapporto rovesciato: nessuna perdita. Le altre tre passano da --sc-ink-3 su --sc-incasso (5,07:1) a --sc-ink-3 su bianco (6,0:1): migliorano. Il testo del FAQ passa da bianco su #1A555E (7,4:1) a --sc-ink-2 #3F4750 su bianco (9,6:1): migliora anche lui. ----------------------------------------------------------------------------- LA CACHE MENTE Dopo ogni modifica, dalla radice del sito: rm -rf wp-content/cache/min/* wp-content/cache/wp-rocket/* sudo -u scatole php8.3 -r 'require "wp-load.php"; wp_cache_flush(); if (function_exists("rocket_clean_domain")) rocket_clean_domain();' C'e' anche `opcache.revalidate_freq = 2`: fra il salvataggio del PHP e la pagina nuova passano un paio di secondi. ========================================================================== */ /* ============================================================================= 1 · IL PIANO ----------------------------------------------------------------------------- Fondo bianco come la pagina, non `--sc-pannello`: la striscia smette di essere una fascia colorata e diventa una riga di testo appoggiata al foglio. Sotto resta un filo `--sc-linea`, che basta a dire dove finisce. `--sc-barra-h` e' il gettone locale che 04 ha gia' dichiarato e che le sue regole usano su `.e-con-inner` e sui figli: ridefinendolo qui scende tutta la barra insieme, senza ripetere `min-height` tre volte. 36 px = --sc-s5 (28) + --sc-s2 (8). Con un corpo di 13 px lascia 11 px di respiro sopra e sotto, che e' quanto ne lascia una riga di menu del sito. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) { /* La gabbia. NON e' un numero inventato: e' la posizione misurata del logo nella fascia sottostante (x = 50 a 1440, 1200, 1024 e 768 px di viewport — e' fissa). Il pulsante FAQ ci finiva gia' sopra per conto suo, grazie a un margine destro di 50 px scritto da Elementor: quel margine adesso e' superfluo e viene azzerato piu' sotto, se no il rientro raddoppierebbe. */ --sctb-gabbia: 50px; --sc-barra-h: calc(var(--sc-s5) + var(--sc-s2)); /* 36px */ background: var(--sc-fondo); border-bottom: 1px solid var(--sc-linea); min-height: var(--sc-barra-h); } /* Il filo di luce petrolio che 04 disegnava sotto la striscia: era il modo di dare spessore a una fascia grigia. Su fondo bianco diventa una seconda riga colorata sotto la prima, cioe' esattamente il peso che qui si sta togliendo. Non cancello la regola di 04 (non e' mia): la spengo. */ #header .e-con.e-parent:has(.gtranslate_wrapper)::after { background: none; } /* ============================================================================= 2 · LA GRIGLIA — due gruppi, una gabbia ----------------------------------------------------------------------------- `> .e-child` e non `.e-child`: il contenitore esterno (`e-con-boxed`) CONTIENE a sua volta il selettore di lingua, quindi un `:has()` non ancorato al figlio diretto colpirebbe anche lui e il margine automatico finirebbe sul contenitore sbagliato. Preso una volta, non due. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) .e-con-inner { display: flex; align-items: center; align-content: center; justify-content: flex-end; /* vedi la nota sul margine, sotto */ gap: var(--sc-s5); /* 28px: la distanza FRA i gruppi */ padding-inline: var(--sctb-gabbia); /* IL CAPO A RIGA NUOVA E' UNA VALVOLA DI SICUREZZA, NON UN DISEGNO. In inglese la striscia sta in una riga sola a qualunque larghezza. Nelle altre tre lingue no: GTranslate allunga le stringhe, e "FAQ - HELP CENTRE" in spagnolo diventa "Preguntas frecuentes - Centro de ayuda", cioe' piu' del doppio. A 768 px la somma delle quattro voci arriva a circa 1070 px contro 668 disponibili: non c'e' spaziatura che la faccia entrare. Senza `wrap` i blocchi si sovrappongono — ed e' quello che faceva la striscia di prima: fotografata a 768 px in spagnolo, il pulsante FAQ copriva meta' dell'indirizzo di posta e il suo testo andava su tre righe dentro una fascia alta 42. Con `wrap` il gruppo di destra scende sotto, ordinato, e non copre niente. */ flex-wrap: wrap; row-gap: var(--sc-s1); } /* Quando la striscia va a capo, la fascia non puo' restare alta 36 px fissi: `min-height` non e' `height`, quindi cresce da sola. Lo scrivo perche' e' il motivo per cui in § 1 c'e' `min-height` e non `height`. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .e-con-inner, #header .e-con.e-parent:has(.gtranslate_wrapper) .e-child { height: auto; } /* Ogni voce resta su una riga sua: a capo va il BLOCCO, mai la frase. Senza questo, l'italiano e lo spagnolo spezzavano "Richiedi qui il tuo campione gratuito" in due righe dentro una fascia alta 36. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-widget-heading, #header .e-con.e-parent:has(.gtranslate_wrapper) h3.elementor-heading-title, #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button { white-space: nowrap; } /* Nessuno dei tre blocchi si allarga da solo: la larghezza la decide il contenuto, il vuoto sta tutto nel margine automatico qui sotto. `width: auto` NON e' pleonastico, e mi e' costato un giro di misure. Elementor scrive `.e-con { width: var(--width) }` e su questi tre contenitori `--width` vale 100%. Con `flex-basis: auto` la base diventa quella larghezza dichiarata, cioe' 1340 px ciascuno: al primo colpo i tre blocchi si sono messi in fila per 4020 px e lingue, recapito e FAQ sono finiti fuori dallo schermo (misurati a x = 2018, 3749 e 3934 su un viewport di 1440). Prima non succedeva perche' nessuno aveva ancora detto a questi figli di non restringersi. `flex-shrink: 1` resta acceso per lo stesso motivo: se un domani una traduzione allunga le stringhe, la riga si stringe invece di traboccare. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .e-con-inner > .e-child { flex: 0 1 auto; width: auto; max-width: 100%; /* `min-width: max-content` — l'altra meta' della valvola. Per difetto un elemento flessibile puo' restringersi fino alla PAROLA piu' lunga che contiene: il contenitore si stringe, ma i widget Elementor che ha dentro hanno una larghezza in pixel calcolata e traboccano fuori. E' cosi' che nascevano le sovrapposizioni. Dicendogli che sotto il proprio contenuto non si scende, l'unica uscita che resta e' andare a capo. */ min-width: max-content; /* 04 § C da' a ogni `.e-child` l'altezza piena della barra. Va bene finche' le voci stanno in fila: appena vanno a capo, due righe da 36 fanno una fascia da 77 px, cioe' il doppio di quella che si sta cercando di far sparire. Ai blocchi basta l'altezza del loro contenuto (28 = --sc-s5): su una riga sola restano centrati nella barra e non cambia niente, su due righe la fascia si ferma a 61. */ min-height: var(--sc-s5); } /* Il vuoto elastico, in un punto solo: dopo il campione. Da li' in poi comincia il gruppo del servizio, che resta impacchettato a destra. PERCHE' IL MARGINE STA SUL PRIMO BLOCCO E NON SUL SECONDO. La prima stesura metteva `margin-inline-start: auto` sul blocco delle lingue: in una riga sola il risultato e' identico, ma i margini automatici valgono PER RIGA, e appena la striscia va a capo (spagnolo su tablet) la seconda riga si ritrovava senza margine e il recapito tornava ad accostarsi a sinistra, sotto le lingue allineate a destra. Fotografato a 768 px: due righe, due allineamenti diversi. Spingendo invece il campione con `margin-inline-end: auto` dentro un contenitore `justify-content: flex-end`, il gruppo del servizio sta a destra su qualunque riga finisca. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .e-con-inner > .e-child:has(a[href*="sample"]) { margin-inline-end: auto; } /* Dentro il gruppo di destra le voci stanno vicine (14px): appartengono alla stessa famiglia. Elementor scrive qui un `gap: 20px` con specificita' 0-1-0. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .e-con-inner > .e-child:has(a[href^="mailto"]) { gap: var(--sc-s3); } /* Il margine destro di 50 px che Elementor mette al widget del pulsante: serviva a tenerlo staccato dal bordo quando la gabbia non c'era. Adesso la gabbia c'e', e questo margine la raddoppierebbe. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-widget-button > .elementor-widget-container { margin: 0; } /* ============================================================================= 3 · IL REGISTRO TIPOGRAFICO — uno solo ----------------------------------------------------------------------------- La catena di `:not()` e' ricopiata parola per parola da 04 § C (e da 11 § 1, che l'aveva gia' ricopiata per la stessa ragione): vale 1-7-0, e una regola piu' corta non la batte. Il corpo resta quello che 11 ha deciso per le etichette (`--sc11-et`, 13 px): li' non si torna indietro, era una scelta di leggibilita'. Quello che cambia e' il PESO (600 -> 500) e la SPAZIATURA (.1em -> `--sc11-ls`, cioe' .05em, la stessa di tutte le altre etichette del sito). L'occhiello smette di essere un'incisione e torna una riga di servizio. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) :where(a, p, span, div):not(.glink):not(.glink *):not(.elementor-button):not(.elementor-button *) { font-family: var(--sc-mono); font-size: var(--sc11-et); font-weight: 500; letter-spacing: var(--sc11-ls); color: var(--sc-ink-3); } /* 11 § 1 rimette `--sc-disp` a peso 700 sui due titoli e sul testo del pulsante: quel selettore vale 1-3-2 e perderebbe comunque contro quello sopra, ma lo dichiaro esplicito perche' si legga che e' voluto. */ #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-mono); font-weight: 500; letter-spacing: var(--sc11-ls); } /* ============================================================================= 4 · IL RICHIAMO AL CAMPIONE ----------------------------------------------------------------------------- Il collegamento resta quello che era, a /sample-pack, e il testo resta quello scritto nel database ("get your free sample here"): il pacco e' gratuito, spedizione inclusa, e la frase lo dice gia'. Qui cambia solo la voce: il pallino petrolio si stringe e il maiuscoletto si calma. La freccia che scorre al passaggio del mouse e' di 04 e resta: e' l'unico movimento della striscia, e succede solo se la punti. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"] { color: var(--sc-ink-2); gap: var(--sc-s2); } /* L'`uppercase` non arriva da un foglio Officina: e' EREDITATO dall'`h3` che avvolge il collegamento (verificato risalendo gli antenati dal vivo: `A` e `H3` uppercase, `.elementor-widget-container` gia' `none`). Lo tengo — il maiuscoletto e' il linguaggio delle etichette di questo sito, si vede negli Studio ("START FROM", "OUTER PAPER") — ma senza la spaziatura da insegna. */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href*="sample"]::before { width: 5px; height: 5px; } /* ============================================================================= 5 · IL SELETTORE DI LINGUA — vestito da fuori ----------------------------------------------------------------------------- Via il guscio: niente fondo incassato, niente bordo, niente pastiglia piena, niente ombra colorata. Restano quattro sigle e il colore a dire quale e' quella in cui stai leggendo. NON si tocca un nodo: GTranslate ricostruisce questo pezzo di DOM ogni volta che cambi lingua, e le uniche cose su cui si puo' contare sono le sue classi (`.gtranslate_wrapper`, `a.glink`, `.gt-current-lang`). Sono esattamente quelle usate qui. L'area sensibile di 44x44 px che 05 § 5 aggiunge con un `::after` invisibile resta intatta: le sigle sono piccole ma il dito prende lo stesso. ========================================================================== */ #header .gtranslate_wrapper { gap: var(--sc-s3); padding: 0; border: 0; background: none; } #header .gtranslate_wrapper a.glink { min-width: 0; min-height: 0; padding: 0; font-size: var(--sc11-et); font-weight: 500; letter-spacing: var(--sc11-ls); border-radius: 0; color: var(--sc-ink-3); /* su bianco: 6,0:1 */ } #header .gtranslate_wrapper a.glink:hover { color: var(--sc-mar-testo); background: none; transform: none; /* 04 lo sollevava di 1px: qui niente si muove, e' una riga di servizio, non un comando */ } /* La lingua corrente. Ricopio la specificita' di 05 § 2b (1-4-1), che aveva messo il fondo pieno proprio per una ragione di contrasto: quella ragione qui e' soddisfatta al contrario — #226E78 su bianco fa 5,88:1, esattamente il rapporto di prima rovesciato. */ #header .gtranslate_wrapper a.glink.gt-current-lang, #header .gtranslate_wrapper a.glink.gt-current-lang:hover { background: none; background-color: transparent; box-shadow: none; color: var(--sc-mar-vivo); font-weight: 700; } /* ============================================================================= 6 · L'INDIRIZZO DI POSTA ----------------------------------------------------------------------------- Resta minuscolo (e' un indirizzo) e resta cliccabile. La busta si stringe di un pixel per stare in riga con il corpo nuovo; la sottolineatura che cresce da sinistra e' di 04 e resta, con il suo aggancio spostato dietro l'icona piu' piccola. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) a[href^="mailto"] { gap: var(--sc-s2); } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href^="mailto"]::before { width: 12px; height: 12px; opacity: .6; } #header .e-con.e-parent:has(.gtranslate_wrapper) a[href^="mailto"]::after { left: 20px; } /* ============================================================================= 7 · IL FAQ — da blocco pieno a pastiglia di contorno ----------------------------------------------------------------------------- E' la stessa forma dei riquadri NON attivi degli Studio (le quantita' 50/100/250, le viste Front/Side/Top): bordo `--sc-linea-2`, fondo del foglio, testo `--sc-ink-2`. Resta riconoscibile come comando — e' l'unica cosa contornata della striscia — ma non pesa piu' di tutto il resto. Al passaggio del mouse il bordo e il testo diventano petrolio: e' il modo in cui rispondono tutti i riquadri del sito. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button { min-height: 26px; padding: 0 var(--sc-s3); gap: var(--sc-s2); background: var(--sc-fondo); border: 1px solid var(--sc-linea-2); box-shadow: none; font-size: var(--sc11-et); letter-spacing: var(--sc11-ls); color: var(--sc-ink-2); /* su bianco: 9,6:1 */ } #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button:hover { background: var(--sc-fondo); border-color: var(--sc-mar); box-shadow: none; transform: none; } /* 04 § C4 tiene il testo del pulsante a `#fff`, che su fondo chiaro sparirebbe. Stessa forma di selettore (1-4-0), foglio piu' tardo: vince questa. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button span, #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button-text { color: inherit; } #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button:hover span, #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button:hover .elementor-button-text { color: var(--sc-mar-testo); } /* 11 § 1 dava al testo del pulsante un corpo suo (1-5-0): lo riporto in riga con gli altri. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button .elementor-button-text { font-size: var(--sc11-et); } /* L'icona dentro il pulsante e' un SVG con `fill="#fff"` scritto nel markup: su fondo bianco sarebbe un buco. `fill` e' un attributo di presentazione, quindi qualunque regola CSS lo scavalca senza toccare l'HTML. */ #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button svg, #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button svg path { fill: currentColor; } #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button .elementor-button-icon { display: inline-flex; align-items: center; } #header .e-con.e-parent:has(.gtranslate_wrapper) .elementor-button svg { width: 13px; height: 13px; } /* ============================================================================= 8 · LA MESSA A FUOCO DA TASTIERA ----------------------------------------------------------------------------- Tolti i fondi pieni, chi naviga da tastiera aveva perso l'unico riferimento visivo che restava sul selettore di lingua. `:focus-visible` compare solo per chi usa la tastiera, non al clic. ========================================================================== */ #header .e-con.e-parent:has(.gtranslate_wrapper) a:focus-visible, #header .gtranslate_wrapper a.glink:focus-visible { outline: 2px solid var(--sc-mar); outline-offset: 3px; border-radius: var(--sc-s1); } /* ============================================================================= 9 · TELEFONO ----------------------------------------------------------------------------- Sotto i 768 px Elementor nasconde da solo lingue, recapito e FAQ (`elementor-hidden-mobile` sui due contenitori di destra): resta il solo richiamo al campione, ed e' giusto cosi'. La gabbia diventa 20 px, che e' dove parte il logo mobile — misurato a 390 px di viewport — ed e' anche il gettone `--sc-s4`. ========================================================================== */ @media (max-width: 767px) { #header .e-con.e-parent:has(.gtranslate_wrapper) { --sctb-gabbia: var(--sc-s4); --sc-barra-h: calc(var(--sc-s5) + var(--sc-s2)); } #header .gtranslate_wrapper a.glink { padding: 0; } }