/* eli samuel — sequence homepage Single-viewport, non-scrolling page modelled directly on darrengwynn.com's own homepage: one photo at a time, contained (never cropped) inside generous surrounding quiet, click anywhere to advance, no arrows, no dots, no autoplay, no captions. The header/nav is the same component as the exhibition-wall homepage (freeform.html) — see style.css's own masthead section for the fuller comments — just simplified: no canvas underneath, so no tile/glass-backdrop overlap check is needed, and wordmark + nav can live in one plain

instead of two independently-positioned fixed elements. */ :root{ --ink:#0a0a0a; --paper:#fafaf8; --muted:#7c7c78; --prose:#2c2c2a; --line:#cfcfcb; --font:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif; --fs-iface:10px; --ls-iface:2px; --lh-iface:16px; --fs-identity:16px; --fs-meta:12px; --lh-meta:1.6; --fs-body:14px; --lh-body:1.75; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; height:100%; background:var(--paper); color:var(--ink); font-family:var(--font); overflow:hidden; /* one viewport, no page scroll — same as the reference */ -webkit-font-smoothing:antialiased; /* Every page here is a single fixed viewport by design (see overflow:hidden above) — nothing on any of them is ever meant to natively pan, scroll, or pinch-zoom. showcase.js's own swipe listener is deliberately bound to `document`, not #stage, so its gesture can start anywhere including right at the bottom edge — touch-action needs the same document-wide scope to actually back that up, or the browser's compositor can still claim a gesture that started outside #stage as its own before JS ever sees it. */ touch-action:none; /* Custom on-brand cursor site-wide — a small solid dot standing in for the plain system arrow. Cursor is an inherited property, so this only ever reaches elements that don't set their own (button{} already has cursor:pointer, .stage-zone has cursor:none for its own chevron) — those keep working exactly as before. */ cursor:url('data:image/svg+xml;utf8,') 4 4, auto; } /* Clicking a real nav link (sequence.js/showcase.js) closes the menu first, then fades this to 0 before actually navigating, instead of the browser just tearing down the page mid-open — requested directly: "closes like it opened... gives way to the next set of images" rather than slamming shut. */ body.page-leaving{ opacity:0; transition:opacity .35s ease; } /* The other half of the same transition — every page's now starts invisible via this class already present in its own static HTML (not added by JS after the fact), so there's genuinely nothing to flash before the fade-in even starts; sequence.js/showcase.js remove the class a frame after load to trigger it. Without starting invisible in the raw markup itself, there'd be an instant of full- opacity content before any script could react — exactly the "choppy" handoff this was built to avoid on the way IN, matching page-leaving above on the way out. */ body.page-entering{ opacity:0; } body{ transition:opacity .4s ease; } /* Same dot as the site-wide cursor above (cx/cy/r all identical — the dot itself doesn't change size or shift position), just with a thin halo ring added around it, so hovering a link reads as the dot "focusing" rather than swapping to an unrelated shape. */ a{ color:inherit; text-decoration:none; cursor:url('data:image/svg+xml;utf8,') 10 10, pointer; } /* Same halo-ring cursor as links above (identical SVG) — buttons like Previous/Next Project were still showing the native OS pointing-hand since this rule set cursor:pointer directly, a separate declaration from the `a{}` one above even though both used to resolve to the same native cursor. .stage-zone below overrides this back to none for its own chevron, same as before. */ button{ font:inherit; background:none; border:0; padding:0; color:inherit; cursor:url('data:image/svg+xml;utf8,') 10 10, pointer; } /* Site-wide tap/click affordance reset. Without this, every custom "button" on the site (.stage-zone's tap halves, .video-play, #navToggle, .back-link/.details-link, #prevProject/#nextProject on the showcase pages, ...) showed two separate browser defaults that were never actually designed for here: a dark tap-highlight flash on mobile the instant a finger lands, and a persistent blue focus outline left behind after the tap/click registers — reported separately as "flashes black on mobile" and "a big blue box that comes up when you click." Both are the browser's own affordances for plain unstyled controls, not something this site ever drew on purpose; .gate already had its own local fix for exactly this (below), just never generalized past that one element. -webkit-tap- highlight-color kills the flash; :focus-visible (not :focus) keeps a real indicator for actual keyboard tabbing while dropping it for the tap/mouse-click case that was never supposed to show one. */ a, button{ -webkit-tap-highlight-color:transparent; } a:focus, button:focus{ outline:none; } a:focus-visible, button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } .page{ height:100vh; height:100dvh; display:flex; flex-direction:column; } /* ---------- header ---------- */ #masthead{ flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; /* 10px here + #navToggle's own 12px right padding below = 22px from the viewport edge to the "WORK" text — matching #wordmark's 22px on the left exactly (wordmark has no internal padding of its own). A real, confirmed mismatch: this used to be 44px, landing the visible text 56px from the edge, more than double the wordmark's inset. */ padding:22px 10px 22px 22px; position:relative; /* containing block for #mainnav's dropdown */ z-index:50; } #wordmark{ display:block; font-size:var(--fs-iface); font-weight:700; letter-spacing:var(--ls-iface); line-height:var(--lh-iface); text-transform:uppercase; color:var(--ink); } /* index.html only — the wordmark link sits inside a real

there (site name as the homepage's one heading, standard practice). display:contents removes the wrapper's own box entirely (default h1 margin included), so #wordmark lays out exactly as if the

weren't there — this exists purely so the heading is real, present HTML, not a CSS trick to hide or fake anything; nothing about it is visually different from before. / #wordmark-h1{ display:contents; } / Gets the same frosted background as #mainnav below it, while open, so "Work" reads as sitting inside the same panel as its own dropdown instead of floating separately above it — that separation was the real, confirmed source of two complaints at once: the box looking misaligned with the word above it, and a visible gap between them (see #mainnav's own top offset below for the actual cause of the gap, and why calc() rather than a hardcoded pixel value). / #navToggle{ display:flex; align-items:center; appearance:none; -webkit-appearance:none; background:none; border:none; / Above #mainnav (z-index:1, below) in the stacking order — the swung-open bottom line is 20px long but the icon's own box is only 5px tall, so it extends well past #navToggle's own bottom edge and into #mainnav's own box once that opens right underneath. Without this, #mainnav's later DOM position wins ties on equal (auto) z-index and paints over that stretch of the line, visibly cutting it off — a real, confirmed bug reported as the nav box "interfering with the lines." / position:relative; z-index:2; / right:12px matches #mainnav's own right padding below (10px 12px) — both inset from the same masthead edge, so this is what makes "Work" line up with "Projects/Books/Info" once the nav opens underneath it. A real, confirmed 4px misalignment when this was 8px on both sides. / padding:4px 12px 4px 8px; border-radius:2px; color:var(--ink); cursor:url('data:image/svg+xml;utf8,') 10 10, pointer; transition:background .25s ease; } #masthead.nav-open #navToggle{ background:rgba(255,255,255,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:2px 2px 0 0; / square where it meets #mainnav below, so the seam disappears / } / Design decision: the toggle is now a plain two-line icon on every breakpoint, not "WORK"/"PROJECTS" text on desktop and a single bare line on mobile — one consistent, self-explanatory affordance instead of two different ones that happened to sit in the same corner. Text stays in the DOM (sequence.js still updates it live) purely so the Work/Projects-switching logic below has something to read; it's never shown. / .nav-current-label{ display:none; } .nav-toggle-line{ position:relative; display:block; width:20px; height:5px; } .nav-toggle-line::before, .nav-toggle-line::after{ content:''; position:absolute; left:0; width:20px; height:1px; background:var(--ink); } .nav-toggle-line::before{ top:0; } / Top line stays put; the bottom line hinges on its own right edge — transform-origin:right center, exactly on the line itself, not floating 4px above it. A prior version moved the pivot off the line entirely (up to the top line's own corner) to try to close the visual gap between the two once rotated, but rotating a line around a point that isn't actually on it makes that "anchored" end sweep through its own small arc instead of staying put — a real, confirmed bug reported as the icon drifting sideways instead of swinging cleanly in place. Pinning the origin to the line's own edge keeps that end completely fixed through the whole rotation, so it reads as a door hinged at one point and swinging its free end down, not sliding. Negative degrees, not positive — positive swings the line UP off the top of the icon instead of down toward #mainnav below it (rotate() is clockwise on screen, and this line's own local geometry runs the opposite way from what "positive = down" would assume). / .nav-toggle-line::after{ bottom:0; transform-origin:right center; / Closing only — reverts to this rule's own transform:rotate(0) once .nav-open comes off and the animation below stops applying, so it needs a transition of its own to ease back up rather than snap. / transform:rotate(0deg); transition:transform .4s cubic-bezier(.4,0,.2,1); } / Falls open rather than just rotating flatly to -90deg — swings past vertical, springs back, and settles, like it was hinged and gravity pulled it down with a bit of sway at the bottom rather than someone moving it in a straight line. A single eased transition (the previous version) can only ever move toward its target, never past it, so it read as sliding into place instead of falling — requested directly: "kinda like it's unlocked and it's fallen down, and gravity is moving it a little". transform-origin above is untouched by any of this — the anchor point this hinges from never moves, only the angle animates. / #masthead.nav-open .nav-toggle-line::after{ animation:navLineFall .7s cubic-bezier(.4,0,.2,1) forwards; } @keyframes navLineFall{ 0% { transform:rotate(0deg); } 55% { transform:rotate(-100deg); } 70% { transform:rotate(-83deg); } 85% { transform:rotate(-93deg); } 100% { transform:rotate(-90deg); } } / Flush against the toggle, not floating below it with a gap — alignNavToCurrent() in sequence.js force-opens Work's own submenu every time the panel opens fresh, so it's visible immediately instead of requiring an extra tap to reveal it. Positioned so its top-right corner lands exactly on the swing icon's own anchor point (the top line's right edge, the same point .nav-toggle-line::after hinges from above) — measured directly off the live page (12px left, 8px up from the old top:22px/right:10px), so the panel reads as hanging from that same fixed point rather than sitting independently below it, per explicit request. / #mainnav{ / top:100% would be #masthead's FULL height, padding-bottom included — landing well below #navToggle's own bottom edge. Subtracting 30px (22px for that padding + 8px to reach the anchor point above it) lands the corner on the anchor instead, and keeps working correctly even if #navToggle's own padding above ever changes, unlike a hardcoded top value would. z-index:1, below #navToggle's own z-index:2 above — see #navToggle's own comment for why. / position:absolute; top:calc(100% - 30px); right:22px; margin-top:0; z-index:1; display:flex; flex-direction:column; align-items:flex-end; gap:4px; padding:10px 12px; border-radius:0 0 2px 2px; / square top corners — meets #navToggle's own box above with no visible seam / background:rgba(255,255,255,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s; } #masthead.nav-open #mainnav{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); / Held back briefly so it appears once the icon above has mostly finished falling open, not at the same instant — the two animating in together read as one shape growing/stretching downward rather than a hinge swinging followed by a panel dropping in underneath it, a real, confirmed complaint ("the line is extending"). / transition:opacity .25s ease .2s, transform .25s ease .2s; } #mainnav a{ display:block; font-size:var(--fs-iface); font-weight:400; letter-spacing:var(--ls-iface); line-height:var(--lh-iface); text-transform:uppercase; color:var(--muted); transition:color .2s; } #mainnav a:hover{ color:var(--ink); } / Personal/Travel are flat top-level links now (no more Projects dropdown), so #mainnav's children render in plain DOM order — no order overrides needed. #mainnav a{color:var(--muted)} above is an ID selector, which beats a class-based aria-current selector even with an attribute added, so the #mainnav prefix is required here too or this silently never applies. / #mainnav a[aria-current="page"]{ opacity:1; color:var(--ink); } / A plain house icon standing in for "Home" (the wordmark itself no longer does double duty as a home link, since it's now the menu toggle everywhere — desktop and mobile alike), first in the cascade so it lands right above Selected Work. Hidden here by default; the unconditional rule further down reveals and sizes it. / #mainnav a.nav-home{ display:none; } / Discovery hint, index.html only — see sequence.js for the trigger (reaching the slideshow's last slide) and dismiss logic. Hidden here by default; the unconditional rule further down reveals and positions it, reusing the exact spot #mainnav's own first item lands in, so the flash points at where the real menu is about to appear. / #moreHint{ display:none; } / Same wordmark-as-menu treatment on mobile now too — "exactly the same as desktop," requested directly, including #moreHint further down. No longer gated behind a min-width breakpoint at all; #navToggle (sequence.js/showcase.js still wire its click handler up, harmlessly inert now that it's hidden everywhere) stays in the DOM only because ripping out its markup wasn't asked for. Fold the icon-based menu into the wordmark itself — "Eli Samuel" becomes the toggle, and what drops down is just the words themselves, left-aligned underneath it, not a floating boxed panel over on the right. / #navToggle{ display:none; } #mainnav{ left:22px; right:auto; top:100%; margin-top:0; align-items:flex-start; gap:4px; padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; opacity:1; visibility:visible; pointer-events:none; transform:none; transition:none; } #masthead.nav-open #mainnav{ pointer-events:auto; transition:none; } / Each word now animates on its own, not the panel as a whole — a downward cascade on open (item 1 first, each following item a beat later) via increasing transition-delay per nth-child, requested directly ("cascade down the words underneath"). / #mainnav a{ opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .3s ease; } #mainnav a:nth-child(1){ transition-delay:0s; } #mainnav a:nth-child(2){ transition-delay:.06s; } #mainnav a:nth-child(3){ transition-delay:.12s; } #mainnav a:nth-child(4){ transition-delay:.18s; } #mainnav a:nth-child(5){ transition-delay:.24s; } #masthead.nav-open #mainnav a{ opacity:1; transform:translateY(0); } / The home icon (nth-child(1), see the mobile-hiding rule further up this file for why it only exists here) — same cascade item as every #mainnav a above, just swapped for a small centered icon instead of text. 16px square keeps its own visual weight roughly level with a line of the nav's own 10px/16px-line-height type next to it. / #mainnav a.nav-home{ display:flex; align-items:center; justify-content:center; width:16px; height:16px; margin-bottom:2px; } #mainnav a.nav-home svg{ width:16px; height:16px; } / The current-page link (e.g. "Books", while sitting on books.html) has its own opacity:1 rule further up this file so it still reads as the bold/emphasized one once the menu is open — but that same rule's attribute selector out-specifies the closed a{opacity:0} rule above, which left it sitting there permanently visible under the wordmark even with the menu shut. A real, confirmed bug, reported directly: it needs to disappear along with every other link when closed, and only reappear (still bold) once the menu is actually opened again. / #mainnav a[aria-current="page"]{ opacity:0; transform:translateY(-8px); } #masthead.nav-open #mainnav a[aria-current="page"]{ opacity:1; transform:translateY(0); } #moreHint{ display:flex; align-items:center; justify-content:center; width:16px; height:16px; position:absolute; left:22px; top:100%; margin-top:0; color:var(--ink); opacity:0; transform:translateY(-4px); / Fade + settle, same easing/feel as the typographic-settle reveal this replaced (chosen out of a live side-by-side of four motion candidates) — just without the letter-spacing tightening, since there's no longer any type to track in. Reads as a considered reveal rather than an alert blinking for attention. / pointer-events:none; transition:opacity .9s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.16,1,.3,1); } #moreHint svg{ width:16px; height:16px; } #moreHint.visible{ opacity:1; transform:translateY(0); / Clickable for the duration it's actually shown — the icon opens the nav too, not just "Eli Samuel" above it. Same halo-ring cursor every other clickable thing on the site uses. / pointer-events:auto; cursor:url('data:image/svg+xml;utf8,') 10 10, pointer; } / Closing reverses the wave instead of mirroring it — the LAST word retracts first and the first word (right under "Eli Samuel") retracts last, so it reads as receding back up into the wordmark rather than the open cascade playing backwards. Only applied via .nav-closing, which sequence.js/showcase.js add for the duration of the close transition and then remove — .nav-open alone (e.g. a fresh page load that starts closed) never triggers this. / #masthead.nav-closing #mainnav a:nth-child(1){ transition-delay:.24s; } #masthead.nav-closing #mainnav a:nth-child(2){ transition-delay:.18s; } #masthead.nav-closing #mainnav a:nth-child(3){ transition-delay:.12s; } #masthead.nav-closing #mainnav a:nth-child(4){ transition-delay:.06s; } #masthead.nav-closing #mainnav a:nth-child(5){ transition-delay:0s; } @media (max-width:720px){ / top:100% (above) lands on #masthead's own bottom padding edge — a 22px gap under the wordmark's actual text, on top of the cascade's own 8px translateY entrance. Reads fine as breathing room on desktop's wider layout, but on a narrow phone screen it just looks like an unexplained blank line between "Eli Samuel" and the menu — reported directly. Pulling it up close to a tight, deliberate 8px gap instead (masthead height 60px = 22 top pad + 16 line + 22 bottom pad; wordmark's own bottom sits at 38px, so 46px here is exactly 8px under it) — #moreHint shares the exact same anchor point, so it gets the identical adjustment. / #mainnav{ top:calc(100% - 14px); } #moreHint{ top:calc(100% - 14px); } } / ---------- slideshow ---------- / #stage{ flex:1 1 auto; position:relative; display:flex; align-items:center; justify-content:center; min-height:0; padding:20px; / Without this, the swipe-to-navigate JS (sequence.js/showcase.js) is fighting the browser's own touch handling rather than replacing it — a non-passive touchmove calling preventDefault() is the usual fix, and it IS in place, but iOS Safari's compositor decides whether to hand a gesture to JS at all before that listener ever runs, based on touch-action alone. Left at its default ("auto"), the compositor can still claim a swipe as its own scroll/bounce gesture pre-JS, which reads as the swipe just not working — a real, confirmed bug, and the reason the touchmove preventDefault fix alone didn't fully resolve it. touch-action:none tells the compositor up front that nothing here does native panning or zooming (true on every page this rule reaches — #stage is always a single fixed viewport, nothing to scroll), so it hands every gesture straight to the JS listeners instead. / touch-action:none; } #slideshow{ position:relative; width:min(82vw, 1200px); height:min(78vh, 940px); / Smooths the box resize when sequence.js toggles .with-caption on entering/leaving one of the gated slides above, so it eases along with the photo's own crossfade instead of jumping instantly. / transition:height .7s ease; } .slide{ position:absolute; inset:0; opacity:0; transform:scale(1.015); filter:brightness(.325) saturate(.55); / "Developing, 50% more" — chosen directly out of a live side-by-side built from two real gallery photos, after trying a plain crossfade, a "focus pull" blur version, the original milder "developing" version, and a scale-only version, so the choice was made on the actual motion, not a description of it. The incoming photo starts dim and noticeably desaturated, then lifts to full exposure and colour as it settles to size — like a print rising in a developing tray, pushed a stop further than the first pass at this idea (brightness .55→.325, saturation .7→.55, scale 1.01→1.015 — "50% more" on each). "Standard" cubic-bezier(.4,0,.2,1) deceleration for opacity; a slower, rounder cubic-bezier(.22,.61,.36,1) for the filter/transform so the exposure lift keeps gently finishing after the fade itself reads as done. / transition:opacity .75s cubic-bezier(.4,0,.2,1), filter 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); pointer-events:none; / Belt-and-suspenders alongside the decode-before-reveal wait in sequence.js: forces its own compositing layer, which is the other half of the fix for mobile Safari's own black-flash-during-opacity- transition bug on absolutely-positioned crossfades like this one. / -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:opacity, transform, filter; } .slide.active{ opacity:1; transform:scale(1); filter:brightness(1) saturate(1); pointer-events:auto; } / Both fill the box exactly at 100%/100% — no flexbox, no intrinsic-size shrink-to-fit involved (a flex-based center-and-shrink approach here hit the classic "flex item won't shrink below its content size" problem twice over, once for and once for ). The letterboxing (never cropping) is handled purely by object-fit on the img, not by layout sizing. / .slide picture, .slide img{ display:block; width:100%; height:100%; } .slide img{ object-fit:contain; object-position:center; user-select:none; -webkit-user-drag:none; } / Adult-content gate. A small number of slides show a film negative first instead of the real photo, with the same caption treatment every other page on the site uses below its photos (.slide-media / .slide-caption / .slide-caption-text, unmodified), not a distinct button or overlay badge. #slideshow.with-caption (below) is toggled onto the shared slideshow box by sequence.js whenever the active slide is one of these, shrinking it exactly the way it already shrinks on verano.html/modibodi.html, so there is real, visible space between the photo and the caption line instead of the caption sitting flush against the bottom edge. Both the negative and the real photo live inside .gate the whole time, stacked via .gate-negative/.gate-real below, and the click just toggles which one shows plus swaps the caption text (see the .gate click handler in sequence.js), it never becomes non-interactive, so the same tap covers the photo back up again. z-index:6 is the same reason as .video-wrap further down: it needs to sit above .stage-zone's own z-index:5, or the tap would just advance the slideshow instead of reaching .gate. And that has to live on .slide itself, not just .gate inside it. .slide's own will-change:opacity above forces it into its own stacking context, which traps a z-index set only on .gate: it would win locally against a sibling, but could never climb high enough to beat .stage-zone's z-index:5 at the #stage level. A real, confirmed bug the first time this was built. / .slide.gated{ z-index:6; } .gate{ position:absolute; inset:0; cursor:url('data:image/svg+xml;utf8,') 10 10, pointer; } / .chevron-hover (sequence.js's wireChevronHover, same mechanism .stage-zone already used) — hides the halo-ring pointer above in favor of the hover-cursor chevron, but only while the mouse is actually over the real photo inside .gate, not the whole letterboxed box the halo-ring cursor covers by default. / .gate .slide-media.chevron-hover{ cursor:none; } / .gate is a plain div with role="button"/tabindex="0" (see the "own Enter/Space handling" comment on its keydown listener in sequence.js), not a real