/* ============================================================================= MARCA — livello di override sul markup Elementor Generato da applica-ds.py, cancellato il 12/09/2026 insieme alla copia intonsa del mirror: non si rigenera piu'. ⛔ QUESTO FILE SI MODIFICA A MANO, ed e' l'unico posto dove aggiornare il design system applicato al sito. Lo script resta nella storia di git se serve rileggerne la mappatura. I VALORI (colore, font, raggi, ombre) sono gia' stati sostituiti dentro i fogli del sito. Qui stanno solo le regole STRUTTURALI del sistema, che non si possono esprimere come sostituzione di un valore. ============================================================================= */ /* --- divieto 1: nessuna ombra. Il focus non e' un'ombra, e resta. --------- */ *:not(:focus-visible) { box-shadow: none !important; } /* --- divieto 2: raggio solo sui controlli (4px), pillole e segni circolari - */ button, input, select, textarea, .elementor-button, .elementor-field, .elementor-field-textual { border-radius: var(--marca-radius-control) !important; } /* --- tipografia: corpo e interlinea si dichiarano SEMPRE insieme ---------- */ body, p, li, td, .elementor-widget-text-editor { font-family: var(--marca-font-primary); font-size: 16px; line-height: 24px; } small, .elementor-widget-text-editor small, figcaption { font-size: 14px; line-height: 24px; } h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-family: var(--marca-font-primary); font-weight: var(--marca-weight-medium); } /* il dato e il codice vanno sul monospaziato, che e' l'unica seconda famiglia */ code, kbd, samp, pre, .mg-mono { font-family: var(--marca-font-mono); font-size: 16px; line-height: 24px; } /* --- movimento: ogni durata e' un multiplo di T = 40ms -------------------- */ a, button, .elementor-button, input, select, textarea { transition-duration: var(--marca-motion-control); transition-timing-function: var(--marca-ease-state); } .elementor-widget, .elementor-section { transition-duration: var(--marca-motion-panel); transition-timing-function: var(--marca-ease-state); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } } /* --- stati: il fuoco e' visibile e non e' affidato al solo colore --------- */ :focus-visible { outline: var(--marca-focus-width) solid var(--marca-focus-ring); outline-offset: var(--marca-focus-offset); } /* --- azione primaria: bianco su Green/700, la combinazione approvata ------ Bianco su Green/500 vale 2,65 e non e' testo ammesso. */ .elementor-button, button[type="submit"] { background-color: var(--marca-depth); color: var(--marca-text-invert); } .elementor-button:hover, button[type="submit"]:hover { background-color: var(--marca-identity-active); } /* --- separazione: un filo da 1px, mai un gutter (divieto 4) --------------- */ hr, .elementor-divider-separator { border: 0; border-top: var(--marca-border-width) solid var(--marca-border); } /* ⛔ IL PULSANTE «INVIA» ERA BIANCO SU IDENTITY: 2,65:1, sotto il minimo AA di 4,5:1 per il testo ordinario. Misurato il 12/09/2026 da una verifica esterna e riletto dal DOM: testo rgb(255,255,255), sfondo rgb(31,181,115). ⚠️ NON SI CAMBIA LO SFONDO. Il sistema ha un token fatto esattamente per questo: `--marca-text-on-identity`, che vale grafite — e grafite su Identity fa 7,06:1. Lo sfondo Identity e' la scelta giusta per quel pulsante; era il testo a essere sbagliato. Scurire il verde avrebbe funzionato (bianco su Green/700 fa 6,95:1) ma avrebbe cambiato il colore dell'azione, che e' una decisione di marca, non una correzione di accessibilita'. ⚠️ Si mira al pulsante di INVIO di un modulo, non a `.elementor-button` in generale: gli altri richiami del sito stanno su Green/700, dove il bianco e' giusto (6,95:1) e cambiarlo li' peggiorerebbe. */ .elementor-form button[type="submit"], form button[type="submit"].elementor-button, form button[type="submit"].elementor-button .elementor-button-text { color: var(--marca-text-on-identity, #111215) !important; } /* ⛔ IDENTITY SI SCHIARISCE SULL'HOVER (decisione di mp, 12/09/2026). La scala del sistema andava verso lo scuro — `identity-hover` = Green/600, `identity-active` = Green/700 — mentre il testo prescritto su Identity e' grafite. Le due cose si avvicinavano invece di allontanarsi, e nessuna combinazione passava il minimo AA: normale grafite su Green/500 7,06:1 ✅ hover grafite su Green/600 4,48:1 ⛔ (mancava lo standard di 0,02) active grafite su Green/700 2,69:1 ⛔ ⭐ E LA STRADA ERA GIA' SCRITTA NEL SISTEMA. Il blocco del tema SCURO di `tokens.css` fa esattamente questo — `identity-hover: green-400`, `identity-active: green-300` — col commento «gli stati salgono di un gradino perche' il verde profondo, sul fondo scuro, sparisce». Qui il motivo e' un altro (il contrasto col testo grafite) e la direzione e' la stessa: si sale, non si scende. hover grafite su Green/400 8,43:1 ✅ active grafite su Green/300 9,93:1 ✅ ⚠️ SI RIDEFINISCONO I TOKEN, non il colore di un pulsante: cosi' vale per ogni superficie Identity, presente e futura, e resta UNA decisione in UN posto. Il file dei token del design system NON e' stato toccato: quella e' la copia fedele del sistema, e la scelta e' nostra finche' il sistema non la recepisce. */ :root { --marca-identity-hover: var(--marca-green-400); --marca-identity-active: var(--marca-green-300); } /* ── La prosa occupa tutta la fascia, giustificata ─────────────────── Scelta di mp, 14/09/2026: «il testo deve essere giustificato nella larghezza di dove è inserito». ⚠️ CON IL GIUSTIFICATO SERVE LA SILLABAZIONE, altrimenti su righe lunghe il browser allarga gli spazi fra le parole per far quadrare i conti e si aprono i «fiumi» bianchi. In italiano lo si vede subito su parole come «post-polimerizzazione»: senza `hyphens` quella riga resta mezza vuota. La sillabazione funziona solo se l'elemento dichiara la lingua, e le pagine tradotte hanno gia' `lang` giusto (`cuci_sito` lo imposta per lingua). ⚠️ E IL CONTENITORE VA APERTO, non solo il testo: la fascia del DLP nasce a due colonne da 620px e la seconda e' stata tolta il 14/09. Senza aprire la colonna, il testo resterebbe largo meta' fascia comunque. */ .marca-prosa, .marca-prosa > .elementor-widget-container { width: 100% !important; max-width: 100% !important; } .marca-prosa p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } /* La colonna rimasta a meta' torna piena. */ .marca-colonna-intera { width: 100% !important; max-width: 100% !important; } /* ── La fascia MJF allineata alle altre (14/09/2026) ──────────────── Segnalato da mp guardando la pagina: «HP MJF ha un bordo grigio che è più largo della colonna base del titolo/menu». Da dove veniva. Il contenitore della fascia MJF (`5d28147`) e quello della SLA (`7bfad89`) hanno, in Elementor, `background-color:#E9E9E987` e `padding 100px/140px`; FDM (`ab8d7c6`) e DLP (`4129700`) no. Quel rettangolo grigio parte 140px piu' a sinistra della colonna in cui stanno il titolo e il menu, quindi si vede sporgere da entrambi i lati: non e' un bordo voluto, e' lo sfondo di un contenitore piu' largo del contenuto. ⚠️ Si toglie QUI e non nel CSS di Elementor: `post-1744.css` e' rigenerato da WordPress a ogni salvataggio della pagina e riscriverebbe la modifica senza dirlo. */ .elementor-1744 .elementor-element.elementor-element-5d28147:not(.elementor-motion-effects-element-type-background) { background-color: transparent; } .elementor-1744 .elementor-element.elementor-element-5d28147 { --padding-top: 0px; --padding-bottom: 0px; } /* Stessa cosa sulla fascia SLA (`7bfad89`), che aveva lo stesso sfondo e lo stesso padding: mp l'ha vista subito dopo l'MJF. Ora nessuna delle quattro fasce ha un rettangolo grigio piu' largo della colonna. */ .elementor-1744 .elementor-element.elementor-element-7bfad89:not(.elementor-motion-effects-element-type-background) { background-color: transparent; } .elementor-1744 .elementor-element.elementor-element-7bfad89 { --padding-top: 0px; --padding-bottom: 0px; } /* Lo stacco fra la descrizione e le schede materiale, uguale alle altre. Il blocco delle schede MJF sta dentro un contenitore in piu' (`f03134b`, 40px sopra e 60px sotto) che nella DLP e nella SLA non c'e': il widget e' fratello diretto. Da qui i ~100px di bianco in mezzo che si vedevano solo sulla MJF. Il ritmo verticale lo da' gia' il `gap:20px` del contenitore padre, come nelle altre fasce. */ .elementor-1744 .elementor-element.elementor-element-f03134b { --padding-top: 0px; --padding-bottom: 0px; } /* Le schede materiale FDM hanno la stessa struttura di MJF, SLA e DLP (14/09/2026, chiesto da mp: «titolo di ogni materiale cliccabile, grafico delle caratteristiche, sezione con Ideale per, vantaggi ecc.»). Le otto schede statiche stavano dentro `3622966`, che ha uno sfondo `--marca-neutral-100` e un raggio: un riquadro chiaro che nelle altre tre fasce non c'e'. Il blocco interattivo porta gia' i suoi fondi. */ .elementor-1744 .elementor-element.elementor-element-3622966:not(.elementor-motion-effects-element-type-background) { background-color: transparent; } /* ── La panoramica larga come la colonna (14/09/2026) ────────────────── Segnalato da mp: il riquadro finiva ~230px prima del bordo della colonna, mentre l'immagine sopra ci arriva. Perche'. Il widget sta dentro il contenitore `1bb98ff`, che Elementor dichiara `--flex-direction:row` con `--container-widget-width:initial`. `initial` su `width` vale `auto`: in una riga flex un elemento `auto` si dimensiona sul CONTENUTO, non sul contenitore. Prima non si vedeva perche' i due riquadri erano due contenitori con `--width:40%` e `--width:60%` dichiarati; il widget HTML che li ha sostituiti quelle percentuali non le ha, e si e' ristretto su quanto gli serviva. ⚠️ Non basta `width:100%`: in un contenitore flex vince la base flessibile. Servono tutte e tre. */ .elementor-1744 .elementor-element.elementor-element-panorama { flex: 1 1 100%; width: 100%; max-width: 100%; } /* ⚠️ LA CARD FAST TOOLING MOSTRAVA UNO STAMPO D'ACCIAIO COMPLETO. `Fast-Tooling-1.webp` e' uno stampo tradizionale finito — matrice, canali di raffreddamento, la sigla «2002» incisa: cioe' proprio la cosa che il fast tooling permette di NON fare subito. Il fast tooling produce INSERTI rapidi dentro un telaio, e quella distinzione e' l'intero argomento di vendita della tecnologia. `im.webp` e' la foto giusta, e il sito ce l'aveva gia' su /fast-tooling/: telaio in alluminio con dentro l'inserto stampato bianco, tasselli ed estrattori. E' l'unica immagine che rende visibile la differenza. ⚠️ QUI, NON in post-1369.css: quel file lo rigenera WordPress e la modifica sparirebbe al primo salvataggio da Elementor. marca-overrides.css e' caricato DOPO (riga 93 contro riga 53), quindi a parita' di specificita' vince questo. ⚠️ Il selettore ripete `.elementor-1369 .elementor-element` perche' la regola originale vale 4 classi: scriverlo corto non basterebbe. Un precedente tentativo puntava a `.elementor-element-03775ab` da solo e non ha mai avuto effetto: la scriveva senza il prefisso `.elementor-1369`. La nota che lo racconta sta in `sito/sito-pubblico.py`. */ .elementor-1369 .elementor-element.elementor-element-03775ab:not(.elementor-motion-effects-element-type-background), .elementor-1369 .elementor-element.elementor-element-03775ab > .elementor-motion-effects-container > .elementor-motion-effects-layer { /* ⚠️ LA VELATURA NON E' UN VEZZO: SENZA, IL TITOLO SPARISCE. Titolo, icona e sottotitolo di queste card sono BIANCHI, e funzionano sulle altre due solo perche' quelle foto sono scure di loro (una stampante in ombra, un pezzo nero). `im.webp` e' un telaio d'alluminio su fondo bianco: messa liscia, «FAST TOOLING» diventa bianco su bianco. Verificato a schermo. La sfumatura scurisce solo la fascia bassa, dove sta il testo, e lascia l'inserto in chiaro: e' cio' che le altre due card ottengono per caso. */ background-image: linear-gradient(to top, rgba(17, 18, 21, 0.78) 0%, rgba(17, 18, 21, 0.45) 28%, rgba(17, 18, 21, 0.00) 55%), url("/wp-content/uploads/2026/05/im.webp"); } /* Fascia fotografica di /injection-moulding/: la ripresa aerea al posto della foto di reparto. Richiesta di mp il 16/09/2026. ⚠️ QUI, NON in post-1754.css: quel file lo rigenera WordPress. ⚠️ NON SI DEFORMA, e non serve fare niente perche' non si deformi: `background-size: cover` RITAGLIA, non stira mai. L'immagine e' 2560×1440 (rapporto 1,78) contro i 2560×1376 (1,86) di prima — quasi uguali — ma la fascia e' molto piu' larga che alta, quindi di qualunque foto si vede solo una striscia centrale. E' il taglio a dover essere guardato, non la proporzione. */ .elementor-1754 .elementor-element.elementor-element-4ecb33a:not(.elementor-motion-effects-element-type-background), .elementor-1754 .elementor-element.elementor-element-4ecb33a > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-image: url("/wp-content/uploads/2026/05/DJI_0040-copia.webp"); }