/* =================================================================== * SEA Technology — Menu mobile * * Valori presi dai mockup Figma (artboard 402x874): * nodi 791:2541 (livello 1), 791:2634 (macro), 791:2690 (tipologie). * * Il foglio è inerte di suo: `.sea-mmenu` è display:none e viene acceso * dalla media query generata in PHP (SEA_Menu_Assets), perché la soglia è * un'opzione e non può stare scritta qui. * * La barra superiore (logo, bottone azzurro) NON è di questo plugin: resta * quella dell'header Elementor. Qui si disegna solo il pannello che si apre * sotto, e la X che sostituisce l'hamburger mentre il menu è aperto. * =================================================================== */ .sea-mmenu { --sea-mmenu-navy: #031c59; --sea-mmenu-accent: #009cda; --sea-mmenu-text: #000; --sea-mmenu-macro: #313131; /* Era #898989: su bianco fa 3,5:1, sotto la soglia AA di 4,5:1, e infatti i link "Torna al menu" e "Torna indietro" non si leggevano. #666 sta a 5,7:1 e resta comunque secondario rispetto al nero delle voci. */ --sea-mmenu-muted: #666; --sea-mmenu-field: #f2f5f7; --sea-mmenu-rule: #d9d9d9; --sea-mmenu-card: #fff; --sea-mmenu-radius: 20px; /* Distanza dal bordo superiore: la calcola il JS misurando l'header, così il pannello si aggancia sotto qualunque altezza abbia. Il valore qui è solo il ripiego se il JS non gira. */ --sea-mmenu-top: 112px; --sea-mmenu-gutter: 20px; /* Quattro regole qui dentro dicono font-family: inherit, ma inherit non bastava: il kit di Elementor mette Archivo Narrow SOLO sui tag , e il body prende lo stack di sistema dal reset di hello-elementor. Risultato, il menu era tipograficamente spaccato in due — le voci di primo e terzo livello (link) in Archivo Narrow, mentre le macro-categorie di secondo livello (button), il campo di ricerca (input) e i link di ritorno cadevano nel font di sistema. Dichiarandola sulla radice, gli inherit si risolvono tutti come l'autore intendeva. Il Figma disegna il campo in Archivo ExtraCondensed, che il sito non carica: si e' scelto di restare su Archivo Narrow e correggere il design. */ font-family: "Archivo Narrow", sans-serif; display: none; position: fixed; inset: 0; z-index: 9998; visibility: hidden; pointer-events: none; /* Il ritardo tiene il pannello in vita per tutta l'uscita: senza, visibility scatta subito e la chiusura non si vede animare. */ transition: visibility 0s linear .28s; } .sea-mmenu.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .sea-mmenu__backdrop { position: absolute; inset: 0; background: rgba(3, 28, 89, .45); opacity: 0; transition: opacity .28s ease; } .sea-mmenu.is-open .sea-mmenu__backdrop { opacity: 1; } /* ─────────────── Card bianca ─────────────── Nel mockup ha altezza fissa (576px su 874), ma il contenuto del primo livello la supera: qui si adatta al contenuto e scorre internamente, così non taglia nulla su schermi bassi. */ .sea-mmenu__sheet { position: absolute; top: var(--sea-mmenu-top); left: var(--sea-mmenu-gutter); right: var(--sea-mmenu-gutter); max-height: calc(100% - var(--sea-mmenu-top) - var(--sea-mmenu-gutter)); display: flex; flex-direction: column; background: var(--sea-mmenu-card); border-radius: var(--sea-mmenu-radius); box-shadow: 0 1px 4px 0 rgba(12, 12, 13, .1), 0 1px 4px 0 rgba(12, 12, 13, .05); opacity: 0; transform: translateY(-8px); transition: opacity .28s ease, transform .28s ease; } .sea-mmenu.is-open .sea-mmenu__sheet { opacity: 1; transform: translateY(0); } .sea-mmenu__viewport { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 0 22px; } .sea-mmenu__panel { display: none; } .sea-mmenu__panel.is-active { display: block; } /* Scorrimento orizzontale fra i livelli: il pannello che entra scivola dal lato coerente con la direzione di navigazione (avanti da destra, indietro da sinistra). */ @keyframes sea-mmenu-in-forward { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } @keyframes sea-mmenu-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } .sea-mmenu__panel.is-active[data-dir="forward"] { animation: sea-mmenu-in-forward .22s ease both; } .sea-mmenu__panel.is-active[data-dir="back"] { animation: sea-mmenu-in-back .22s ease both; } /* ─────────────── Campo di ricerca ─────────────── Figma: 327x61, fondo #F2F5F7, raggio 10px, icona a 16px dal bordo e testo a 50px. L'etichetta resta per gli screen reader. */ .sea-mmenu__search { position: relative; margin: 0 18px 26px; } .sea-mmenu__search-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .sea-mmenu__search-input { display: block; width: 100%; height: 61px; /* Spazio a destra per la lente, che ora sta da quel lato. */ padding: 0 50px 0 16px; border: none; border-radius: 10px; background: var(--sea-mmenu-field); color: var(--sea-mmenu-text); font-family: inherit; font-size: 16px; text-transform: uppercase; -webkit-appearance: none; appearance: none; } .sea-mmenu__search-input::placeholder { color: var(--sea-mmenu-text); opacity: 1; text-transform: uppercase; } .sea-mmenu__search-input:focus { outline: 2px solid var(--sea-mmenu-accent); outline-offset: -2px; } /* Lente: e' l'SVG del Figma (nodo 791:2579) inline come mask, non ridisegnato con bordi e pseudo-elementi. Due motivi. Il glifo diventa quello esatto del design invece di un'approssimazione: la versione a mano aveva il cerchio da 19px contro i 13,5 disegnati, quindi si vedeva piu' grande del dovuto. E con la mask il colore resta una proprieta' CSS, cioe' continua a leggersi dal token invece di finire cablato dentro l'SVG. E' un data URI: nessuna richiesta HTTP in piu' e nessuna dipendenza da un font di icone. */ .sea-mmenu__search-icon { position: absolute; /* A destra del campo: il Figma la disegna a sinistra, ma la posizione e' una scelta confermata (card #49). */ right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background-color: var(--sea-mmenu-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2220.3106%22%20height%3D%2220%22%20viewBox%3D%220%200%2020.3106%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20d%3D%22M8.46273%2015C9.96485%2014.9997%2011.4237%2014.5045%2012.6069%2013.5933L16.3272%2017.2567L17.5238%2016.0783L13.8036%2012.415C14.7294%2011.2497%2015.2326%209.81286%2015.2329%208.33333C15.2329%204.6575%2012.1956%201.66667%208.46273%201.66667C4.72982%201.66667%201.69255%204.6575%201.69255%208.33333C1.69255%2012.0092%204.72982%2015%208.46273%2015ZM8.46273%203.33333C11.2631%203.33333%2013.5404%205.57583%2013.5404%208.33333C13.5404%2011.0908%2011.2631%2013.3333%208.46273%2013.3333C5.66241%2013.3333%203.38509%2011.0908%203.38509%208.33333C3.38509%205.57583%205.66241%203.33333%208.46273%203.33333Z%22%20fill%3D%22%23009CDA%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20width%3D%2220.3106%22%20height%3D%2220%22%20viewBox%3D%220%200%2020.3106%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20d%3D%22M8.46273%2015C9.96485%2014.9997%2011.4237%2014.5045%2012.6069%2013.5933L16.3272%2017.2567L17.5238%2016.0783L13.8036%2012.415C14.7294%2011.2497%2015.2326%209.81286%2015.2329%208.33333C15.2329%204.6575%2012.1956%201.66667%208.46273%201.66667C4.72982%201.66667%201.69255%204.6575%201.69255%208.33333C1.69255%2012.0092%204.72982%2015%208.46273%2015ZM8.46273%203.33333C11.2631%203.33333%2013.5404%205.57583%2013.5404%208.33333C13.5404%2011.0908%2011.2631%2013.3333%208.46273%2013.3333C5.66241%2013.3333%203.38509%2011.0908%203.38509%208.33333C3.38509%205.57583%205.66241%203.33333%208.46273%203.33333Z%22%20fill%3D%22%23009CDA%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; pointer-events: none; } /* ─────────────── Liste ─────────────── */ .sea-mmenu__list, .sea-mmenu__meta { list-style: none; margin: 0; padding: 0; } /* Voci di primo livello: 18px bold uppercase, passo 54px nel mockup. */ .sea-mmenu__link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 15px 20px; border: none; background: none; color: var(--sea-mmenu-text); font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; text-align: left; text-transform: uppercase; text-decoration: none; cursor: pointer; } .sea-mmenu__link.is-current { color: var(--sea-mmenu-accent); } .sea-mmenu__link:hover, .sea-mmenu__link:focus-visible { color: var(--sea-mmenu-accent); } /* Macro categorie: 15px semibold, passo 49px. */ .sea-mmenu__macro { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 20px; border: none; background: none; color: var(--sea-mmenu-macro); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: left; text-transform: uppercase; text-decoration: none; cursor: pointer; } /* Macro della categoria che si sta visitando. */ .sea-mmenu__macro.is-current { color: var(--sea-mmenu-accent); } .sea-mmenu__macro:hover, .sea-mmenu__macro:focus-visible { color: var(--sea-mmenu-navy); } /* Tipologie: stessa scala delle macro, senza chevron. */ .sea-mmenu__tipologia { display: block; padding: 12px 20px; color: var(--sea-mmenu-macro); font-size: 15px; font-weight: 600; line-height: 1.2; text-transform: uppercase; text-decoration: none; } /* Tipologia in corso, o "Tutti i prodotti X" se non c'e' filtro. */ .sea-mmenu__tipologia.is-current { color: var(--sea-mmenu-accent); } .sea-mmenu__tipologia:hover, .sea-mmenu__tipologia:focus-visible { color: var(--sea-mmenu-navy); } /* ─────────────── Ritorno al livello precedente ─────────────── */ .sea-mmenu__back { display: flex; align-items: center; gap: 13px; width: 100%; padding: 4px 20px 14px; border: none; background: none; color: var(--sea-mmenu-muted); font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; text-align: left; text-transform: uppercase; cursor: pointer; } .sea-mmenu__back:hover, .sea-mmenu__back:focus-visible { color: var(--sea-mmenu-navy); } .sea-mmenu__rule { height: 0; margin: 0 20px 12px; border: none; border-top: 1px solid var(--sea-mmenu-rule); } .sea-mmenu__rule--footer { margin: 16px 20px; } /* Chevron disegnato in CSS (nel Figma è un vettore 7x12.6). */ .sea-mmenu__chevron { width: 7px; height: 7px; flex-shrink: 0; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); } .sea-mmenu__chevron--back { transform: rotate(-135deg); } /* ─────────────── Piede: Download e lingua ─────────────── */ .sea-mmenu__meta-link { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px; color: var(--sea-mmenu-text); font-size: 18px; font-weight: 700; line-height: 1.3; text-transform: uppercase; text-decoration: none; } .sea-mmenu__meta-link--static { cursor: default; } a.sea-mmenu__meta-link:hover, a.sea-mmenu__meta-link:focus-visible { color: var(--sea-mmenu-accent); } .sea-mmenu__meta-link.is-current { color: var(--sea-mmenu-accent); } .sea-mmenu__langs { display: flex; flex-wrap: wrap; } /* Il selettore lingua nel mockup è più piccolo delle voci di menu. */ .sea-mmenu__langs .sea-mmenu__meta-link { font-size: 16px; } /* Libro aperto e globo sono SVG inline emessi dal renderer: in CSS puro il libro degenerava in un rettangolo. Ereditano il colore via currentColor. */ .sea-mmenu__icon { display: block; flex-shrink: 0; width: 20px; height: 20px; } /* ─────────────── Trigger [sea_mobile_menu]: hamburger → X ─────────────── Tre barre che ruotano nella X del mockup (791:2627 e 791:2592): 30x19,2 con tratto 2,4px e passo 8,4, navy; aperto diventa una X di 27x27. `display` è governato dalla media query generata in PHP: qui sta solo l'aspetto, così il bottone non lampeggia prima che il CSS inline arrivi. */ .sea-mmenu-trigger { --sea-mmenu-trigger-size: 24px; /* Senza un valore dallo shortcode l'icona resta quadrata, come prima. */ --sea-mmenu-trigger-height: var(--sea-mmenu-trigger-size); --sea-mmenu-trigger-color: #031c59; --sea-mmenu-trigger-bar: 2.4px; /* Lato della X che sostituisce l'hamburger: 27px nel mockup (791:2592). */ --sea-mmenu-trigger-x: 27px; display: none; align-items: center; gap: 10px; /* Le barre sono alte 19,2px in tutto: da sole darebbero un'area di tocco troppo bassa, quindi il padding verticale la porta oltre i 40px. */ padding: 12px 6px; border: none; background: none; color: var(--sea-mmenu-trigger-color); font: inherit; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; } /* Il trigger e' un bottone inline, e nel widget shortcode di Elementor vive dentro una riga di testo: sotto di lui restavano i 7,6px di discendenti dell'interlinea. Effetto, l'hamburger saliva di 4px rispetto al logo e al riquadro azzurro, e la barra bianca cresceva di altrettanto. Azzerare l'interlinea del solo contenitore che lo ospita toglie quello spazio senza toccare il resto del widget. */ .elementor-shortcode:has(> .sea-mmenu-trigger) { line-height: 0; } .sea-mmenu-trigger__text { font-weight: 700; text-transform: uppercase; } .sea-mmenu-trigger__icon { position: relative; display: block; flex-shrink: 0; width: var(--sea-mmenu-trigger-size); height: var(--sea-mmenu-trigger-height); } /* Barra centrale sull'elemento, le altre due sugli pseudo: aperto, la centrale svanisce e le altre si incrociano al centro. */ .sea-mmenu-trigger__icon::before, .sea-mmenu-trigger__icon::after, .sea-mmenu-trigger__icon > i, .sea-mmenu-trigger__icon { box-sizing: border-box; } .sea-mmenu-trigger__icon::before, .sea-mmenu-trigger__icon::after { content: ''; position: absolute; left: 0; width: 100%; height: var(--sea-mmenu-trigger-bar); background: currentColor; border-radius: 2px; transition: transform .22s ease, top .22s ease; } .sea-mmenu-trigger__icon::before { top: 0; } .sea-mmenu-trigger__icon::after { top: calc(100% - var(--sea-mmenu-trigger-bar)); } /* La barra di mezzo, che sparisce all'apertura. */ .sea-mmenu-trigger__icon { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 100% var(--sea-mmenu-trigger-bar); background-position: 0 center; transition: background-size .22s ease; } .sea-mmenu-trigger.is-open .sea-mmenu-trigger__icon { background-size: 0 var(--sea-mmenu-trigger-bar); } /* Da chiuso le barre sono larghe quanto il box; ruotate a 45 gradi il loro ingombro si accorcia di 1,414, percio' per una X larga 27px come nel mockup vanno allungate dello stesso fattore e ricentrate. */ .sea-mmenu-trigger.is-open .sea-mmenu-trigger__icon::before, .sea-mmenu-trigger.is-open .sea-mmenu-trigger__icon::after { top: calc(50% - var(--sea-mmenu-trigger-bar) / 2); left: 50%; width: calc(var(--sea-mmenu-trigger-x) * 1.41421); margin-left: calc(var(--sea-mmenu-trigger-x) * -0.70711); } .sea-mmenu-trigger.is-open .sea-mmenu-trigger__icon::before { transform: rotate(45deg); } .sea-mmenu-trigger.is-open .sea-mmenu-trigger__icon::after { transform: rotate(-45deg); } /* Blocco dello scroll di fondo. Su iOS overflow:hidden da solo non basta: il JS fissa anche il body e ne ripristina la posizione alla chiusura. */ html.sea-mmenu-lock, html.sea-mmenu-lock body { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .sea-mmenu, .sea-mmenu__backdrop, .sea-mmenu__sheet, .sea-mmenu-trigger__icon, .sea-mmenu-trigger__icon::before, .sea-mmenu-trigger__icon::after, .sea-mmenu__panel.is-active[data-dir="forward"], .sea-mmenu__panel.is-active[data-dir="back"] { transition: none; animation: none; } } /* ─────────────── Il reset di hello-elementor sui bottoni ─────────────── reset.css veste ogni