src/components/nav/NavEditorial.astro
---
// NavEditorial, recovered from blurr-components.pages.dev
---
<header class="ne"> <div class="ne-inner"> <div class="ne-brand"> <a href="/" class="ne-logo">BLURR</a> <span class="ne-tagline">Online Marketing Bureau</span> </div> <nav class="ne-nav"> <ul class="ne-links"> <li><a href="#" class="ne-link">Diensten</a></li><li><a href="#" class="ne-link">Cases</a></li><li><a href="#" class="ne-link ne-link--active">Inzichten</a></li><li><a href="#" class="ne-link">Contact</a></li> </ul> <span class="ne-issue">April 2025</span> </nav> </div> <div class="ne-rule"></div> </header>
<style>
.ne{background:#0a0a0a;position:sticky;top:0;z-index:100}
.ne-inner{max-width:1280px;margin:0 auto;padding:1rem 2rem .75rem;display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.ne-brand{display:flex;flex-direction:column;gap:.125rem}
.ne-logo{font-size:1.5rem;font-weight:900;color:#fff;text-decoration:none;letter-spacing:-.04em;line-height:1}
.ne-tagline{font-size:.6875rem;color:#fff6;letter-spacing:.12em;text-transform:uppercase}
.ne-nav{display:flex;align-items:center;gap:1.5rem}
.ne-links{list-style:none;padding:0;margin:0;display:flex;gap:0}
.ne-link{display:block;font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#ffffff8c;text-decoration:none;padding:.375rem .75rem;border-radius:.25rem;transition:color .15s}
.ne-link:hover,.ne-link--active{color:#fff}
.ne-issue{font-size:.6875rem;color:#ffffff4d;letter-spacing:.08em;white-space:nowrap}
.ne-rule{height:1px;background:linear-gradient(90deg,#ffffff26,#ffffff0d)}
</style>