@font-face { font-family: "Keykode Regular"; src: url("/assets/fonts/JHKeykodeMono-620.woff2"); font-weight: normal; font-style: normal; /* font-variant: small-caps; */ } @font-face { font-family: "Keykode Extended"; src: url("/assets/fonts/JHKeykodeMono-850.woff2"); font-weight: normal; font-style: normal; text-transform: uppercase; /* font-variant: small-caps; */ } @font-face { font-family: "Waldenburg"; src: url("/assets/fonts/KMRWaldenburg-Medium.woff2") format("woff2"); font-weight: normal; font-style: normal; text-transform: uppercase; /* font-variant: small-caps; */ } :root { --font-size-small: 9px; --font-size-medium: 13px; --font-size-medium-waldenburg: 13px; --columncount: 30; /* -- Theme palette (dark = default) ------------------------------ Follows OS via prefers-color-scheme (see header.php + home.php). The pic-invert button is a session-only override; html.is-light-mode otherwise tracks the system. */ --c-bg: #0e0e0e; /* page background */ --c-fg: #ffffff; /* text / icons */ --c-surface: #050505; /* dark cells / player slots */ --c-strip-top: #1a1a1a; /* filmstrip gradient top */ --c-strip-bottom: #0d0d0d; /* filmstrip gradient bottom */ --c-hover: #2C2C2C; /* list-row hover */ --c-overlay: rgba(0, 0, 0, 0.72); /* credits overlay scrim */ --c-overlay-strong: rgba(0, 0, 0, 0.55); --c-track: rgba(255, 255, 255, 0.28);/* progress-bar track */ } /* Light mode: swap the palette (black ⇄ white, dark grays → light). Keyed on (class toggled on both html + body in home.php) so the variables cascade to the root background as well as all descendants. */ html.is-light-mode { --c-bg: #FCFCFC; --c-fg: #0e0e0e; --c-surface: #f2f2f2; --c-strip-top: #e8e8e8; --c-strip-bottom: #f4f4f4; --c-hover: #d9d9d9; --c-overlay: rgba(255, 255, 255, 0.82); --c-overlay-strong: rgba(255, 255, 255, 0.7); --c-track: rgba(0, 0, 0, 0.28); } html { background: var(--c-bg); color: var(--c-fg); height: 100%; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; /* Disable browser scroll anchoring on the root scroll container. The sticky
contains the .infofoldout, which grows in flow when opened. With anchoring ON (Chrome/Edge/Firefox default), the browser detects that layout shift and silently bumps scrollY by the same amount to keep the currently-visible content "anchored" — so when scrolled past the top, the header appears to expand OVER the content instead of pushing it down. Turning anchoring off lets the foldout's growth push the rest of the page down at any scroll position, matching the behavior you see at scrollY = 0 (and Safari's behavior, which has no scroll anchoring). */ overflow-anchor: none; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Keykode Regular"; line-height: 1; } a { color: inherit; text-decoration: none; font-family: "Keykode Regular"; text-transform: uppercase; font-size: var(--font-size-medium); /* font-variant: small-caps; */ } img { display: block; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: unset; font-family: "Keykode Regular"; text-transform: uppercase; line-height: 1; font-size: var(--font-size-medium); /* font-variant: small-caps; */ } p { margin: 0; padding: 0; font-family: "Keykode Regular"; text-transform: uppercase; line-height: 1; font-size: var(--font-size-medium); hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; /* font-variant: small-caps; */ } body { background: var(--c-bg); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* Header */ header { display: grid; grid-template-columns: repeat(var(--columncount), 1fr); padding: 8px; padding-bottom: 20px; /* background: black; */ position: sticky; top: 0; z-index: 9999; flex: 0 0 auto; } .infofoldout { display: grid; grid-template-columns: repeat(var(--columncount), 1fr); grid-column: 1 / -1; column-gap: 8px; /* Collapsed by default. The grid-template-rows: 0fr → 1fr trick gives us a smooth height transition without measuring content in JS — 1fr in an auto-sized row resolves to the children's natural height, so we get true auto-collapse animation. Children need min-height: 0 + overflow: hidden so they can be clipped below their intrinsic content size when collapsed. */ grid-template-rows: 0fr; row-gap: 0; padding-top: 0; overflow: hidden; transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.45s cubic-bezier(0.4, 0, 0.2, 1), row-gap 0.45s cubic-bezier(0.4, 0, 0.2, 1); font-size: var(--font-size-medium); font-family: "Waldenburg"; } .infofoldout * { font-family: "Waldenburg"; font-size: var(--font-size-medium-waldenburg); text-transform: none; hyphens: auto; line-height: 1.2; } .infofoldout > * { min-height: 0; overflow: hidden; } body.is-info-open .infofoldout { grid-template-rows: 1fr; padding-top: 16px; } .infotextcontainer { display: flex; flex-direction: column; gap: 8px; grid-column: 2 / span 5; padding-right: 8px; /* padding-left: 15px; */ } .infotextcontainer p strong { font-weight: unset; hyphens: none; word-wrap: nowrap; } .selectedclientscontainer { display: flex; flex-direction: column; grid-column: 7 / span 5; } .selectedclientscontainer p strong { font-weight: unset; hyphens: none; word-wrap: nowrap; } .contactinfocontainer { grid-column: 12 / span 3; } main { flex: 1 0 auto; display: flex; flex-direction: column; padding: 0; } .site-title { font-family: "Keykode Extended"; font-size: var(--font-size-medium); grid-column: 1 / span 4; transition: opacity 0.25s ease; /* Acts as a "home" link → returns to the landing (stage) view. */ cursor: pointer; /* Stacking parent for the two label spans. The label sits in flow (so the title takes up its natural width); the exit label is absolutely positioned over it and crossfades in via opacity. */ position: relative; display: inline-block; } .site-title * { font-family: "Keykode Extended"; } .site-title__label, .site-title__exit { transition: opacity 0.25s ease; } /* Exit label overlays the regular label and starts hidden. Toggling body.is-stage-mode.show-exit-hint crossfades them. See updateStageExitHint() in home.php for the trigger logic. */ .site-title__exit { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; /* Whitespace stripped from the surrounding flow so the regular label's width dictates the title's bounding box. */ white-space: nowrap; } /* The site title used to crossfade into an "Exit" label while show-exit-hint was active. Disabled by design — the title stays as the site title in stage mode. .site-title__exit's base opacity:0 / pointer-events:none rule (above) keeps the dormant label invisible. show-exit-hint now only drives the cursor- following project-number label and the native-cursor hide/swap rules below. */ /* -- Cursor label: shows the active stage card's project number and follows the cursor while show-exit-hint is on. A DOM element rather than a CSS `cursor: url()` so we can use the page font (custom cursors only render with system fonts) and have a smooth crossfade. The native cursor is hidden in this state via the rule below so the label acts as a full replacement, not a tooltip. Position is driven from JS by setting `transform` on every mousemove — see the cursorLabelEl block in home.php. */ .cursor-label { position: fixed; top: -17px; left: -22px; z-index: 99999; padding: 0; /* Match the project-number styling inside .project-header exactly: Keykode Extended for the whole string, small-caps for every character EXCEPT the first letter. The header markup achieves this structurally — `

