/* * Shared site nav — the same bar on every content page, EN and FR. * * Source of truth: scripts/site-nav/nav.en.html + nav.fr.html. * Applied to pages by: python3 scripts/site-nav/sync-site-nav.py * Never edit the nav inside a page — edit the template and re-run the sync. * * Every selector is anchored on #site-nav so page-level rules (nav{}, ul{}, a{}, * .navbar ...) can't restyle it: pages were written with their own navs and many * still carry generic nav/ul/a rules. * * Positioning: always fixed. Pages that load css/main.css already reserve room for a * fixed bar (body padding-top: 80px), so they get nothing else. Every other page gets * a 60px .snav-spacer right after the nav (written by the sync), so content starts * below the bar. Sticky was tried first and failed on layouts that pin to the * viewport height (the counselor chat): the bar scrolled away with the body box. */ #site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; flex-shrink: 0; display: flex; align-items: center; gap: 16px; width: 100%; height: 60px; margin: 0; padding: 0 20px; box-sizing: border-box; /* Solid, no backdrop blur: a blurred fixed bar makes the GPU re-blur whatever scrolls under it on every frame — the likely cause of scroll lag reported on a Galaxy Note20 (2026-09-23; software-render trace: −31% composite time on / with blur off). */ background: #0a0e1a; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; line-height: 1; } #site-nav * { box-sizing: border-box; } #site-nav a { margin: 0; text-transform: none; letter-spacing: normal; line-height: 1; } .snav-spacer { display: block; height: 60px; flex-shrink: 0; } /* main.css reserves 80px (body padding-top) for the old header; the bar is 60px. Match it, or a 20px strip of body background shows under the bar. The sync tags those navs. */ body:has(> #site-nav[data-offset="main-css"]) { padding-top: 60px; } #site-nav .snav-brand { flex: 0 0 auto; color: #fff !important; font-size: 18px; font-weight: 800; letter-spacing: 0.04em; text-decoration: none; } #site-nav .snav-links { display: flex; flex: 1 1 auto; min-width: 0; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } #site-nav .snav-links::-webkit-scrollbar { display: none; } #site-nav .snav-links li { margin: 0; padding: 0; list-style: none; } #site-nav .snav-links a { display: block; padding: 9px 10px; border-radius: 8px; color: #cbd5e1 !important; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; background: none; } /* Colours are !important on purpose: the homepage ships a global `a:not(...) { color: #6ac4e0 !important }` that would otherwise repaint the bar. */ #site-nav .snav-links a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06); } #site-nav .snav-links a[aria-current="page"] { color: #fff !important; box-shadow: inset 0 -2px 0 #3b82f6; } #site-nav .snav-lang { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px; color: #cbd5e1 !important; font-size: 13px; font-weight: 600; text-decoration: none; } #site-nav .snav-lang:hover { color: #fff !important; border-color: rgba(255, 255, 255, 0.4); } #site-nav a:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } /* Phones: one row, links scroll sideways (no menu toggle, no JS). The fade on the right edge signals there is more to scroll. */ @media (max-width: 767px) { #site-nav { gap: 10px; padding: 0 12px; } #site-nav .snav-brand { font-size: 16px; } #site-nav .snav-links a { padding: 9px 8px; font-size: 13px; } #site-nav .snav-links { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); } } @media print { #site-nav, .snav-spacer { display: none; } }