/* ============================================================ Shared topbar — used by /learn/*, /tools/*, /landing. Adds the bits that the inline page styles don't already cover: • brand-sub — small grey subtitle under brand name • nav-toggle — hamburger button, hidden on desktop • nav-links — wrapper, transparent on desktop (display:contents), dropdown panel on mobile • btn-ghost — secondary outlined button Mobile (<= 600 px) hides the inline nav-links and shows the hamburger; an .nav-open class on reveals the dropdown. ============================================================ */ .brand-sub{display:block;font-size:10px;color:var(--text3);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase} .nav-toggle{display:none;background:transparent;border:1px solid var(--border2);color:var(--text);width:38px;height:38px;border-radius:8px;cursor:pointer;align-items:center;justify-content:center;padding:0} .nav-toggle:hover{border-color:var(--text3);background:var(--bg3)} .nav-toggle svg{width:18px;height:18px} .nav-links{display:contents} .btn-ghost{background:transparent;border-color:var(--border2);color:var(--text)} .btn-ghost:hover{background:var(--bg3);border-color:var(--text3)} @media (max-width:600px){ .brand-sub{display:none} .nav-toggle{display:inline-flex} .nav{gap:6px} .nav-links{ display:none; position:absolute;top:56px;left:14px;right:14px; flex-direction:column;gap:4px; background:var(--bg2);border:1px solid var(--border2);border-radius:12px; padding:8px;box-shadow:0 16px 40px rgba(0,0,0,0.5); z-index:60; } body.nav-open .nav-links{display:flex} .nav-links .nav-link{ display:flex;align-items:center;justify-content:space-between; padding:12px 14px;font-size:15px;color:var(--text);border-radius:8px; } .nav-links .nav-link::after{content:"›";color:var(--text3);font-family:var(--mono);font-size:18px;line-height:1} .nav-links .nav-link:hover{background:var(--bg3)} body.nav-open::before{ content:"";position:fixed;inset:0;background:rgba(11,13,17,0.65); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:40; } body.nav-open{overflow:hidden} }