/* ============================================================================
OnGraph — shared landing-page header
----------------------------------------------------------------------------
GEOMETRY ONLY. There is deliberately no colour and no font-size in this
file. Background, borders, shadows, link colours, CTA colours, the CTA's
ornamentation and every font-size stay in each landing page's own
stylesheet, so every page keeps its own theme and type while the header
measures the same everywhere.
HOW TO LOAD IT
after the page's own stylesheet, and put class="og-header" on .
HOW TO TUNE ONE PAGE
Every metric is a custom property with its default on :root. To change one
for a single page, set it on that page's own header selector — a value set
directly on the element always beats the inherited :root default,
regardless of file order. In that page's own stylesheet:
.site-header { --hdr-gap: 6px; }
MARKUP THIS ASSUMES (both header families in this repo already match it)
<- the bar, sized here
… <- sibling, NOT sized
The bar is selected as `.og-header > .container > nav` precisely so the
in-flow .mobile-menu can still expand the header when it opens.
============================================================================ */
:root {
/* height of the bar row — this is what makes every header line up */
--hdr-h: 84px;
/* logo. The PNG is 1026x242 (4.24:1), so --hdr-logo-max must always stay
above --hdr-logo-h x 4.24 or the mark gets squashed horizontally. */
--hdr-logo-h: 44px;
--hdr-logo-max: 200px;
/* nav */
--hdr-gap: 32px;
--hdr-burger: 26px;
}
@media (max-width: 1024px) {
:root { --hdr-h: 74px; --hdr-logo-h: 40px; --hdr-logo-max: 180px; }
}
@media (max-width: 768px) {
:root { --hdr-h: 70px; --hdr-logo-h: 36px; --hdr-logo-max: 165px; }
}
@media (max-width: 480px) {
:root { --hdr-h: 64px; --hdr-logo-h: 32px; --hdr-logo-max: 145px; }
}
@media (max-width: 360px) {
:root { --hdr-h: 60px; --hdr-logo-h: 28px; --hdr-logo-max: 125px; }
}
/* ── the bar ──────────────────────────────────────────────────────────────
Height lives on the nav row, not on , so an open .mobile-menu can
still grow the header. Padding is zeroed and replaced by centring, which is
what actually guarantees an identical height across pages whose logo and
CTA are different sizes.
Horizontal padding is intentionally NOT set here: the header shares each
page's own .container gutter so the logo stays aligned with the content
below it. That alignment matters more than matching gutters page-to-page. */
.og-header > .container > nav {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--hdr-h);
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
/* ── logo ─────────────────────────────────────────────────────────────────
Single source of truth for the whole site. object-fit is the standing
guard: if any layout ever pinches the box, the mark letterboxes instead
of distorting. */
.og-header .logo-img {
/* deliberately no `display` here. Two pages ship a light/dark logo pair and
toggle them with `.logo-img--dark { display: none }`; a `display: block`
in this file would out-specify that and show both at once. The logo link
below is a flex container, which blockifies the image anyway. */
height: var(--hdr-logo-h);
width: auto;
max-width: var(--hdr-logo-max);
object-fit: contain;
object-position: left center;
}
.og-header .logo,
.og-header .nav__logo {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
/* ── links ────────────────────────────────────────────────────────────── */
.og-header .nav-links,
.og-header .nav__links {
display: flex;
align-items: center;
gap: var(--hdr-gap);
list-style: none;
margin-block: 0;
}
.og-header .nav-links > li,
.og-header .nav__links > li {
list-style: none;
}
/* Note: no `font-size` here on purpose — font sizes are a per-page attribute
and stay in each landing page's own stylesheet, alongside its colours.
Only the line box and shrink behaviour, which are layout, live here. */
.og-header .nav-links > li > a,
.og-header .nav__links > li > a,
.og-header .nav__link {
line-height: 1.2;
}
.og-header .nav-cta,
.og-header .nav__cta {
flex-shrink: 0;
}
/* ── active link (set by common-js/nav-active.js) ─────────────────────────
Deliberately colour-agnostic: the underline is drawn in `currentColor`, so
it lands correctly on all 17 palettes without this file knowing any of
them. A page that wants a brand accent sets --nav-active-color on itself.
text-decoration is used rather than an ::after bar because several pages
already own `.nav__link::after` for their hover underline — a second
pseudo-element would collide with it. */
.og-header .nav-links > li > a.is-active,
.og-header .nav__links > li > a.is-active,
.og-header .nav__link.is-active,
.mobile-menu a.is-active {
font-weight: 700;
opacity: 1;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 7px;
text-decoration-color: var(--nav-active-color, currentColor);
}
/* The CTA is a button — it is never a section link and must never pick this up. */
.og-header .nav-cta.is-active,
.og-header .nav__cta.is-active,
.mobile-menu .nav-cta.is-active {
text-decoration: none;
}
/* ── hamburger ────────────────────────────────────────────────────────── */
.og-header .hamburger {
width: var(--hdr-burger);
height: var(--hdr-burger);
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ── one collapse point for every page ────────────────────────────────────
Previously half the pages dropped to the hamburger at 1024px and half at
768px, so a tablet saw a full nav on some pages and a burger on others.
1024 is the safe unification: it is the width at which the widest nav in
the set starts to crowd. To move it, change it here — once. */
@media (min-width: 1025px) {
.og-header .hamburger { display: none; }
}
@media (max-width: 1024px) {
.og-header .nav-links,
.og-header .nav__links,
.og-header .nav__cta {
display: none;
}
.og-header .hamburger { display: flex; }
}