/* Rounded Navbar Styles */
/* Main Navbar Container */
.navbar.curved-navbar {
padding: 0.6rem 1rem;
border-radius: 0 0 30px 30px;
margin: 0 15px;
width: calc(100% - 30px);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05),
0 10px 30px -10px rgba(0, 0, 0, 0.1);
}
.navbar-dark.curved-navbar {
background: rgba(33, 37, 41, 0.85);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15),
0 10px 30px -10px rgba(0, 0, 0, 0.2);
}
.navbar-collapse {
border-radius: 20px;
}
/* Navigation Links */
.nav-link {
border-radius: 50px;
padding: 0.7rem 1.2rem !important;
margin: 0 3px;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
position: relative;
overflow: hidden;
}
.nav-link::before {
content: '';
position: absolute;
width: 100%;
height: 0;
bottom: 0;
left: 0;
background-color: rgba(var(--primary-rgb), 0.1);
transition: all 0.3s ease;
z-index: -1;
border-radius: 50px;
}
.nav-link:hover::before, .nav-link.active::before {
height: 100%;
box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.15);
}
.nav-link:hover, .nav-link.active {
transform: translateY(-3px);
color: var(--primary-color) !important;
}
.navbar-dark .nav-link:hover, .navbar-dark .nav-link.active {
color: #fff !important;
}
/* Rounded Dropdown Toggles */
.dropdown-toggle {
border-radius: 50px;
}
/* Mega Dropdown Menu */
.mega-dropdown-menu {
border-radius: 20px !important;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(0, 0, 0, 0.05) !important;
}
.menu-section {
border-radius: 20px !important;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}
.menu-section:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
/* Dropdown Items */
.dropdown-item {
border-radius: 50px !important;
margin-bottom: 5px;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.dropdown-item:hover {
box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.1);
transform: translateX(5px) !important;
}
/* User Avatar Menu */
.avatar-menu {
position: relative;
}
.avatar-menu.active .avatar-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.avatar-toggle {
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.avatar-toggle::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(var(--primary-rgb), 0.1);
border-radius: 50%;
opacity: 0;
transform: scale(0.8);
transition: all 0.3s ease;
}
.avatar-toggle:hover::before {
opacity: 1;
transform: scale(1);
}
.avatar-toggle:focus {
outline: none;
}
.avatar-img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-color);
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
color: var(--primary-color);
font-size: 18px;
position: relative;
z-index: 2;
}
.avatar-img.initial {
font-weight: 600;
text-transform: uppercase;
}
.avatar-toggle:hover .avatar-img {
transform: scale(1.1);
box-shadow: 0 8px 15px rgba(var(--primary-rgb), 0.2);
}
.avatar-header {
display: flex;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
margin-bottom: 10px;
background-color: rgba(var(--primary-rgb), 0.03);
}
.avatar-header-img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
border: 3px solid var(--primary-color);
box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.15);
background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
color: var(--primary-color);
font-size: 24px;
font-weight: 600;
text-transform: uppercase;
}
.avatar-name {
font-weight: 600;
font-size: 1.1rem;
margin: 0;
color: #333;
}
.avatar-email {
font-size: 0.85rem;
color: #777;
margin: 5px 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 170px;
}
.badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 1rem;
margin-top: 5px;
display: inline-block;
}
.bg-primary {
background-color: var(--primary-color) !important;
color: white;
}
.avatar-menu-item {
padding: 12px 20px;
transition: all 0.3s ease;
display: flex;
align-items: center;
color: #333;
text-decoration: none;
border-radius: 50px;
margin: 5px 15px;
}
.avatar-menu-item:hover {
background-color: rgba(var(--primary-rgb), 0.08);
transform: translateX(5px);
}
.avatar-menu-item i {
margin-right: 12px;
font-size: 1.1rem;
transition: all 0.3s ease;
width: 20px;
text-align: center;
}
.avatar-menu-item:hover i {
transform: scale(1.1);
}
.avatar-menu-item.logout {
color: #e74a3b;
}
.avatar-menu-item.logout:hover {
background-color: rgba(231, 74, 59, 0.08);
}
.avatar-divider {
height: 1px;
background-color: rgba(0, 0, 0, 0.05);
margin: 10px 0;
}
/* Status indicator with pulsing effect */
.status-indicator {
border-radius: 50%;
animation: pulse 2s infinite;
position: absolute;
width: 12px;
height: 12px;
bottom: 0;
right: 0;
border: 2px solid white;
z-index: 2;
}
.status-indicator.online {
background-color: #4CAF50;
}
/* Auth Buttons */
.btn-login, .btn-register {
border-radius: 50px !important;
padding: 0.6rem 1.8rem !important;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-register {
background: var(--primary-color) !important;
color: white !important;
border: none !important;
}
.btn-login {
background: transparent !important;
color: var(--primary-color) !important;
border: 2px solid var(--primary-color) !important;
}
.btn-login::before, .btn-register::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: all 0.8s ease;
z-index: -1;
}
.btn-login:hover, .btn-register:hover {
transform: translateY(-5px) scale(1.02) !important;
box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.25) !important;
}
.btn-login:hover::before, .btn-register:hover::before {
left: 100%;
}
.btn-register:hover {
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)) !important;
}
.btn-login:hover {
background: rgba(var(--primary-rgb), 0.08) !important;
border-color: transparent !important;
color: var(--primary-color) !important;
}
/* Mobile Menu */
@media (max-width: 991.98px) {
.navbar-collapse {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.navbar.curved-navbar {
border-radius: 20px;
margin: 5px 10px;
width: calc(100% - 20px);
}
.avatar-menu {
margin-top: 10px;
}
.avatar-dropdown {
position: fixed;
left: 0;
right: 0;
width: 100%;
bottom: 0;
border-radius: 25px 25px 0 0 !important;
z-index: 1050;
}
.auth-buttons {
margin-top: 15px;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.btn-login, .btn-register {
width: 100%;
text-align: center;
}
}
/* Hamburger Menu */
.toggler-icon {
border-radius: 50px;
height: 3px !important;
}
/* Additional curved elements */
.navbar.curved-navbar::before {
content: '';
position: absolute;
height: 15px;
width: 120px;
background-color: inherit;
bottom: -15px;
left: 30px;
border-radius: 0 0 20px 20px;
filter: blur(5px);
opacity: 0.7;
z-index: -1;
}
.navbar.curved-navbar::after {
content: '';
position: absolute;
height: 15px;
width: 120px;
background-color: inherit;
bottom: -15px;
right: 30px;
border-radius: 0 0 20px 20px;
filter: blur(5px);
opacity: 0.7;
z-index: -1;
}
/* Pill-like effect for menu items */
.nav-item {
position: relative;
}
/* Curved effect for dropdown menus */
.dropdown-menu::before {
content: '';
position: absolute;
top: -10px;
left: 40px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.05));
}
.navbar-dark .dropdown-menu::before {
border-bottom-color: #212529;
}
/* Add floating effect on scroll */
.navbar.curved-navbar.scrolled {
border-radius: 20px;
margin: 10px 25px;
width: calc(100% - 50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
/* Animations */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
}
70% {
box-shadow: 0 0 0 5px rgba(76, 175, 80, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
}
}
/* Hover effect for auth buttons */
.rounded-pill {
position: relative;
overflow: hidden;
}
.rounded-pill::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent);
transition: all 0.5s ease;
}
.rounded-pill:hover::after {
left: 100%;
}
/* Mobile-specific styles */
@media (max-width: 767.98px) {
.navbar-brand {
display: flex;
align-items: center;
}
.navbar-logo {
height: 35px;
width: auto;
}
}
.avatar-dropdown {
position: absolute;
right: 0;
top: 120%;
width: 280px;
background: white;
border-radius: 25px !important;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(0, 0, 0, 0.05) !important;
padding: 0 0 10px;
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.95);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 1050;
pointer-events: none;
}
