/* Header Section Start */ /* ================================================================= */ /* 1) Header-bar slide-up on scroll */ /* ================================================================= */ .mobile-header, .desktop-header { transition: transform 0.3s ease, opacity 0.3s ease; transform: translateY(0); opacity: 1; z-index: 1030; } #siteHeader.scroll-hide .mobile-header, #siteHeader.scroll-hide .desktop-header { transform: translateY(-100%); opacity: 0; } /* ================================================================= */ /* 2) Nav default: light + blurred background */ /* ================================================================= */ #mainNav { position: relative; background-color: rgba(248, 249, 250, 0.8); backdrop-filter: blur(8px); transition: background-color 1.4s ease, backdrop-filter 1.4s ease, box-shadow 1.4s ease; } /* ================================================================= */ /* 3) Keyframes for fade+slide on the nav entering fixed state */ /* ================================================================= */ @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes blurToSolid { from { backdrop-filter: blur(8px); background-color: rgba(248, 249, 250, 0.6); } to { backdrop-filter: blur(0); background-color: rgba(248, 249, 250, 1); } } /* ================================================================= */ /* 4) Nav when fixed: snap to top + play animations */ /* ================================================================= */ #siteHeader.scroll-hide #mainNav { position: fixed !important; top: 0; left: 0; width: 100%; animation: fadeSlideIn 1.3s ease-out forwards, blurToSolid 1.4s ease-out forwards; border-top: 1px solid #dee2e6; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1030; } /* ================================================================= */ /* 5) Prevent content jump by padding top of */ /* ================================================================= */ body.nav-fixed-padding { padding-top: var(--header-height); } /* ================================================================= */ /* 6) Nav link hover underline */ /* ================================================================= */ #mainNav .nav-link { position: relative; transition: color 0.3s ease; } #mainNav .nav-link::after { content: ""; position: absolute; bottom: 0.3rem; left: 50%; width: 0; height: 2px; background-color: #dc3545; transition: width 0.3s ease, left 0.3s ease; } #mainNav .nav-link:hover { color: #dc3545; } #mainNav .nav-link:hover::after { left: 0.5rem; width: calc(100% - 1rem); } /* ================================================================= */ /* 7) Dropdown item subtle hover */ /* ================================================================= */ #mainNav .dropdown-menu .dropdown-item { transition: background-color 0.3s ease, color 0.3s ease; } #mainNav .dropdown-menu .dropdown-item:hover { background-color: #f1f1f1; color: #dc3545; } /* ================================================================= */ /* 8) Responsive: Hide mainNav on mobile, spacing adjustments */ /* ================================================================= */ @media (max-width: 991.98px) { /* Hide desktop navigation */ #mainNav, .desktop-header { display: none !important; } /* Show and style mobile header */ .mobile-header { display: flex !important; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; } /* Ensure mobile header stays visible when scrolling */ #siteHeader.scroll-hide .mobile-header { transform: none !important; opacity: 1 !important; } /* Mobile header logo sizing */ .mobile-header img { height: 45px; } /* Button and link styling inside mobile header */ .mobile-header .btn, .mobile-header a { display: inline-flex; align-items: center; } /* Adjust button margin and appearance */ .mobile-header .btn { margin-right: 0.75rem; } .mobile-header .btn-outline-danger { padding: 0.25rem 0.5rem; font-size: 0.8rem; } } /* Header Section End */