nav: move VPN Myths link from left nav to right CTA area

[Copilot]

• Remove VPN Myths <li> from .nav-links (desktop left side)
• Add VPN Myths <a> to .nav-cta between News and Docs
• Add .nav-myths CSS class (orange, modelled after .nav-news)
• Consolidate shared .nav-news/.nav-myths CSS into a combined selector; keep only color per-link
• Add .nav-news.active and .nav-myths.active active-state styles for the CTA text links

Original prompt

Goal

In src/components/Nav.svelte, move the VPN Myths nav link from the left-side .nav-links list to the right-side .nav-cta area, positioned between News and Docs. Style it using --orange to give it a warm, featured callout feel that's distinct from the cyan News link and the ghost/primary CTA buttons.

---

Desktop nav (.nav-links and .nav-cta)

Current structure (desktop):

[Logo]  [Why | How | Who | Features | Pricing | VPN Myths | More▾ | Early Access]  [News | Docs | Launch App]

Target structure (desktop):

[Logo]  [Why | How | Who | Features | Pricing | More▾ | Early Access]  [News | VPN Myths | Docs | Launch App]

Changes needed:

1. Remove the <li> for VPN Myths from .nav-links (line 57 in the current file):

   <li><a href={LINKS.vpnMyths} class:active={isActive(LINKS.vpnMyths)} aria-current={isActive(LINKS.vpnMyths) ? 'page' : undefined}>VPN Myths</a></li>

2. Add a VPN Myths link inside .nav-cta, between the News <a> and the Docs <a> (after line 85, before line 86):

   <a href={LINKS.vpnMyths} class="nav-myths" class:active={isActive(LINKS.vpnMyths)} aria-current={isActive(LINKS.vpnMyths) ? 'page' : undefined}>VPN Myths</a>

3. Add the .nav-myths CSS class in the <style> block, modelled after .nav-news but using --orange:

   .nav-myths {
     font-size: 14px;
     color: var(--orange);
     text-decoration: none;
     transition: opacity 150ms;
     white-space: nowrap;
   }
   .nav-myths:hover { opacity: 0.75; }

---

Mobile menu (.mobile-links)

The mobile menu already has VPN Myths in a reasonable position (after Pricing). Keep it there — no change needed for mobile.

---

File to edit

src/components/Nav.svelte

The current BlobSha for this file is: 8b855606da30059bc14608c795fc87297db12015

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: Move VPN Myths to the rigth side with docs/news in whatever position and color you think is best.

Assistant: Now I have a clear picture of the nav structure. Currently:

• Left side (.nav-links): Why, How, Who, Features, Pricing, VPN Myths, More (dropdown), Early Access
• Right side (.nav-cta): News, Docs, Launch App

The task is to move VPN Myths to the right side (.nav-cta) alongside Docs/News, with a fitting color. Given the brand uses --orange for "Early Access"/highlights and --cyan for "News", I'll style VPN Myths in --orange as a text link — it's content marketing / educational, making it feel like a featured callout rather than a primary nav item. I'll also update the mobile menu ordering to keep it consistent.

Assistant: We're waiting for your response to the tool call to continue — please accept or reject the proposed PR to proceed.

This pull request was created from Copilot chat.

[Copilot]

Pull request overview

Moves the VPN Myths navigation link from the left-side desktop nav list to the right-side CTA cluster, giving it a featured CTA-style treatment using the existing --orange token.

Changes:

• Removed VPN Myths from the desktop .nav-links list.
• Added VPN Myths into the desktop .nav-cta area between News and Docs.
• Introduced .nav-myths styling (modeled after .nav-news) using var(--orange).

[jaypatrick]

@copilot apply changes based on the comments in this thread

[Copilot]

@copilot apply changes based on the comments in this thread

Both review points addressed in c100531:

1. CSS consolidation — shared properties (font-size, text-decoration, transition, white-space, hover opacity) are now in a single combined .nav-news, .nav-myths selector; only the color values remain per-class.

2. Active states — added .nav-news.active and .nav-myths.active rules (both reduce opacity to 0.75, matching the hover treatment and keeping each link's characteristic color on the active page).