/* Public Navbar - Frosted Glass Style * Extracted from menu.php for browser caching */ body { padding-top: 62px; } @media (max-width: 991px) { body { padding-top: 56px; } } .public-navbar { background: linear-gradient( 135deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.62) 40%, rgba(230,240,255,0.68) 100% ); backdrop-filter: blur(32px) saturate(1.8) brightness(1.2); -webkit-backdrop-filter: blur(32px) saturate(1.8) brightness(1.2); border-bottom: 1px solid rgba(255,255,255,0.4); border-top: 1px solid rgba(255,255,255,0.6); box-shadow: 0 4px 30px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(255,255,255,0.2); padding: 0.4rem 0; } .public-navbar .navbar-brand img { height: 38px; } .public-navbar .navbar-brand span { color: #0d1b2a; font-weight: 700; font-size: 1.1rem; text-shadow: 0 1px 3px rgba(255,255,255,0.6); } .public-navbar .nav-link { color: #1b2838 !important; padding: 0.4rem 0.85rem !important; font-size: 0.9rem; font-weight: 600; border-radius: 0.375rem; transition: all 0.2s ease; text-shadow: 0 1px 2px rgba(255,255,255,0.5); } .public-navbar .nav-link:hover { color: #000 !important; background-color: rgba(255,255,255,0.35); } .public-navbar .nav-link.active { background-color: rgba(255,255,255,0.3); color: #000 !important; } /* Phone dropdown */ .navbar-phone-toggle { background: rgba(255,255,255,0.25); border: 1px solid rgba(0,0,0,0.12); color: #146c43; padding: 0.25rem 0.5rem; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s ease; font-weight: 600; text-shadow: 0 1px 2px rgba(255,255,255,0.4); } .navbar-phone-toggle:hover, .navbar-phone-toggle.show { background: rgba(255,255,255,0.45); border-color: rgba(0,0,0,0.18); color: #0a5c36; } .navbar-phone-toggle::after { display: none; } .navbar-phone-menu { min-width: 220px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .navbar-phone-menu .dropdown-item { padding: 0.5rem 1rem; } .navbar-phone-menu .dropdown-item i { color: #198754; } /* Dark mode toggle button */ .theme-toggle { background: rgba(255,255,255,0.25); border: 1px solid rgba(0,0,0,0.12); color: #1b2838; padding: 0.25rem 0.5rem; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.25rem; } .theme-toggle:hover { background: rgba(255,255,255,0.45); border-color: rgba(0,0,0,0.18); } .theme-toggle .bi { font-size: 1rem; } [data-bs-theme="light"] .theme-toggle .bi-sun-fill { display: none; } [data-bs-theme="dark"] .theme-toggle .bi-moon-fill { display: none; } /* Login button */ .btn-login { background: rgba(13,110,253,0.12); color: #0d6efd; border: 1px solid rgba(13,110,253,0.35); font-weight: 600; border-radius: 0.375rem; transition: all 0.25s ease; backdrop-filter: blur(4px); } .btn-login:hover, .btn-login:focus { background: rgba(13,110,253,0.22); color: #0a58ca; border-color: rgba(13,110,253,0.5); box-shadow: 0 2px 12px rgba(13,110,253,0.18); } [data-bs-theme="dark"] .btn-login { background: rgba(100,160,255,0.12); color: #8ab4ff; border-color: rgba(100,160,255,0.3); } [data-bs-theme="dark"] .btn-login:hover, [data-bs-theme="dark"] .btn-login:focus { background: rgba(100,160,255,0.22); color: #fff; border-color: rgba(100,160,255,0.5); box-shadow: 0 2px 12px rgba(100,160,255,0.2); } /* Dark mode header */ [data-bs-theme="dark"] .public-navbar { background: linear-gradient( 135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 40%, rgba(150,180,255,0.05) 100% ); backdrop-filter: blur(24px) saturate(1.4) brightness(0.9); -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(0.9); border-bottom: 1px solid rgba(255,255,255,0.12); border-top: 1px solid rgba(255,255,255,0.15); box-shadow: 0 4px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(255,255,255,0.05); } [data-bs-theme="dark"] .public-navbar .navbar-brand span { color: #e9ecef; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } [data-bs-theme="dark"] .public-navbar .nav-link { color: #d0d5db !important; } [data-bs-theme="dark"] .public-navbar .nav-link:hover { color: #fff !important; background-color: rgba(255,255,255,0.1); } [data-bs-theme="dark"] .public-navbar .nav-link.active { color: #fff !important; background-color: rgba(255,255,255,0.12); } [data-bs-theme="dark"] .navbar-phone-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #90EE90; } [data-bs-theme="dark"] .navbar-phone-toggle:hover { background: rgba(255,255,255,0.15); color: #fff; } [data-bs-theme="dark"] .theme-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #ecf0f1; } [data-bs-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.15); } [data-bs-theme="dark"] .navbar-phone-menu { background-color: #2b3035; } [data-bs-theme="dark"] .navbar-phone-menu .dropdown-item { color: #e9ecef; } [data-bs-theme="dark"] .navbar-phone-menu .dropdown-item:hover { background-color: #343a40; } /* CRITICAL: Force body/html background in dark mode */ [data-bs-theme="dark"] body, [data-bs-theme="dark"] html { background-color: #212529 !important; color: #e9ecef !important; } /* Hamburger icon color */ .public-navbar .navbar-toggler { border: 0; padding: 0.25rem 0.5rem; } .public-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%280,0,0,0.65%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e"); } [data-bs-theme="dark"] .public-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%28255,255,255,0.85%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e"); }