/* * nav.css — the site header. One implementation, used by every surface: * the static pages under client/public/ (injected by scripts/inject-nav.mjs) * and the React SPA (linked from client/index.html). There is no second copy. * The duplicate blocks that used to live in authority.css and index.css were * deleted when this file took over. Do not re-add them: two copies drift. * * Scoped strictly to .authority-header*, .authority-nav*, and .skip-link. * It styles nothing else, which is why it is safe on a page that carries its * own design system. Do not add page-level rules here. * * Structure it expects (see scripts/inject-nav.mjs): * header.authority-header > .authority-header-inner * a.authority-wordmark * button.authority-nav-toggle[aria-controls=primary-nav] (hidden until JS) * nav#primary-nav.authority-nav > a... a.authority-nav-cta * * One link list, not two. The old markup shipped a desktop list and a mobile * list on every page, which doubled the focus stops and duplicated every nav * link for a crawler. * * No-JS baseline: below 900px the list stacks and stays visible, so the site * navigates fine with scripting off. nav.js sets data-nav-js on , which * is what turns the list into a collapsible disclosure. */ @font-face { font-family: 'Umiak'; src: url('/fonts/Umiak-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Host Grotesk'; src: url('/fonts/HostGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { --authority-paper: #f6f4ef; --authority-ink: #111111; --authority-line: rgba(17, 17, 17, 0.16); --authority-wide: 1120px; --authority-header-h: 72px; } /* Anchor targets must clear the sticky header, and no more than that. This was 104px against a 73px header, which overshot every in-page jump. */ html { scroll-padding-top: calc(var(--authority-header-h) + 16px); } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 14px; background: var(--authority-ink); color: var(--authority-paper); transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); } .authority-header { position: sticky; top: 0; z-index: 100; background: rgba(246, 244, 239, 0.96); border-bottom: 1px solid var(--authority-line); backdrop-filter: blur(12px); transition: transform 180ms ease; } /* Reading space back on small screens: the header retreats on the way down and returns the moment the user scrolls up. nav.js sets the attribute. */ .authority-header[data-hidden='true'] { transform: translateY(-100%); } .authority-header-inner { width: min(calc(100% - 48px), var(--authority-wide)); min-height: var(--authority-header-h); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .authority-wordmark { flex: 0 0 auto; color: var(--authority-ink); font-family: 'Umiak', 'Host Grotesk', sans-serif; font-weight: 900; font-size: 17px; line-height: 1; letter-spacing: 0.06em; text-decoration: none !important; } /* The header's own children are pinned into flow explicitly. Several pages carry a bare `nav { position: fixed }` rule written for the header this one replaced, and an element selector cannot be trusted to lose to a class. */ .authority-header nav { position: static; inset: auto; width: auto; background: none; border: 0; padding: 0; margin: 0; box-shadow: none; } .authority-header nav.authority-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.8vw, 28px); } .authority-nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--authority-ink); font-size: 12px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; text-decoration: none !important; border-bottom: 1px solid transparent; transition: border-color 120ms ease, opacity 120ms ease; } /* There was no hover state at all before this. On a site selling positioning work, a nav that does not respond to the cursor reads as unfinished. */ .authority-nav a:hover { border-bottom-color: var(--authority-line); } .authority-nav a[aria-current='page'], .authority-nav a[aria-current='page']:hover { border-bottom-color: var(--authority-ink); } .authority-nav .authority-nav-cta { min-height: 40px; padding: 0 18px; background: var(--authority-ink); color: var(--authority-paper); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap; text-transform: uppercase; border-bottom: 0; } .authority-nav .authority-nav-cta:hover { opacity: 0.86; border-bottom: 0; } .authority-nav-toggle { min-width: 58px; min-height: 44px; display: none; place-items: center; background: none; border: 1px solid var(--authority-line); cursor: pointer; color: var(--authority-ink); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: border-color 120ms ease; } .authority-nav-toggle:hover { border-color: var(--authority-ink); } .authority-header a:focus-visible, .authority-nav-toggle:focus-visible, .skip-link:focus-visible { outline: 2px solid var(--authority-ink); outline-offset: 4px; } /* ---- nav item descriptions ------------------------------------------------ Present in the DOM on every page, shown only in the stacked layout. A label alone is ambiguous ("Intelligence" is what, exactly?), and the description also hands a crawler a model of the section rather than a bare noun. */ .authority-nav-desc { display: none; } /* ---- breadcrumb ----------------------------------------------------------- Generated with the header from the same manifest, alongside the matching BreadcrumbList. A visitor arriving from a search result or an LLM answer has no idea where in the site they are. */ .authority-breadcrumb { width: min(calc(100% - 48px), var(--authority-wide)); margin: 20px auto 0; font-size: 12px; letter-spacing: 0.02em; } .authority-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; } .authority-breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.4; } .authority-breadcrumb a { color: var(--authority-ink); opacity: 0.62; text-decoration: none; border-bottom: 1px solid transparent; transition: opacity 120ms ease, border-color 120ms ease; } .authority-breadcrumb a:hover { opacity: 1; border-bottom-color: var(--authority-line); } .authority-breadcrumb [aria-current='page'] { opacity: 0.62; } /* ---- footer --------------------------------------------------------------- The footer had drifted as far as the header: 24 link sets across 78 pages. It is generated from the same manifest now, which is what lets About live here instead of in the primary bar without becoming an orphan. */ .authority-footer { margin-top: 96px; padding: 48px 0; border-top: 1px solid var(--authority-line); background: var(--authority-paper); } .authority-footer-inner { width: min(calc(100% - 48px), var(--authority-wide)); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px; } .authority-footer-name { margin: 0; font-family: 'Umiak', 'Host Grotesk', sans-serif; font-weight: 900; font-size: 15px; letter-spacing: 0.04em; } .authority-footer-note { margin: 6px 0 0; font-size: 13px; opacity: 0.66; } .authority-footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; max-width: 520px; } .authority-footer-links a { color: var(--authority-ink); font-size: 12px; letter-spacing: 0.02em; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 120ms ease; } .authority-footer-links a:hover { border-bottom-color: var(--authority-line); } .authority-footer-cta { min-height: 40px; display: inline-flex; align-items: center; padding: 0 18px; background: var(--authority-ink); color: var(--authority-paper); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: opacity 120ms ease; } .authority-footer-cta:hover { opacity: 0.86; } .authority-footer a:focus-visible, .authority-breadcrumb a:focus-visible { outline: 2px solid var(--authority-ink); outline-offset: 4px; } /* Six items plus a CTA has room to breathe, but pages whose own type scale runs larger than the answers template still need the tighten. */ @media (max-width: 1180px) { .authority-header nav.authority-nav { gap: 14px; } .authority-nav a { font-size: 11px; } .authority-nav .authority-nav-cta { padding: 0 12px; } } @media (max-width: 900px) { .authority-header-inner { flex-wrap: wrap; padding: 12px 0; } /* No-JS baseline: the list stacks and stays visible. */ .authority-header nav.authority-nav { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; } .authority-nav a { font-size: 12px; border-bottom: 1px solid var(--authority-line); } .authority-nav .authority-nav-cta { margin-top: 12px; justify-content: center; } .authority-nav a { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; min-height: 0; } .authority-nav-desc { display: block; font-size: 11px; line-height: 1.35; letter-spacing: 0; opacity: 0.62; white-space: normal; } .authority-nav .authority-nav-cta { flex-direction: row; align-items: center; min-height: 44px; padding: 0 14px; } .authority-breadcrumb, .authority-footer-inner { width: min(calc(100% - 32px), var(--authority-wide)); } .authority-footer-inner { flex-direction: column; gap: 24px; } /* With JS the list becomes a disclosure controlled by the toggle. */ [data-nav-js] .authority-nav-toggle { display: grid; } [data-nav-js] .authority-header nav.authority-nav[hidden] { display: none; } } @media (max-width: 640px) { .authority-header-inner { width: min(calc(100% - 32px), var(--authority-wide)); min-height: 64px; } } @media (prefers-reduced-motion: reduce) { .authority-header, .authority-nav a, .authority-nav-toggle { transition: none; } .authority-header[data-hidden='true'] { transform: none; } }