/* ============================================================ Menu mobile del sito pubblico (presentazione, prezzi) Sotto i 640px i link di sezione erano nascosti e basta: da telefono non c'era modo di raggiungerli. Ora finiscono in un pannello laterale. Nella barra resta tutto com'era prima: logo a sinistra, i pulsanti d'azione ("Prova la demo", "Area clienti") dove sono sempre stati, e il pulsante del menu in fondo. Una riga sola, senza andare a capo. Dal 3/10/2026 il pannello vale fino a 1000px (anche tablet): con la voce «Per chi è» la barra completa non sta piu' sotto i ~930px. Sopra i 1000px non cambia niente: il pannello torna a essere trasparente al layout e il menu e' quello di sempre. ============================================================ */ /* Su schermo largo il contenitore dei link di sezione non deve esistere ai fini del layout: i suoi figli si dispongono come prima. */ .menu-sito-sezioni { display: contents; } /* Su schermo largo il pannello e' trasparente al layout: logo, social e comandi che vivono dentro di esso finirebbero nella barra. Vanno nascosti. */ @media (min-width: 1001px) { .menu-sito-toggle, .menu-sito-chiudi, .menu-sito-sfondo, .menu-sito-logo, .menu-sito-social { display: none !important; } } @media (max-width: 1000px) { /* --- Barra: una riga, niente a capo --- */ nav .container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } nav .brand { flex: 0 0 auto !important; min-width: 0; } nav .brand img { height: 25px !important; width: auto !important; } /* I pulsanti d'azione restano nella barra, esattamente come prima. */ nav .nav-links { display: flex !important; position: static !important; flex: 0 1 auto !important; align-items: center !important; gap: 7px !important; min-width: 0; } /* --- Pulsante che apre il pannello: solo icona, per non rubare larghezza ai due pulsanti d'azione --- */ .menu-sito-toggle { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 34px; padding: 0; border: 1px solid rgba(242, 238, 228, .34); border-radius: 6px; background: transparent; color: #F2EEE4; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .menu-sito-toggle:active { background: rgba(255, 255, 255, .12); } /* --- Pannello con i soli link di sezione --- */ .menu-sito-sezioni { display: flex !important; position: fixed !important; inset: 0 0 0 auto !important; z-index: 1201 !important; width: min(80vw, 290px) !important; height: 100dvh !important; padding: 72px 16px 28px !important; background: #273019 !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; overflow-y: auto !important; transform: translateX(105%) !important; transition: transform .22s ease !important; box-shadow: -10px 0 30px rgba(0, 0, 0, .22); } .menu-sito-sezioni.aperto { transform: translateX(0) !important; } /* --- Logo in cima al pannello --- align-self serve davvero: il pannello e' un flex in colonna con align-items:stretch, e senza questa riga l'immagine viene tirata a tutta larghezza (250px invece di 77) e il marchio esce deformato. */ .menu-sito-logo { display: block !important; align-self: flex-start !important; flex: 0 0 auto; width: auto !important; height: 26px !important; max-width: 100%; margin: 0 4px 18px !important; opacity: .95; } /* --- Link di sezione --- Solo i figli diretti: le icone dei social non devono diventare righe. La regola della pagina li nasconde sotto i 640px, qui tornano visibili. */ .menu-sito-sezioni > a, nav .nav-links .menu-sito-sezioni > a:not(.cta) { display: flex !important; align-items: center; width: 100%; height: auto !important; margin: 0 !important; padding: 15px 14px !important; border-radius: 7px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: rgba(242, 238, 228, .84) !important; font-size: 15px !important; font-weight: 500; text-align: left; white-space: normal !important; } .menu-sito-sezioni > a:last-of-type { border-bottom: 0; } .menu-sito-sezioni > a:active { background: rgba(255, 255, 255, .08); } /* --- Social, in fondo al pannello --- */ .menu-sito-social { display: block !important; margin-top: auto !important; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); } .menu-sito-social-titolo { display: block; margin: 0 0 12px 4px; color: rgba(242, 238, 228, .52); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .menu-sito-social-icone { display: flex; gap: 10px; } .menu-sito-social-icone a { display: inline-flex !important; align-items: center; justify-content: center; width: 42px !important; height: 42px !important; padding: 0 !important; margin: 0 !important; border: 1px solid rgba(242, 238, 228, .22); border-radius: 50%; color: rgba(242, 238, 228, .86) !important; text-decoration: none; } .menu-sito-social-icone a:active { background: rgba(255, 255, 255, .1); color: #fff !important; } .menu-sito-social-icone svg { width: 19px; height: 19px; display: block; } /* --- Chiusura e sfondo --- */ .menu-sito-chiudi { display: block !important; position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(242, 238, 228, .3); border-radius: 50%; background: transparent; color: #F2EEE4; font-size: 21px; line-height: 1; cursor: pointer; } /* Sta dentro