/* FEO GmbH Custom Bootstrap Theme - Navigation * Navigation, dropdown, mobile navbar */ /* Navigation styling */ .modern-navbar { box-shadow: var(--box-shadow-light); transition: all 0.3s ease; padding: 0.8rem 0; } .modern-navbar.sticky-top { backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, 0.92) !important; } .modern-navbar.scrolled { padding: 0.5rem 0; box-shadow: var(--box-shadow-medium); } .modern-navbar .navbar-brand { padding: 0.5rem 0; } .modern-navbar .logo-img { transition: transform 0.3s ease; } .modern-navbar .logo-img:hover { transform: scale(1.05); } /* Main navigation styling */ .navbar-light .navbar-nav .nav-link { color: #333; font-weight: var(--font-weight-light); padding: 0.7rem 1rem; transition: all 0.3s ease; position: relative; border-radius: 4px; letter-spacing: 0.01em; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: var(--bs-primary); background-color: rgba(var(--bs-primary-rgb), 0.03); text-decoration: none; } .navbar-light .navbar-nav .active-link { color: var(--bs-primary); font-weight: var(--font-weight-regular); } .navbar-light .navbar-nav .active-link:after { content: ''; position: relative; transform: translateX(-50%); width: 20px; height: 2px; background-color: var(--bs-primary); border-radius: 2px; } /* Dropdown toggle enhancement */ .navbar-light .navbar-nav .dropdown-toggle::after { transition: transform 0.3s ease; vertical-align: middle; position: relative; transform: translateY(-50%); z-index: -1; } .navbar-light .navbar-nav .dropdown-toggle:hover::after { transform: translateY(-40%); z-index: -1; } .navbar-light .navbar-nav .show > .dropdown-toggle::after { transform: translateY(-50%) rotate(180deg); left: 0.5rem; top: 55%; z-index: -1; } /* Exclude dropdown toggle arrow from link styling */ .navbar-light .navbar-nav .dropdown-toggle::after { width: auto; height: auto; background: none; } .navbar-light .navbar-nav .dropdown-toggle:hover::after { background: none; } /* Ensure dropdown toggle doesn't get background color from general link hover */ .navbar-light .navbar-nav .nav-link.dropdown-toggle:hover { background-color: rgba(var(--bs-primary-rgb), 0.03); } /* Dropdown menu styling */ .modern-dropdown { margin-top: 0.3rem; border-radius: 8px; padding: 0.2rem; min-width: 220px; animation: fadeIn 0.2s ease-out; box-shadow: var(--box-shadow-medium) !important; border: 1px solid rgba(0, 0, 0, 0.03) !important; } .modern-dropdown .dropdown-item { padding: 0.4rem 0.8rem; border-radius: 4px; margin-bottom: 0; transition: all 0.2s ease; font-weight: var(--font-weight-light); letter-spacing: 0.01em; } .modern-dropdown .dropdown-item:hover { background-color: rgba(var(--bs-primary-rgb), 0.03); color: var(--bs-primary); transform: translateX(2px); } .modern-dropdown .dropdown-item.active { background-color: rgba(var(--bs-primary-rgb), 0.05); color: var(--bs-primary); font-weight: var(--font-weight-regular); } .modern-dropdown .parent-item { font-weight: var(--font-weight-regular); color: var(--bs-primary); letter-spacing: 0.01em; } .modern-dropdown .dropdown-divider { margin: 0.1rem 0; opacity: 0.1; } /* Mobile navbar improvements */ @media (max-width: 991.98px) { .modern-navbar { padding: 0.5rem 0; } .navbar-collapse { background-color: white; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 1rem; margin-top: 1rem; } .navbar-nav .nav-item { margin: 0.3rem 0; } .navbar-light .navbar-nav .nav-link { padding: 0.8rem 1.2rem; } .navbar-light .navbar-nav .nav-link.dropdown-toggle { padding-left: 2.2rem; } .navbar-light .navbar-nav .dropdown-toggle::after { left: 0.8rem; top: 55%; transform: translateY(-50%); z-index: -1; } .navbar-light .navbar-nav .active-link:after { left: 1.2rem; transform: none; width: 30px; } .nav-btn { margin-top: 0.5rem; display: block; text-align: center; } .modern-dropdown { border: none !important; box-shadow: none !important; padding-left: 1rem; animation: none; } .modern-dropdown .dropdown-item { padding: 0.4rem 0.8rem; } .modern-dropdown .dropdown-item:hover { transform: none; } }