/* nav-full.css — the FULL site nav chrome (desktop link row + Sign in / * Sign up CTAs + hamburger + slide-in mobile menu). * * The home pages (index.html / fr.html) carry these rules INLINE and the * blog pages carry a copy in blog/blog.css. The other top-level pages — * docs, demo, signup, account (× EN/FR) — reuse the same full-nav HTML so * visitors can navigate the site (and open the mobile menu) from those * pages too; they load this file after site.css to get the styling. * * Kept in sync with the home-page versions. If the home-page nav styling * or breakpoints change, update index.html / fr.html, blog/blog.css AND * this file. Loaded only by the pages that ship the full nav, so it has * no effect on the minimal-nav pages (privacy, terms, verified, …). * * Base nav / brand / lang-switch / footer chrome still comes from * site.css; this file only adds the parts a minimal nav doesn't have. */ .nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; margin: 0; padding: 0; } /* font-family is pinned (not inherited) so the nav links render in the body font even on the React demo pages (demo / live-demo), whose intentionally sets no font-family — without this they fall back to the browser default serif while every other page shows Plus Jakarta Sans. */ .nav-links a { text-decoration: none; color: var(--muted); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: normal; word-spacing: 0.08em; line-height: 1.2; transition: color 0.25s; } .nav-links a:hover { color: var(--cyan); } .nav-hamburger { display: none; background: none; border: 1px solid var(--border); padding: 0.45rem; cursor: pointer; color: var(--cyan); line-height: 0; } .nav-hamburger svg { display: block; } .mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 301; background: rgba(5,13,26,0.97); backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem; } .mobile-menu.open { display: flex; } .mobile-menu a { text-decoration: none; color: var(--muted); font-family: var(--font-mono); font-size: 1rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.25s; } .mobile-menu a:hover { color: var(--cyan); } .mobile-menu-close { position: absolute; top: 1.2rem; right: 5vw; background: none; border: 1px solid var(--border); padding: 0.45rem; cursor: pointer; color: var(--cyan); line-height: 0; } .nav-account-link { display: inline-flex; align-items: center; text-decoration: none; color: var(--muted); font-family: var(--font-sans); /* pinned for the React demo pages — see .nav-links a above */ font-size: 0.875rem; font-weight: 500; line-height: 1; transition: color 0.25s; } .nav-account-link:hover { color: var(--cyan); } .nav-cta { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; color: var(--cyan); border: 1px solid rgba(56,167,230,0.35); padding: 0.55rem 1.3rem 0.55rem 1.1rem; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; text-decoration: none; letter-spacing: 0.06em; position: relative; overflow: hidden; transition: all 0.35s; white-space: nowrap; } .nav-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(56,167,230,0.12), transparent); animation: navCtaScan 3.5s linear infinite; } .nav-cta::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--cyan) 50%, transparent 100%); opacity: 0; transition: opacity 0.35s; } .nav-cta:hover { background: rgba(56,167,230,0.08); border-color: var(--cyan); box-shadow: 0 0 22px rgba(56,167,230,0.3), inset 0 0 18px rgba(56,167,230,0.04); transform: translateY(-1px); } .nav-cta:hover::after { opacity: 1; } @keyframes navCtaScan { 0% { left: -100%; } 100% { left: 100%; } } /* Free-trial sticker on the Sign-up CTA */ .nav-cta-wrap { position: relative; display: inline-flex; } .nav-cta-sticker { position: absolute; top: -7px; right: -12px; z-index: 2; background: #fff; color: var(--bg); font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 6px; border-radius: 2px; transform: rotate(6deg); box-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 0 16px rgba(56,167,230,0.5); pointer-events: none; white-space: nowrap; line-height: 1; animation: navCtaStickerPulse 2.6s ease-in-out infinite; } @keyframes navCtaStickerPulse { 0%, 100% { transform: rotate(6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } } /* ── FULL-NAV RESPONSIVE BEHAVIOR ── Mirrors index.html / fr.html (their inline