.header { background-color: #ffffff; padding: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: #2d3091; position: fixed; top: 0; z-index: 1000; width: 100%; font-size: 1.375rem; transition: all 0.3s ease; } .header-v2 { background: linear-gradient( 180deg, rgba(0, 0, 50, 0.85) 0%, rgba(0, 0, 50, 0) 100% ); box-shadow: 0 2px 4px rgba(0, 0, 0, 0); color: #ffffff; font-size: 2rem; transition: all 0.3s ease; } .header-container { height: 70px; max-width: 92%; margin: 0 auto; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; align-content: center; transition: all 0.3s ease; } .header-container-v2 { height: 120px; transition: all 0.3s ease; } .header-logo-container { display: flex; flex-direction: row; justify-content: center; align-items: center; } .header-logo-text { font-family: "EB Garamond", serif; font-weight: 500; margin-left: 10px; } .header-logo { width: 50px; aspect-ratio: 1 / 1; flex-shrink: 0; background-size: cover; background-position: center; /* margin: 0; */ background-image: url("../assets/logos/UniversitySeal.png"); transition: all 0.3s ease; } .header-logo-v2 { width: 75px; transition: all 0.3s ease; } /* ================================================ Scroll lock — single class on , used by both nav and search panels ================================================ */ html.no-scroll { overflow: hidden; } /* ================================================ Nav backdrop overlay — was completely missing, which is why "click outside" never worked ================================================ */ .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1040; /* below nav drawer (1050), above page */ opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .nav-overlay.active { opacity: 1; pointer-events: auto; } /* Navigation */ .navigation { font-size: 1.25rem; } .navigation ul { list-style: none; margin: 0; padding: 0; display: flex; } .navigation li { margin-left: 25px; } .navigation li:first-child { margin-left: 0; } .navigation a { text-decoration: none; font-weight: 600; position: relative; padding: 5px 0; color: inherit; white-space: nowrap; } .navigation a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .navigation a:hover::after { transform: scaleX(1); transform-origin: left; } .navigation a:not(:hover)::after { transform-origin: right; } /* Hamburger button */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 1100; flex-shrink: 0; } .hamburger span { display: block; width: 24px; height: 2px; background-color: #2d3091; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; } .header-v2 .hamburger span { background-color: #ffffff; } .hamburger.open span, .header-v2 .hamburger.open span { background-color: #ffffff; } /* Animate into ✕ when open */ .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1400px) { .header-logo { width: 45px; } .header-logo-v2 { width: 70px; } } @media (max-width: 1250px) { .header-logo { width: 40px; } .header-logo-v2 { width: 65px; } .navigation li { margin-left: 12px; } } @media (max-width: 1100px) { .header-logo { width: 35px; } .header-logo-v2 { width: 60px; } .hamburger { display: flex; } .navigation { position: fixed; top: 0; right: -100%; width: min(320px, 80vw); height: 100vh; background-color: rgb(4, 3, 84); color: #ffffff; padding: 90px 32px 32px; z-index: 1050; transition: right 0.35s ease; overflow-y: auto; } .navigation.nav-open { right: 0; } .navigation ul { flex-direction: column; } .navigation li { margin-left: 0; border-bottom: 1px solid rgba(255,255,255,0.12); } .navigation a { display: block; padding: 14px 0; font-size: 18px; color: #ffffff; } } @media (max-width: 650px) { .header-logo-v2 { width: 50px; } .header-logo-text { font-size: 1.4rem ;} } @media (max-width: 480px) { .header-logo-v2 { width: 40px; } .header-logo-text { font-size: 1.1rem ;} } @media (max-width: 380px) { .header-logo-v2 { width: 35px; } .header-logo-text { font-size: 0.8rem ;} }