/* nav.css — the WHOLE header's styles, loaded as an external stylesheet in so the server-rendered menu (see nav_header.py) is fully styled at first paint: no flash of unstyled content, no layout shift. Covers the brand bar, the page subtitle, and all the dropdown/link styles (these used to be injected by nav.js; nav.js now only injects them as a fallback when the menu isn't server-rendered). Served at /nav.css by both servers (revalidate-cacheable). */ .rnav-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; margin-bottom:4px; } .rnav-brand{ font-size:1.4rem; font-weight:800; color:#122150; text-decoration:none; white-space:nowrap; letter-spacing:-.01em; } .rnav-brand:hover{ color:#122150; text-decoration:none; } /* reserve the menu row's height so it doesn't jump when nav.js builds it */ #site-nav{ min-height:32px; } /* the per-page name, demoted to a subtitle under the fixed wordmark */ .page-title{ font-size:1.1rem; font-weight:700; margin:12px 0 8px; color:#1a1a1a; } /* --- menu/dropdown styles (were injected by nav.js; now here so the server- rendered menu is styled at first paint — no flash of unstyled menu). --- */ .rnav{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:.9rem; } .rnav a{ color:var(--accent,#1a73e8); text-decoration:none; white-space:nowrap; } .rnav a:hover{ text-decoration:underline; } .rnav .rnav-cur{ font-weight:700; color:#111; } .rnav-search{ display:inline-flex; margin:0 2px 0 0; } .rnav-search input{ width:124px; height:30px; padding:0 12px; border:1px solid rgba(0,0,0,.25); border-radius:15px; background:#fafafa; font-size:.85rem; transition:width .15s ease; } .rnav-search input:focus{ width:184px; outline:none; border-color:var(--accent,#1a73e8); } .rnav-grp{ position:relative; } .rnav-btn{ background:none; border:0; margin:0; padding:2px; cursor:pointer; color:var(--accent,#1a73e8); font:inherit; font-size:.9rem; white-space:nowrap; } .rnav-btn:hover{ text-decoration:underline; } .rnav-btn.rnav-cur{ font-weight:700; color:#111; } .rnav-caret{ font-size:.7em; opacity:.65; margin-left:3px; } .rnav-menu{ position:absolute; right:0; top:100%; margin-top:6px; min-width:172px; background:#fff; border:1px solid rgba(0,0,0,.18); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:4px; z-index:1000; display:none; } .rnav-menu.rnav-open{ display:block; } .rnav-menu a{ display:block; padding:9px 12px; border-radius:6px; color:#222; font-size:.9rem; white-space:nowrap; } .rnav-menu a:hover{ background:#f1f5ff; color:var(--accent,#1a73e8); text-decoration:none; } @media (max-width:560px){ .rnav-brand{ font-size:1.25rem; } .rnav-menu{ right:auto; left:0; } } /* --- mobile header: ☰ burger + right-side drawer (≤860px) ------------------- Same markup as desktop; the drawer is just #site-nav re-styled as a fixed panel with every dropdown group expanded into a labelled section. Toggled by body.rnav-drawer-open (wired in nav.js). --- */ .rnav-burger{ display:none; background:none; border:0; padding:2px 8px; cursor:pointer; font-size:1.5rem; line-height:1; color:#122150; } .rnav-scrim{ display:none; } @media (max-width:860px){ #site-nav{ min-height:0; } #site-nav > .rnav-burger{ display:inline-flex; margin-left:auto; } #site-nav > .rnav-search, #site-nav > a, #site-nav > .rnav-grp{ display:none; } body.rnav-drawer-open .rnav-scrim{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1190; } body.rnav-drawer-open #site-nav{ display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:2px; position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); z-index:1200; background:#fff; box-shadow:-12px 0 34px rgba(0,0,0,.25); padding:52px 14px 24px; overflow-y:auto; overscroll-behavior:contain; } body.rnav-drawer-open #site-nav > .rnav-burger{ display:inline-flex; position:absolute; top:10px; right:10px; margin:0; font-size:1.6rem; color:#555; } body.rnav-drawer-open #site-nav > .rnav-search{ display:flex; margin:0 0 10px; } body.rnav-drawer-open #site-nav > .rnav-search input{ width:100%; } body.rnav-drawer-open #site-nav > .rnav-search input:focus{ width:100%; } body.rnav-drawer-open #site-nav > a{ display:block; padding:10px 8px; font-size:1rem; border-radius:8px; } body.rnav-drawer-open #site-nav > .rnav-grp{ display:block; } /* group buttons stay tappable — sections start collapsed and toggle open, same accordion behavior as the desktop dropdowns (shared click handler) */ body.rnav-drawer-open #site-nav .rnav-btn{ display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:10px 8px; font-size:1rem; border-radius:8px; } body.rnav-drawer-open #site-nav .rnav-btn:hover{ text-decoration:none; background:#f1f5ff; } body.rnav-drawer-open #site-nav .rnav-caret{ font-size:.8em; } body.rnav-drawer-open #site-nav .rnav-btn[aria-expanded="true"] .rnav-caret{ display:inline-block; transform:rotate(180deg); } /* the menu opens/closes via .rnav-open exactly like desktop; only the presentation changes (inline section instead of a floating dropdown) */ body.rnav-drawer-open #site-nav .rnav-menu{ position:static; margin:0; min-width:0; border:none; box-shadow:none; padding:0; } body.rnav-drawer-open #site-nav .rnav-menu a{ padding:10px 8px 10px 22px; font-size:1rem; border-radius:8px; white-space:normal; } body.rnav-drawer-open{ overflow:hidden; } /* the page behind doesn't scroll */ } /* --- site footer (server-injected before by nav_header.inject) --- */ .site-footer{ margin-top:48px; border-top:1px solid rgba(0,0,0,.1); background:#fafbfc; } .site-footer-inner{ max-width:1180px; margin:0 auto; padding:18px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-size:.82rem; color:#777; } .site-footer .sf-brand{ font-weight:800; color:#122150; letter-spacing:-.01em; } .site-footer .sf-links{ display:flex; flex-wrap:wrap; gap:6px 16px; } .site-footer .sf-links a{ color:#555; text-decoration:none; white-space:nowrap; } .site-footer .sf-links a:hover{ color:var(--accent,#1a73e8); text-decoration:underline; } .site-footer .sf-legal{ margin-left:auto; text-align:right; color:#999; } @media (max-width:560px){ .site-footer .sf-legal{ margin-left:0; text-align:left; width:100%; } } /* --- canonical page width ------------------------------------------------- Every page's content sits in
. THIS is the single source of the site width — new pages just use the class and inherit 1180px; they should NOT redeclare max-width (that is how the footer/legal pages drifted narrower). nav.css loads on every page, after each page's own