/* ============================================================
header.css — the reusable site nav ("drop-in" header).
A corner signature logo (links home) + the MENU control, painted
white and blended `difference` so the chrome reads near-black on the
paper and inverts to white over the photos.
DROP-IN (new page): link this stylesheet and load `js/header.js`
BEFORE `js/overlay.js`. header.js injects the markup (single source of
truth), so there's nothing to copy; overlay.js wires the MENU control.
...
Two variants:
- default — corner logo + MENU, `position: absolute`, for full-viewport
pages like the home landing (it floats over the page).
- `.has-title` — adds a centred page title (logo · title · MENU) and
STICKS to the top for long scrolling content pages (project / about).
Trigger it by setting `` (header.js reads it).
The home page hides the corner logo until its centered intro mark
shrinks into it (see index.html). Load order: tokens.css → base.css →
header.css.
============================================================ */
.site-header {
position: absolute;
top: 22px;
left: 22px;
right: 22px;
display: flex;
align-items: flex-start;
justify-content: space-between;
z-index: 60; /* above the menu-overlay scrim (40) so MENU/CLOSE stays live */
mix-blend-mode: difference; /* white chrome -> near-black on paper, inverts over photos */
}
.site-logo { display: block; }
.site-logo-mark {
display: block;
width: 96px; /* Figma Home 22 corner size */
height: auto;
filter: brightness(0) invert(1); /* white mark — the header blend inverts it */
}
/* The MENU control is two hand-drawn marks (Figma "Site Nave 2.1" component
`116:1637`: "menu" + "Handwritten x" `116:1418`). Default shows "menu"; when
the overlay opens, overlay.js sets aria-expanded="true" and the "x" takes
over. Both painted white so the header's `difference` blend reads them
near-black on paper and inverts over photos — same trick as the logo. The
control is a 40px-tall box (Figma hit target) with the mark centred and
right-aligned, so the swap doesn't shift the right edge. */
.site-header .nav-about {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 40px; /* Figma MENU/x box height */
text-decoration: none;
line-height: 0; /* no text baseline gap around the imgs */
}
.nav-menu-mark,
.nav-close-mark {
display: block;
filter: brightness(0) invert(1); /* white marks — the header blend inverts them */
}
/* Hand-drawn hamburger (Figma "hamburger" 126:2634) replaces the old "menu"
wordmark. Same 40×40 viewBox as the x, so it shares --x-mark-box → the closed
(hamburger) and open (x) marks have an identical footprint and the toggle
swap doesn't shift. */
.nav-menu-mark { width: var(--x-mark-box); height: auto; }
.nav-close-mark { width: var(--x-mark-box); height: auto; } /* 20px-tall glyph (shared --x-mark-box) */
/* Swap menu <-> x on open (driven by aria-expanded). */
.nav-about .nav-close-mark { display: none; }
.nav-about[aria-expanded="true"] .nav-menu-mark { display: none; }
.nav-about[aria-expanded="true"] .nav-close-mark { display: block; }
/* ---------- Title variant (content pages: project / about) ----------
`js/header.js` adds `.has-title` + a centred `.site-title` when the page
sets ``. Same white + `difference` chrome, but a
three-part bar (logo · title · MENU) that STICKS to the top so the nav
stays reachable as the page scrolls — the difference blend keeps it legible
over both the paper and the photos, so no scrim is needed. It stays pinned
and does NOT hide on scroll. The corner logo is slim here (the landing dock
is the big 96px one). */
.site-header.has-title {
position: sticky;
top: 0;
left: auto;
right: auto;
padding: 22px; /* Figma "Site Nave 2.1" small-logo bar */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.site-header.has-title .site-logo { justify-self: start; }
.site-header.has-title .site-logo-mark { width: 48px; } /* Figma 48×38 */
.site-header.has-title .nav-about { justify-self: end; }
.site-title {
justify-self: center;
text-align: center;
/* P Small — Regular 12/19.2 (Figma "Site Nave 2.1" titled variant) */
font-weight: var(--fw-regular);
font-size: var(--fs-small);
line-height: var(--lh-small);
color: #fff; /* white — the header blend inverts it */
}
/* The titled nav stays put — `position: sticky; top: 0` pins it to the top of
the viewport as the page scrolls; it does NOT hide on scroll. (The difference
blend keeps it legible over photos, so no scrim is needed.) */