/* ============================================================ Diamante A&T - Menu di navigazione (unico per tutto il sito) Include questo file nel di ogni pagina: ============================================================ */ /* --- Layout desktop: menu a sinistra + contenuto a destra --- */ .site-layout { display: flex; min-height: 100vh; width: 100%; } .site-menu { width: 205px; flex-shrink: 0; background: #0D1B2A; color: #fff; font-family: Arial, Helvetica, Geneva, sans-serif; padding: 45px 15px 20px 30px; box-sizing: border-box; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .site-content { flex: 1; min-width: 0; /* impedisce overflow orizzontale in flex */ background: #0D1B2A; } /* --- Voci di menu --- */ .site-menu nav ul { list-style: none; padding: 0; margin: 0; } .site-menu nav li { display: flex; align-items: center; gap: 8px; padding: 9px 0; } .site-menu nav a.menu-link { color: #ffffff; text-decoration: none; font-size: 12px; font-weight: normal; line-height: 1.25; transition: color 0.25s ease, transform 0.25s ease; display: block; flex: 1; } .site-menu nav a.menu-link:hover { color: #66CCFF; transform: translateX(4px); } /* --- Icona diamante SVG accanto a ogni voce --- */ .site-menu .dia { width: 24px; height: 17px; flex-shrink: 0; transition: transform 0.25s ease; } .site-menu nav a.icon-link { display: inline-block; line-height: 0; } .site-menu nav a.icon-link:hover .dia { transform: scale(1.15); } /* --- Badge "NEW" --- */ .site-menu .badge-new { display: inline-block; margin-left: 4px; padding: 2px 4px; border-radius: 3px; background: #C9A84C; color: #0D1B2A; font-family: Arial, Helvetica, sans-serif; font-size: 8px; font-weight: bold; line-height: 1; vertical-align: middle; letter-spacing: 0.4px; } /* --- Footer del menu: bandiera EN + email --- */ .site-menu .menu-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; gap: 12px; } .site-menu .btn-flag, .site-menu .btn-email { display: inline-block; line-height: 0; text-decoration: none; transition: transform 0.25s ease; color: #ffffff; } .site-menu .btn-flag:hover, .site-menu .btn-email:hover { transform: scale(1.15); color: #66CCFF; } .site-menu .btn-flag svg { border: 1px solid #ffffff; border-radius: 2px; transition: border-color 0.25s ease; display: block; } .site-menu .btn-flag:hover svg { border-color: #66CCFF; } .site-menu .btn-email svg { display: block; } /* --- Hamburger button (nascosto su desktop) --- */ .hamburger { display: none; position: fixed; top: 12px; left: 12px; width: 44px; height: 44px; border: 2px solid #66CCFF; border-radius: 6px; background: #0D1B2A; z-index: 1001; cursor: pointer; align-items: center; justify-content: center; padding: 0; } .hamburger svg { width: 24px; height: 24px; stroke: #66CCFF; stroke-width: 2.5; fill: none; stroke-linecap: round; } .hamburger .line { transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .hamburger.open .line-1 { transform: translateY(6px) rotate(45deg); } .hamburger.open .line-2 { opacity: 0; } .hamburger.open .line-3 { transform: translateY(-6px) rotate(-45deg); } /* --- Overlay dietro al menu su mobile --- */ .site-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; } .site-overlay.show { display: block; } /* --- Responsive: mobile e tablet --- */ @media (max-width: 767px) { .hamburger { display: flex; } .site-layout { display: block; } .site-menu { position: fixed; top: 0; left: -100%; width: 80%; max-width: 300px; height: 100vh; z-index: 1000; transition: left 0.3s ease; box-shadow: 4px 0 15px rgba(0, 0, 0, 0.4); padding-top: 60px; /* spazio per non finire sotto l'hamburger */ } .site-menu.open { left: 0; } .site-content { width: 100%; min-height: 100vh; } }