src/components/nav/NavFloating.astro
---
// NavFloating, recovered from blurr-components.pages.dev
---
<div class="nf-wrapper"> <header class="nf"> <a href="/" class="nf-logo">BLURR</a> <ul class="nf-links"> <li><a href="#" class="nf-link">Diensten</a></li><li><a href="#" class="nf-link">Cases</a></li><li><a href="#" class="nf-link">Blog</a></li><li><a href="#" class="nf-link">Contact</a></li> </ul> <a href="#" class="nf-cta">Gesprek</a> </header> </div>
<style>
.nf-wrapper{position:fixed;top:1.25rem;left:0;right:0;z-index:100;display:flex;justify-content:center;pointer-events:none}
.nf{pointer-events:all;display:flex;align-items:center;gap:.25rem;padding:.5rem .75rem;background:#ffffffd9;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.6);border-radius:999px;box-shadow:0 4px 24px #0000001a;gap:0}
.nf-logo{font-weight:800;font-size:.9375rem;color:#0a0a0a;text-decoration:none;padding:.25rem .875rem;letter-spacing:-.02em}
.nf-links{list-style:none;padding:0;margin:0;display:flex;gap:0}
.nf-link{display:block;font-size:.8125rem;font-weight:500;color:#374151;text-decoration:none;padding:.375rem .75rem;border-radius:999px;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .15s}
.nf-link:hover,.nf-link--active{color:var(--color-accent,#6366f1);background:#6366f114}
.nf-cta{font-size:.8125rem;font-weight:600;padding:.4375rem 1rem;background:var(--color-accent,#6366f1);color:#fff;border-radius:999px;text-decoration:none;margin-left:.25rem;transition:opacity .2s}
.nf-cta:hover{opacity:.88}
.nf-links{display:none}
</style>