Navbar Pill CTA

<header class="ws-navbar sticky top-0 z-50 border-b border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]/90 backdrop-blur-md">
  <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-3">
    <!-- Logo -->
    <a href="#" class="flex items-center gap-2 text-lg font-bold text-[var(--ws-navbar-text)]">
      <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--ws-navbar-active)]">
        <svg class="h-4 w-4 text-white" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
          <path d="M8 1l2 4.5h4.5L11 8.5l1.5 4.5L8 10.5 3.5 13l1.5-4.5L1.5 5.5H6z"/>
        </svg>
      </div>
      Acme
    </a>

    <!-- Nav links (desktop) -->
    <nav class="hidden items-center gap-1 md:flex" aria-label="Main navigation">
      <a href="#" class="rounded-lg px-3 py-2 text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">Product</a>
      <a href="#" class="rounded-lg px-3 py-2 text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">Docs</a>
      <a href="#" class="rounded-lg px-3 py-2 text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">Pricing</a>
      <a href="#" class="rounded-lg px-3 py-2 text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">Blog</a>
    </nav>

    <!-- CTAs -->
    <div class="flex items-center gap-2">
      <!-- GitHub pill button (secondary/ghost) -->
      <a
        href="#"
        class="hidden items-center gap-1.5 rounded-full border border-[var(--ws-navbar-border)] px-3.5 py-1.5 text-sm font-medium text-[var(--ws-navbar-text)] transition hover:bg-[var(--ws-navbar-hover-bg)] active:scale-95 sm:inline-flex"
        aria-label="Star us on GitHub — 42k stars"
      >
        <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"/>
        </svg>
        <span class="text-xs font-semibold tabular-nums">42k</span>
      </a>

      <!-- Primary CTA (pill) -->
      <a
        href="#"
        class="rounded-full bg-[var(--ws-navbar-active)] px-4 py-1.5 text-sm font-semibold text-white transition hover:opacity-90 active:scale-95"
      >
        Get Started
      </a>

      <!-- Mobile menu toggle -->
      <button
        class="rounded-lg p-2 text-[var(--ws-navbar-text-muted)] hover:bg-[var(--ws-navbar-hover-bg)] md:hidden"
        aria-label="Toggle navigation menu"
        aria-expanded="false"
        aria-controls="mobile-menu"
        type="button"
      >
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile menu -->
  <div
    id="mobile-menu"
    class="hidden border-t border-[var(--ws-navbar-border)] px-6 py-3 md:hidden"
    role="dialog"
    aria-modal="false"
    aria-label="Mobile navigation"
  >
    <nav class="flex flex-col gap-1" aria-label="Mobile navigation links">
      <a href="#" class="rounded-lg px-3 py-2 text-sm font-medium text-[var(--ws-navbar-text-muted)] hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">Product</a>
      <a href="#" class="rounded-lg px-3 py-2 text-sm font-medium text-[var(--ws-navbar-text-muted)] hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">Docs</a>
      <a href="#" class="rounded-lg px-3 py-2 text-sm font-medium text-[var(--ws-navbar-text-muted)] hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">Pricing</a>
      <a href="#" class="rounded-lg px-3 py-2 text-sm font-medium text-[var(--ws-navbar-text-muted)] hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">Blog</a>
      <div class="mt-3 border-t border-[var(--ws-navbar-border)] pt-3">
        <a
          href="#"
          class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-[var(--ws-navbar-text-muted)] hover:bg-[var(--ws-navbar-hover-bg)]"
        >
          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.48 2 2 6.48 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"/>
          </svg>
          Star on GitHub
          <span class="ml-auto text-xs font-semibold tabular-nums text-[var(--ws-navbar-text-muted)]">42k</span>
        </a>
      </div>
    </nav>
  </div>

  <script>
    (function () {
      const btn = document.querySelector('[aria-controls="mobile-menu"]');
      const menu = document.getElementById('mobile-menu');
      if (!btn || !menu) return;

      btn.addEventListener('click', () => {
        const isOpen = !menu.classList.contains('hidden');
        menu.classList.toggle('hidden', isOpen);
        btn.setAttribute('aria-expanded', String(!isOpen));
      });

      // Close on outside click
      document.addEventListener('click', (e) => {
        if (!btn.contains(e.target) && !menu.contains(e.target)) {
          menu.classList.add('hidden');
          btn.setAttribute('aria-expanded', 'false');
        }
      });

      // Close on Escape
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !menu.classList.contains('hidden')) {
          menu.classList.add('hidden');
          btn.setAttribute('aria-expanded', 'false');
          btn.focus();
        }
      });
    })();
  </script>
</header>