src/components/nav/NavStacked.astro
---
// NavStacked, recovered from blurr-components.pages.dev
---
<header class="nst"> <div class="nst-brand"> <a href="/" class="nst-logo">BLURR</a> <span class="nst-tagline">Online Marketing Bureau</span> </div> <nav class="nst-nav"> <ul class="nst-links"> <li><a href="#" class="nst-link nst-link--active">Diensten</a></li><li><a href="#" class="nst-link">Cases</a></li><li><a href="#" class="nst-link">Blog</a></li><li><a href="#" class="nst-link">Contact</a></li> </ul> <a href="#" class="nst-cta">Plan gesprek →</a> </nav> </header>
<style>
.nst{background:#fff;border-bottom:2px solid #0a0a0a}
.nst-brand{max-width:1280px;margin:0 auto;padding:1.25rem 2rem .5rem;display:flex;align-items:baseline;gap:1rem}
.nst-logo{font-weight:900;font-size:1.75rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.04em;line-height:1}
.nst-tagline{font-size:.75rem;color:#6b7280;letter-spacing:.06em;text-transform:uppercase}
.nst-nav{border-top:1px solid #e5e7eb;position:sticky;top:0;z-index:100;background:#fff}
.nst-nav>{max-width:1280px;margin:0 auto}
.nst-links{list-style:none;padding:0 2rem;margin:0;display:flex;gap:0}
.nst-link{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6b7280;text-decoration:none;padding:.75rem .875rem;border-bottom:2px solid transparent;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .15s}
.nst-link:hover,.nst-link--active{color:#0a0a0a;border-bottom-color:#0a0a0a}
.nst-nav{display:flex;align-items:center;justify-content:space-between;padding:0 2rem}
.nst-cta{font-size:.8125rem;font-weight:700;padding:.5rem 1.125rem;background:#0a0a0a;color:#fff;border-radius:.375rem;text-decoration:none;transition:opacity .2s;white-space:nowrap}
.nst-cta:hover{opacity:.8}
</style>