/* Shared mobile nav. Hamburger sits in the topbar; drawer lives on . */ /* Top-nav Sign in pill (used on every page) */ .nav-signin { display: inline-flex; align-items: center; background: var(--foreground); color: #fff; border: 0; font: inherit; font-weight: 700; font-size: 14px; border-radius: 999px; padding: 8px 18px; text-decoration: none; cursor: pointer; transition: background 0.2s ease-out, transform 0.1s ease-out; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); } .nav-signin:hover { background: #1e293b; } .nav-signin:active { transform: scale(0.98); } .nav-hamburger { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; padding: 0; align-items: center; justify-content: center; position: relative; z-index: 1002; transition: border-color 0.2s ease-out; } .nav-hamburger:hover { border-color: rgba(0, 233, 139, 0.4); } .nav-hamburger span, .nav-hamburger span::before, .nav-hamburger span::after { display: block; width: 18px; height: 2px; background: var(--foreground); border-radius: 2px; position: relative; transition: transform 0.25s ease-out, opacity 0.2s ease-out, top 0.25s ease-out; } .nav-hamburger span::before, .nav-hamburger span::after { content: ""; position: absolute; left: 0; } .nav-hamburger span::before { top: -6px; } .nav-hamburger span::after { top: 6px; } body.nav-open .nav-hamburger span { background: transparent; } body.nav-open .nav-hamburger span::before { top: 0; transform: rotate(45deg); background: var(--foreground); } body.nav-open .nav-hamburger span::after { top: 0; transform: rotate(-45deg); background: var(--foreground); } .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); z-index: 1000; opacity: 0; transition: opacity 0.25s ease-out; } body.nav-open .nav-backdrop { display: block; opacity: 1; } /* Drawer: hidden on desktop, slides in from the right on mobile */ .nav-drawer { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); background: #fff; border-left: 1px solid var(--line); padding: 84px 24px 32px; flex-direction: column; align-items: stretch; gap: 4px; font-size: 16px; transform: translateX(100%); transition: transform 0.28s ease-out; z-index: 1001; overflow-y: auto; box-shadow: -20px 0 60px rgba(15, 23, 42, 0.12); } .nav-drawer a { display: block; padding: 14px 8px; border-bottom: 1px solid var(--line); color: var(--foreground); font-weight: 600; text-decoration: none; } .nav-drawer a[aria-current] { color: var(--accent-dark); } .nav-drawer .nav-signin { width: 100%; justify-content: center; margin-top: 20px; padding: 14px 20px; font-size: 16px; } @media (max-width: 780px) { .nav-hamburger { display: inline-flex; } .topnav, .site-links { display: none !important; } .nav-drawer { display: flex; } body.nav-open .nav-drawer { transform: translateX(0); } .topbar-inner, .site-nav-inner { padding: 12px 20px; } }