src/components/nav/NavTransparent.astro
---
// NavTransparent, recovered from blurr-components.pages.dev
---
<header class="nt nt--light" id="nav-transparent"> <nav class="nt-inner"> <a href="/" class="nt-logo">BLURR</a> <ul class="nt-links"> <li><a href="#" class="nt-link">Diensten</a></li><li><a href="#" class="nt-link">Cases</a></li><li><a href="#" class="nt-link">Blog</a></li><li><a href="#" class="nt-link">Contact</a></li> </ul> <a href="#" class="nt-cta">Gratis gesprek</a> </nav> </header>
<style>
.nt{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,box-shadow .3s}
.nt--scrolled{background:#fffffff7!important;box-shadow:0 1px 12px #00000014}
.nt-inner{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;height:72px;gap:2rem}
.nt-logo{font-weight:800;font-size:1.125rem;text-decoration:none;letter-spacing:-.02em;transition:color .3s}
.nt--light .nt-logo{color:#fff}
.nt--scrolled .nt-logo{color:#0a0a0a!important}
.nt-links{list-style:none;padding:0;margin:0;display:flex;flex:1;gap:0}
.nt-link{display:block;font-size:.875rem;font-weight:500;text-decoration:none;padding:.375rem .875rem;border-radius:.375rem;transition:color .15s,background .15s}
.nt--light .nt-link{color:#ffffffd9}
.nt--scrolled .nt-link{color:#374151!important}
.nt-link:hover{background:#6366f114;color:var(--color-accent,#6366f1)!important}
.nt-cta{margin-left:auto;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}
.nt-cta:hover{opacity:.88}
</style>