src/components/nav/NavColorful.astro
---
// NavColorful, recovered from blurr-components.pages.dev
---
<header class="ncl"> <nav class="ncl-inner"> <a href="/" class="ncl-logo">BLURR</a> <ul class="ncl-links"> <li> <a href="#" class="ncl-link ncl-link--active" style="--lc:#6366f1"> Google Ads </a> </li><li> <a href="#" class="ncl-link" style="--lc:#3b82f6"> Meta Ads </a> </li><li> <a href="#" class="ncl-link" style="--lc:#10b981"> SEO </a> </li><li> <a href="#" class="ncl-link" style="--lc:#f59e0b"> E-mail </a> </li><li> <a href="#" class="ncl-link" style="--lc:#ef4444"> Analytics </a> </li> </ul> <a href="#" class="ncl-cta">Dashboard</a> </nav> </header>
<style>
.ncl{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100}
.ncl-inner{max-width:1280px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;height:64px;gap:2rem}
.ncl-logo{font-weight:800;font-size:1.0625rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.02em}
.ncl-links{list-style:none;padding:0;margin:0;display:flex;flex:1;gap:.25rem}
.ncl-link{display:block;font-size:.8125rem;font-weight:600;text-decoration:none;padding:.325rem .75rem;border-radius:999px;background:color-mix(in srgb,var(--lc) 10%,transparent);color:var(--lc);transition: opacity, transform, background-color, color, border-color, box-shadow, filter .15s}
.ncl-link:hover,.ncl-link--active{background:color-mix(in srgb,var(--lc) 20%,transparent)}
.ncl-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;white-space:nowrap}
.ncl-cta:hover{opacity:.88}
.ncl-links{display:none}
</style>