/* La colonna vuota diventa un menu. A 1440 il contenitore era largo 1140 con 150px di margine per parte: qui sale a 1360, il menu ne prende 258 e la griglia resta a quattro colonne. */ /* La fascia di chip delle sottocategorie (inox-sottocategorie.php) dice le stesse cose del gruppo Β«SottocategorieΒ» del menu: tenerle tutt'e due significa mostrare due volte la stessa navigazione. */ /* πŸ”΄ La classe vera e' `inox-sc`, non `inox-subcat`: il selettore della v1 non combaciava con niente e le sottocategorie restavano in pagina DUE volte β€” nei chip e nel menu. Cercare il nome di una classe a memoria invece di leggerlo dal documento e' costato un giro. */ body.archive.ifc-corpo nav.inox-sc { display: none !important; } /* ── LA TAVOLOZZA Β«LUCEΒ» ARRIVA ANCHE QUI ────────────────────────────── Misurato: il fondo della pagina era rgb(255,255,255) e le schede prodotto sono rgb(255,255,255). Bianco su bianco, separati da un bordo di 1px β€” e il menu non aveva nemmeno quello. Da qui il Β«tutto troppo biancoΒ». La decisione del titolare per il resto del sito e' gia' scritta: fondo #f0f2f4 β†’ #e4e9ec, lastre bianche, bordi #d7dde1, e i grigi devono LEGGERSI contro le aree bianche dei prodotti. Gli archivi non l'avevano mai ricevuta. */ /* Dal 2026-08-25 la tela e' la STESSA della home (deciso dal titolare: Β«tutti gli sfondi principali uguali a quello della pagina principaleΒ»), dichiarata qui con gli stessi token di inox-fondo-luce perche' questa regola, piu' specifica, vince su quella globale β€” se i colori divergessero, gli archivi sarebbero l'unica famiglia diversa. */ body.archive.ifc-corpo { background: linear-gradient(180deg, #f0f2f4 0, #e4e9ec 720px) #e4e9ec; } /* πŸ”΄ Il respiro sotto la barra di navigazione era dentro la media query da 1024px: su telefono e tablet il titolo restava attaccato al nero della barra (misurato: 0px a 768 e a 390). Lo spazio serve piu' su uno schermo piccolo, non meno. */ body.archive.ifc-corpo main.site-main { padding-top: 28px; padding-bottom: 48px; } body.archive.ifc-corpo ul.products li.product { box-shadow: 0 1px 2px rgba(18,23,26,.04), 0 6px 18px rgba(18,23,26,.05); transition: box-shadow .22s ease, transform .22s ease; } body.archive.ifc-corpo ul.products li.product:hover { box-shadow: 0 2px 4px rgba(18,23,26,.06), 0 14px 34px rgba(18,23,26,.10); transform: translateY(-2px); } /* ── PROFONDITA' SULLE PAROLE ────────────────────────────────────────── Chiesto dal titolare il 2026-08-25: Β«un effetto piu' 3D, ombra sotto le parole, e quando scorri scendono con teΒ». Due scelte deliberate: Β· L'ombra sta SOLO sui titoli grandi. Su un prezzo, un codice modello o una misura in millimetri un'ombra toglie nitidezza al dato β€” e su questo sito il dato E' il prodotto. Un testo tecnico sfocato non e' 3D, e' sbagliato. Β· Non una sola ombra ma DUE strati piu' un filo di luce in alto: un `text-shadow` singolo fa il fantasma sotto la lettera, non la profondita'. Il filo chiaro sopra e' la luce che batte, l'ombra vicina e' il contatto, quella lontana e' la distanza dal fondo. Ombre TINTE sul fondo acciaio, mai nero puro. ══════════════════════════════════════════════════════════════════════ */ body.archive.ifc-corpo .woocommerce-products-header__title { text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 2px 5px rgba(18,23,26,.16), 0 14px 30px rgba(18,23,26,.11); } body.archive.ifc-corpo .ifc-tit, body.archive.ifc-corpo .ifc-gr-t { text-shadow: 0 1px 0 rgba(255,255,255,.62), 0 1px 3px rgba(18,23,26,.14); } /* Le singole voci dell'elenco: la stessa profondita', dosata. A 14px un'ombra forte impasta le lettere β€” qui il filo di luce sopra fa quasi tutto il lavoro e l'ombra sotto e' appena un contatto. */ body.archive.ifc-corpo .ifc-v-n, body.archive.ifc-corpo .ifc-v-q, body.archive.ifc-corpo .ifc-su, body.archive.ifc-corpo .ifc-p-est, body.archive.ifc-corpo .ifc-p-c > span, body.archive.ifc-corpo .ifc-p-c > em { text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 1px 2px rgba(18,23,26,.10); } /* Sulla voce corrente e su quelle scelte l'ombra si alza: sono in rilievo rispetto alle altre, non solo di colore diverso. */ body.archive.ifc-corpo .ifc-v.e-qui .ifc-v-n, body.archive.ifc-corpo .ifc-v.e-sel .ifc-v-n { text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(18,23,26,.16); } /* La casella di spunta guadagna spessore: un filo di luce sopra e un'ombra sotto, cosi' e' un oggetto premuto e non un rettangolo disegnato. */ body.archive.ifc-corpo .ifc-box { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(18,23,26,.10); } body.archive.ifc-corpo .ifc-v.e-sel .ifc-box { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 5px rgba(179,18,27,.30); } /* ── Β«SCENDONO CON TEΒ» ───────────────────────────────────────────────── Il titolo si muove piu' LENTO dello scorrimento: resta indietro, e a occhio sembra che scenda insieme a chi legge invece di sparire in alto. Solo `transform`, che il browser compone senza ridisegnare la pagina. ⚠️ RISPETTA Β«riduci animazioniΒ», e sul computer del titolare quella preferenza e' ATTIVA: li' l'effetto non parte, ed e' giusto. Per poterlo comunque giudicare c'e' `?motion=1`, che lo forza β€” solo in anteprima. */ @media (prefers-reduced-motion: no-preference) { body.archive.ifc-corpo .ifc-par { will-change: transform; } } body.ifc-motion-forzato .ifc-par { will-change: transform; } /* ── DENSITA' ────────────────────────────────────────────────────────── Misurato prima di cambiare: il contenitore era bloccato a 1360px, cioe' un tetto da testo di lettura applicato a una superficie da scansione. A 1920 lasciava 280px di margine per lato β€” il 29% della finestra β€” e a 1280 le schede toccavano il bordo (margine 0). Una griglia di prodotti non e' prosa: la sua larghezza utile e' Β«quante schede leggibili ci stannoΒ», non 65-75 caratteri. Ora il contenitore respira con la finestra fino a 1720px e non scende mai sotto un margine vero; le colonne le detta lo spazio disponibile, non un numero fisso nella classe di WooCommerce. */ @media (min-width: 1024px) { body.archive.ifc-corpo main.site-main { width: calc(100% - 96px); max-width: 1720px; margin-inline: auto; /* Misurato: fra la barra di navigazione e il titolo c'erano 0px β€” si toccavano. La barra e' nera e il contenuto ci partiva attaccato. */ padding-top: 44px; padding-bottom: 64px; display: grid; grid-template-columns: 296px minmax(0, 1fr); column-gap: 34px; align-items: start; } } @media (min-width: 1024px) and (max-width: 1439px) { /* Sotto i 1440 il margine da 48px per lato mangia una colonna: si stringe, ma non va mai a zero β€” una scheda attaccata al bordo della finestra e' il difetto che si vedeva a 1280. */ body.archive.ifc-corpo main.site-main { width: calc(100% - 48px); } } /* LA SFUMATURA DELLA COLONNA FILTRI (chiesta dal titolare il 2026-08-25). Orizzontale: parte dal bordo sinistro della finestra e schiarisce verso destra fino a diventare esattamente il colore della pagina. Sta sul BODY perche' e' l'unico elemento che arriva al bordo dello schermo: `main` e' centrato e la colonna comincia dopo il varco, quindi dipingendola li' la sfumatura comincerebbe con uno scalino. Il fondo del body si propaga alla tela, quindi copre tutta l'altezza del documento β€” che e' giusto: la colonna dei filtri e' alta quanto la pagina. La fascia finisce dove finisce la colonna: varco + larghezza della colonna. Il varco NON e' lo stesso a tutte le larghezze (48px sopra i 1440, 24px sotto, e sopra i 1816 cresce perche' `main` si ferma a 1720): per questo e' una variabile, e non un numero. `repeat-y` invece di `no-repeat` garantisce la copertura verticale qualunque sia l'altezza della tela β€” orizzontalmente non si ripete comunque, perche' la fascia e' l'unica dimensione dichiarata. */ @media (min-width: 1024px) { /* ⚠️ QUESTO E' SOLO IL RIPIEGO. Il 100% qui si risolve contro il blocco contenitore DELLA REGOLA IN CUI LA VARIABILE VIENE USATA: nel margine della colonna e' `main` (fermo a 1720px), non la finestra β€” quindi sopra i 1816px dava 48 mentre il varco vero cresceva, e lo spazio a sinistra delle parole arrivava a 78px contro i 27 di destra (misurato a 1920). Il valore ESATTO (scrollbar compresa) lo sa solo il browser: lo misura il copione qui sotto e lo scrive in --ifc-varco; questo max() serve solo nei millisecondi prima che il copione giri, e coincide col vero fino a 1816px. */ body.archive.ifc-corpo { --ifc-varco: max(48px, calc((100% - 1720px) / 2)); } } @media (min-width: 1024px) and (max-width: 1439px) { body.archive.ifc-corpo { --ifc-varco: 24px; } } @media (min-width: 1024px) { body.archive.ifc-corpo { /* Intensita' alzata il 2026-08-25: la prima stesura (.085) staccava di 18 punti su 255 dal fondo pagina β€” misurabile, ma il titolare non la vedeva. Ora stacca di 36. Il limite non e' il gusto: e' il testo del menu, che sta SOPRA questa sfumatura. Il punto piu' scuro dove cade una parola e' il rientro del menu (30px dentro la colonna); li' il contrasto e' misurato dai pixel dipinti, non dedotto, perche' un `background-image` non entra nel calcolo che compone i `background-color`. */ /* La forma della rampa NON e' un gusto: e' un vincolo di leggibilita'. Il punto piu' scuro (.20, cioe' 188 su 255 contro i 231 della pagina) sta nei primi pixel, che cadono FUORI dal menu β€” fra il bordo della finestra e la colonna. Alla quota dove cominciano le parole (13%) la rampa e' gia' scesa a .11: piu' scura di li' in poi e il rosso dei pulsanti del sito (#b3121b) scende sotto 4,5:1, misurato 4,34. La scelta era fra cambiare il rosso β€” che e' lo standard di tutto il sito β€” e far schiarire prima la sfumatura. */ /* DUE LIVELLI, e la distinzione conta. SOTTO: il grigio pieno di tutta la sezione (.075, cioe' 215 su 255 contro i 231 della pagina). E' il colore del pannello, non una sfumatura: vale uguale da sinistra a destra, quindi la sezione ha un tono suo e finisce con un bordo invece di dissolversi. SOPRA: la sfumatura, riportata alla forma di prima (.20 β†’ 0). Scurisce ulteriormente verso il bordo della finestra e si annulla a destra, dove resta il grigio pieno di sotto. I due livelli hanno la STESSA larghezza: se divergessero, la sezione avrebbe due bordi destri a distanze diverse. */ /* DUE LIVELLI, dal piu' alto al piu' basso β€” CROMATO, non spazzolato (chiesto dal titolare il 2026-08-25: Β«piu' liscia e cromataΒ»). La SPAZZOLATURA che c'era β€” righe chiare a passo di 3px β€” e' stata TOLTA: era lei la grana Β«a righe verticaliΒ». Il cromo non ha tessitura: e' superficie a specchio, e si dice con transizioni lisce e un contrasto ombra/bagliore piu' alto. 1. RAMPA CROMATA β€” ombra piu' fonda al bordo della finestra, un bagliore secondario al 30%, il picco speculare al 63% (salito a .45) e il labbro scuro sul filo destro. Nessun passaggio brusco: la levigatezza e' VERIFICATA sul profilo grezzo dei pixel, non promessa (filtri-92, salto massimo fra campioni adiacenti). 2. BASE β€” il grigio pieno freddo (rgba(32,56,78)) che da' il tono alla sezione. Larghi uguale: se divergessero, due bordi destri. */ background-image: linear-gradient(90deg, rgba(20,34,48,.26) 0, rgba(20,34,48,.10) 12%, rgba(255,255,255,.22) 30%, rgba(20,34,48,.05) 47%, rgba(255,255,255,.45) 63%, rgba(255,255,255,.14) 72%, rgba(20,34,48,.06) 88%, rgba(20,34,48,.10) 100%), linear-gradient(0deg, rgba(32,56,78,.09), rgba(32,56,78,.09)); background-repeat: repeat-y, repeat-y; background-size: calc(296px + var(--ifc-varco, 48px)) 100%, calc(296px + var(--ifc-varco, 48px)) 100%; background-position: left top, left top; background-attachment: scroll, scroll; } } @media (min-width: 1024px) { /* SOLO il titolo attraversa le due colonne. πŸ”΄ Nella v1 c'era anche `.woocommerce-notices-wrapper`: essendo largo 1/-1 non puo' stare accanto al menu, quindi il grid lo spingeva DOPO la colonna del menu e si trascinava dietro conteggio, ordinamento, prodotti e paginazione. Il risultato era mezza pagina bianca β€” e i numeri (colonne, larghezze, sbordo) restavano tutti verdi. */ /* Il titolo sta sopra i PRODOTTI, non sopra il menu: allineato alla griglia. Misurato prima: 292px di scarto fra il primo carattere del titolo e il bordo della prima scheda. Cosi' la pagina ha due incolonnamenti, non tre. */ body.archive.ifc-corpo main.site-main > .woocommerce-products-header { grid-column: 2; grid-row: 1; margin-bottom: 20px; } /* Il menu ATTRAVERSA le righe: occupandone una sola, la sua altezza (601px misurati) diventa l'altezza di quella riga, e conteggio, ordinamento e prodotti finiscono sotto invece che accanto. Il numero alto e' voluto: il grid implicito non ha una fine a cui riferirsi con `-1`. */ /* πŸ”΄ `align-self: start` faceva collassare questo box all'altezza del suo contenuto (~730px): un elemento appiccicato puo' scorrere solo DENTRO il box del genitore, quindi il menu spariva dopo 900px di scorrimento pur avendo `position: sticky` dichiarato. Misurato. Con `stretch` il box e' alto quanto la colonna dei prodotti e il menu ti segue per tutta la pagina β€” lo stesso comportamento del riquadro d'acquisto nella scheda prodotto, che e' l'effetto che il titolare aveva in mente. */ body.archive.ifc-corpo .ifc-rail { grid-column: 1; grid-row: 1 / 200; align-self: stretch; } /* Il menu si avvicina al bordo sinistro della finestra (chiesto dal titolare il 2026-08-25). La colonna esce dal varco di `main` e si ferma a 14px dal bordo A OGNI LARGHEZZA β€” il margine e' calcolato sul varco vero, che vale 48px sopra i 1440, 24px sotto e cresce oltre i 1816 perche' `main` si ferma a 1720. Un numero fisso avrebbe funzionato a una larghezza sola. Il rientro interno di 30px resta: e' quello che tiene le parole fuori dal punto piu' scuro della sfumatura. Il bordo DESTRO non si muove, quindi la fascia sfumata e la griglia dei prodotti restano dove sono. */ body.archive.ifc-corpo .ifc-rail { margin-left: calc(14px - var(--ifc-varco, 48px)); } body.archive.ifc-corpo main.site-main > .woocommerce-notices-wrapper, body.archive.ifc-corpo main.site-main > .term-description, body.archive.ifc-corpo main.site-main > .ifc-desc { grid-column: 2; } body.archive.ifc-corpo main.site-main > .woocommerce-result-count, body.archive.ifc-corpo main.site-main > .woocommerce-ordering, body.archive.ifc-corpo main.site-main > ul.products, body.archive.ifc-corpo main.site-main > nav.woocommerce-pagination, body.archive.ifc-corpo main.site-main > .ifc-vuoto { grid-column: 2; } .ifc-rail-in { position: sticky; top: 96px; max-height: calc(100dvh - 120px); overflow-y: auto; } /* la barra di scorrimento del menu e' una superficie del browser: senza dichiararla arriva coi valori di fabbrica, che non appartengono a nessun foglio di stile */ .ifc-rail-in { scrollbar-width: thin; scrollbar-color: #c6ced3 transparent; } .ifc-rail-in::-webkit-scrollbar { width: 6px; } .ifc-rail-in::-webkit-scrollbar-thumb { background: #c6ced3; border-radius: 3px; } /* I comandi del pannello sono del telefono: su desktop il menu e' una colonna e un tasto Β«ChiudiΒ» non vuol dire niente. Nella v1 erano rimasti a vista, ed e' la prima cosa che si e' notata. */ .ifc-apri, .ifc-chiudi, .ifc-fine { display: none !important; } } /* La barra sopra la griglia: conteggio a sinistra, ordinamento a destra, su UNA riga. Prima erano due righe, e il menu a tendina era stirato per tutta la larghezza della griglia (misurato: 1.428px a 1920) β€” un comando che contiene tre parole non ha bisogno di un metro e mezzo. */ @media (min-width: 1024px) { body.archive.ifc-corpo main.site-main > .woocommerce-result-count { grid-column: 2; grid-row: 2; align-self: center; margin: 0; padding: 0; } body.archive.ifc-corpo main.site-main > .woocommerce-ordering { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; width: auto; max-width: 320px; } body.archive.ifc-corpo main.site-main > .woocommerce-ordering select { width: auto; min-width: 220px; } body.archive.ifc-corpo main.site-main > ul.products { margin-top: 20px; } } /* ── L'ARCHIVIO DI MARCA DENTRO LA STESSA GRIGLIA (2026-08-26) ────────── La testata d'identita' (.ico-br-hero, stampata da inox-marchi) sta nella COLONNA DEI PRODOTTI, come l'h1 delle categorie: cosi' il menu dei filtri parte dall'alto, alla stessa quota di tutte le altre pagine del quadro. (Prima versione: testata a tutta larghezza sopra le due colonne β€” il titolare l'ha segnalata subito: il menu cominciava troppo in basso.) Il rail resta in riga 1/200 per le regole base: qui non si tocca. */ @media (min-width: 1024px) { body.tax-pa_brand.ifc-corpo main.site-main > .ico-br-hero { grid-column: 2; grid-row: 1; /* niente piu' tutta-larghezza: dentro la colonna il calc(50% - 50vw) di inox-marchi la farebbe sbordare sul menu */ margin-left: 0; margin-right: 0; margin-bottom: 24px; padding: 36px 40px 32px; border: 1px solid var(--br-bordo, #d7dde1); border-radius: 16px; } body.tax-pa_brand.ifc-corpo main.site-main > .ico-br-hero .ico-br-wrap { max-width: none; padding: 0; } /* il rientro di 24px che inox-marchi da' a .site-main serviva al contenitore stretto del tema: dentro la griglia larga sbilancia le colonne */ body.tax-pa_brand.ifc-corpo main.site-main { padding-left: 0; padding-right: 0; } } /* ── LO SHOP NELLO STESSO QUADRO (2026-08-26) ─────────────────────────── /shop/ e' una pagina Elementor su template canvas: `main.site-main` non esiste e le regole di griglia degli archivi sono INERTI. Il markup ifc lo emette il widget della griglia (plugin inox-shop): qui c'e' solo la geometria del quadro e il vestito delle schede β€” che sugli archivi lo fanno WooCommerce piu' inox-archivi-luce/inox-marchi, mentre qui le schede sono markup del widget. La colonna dei filtri, la fascia cromata, il nero pieno e l'ordinamento disegnato arrivano dalle stesse regole degli archivi, perche' il body ha `archive` e riceve `ifc-corpo`. */ body.ifc-shop .ifc-shop-wrap { margin-inline: calc(50% - 50vw); } /* La pagina Shop aveva DUE istanze responsive del widget griglia (una nascosta su telefono, una su desktop). Il widget ne renderizza una sola: quella sopravvissuta deve vedersi a OGNI larghezza, quindi l'occultamento responsive di Elementor va scavalcato. `!important` motivato: Elementor dichiara display:none dentro le sue media query con selettori propri. */ body.ifc-shop .elementor-hidden-mobile:has(.ifc-shop-wrap), body.ifc-shop .elementor-hidden-tablet:has(.ifc-shop-wrap), body.ifc-shop .elementor-hidden-desktop:has(.ifc-shop-wrap) { display: block !important; } body.ifc-shop .ifc-quadro { padding: 16px 16px 48px; } @media (min-width: 1024px) { body.ifc-shop .ifc-quadro { width: calc(100% - 96px); max-width: 1720px; margin-inline: auto; padding: 44px 0 64px; display: grid; grid-template-columns: 296px minmax(0, 1fr); column-gap: 34px; align-items: start; } body.ifc-shop .ifc-colonna { grid-column: 2; grid-row: 1 / 200; min-width: 0; } } @media (min-width: 1024px) and (max-width: 1439px) { body.ifc-shop .ifc-quadro { width: calc(100% - 48px); } } /* La testata: stesso titolo evidenziato degli archivi (la regola del titolo e' gia' scoperta da body.archive.ifc-corpo). Qui solo i ritmi. */ body.ifc-shop .ifc-colonna .woocommerce-products-header { margin-bottom: 20px; } body.ifc-shop .ifc-strumenti { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 4px; } body.ifc-shop .ifc-strumenti .woocommerce-result-count { margin: 0; padding: 0; font-size: 14.5px; color: #5d666c; } body.ifc-shop .ifc-strumenti .woocommerce-ordering { margin: 0; width: auto; max-width: 320px; } body.ifc-shop .ifc-strumenti .woocommerce-ordering select { width: auto; min-width: 220px; } /* Le targhette dei filtri attivi: senza, con un prezzo stretto la lista sembra vuota senza spiegazione (lezione gia' pagata dal vecchio shop). */ body.ifc-shop .ifc-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } body.ifc-shop .ifc-chips-et { font-size: 12.5px; color: #5d666c; } body.ifc-shop .ifc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid #d7dde1; border-radius: 999px; background: #fff; color: #12171a; font-size: 13px; text-decoration: none; } body.ifc-shop .ifc-chip span { color: #8f0e15; font-weight: 700; } body.ifc-shop .ifc-chip:hover { border-color: #9aa4ab; } /* Le schede: la stessa anatomia delle schede degli archivi β€” lastra bianca, foto su pannello chiaro, titolo, prezzo in INCHIOSTRO (mai rosso), un solo stile di pulsante: il fantasma. CTA ancorata in fondo, cosi' i pulsanti della stessa riga stanno su una linea sola. */ body.ifc-shop .ifc-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); column-gap: 18px; row-gap: 26px; margin: 20px 0 0; padding: 0; list-style: none; } @media (max-width: 1023px) { body.ifc-shop .ifc-griglia { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 14px; row-gap: 14px; } } body.ifc-shop .ifc-scheda { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #d7dde1; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(18,23,26,.04), 0 6px 18px rgba(18,23,26,.05); transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } body.ifc-shop .ifc-scheda:hover { transform: translateY(-3px); border-color: #c6ced3; box-shadow: 0 2px 4px rgba(18,23,26,.06), 0 14px 34px rgba(18,23,26,.10); } body.ifc-shop .ifc-scheda-foto { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #eef1f3 0%, #fdfefe 44%, #e2e7ea 100%); overflow: hidden; } body.ifc-shop .ifc-scheda-foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; padding: 14px; box-sizing: border-box; transition: transform .3s ease; } body.ifc-shop .ifc-scheda:hover .ifc-scheda-foto img { transform: scale(1.05); } /* Una foto che manca non si maschera con un finto prodotto rosa: si dichiara. */ body.ifc-shop .ifc-scheda-nofoto { display: flex; align-items: center; justify-content: center; color: #9aa4ab; font-size: 13px; } body.ifc-shop .ifc-stato { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid #d7dde1; font-size: 11.5px; font-weight: 600; color: #495158; } body.ifc-shop .ifc-stato.e-fuori { color: #8f0e15; border-color: #e5c7c9; } body.ifc-shop .ifc-scheda-corpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 16px 16px; min-width: 0; } body.ifc-shop .ifc-scheda-cat { font-size: 11.5px; letter-spacing: .02em; color: #5d666c; margin: 0 0 4px; } body.ifc-shop .ifc-scheda-nome { margin: 0 0 10px; font-size: 15px; line-height: 1.4; font-weight: 600; } body.ifc-shop .ifc-scheda-nome a { color: #12171a; text-decoration: none; } body.ifc-shop .ifc-scheda-nome a:hover { color: #b3121b; } body.ifc-shop .ifc-scheda-prezzo { margin-top: auto; padding-top: 8px; font-family: var(--inox-font-head, inherit); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; color: #12171a; } body.ifc-shop .ifc-scheda-prezzo del { font-size: 14px; opacity: .5; font-weight: 400; margin-right: 6px; } body.ifc-shop .ifc-scheda-cta { display: block; margin-top: 10px; padding: 10px 14px; border: 1.5px solid #b3121b; border-radius: 10px; background: transparent; color: #b3121b; font-size: 13.5px; font-weight: 600; text-align: center; text-decoration: none; box-shadow: 0 6px 14px rgba(179,18,27,.08); transition: background .18s ease, box-shadow .18s ease, transform .12s ease; } body.ifc-shop .ifc-scheda-cta:hover { background: rgba(179,18,27,.06); box-shadow: 0 8px 18px rgba(179,18,27,.12); } body.ifc-shop .ifc-scheda-cta:active { transform: scale(.98); } body.ifc-shop .ifc-scheda-pref { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); border: 1px solid #d7dde1; color: #5d666c; cursor: pointer; transition: color .18s ease, border-color .18s ease; } body.ifc-shop .ifc-scheda-pref:hover, body.ifc-shop .ifc-scheda-pref.active { color: #b3121b; border-color: #b3121b; } /* La paginazione: lo stesso disegno degli archivi, centrata. */ body.ifc-shop .ifc-pagine { display: flex; justify-content: center; margin-top: 44px; } body.ifc-shop .ifc-pagine ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } body.ifc-shop .ifc-pagine a, body.ifc-shop .ifc-pagine span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px; border: 1px solid #d7dde1; background: #fff; color: #12171a; font-size: 14px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; } body.ifc-shop .ifc-pagine a:hover { border-color: #9aa4ab; } body.ifc-shop .ifc-pagine span.e-qui { border: 1.5px solid #b3121b; color: #b3121b; background: transparent; } body.ifc-shop .ifc-pagine span.e-muto { color: #c6ced3; pointer-events: none; } /* Lo stato vuoto del catalogo filtrato riusa .ifc-vuoto degli archivi. */ /* La griglia segue la larghezza disponibile invece di un numero fisso. `columns-4` di WooCommerce vale 4 colonne a qualunque larghezza: a 1720 di contenitore diventano schede da 340px con la foto persa in mezzo, a 1100 diventano 200px. Con `auto-fill` la scheda resta nella sua misura buona e a cambiare e' quante ce ne stanno: misurato 5 colonne a 1920, 4 a 1440, 3 a 1280. */ @media (min-width: 1024px) { body.archive.ifc-corpo ul.products, body.archive.ifc-corpo ul.products.columns-1, body.archive.ifc-corpo ul.products.columns-2, body.archive.ifc-corpo ul.products.columns-3, body.archive.ifc-corpo ul.products.columns-4, body.archive.ifc-corpo ul.products.columns-5, body.archive.ifc-corpo ul.products.columns-6 { grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)) !important; /* 2026-10-16: era 238px (4 colonne a 1440), ora 5 */ column-gap: 18px; /* il varco fra le righe e' piu' largo di quello fra le colonne: separa le righe senza staccare le schede che stanno sulla stessa riga */ row-gap: 26px; } } .ifc-rail { font-family: var(--inox-font-body, system-ui, sans-serif); color: #495158; font-size: 14px; } @media (min-width: 1024px) { /* πŸ”΄ NIENTE LASTRA per il menu. Le lastre bianche sono i PRODOTTI: sono loro gli oggetti della pagina. Il filtro e' la struttura in cui stanno β€” mobilio, non merce. Chiuderlo in una scheda con bordo e ombra lo mette sullo stesso piano di cio' che dovrebbe aiutare a scegliere, e lo stacca dal resto invece di integrarlo. Al posto del contorno: un filetto verticale che separa la colonna dalla griglia, e i filetti dei gruppi. Divide, non incornicia. */ /* La sfumatura NON sta piu' su questa colonna, e non e' un dettaglio di forma: la colonna comincia a 48px dal bordo della finestra (24px sotto i 1440), quindi una sfumatura orizzontale che parte da qui farebbe uno scalino netto proprio nel suo punto piu' scuro. Va ancorata al bordo dello schermo, e l'unico elemento che ci arriva e' il body. Qui resta solo il filetto che separa la colonna dalla griglia. */ .ifc-rail { border-right: 1px solid #d7dde1; background: none; } /* πŸ”΄ SCURENDO IL PANNELLO CAMBIA CIO' CHE CI STA SOPRA, e non e' un dettaglio di gusto. Il rosso azione del sito (#b3121b) e' calibrato sul fondo chiaro: su questo pannello scende a 4,12:1, sotto la soglia di leggibilita'. Qui il pulsante usa il ROSSO SCURO della tavolozza (#8f0e15) β€” stesso stile Β«fantasmaΒ», bordo e scritta, fondo trasparente: e' lo stesso pulsante adattato alla superficie, non un secondo stile. Vale SOLO sulla colonna di destra: nel pannello del telefono e nello stato vuoto il fondo e' bianco e il rosso resta quello di tutto il sito. Il bordo dei campi si scurisce per la stessa ragione: #ccd4d9 su un pannello grigio non si vede piu'. */ .ifc-rail .ifc-bt { color: #8f0e15; border-color: #8f0e15; box-shadow: 0 2px 10px rgba(143,14,21,.13); } .ifc-rail .ifc-bt:hover, .ifc-rail .ifc-bt:focus { background: rgba(143,14,21,.07); } .ifc-rail .ifc-p-c input { border-color: #a9b4bb; } /* ⚠️ #5d666c regge 4,93:1 sul fondo pagina pulito: sul pannello grigio scende a 4,24. Le voci e i conteggi passano all'inchiostro del corpo. Le etichette Β«daΒ», Β«aΒ», «€» NO: quelle sono posate sopra il campo bianco, non sul pannello, e li' il grigio tenue e' corretto. */ .ifc-rail .ifc-v-q, .ifc-rail .ifc-su { color: #495158; } .ifc-rail-in { background: transparent; border: 0; border-radius: 0; /* il menu non tocca piu' il bordo: rientra di 30px, cosi' sta nella parte gia' schiarita della sfumatura invece che nel suo punto piu' scuro. La colonna e' stata allargata di 24px per compensare, quindi la misura di lettura del testo resta quella di prima (240px contro 245) e il numero di colonne della griglia prodotti non cambia a nessuna larghezza β€” verificato a 1280, 1440 e 1920. */ padding: 2px 26px 8px 30px; box-shadow: none; } } .ifc-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .ifc-tit { font-family: var(--inox-font-head, system-ui, sans-serif); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #12171a; margin: 0; } .ifc-azzera { font-size: 13px; color: #b3121b; text-decoration: none; border-bottom: 1px solid rgba(179,18,27,.3); } .ifc-azzera:hover { border-bottom-color: #b3121b; } .ifc-gr { padding: 20px 0 14px; border-top: 1px solid #d5dce0; } .ifc-gr:first-of-type { border-top: 0; padding-top: 0; } .ifc-gr:last-of-type { padding-bottom: 0; } /* Piu' spazio sopra il titolo che sotto: il titolo appartiene a cio' che segue, non a cio' che precede. Prima erano 16 e 16, e ogni gruppo pesava uguale al varco che lo separava dal precedente. */ .ifc-gr-t { font-family: var(--inox-font-head, system-ui, sans-serif); font-size: 12.5px; font-weight: 700; color: #12171a; margin: 0 0 8px; letter-spacing: .045em; text-transform: uppercase; } .ifc-lista { list-style: none; margin: 0; padding: 0; } .ifc-lista li { margin: 0; } .ifc-v { /* `flex-start` e non `center`: su un nome che va a capo il conteggio centrato verticalmente sembra appartenere a nessuna delle due righe. */ display: flex; align-items: flex-start; gap: 9px; padding: 7px 10px; margin-inline: -10px; border-radius: 8px; color: #495158; text-decoration: none; line-height: 1.38; transition: background .16s ease, color .16s ease; } .ifc-v:hover { background: rgba(255,255,255,.72); color: #12171a; } .ifc-v-n { flex: 1 1 auto; min-width: 0; } /* i conteggi sono una colonna di numeri: senza cifre tabulari non si allineano */ .ifc-v-q { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 12.5px; color: #5d666c; padding-top: .12em; } .ifc-v.e-qui { background: #fff; color: #12171a; font-weight: 600; box-shadow: inset 2.5px 0 0 #b3121b; } .ifc-su { display: block; padding: 7px 8px; margin-left: -8px; border-radius: 7px; color: #5d666c; text-decoration: none; font-size: 13px; } .ifc-su:hover { background: rgba(255,255,255,.72); color: #12171a; } .ifc-box { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .15em; border: 1.5px solid #c6ced3; border-radius: 4px; background: #fff; position: relative; transition: border-color .16s ease, background .16s ease; } .ifc-v:hover .ifc-box { border-color: #9aa4ab; } .ifc-v.e-sel .ifc-box { background: #b3121b; border-color: #b3121b; } .ifc-v.e-sel .ifc-box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(42deg); } .ifc-v.e-sel { color: #12171a; font-weight: 600; } .ifc-p-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ifc-p-c { position: relative; display: block; } .ifc-p-c > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #5d666c; pointer-events: none; } .ifc-p-c > em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-style: normal; color: #5d666c; pointer-events: none; } .ifc-p-c input { width: 100%; padding: 9px 26px 9px 30px; border: 1px solid #ccd4d9; border-radius: 8px; background: #fff; font-family: inherit; font-size: 13.5px; color: #12171a; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .ifc-p-c input::-webkit-outer-spin-button, .ifc-p-c input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ifc-p-c input:focus { outline: none; border-color: #b3121b; box-shadow: 0 0 0 3px rgba(179,18,27,.12); } /* ⚠️ #5d666c regge 4,93:1 sul fondo pagina pulito: qualunque velo lo porta sotto soglia. Questa riga sta SOPRA la sfumatura, quindi usa l'inchiostro del corpo. I conteggi a destra restano tenui: li' la sfumatura e' finita. */ .ifc-p-est { margin: 9px 0 11px; font-size: 12.5px; color: #495158; } .ifc-p-est span { color: #495158; font-variant-numeric: tabular-nums; white-space: nowrap; } /* l'unico stile di pulsante del sito: il fantasma */ .ifc-bt { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; padding: 0 16px; font-family: var(--inox-font-body, system-ui, sans-serif); font-size: 14px; font-weight: 600; color: #b3121b; background: transparent; border: 1px solid #b3121b; border-radius: 9px; cursor: pointer; box-shadow: 0 2px 10px rgba(179,18,27,.10); transition: background .18s ease, box-shadow .18s ease, transform .08s ease; } .ifc-bt:hover { background: rgba(179,18,27,.06); box-shadow: 0 4px 14px rgba(179,18,27,.16); } .ifc-bt:active { transform: translateY(1px); } .ifc-vuoto { padding: 34px 26px; text-align: center; background: linear-gradient(135deg,#eef1f3 0%,#fdfefe 44%,#e2e7ea 100%); border: 1px solid #d7dde1; border-radius: 14px; } .ifc-vuoto-t { font-family: var(--inox-font-head, system-ui, sans-serif); font-size: 17px; font-weight: 700; color: #12171a; margin: 0 0 6px; } .ifc-vuoto-s { font-size: 14px; color: #5d666c; margin: 0 0 16px; } .ifc-vuoto .ifc-bt { width: auto; } /* πŸ”΄ IL TEMA COLORA DI MAGENTA OGNI PULSANTE AL PASSAGGIO E AL FUOCO. Hello Elementor dichiara [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus { background: rgb(204,51,102) } che pesa (0,2,0) e batte le mie classi (0,1,0). Misurato aprendo il pannello: il tasto di chiusura usciva come una campitura rossa piena β€” e il progetto ha una regola precisa, Β«nessuna campitura rossa piena in pagina, un solo stile di pulsante: il fantasmaΒ». Si dichiara con peso (0,2,1) o piu'. Vale per TUTTI i miei comandi, non solo per quello dove me ne sono accorto. */ .ifc-rail .ifc-bt:hover, .ifc-rail .ifc-bt:focus, .ifc-vuoto .ifc-bt:hover, .ifc-vuoto .ifc-bt:focus { background: rgba(179,18,27,.06); color: #b3121b; } .ifc-rail .ifc-chiudi:hover, .ifc-rail .ifc-chiudi:focus { background: #eef1f3; color: #12171a; } body .ifc-apri:hover, body .ifc-apri:focus { background: #12171a; color: #fff; } /* Il focus da tastiera: una superficie che nessun foglio dichiara e che arriva coi valori del browser. */ .ifc-rail a:focus-visible, .ifc-bt:focus-visible, .ifc-apri:focus-visible { outline: 2px solid #b3121b; outline-offset: 2px; border-radius: 8px; } .ifc-rail ::selection { background: rgba(179,18,27,.16); color: #12171a; } /* ── telefono e tablet: pannello che sale dal basso ── */ @media (max-width: 1023px) { .ifc-rail { position: fixed; inset: 0; z-index: 9998; background: #fff; transform: translateY(100%); visibility: hidden; transition: transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s; display: flex; flex-direction: column; } .ifc-rail.e-aperto { transform: translateY(0); visibility: visible; transition: transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s; } .ifc-rail-in { flex: 1 1 auto; overflow-y: auto; padding: 18px 20px 96px; -webkit-overflow-scrolling: touch; } .ifc-testa { position: sticky; top: 0; z-index: 1; margin: 0 -20px 14px; padding: 16px 20px 12px; background: #fff; border-bottom: 1px solid #d7dde1; } .ifc-tit { font-size: 17px; text-transform: none; letter-spacing: 0; } .ifc-v { padding: 11px 8px; } /* 44px: e' la misura sotto la quale un comando non si prende col pollice. Il segno resta piccolo, l'area premibile no. */ .ifc-chiudi { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; color: #12171a; font-size: 0; border-radius: 8px; } .ifc-chiudi:active { background: #eef1f3; } .ifc-chiudi::before, .ifc-chiudi::after { content: ""; position: absolute; left: 14px; top: 21px; width: 16px; height: 1.5px; background: currentColor; } .ifc-chiudi::before { transform: rotate(45deg); } .ifc-chiudi::after { transform: rotate(-45deg); } .ifc-fine { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #d7dde1; } /* 44px: sotto questa misura un comando non si prende col pollice. Il pulsante ereditava i 40px della versione da colonna, dove si preme col puntatore. */ .ifc-fine .ifc-bt { min-height: 48px; font-size: 15px; } .ifc-apri { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 9997; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 22px; font-family: var(--inox-font-body, system-ui, sans-serif); font-size: 15px; font-weight: 600; color: #fff; background: #12171a; border: 0; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 22px rgba(18,23,26,.28); } .ifc-apri-i { width: 15px; height: 15px; position: relative; } .ifc-apri-i::before, .ifc-apri-i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; } .ifc-apri-i::before { top: 4px; } .ifc-apri-i::after { top: 10px; right: 4px; } .ifc-apri-n { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: #b3121b; color: #fff; border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; } body.ifc-bloccato { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .ifc-rail { transition: none; } } /* ═══ REDESIGN Β«quadro comandiΒ» (2026-08-25, approvato dal titolare su anteprima; rivisto lo stesso giorno: scritte nere, scanalature incise, rientro sinistro stretto, superfici lucide). Fonte unica: filtri-94-stile-nuovo.js β€” si modifica LI' e si riporta qui. Sta in coda al foglio perche' a parita' di specificita' vinca sulle regole sopra: lo stesso rapporto che l'anteprima ha collaudato. ═══ */ /* ── targa a inchiostro ── */ .ifc-rail .ifc-testa { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 12px 14px; background: linear-gradient(135deg, #171d22 0%, #232c34 78%, #2b3640 100%); border-radius: 10px; box-shadow: 0 8px 20px rgba(18,23,26,.20); position: relative; overflow: hidden; } /* il riflesso d'acciaio della home, fermo: una banda di luce sulla targa */ .ifc-rail .ifc-testa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 44%, rgba(255,255,255,.05) 52%, transparent 62%); pointer-events: none; } .ifc-rail .ifc-tit { color: #fff; font-size: 14px; letter-spacing: .09em; } .ifc-tot { flex: 1 1 auto; min-width: 0; color: #aeb9c2; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ifc-rail .ifc-azzera { position: relative; z-index: 1; color: #f2a0a5; border-bottom-color: rgba(242,160,165,.45); } .ifc-rail .ifc-azzera:hover { color: #fff; border-bottom-color: #fff; } /* ── gruppi: etichetta + icona + filetto che sfuma ── */ /* i separatori NON sono piu' filetti piatti (Β«si mischiano col restoΒ»): sono SCANALATURE incise β€” 2px, scuro sopra e luce sotto, come una riga fresata nell'acciaio. Il bordo piatto fra i gruppi se ne va: due tipi di riga simili nella stessa colonna erano la confusione lamentata. */ .ifc-gr { border-top: 0; padding: 14px 0 14px; } .ifc-gr + .ifc-gr { border-top: 0; } .ifc-gr-t { display: flex; align-items: center; gap: 7px; font-size: 12px; margin: 0 0 10px; letter-spacing: .07em; } .ifc-gr-t .ifc-gr-i { font-family: 'Material Symbols Outlined'; font-size: 16px; line-height: 1; font-weight: 400; color: #8f0e15; } .ifc-gr-t::after { content: ""; flex: 1 1 auto; height: 2px; margin-left: 4px; border-radius: 1px; background: linear-gradient(180deg, rgba(18,23,26,.30) 0 50%, rgba(255,255,255,.85) 50% 100%); } /* ── tutte le scritte NERE (chiesto dal titolare il 2026-08-25). Restano rossi solo i COMANDI (Azzera, Applica) e le icone: sono azioni e segni, non testo. Il nero regge ovunque perche' anche il punto piu' scuro della sfumatura sta sopra 170/255. ── */ /* NERO COMPLETO #000 (chiesto dal titolare il 2026-08-25, ribadito: Β«nero completo e decisoΒ» dopo un primo giro a quasi-nero #06090b). E' una deroga voluta alla tavolozza del sito, che il nero puro lo evita: qui comanda la scelta del titolare. */ .ifc-rail, .ifc-rail .ifc-v, .ifc-rail .ifc-su, .ifc-rail .ifc-p-est, .ifc-rail .ifc-p-est span, .ifc-rail .ifc-p-c > span, .ifc-rail .ifc-p-c > em { color: #000; } /* e leggermente piu' spesse (stessa richiesta): il corpo delle voci passa da 400 a 500 β€” DM Sans ha la mezzana vera, non e' un finto grassetto. La voce corrente/selezionata resta a 600, un gradino sopra. */ .ifc-rail .ifc-v, .ifc-rail .ifc-su, .ifc-rail .ifc-p-est { font-weight: 500; } .ifc-rail .ifc-gr-t { color: #000; } .ifc-rail .ifc-p-c input { color: #000; } .ifc-rail .ifc-tit { color: #fff; } /* sulla targa resta bianco */ /* ── righe: puntinato tecnico + conteggi in chip ── */ .ifc-fil { flex: 1 1 14px; min-width: 14px; align-self: flex-start; height: 1.12em; border-bottom: 1px dotted #a7b1b8; margin: 0 1px; } .ifc-v-n { flex: 0 1 auto; } /* i conteggi vestono LA STESSA targa a inchiostro di Β«FILTRAΒ» (chiesto dal titolare): stesso gradiente, testo bianco. E' un background-image, quindi il suo contrasto si misura sui pixel (filtri-92, controllo n.7) β€” il compositore dei background-color lo attraverserebbe. */ /* ⚠️ serve .ifc-rail davanti: la regola base Β«.ifc-rail .ifc-v-qΒ» a (0,2,0) batteva il colore a (0,1,0) e le cifre uscivano GRIGIE sull'inchiostro β€” 1,97:1, preso dal controllo n.7 al primo giro. */ .ifc-v-q, .ifc-rail .ifc-v-q { background: linear-gradient(135deg, #171d22 0%, #232c34 78%, #2b3640 100%); color: #fff; border-radius: 999px; padding: 1px 8px 2px; font-size: 11.5px; line-height: 1.5; font-weight: 500; } .ifc-v:hover { background: rgba(255,255,255,.85); } .ifc-v:hover .ifc-fil { border-bottom-color: #8b959c; } /* la voce corrente: il Β«fantasmaΒ» del sito, applicato alla selezione */ .ifc-v.e-qui { background: #fff; box-shadow: 0 3px 10px rgba(18,23,26,.09), inset 0 0 0 1px rgba(179,18,27,.55); } /* anche sulla voce corrente e selezionata la chip resta la targa: la selezione la dicono gia' il contorno, la casella e il peso del testo */ .ifc-v.e-sel { background: rgba(179,18,27,.05); } .ifc-v.e-sel:hover { background: rgba(179,18,27,.08); } /* ── prezzo: campi lavorati ── */ .ifc-rail .ifc-p-c input { border-color: #9fabb3; box-shadow: inset 0 1px 3px rgba(18,23,26,.08); } .ifc-p-est { display: flex; align-items: baseline; gap: 6px; } .ifc-p-est::after { content: ""; flex: 1 1 auto; height: 1px; align-self: center; background: linear-gradient(90deg, rgba(18,23,26,.14), rgba(18,23,26,0)); } /* ── meno vuoto a sinistra: il rientro da 30px era la protezione del testo GRIGIO dalla zona scura della sfumatura; con le scritte nere il contrasto regge anche li' (misurato sui pixel in filtri-92). ── */ @media (min-width: 1024px) { .ifc-rail-in { padding-left: 12px; } } /* ── evidenziatura del titolo: banda rossa che sfuma verso destra ── Da evidenziatore: parte satura a sinistra e muore prima della fine della parola. Il rientro ottico (padding compensato dal margine negativo) fa sporgere la banda oltre le lettere senza spostare il primo carattere: l'allineamento titolo-griglia resta a 0px, misurato. Il testo sopra e' l'inchiostro dei titoli: sul punto piu' saturo il contrasto e' verificato sui pixel (filtri-92, controllo n.8). */ .ifc-evid { /* piu' marcato (titolare, 2026-08-25 secondo giro): la partenza sale da .30 a .48 β€” oltre, l'inchiostro del titolo scenderebbe sotto i 3:1 del testo grande, misurato sui pixel dal controllo n.5 di evid-01. */ /* terzo giro (titolare): Β«piu' acceso, come quello del logoΒ» β€” la tinta passa dal rosso azione (#b3121b) al ROSSO MARCHIO #f02028, quello del logo, che la tavolozza riserva proprio agli accenti. */ /* quarto giro (titolare): partenza a .65. La rampa scala in proporzione. */ background: linear-gradient(90deg, rgba(240,32,40,.65) 0, rgba(240,32,40,.43) 45%, rgba(240,32,40,.13) 78%, rgba(240,32,40,0) 100%); border-radius: .12em; padding: .04em .3em .08em .18em; margin: -.04em -.3em -.08em -.18em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ── la descrizione di categoria: attacco, non muro ── Prima era un blocco di testo integrale fra il titolo e i prodotti (380px sui reparti grandi). Ora: LEAD (primo paragrafo) a sinistra, SCHEDA dei numeri veri a destra β€” riempie la colonna che restava vuota accanto a una misura di lettura da 72ch β€” e il resto del testo dietro un Β«Continua a leggereΒ», che da aperto scorre su due colonne. Il testo resta TUTTO nel documento: il taglio e' solo visivo, quindi indicizzabile. ── */ .ifc-desc { margin: 0 0 18px; } @media (min-width: 1024px) { .ifc-desc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 40px; align-items: start; } } .ifc-lead { max-width: 72ch; font-size: 15.5px; line-height: 1.62; color: #12171a; } .ifc-lead p { margin: 0 0 8px; } .ifc-lead p:last-child { margin-bottom: 0; } .ifc-fatti { list-style: none; margin: 4px 0 0; padding: 2px 0 2px 26px; border-left: 2px solid; border-image: linear-gradient(180deg, #b3121b 0 26px, #d7dde1 26px 100%) 1; min-width: 200px; } .ifc-fatti li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; } .ifc-fatti li + li { border-top: 1px dotted #b6bfc6; } .ifc-fatti b { font-family: var(--inox-font-head, system-ui, sans-serif); font-size: 16.5px; font-weight: 700; color: #12171a; font-variant-numeric: tabular-nums; white-space: nowrap; } .ifc-fatti span { font-size: 12.5px; color: #12171a; letter-spacing: .01em; } /* senza descrizione la scheda dei numeri va in RIGA: stessi dati, stessa scanalatura, orizzontale */ .ifc-fatti-riga { display: flex; flex-wrap: wrap; gap: 0 28px; border-left: 0; padding-left: 0; margin: 0; } .ifc-fatti-riga li { padding: 2px 0; } .ifc-fatti-riga li + li { border-top: 0; border-left: 1px dotted #b6bfc6; padding-left: 28px; } .ifc-desc-resto { grid-column: 1 / -1; margin-top: 6px; } .ifc-desc-resto[hidden] { display: none; } .ifc-desc-resto p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; color: #12171a; } @media (min-width: 1024px) { /* da aperto il testo lungo scorre su due colonne: riempie la larghezza senza superare la misura di lettura per colonna */ .ifc-desc-resto { column-count: 2; column-gap: 44px; } .ifc-desc-resto p { break-inside: avoid-column; } } .ifc-desc-piu { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 4px 0; border: 0; background: none; cursor: pointer; font-family: var(--inox-font-body, system-ui, sans-serif); font-size: 13.5px; font-weight: 600; color: #8f0e15; border-bottom: 1px solid rgba(143,14,21,.35); } /* ⚠️ il tema Hello Elementor colora QUALSIASI [type="button"] di magenta su hover e focus con specificita' (0,2,0): senza queste righe Β«Mostra menoΒ» diventa una campitura magenta piena appena lo si preme. Terza volta che quella regola colpisce su questo progetto. */ .ifc-desc-piu:hover, .ifc-desc-piu:focus, .ifc-desc-piu:active { background: none; color: #8f0e15; border-bottom-color: #8f0e15; } .ifc-desc-piu::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; } .ifc-desc-piu[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); } /* ── ordinamento: componente disegnato, non il lo disegna il sistema operativo e nessun CSS lo tocca: per averlo nel linguaggio del sito va sostituito con un componente a mano. Il