/* ========================================= Floating Circular Glassmorphic Navigation Icons ========================================= */ /* Desktop Sidebar Container - TRANSPARENT WRAPPER with HOVER AREA */ #sidebar { position: fixed !important; right: 0 !important; /* Stick to edge for hover detection */ left: auto !important; top: 50% !important; transform: translateY(-50%) !important; /* Center vertically */ height: 60% !important; /* Hover detection area */ margin: 0 !important; padding: 0 15px !important; /* Padding for spacing */ border-radius: 0 !important; border: none !important; background: transparent !important; /* NO BACKGROUND */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; width: 100px !important; /* Wider hover area */ z-index: 1000; display: flex; flex-direction: column; justify-content: center; gap: 15px; /* Space between circular buttons */ } /* Add a visual hint when not hovered (optional thin line) */ #sidebar::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 100px; background: linear-gradient(to bottom, transparent, rgba(255, 107, 107, 0.3), transparent); border-radius: 10px; opacity: 0.5; transition: opacity 0.3s ease; } #sidebar:hover::before { opacity: 0; /* Hide hint line when hovering */ } /* Navigation List */ #sidebar .sidebar-nav { padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; align-items: center !important; gap: 15px; /* Space between icons */ overflow: visible; width: auto; } /* Navigation Items - CIRCULAR GLASSMORPHIC BUTTONS - HIDDEN BY DEFAULT */ #sidebar .sidebar-item { margin: 0 !important; padding: 0 !important; width: 55px !important; /* Circle size */ height: 55px !important; /* Circle size */ display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.08) !important; /* Glassmorphic background */ backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 50% !important; /* Perfect circle */ position: relative !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; color: rgba(255, 255, 255, 0.7); cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; /* HIDDEN BY DEFAULT */ opacity: 0 !important; transform: translateX(80px) !important; /* Slide out to the right */ pointer-events: none; /* Disable interaction when hidden */ } /* SHOW ICONS WHEN HOVERING SIDEBAR */ #sidebar:hover .sidebar-item { opacity: 1 !important; transform: translateX(0) !important; /* Slide in */ pointer-events: auto; /* Enable interaction */ } /* Staggered animation for each icon */ #sidebar:hover .sidebar-item:nth-child(1) { transition-delay: 0.05s; } #sidebar:hover .sidebar-item:nth-child(2) { transition-delay: 0.1s; } #sidebar:hover .sidebar-item:nth-child(3) { transition-delay: 0.15s; } #sidebar:hover .sidebar-item:nth-child(4) { transition-delay: 0.2s; } #sidebar:hover .sidebar-item:nth-child(5) { transition-delay: 0.25s; } /* Icon Styling - CENTERED IN CIRCLE */ #sidebar .sidebar-item i { font-size: 1.3rem; width: 100%; text-align: center; color: inherit; transition: all 0.3s ease; } /* Text Label - HIDDEN */ #sidebar .sidebar-item span { display: none !important; } /* Active State - GLOWING EFFECT */ #sidebar .sidebar-item.active { background: linear-gradient(135deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0.15) 100%) !important; border-color: rgba(255, 107, 107, 0.5) !important; color: var(--primary) !important; box-shadow: 0 0 20px rgba(255, 107, 107, 0.4), 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; transform: scale(1.1) !important; } #sidebar .sidebar-item.active i { color: var(--primary) !important; filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.6)); } /* Hover State - ELEVATION (only when sidebar is hovered) */ #sidebar:hover .sidebar-item:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: white !important; transform: scale(1.08) translateX(-5px) !important; /* Slight pull left */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } #sidebar:hover .sidebar-item:hover i { color: white !important; transform: scale(1.05); } /* Active Hover State */ #sidebar:hover .sidebar-item.active:hover { transform: scale(1.12) translateX(-5px) !important; box-shadow: 0 0 25px rgba(255, 107, 107, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4) !important; } /* Hide old hamburger menu toggle button */ .sidebar-toggle, #sidebarToggle { display: none !important; } /* Hide bottom navigation bar on DESKTOP only */ @media (min-width: 769px) { .bottom-navigation { display: none !important; } } /* Hide floating sidebar on MOBILE */ @media (max-width: 768px) { #sidebar { display: none !important; } } /* Adjust main content padding based on screen size */ @media (min-width: 769px) { .main-content { padding-bottom: 20px !important; margin-right: 0 !important; /* Remove margin since sidebar is floating */ } } /* Light mode adjustments */ body.light-mode #sidebar .sidebar-item { background: rgba(255, 255, 255, 0.6) !important; border-color: rgba(0, 0, 0, 0.1) !important; color: #2d3748; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; } body.light-mode #sidebar .sidebar-item:hover { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(0, 0, 0, 0.2) !important; } body.light-mode #sidebar .sidebar-item.active { background: linear-gradient(135deg, rgba(255, 107, 107, 0.4) 0%, rgba(255, 107, 107, 0.2) 100%) !important; }