/* nav-contrast.css — the top menu reads on any ground it flies over. * * The problem (2026-08-13): the navbar is transparent and its ink is fixed dark * (#1a1a1a). The homepage scrolls that dark ink over a white hero, the film * plate, three #1a1a1a bands, a work grid of dark artwork, a video and a dark * footer — so for most of the page the menu is dark-on-dark. Two pages had * already patched it locally in opposite ways (a white gradient on the work * grid's navbar, a paper scrim on Insights). Both are replaced by this. * * How it works: nav-contrast.js samples what is actually painted under the nav * band and writes `data-nav-on="light|dark"` on . Everything below is * driven off that one attribute, so there is one mechanism for every page. * * data-nav-on="light" ground is pale -> dark ink, dark CTA pill * data-nav-on="dark" ground is dark -> white ink, white CTA pill * * A tinted scrim rides under the bar in both states. Ink alone is not enough * over a photo or a video, where a "light" ground can still carry dark detail. */ :root { --nav-ink: #1a1a1a; --nav-btn-bg: #1a1a1a; --nav-btn-ink: #ffffff; --nav-btn-ring: rgba(26, 26, 26, 0.4); --nav-scrim: rgba(255, 255, 255, 0.72); } html[data-nav-on="dark"] { --nav-ink: #ffffff; --nav-btn-bg: #ffffff; --nav-btn-ink: #1a1a1a; --nav-btn-ring: rgba(255, 255, 255, 0.45); --nav-scrim: rgba(12, 12, 12, 0.55); } /* every piece of nav chrome inherits from one place */ .navbar, .navbar .nav-text, .navbar a.nav-link:not(.for-button) { color: var(--nav-ink); transition: color 0.32s ease; } /* The scrim. `.blur-effect` already sits in the bar with a fade-out mask, so it only needs a ground — the mask keeps the bottom edge soft, no hard bar. */ .blur-effect { background-color: var(--nav-scrim); transition: background-color 0.32s ease; } /* The two page-local patches this file replaces. Left in their own files with this note so the reasoning survives; neutralised here so there is exactly one mechanism painting the nav ground. */ .pkw-page .navbar { background-image: none; } .pk-ins .blur-effect { background: var(--nav-scrim); } /* Mobile: the hamburger is a Lottie SVG drawn with black strokes, so on a dark ground it has to be inverted rather than recoloured. While the drawer is open the ground is the drawer's own paper, so the nav goes back to dark ink. */ html[data-nav-on="dark"] .menu-button > .lottie-white svg { filter: invert(1); } html.pk-nav-open { --nav-ink: #1a1a1a; --nav-btn-bg: #1a1a1a; --nav-btn-ink: #ffffff; --nav-scrim: transparent; } html.pk-nav-open .menu-button > .lottie-white svg { filter: none; } @media (prefers-reduced-motion: reduce) { .navbar, .navbar .nav-text, .blur-effect { transition-duration: 0.01ms; } } /* ── nav layout ─────────────────────────────────────────────────────────── Two sizing fixes that belong with the bar rather than with the template's Webflow dump, so the whole top bar is described in one file. The wordmark shipped at the same 17.6px as the menu links, so the brand had no more weight than "Insights". It is the anchor of the bar and now reads a step above them. */ .navbar .nav-link.for-logo .nav-text { font-size: 22px; letter-spacing: -0.6px; } /* The menu links are 120px-wide boxes with their labels centred, so every pair of labels sits ~46px apart. The CTA is content-width and butts straight up against the last box's edge — 16px from "Insights", a third of the rhythm everything else keeps. This restores it. The pill stays flush with the right page margin; the links shift left instead. */ .navbar .hide-item, .navbar .nav-link.for-button { margin-left: 22px; } .navbar .hide-item .nav-link.for-button { margin-left: 0; }