/* Shared site chrome — blue/cream/Rubik direction from the Figma home page, now applied to every page (not just Home). This is the single source of truth for the header/nav, footer, and colour variables. cv.css @imports this file for the chrome and adds only the resume-specific rules on top; every other page (index/about/work/blog) loads this file directly and adds its own content rules below the import line in this same file, so there's one place to change the header/nav/footer instead of four. Colours pulled directly from the Home page in Figma (2026-08 pass): blue #2667fe (background — bulb.js repoints this between the dark-mode and light-mode background colour on click; see js/bulb.js. The name is a holdover from when dark mode was blue — light mode is now a very light grey, not blue) cream #fff3b7 (text/links/headings — the site's one text colour. bulb.js also repoints this, between cream for dark mode and --ink for light mode, so text stays legible against whichever background is active. --muted/--border below are derived from --cream via color-mix() so they follow it automatically) yellow #f7da50 (bulb — sparing highlight only, unchanged from earlier pass) ink #232323 (light-mode text colour, via bulb.js; also used directly for print — see the print block at the bottom) */ :root { --blue: #2667fe; --cream: #fff3b7; --yellow: #f7da50; --ink: #232323; --muted: color-mix(in srgb, var(--cream) 65%, transparent); /* de-emphasised text — derived from --cream rather than a fixed colour, so it tracks whichever text colour bulb.js has set (cream in dark mode, ink in light mode) instead of going stale/washed-out when the theme switches */ --paper: #ffffff; --border: color-mix(in srgb, var(--cream) 25%, transparent); /* borders/ dividers — same reasoning as --muted: derived from --cream so it stays visible against whichever background colour is active */ --max-width: 44rem; --font-body: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { color-scheme: light; } body { margin: 0; font-family: var(--font-body); color: var(--cream); background: var(--blue); line-height: 1.6; } /* Body text and links are both cream now, so links need their own visual marker (underline) rather than relying on a colour difference — colour alone stopped working once every page's text became one colour. */ a { color: var(--cream); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cream) 50%, transparent); } a:hover { text-decoration-color: currentColor; } /* Top nav — solid blue bar, cream links, centred. Spacing (72px gaps) and the home-lottie icon match the Figma "home-light" frame's "top-nav" node exactly (js/home-nav.js + js/home-data.js render the lottie). */ /* Cross-document view transitions: smooths the visual cut between full page loads on this plain multi-page site (no fetch/router involved — still genuine full navigations, just bridged with a native browser crossfade instead of a hard cut). Naming .site-header/.bulb-toggle the same on every page tells the browser to treat them as one continuous element across the navigation rather than an old one vanishing and a new one popping in. Chromium-only for now; unsupported browsers just ignore this block and navigate exactly as before — and file://'s same-origin rules for this feature haven't been verified on this site specifically, so treat it as a bonus layer on top of the real fixes (self-hosted lottie.min.js, the preload hint, and no longer blocking navigation on the click clip), not the fix itself. */ @view-transition { navigation: auto; } .site-header { view-transition-name: site-header; background: var(--blue); padding: 1.25rem 1.5rem; position: relative; /* anchors .nav-menu/.nav-toggle's absolute positioning (right: 1.5rem) to the header's own true edges — the full page width, since .site-header has no side margin of its own, just this padding — rather than to .site-header-inner's 64rem-capped, centred box below it. That distinction only shows up once the viewport's wider than ~1072px (64rem + this padding): below that, site-header-inner always stretches to fill the same width anyway, so moving this here doesn't change anything at mobile sizes, but it's what makes .nav-menu's right: 1.5rem actually match the bulb's own left: 1.5rem (position: absolute with no positioned ancestor, so its containing block is still viewport-width, same as when it was fixed) at every width instead of drifting apart on a wide screen. */ z-index: 15; /* without this, position:relative alone doesn't create a stacking context (z-index stays auto), so the mobile dropdown menu inside it (.nav-menu, z-index: 10) was only being compared against page content back at the root level — where .hero-copy's waving emoji (animated via transform, which creates its own implicit stacking context) could paint above it. Explicitly promoting the whole header fixes that for anything on the page, while staying below .bulb-toggle (z-index: 20), which is meant to sit on top of the header. */ } .site-header-inner { max-width: 64rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; } /* nav is a 3-column grid — 1fr / auto / 1fr — so Home (.nav-primary) sits in the centre column, genuinely centred on the nav's own full width rather than just centred relative to whatever's next to it. width: 100% is what gives the two 1fr spacer columns something to actually distribute — without it, nav would only be as wide as its own content needs and the "spacers" would collapse to nothing. .nav-menu (CV/Contact — Animation/Illustration are hidden out of it further down; their pages still exist, still linked from Home's own showcase sections, see css/home.css) isn't a grid column at all though: it's pulled out to position: absolute (see .site-header/.nav-menu below) so it can sit flush against the header's true right edge, matching the bulb's left edge exactly, instead of the right edge of this grid — which, once .site-header-inner hits its own 64rem cap on a wide screen, stops being the same place. */ .site-header nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; } .nav-primary { grid-column: 2; justify-self: center; } .nav-menu { position: absolute; right: 5.5rem; /* was 4rem — pulled in further still */ top: 50%; transform: translateY(-50%); } /* Animation and Illustration hidden from the top nav (still real, linked pages — see the comment above — just not in this menu right now). Always the first two
  • s in .nav-menu across every page, so one rule here covers the whole site instead of editing all 17 pages' markup. */ .nav-menu li:nth-child(1), .nav-menu li:nth-child(2) { display: none; } .site-header nav ul { display: flex; align-items: center; gap: 32px; /* was 72px — decreased for CV/Contact, the only two links left visible in .nav-menu now that Animation/Illustration are hidden; .nav-primary only ever has the one item so this value doesn't show up there either way */ list-style: none; margin: 0; padding: 0; } .site-header nav a { display: inline-block; color: var(--cream); font-weight: 600; text-decoration: none; opacity: 0.85; /* Springy "pop" on hover (overshoot easing) and a quick squash while held down — every nav link gets both, home's icon included. Home's icon also plays its own squash-and-back Lottie clip on click (js/home-nav.js) as a bonus flourish, but doesn't wait for it to finish before following the link — this CSS squash is what gives every link (home included) its instant, un-delayed press feedback. */ transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .site-header nav a:hover { opacity: 1; text-decoration: none; transform: scale(1.08); } .site-header nav a[aria-current="page"] { opacity: 1; border-bottom: 2px solid var(--cream); padding-bottom: 2px; } .site-header nav a:active { transform: scale(0.92); transition: transform 0.1s ease; } .site-header nav .nav-menu a { padding: 16px 20px; } /* Home button — the "head" node in Figma's top-nav (60.883 x 54.176px). Its own link is meant to skip the aria-current underline treatment above, since being "current" doesn't apply to a single icon the same way — but .site-header nav a[aria-current="page"] and this rule are equally specific, so without explicitly cancelling border-bottom/ padding-bottom here too, the underline was still showing up under the icon on the Home page itself. */ .site-header nav .nav-home a { display: block; opacity: 1; border-bottom: 0; padding-bottom: 0; } .nav-home-lottie { display: block; width: 152px; /* was 183px (3x) — pulled back slightly, ~2.5x the original 61px */ height: 135px; /* was 162px (3x) — ~2.5x the original 54px */ } .nav-home-lottie svg { display: block; } /* Hamburger button for the collapsed link menu below — hidden by default; the 768px breakpoint further down switches it on and positions it. Home never moves into this menu, so the button only ever needs to reveal Animation/Illustration/CV/Contact (.nav-menu). */ .nav-toggle { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; } .nav-toggle-bar { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform 0.2s ease, opacity 0.2s ease; } /* js/nav-toggle.js adds/removes this class on