P

` sits outside `.project-number-inner` (which carries font-variant: small-caps), so the leading "P" renders normal-extended and the digits + dashes following it inherit small-caps. With a single text node here we can't split the DOM, but ::first-letter overriding font-variant back to normal reproduces the same visual rule. */ font-family: "Keykode Extended"; font-size: var(--font-size-medium); font-variant: small-caps; /* White + difference inverts against whatever is behind the label (dark video → light text, light stills → dark text). */ color: #fff; mix-blend-mode: difference; line-height: 1; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; will-change: transform; } .cursor-label::first-letter { font-variant: normal; } .cursor-label--stillnumber { font-family: "Keykode Extended"; font-size: var(--font-size-medium); font-variant: small-caps; } .cursor-label--stillnumber::first-letter { font-variant: small-caps; } /* Arrow variant: when the cursor sits over an expanded-mode prev/next nav zone, the label shows a directional arrow instead of "Exit". The page font has no arrow glyph, so fall back to a system font and bump the size/weight a touch so the chevron reads clearly as a cursor. */ .cursor-label--arrow { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-variant: normal; font-size: calc(var(--font-size-medium) * 1.6); line-height: 1; } /* Default expanded cursor: a small dot when no text label applies. */ .cursor-label--dot { top: 0; left: 0; width: 6px; height: 6px; font-size: 0; background: #fff; border-radius: 50%; } .cursor-label--dot::first-letter { font-variant: normal; } /* The cursor-label is reused across two contexts and the show-exit-hint class drives visibility in BOTH: - body.is-stage-mode.show-exit-hint → label text = project number - body.has-expanded-player.show-exit-hint → label text = "BACK" / "PLAY" / "PAUSE" The two body modes are mutually exclusive (entering one removes the other) so a single .show-exit-hint hook is enough. The JS that sets the label's textContent lives in home.php's updateExpandedExitHint() and updateCursorLabelForStageCard(). */ body.is-stage-mode.show-exit-hint .cursor-label, body.has-expanded-player.show-exit-hint .cursor-label { opacity: 1; } /* Hide the native cursor while the Exit label is active so the user sees a single visual indicator instead of pointer + label. !important needed to win over per-element `cursor: pointer` / `cursor: zoom-out` declarations cascading inside stage / expanded mode. */ body.is-stage-mode.show-exit-hint, body.is-stage-mode.show-exit-hint *, body.has-expanded-player.show-exit-hint, body.has-expanded-player.show-exit-hint * { cursor: none !important; } /* …but when the cursor is over the PAGE header (interactive chrome — site title, zoom buttons, etc.), show the native pointer instead. The header sits outside the click-to-exit zone so show-exit-hint stays on; we just exempt the header itself from the cursor swap. Both selectors carry an extra `header` token so they out-specify the blanket `cursor: none !important` rule above. */ body.is-stage-mode.show-exit-hint header, body.is-stage-mode.show-exit-hint header *, body.has-expanded-player.show-exit-hint header, body.has-expanded-player.show-exit-hint header * { cursor: pointer !important; } /* Same exemption for expanded-mode video controls (play, scrub, mute). */ body.has-expanded-player.show-exit-hint .filmstrip__video-controls, body.has-expanded-player.show-exit-hint .filmstrip__video-controls * { cursor: pointer !important; } /* Same exemption for interactive controls inside the per-project header (credits , title link). The JS hint logic excludes these from triggering the Exit label, so we need a matching CSS carve-out for the native cursor — otherwise the blanket `cursor: none !important` above would still hide the pointer over the button the user is about to click. */ body.has-expanded-player.show-exit-hint .project-header a, body.has-expanded-player.show-exit-hint .project-header a *, body.has-expanded-player.show-exit-hint .project-header button, body.has-expanded-player.show-exit-hint .project-header button *, body.has-expanded-player.show-exit-hint .project-header summary, body.has-expanded-player.show-exit-hint .project-header summary *, body.has-expanded-player.show-exit-hint .project-header details, body.has-expanded-player.show-exit-hint .project-header [role="button"], body.has-expanded-player.show-exit-hint .project-header [role="button"] * { cursor: pointer !important; } /* Title sits above the player visually but clicks pass through to the video (exit → expanded). Pointer cursor while over the title bbox is driven by body.is-over-stage-title in JS. */ body.is-stage-mode.is-over-stage-title, body.is-stage-mode.is-over-stage-title * { cursor: pointer !important; } body.is-stage-mode.is-over-stage-title .cursor-label { opacity: 0 !important; visibility: hidden; } body.is-stage-mode.is-over-stage-title.show-exit-hint .cursor-label { opacity: 0 !important; visibility: hidden; } /* Hide the cursor-following label while the user is over the page header — the pointer cursor reads as "click this control", the label would just clutter the chrome. :has() lets us react to the descendant hover state from a parent selector. */ body.is-stage-mode.show-exit-hint:has(header:hover) .cursor-label, body.has-expanded-player.show-exit-hint:has(header:hover) .cursor-label { opacity: 0 !important; visibility: hidden; mix-blend-mode: normal; } /* Idle auto-hide: in expanded view the BACK / EXIT label is part of the video-player chrome, so it fades out with the thumb slider after the user stops moving (body.is-thumbs-hidden) and returns on the next mouse move. The mousemove handler repositions the label before removing is-thumbs-hidden, so it always reappears at the cursor. Stage mode uses the same delay via body.is-stage-hint-hidden. */ body.has-expanded-player.show-exit-hint.is-thumbs-hidden .cursor-label, body.is-stage-mode.show-exit-hint.is-stage-hint-hidden .cursor-label { opacity: 0; visibility: hidden; mix-blend-mode: normal; } /* Mobile / touch: there's no real cursor to follow or replace, so the project-number / Exit / arrow labels are meaningless and the cursor:none swap would only risk hiding a stylus pointer. Suppress the label entirely and never blank the native cursor. */ @media (max-width: 768px), (hover: none), (pointer: coarse) { .cursor-label { display: none !important; } body.is-stage-mode.show-exit-hint, body.is-stage-mode.show-exit-hint *, body.has-expanded-player.show-exit-hint, body.has-expanded-player.show-exit-hint * { cursor: auto !important; } } .todays-date { display: flex; flex-direction: row; line-height: 1; grid-column: 3; } .date-year { font-family: "Keykode Extended"; font-size: var(--font-size-medium); align-self: flex-end; } .date-month-day { font-family: "Keykode Extended"; font-size: var(--font-size-medium); font-variant: small-caps; text-transform: uppercase; /* font-size: var(--font-size-small); */ align-self: flex-end; } .info-settings { display: flex; flex-direction: row; gap: 7px; grid-column: 6; justify-content: space-between; } .info-settings * { line-height: 1; font-family: "Keykode Regular"; font-size: var(--font-size-medium); /* font-variant: small-caps; */ } .info-btn { /* margin-right: 14px; */ cursor: pointer; opacity: 0.35; } .zoom-controller { display: flex; flex-direction: row-reverse; gap: 8px; font-family: "Keykode Regular"; font-size: var(--font-size-medium); justify-content: flex-end; } .controlcontainer { display: flex; gap: calc(8px*5); grid-column: 8 / span 4; } /* Zoom steps: the currently selected step is at full opacity (white); the others sit dimmer and lift back to full on hover. */ .zoom-step { cursor: pointer; opacity: 0.4; transition: opacity 0.2s ease; } .zoom-step.is-active { opacity: 1; cursor: default; } .zoom-step:not(.is-active):hover { opacity: 1; } .zoom-step__label-mobile { display: none; } /* The pic-invert button stays at full opacity outside stage mode; info is dimmed by default and lifts on hover / when the foldout is open. In stage mode see the rules near body.is-stage-mode below. */ .info-btn, .pic-invert-btn { cursor: pointer; transition: opacity 0.2s ease; font-family: "Keykode Regular"; font-size: var(--font-size-medium); } .info-btn:hover, body.is-info-open .info-btn { opacity: 1; } /* -- Pic-invert button --------------------------------------------- */ /* Two icon glyphs stacked on the same baseline; we crossfade between them via opacity when body.is-pics-inverted toggles. Resetting the