/* ========================================================= Header (header + nav drawer) ========================================================= */ /* tokens */ :root{ --header-h: 64px; --brand-color: #0f1a3a; --blur-strength: 8px; --logo-h: 50px; --burger-gap: 2px; /* space between lines */ --burger-line: 2px; /* line thickness */ } /* Header bar */ .site-header { position: sticky; top: 0; z-index: 1000; /* above drawer/backdrop on iOS */ height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0)); color: var(--brand-color); backdrop-filter: blur(2px); } /* Make it unmistakably visible on real phones */ @media (max-width: 640px){ .site-header{ background:#fff; color: var(--brand-color); backdrop-filter:none; } } /* Logo zone */ .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand-color); min-height: 44px; } .brand img, .brand picture { display:block; height: var(--logo-h); width: auto; max-width: 200px; } /* Burger */ .burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; } .burger span{ display: block; height: var(--burger-line); width: 22px; background: var(--brand-color); transition: transform .25s ease, opacity .25s ease, width .25s ease; will-change: transform, opacity, width; } /* add spacing only above subsequent lines */ .burger span + span { margin-top: var(--burger-gap); } /* Drawer + backdrop */ .backdrop[hidden]{ display:none !important; } /* Safari-safe hidden */ .backdrop { position: fixed; inset: 0; background: rgba(15, 26, 58, .28); backdrop-filter: blur(0); opacity: 0; pointer-events: none; transition: opacity .35s ease, backdrop-filter .35s ease; z-index: 1100; } .nav-drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(320px, 86vw); background: #ffffff; box-shadow: -10px 0 30px rgba(0,0,0,.12); transform: translateX(100%); transition: transform .35s ease; z-index: 1200; display: flex; flex-direction: column; padding: calc(16px + env(safe-area-inset-top)); } .nav-drawer nav a { display: block; padding: 12px 10px; color: #17154c; text-decoration: none; font-size: 18px; border-radius: 10px; transition: color .2s ease, background-color .2s ease, transform .2s ease; } .nav-drawer nav a:hover, .nav-drawer nav a:focus-visible { background-color: #f3f4f6; color: var(--brand-color); transform: translateX(4px); } /* Open state on */ html.nav-open .nav-drawer { transform: translateX(0%); } html.nav-open .backdrop { opacity: 1; backdrop-filter: blur(var(--blur-strength)); pointer-events: auto; } /* Animate burger to X on open */ html.nav-open .burger span:nth-child(1) { transform: translateY(calc(var(--burger-line) + var(--burger-gap))) rotate(45deg); } html.nav-open .burger span:nth-child(2) { opacity: 0; } html.nav-open .burger span:nth-child(3) { transform: translateY(calc(-1 * (var(--burger-line) + var(--burger-gap)))) rotate(-45deg); } /* Motion respect */ @media (prefers-reduced-motion: reduce){ .backdrop, .nav-drawer, .burger span { transition: none !important; } }