src/components/nav/NavSplit.astro
---
// NavSplit, recovered from blurr-components.pages.dev
---
<header class="ns"> <nav class="ns-inner"> <ul class="ns-col ns-col--left"> <li><a href="#" class="ns-link">Diensten</a></li><li><a href="#" class="ns-link">Cases</a></li> </ul> <a href="/" class="ns-logo">BLURR</a> <div class="ns-col ns-col--right"> <a href="#" class="ns-link">Blog</a><a href="#" class="ns-link">Contact</a> <a href="#" class="ns-cta">Offerte aanvragen</a> </div> </nav> </header>
<style>
.ns{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100}
.ns-inner{max-width:1280px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px}
.ns-col{display:flex;align-items:center;gap:0;list-style:none;padding:0;margin:0}
.ns-col--right{justify-content:flex-end;gap:.5rem}
.ns-logo{font-weight:800;font-size:1.125rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.02em}
.ns-link{font-size:.875rem;font-weight:500;color:#374151;text-decoration:none;padding:.375rem .75rem;border-radius:.375rem;transition:color .15s,background .15s}
.ns-link:hover,.ns-link--active{color:var(--color-accent,#6366f1);background:#6366f112}
.ns-cta{font-size:.875rem;font-weight:600;padding:.5rem 1.25rem;background:var(--color-accent,#6366f1);color:#fff;border-radius:.5rem;text-decoration:none;transition:opacity .2s}
.ns-cta:hover{opacity:.88}
.ns-col{display:none}
.ns-inner{display:flex;justify-content:space-between}
</style>