/* The site header. One file, one definition, every page. * * Loaded by templates/pt/_header.html itself, so a page gets the styles by * including the partial and nothing else - there is no second step to forget. * * Every colour reads a page token with the canonical value as a fallback, so * pages that do not define the site tokens (gate.html, pond_captures.html) * still render correctly instead of inheriting whatever those pages happen to * call their greys. The header does not depend on the page, so a page cannot * restyle it by accident. * * Layout note: the header is a full-width block carrying its own centred * inner column, NOT something that expects to be inside a .wrap. That is what * lets the identical markup sit in every page layout, including the tracer * whose is a flex column. */ .siteHead{ order:0; /* the tracer's body is a flex column */ width:100%; background:transparent; /* the page background runs through it */ } .siteHeadIn{ max-width:1120px; /* 1120 - 2x28 padding = a 1064px column, matching every other content column */ margin:0 auto; padding:22px 28px 0; display:flex; align-items:center; /* brand pill, links and the theme toggle share one vertical centre. Baseline alignment put the 44px toggle a few px below the links on every page but /app. */ gap:18px; font-size:13px; color:var(--ink-2, #55646F); } .siteBrand{white-space:nowrap} .siteHeadIn nav{ margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .siteHeadIn nav a{ color:var(--ink-2, #55646F); text-decoration:none; font-weight:500; padding:8px 10px; border-radius:8px; line-height:1.2; } .siteHeadIn nav a:hover{ color:var(--ink, #141F28); background:var(--pt-hover, #e2ebf3); } /* The page you are on, marked once here rather than per-page. */ .siteHeadIn nav a[aria-current="page"]{ color:var(--ink, #141F28); font-weight:600; background:var(--pt-panel, rgba(247,250,252,.94)); } .siteHeadIn nav .pt-theme-toggle{ margin-left:6px; } @media (max-width:900px){ .siteHeadIn{ padding-left:16px; padding-right:16px; } } @media (max-width:560px){ .siteHeadIn{ gap:8px; padding-top:16px; flex-wrap:wrap; } /* Used to force nav onto its own row unconditionally (order:1; flex-basis:100%), which read as a bug: a header that always wraps to two lines whether or not it needs to. The brand pill's badge styling (background, border, 24px radius, 18px bold type) is what was actually forcing that - shrunk to a plain compact wordmark here, nav stays inline, and flex-wrap on the row is kept only as a safety net for anything narrower than this breakpoint expects. */ .siteHeadIn .pt-brand{ background:none; border:0; padding:0; border-radius:0; font-size:15px; gap:6px; } .siteHeadIn .pt-brand svg{ width:20px; height:20px; } .siteHeadIn nav{ gap:2px; } .siteHeadIn nav a{ padding:6px 7px; font-size:12px; } .siteHeadIn nav .pt-theme-toggle{ flex:0 0 36px; width:36px; min-height:36px; } } /* pond-responsive.css hides the current page's own link under 650px to make room in the tracer's crowded header. Site pages have the room, and a nav that drops the page you are on reads as a bug there. */ @media (max-width:650px){ html body:not(:has(.app)) .siteHeadIn nav a[aria-current="page"]{ display:flex; } }