/* ChiTransit site header: shared by the web app (/api/), the API docs (/docs/) and the design system (/docs/design/). Tokens are prefixed --site-* so the header looks the same whatever the host page defines. site.js keeps set to the effective theme ("light" or "dark"). */ :root{ --site-header-h:56px; --site-paper:#ffffff;--site-card-2:#e9ebf1;--site-line:#e3e6ec;--site-ink:#101a2e;--site-muted:#5b6472; --site-accent:#0b4ea2;--site-accent-ink:#ffffff;--site-focus:#0b4ea2; --site-shadow-control:0 1px 4px rgba(16,26,46,.18); --site-font:"Figtree",-apple-system,"Helvetica Neue",Arial,sans-serif; } :root[data-theme="dark"]{ --site-paper:#0f141c;--site-card-2:#1f2733;--site-line:#263041;--site-ink:#eef1f6;--site-muted:#98a2b3; --site-accent:#6ea0f0;--site-accent-ink:#0f141c;--site-focus:#6ea0f0; --site-shadow-control:0 1px 4px rgba(0,0,0,.4); } /* In-page anchors land below the sticky header. */ html{scroll-padding-top:calc(var(--site-header-h) + 16px)} .site-header{position:sticky;top:0;z-index:1000;height:var(--site-header-h);flex:none;box-sizing:border-box; display:flex;align-items:center;gap:16px;padding:0 20px; background:var(--site-paper);border-bottom:1px solid var(--site-line); font-family:var(--site-font);color:var(--site-ink);-webkit-font-smoothing:antialiased} .site-header *{box-sizing:border-box} .site-brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--site-ink);text-decoration:none; font-size:18px;font-weight:700;letter-spacing:-.01em;white-space:nowrap} .site-brand:hover{text-decoration:none} .site-mark{width:30px;height:30px;border-radius:8px;background:var(--site-accent);color:var(--site-accent-ink);display:grid;place-items:center} .site-mark svg{width:20px;height:20px} /* Area switcher and theme control share the design system's segmented control. */ .site-seg{display:inline-flex;gap:2px;height:36px;padding:2px;border-radius:10px;background:var(--site-card-2);flex:none} .site-seg>a,.site-seg>button{display:inline-grid;place-items:center;min-width:0;height:32px;padding:0 14px;border:0;border-radius:8px; background:transparent;color:var(--site-muted);font:500 13px/1 var(--site-font);text-decoration:none;white-space:nowrap;cursor:pointer} .site-seg>a:hover,.site-seg>button:hover{color:var(--site-ink);text-decoration:none} .site-seg>[aria-current="page"],.site-seg>.on{background:var(--site-paper);color:var(--site-ink);font-weight:600;box-shadow:var(--site-shadow-control)} .site-seg>a:focus-visible,.site-seg>button:focus-visible,.site-brand:focus-visible{outline:2.5px solid var(--site-focus);outline-offset:2px} .site-spacer{flex:1;min-width:0} .site-slot{display:flex;align-items:center;gap:12px;min-width:0;font-size:13px;color:var(--site-muted)} @media (max-width:760px){ .site-header{gap:10px;padding:0 12px} .site-brand>span:last-child{display:none} .site-seg>a,.site-seg>button{padding:0 9px} .site-slot{display:none} } @media (max-width:520px){ .site-theme>[data-theme-value="system"]{display:none} }