@charset "UTF-8"; /* assets/scss/sidebar.scss */ /* ========================================================================== VN SIDEBAR SYSTEM - Desktop: sidebar fissa - Mobile/Tablet: topbar + dropdown menu dall'alto + overlay - Valori base da Figma, scaling responsive mantenuto ========================================================================== */ /* ========================================================================== 1) DESIGN TOKENS (CSS VARIABLES) - AGGIORNATI DA FIGMA ========================================================================== */ :root { --vn-pink: var(--primary-pink); /* #FBDAD1 */ --vn-text: var(--primary-fuxia); /* #E83368 */ --vn-white: var(--bg-white); /* #ffffff */ --vn-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Layout - Base da Figma */ --vn-sidenav-w: 267px; /* Fisso da Figma */ --vn-topbar-h: 64px; /* Spaziature - da Figma */ --vn-sidenav-pad-v: 48px; /* vertical padding */ --vn-sidenav-pad-h: 24px; /* horizontal padding */ /* Logo separatore - da Figma */ --vn-logo-separator-gap: 24px; /* Gap tra logo e linea */ --vn-menu-top-gap: 64px; /* Gap tra linea e menu */ /* Tipografia menu - da Figma */ --vn-menu-font: 22px; --vn-menu-gap: 20px; /* Gap tra link */ --vn-menu-hit: 8px; --vn-menu-line-height: 24px; /* 109.091% */ --vn-menu-letter-spacing: -0.418px; /* Logo (desktop sidebar) - da Figma */ --vn-logo-w: 242px; --vn-logo-h: 40px; /* Footer/social - da Figma */ --vn-footer-gap: 16px; /* Gap tra copyright e social */ --vn-copyright-font: 16px; --vn-copyright-line-height: 24px; /* 150% */ --vn-copyright-letter-spacing: -0.304px; --vn-social-size: 24px; --vn-social-gap: 12px; /* Gap tra icone */ } /* XL - Scaling proporzionale mantenuto */ @media (min-width: 1400px) { :root { --vn-sidenav-w: 300px; --vn-sidenav-pad-v: 52px; --vn-sidenav-pad-h: 26px; --vn-menu-font: 23px; --vn-menu-gap: 21px; --vn-logo-w: 260px; --vn-logo-h: 43px; } } /* 2XL */ @media (min-width: 1600px) { :root { --vn-sidenav-w: 340px; --vn-sidenav-pad-v: 56px; --vn-sidenav-pad-h: 28px; --vn-menu-font: 24px; --vn-menu-gap: 22px; --vn-logo-w: 280px; --vn-logo-h: 46px; } } /* ~2K */ @media (min-width: 2000px) { :root { --vn-sidenav-w: 400px; --vn-sidenav-pad-v: 64px; --vn-sidenav-pad-h: 32px; --vn-menu-font: 26px; --vn-menu-gap: 24px; --vn-logo-w: 320px; --vn-logo-h: 53px; } } /* 4K */ @media (min-width: 2400px) { :root { --vn-sidenav-w: 480px; --vn-sidenav-pad-v: 72px; --vn-sidenav-pad-h: 36px; --vn-menu-font: 28px; --vn-menu-gap: 26px; --vn-logo-w: 360px; --vn-logo-h: 60px; } } /* ========================================================================== 2) GLOBAL SCROLL LOCK (aggiunto dal JS su e/o ) ========================================================================== */ html.vn-no-scroll, body.vn-no-scroll { overflow: hidden; height: 100%; } /* ========================================================================== 3) MOBILE TOPBAR (visibile solo <= 991.98) ========================================================================== */ .vn-topbar { position: fixed; inset: 0 0 auto 0; z-index: 1300; height: var(--vn-topbar-h); display: none; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--vn-pink); } .vn-topbar__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .vn-topbar__brand img, .vn-topbar__brand svg { height: 40px; width: auto; display: block; } .vn-burger { width: 48px; height: 48px; border: 0; background: transparent; padding: 12px; display: inline-flex; flex-direction: column; justify-content: center; gap: 7px; cursor: pointer; } .vn-burger__line { display: block; width: 100%; height: 2px; background: var(--vn-text); border-radius: 2px; } /* ========================================================================== 4) OVERLAY (mobile) ========================================================================== */ .vn-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.35); touch-action: none; } /* ========================================================================== 5) SIDENAV BASE STYLES (common) ========================================================================== */ .sidenav { background: var(--vn-pink); color: var(--vn-text); display: flex; flex-direction: column; justify-content: space-between; /* ← AGGIUNGI QUESTO */ align-items: flex-start; /* ← AGGIUNGI QUESTO */ border-right: 1px solid var(--vn-white); /* Aggiunto da Figma */ } .sidenav a { color: var(--vn-text); text-decoration: none; } .sidenav a:hover { text-decoration: none; /* Rimosso underline, solo animazioni */ } /* ========================================================================== 6) SIDENAV HEADER (logo + separatore) ========================================================================== */ .sidenav .sidebar-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vn-logo-separator-gap); } .sidenav .logo-wrap { display: inline-flex; align-items: center; text-decoration: none; margin-bottom: 0 !important; /* Resettato, usiamo gap */ transition: transform 0.3s ease; } .sidenav .logo-wrap:hover { transform: scale(1.04); } .sidenav .logo-wrap img, .sidenav .logo-wrap svg { width: var(--vn-logo-w); height: var(--vn-logo-h); display: block; } /* Linea separatore sotto logo */ .sidenav .logo-separator { width: 100%; height: 0; border-bottom: 1px solid var(--vn-white); } /* ========================================================================== 7) SIDENAV NAV (menu wrapper con gap) ========================================================================== */ .sidenav .sidebar-nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vn-menu-top-gap); /* 64px tra linea e menu */ align-self: stretch; flex: 1; } /* Menu */ .sidenav .mainmenu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-start; /* ← da Figma */ gap: 20px; /* ← NON var(--vn-menu-gap), scrivi direttamente 20px */ width: 100%; /* ← per occupare tutta la larghezza disponibile */ } .sidenav .mainmenu li { margin: 0 !important; /* ← Forza reset */ padding: 0 !important; /* ← Forza reset */ } .sidenav .mainmenu a { font-family: "Space Grotesk", sans-serif; font-size: var(--vn-menu-font); line-height: var(--vn-menu-line-height); font-weight: 400; letter-spacing: var(--vn-menu-letter-spacing); display: flex; align-items: center; gap: 8px; padding: 0; /* ← RIMUOVI var(--vn-menu-hit), metti 0 */ margin: 0; /* ← AGGIUNGI */ transition: transform 0.2s ease; } .sidenav .mainmenu a::before { content: '→'; display: inline-block; transition: transform 0.3s ease; } .sidenav .mainmenu a:hover { transform: translateX(4px); } .sidenav .mainmenu a:hover::before { transform: translateX(2px); } /* ========================================================================== 8) SIDENAV FOOTER ========================================================================== */ .sidenav .sidebar-footer { display: flex; flex-direction: column; gap: var(--vn-footer-gap); /* 16px tra copyright e social */ padding-top: 0; } .sidenav .sidebar-footer small, .sidenav .sidebar-copyright { font-family: "Space Grotesk", sans-serif; font-size: 16px; /* var(--vn-copyright-font) */ line-height: 24px; /* var(--vn-copyright-line-height) */ font-weight: 400; letter-spacing: -0.304px; /* var(--vn-copyright-letter-spacing) */ /* Figma indica nero pieno. Usiamo un grigio molto scuro: visivamente meno duro, e resta ampiamente leggibile sul rosa della sidebar (~11:1). */ color: var(--text-dark); margin: 0; } .sidenav .sidebar-footer small .sidebar-copyright__admin-link, .sidenav .sidebar-copyright .sidebar-copyright__admin-link { color: inherit; text-decoration: none; cursor: text; } /* Social */ .sidenav .social { display: flex; gap: var(--vn-social-gap); /* 12px tra icone */ align-items: center; margin: 0; padding: 0; } .sidenav .social a { color: var(--vn-text); font-size: var(--vn-social-size); display: inline-flex; align-items: center; justify-content: center; width: var(--vn-social-size); height: var(--vn-social-size); transition: transform 0.3s ease; /* Bounce animation */ } .sidenav .social a svg, .sidenav .social a i { width: var(--vn-social-size); height: var(--vn-social-size); } .sidenav .social a:hover { animation: social-bounce 0.5s ease; } @keyframes social-bounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-8px); } 50% { transform: translateY(0); } 75% { transform: translateY(-4px); } } /* ========================================================================== 9) DESKTOP (>= 992px) — sidebar fissa + offset pagina ========================================================================== */ @media (min-width: 992px) { .sidenav { position: fixed; top: 0; left: 0; width: var(--vn-sidenav-w); height: 100dvh; padding: var(--vn-sidenav-pad-v) var(--vn-sidenav-pad-h); /* ← Padding applicato qui */ overflow: auto; overscroll-behavior: contain; z-index: 1000; transform: none !important; transition: none; } .vn-topbar, .vn-overlay { display: none !important; } body { padding-top: 0; } } /* ========================================================================== 10) MOBILE/TABLET (<= 991.98px) — dropdown dall'alto sotto topbar ========================================================================== */ @media (max-width: 991.98px) { /* Compattazione su mobile */ :root { --vn-sidenav-pad-v: 18px; --vn-sidenav-pad-h: 18px; --vn-menu-font: 20px; --vn-menu-gap: 16px; --vn-menu-hit: 6px; --vn-footer-gap: 12px; --vn-social-size: 22px; --vn-social-gap: 10px; } body { padding-top: var(--vn-topbar-h); } .vn-topbar { display: flex; } .sidenav { position: fixed; left: 0; width: 100%; top: var(--vn-topbar-h); height: auto !important; max-height: calc(100dvh - var(--vn-topbar-h)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; z-index: 1200; transform: translateY(-100%); transition: transform 260ms ease; will-change: transform; } .sidenav.is-open { transform: translateY(0); } /* nel dropdown non mostrare il logo (già in topbar) */ .sidenav .logo-wrap, .sidenav .logo-separator, .sidenav .sidebar-header { display: none !important; } /* padding pannello - riduci padding-top */ .sidenav .sidenav-content { padding: 16px var(--vn-sidenav-pad-h) var(--vn-sidenav-pad-v) var(--vn-sidenav-pad-h) !important; } /* Azzera margin-top del menu */ .sidenav .mainmenu { margin-top: 0 !important; } /* footer compatto */ .sidenav .sidebar-footer { margin-top: 14px !important; } .sidenav .sidebar-footer small { font-size: 14px; } /* Disabilita animazioni su mobile */ .sidenav .logo-wrap:hover { transform: none; } .sidenav .mainmenu a:hover { transform: none; } .sidenav .social a:hover { animation: none; } } /* ========================================================================== 11) BURGER MENU - Animazione in X ========================================================================== */ .vn-burger { transition: transform 0.2s ease; } .vn-burger .vn-burger__line { transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .vn-burger[aria-expanded="true"] .vn-burger__line:nth-child(1) { transform: translateY(9px) rotate(45deg); } .vn-burger[aria-expanded="true"] .vn-burger__line:nth-child(2) { opacity: 0; transform: scaleX(0); } .vn-burger[aria-expanded="true"] .vn-burger__line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }