/* Theme Name: PHAMM Engineering — Brandbook Theme URI: https://phammeng.com Description: Child theme di Salient. Implementa il PHAMM Engineering Brand Identity System v1.0 (luglio 2026). Questo foglio copre la sezione 04 — Tipografia, e i token di colore necessari a farla leggere correttamente. Superfici, componenti e motion restano da implementare. Author: Ottobix Author URI: https://www.ottobix.com Template: salient Version: 1.0.0 Text Domain: phamm-child */ /* ========================================================================== PHAMM ENGINEERING — BRAND IDENTITY SYSTEM v1.0 04 — Tipografia Due famiglie, mai una terza. Display : DM Sans — titoli, numeri, CTA, claim Testo : Instrument Sans — body, navigazione, tabelle Ogni regola che tocca un selettore di Salient porta !important: il tema stampa la propria dynamic-css inline dopo i fogli in coda, e senza !important vincerebbe lui. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKEN -------------------------------------------------------------------------- */ :root { /* Famiglie */ --ph-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ph-text: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Pesi */ --ph-w-regular: 400; --ph-w-medium: 500; --ph-w-semibold: 600; --ph-w-bold: 700; --ph-w-extrabold: 800; /* Scala tipografica — valori desktop del brandbook */ --ph-size-display: clamp(2.5rem, 5.2vw, 4.5rem); /* 40 → 72px */ --ph-size-h1: 2.5rem; /* 40px */ --ph-size-h2: 1.875rem; /* 30px */ --ph-size-h3: 1.375rem; /* 22px */ --ph-size-h4: 1.125rem; /* 18px */ --ph-size-h5: 1rem; /* 16px */ --ph-size-h6: 0.875rem; /* 14px */ --ph-size-claim: 1.75rem; /* 28px */ --ph-size-body: 1.0625rem; /* 17px */ --ph-size-eyebrow: 0.75rem;/* 12px */ --ph-size-caption: 0.8125rem; /* 13px */ /* Interlinee */ --ph-lh-display: 1.05; --ph-lh-h1: 1.1; --ph-lh-h2: 1.2; --ph-lh-h3: 1.3; --ph-lh-h4: 1.4; --ph-lh-body: 1.7; /* Spaziature */ --ph-ls-display: -0.025em; --ph-ls-eyebrow: 0.2em; /* tracking +20%, riservato all'eyebrow */ /* Colori — Brandbook 03 */ --ph-blu: #285AA6; /* Blu PHAMM — azione, link, CTA */ --ph-azzurro: #69A0BF; /* Azzurro PHAMM — solo su fondo scuro */ --ph-fondo: #10294B; /* Blu Fondo — titoli, fondi scuri */ --ph-grigio: #5F7085; /* Grigio Aria — caption su bianco, disabilitati */ --ph-camera: #EAF0F7; /* Azzurro Camera — superfici quiete */ --ph-grafite: #313840; /* Grafite — corpo del testo */ --ph-bianco: #FFFFFF; /* Misura del testo: 60–70 caratteri per riga */ --ph-measure: 66ch; } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body, body.material, body #search-outer input, .container-wrap, .wpb_text_column, .wpb_text_column p, p, li, dd, dt, td, th, figcaption, label, .widget, #sidebar, #footer-outer, #footer-widgets { font-family: var(--ph-text) !important; } body { font-size: var(--ph-size-body) !important; font-weight: var(--ph-w-regular) !important; line-height: var(--ph-lh-body) !important; color: var(--ph-grafite) !important; letter-spacing: 0 !important; /* Mai un obliquo o un grassetto sintetizzati dal browser: il claim va in corsivo VERO, non in finto obliquo. */ font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } p { font-size: var(--ph-size-body) !important; line-height: var(--ph-lh-body) !important; } strong, b { font-weight: var(--ph-w-semibold) !important; } em, i, cite { font-family: inherit !important; font-style: italic !important; } /* -------------------------------------------------------------------------- 3. TITOLI — sempre DM Sans -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, body h1, body h2, body h3, body h4, body h5, body h6, .row .col h1, .row .col h2, .row .col h3, .row .col h4, .row .col h5, .row .col h6, #page-header-bg h1, #page-header-bg h2, .nectar-post-grid-item h2, .nectar-post-grid-item h3, .wpb_wrapper h1, .wpb_wrapper h2, .wpb_wrapper h3, .wpb_wrapper h4, .wpb_wrapper h5, .wpb_wrapper h6, #footer-outer h1, #footer-outer h2, #footer-outer h3, #footer-outer h4, #footer-outer h5, #footer-outer h6 { font-family: var(--ph-display) !important; color: var(--ph-fondo); letter-spacing: 0; text-transform: none !important; } h1, body h1, .row .col h1, #page-header-bg h1 { font-size: var(--ph-size-h1) !important; font-weight: var(--ph-w-bold) !important; line-height: var(--ph-lh-h1) !important; } h2, body h2, .row .col h2 { font-size: var(--ph-size-h2) !important; font-weight: var(--ph-w-bold) !important; line-height: var(--ph-lh-h2) !important; } h3, body h3, .row .col h3 { font-size: var(--ph-size-h3) !important; font-weight: var(--ph-w-semibold) !important; line-height: var(--ph-lh-h3) !important; } h4, body h4, .row .col h4 { font-size: var(--ph-size-h4) !important; font-weight: var(--ph-w-semibold) !important; line-height: var(--ph-lh-h4) !important; } h5, body h5, .row .col h5 { font-size: var(--ph-size-h5) !important; font-weight: var(--ph-w-semibold) !important; line-height: var(--ph-lh-h4) !important; } h6, body h6, .row .col h6 { font-size: var(--ph-size-h6) !important; font-weight: var(--ph-w-semibold) !important; line-height: var(--ph-lh-h4) !important; } /* -------------------------------------------------------------------------- 4. NAVIGAZIONE — Instrument Sans Il brandbook assegna a Instrument Sans "body, navigazione, tabelle". -------------------------------------------------------------------------- */ #header-outer #top nav > ul > li > a, #header-outer #top nav > ul > li > a .menu-title-text, #header-outer .sf-menu > li > a, #header-outer .sf-menu > li > a .menu-title-text, #top nav > ul > li > a, body #header-outer .sf-menu li a { font-family: var(--ph-text) !important; font-weight: var(--ph-w-medium) !important; font-size: 0.9375rem !important; /* 15px */ line-height: 1.5 !important; letter-spacing: 0 !important; text-transform: none !important; } /* Colore delle voci di menu: Grafite su bianco (11,86:1), Blu PHAMM allo stato attivo e al passaggio (6,76:1). Salient di suo usa #555 e il proprio blu. */ #header-outer #top nav > ul > li > a, #header-outer .sf-menu > li > a, #header-outer #top nav > ul > li > a .menu-title-text { color: var(--ph-grafite) !important; } #header-outer #top nav > ul > li > a:hover, #header-outer #top nav > ul > li.current-menu-item > a, #header-outer #top nav > ul > li.current-menu-ancestor > a, #header-outer #top nav > ul > li.sfHover > a, #header-outer .sf-menu > li > a:hover, #header-outer #top nav > ul > li > a:hover .menu-title-text, #header-outer #top nav > ul > li.current-menu-item > a .menu-title-text { color: var(--ph-blu) !important; } /* Dropdown e megamenu */ #header-outer .sf-menu li ul li a, #header-outer .sf-menu li ul li a .menu-title-text, #header-outer .sf-menu .sub-menu li a, #header-outer .megamenu > ul > li > a { font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; font-size: 0.875rem !important; /* 14px */ line-height: 1.5 !important; letter-spacing: 0 !important; text-transform: none !important; } /* Intestazioni di colonna del megamenu: sono titoli, quindi DM Sans */ #header-outer .megamenu > ul > li > a, #header-outer .megamenu .sub-menu .menu-item-megamenu-parent > a { font-family: var(--ph-display) !important; font-weight: var(--ph-w-semibold) !important; font-size: 0.8125rem !important; letter-spacing: var(--ph-ls-eyebrow) !important; text-transform: uppercase !important; } /* Logo testuale — finché non arriva il vettoriale della fenice. DM Sans e la stessa costruzione geometrica del wordmark PHAMM. */ #header-outer #logo, #header-outer #logo span, .no-text-logo #logo { font-family: var(--ph-display) !important; font-weight: var(--ph-w-bold) !important; letter-spacing: -0.015em !important; color: var(--ph-fondo) !important; } /* Off canvas */ #slide-out-widget-area .off-canvas-menu-container li a, #slide-out-widget-area .inner .off-canvas-menu-container li a { font-family: var(--ph-display) !important; font-weight: var(--ph-w-bold) !important; letter-spacing: -0.015em !important; } #slide-out-widget-area .menu-item-description, #slide-out-widget-area .widget { font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; } /* -------------------------------------------------------------------------- 5. PAGE HEADER (titolo di pagina Salient) -------------------------------------------------------------------------- */ #page-header-bg h1, #page-header-wrap h1, .page-header-no-bg h1 { font-family: var(--ph-display) !important; font-weight: var(--ph-w-bold) !important; font-size: var(--ph-size-h1) !important; line-height: var(--ph-lh-h1) !important; letter-spacing: 0 !important; text-transform: none !important; } #page-header-bg .subheader, #page-header-wrap .subheader { font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; font-size: var(--ph-size-body) !important; line-height: var(--ph-lh-body) !important; letter-spacing: 0 !important; } /* -------------------------------------------------------------------------- 6. CTA E PULSANTI — DM Sans 700 -------------------------------------------------------------------------- */ .nectar-button, body .nectar-button, .nectar-button span, a.button, input[type="submit"], input[type="button"], button, .wpb_button, .wpcf7-submit { font-family: var(--ph-display) !important; font-weight: var(--ph-w-bold) !important; letter-spacing: 0 !important; text-transform: none !important; } /* Corpo della CTA: il brandbook fissa il carattere e il peso, non la misura. 15px e la misura minima con cui una CTA in DM Sans 700 regge accanto a un corpo testo da 17px. Valore derivato, non prescritto. */ .nectar-button, body .nectar-button, body .nectar-button.large, a.button, input[type="submit"], button, .wpcf7-submit { font-size: 0.9375rem !important; line-height: 1.4 !important; } /* -------------------------------------------------------------------------- 7. FORM — Instrument Sans -------------------------------------------------------------------------- */ input, textarea, select, .wpcf7 input, .wpcf7 textarea, .wpcf7 select, body input[type="text"], body input[type="email"], body input[type="tel"], body textarea { font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; font-size: 1rem !important; line-height: 1.5 !important; color: var(--ph-grafite) !important; } ::placeholder { font-family: var(--ph-text) !important; color: var(--ph-grigio) !important; opacity: 1; } label, .wpcf7 label { font-family: var(--ph-text) !important; font-weight: var(--ph-w-medium) !important; font-size: 0.875rem !important; color: var(--ph-grafite) !important; } /* -------------------------------------------------------------------------- 8. TABELLE — cifre tabellari per collaudi e listini -------------------------------------------------------------------------- */ table, table td, table th, .ph-tabular { font-family: var(--ph-text) !important; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } table th { font-weight: var(--ph-w-semibold) !important; } /* -------------------------------------------------------------------------- 9. CITAZIONI -------------------------------------------------------------------------- */ blockquote, body blockquote { font-family: var(--ph-text) !important; font-style: italic !important; font-weight: var(--ph-w-regular) !important; line-height: 1.6 !important; color: var(--ph-grafite) !important; } /* -------------------------------------------------------------------------- 10. CLASSI DEL SISTEMA Elementi del brandbook che non hanno un equivalente nativo in Salient. Si applicano come classe sui moduli WPBakery o nel markup. -------------------------------------------------------------------------- */ /* Display — la misura da copertina, 56–72px */ .ph-display { font-family: var(--ph-display) !important; font-weight: var(--ph-w-extrabold) !important; font-size: var(--ph-size-display) !important; line-height: var(--ph-lh-display) !important; letter-spacing: var(--ph-ls-display) !important; color: var(--ph-fondo); text-wrap: balance; } /* Eyebrow — l'unico posto dove il tracking e largo */ .ph-eyebrow { font-family: var(--ph-text) !important; font-weight: var(--ph-w-medium) !important; font-size: var(--ph-size-eyebrow) !important; line-height: 1.4 !important; letter-spacing: var(--ph-ls-eyebrow) !important; text-transform: uppercase !important; color: var(--ph-blu); display: block; } /* Claim — corsivo regular, MAI bold, mai fra virgolette quando e firma */ .ph-claim { font-family: var(--ph-display) !important; font-weight: var(--ph-w-regular) !important; font-style: italic !important; font-size: var(--ph-size-claim) !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--ph-blu); } /* Il claim non diventa mai un grassetto, nemmeno se qualcuno lo avvolge in */ .ph-claim strong, .ph-claim b { font-weight: var(--ph-w-regular) !important; } /* Stat / KPI — cifre grandi, sempre tabellari */ .ph-stat { font-family: var(--ph-display) !important; font-weight: var(--ph-w-extrabold) !important; font-size: clamp(2rem, 4vw, 3.5rem) !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: var(--ph-blu); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; display: block; } .ph-stat-label { font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; font-size: var(--ph-size-caption) !important; line-height: 1.4 !important; color: var(--ph-grafite); display: block; } /* Caption — 13px. Grigio Aria SOLO su bianco: su Azzurro Camera non passa 4,5:1 */ .ph-caption { font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; font-size: var(--ph-size-caption) !important; line-height: 1.5 !important; color: var(--ph-grigio); } .ph-caption--on-tint { color: var(--ph-grafite); } /* Misura: 60–70 caratteri per riga. Da applicare al blocco di testo. */ .ph-measure, .ph-measure p { max-width: var(--ph-measure); } /* Utility di famiglia, per i casi limite */ .ph-font-display { font-family: var(--ph-display) !important; } .ph-font-text { font-family: var(--ph-text) !important; } /* -------------------------------------------------------------------------- 11. TESTO SU FONDO SCURO Su Blu Fondo l'azzurro passa (5,12:1); su bianco no (2,84:1). -------------------------------------------------------------------------- */ .ph-on-dark, .ph-on-dark p, .ph-on-dark li { color: var(--ph-camera) !important; } .ph-on-dark h1, .ph-on-dark h2, .ph-on-dark h3, .ph-on-dark h4, .ph-on-dark h5, .ph-on-dark h6, .ph-on-dark .ph-display { color: var(--ph-bianco) !important; } .ph-on-dark .ph-eyebrow, .ph-on-dark .ph-caption { color: var(--ph-azzurro) !important; } /* -------------------------------------------------------------------------- 12. LINK -------------------------------------------------------------------------- */ body a { font-family: inherit; color: var(--ph-blu); } body a:hover { color: var(--ph-fondo); } /* -------------------------------------------------------------------------- 13. RESPONSIVE Mobile-first dichiarato dal brandbook: la scala scende, non si comprime. Breakpoint allineati a quelli di Salient (1000px / 690px). -------------------------------------------------------------------------- */ @media only screen and (max-width: 1300px) and (min-width: 1000px) { :root { --ph-size-h1: 2.25rem; /* 36px */ --ph-size-h2: 1.75rem; /* 28px */ } } @media only screen and (max-width: 999px) { :root { --ph-size-h1: 2rem; /* 32px */ --ph-size-h2: 1.625rem; /* 26px */ --ph-size-h3: 1.25rem; /* 20px */ --ph-size-claim: 1.5rem; /* 24px */ } } @media only screen and (max-width: 690px) { :root { --ph-size-h1: 1.75rem; /* 28px */ --ph-size-h2: 1.5rem; /* 24px */ --ph-size-h3: 1.1875rem; /* 19px */ --ph-size-h4: 1.0625rem; /* 17px */ --ph-size-body: 1rem; /* 16px */ --ph-size-claim: 1.375rem; /* 22px */ } .ph-eyebrow { letter-spacing: 0.16em !important; } } /* -------------------------------------------------------------------------- 15. COLORI DELL'HEADER Salient deriva underline, hover e stati attivi da --nectar-accent-color, che di default vale #3452ff. Lo riportiamo al Blu PHAMM. Il fondo pieno dei dropdown di Salient viola inoltre la regola del brandbook 09 ("i fondi colorati sono sempre trasparenze dello stesso colore: 7-9% per un'area"): diventa una velatura all'8%. -------------------------------------------------------------------------- */ :root, html body { --nectar-accent-color: #285AA6; --nectar-accent-color-dark: #10294B; --ph-tint-8: rgba(40, 90, 166, 0.08); --ph-tint-12: rgba(40, 90, 166, 0.12); } /* Animated underline delle voci di primo livello */ #header-outer[data-lhe="animated_underline"] #top nav > ul > li > a .menu-title-text::after, #header-outer[data-lhe="animated_underline"] nav > ul > li:not([class*="button_"]) > a .menu-title-text::after, #header-outer .mobile-header li:not([class*="button_"]) > a .menu-title-text::after, #header-outer #top nav > ul > li > a .menu-title-text::after { background-color: var(--ph-blu) !important; height: 2px !important; } /* Superficie del dropdown: bianca, non il grigio scuro di Salient */ #header-outer .sf-menu li ul, #header-outer .sf-menu li ul li, #header-outer nav > ul > .megamenu > ul, #header-outer nav > ul > .megamenu > ul ul { background-color: var(--ph-bianco) !important; } #header-outer .sf-menu li ul { border: 1px solid rgba(16, 41, 75, 0.12) !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(16, 41, 75, 0.10) !important; padding: 8px !important; /* mai overflow:hidden qui: taglierebbe il terzo livello del menu Prodotti */ overflow: visible !important; /* con icona + gap le etichette lunghe non stanno nei 14em di Salient */ width: auto !important; min-width: 252px !important; } #header-outer .sf-menu li ul li { width: auto !important; min-width: 100% !important; } #header-outer .sf-menu li ul li > a { white-space: nowrap !important; padding-right: 22px !important; } /* Voci del dropdown a riposo */ #header-outer .sf-menu li ul li a, #header-outer .sf-menu li ul li a .menu-title-text { color: var(--ph-grafite) !important; background-color: transparent !important; } #header-outer .sf-menu li ul li a { border-radius: 8px !important; } /* Hover e stato corrente: velatura all'8%, testo Blu PHAMM (6,76:1) */ #header-outer .sf-menu li ul li a:hover, #header-outer .sf-menu li ul li.sfHover > a, #header-outer .sf-menu li ul li.current-menu-item > a, #header-outer .sf-menu li ul li.current-menu-ancestor > a, #header-outer nav > ul > .megamenu > ul ul li a:hover { background-color: var(--ph-tint-8) !important; color: var(--ph-blu) !important; } #header-outer .sf-menu li ul li a:hover .menu-title-text, #header-outer .sf-menu li ul li.sfHover > a .menu-title-text, #header-outer .sf-menu li ul li.current-menu-item > a .menu-title-text { color: var(--ph-blu) !important; } /* Freccine dei sottomenu */ #header-outer .sf-menu .sf-sub-indicator i, #header-outer .sf-menu li ul .sf-sub-indicator i { color: currentColor !important; } /* Guardia di specificita. salient-dynamic-styles.css inchioda il proprio accento con !important su un selettore piu specifico del nostro, e vince anche dopo aver cambiato l'accent color nelle opzioni del tema. Queste regole ne ricalcano la forma e la superano, così il dropdown resta corretto qualunque cosa rigeneri Salient. */ html body #header-outer #top nav > ul > li:not(.megamenu) ul li > a:hover, html body #header-outer #top nav > ul > li:not(.megamenu) ul li.sfHover > a, html body #header-outer #top nav > ul > li:not(.megamenu) ul li.current-menu-item > a, html body #header-outer #top nav > ul > li:not(.megamenu) ul li.current-menu-ancestor > a, html body #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) .sfHover > a, html body #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul a:hover { background-color: var(--ph-tint-8) !important; color: var(--ph-blu) !important; } html body #header-outer #top nav > ul > li:not(.megamenu) ul li > a:hover .menu-title-text, html body #header-outer #top nav > ul > li:not(.megamenu) ul li.sfHover > a .menu-title-text, html body #header-outer #top nav > ul > li:not(.megamenu) ul li.current-menu-item > a .menu-title-text, html body #header-outer #top nav > ul > li:not(.megamenu) ul li.current-menu-ancestor > a .menu-title-text { color: var(--ph-blu) !important; } /* La voce corrente dentro il dropdown. Qui la guardia sopra non bastava e il bug era visibile: sulla pagina di un settore, la sua voce nel menu Settori diventava un confetto Blu PHAMM pieno con il testo Blu PHAMM sopra — invisibile. Il motivo e aritmetica di specificita. La regola di Salient e #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul .current-menu-item > a che vale (2 id, 3 classi, 5 elementi): l'attributo del primo :not, la classe del secondo e .current-menu-item. La mia guardia si fermava a due classi, e il terzo posto si confronta prima del numero di elementi: quindi perdeva sempre, per quanti elementi le aggiungessi. Sull'hover invece vinceva, perche la regola hover di Salient ha due classi come la mia — ed e per questo che il difetto si vedeva solo sulla pagina corrente. Qui ricalco la forma di Salient e aggiungo html body: due elementi in piu a parita di classi, (2,3,7) contro (2,3,5). */ html body #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul .current-menu-item > a, html body #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul .current-menu-ancestor > a, html body #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul .current_page_item > a { background-color: var(--ph-tint-8) !important; color: var(--ph-blu) !important; /* la pagina in cui sei si distingue dal semplice hover con il peso, non con un fondo piu carico: il brandbook tiene le velature fra il 7 e il 9%. */ font-weight: 500 !important; } html body #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul .current-menu-item > a .menu-title-text, html body #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul .current-menu-ancestor > a .menu-title-text, html body #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul .current_page_item > a .menu-title-text { color: var(--ph-blu) !important; } /* Stesso trattamento per le voci di primo livello */ html body #header-outer #top nav > ul > li:not(.megamenu) > a:hover, html body #header-outer #top nav > ul > li.sfHover > a, html body #header-outer #top nav > ul > li.current-menu-item > a, html body #header-outer #top nav > ul > li.current-menu-ancestor > a { background-color: transparent !important; color: var(--ph-blu) !important; } /* -------------------------------------------------------------------------- 16. ICONOGRAFIA DEI DROPDOWN Brandbook 09: griglia 24, tratto 2px, giunzioni arrotondate, mai piene, un solo colore. Mai icon font, mai emoji. Ogni SVG entra come CSS mask, non come immagine: il disegno prende currentColor, quindi vira in Blu PHAMM insieme al testo al passaggio. Un solo blocco di regole, un --ph-ico per voce. -------------------------------------------------------------------------- */ #header-outer .sf-menu li ul li > a { display: flex !important; align-items: center !important; gap: 10px !important; } #header-outer .sf-menu li ul li > a::before { content: ''; flex: 0 0 20px; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--ph-ico, none) center / 20px 20px no-repeat; mask: var(--ph-ico, none) center / 20px 20px no-repeat; opacity: 0.7; transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } #header-outer .sf-menu li ul li > a:hover::before, #header-outer .sf-menu li ul li.current-menu-item > a::before, #header-outer .sf-menu li ul li.current-menu-ancestor > a::before { opacity: 1; } /* Le voci senza icona assegnata non lasciano un vuoto */ #header-outer .sf-menu li ul li > a:not([style*="--ph-ico"]) { gap: 10px; } /* -- una regola per voce ---------------------------------------------------- */ /* chi-siamo — Lo stabilimento di Pozzo d'Adda */ #header-outer .sf-menu li ul li > a:is([href$="/azienda/chi-siamo/"],[href$="/en/company/about-us/"],[href$="/es/empresa/quienes-somos/"],[href$="/fr/entreprise/qui-sommes-nous/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21h20 M4.5 21V9.5l4.5 3v-3l4.5 3V6.5h6V21 M17 10.5h1.5 M17 14h1.5 M7 15h3v6H7z'/%3E%3C/svg%3E"); } /* perche-sceglierci — Garanzia verificata */ #header-outer .sf-menu li ul li > a:is([href$="/azienda/perche-sceglierci/"],[href$="/en/company/why-choose-us/"],[href$="/es/empresa/por-que-elegirnos/"],[href$="/fr/entreprise/pourquoi-nous-choisir/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.4-3.2 7.6-7.5 9-4.3-1.4-7.5-4.6-7.5-9V6z M8.8 11.8l2.4 2.4 4-4.4'/%3E%3C/svg%3E"); } /* certificazioni-qualita — Certificato con sigillo */ #header-outer .sf-menu li ul li > a:is([href$="/azienda/certificazioni-qualita/"],[href$="/en/company/certifications-and-quality/"],[href$="/es/empresa/certificaciones-calidad/"],[href$="/fr/entreprise/certifications-qualite/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21h4 M13.5 3L19 8.5V11 M13.5 3v5.5H19 M8 11h5 M8 14.5h3.5 M16.5 17.2a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2z M14.8 16.6V21l1.7-1.2 1.7 1.2v-4.4'/%3E%3C/svg%3E"); } /* lavora-con-noi — Tesserino di stabilimento */ #header-outer .sf-menu li ul li > a:is([href$="/azienda/lavora-con-noi/"],[href$="/en/company/work-with-us/"],[href$="/es/empresa/trabaja-con-nosotros/"],[href$="/fr/entreprise/travailler-avec-nous/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z M9.8 7V5.2a2.2 2.2 0 0 1 4.4 0V7 M8.7 13.6a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2z M6.2 17.2c0-1.4 1.1-2.5 2.5-2.5s2.5 1.1 2.5 2.5 M14 11.5h4 M14 15h3'/%3E%3C/svg%3E"); } /* assistenza-manutenzione — Chiave di manutenzione */ #header-outer .sf-menu li ul li > a:is([href$="/servizi/assistenza-manutenzione/"],[href$="/en/services/service-and-maintenance/"],[href$="/es/servicios/asistencia-mantenimiento/"],[href$="/fr/services/assistance-maintenance/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 4.2a5.2 5.2 0 0 1-6.6 6.6L6.4 18.2a2.2 2.2 0 1 1-3.1-3.1l7.4-7.4a5.2 5.2 0 0 1 6.6-6.6l-3 3 .5 3.1 3.1.5z'/%3E%3C/svg%3E"); } /* certificazione-validazione — Contaparticelle */ #header-outer .sf-menu li ul li > a:is([href$="/servizi/certificazione-validazione/"],[href$="/en/services/certification-and-qualification/"],[href$="/es/servicios/certificacion-cualificacion/"],[href$="/fr/services/certification-qualification/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8.5h10a1 1 0 0 1 1 1v10.5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9.5a1 1 0 0 1 1-1z M12 8.5V5.2A2.2 2.2 0 0 1 14.2 3H18 M8.5 11.5h7v4h-7z M9 18.5h1.5 M13.5 18.5H15'/%3E%3C/svg%3E"); } /* global-contractor — Planimetria di cantiere */ #header-outer .sf-menu li ul li > a:is([href$="/servizi/global-contractor/"],[href$="/en/services/global-contractor/"],[href$="/es/servicios/global-contractor/"],[href$="/fr/services/global-contractor/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5h18v15H3z M10 4.5v6.5 M10 11h11 M10 15h5v4.5 M3 11h4'/%3E%3C/svg%3E"); } /* camere-bianche — Camera bianca con flusso laminare */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/camere-bianche/"],[href$="/en/products/cleanrooms/"],[href$="/es/productos/salas-blancas/"],[href$="/fr/produits/salles-blanches/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5h17v17h-17z M3.5 8h17 M8 10.5v6 M6.9 15.4 8 16.6l1.1-1.2 M12 10.5v6 M10.9 15.4 12 16.6l1.1-1.2 M16 10.5v6 M14.9 15.4 16 16.6l1.1-1.2'/%3E%3C/svg%3E"); } /* softwall — Isola softwall a tende */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/softwall/"],[href$="/en/products/softwall/"],[href$="/es/productos/softwall/"],[href$="/fr/produits/softwall/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5h19 M5 4.5v15 M19 4.5v15 M8.5 4.5v13.5 M12 4.5v14.5 M15.5 4.5v13.5 M5 19.5h14'/%3E%3C/svg%3E"); } /* hardwall — Parete rigida a pannelli */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/hardwall/"],[href$="/en/products/hardwall/"],[href$="/es/productos/hardwall/"],[href$="/fr/produits/hardwall/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v16H3z M9 4v16 M15 4v16 M12.7 12.2h.6'/%3E%3C/svg%3E"); } /* isolatore compatto — Camera compatta con passamateriali */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/isolatore-compatto/"],[href$="/en/products/compact-isolator/"],[href$="/es/productos/aislador-compacto/"],[href$="/fr/produits/isolateur-compact/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5h18v13H3z M3 9h18 M8.5 12v4 M15.5 12v4 M11 13.5h2'/%3E%3C/svg%3E"); } /* modulo filtrante PRPH — Filtratore su ruote */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/modulo-filtrante-prph/"],[href$="/en/products/standalone-prph-filter-module/"],[href$="/es/productos/modulo-filtrante-prph/"],[href$="/fr/produits/module-filtrant-prph/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12v14H6z M6 8h12 M6 12h12 M8.5 20.5h.01 M15.5 20.5h.01 M12 4V2'/%3E%3C/svg%3E"); } /* cappe — Cappa a flusso laminare */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/cappe/"],[href$="/en/products/laboratory-hoods/"],[href$="/es/productos/campanas/"],[href$="/fr/produits/hottes/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3.5h16v4.5H4z M5.5 8v11 M18.5 8v11 M3 19.5h18 M9 10.5v4.5 M7.9 13.9 9 15.1l1.1-1.2 M15 10.5v4.5 M13.9 13.9 15 15.1l1.1-1.2'/%3E%3C/svg%3E"); } /* attrezzature — Componenti modulari */ #header-outer .sf-menu li ul li.ph-ico-attrezzature > a, #header-outer .sf-menu li ul li.menu-item-85 > a { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6v6H4z M14 4h6v6h-6z M4 14h6v6H4z M14 14h6v6h-6z'/%3E%3C/svg%3E"); } /* arredi-inox — Tavolo inox da cleanroom */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/arredi-inox/"],[href$="/en/products/stainless-steel-furniture-for-cleanrooms/"],[href$="/es/productos/mobiliario-inox/"],[href$="/fr/produits/mobilier-inox/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9h19 M2.5 9v2.2h19V9 M5 11.2V20 M19 11.2V20 M5 16h14'/%3E%3C/svg%3E"); } /* passacarrelli — Passacarrello a due porte */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/passacarrelli/"],[href$="/en/products/trolley-pass-throughs-and-air-showers/"],[href$="/es/productos/pasacarros/"],[href$="/fr/produits/sas-chariot/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v12H3z M12 5v12 M10.2 11h.6 M13.2 11h.6 M6.5 17v1.6 M17.5 17v1.6 M6.5 21.2a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6z M17.5 21.2a1.3 1.3 0 1 0 0-2.6 1.3 1.3 0 0 0 0 2.6z'/%3E%3C/svg%3E"); } /* passamateriali — Passamateriali con interblocco */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/passamateriali/"],[href$="/en/products/cleanroom-pass-throughs/"],[href$="/es/productos/pasamateriales/"],[href$="/fr/produits/sas-materiel/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3z M7.5 9.5h9v5h-9z M4.8 12h2.7 M16.5 12h2.7'/%3E%3C/svg%3E"); } /* docce-daria — Doccia d'aria a ugelli */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/camere-bianche/docce-daria/"],[href$="/en/products/cleanrooms/air-showers/"],[href$="/es/productos/salas-blancas/duchas-de-aire/"],[href$="/fr/produits/salles-blanches/douches-a-air/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3v18 M19 3v18 M7 8h3.2 M9 6.6 10.5 8 9 9.4 M17 8h-3.2 M15 6.6 13.5 8 15 9.4 M7 14h3.2 M9 12.6 10.5 14 9 15.4 M17 14h-3.2 M15 12.6 13.5 14 15 15.4'/%3E%3C/svg%3E"); } /* isolatori-positivi — Isolatore a pressione positiva */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/isolatori-positivi/"],[href$="/en/products/positive-pressure-isolators/"],[href$="/es/productos/aisladores-positivos/"],[href$="/fr/produits/isolateurs-positifs/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5h18V18H3z M11 7.5V2.6 M9.4 4.2 11 2.6l1.6 1.6 M15.6 4.2h3 M17.1 2.7v3 M9 15a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2z M15 15a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2z'/%3E%3C/svg%3E"); } /* isolatori-negativi — Isolatore a pressione negativa */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/isolatori-negativi/"],[href$="/en/products/negative-pressure-isolators/"],[href$="/es/productos/aisladores-negativos/"],[href$="/fr/produits/isolateurs-negatifs/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5h18V18H3z M11 2.6v4.9 M9.4 5.9 11 7.5l1.6-1.6 M15.6 4.2h3 M9 15a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2z M15 15a2.1 2.1 0 1 0 0-4.2 2.1 2.1 0 0 0 0 4.2z'/%3E%3C/svg%3E"); } /* ffu — Fan Filter Unit */ #header-outer .sf-menu li ul li > a:is([href$="/prodotti/ffu/"],[href$="/en/products/fan-filter-unit-ffu/"],[href$="/es/productos/ffu/"],[href$="/fr/produits/ffu/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3.5h18v6H3z M12 8.4a1.9 1.9 0 1 0 0-3.8 1.9 1.9 0 0 0 0 3.8z M3 12.5l3 3.5 3-3.5 3 3.5 3-3.5 3 3.5 3-3.5 M8 18.5v2.5 M12 18.5v2.5 M16 18.5v2.5'/%3E%3C/svg%3E"); } /* aerospaziale — Satellite */ #header-outer .sf-menu li ul li > a:is([href$="/settori/aerospaziale/"],[href$="/en/sectors/aerospace/"],[href$="/es/sectores/aeroespacial/"],[href$="/fr/secteurs/aerospatial/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 9.5h5v5h-5z M3 9h5.5v6H3z M15.5 9h5.5v6h-5.5z M12 9.5V6 M10.2 6h3.6 M12 14.5V18'/%3E%3C/svg%3E"); } /* alimentare — Contenitore alimentare sigillato */ #header-outer .sf-menu li ul li > a:is([href$="/settori/alimentare/"],[href$="/en/sectors/food/"],[href$="/es/sectores/alimentario/"],[href$="/fr/secteurs/agroalimentaire/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 4.5h13v3.2h-13z M6.8 7.7h10.4V19a2 2 0 0 1-2 2H8.8a2 2 0 0 1-2-2z M9.5 12.5h5'/%3E%3C/svg%3E"); } /* automotive — Vettura */ #header-outer .sf-menu li ul li > a:is([href$="/settori/automotive/"],[href$="/en/sectors/automotive/"],[href$="/es/sectores/automocion/"],[href$="/fr/secteurs/automobile/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16.5v-2.2l2.2-1L7.8 9h8.4l2.6 4.3 2.2 1v2.2 M3 16.5h3 M18 16.5h3 M9.5 16.5h5 M7.5 19a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z M16.5 19a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); } /* beverage — Bottiglia */ #header-outer .sf-menu li ul li > a:is([href$="/settori/beverage/"],[href$="/en/sectors/beverage/"],[href$="/es/sectores/bebidas/"],[href$="/fr/secteurs/boissons/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5h4v3.2l2.2 3.3V19a2 2 0 0 1-2 2h-4.4a2 2 0 0 1-2-2V9l2.2-3.3z M9.8 5.7h4.4 M7.8 12.5h8.4'/%3E%3C/svg%3E"); } /* elettronico — Circuito integrato */ #header-outer .sf-menu li ul li > a:is([href$="/settori/elettronico/"],[href$="/en/sectors/electronics/"],[href$="/es/sectores/electronico/"],[href$="/fr/secteurs/electronique/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10H7z M10.5 10.5h3v3h-3z M9.5 7V4 M14.5 7V4 M9.5 20v-3 M14.5 20v-3 M7 9.5H4 M7 14.5H4 M20 9.5h-3 M20 14.5h-3'/%3E%3C/svg%3E"); } /* farmaceutico — Blister farmaceutico */ #header-outer .sf-menu li ul li > a:is([href$="/settori/farmaceutico/"],[href$="/en/sectors/pharmaceutical/"],[href$="/es/sectores/farmaceutico/"],[href$="/fr/secteurs/pharmaceutique/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5H4a1.5 1.5 0 0 1-1.5-1.5v-8A1.5 1.5 0 0 1 4 6.5z M8.5 11.6a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6z M15.5 11.6a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6z M8.5 16.6a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6z M15.5 16.6a1.8 1.8 0 1 0 0-3.6 1.8 1.8 0 0 0 0 3.6z'/%3E%3C/svg%3E"); } /* fibre-composite — Trama di fibra */ #header-outer .sf-menu li ul li > a:is([href$="/settori/fibre-composite/"],[href$="/en/sectors/composite-fibres/"],[href$="/es/sectores/fibras-compuestas/"],[href$="/fr/secteurs/fibres-composites/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18 M3 12h18 M3 17h18 M8 3v4 M8 8.6v2.8 M8 13v3.4 M8 18v3 M16 3v3.4 M16 8v3.4 M16 13v2.8 M16 17.6v3.4'/%3E%3C/svg%3E"); } /* meccanica — Ingranaggio */ #header-outer .sf-menu li ul li > a:is([href$="/settori/meccanica/"],[href$="/en/sectors/mechanical/"],[href$="/es/sectores/mecanica/"],[href$="/fr/secteurs/mecanique/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14z M12 14.6a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2z M12 5V2.4 M12 19v2.6 M19 12h2.6 M5 12H2.4 M17 7l1.8-1.8 M7 7 5.2 5.2 M17 17l1.8 1.8 M7 17 5.2 18.8'/%3E%3C/svg%3E"); } /* medicale — Presidio medicale */ #header-outer .sf-menu li ul li > a:is([href$="/settori/medicale/"],[href$="/en/sectors/medical/"],[href$="/es/sectores/sanitario/"],[href$="/fr/secteurs/medical/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.4 3h3.2a1 1 0 0 1 1 1v5.4H20a1 1 0 0 1 1 1v3.2a1 1 0 0 1-1 1h-5.4V20a1 1 0 0 1-1 1h-3.2a1 1 0 0 1-1-1v-5.4H4a1 1 0 0 1-1-1v-3.2a1 1 0 0 1 1-1h5.4V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); } /* semiconduttori — Wafer con flat e die */ #header-outer .sf-menu li ul li > a:is([href$="/settori/semiconduttori/"],[href$="/en/sectors/semiconductors/"],[href$="/es/sectores/semiconductores/"],[href$="/fr/secteurs/semi-conducteurs/"]) { --ph-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.6 20.4A9 9 0 1 1 20.4 15.6Z M7.6 8h3.6v3.6H7.6z M12.8 8h3.6v3.6h-3.6z M7.6 12.8h3.6v3.6H7.6z'/%3E%3C/svg%3E"); } /* Sotto la soglia mobile il dropdown diventa lista: le icone restano, ma allineate al testo con un rientro minore. */ @media only screen and (max-width: 999px) { #header-outer .sf-menu li ul li > a::before { flex: 0 0 18px; width: 18px; height: 18px; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; } } /* -------------------------------------------------------------------------- 17. FOOTER + COPYFOOTER Global Section "Footer + Copyfooter" (ID 112). Il footer nativo di Salient e la sua barra copyright sono disattivati: questa sezione e l'intero pie di pagina. Fondo Blu Fondo #10294B — il brandbook 03 lo assegna a "titoli, hover, fondi scuri, copertine". Su questo fondo la tabella dei contrasti cambia tutte le assegnazioni, e va seguita alla lettera: Bianco 14,57:1 AAA recapiti, hover, pill Azzurro Camera 12,70:1 AAA link, claim, indirizzi Azzurro PHAMM 5,12:1 AA eyebrow, testo secondario, riga legale Grigio Aria 2,87:1 FAIL mai testo — solo divisori e riempimenti Blu PHAMM 2,15:1 FAIL mai testo — solo campiture del dispositivo Le ultime due righe non sono limiti da aggirare ma assegnazioni: il Grigio Aria diventa il colore dei filetti, il Blu PHAMM quello del fascio laminare. Ognuno finisce dove il brandbook lo manda. Il contenitore e .container di Salient, lo stesso dell'header: logo di testa e logo di piede restano incolonnati a ogni breakpoint senza che nessuno debba ricalcolare margini a mano. -------------------------------------------------------------------------- */ .phf { --phf-bg: var(--ph-fondo); --phf-bg-legal: #0C203A; /* Blu Fondo scurito del 22%: stacca il copyfooter */ --phf-rule: rgba(95, 112, 133, 0.45); /* Grigio Aria, il divisore da brandbook */ /* rompe il contenitore di Salient e va a piena larghezza */ width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; position: relative; z-index: 1; background-color: var(--phf-bg); } .nectar-global-section .phf, .container-wrap .phf { margin-bottom: 0 !important; } /* Salient impagina p, ul e li con padding proprio: dentro il footer il ritmo lo detta la griglia a 4px, non il tema. */ .phf p, .phf ul, .phf li, .phf h2, .phf address { padding: 0 !important; } /* -- banda principale ------------------------------------------------------ */ .phf-band { background-color: var(--phf-bg); padding: 8px 0 64px; } /* .phf-inner porta anche la classe .container di Salient: max-width e breakpoint sono quelli dell'header, non una copia da tenere allineata a mano. Salient pero azzera il padding dei .container annidati, e la Global Section e dentro un altro container. Salient pero lascia una via d'uscita nella sua stessa regola — :not(.normal-container) — quindi al contenitore basta quella classe per riprendere il padding del tema, con le sue media query. Nessun !important, nessun valore duplicato: il logo di piede resta incolonnato con quello di testa a ogni larghezza. */ .phf .phf-inner.container { box-sizing: border-box; } /* -- riga alta: marca e contatti ------------------------------------------- */ .phf-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 36px 48px; padding-bottom: 40px; border-bottom: 1px solid var(--phf-rule); } .phf-brand { max-width: 46ch; } .phf-logo { display: block; line-height: 0; } /* Stessa altezza del logo in header (60px) e stesso allineamento a sinistra. Il marchio va in negativo su fondo scuro: finche non arriva il vettoriale bianco, lo si ricava dal file a colori. [DA FORNIRE] versione negativa. */ .phf-logo img { height: 60px; width: auto; display: block; filter: brightness(0) invert(1); } .phf .phf-claim { font-family: var(--ph-display) !important; font-weight: var(--ph-w-regular) !important; font-style: italic !important; font-size: 1.75rem !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: var(--ph-camera) !important; margin: 18px 0 0 !important; } .phf .phf-pos { font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; font-size: 0.875rem !important; line-height: 1.6 !important; color: var(--ph-azzurro) !important; margin: 10px 0 0 !important; max-width: 46ch; } .phf-reach { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--phf-rule); } .phf .phf-reach-item { display: block; text-decoration: none !important; border: 0 !important; } .phf .phf-reach-label { display: block; font-family: var(--ph-text) !important; font-weight: var(--ph-w-medium) !important; font-size: 0.6875rem !important; line-height: 1.4 !important; letter-spacing: var(--ph-ls-eyebrow) !important; text-transform: uppercase !important; color: var(--ph-azzurro) !important; margin-bottom: 6px; } .phf .phf-reach-value { display: block; font-family: var(--ph-display) !important; font-weight: var(--ph-w-semibold) !important; font-size: 1.0625rem !important; line-height: 1.3 !important; color: var(--ph-bianco) !important; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; transition: color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .phf .phf-reach-item:hover .phf-reach-value { text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1px; } /* -- split section: marca a sinistra, rete internazionale a destra --------- Il riferimento portato dal cliente taglia le due meta in diagonale. Qui la diagonale non c'e: il sistema PHAMM e ortogonale, e la soglia fra le due meta e il fascio laminare — lo stesso dispositivo che separa pagina e footer, ruotato di novanta gradi. Le linee si infittiscono avvicinandosi al taglio, esattamente come l'aria attraversa un filtro. -------------------------------------------------------------------------- */ .phf-split { /* stesso incolonnamento del container di Salient, ma calcolato: le due meta hanno fondi diversi e non possono stare dentro un unico container */ --phf-gutter: max(24px, calc((100vw - 1425px) / 2 + var(--nectar-resp-container-padding, 90px))); /* Il taglio: 53,5% in alto, 46,5% in basso. Sette punti di pendenza — abbastanza perche si legga come un gesto voluto, troppo pochi perche diventi un effetto. Sopra i dieci punti la diagonale grida. */ --phf-cut-top: 53.5%; --phf-cut-bottom: 46.5%; /* Franco fra il testo e il taglio: senza, il contenuto finirebbe a cavallo della diagonale a certe larghezze. */ --phf-clear: clamp(32px, 5.6vw, 86px); position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; /* Le due colonne hanno masse diverse: la piu alta detta l'altezza, l'altra si centra. Appoggiate in alto lasciavano un vuoto morto sotto il blu. */ align-items: center; background-color: var(--ph-camera); } /* Una sola campitura tagliata, non due pannelli accostati: il blu e un piano ritagliato sopra il chiaro, così la diagonale e un bordo netto e non la giunzione fra due elementi che devono combaciare. */ .phf-split-canvas { position: absolute; inset: 0; z-index: -1; background-color: var(--ph-fondo); -webkit-clip-path: polygon(0 0, var(--phf-cut-top) 0, var(--phf-cut-bottom) 100%, 0 100%); clip-path: polygon(0 0, var(--phf-cut-top) 0, var(--phf-cut-bottom) 100%, 0 100%); } .phf-split-inner { padding-top: 88px; padding-bottom: 88px; position: relative; } .phf-split-inner--left { padding-left: var(--phf-gutter); padding-right: var(--phf-clear); } .phf-split-inner--right { padding-left: var(--phf-clear); padding-right: var(--phf-gutter); } /* -- rete internazionale --------------------------------------------------- */ .phf .phf-eyebrow { display: block; font-family: var(--ph-text) !important; font-weight: var(--ph-w-medium) !important; font-size: 0.75rem !important; line-height: 1.4 !important; letter-spacing: var(--ph-ls-eyebrow) !important; text-transform: uppercase !important; color: var(--ph-blu) !important; } .phf .phf-net-title { font-family: var(--ph-display) !important; font-weight: var(--ph-w-bold) !important; font-size: clamp(1.375rem, 1.9vw, 1.875rem) !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: var(--ph-fondo) !important; margin: 14px 0 34px !important; } .phf .phf-partners { list-style: none !important; margin: 0 !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; } /* Il filetto sta sulle celle e non sulla griglia: le due celle di una riga lo fanno combaciare in una linea sola, senza disegnare un reticolo. */ .phf .phf-partner { list-style: none !important; margin: 0 !important; border-top: 1px solid rgba(16, 41, 75, 0.12); } .phf .phf-partner:nth-last-child(-n+2) { border-bottom: 1px solid rgba(16, 41, 75, 0.12); } .phf .phf-partner:nth-child(odd) .phf-partner-link { padding-right: 32px; } .phf .phf-partner:nth-child(even) .phf-partner-link { padding-left: 32px; } /* Nessun riquadro, nessuna ombra, nessun raggio. Il marchio del partner e l'unico elemento colorato: tutto il resto e tipografia. */ .phf .phf-partner-link { display: block; height: 100%; box-sizing: border-box; padding: 24px 0 22px; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; } /* Slot del marchio identico per tutte e quattro: e la misura ottica a pareggiarsi, non quella nominale del file. */ .phf .phf-partner-mark { display: flex; align-items: center; height: 36px; margin-bottom: 16px; } .phf .phf-partner-logo { max-height: 36px; max-width: 148px; width: auto; height: auto; object-fit: contain; object-position: left center; } .phf .phf-partner-text { display: block; } .phf .phf-partner-name { display: block; font-family: var(--ph-display) !important; font-weight: var(--ph-w-semibold) !important; font-size: 0.9375rem !important; line-height: 1.35 !important; color: var(--ph-fondo) !important; transition: color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Su Azzurro Camera il Grigio Aria si ferma a 4,41:1 e non passa: il meta va in Grafite, che arriva a 10,34:1. */ .phf .phf-partner-meta { display: block; font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; font-size: 0.8125rem !important; line-height: 1.5 !important; color: var(--ph-grafite) !important; opacity: 0.72; margin-top: 3px; } .phf .phf-partner-link:hover .phf-partner-name, .phf .phf-partner-link:focus-visible .phf-partner-name { color: var(--ph-blu) !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; } .phf .phf-split-inner--right a:focus-visible { outline: 2px solid var(--ph-blu); outline-offset: 3px; } /* -- divisore --------------------------------------------------------------- Un filetto solo, ma non uniforme: i primi 72px sono in Azzurro PHAMM pieno, il resto scende a un grigio appena accennato. Non e un motivo, e una riga che sa dove comincia — e vale come firma proprio perche non chiede attenzione. -------------------------------------------------------------------------- */ .phf .phf-rule { height: 1px; border: 0 !important; margin: 0 0 4px !important; padding: 0 !important; background-image: linear-gradient(90deg, var(--ph-azzurro) 0 72px, rgba(95, 112, 133, 0.40) 72px); } /* Gli altri filetti del footer parlano la stessa lingua */ .phf-nav, .phf-reach { background-repeat: no-repeat; background-size: 100% 1px; } .phf-nav { background-image: linear-gradient(90deg, var(--ph-azzurro) 0 72px, rgba(95, 112, 133, 0.40) 72px); background-position: left bottom; } .phf-reach { background-image: linear-gradient(90deg, var(--ph-azzurro) 0 72px, rgba(95, 112, 133, 0.40) 72px); background-position: left top; } /* -- griglia della mappa del sito ------------------------------------------ */ .phf-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 24px; padding: 40px 0; border-bottom: 1px solid var(--phf-rule); } .phf .phf-h { font-family: var(--ph-text) !important; font-weight: var(--ph-w-medium) !important; font-size: 0.75rem !important; line-height: 1.4 !important; letter-spacing: var(--ph-ls-eyebrow) !important; text-transform: uppercase !important; color: var(--ph-azzurro) !important; margin: 0 0 16px !important; } .phf .phf-list { list-style: none !important; margin: 0 !important; } .phf .phf-list li { margin: 0 0 9px !important; list-style: none !important; font-size: 0.9375rem !important; line-height: 1.5 !important; break-inside: avoid; } .phf .phf-list li:last-child { margin-bottom: 0 !important; } /* Stessa misura della navigazione in testa: 15px, Instrument Sans 400. */ .phf .phf-list a { font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; font-size: 0.9375rem !important; line-height: 1.5 !important; color: var(--ph-camera) !important; text-decoration: none !important; border: 0 !important; background: none !important; transition: color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .phf .phf-list a:hover, .phf .phf-list a:focus-visible { color: var(--ph-bianco) !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* -- sedi ------------------------------------------------------------------ */ .phf-sites { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; padding-top: 40px; } .phf .phf-addr { font-family: var(--ph-text) !important; font-style: normal !important; font-weight: var(--ph-w-regular) !important; font-size: 0.8125rem !important; line-height: 1.65 !important; color: var(--ph-camera) !important; margin: 0 !important; } .phf .phf-iso { margin: 0 0 0 auto !important; display: flex; gap: 8px; flex-wrap: wrap; align-self: center; } /* Pill neutre su fondo scuro: velatura di bianco al 10%, peso 600 */ .phf .phf-pill { display: inline-block; font-family: var(--ph-text) !important; font-weight: var(--ph-w-semibold) !important; font-size: 0.875rem !important; line-height: 1 !important; letter-spacing: 0 !important; color: var(--ph-bianco) !important; background-color: rgba(255, 255, 255, 0.10) !important; padding: 9px 16px !important; border-radius: 999px !important; } /* -- copyfooter ------------------------------------------------------------ Una riga sola, voci tutte allineate e spaziate allo stesso passo. Il separatore e un middot generato in CSS, non un carattere nel markup: se una voce va a capo il separatore la segue, e l'ultima non lo porta mai. -------------------------------------------------------------------------- */ .phf-legal { background-color: var(--phf-bg-legal); padding: 18px 0; } .phf .phf-legal-list { list-style: none !important; margin: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; } .phf .phf-legal-list li { list-style: none !important; margin: 0 !important; display: inline-flex; align-items: center; font-family: var(--ph-text) !important; font-weight: var(--ph-w-regular) !important; font-size: 0.8125rem !important; line-height: 1.6 !important; color: var(--ph-azzurro) !important; font-variant-numeric: tabular-nums lining-nums; } .phf .phf-legal-list li::after { content: '·'; color: var(--ph-azzurro); opacity: 0.5; margin: 0 14px; } .phf .phf-legal-list li:last-child::after { content: none; } .phf .phf-legal-list a { font-family: var(--ph-text) !important; font-size: 0.8125rem !important; color: var(--ph-azzurro) !important; text-decoration: none !important; border: 0 !important; transition: color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .phf .phf-legal-list a:hover, .phf .phf-legal-list a:focus-visible { color: var(--ph-bianco) !important; text-decoration: underline !important; text-underline-offset: 3px; } /* -- focus visibile -------------------------------------------------------- */ .phf a:focus-visible { outline: 2px solid var(--ph-bianco); outline-offset: 3px; border-radius: 3px; } /* -- responsive ------------------------------------------------------------ */ @media only screen and (max-width: 1200px) { .phf-nav { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; } .phf-col--wide { grid-column: auto; } } @media only screen and (max-width: 1100px) { .phf-split { grid-template-columns: 1fr; align-items: stretch; } /* In colonna la diagonale non ha piu senso da tagliare: il colore torna sui due blocchi, che così si dimensionano sul proprio contenuto. */ .phf-split-canvas { display: none; } .phf-split-inner--left { background-color: var(--ph-fondo); } .phf-split-inner--right { background-color: var(--ph-camera); } .phf-split-inner--left, .phf-split-inner--right { padding-left: var(--phf-gutter); padding-right: var(--phf-gutter); } .phf-split-inner--right { padding-top: 56px; } .phf-split-inner--left { padding-bottom: 64px; } } @media only screen and (max-width: 999px) { /* Salient porta il logo di testa a 50px sotto i 1000px: il piede lo segue, così restano della stessa misura oltre che incolonnati. */ .phf-logo img { height: 50px; } .phf-band { padding-bottom: 52px; } .phf-top { flex-direction: column; gap: 32px; } .phf-reach { gap: 36px; } .phf-nav { grid-template-columns: repeat(2, 1fr); } .phf-col--wide { grid-column: auto; } .phf .phf-iso { margin-left: 0 !important; } } @media only screen and (max-width: 690px) { .phf .phf-claim { font-size: 1.375rem !important; } .phf-nav { grid-template-columns: 1fr; gap: 32px; } .phf-col--wide { grid-column: auto; } .phf-sites { gap: 28px; } .phf .phf-partners { grid-template-columns: 1fr; } .phf .phf-partner:nth-child(odd) .phf-partner-link, .phf .phf-partner:nth-child(even) .phf-partner-link { padding-left: 0; padding-right: 0; } .phf .phf-partner:nth-last-child(-n+2) { border-bottom: 0; } .phf .phf-partner:last-child { border-bottom: 1px solid rgba(16, 41, 75, 0.12); } /* in colonna il middot fra le voci diventa rumore */ .phf .phf-legal-list { flex-direction: column; align-items: flex-start; gap: 8px; } .phf .phf-legal-list li::after { content: none; } } /* -------------------------------------------------------------------------- 18. POST HEADER STRIP Global Section "Post header strip" (ID 142), agganciata da Salient subito sotto la navigazione. Fondo Azzurro Camera: la fascia deve leggersi come una mensola sotto l'header, non come una seconda barra di navigazione. Su bianco sarebbe invisibile, su Blu Fondo ruberebbe la scena al marchio. Un solo accento, e non e un pulsante pieno: il brandbook 10 chiede "un solo accento per schermata" e la pagina sotto ne ha gia uno. La CTA resta un link in Blu PHAMM con la freccia — la stessa scelta che farebbe Apple in una barra di servizio. -------------------------------------------------------------------------- */ .phs { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; background-color: var(--ph-camera); box-shadow: inset 0 -1px 0 rgba(16, 41, 75, 0.10); } .phs .phs-inner { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; } /* Salient mette due pseudo-elementi di clearfix su .container. In un contenitore flex smettono di essere invisibili e diventano item veri: lo space-between li conta e il primo gruppo finisce spostato di un centinaio di pixel. Vanno tolti, non aggirati. */ .phs .phs-inner::before, .phs .phs-inner::after { display: none !important; content: none !important; } /* Il reset non deve toccare le voci: hanno un padding loro che regge la spaziatura fra i filetti. */ .phs ul, .phs p, .phs li:not(.phs-fact) { margin: 0 !important; padding: 0 !important; list-style: none !important; } .phs .phs-fact { margin: 0 !important; list-style: none !important; } /* -- i tre fatti ----------------------------------------------------------- */ .phs .phs-facts { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; min-width: 0; } .phs .phs-fact { font-family: var(--ph-text) !important; font-weight: var(--ph-w-medium) !important; font-size: 0.6875rem !important; line-height: 1.4 !important; letter-spacing: var(--ph-ls-eyebrow) !important; text-transform: uppercase !important; color: var(--ph-fondo) !important; white-space: nowrap; padding: 0 20px; } .phs .phs-fact:first-child { padding-left: 0; } /* Il separatore e un filetto, non un middot: in una fascia alta 52px una linea verticale tiene l'occhio sulla riga, un punto lo fa inciampare. */ .phs .phs-fact + .phs-fact { border-left: 1px solid rgba(95, 112, 133, 0.38); } /* -- recapiti e CTA -------------------------------------------------------- */ .phs .phs-reach { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .phs .phs-link { font-family: var(--ph-text) !important; font-weight: var(--ph-w-medium) !important; font-size: 0.8125rem !important; line-height: 1.4 !important; color: var(--ph-grafite) !important; text-decoration: none !important; border: 0 !important; transition: color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .phs .phs-link:hover, .phs .phs-link:focus-visible { color: var(--ph-blu) !important; } /* Il numero e un numero: DM Sans, cifre tabellari. */ .phs .phs-tel { font-family: var(--ph-display) !important; font-weight: var(--ph-w-semibold) !important; font-size: 0.875rem !important; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; color: inherit !important; } .phs .phs-sep { width: 1px; height: 14px; background-color: rgba(95, 112, 133, 0.38); display: block; } .phs .phs-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-family: var(--ph-display) !important; font-weight: var(--ph-w-bold) !important; font-size: 0.8125rem !important; line-height: 1.4 !important; letter-spacing: 0 !important; color: var(--ph-blu) !important; text-decoration: none !important; border: 0 !important; white-space: nowrap; } /* Solo transform: e l'unica proprieta che il brandbook 12 ammette in movimento, insieme all'opacita. */ .phs .phs-chev { transform: translateX(0); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .phs .phs-cta:hover .phs-chev, .phs .phs-cta:focus-visible .phs-chev { transform: translateX(3px); } .phs .phs-cta:hover, .phs .phs-cta:focus-visible { text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 1px; } .phs a:focus-visible { outline: 2px solid var(--ph-blu); outline-offset: 4px; border-radius: 3px; } @media (prefers-reduced-motion: reduce) { .phs .phs-chev { transition: none; } } /* -- responsive ------------------------------------------------------------ La fascia non va mai a capo e non scorre: si accorcia. Prima cade il terzo fatto, poi gli altri due, poi l'email. Il numero e la CTA restano fino in fondo, perche sono le uniche due cose che si cliccano davvero. -------------------------------------------------------------------------- */ @media only screen and (max-width: 1240px) { .phs .phs-fact:nth-child(3) { display: none; } } @media only screen and (max-width: 1080px) { .phs .phs-facts { display: none; } .phs .phs-inner { justify-content: flex-end; } } @media only screen and (max-width: 700px) { .phs .phs-link--mail, .phs .phs-sep { display: none; } .phs .phs-inner { justify-content: space-between; min-height: 48px; } .phs .phs-cta { margin-left: 0; } } /* -------------------------------------------------------------------------- 19. PULSANTI FLOTTANTI Email e WhatsApp, fissi a destra. Il verde di WhatsApp non entra: il brandbook 03 dice "nessun secondo colore di marca", e una pastiglia verde accanto a un sistema tutto blu si vede da lontano come un corpo estraneo. Resta il glifo, disegnato sulla griglia 24 con tratto 2px come tutte le altre icone del sistema. Il colore si ribalta con il fondo. Su chiaro: pastiglia Blu Fondo, icona bianca (14,57:1). Su scuro: pastiglia bianca, icona Blu Fondo. Non e un vezzo — a colore fisso una delle due combinazioni finirebbe sotto soglia. -------------------------------------------------------------------------- */ .phfab { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 9000; display: flex; flex-direction: column; gap: 12px; } .phfab-btn { /* Su chiaro: pastiglia Blu PHAMM, icona bianca. Su scuro l'esatto contrario. Le due combinazioni danno lo stesso rapporto — 6,76:1 — perche sono la stessa coppia di colori scambiata di posto: quello che cambia e chi dei due fa da fondo. Il pulsante e sempre l'opposto della pagina che ha dietro, ed e per questo che si vede. */ --phfab-bg: var(--ph-blu); --phfab-fg: var(--ph-bianco); --phfab-edge: rgba(16, 41, 75, 0.16); position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; /* Salient impone un fondo ai link: senza !important la pastiglia resta bianca anche quando la variabile e gia cambiata. */ background-color: var(--phfab-bg) !important; color: var(--phfab-fg) !important; text-decoration: none !important; /* Il filetto serve nel caso ribaltato — pastiglia bianca su una sezione chiara ma non bianchissima — e non disturba nell'altro. */ border: 1px solid var(--phfab-edge) !important; box-shadow: 0 10px 28px rgba(16, 41, 75, 0.16); /* Niente transizione su background-color e color: sono alimentati da var() e Chrome, quando la custom property cambia, lascia l'interpolazione bloccata a meta strada — la pastiglia resta di un colore che non e ne l'uno ne l'altro. Il cambio di tono e istantaneo, che e anche l'unica cosa che il brandbook 12 ammette: in movimento vanno solo transform e opacita. */ transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Su fondo scuro si inverte la coppia: pastiglia bianca, icona Blu PHAMM. Il filetto resta appena accennato — una pastiglia bianca su Blu Fondo si stacca da se, e un bordo chiaro sul bianco non si vedrebbe comunque. */ .phfab[data-tone="dark"] .phfab-btn { --phfab-bg: var(--ph-bianco); --phfab-fg: var(--ph-blu); --phfab-edge: rgba(16, 41, 75, 0.10); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); } .phfab-btn:hover, .phfab-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(16, 41, 75, 0.22); } .phfab[data-tone="dark"] .phfab-btn:hover, .phfab[data-tone="dark"] .phfab-btn:focus-visible { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.40); } .phfab-btn:focus-visible { outline: 2px solid var(--phfab-fg); outline-offset: 3px; } .phfab-ico { display: flex; align-items: center; justify-content: center; color: inherit; } /* L'etichetta esce da sotto il pulsante, non lo copre: e un chiarimento, non un tooltip che ruba la scena. */ .phfab-label { position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%); padding: 7px 13px; border-radius: 999px; background-color: var(--phfab-bg) !important; color: var(--phfab-fg) !important; border: 1px solid var(--phfab-edge); font-family: var(--ph-text) !important; font-weight: var(--ph-w-medium) !important; font-size: 0.75rem !important; line-height: 1 !important; letter-spacing: 0.02em; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 8px 22px rgba(16, 41, 75, 0.14); transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .phfab-btn:hover .phfab-label, .phfab-btn:focus-visible .phfab-label { opacity: 1; transform: translate(0, -50%); } @media (prefers-reduced-motion: reduce) { .phfab-btn, .phfab-label { transition: none; } .phfab-btn:hover, .phfab-btn:focus-visible { transform: none; } .phfab-btn:hover .phfab-label, .phfab-btn:focus-visible .phfab-label { transform: translate(0, -50%); } } /* Da desktop, come richiesto. Per averli anche su mobile basta togliere questa regola. */ @media only screen and (max-width: 999px) { .phfab { display: none; } } /* -------------------------------------------------------------------------- 20. PAGINE LEGALI Privacy Policy, Cookie Policy, Note Legali. Sono documenti, non pagine di vendita: l'unico compito del progetto e rendere leggibile un testo lungo e far trovare in fretta il paragrafo giusto. Da qui le due scelte che governano tutto il blocco. La prima e la misura. Il corpo resta sulla riga da 60-70 caratteri del brandbook 04 anche quando la colonna potrebbe essere piu larga: su un testo di trenta paragrafi la riga lunga e la prima causa di abbandono. La seconda e l'indice agganciato. Position: sticky non funzionava: Salient mette overflow:hidden sul body per contenere le proprie animazioni, e cosi il body diventa il contenitore di scorrimento, che non scorre mai. Il rimedio non e disegnare l'indice in modo diverso ma togliere la causa: overflow:clip taglia allo stesso modo — la prova e che scrollWidth resta 1440 su viewport 1440 — senza creare un contenitore di scorrimento. Vale solo sulle pagine legali, cosi il comportamento del resto del sito non cambia di una virgola. Colori. Su Azzurro Camera il brandbook 03 boccia il Grigio Aria (4,41). L'intestazione usa quindi Blu PHAMM per l'eyebrow (5,89 AA), Blu Fondo per il titolo (12,70 AAA) e Grafite per il corpo (10,34 AAA). -------------------------------------------------------------------------- */ /* La classe arriva da phamm_page_body_class() e vale per tutte le pagine composte a mano, non solo per quelle legali: il selettore resta corto e non serve un :has() su tutto il documento. */ body.ph-page { overflow: clip !important; } /* Il documento comincia a filo della fascia informativa: l'intestazione porta il proprio respiro, quello del tema si somma e sballa il ritmo. */ body.ph-page .container-wrap { padding-top: 0 !important; } body.ph-page .container-wrap > .container.main-content { padding-bottom: 0 !important; } /* -- guscio ---------------------------------------------------------------- */ .phlegal { /* Stessa formula del footer e della fascia: il margine del contenuto coincide con quello dell'header a ogni larghezza, senza duplicare i breakpoint di Salient. */ --phl-gutter: max(24px, calc((100vw - 1425px) / 2 + var(--nectar-resp-container-padding, 90px))); /* Header fisso 90px + aria. Salient lo rimpicciolisce scorrendo, quindi il valore e un massimo, non una misura da inseguire. */ --phl-top: 108px; --phl-hair: rgba(16, 41, 75, 0.12); --phl-hair-soft: rgba(16, 41, 75, 0.08); font-family: var(--ph-text); font-size: var(--ph-size-body); line-height: var(--ph-lh-body); color: var(--ph-grafite); } /* Salient assegna padding a p, ul e li come elementi: dentro un documento impaginato a mano quel padding va azzerato e ridato dove serve. */ .phlegal p, .phlegal ul, .phlegal ol, .phlegal li, .phlegal dl, .phlegal dt, .phlegal dd, .phlegal h1, .phlegal h2, .phlegal h3, .phlegal table { padding: 0; } /* -- 20.1 Intestazione ----------------------------------------------------- */ /* Esce dal contenitore e torna dentro col proprio padding: il fondo e a pieno schermo, il testo resta incolonnato col menu. body ha overflow-x contenuto, quindi i 100vw non generano scorrimento orizzontale. */ .phlegal-hero { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: clamp(52px, 6vw, 96px) var(--phl-gutter) clamp(44px, 4.6vw, 72px); background-color: var(--ph-camera); box-shadow: inset 0 -1px 0 var(--phl-hair-soft); } .phlegal-hero-inner { max-width: 1245px; margin: 0 auto; } .phlegal-eyebrow { display: block; font-family: var(--ph-text); font-weight: var(--ph-w-medium); font-size: var(--ph-size-eyebrow); line-height: 1.2; letter-spacing: var(--ph-ls-eyebrow); text-transform: uppercase; color: var(--ph-blu); margin: 0 0 18px; } html body .phlegal .phlegal-title { font-family: var(--ph-display) !important; font-weight: var(--ph-w-bold) !important; font-size: var(--ph-size-h1) !important; line-height: var(--ph-lh-h1) !important; letter-spacing: -0.015em !important; color: var(--ph-fondo) !important; margin: 0 0 20px !important; max-width: 22ch; } .phlegal-lede { font-family: var(--ph-text); font-weight: var(--ph-w-regular); font-size: 1.1875rem; /* 19px: sta fra il corpo 17 e il claim 28 */ line-height: 1.6; color: var(--ph-fondo); margin: 0; max-width: 58ch; } .phlegal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0 !important; font-size: var(--ph-size-caption); line-height: 1.4; color: var(--ph-grafite); } .phlegal-meta-dot { width: 3px; height: 3px; border-radius: 999px; background-color: var(--ph-blu); } /* -- 20.2 Corpo: indice + documento --------------------------------------- */ .phlegal-body { display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: clamp(36px, 5vw, 92px); align-items: start; padding: clamp(44px, 5vw, 80px) 0 clamp(72px, 8vw, 132px); } .phlegal-index { position: sticky; top: var(--phl-top); max-height: calc(100vh - var(--phl-top) - 40px); overflow-y: auto; overscroll-behavior: contain; /* la barra di scorrimento interna non deve tagliare il bordo attivo */ padding-right: 4px; } html body .phlegal .phlegal-index-h { display: block; font-family: var(--ph-text); font-weight: var(--ph-w-medium); font-size: var(--ph-size-eyebrow); line-height: 1.2; letter-spacing: var(--ph-ls-eyebrow); text-transform: uppercase; color: var(--ph-grafite); margin: 0 0 14px 14px; } .phlegal-index ol { list-style: none; margin: 0; counter-reset: phli; } .phlegal-index li { margin: 0; list-style: none; counter-increment: phli; } .phlegal-index a { display: block; font-family: var(--ph-text); font-weight: var(--ph-w-medium); font-size: 0.875rem; /* 14px */ line-height: 1.35; color: var(--ph-grafite); text-decoration: none !important; padding: 8px 0 8px 14px; border-left: 2px solid var(--phl-hair-soft); /* solo colore e bordo: nessuna traslazione, il brandbook 10 vuole un solo movimento per schermata e qui lo prende l'indice attivo */ transition: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Lo stesso numero che apre la sezione: l'indice e il documento si leggono come una cosa sola. Cifre tabellari, altrimenti 01 e 11 non stanno incolonnate. */ .phlegal-index a::before { content: counter(phli, decimal-leading-zero); margin-right: 9px; font-variant-numeric: tabular-nums; color: var(--ph-grigio); } .phlegal-index a[aria-current="true"]::before, .phlegal-index a:hover::before { color: var(--ph-blu); } .phlegal-doc { overflow-wrap: break-word; } .phlegal-index a:hover, .phlegal-index a:focus-visible { color: var(--ph-blu); border-left-color: var(--ph-blu); } .phlegal-index a[aria-current="true"] { color: var(--ph-blu); font-weight: var(--ph-w-semibold); border-left-color: var(--ph-blu); } /* -- 20.3 Il documento ----------------------------------------------------- */ .phlegal-doc { counter-reset: phl; min-width: 0; /* I filetti fra le sezioni, le tabelle e i riquadri finiscono tutti sullo stesso bordo destro, poco oltre la misura del testo: un filetto molto piu largo del paragrafo che divide si legge come un errore. */ max-width: 880px; } .phlegal-sec { counter-increment: phl; padding: clamp(38px, 4vw, 60px) 0; scroll-margin-top: calc(var(--phl-top) - 8px); } .phlegal-sec:first-child { padding-top: 0; } .phlegal-sec + .phlegal-sec { border-top: 1px solid var(--phl-hair-soft); } html body .phlegal .phlegal-sec > h2 { font-family: var(--ph-display) !important; font-weight: var(--ph-w-semibold) !important; font-size: var(--ph-size-h2) !important; line-height: var(--ph-lh-h2) !important; letter-spacing: -0.01em !important; color: var(--ph-fondo) !important; margin: 0 0 20px !important; max-width: 34ch; } /* Il numero di sezione e un eyebrow, non un titolo: stesso carattere e stesso tracking dell'eyebrow del brandbook 04. */ .phlegal-sec > h2::before { content: counter(phl, decimal-leading-zero); display: block; font-family: var(--ph-text); font-weight: var(--ph-w-medium); font-size: var(--ph-size-eyebrow); line-height: 1.2; letter-spacing: var(--ph-ls-eyebrow); color: var(--ph-blu); margin-bottom: 12px; } html body .phlegal .phlegal-sec h3 { font-family: var(--ph-display) !important; font-weight: var(--ph-w-semibold) !important; font-size: var(--ph-size-h3) !important; line-height: var(--ph-lh-h3) !important; color: var(--ph-fondo) !important; margin: 34px 0 14px !important; max-width: 40ch; } .phlegal-sec h3:first-child { margin-top: 0 !important; } .phlegal-doc p { font-family: var(--ph-text); font-weight: var(--ph-w-regular); font-size: var(--ph-size-body); line-height: var(--ph-lh-body); color: var(--ph-grafite); margin: 0 0 18px; max-width: var(--ph-measure); } .phlegal-doc p:last-child { margin-bottom: 0; } .phlegal-doc strong { font-weight: var(--ph-w-semibold); color: var(--ph-fondo); } .phlegal-doc a { color: var(--ph-blu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(40, 90, 166, 0.38); transition: text-decoration-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); } .phlegal-doc a:hover, .phlegal-doc a:focus-visible { color: var(--ph-fondo); text-decoration-color: var(--ph-fondo); } /* -- elenchi --------------------------------------------------------------- */ .phlegal-doc ul, .phlegal-doc ol { margin: 0 0 20px; max-width: var(--ph-measure); list-style: none; } .phlegal-doc ul > li, .phlegal-doc ol > li { position: relative; font-size: var(--ph-size-body); line-height: 1.6; color: var(--ph-grafite); margin: 0 0 10px; padding-left: 26px; list-style: none; } .phlegal-doc ul > li:last-child, .phlegal-doc ol > li:last-child { margin-bottom: 0; } /* Il segno di elenco e un filetto, non un pallino: 2px, come lo spessore di tratto delle icone del sistema. */ .phlegal-doc ul > li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 2px; background-color: var(--ph-blu); } .phlegal-doc ol { counter-reset: phlo; } .phlegal-doc ol > li { counter-increment: phlo; padding-left: 30px; } .phlegal-doc ol > li::before { content: counter(phlo) "."; position: absolute; left: 0; top: 0; font-family: var(--ph-display); font-weight: var(--ph-w-semibold); font-size: 0.9375rem; line-height: 1.75; color: var(--ph-blu); font-variant-numeric: tabular-nums; } .phlegal-doc li > ul { margin: 10px 0 0; } /* -- 20.4 Scheda dati (anagrafica, recapiti) ------------------------------ */ .phlegal-facts { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 0; margin: 0 0 22px; max-width: 720px; border-top: 1px solid var(--phl-hair-soft); } .phlegal-facts dt { font-family: var(--ph-text); font-weight: var(--ph-w-semibold); font-size: var(--ph-size-caption); line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ph-grafite); padding: 14px 20px 14px 0 !important; border-bottom: 1px solid var(--phl-hair-soft); margin: 0; } .phlegal-facts dd { font-family: var(--ph-text); font-weight: var(--ph-w-regular); font-size: var(--ph-size-body); line-height: 1.55; color: var(--ph-fondo); padding: 14px 0 !important; border-bottom: 1px solid var(--phl-hair-soft); margin: 0; } /* -- 20.5 Tabelle --------------------------------------------------------- */ .phlegal-table { margin: 0 0 22px; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--phl-hair); border-radius: 14px; background-color: var(--ph-bianco); } .phlegal-table table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; font-family: var(--ph-text); } .phlegal-table th, .phlegal-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--phl-hair-soft); } .phlegal-table thead th { font-weight: var(--ph-w-semibold); font-size: var(--ph-size-caption); line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ph-fondo); background-color: var(--ph-camera); white-space: nowrap; } .phlegal-table tbody td { font-size: 0.9375rem; /* 15px: una tabella tecnica sta piu stretta */ line-height: 1.55; color: var(--ph-grafite); } /* Nota sotto il nome di un cookie: Grigio Aria su bianco e 4,71 — il brandbook 03 lo assegna proprio alle caption su fondo bianco. */ .phlegal-table .phlegal-desc { display: block; font-size: 0.75rem; line-height: 1.4; color: var(--ph-grigio); margin-top: 2px; } .phlegal-table tbody tr:last-child th, .phlegal-table tbody tr:last-child td { border-bottom: 0; } .phlegal-table td code, .phlegal-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--ph-fondo); background-color: var(--ph-camera); border-radius: 6px; padding: 2px 6px; white-space: nowrap; } /* -- 20.6 Riquadri -------------------------------------------------------- */ .phlegal-note { margin: 0 0 22px; padding: 20px 24px; background-color: var(--ph-camera); border-radius: 12px; border-left: 2px solid var(--ph-blu); max-width: 720px; } /* Provvisorio: il filetto tratteggiato dice "non ancora validato" senza introdurre un colore che nel brandbook non esiste. */ .phlegal-note--check { border-left-style: dashed; } .phlegal-note-h { display: block; font-family: var(--ph-text); font-weight: var(--ph-w-medium); font-size: var(--ph-size-eyebrow); line-height: 1.2; letter-spacing: var(--ph-ls-eyebrow); text-transform: uppercase; color: var(--ph-blu); margin: 0 0 10px; } .phlegal-note p { font-size: 0.9375rem; line-height: 1.6; margin: 0 0 10px; max-width: 62ch; } .phlegal-note p:last-child { margin-bottom: 0; } /* -- 20.7 Rimandi in coda ------------------------------------------------- */ .phlegal-more { border-top: 1px solid var(--phl-hair-soft); padding-top: clamp(32px, 3.4vw, 48px); margin-top: clamp(12px, 2vw, 24px); } .phlegal-more-h { display: block; font-family: var(--ph-text); font-weight: var(--ph-w-medium); font-size: var(--ph-size-eyebrow); line-height: 1.2; letter-spacing: var(--ph-ls-eyebrow); text-transform: uppercase; color: var(--ph-grafite); margin: 0 0 18px; } .phlegal-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0; list-style: none; max-width: none; } .phlegal-more-grid li { margin: 0; padding: 0; list-style: none; } .phlegal-more-grid li::before { display: none; } .phlegal-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; padding: 18px 20px; background-color: var(--ph-bianco); border: 1px solid var(--phl-hair); border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 41, 75, 0.06); font-family: var(--ph-display); font-weight: var(--ph-w-semibold); font-size: 0.9375rem; line-height: 1.4; color: var(--ph-fondo) !important; text-decoration: none !important; transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); } .phlegal-card:hover, .phlegal-card:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(16, 41, 75, 0.10); } .phlegal-card svg { flex: 0 0 auto; color: var(--ph-blu); } /* -- 20.8 Responsive ------------------------------------------------------ */ @media only screen and (max-width: 1100px) { .phlegal-body { grid-template-columns: minmax(0, 1fr); gap: 28px; } /* Senza colonna laterale l'indice diventa una scheda in testa: resta utile per saltare al paragrafo, smette di occupare mezzo schermo. */ .phlegal-index { position: static; max-height: none; overflow: visible; padding: 20px 22px; background-color: var(--ph-camera); border-radius: 14px; } .phlegal-index-h { margin-left: 0; } .phlegal-index ol { columns: 2; column-gap: 28px; } .phlegal-index a { border-left: 0; padding: 6px 0; } .phlegal-index a[aria-current="true"], .phlegal-index a:hover { border-left: 0; } } /* Sotto i 900px la riga dei dati va a capo e i puntini restano appesi in fine di riga. Impilata, i separatori non servono piu. */ @media only screen and (max-width: 900px) { .phlegal-meta { flex-direction: column; align-items: flex-start; gap: 5px; } .phlegal-meta-dot { display: none; } } @media only screen and (max-width: 690px) { .phlegal-title { font-size: 2rem !important; /* 32px */ } .phlegal-lede { font-size: 1.0625rem; } .phlegal-sec > h2 { font-size: 1.5rem !important; /* 24px */ } .phlegal-index ol { columns: 1; } .phlegal-facts { grid-template-columns: minmax(0, 1fr); } .phlegal-facts dt { padding-bottom: 0 !important; border-bottom: 0; } .phlegal-facts dd { padding-top: 6px !important; } .phlegal-note { padding: 18px 20px; } } /* -- 20.9 Stampa ---------------------------------------------------------- */ @media print { .phlegal-index, .phlegal-more { display: none !important; } .phlegal-hero { margin: 0; padding: 0 0 18px; background: none; box-shadow: none; } .phlegal-body { display: block; padding: 0; } .phlegal-doc a::after { content: " (" attr(href) ")"; font-size: 0.75rem; color: #5F7085; } .phlegal-sec { break-inside: avoid; } } @media (prefers-reduced-motion: reduce) { .phlegal-card, .phlegal-index a, .phlegal-doc a { transition: none; } .phlegal-card:hover, .phlegal-card:focus-visible { transform: none; } } /* -------------------------------------------------------------------------- 21. BANNER COOKIE Stampato in wp_footer da phamm_cookie_banner(), logica in assets/consent.js. Una fascia in basso, a tutta larghezza, alta il minimo necessario: il contenuto della pagina resta leggibile mentre il banner e aperto. Un velo che copre tutto spinge ad accettare per levarselo di torno, e un consenso ottenuto cosi non e libero. Tre categorie, tre levette: Essenziali sempre attive e bloccate, Analitici e Marketing spente all'origine. La riga breve sotto il nome dice a che cosa serve la categoria; il dettaglio completo — nomi dei cookie, durate, terze parti — sta nella Cookie Policy, a un clic di distanza. La fascia e allineata al resto del sito: stesso margine laterale dell'header, del footer e della fascia informativa, stessa formula. Colori: fondo bianco, quindi la coppia testo/fondo e sempre quella del brandbook su bianco (Grafite 12,63 · Blu Fondo 15,30 · Blu PHAMM 6,76). Le levette accese sono Blu PHAMM. Movimento: solo transform e opacity, brandbook 10. La levetta accesa non cambia colore in transizione — quello e il bug che aveva congelato i pulsanti flottanti a meta interpolazione — ma scopre per opacita una campitura blu che le sta sotto. Il pomello trasla, e l'unico movimento. -------------------------------------------------------------------------- */ .phcc { position: fixed; left: 0; right: 0; bottom: 0; /* sopra i pulsanti flottanti (9000), sotto l'header fisso (9999) */ z-index: 9500; font-family: var(--ph-text); opacity: 0; transform: translateY(100%); transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1); } .phcc[hidden] { display: none !important; } .phcc.is-in { opacity: 1; transform: none; } .phcc-card { --phcc-gutter: max(20px, calc((100vw - 1425px) / 2 + var(--nectar-resp-container-padding, 90px))); position: relative; background-color: var(--ph-bianco); border-top: 1px solid rgba(16, 41, 75, 0.12); box-shadow: 0 -14px 40px rgba(16, 41, 75, 0.12); padding: 20px var(--phcc-gutter) 18px; /* Anche impilata su schermi bassi la fascia non deve mangiarsi la pagina: oltre il tetto scorre al proprio interno. */ max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; } .phcc-inner { max-width: 1245px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; } /* Salient assegna padding a p, ul e li: dentro la fascia va azzerato. */ .phcc p, .phcc ul, .phcc li, .phcc h2 { padding: 0; margin: 0; list-style: none; } /* -- 21.1 Testata --------------------------------------------------------- */ .phcc-head { flex: 1 1 340px; min-width: 0; } .phcc-title { font-family: var(--ph-display) !important; font-weight: var(--ph-w-semibold) !important; font-size: 1.1875rem !important; /* 19px: una fascia, non una pagina */ line-height: 1.25 !important; letter-spacing: -0.01em !important; color: var(--ph-fondo) !important; margin: 0 0 5px !important; } .phcc-intro { font-size: 0.875rem !important; /* 14px */ line-height: 1.5 !important; color: var(--ph-grafite) !important; margin: 0 !important; } /* I rimandi su una riga loro: dentro il periodo finirebbero a capo in mezzo a una frase, che e come sono venuti fuori la prima volta. */ .phcc-more { display: block; margin-top: 5px; font-size: var(--ph-size-caption); line-height: 1.4; } .phcc-intro a { color: var(--ph-blu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(40, 90, 166, 0.4); } .phcc-intro a:hover { text-decoration-color: var(--ph-blu); } .phcc-sep { margin: 0 6px; color: var(--ph-grigio); } /* -- 21.2 La X ------------------------------------------------------------ */ /* Chiude senza decidere: rimanda alla visita successiva e non scrive alcun consenso. Una X che valesse "accetto" sarebbe consenso presunto. */ .phcc-x { position: absolute; /* nell'angolo vero della fascia, non incolonnata coi pulsanti: una X che sta sopra "Accetta tutti" si prende clic che non erano per lei. */ top: 10px; right: 12px; width: 32px; height: 32px; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background-color: transparent !important; color: var(--ph-grigio) !important; cursor: pointer; } .phcc-x:hover, .phcc-x:focus-visible { background-color: var(--ph-camera) !important; color: var(--ph-fondo) !important; } .phcc-x:focus-visible { outline: 2px solid var(--ph-blu); outline-offset: 2px; } /* -- 21.3 Le tre levette -------------------------------------------------- */ .phcc-opts { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 !important; } .phcc-opt { margin: 0; } .phcc-row { display: flex; align-items: center; gap: 11px; margin: 0; cursor: pointer; } .phcc-opt--locked .phcc-row { cursor: default; } .phcc-txt { display: block; min-width: 0; } .phcc-name { display: block; font-family: var(--ph-display); font-weight: var(--ph-w-semibold); font-size: 0.875rem; /* 14px */ line-height: 1.3; color: var(--ph-fondo); white-space: nowrap; } .phcc-desc { display: block; font-size: 0.75rem; /* 12px */ line-height: 1.35; color: var(--ph-grigio); margin-top: 1px; white-space: nowrap; } /* La levetta. Tre strati: il binario spento, la campitura blu che si scopre per opacita, il pomello che trasla. */ .phcc-sw { /* Uno resta inline e su un elemento inline larghezza e altezza non si applicano: la levetta collasserebbe a zero e i tre strati assoluti finirebbero fuori dalla fascia. Serve un box. */ display: block; position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background-color: rgba(16, 41, 75, 0.16); } .phcc-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; border-radius: 999px; cursor: pointer; -webkit-appearance: none; appearance: none; z-index: 2; } .phcc-sw input:disabled { cursor: default; } .phcc-sw input:focus-visible { outline: 2px solid var(--ph-blu); outline-offset: 3px; /* l'anello di fuoco deve vedersi anche su un campo trasparente */ opacity: 1; } .phcc-track { position: absolute; inset: 0; border-radius: 999px; background-color: var(--ph-blu); opacity: 0; transition: opacity 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); } .phcc-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; z-index: 1; border-radius: 999px; background-color: var(--ph-bianco); box-shadow: 0 1px 3px rgba(16, 41, 75, 0.32); transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); } .phcc-sw input:checked ~ .phcc-track { opacity: 1; } .phcc-sw input:checked ~ .phcc-knob { transform: translateX(18px); } /* Essenziali: accesa e bloccata. La levetta smorzata dice "non si tocca" senza togliere contrasto all'etichetta, che resta piena. */ .phcc-opt--locked .phcc-sw { opacity: 0.42; } /* -- 21.4 Pulsanti -------------------------------------------------------- "Rifiuta tutti" e "Accetta tutti" hanno la stessa misura, la stessa altezza e lo stesso corpo, e stanno sulla stessa riga: e la condizione che le linee guida EDPB chiedono perche il consenso sia libero. Il riempimento pieno su "Accetta" resta legittimo — segnala l'azione affermativa, non la nasconde — ma non guadagna un pixel di superficie. "Salva le mie preferenze" e la terza via e sta sotto, in forma quieta: serve a chi ha toccato le levette, non e un'alternativa alle prime due. ------------------------------------------------------------------------- */ .phcc-actions { flex: 0 0 auto; display: grid; grid-template-columns: auto auto; gap: 8px; margin-left: auto; } .phcc-btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; min-width: 124px; padding: 10px 18px !important; margin: 0 !important; border-radius: 12px !important; font-family: var(--ph-display) !important; font-weight: var(--ph-w-bold) !important; font-size: 0.875rem !important; /* 14px */ line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: center; white-space: nowrap; cursor: pointer; transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.24s cubic-bezier(0.22, 0.61, 0.36, 1); } .phcc-btn:focus-visible { outline: 2px solid var(--ph-fondo); outline-offset: 2px; } .phcc-btn--ghost { background-color: var(--ph-bianco) !important; color: var(--ph-fondo) !important; border: 1px solid rgba(16, 41, 75, 0.24) !important; } .phcc-btn--ghost:hover { background-color: var(--ph-camera) !important; color: var(--ph-fondo) !important; transform: translateY(-1px); } .phcc-btn--solid { background-color: var(--ph-blu) !important; color: var(--ph-bianco) !important; border: 1px solid var(--ph-blu) !important; box-shadow: 0 8px 20px rgba(40, 90, 166, 0.35); } .phcc-btn--solid:hover { background-color: var(--ph-fondo) !important; border-color: var(--ph-fondo) !important; color: var(--ph-bianco) !important; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(16, 41, 75, 0.24); } /* Terza via: nessun riempimento, nessun bordo, corpo minore. */ .phcc-btn--quiet { grid-column: 1 / -1; justify-self: center; min-height: 24px; min-width: 0; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; font-family: var(--ph-text) !important; font-weight: var(--ph-w-semibold) !important; font-size: var(--ph-size-caption) !important; color: var(--ph-grafite) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(16, 41, 75, 0.28); } .phcc-btn--quiet:hover { color: var(--ph-blu) !important; text-decoration-color: var(--ph-blu); } /* -- 21.5 Voce "Preferenze cookie" nel copyfooter ------------------------- */ /* E un