` is empty and the visitor sees no nav at all. The CSS below fills that gap with a shimmering placeholder bar so the page's first paint never has a missing nav. It is rendered entirely with `:empty` + pseudo-elements so we don't need to inline any skeleton HTML in the 5+ public pages. The instant navigation.js writes the real nav (via `$root.html(buildTopNav() + …)`), `#nav-root` is no longer empty, the `:empty` rule stops matching, and the pseudos vanish — replaced atomically by the real `

` markup. Visibility per breakpoint mirrors the real nav: • ≥ 1024 px (desktop) → `::before` shows the top-nav bar. • < 1024 px (mobile + tablet)→ `::after` shows the bottom-nav bar. The shimmer uses the same 110°/220%-width gradient idiom already in use elsewhere (`.is-skel-line` in guide.css) so it reads consistently across the app. */ @keyframes nav-skeleton-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -120% 0; } } #nav-root:empty::before, #nav-root:empty::after { content: ''; position: fixed; left: 0; right: 0; z-index: 100; pointer-events: none; background-color: var(--nv-surface); background-image: linear-gradient(110deg, rgba(184, 134, 11, 0.04) 0%, rgba(184, 134, 11, 0.20) 50%, rgba(184, 134, 11, 0.04) 100%); background-size: 220% 100%; animation: nav-skeleton-shimmer 1.6s linear infinite; } /* Top bar — visible on desktop only, same height as the real `.top-nav`. */ #nav-root:empty::before { top: 0; height: var(--nv-top-h); border-bottom: 1px solid var(--nv-border); } @media (max-width: 1023px) { #nav-root:empty::before { display: none; } } /* Bottom bar — visible on mobile + tablet only, includes the iOS safe-area inset the real `.bottom-nav` allocates via `--nv-bottom-total-h`. */ #nav-root:empty::after { bottom: 0; height: var(--nv-bottom-total-h); border-top: 1px solid var(--nv-border); } @media (min-width: 1024px) { #nav-root:empty::after { display: none; } } /* Dark theme — switch the highlight band to the brighter gold variant used by other dark-mode shimmer surfaces so the sweep stays readable on the near-black `--nv-surface`. */ html.theme-dark #nav-root:empty::before, html.theme-dark #nav-root:empty::after, body.dark-mode #nav-root:empty::before, body.dark-mode #nav-root:empty::after { background-image: linear-gradient(110deg, rgba(212, 175, 55, 0.04) 0%, rgba(212, 175, 55, 0.18) 50%, rgba(212, 175, 55, 0.04) 100%); } /* Honour the OS-level reduced-motion preference. The site-wide `.reduce-motion` rule above already pins this to 1 iteration, but browsers also expose `prefers-reduced-motion` independently. */ @media (prefers-reduced-motion: reduce) { #nav-root:empty::before, #nav-root:empty::after { animation: none; } }