:root { --bg: #26364f; --text: rgba(255, 255, 255, 0.749); --textBright: #ffffff; --textFaint: rgba(255, 255, 255, 0.42); --divider: rgba(255, 255, 255, 0.14); --placeholder: #0e0e0e; --col: 26rem; --gap: 1.25rem; /* Ultrawide guard so 2-up clips don't become billboards. */ --gridMax: 1600px; --fontSans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* --------------------------------------------------------------- Backdrop A fixed gradient behind the page. Pure CSS — no image request, so it costs nothing to load and never blocks the first paint. --bgTint sits over the flat --bg at --bgTintOpacity, so the tint's stops set the gradient's colours and the opacity sets how deep it reads. All live-editable from devtools: select and change the values. --------------------------------------------------------------- */ --bgTint: linear-gradient(180deg, #26364f, #141e2d); /* Gradient depth ramps with viewport width: a phone gets a flatter wash, a wide display the full falloff. Below --bgTintFrom the opacity sits at --bgTintMin, above --bgTintTo at --bgTintMax, interpolating smoothly in between. Set both to the same number for a constant. */ --bgTintFrom: 700; --bgTintTo: 1600; --bgTintMin: 0.78; --bgTintMax: 0.95; /* The viewport width as a plain number. CSS can't divide by a length, but atan2(100vw, 1px) is an angle whose tangent is exactly that ratio — so tan() hands it back unitless and usable in calc(). */ --vw: tan(atan2(100vw, 1px)); /* 0 at --bgTintFrom, 1 at --bgTintTo. */ --bgTintRamp: clamp( 0, calc((var(--vw) - var(--bgTintFrom)) / (var(--bgTintTo) - var(--bgTintFrom))), 1 ); --bgTintOpacity: calc( var(--bgTintMin) + (var(--bgTintMax) - var(--bgTintMin)) * var(--bgTintRamp) ); } /* --------------------------------------------------------------- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--fontSans); font-size: 1rem; font-weight: 200; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } video { display: block; max-width: 100%; } a { color: var(--textBright); text-decoration: underline; text-underline-offset: 0.2em; } a:hover { text-decoration: none; } :focus-visible { outline: 2px solid var(--textBright); outline-offset: 3px; } .skipLink { position: absolute; left: -9999px; top: 0; } .skipLink:focus { left: 1rem; top: 1rem; z-index: 10; padding: 0.5rem 0.875rem; background: #111; color: var(--textBright); text-decoration: none; } /* --------------------------------------------------------------- Backdrop A fixed element rather than background-attachment: fixed, which iOS Safari renders badly on a scrolling page. Fixed also keeps the gradient locked to the viewport — on body it would stretch across the whole document and flatten out. z-index -1 keeps it above the body colour but behind everything in .page. --------------------------------------------------------------- */ .backdrop { position: fixed; inset: 0; z-index: -1; background: var(--bg); pointer-events: none; } /* The gradient, over the flat --bg. Browsers without CSS trig functions can't evaluate the ramp, so they get the wide-screen value. */ .backdrop::after { content: ""; position: absolute; inset: 0; background: var(--bgTint); opacity: var(--bgTintMax); } @supports (opacity: tan(atan2(1px, 1px))) { .backdrop::after { opacity: var(--bgTintOpacity); } } /* The grain and halftone texture, created and painted by backdrop.js. Same fixed frame and z-index as .backdrop; because the canvas is appended after it in the DOM it paints on top, so lowering --noiseOpacity lets the gradient come through. The flat colour underneath covers the gap between first paint and the canvas being drawn. */ .noise, .gradient { --noiseOpacity: 0.5; position: fixed; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; background: #0b1204; opacity: var(--noiseOpacity); pointer-events: none; } .gradient { mix-blend-mode: lighten; background: linear-gradient(750deg, transparent 5%, #2563e6, #ee2933, transparent 65%); /* opacity: var(--bgTintOpacity); */ opacity: 0.25; } /* --------------------------------------------------------------- Layout .page holds the vertical rhythm. .col is the narrow reading column; .grid breaks out of it to full viewport width. --------------------------------------------------------------- */ .page { padding: clamp(2.5rem, 8vw, 3.75rem) 1.5rem; } .col { max-width: var(--col); margin-inline: auto; text-align: center; } .col p { margin: 0 0 1rem; } .col p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------- Type --------------------------------------------------------------- */ .eyebrow { margin: 0 0 1.75rem; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--textFaint); } h1 { margin: 0 0 1.25rem; font-size: clamp(1.75rem, 6vw, 2.25rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--textBright); } h2 { margin: 0 0 0.875rem; font-size: clamp(1.25rem, 4vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; text-align: center; color: var(--textBright); } .fine { font-size: 0.875rem; color: var(--textFaint); } .links { margin: 1.5rem 0; font-size: 0.9375rem; } .dot { margin: 0 0.4rem; color: var(--textFaint); } /* --------------------------------------------------------------- Projects --------------------------------------------------------------- */ .project { padding-top: 4.5rem; } /* Hairline rule between projects, matching the reference's dividers. */ .project + .project { margin-top: 4.5rem; border-top: 1px solid var(--divider); } .project .col { margin-bottom: 2rem; } /* --------------------------------------------------------------- Video grids — full bleed margin-inline pulls the row out of .page's padding and out of the narrow column, so it spans the viewport regardless of nesting. --------------------------------------------------------------- */ .grid { display: grid; gap: var(--gap); /* width: 100vw; */ position: relative; max-width: var(--gridMax); /* Break out of any ancestor padding, then re-center once the row hits --gridMax so it doesn't become a billboard on ultrawide displays. */ /* margin-left: max(calc(50% - 50vw), calc(50% - (var(--gridMax) / 2))); margin-right: max(calc(50% - 50vw), calc(50% - (var(--gridMax) / 2))); */ margin: 0 auto; } .box-shadow{ box-shadow: 0 0 8px 0 #00000034; } .grid + .grid { margin-top: var(--gap); } .grid video { display: block; width: 100%; height: auto; object-fit: contain; /* Shows while the file loads and if a poster is missing. */ background: var(--placeholder); } .grid img { display: block; max-width: 100%; height: auto; } .grid.is2 { grid-template-columns: repeat(2, 1fr); } .grid.is3 { grid-template-columns: repeat(3, 1fr); } .grid.is4 { grid-template-columns: repeat(4, 1fr); } /* Phone captures — tall clips, sized so a 4-up row stays reasonable. */ .grid.isPortrait { /* width: min(100vw, 88rem); */ max-width: min(100vw, 78rem); /* margin-left: auto; margin-right: auto; */ margin: 0 auto; /* padding-inline: 1.5rem; */ } .grid.isPortrait video { /* aspect-ratio: 9 / 16; */ } .isStack { position: relative; } .isStack > *:not(:first-child) { position: absolute; z-index: -1; &:nth-child(2) { left: -10px; top: -10px; transform: rotateZ(2deg); } &:last-child { right: -10px; top: -5px; transform: rotateZ(-1deg); } } .isStack img { width: 100%; } /* Tall projects frame two wider projects in a balanced four-tile mosaic. */ .portfolio-mosaic { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 0.9fr); grid-template-areas: "boma cea bfg" "boma kiosk bfg"; align-items: start; } .portfolio-mosaic__boma { grid-area: boma; } .portfolio-mosaic__cea { grid-area: cea; } .portfolio-mosaic__kiosk { grid-area: kiosk; } .portfolio-mosaic__bfg { grid-area: bfg; } .portfolio-placeholder { display: grid; width: 100%; aspect-ratio: 1440 / 3325; align-self: center; place-content: center; padding: 1.5rem; border: 1px dashed rgba(255, 255, 255, 0.34); background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), var(--placeholder); color: var(--textFaint); text-align: center; } .portfolio-placeholder span { color: var(--text); font-size: 0.875rem; font-weight: 400; } .portfolio-placeholder small { margin-top: 0.25rem; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; } /* --------------------------------------------------------------- Responsive Collapse wide grids before the clips get too small to read. --------------------------------------------------------------- */ @media (max-width: 900px) { .grid.is3, .grid.is4 { grid-template-columns: repeat(2, 1fr); } .portfolio-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "boma future" "cea cea" "kiosk kiosk"; align-items: start; } } @media (max-width: 600px) { .grid.is2, .grid.is3, .grid.is4 { grid-template-columns: 1fr; } .grid.isPortrait { grid-template-columns: repeat(2, 1fr); } .project { padding-top: 3rem; } .project + .project { margin-top: 3rem; } } /* Reduced motion: main.js holds the poster frame and starts the clip on click, so the work stays reachable without anything moving on its own. Belt and braces — if a `controls` attribute ever slips into the markup, these keep the browser chrome from rendering anyway. */ .grid video::-webkit-media-controls, .grid video::-webkit-media-controls-enclosure, .grid video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; } .project-items video, .project-items img { display: block; width: 100%; height: auto; } /* --------------------------------------------------------------- Lightbox --------------------------------------------------------------- */ .lightbox-trigger { /* cursor: zoom-in; */ } .lightbox-trigger[hidden] { display: none !important; } .lightbox-trigger:focus-visible { outline: 3px solid var(--textBright); outline-offset: 4px; } .lightbox-trigger-frame { position: relative; display: block; width: 100%; cursor: pointer; } .lightbox-trigger-frame::before, .lightbox-trigger-frame::after { position: absolute; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .lightbox-trigger-frame::before { content: ""; inset: 0; background: rgba(5, 8, 13, 0.58); } .lightbox-trigger-frame::after { content: "+"; top: 50%; left: 50%; display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 50%; color: #fff; font-size: 2rem; font-weight: 200; line-height: 1; transform: translate(-50%, -50%) scale(0.82); } .lightbox-trigger-frame:hover::before, .lightbox-trigger-frame:hover::after, .lightbox-trigger-frame:focus-within::before, .lightbox-trigger-frame:focus-within::after { opacity: 1; } .lightbox-trigger-frame:hover::after, .lightbox-trigger-frame:focus-within::after { transform: translate(-50%, -50%) scale(1); } @media (prefers-reduced-motion: reduce) { .lightbox-trigger-frame::before, .lightbox-trigger-frame::after { transition: none; } .lightbox-trigger-frame::after { transform: translate(-50%, -50%) scale(1); } } body.lightbox-open { overflow: hidden; } .lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(3.75rem, 7vw, 6rem) clamp(3.75rem, 8vw, 7rem); } .lightbox__backdrop { position: absolute; inset: 0; background: rgba(5, 8, 13, 0.94); backdrop-filter: blur(8px); } .lightbox__dialog { position: relative; z-index: 1; display: grid; width: 100%; min-width: 0; height: 100%; min-height: 0; overflow: hidden; place-items: center; pointer-events: none; } /* The item is fitted to the stage, not scrolled inside it. Nothing overflows, so on a touch device the browser's own pinch-zoom is the zoom — the page never traps the gesture in an inner scroller. */ .lightbox__stage { display: grid; /* An explicit track, because the item's max-height: 100% resolves against the grid area — and an auto row sizes itself from that same item, so the percentage would be circular and never constrain anything. minmax(0, 1fr) makes the track definite and stops min-content from expanding it. */ grid-template: minmax(0, 1fr) / minmax(0, 1fr); width: 100%; min-width: 0; height: 100%; min-height: 0; overflow: hidden; place-items: center; overscroll-behavior: contain; pointer-events: auto; } .lightbox__stage img, .lightbox__stage video { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: 0; object-fit: contain; box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.45); } /* Pointer devices have no pinch, so they get click-to-zoom instead. main.js adds .is-zoomable only when the image actually has more detail to show. */ .lightbox__stage.is-zoomable img { cursor: zoom-in; } /* Zoomed: natural size, and the stage becomes the scroller. Aligning to start matters — a centred grid item that overflows can't be scrolled back to its top-left edge. */ .lightbox__stage.is-zoomed { overflow: auto; place-items: start; } .lightbox__stage.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; } .lightbox__close, .lightbox__nav { position: fixed; z-index: 2; display: grid; width: 3rem; height: 3rem; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(18, 25, 36, 0.85); color: #fff; font: inherit; line-height: 1; cursor: pointer; pointer-events: auto; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, 0.18); } .lightbox__close { top: 1rem; right: 1rem; font-size: 1.75rem; border: none; background: none; } .lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 2.25rem; } .lightbox__prev { left: 1rem; } .lightbox__next { right: 1rem; } .lightbox__caption { position: fixed; right: 4.75rem; bottom: 1rem; left: 4.75rem; z-index: 2; margin: 0; overflow: hidden; color: rgba(255, 255, 255, 0.78); font-size: 0.8125rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } @media (max-width: 600px) { .lightbox { padding: 4.5rem 0.75rem 4rem; } .lightbox__close, .lightbox__nav { width: 2.75rem; height: 2.75rem; } .lightbox__prev { left: 0.5rem; } .lightbox__next { right: 0.5rem; } } /* --------------------------------------------------------------- Mobile carousel Below the breakpoint below, main.js folds every .grid in a project into the first one and lays the media out as a swipeable, snapping row. The carousel lives inside that .grid, so the lazy-load and lightbox scripts — which key off `.grid video` — keep matching. Keep this breakpoint in sync with BREAKPOINT in main.js. --------------------------------------------------------------- */ @media (max-width: 700px) { .grid.is-carousel { display: block; max-width: none; margin: 0; } .carousel__track { position: relative; display: flex; /* Tighter than the desktop grid gap: what's left over after the slide is centred has to cover this gap before any of the neighbour shows. */ gap: 0.875rem; /* Full bleed past .page's padding so neighbours can peek in. */ margin-inline: -1.5rem; /* Half a track of padding lets any slide reach the centre, whatever its width. Mandatory snapping means the dead space is never a rest stop. */ padding-inline: 50%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carousel__track::-webkit-scrollbar { display: none; } /* Each slide hugs its clip: 76vw for a wide capture, narrower for a phone one that hits the 62vh height cap first. Sizing the slide rather than centring the clip in a fixed box is what keeps the gap — and so the neighbour's peek — consistent across mixed orientations. The 76vw leaves enough margin either side for that peek to actually clear the gap. */ .carousel__slide { display: flex; flex: 0 0 min(76vw, calc(62vh * var(--ratio, 1.5))); align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; } .carousel__slide > * { width: 100%; } .carousel__slide img, .carousel__slide video { width: 100%; height: auto; } /* The wrapper generates no box of its own — it exists so teardown has a single node to remove. The arrows position against .grid, which is already relative, and .is-carousel's height is the track's height, so top: 50% centres them on the media. */ .carousel__nav { display: contents; } /* Same circular language as the lightbox's prev/next. */ .carousel__arrow { position: absolute; top: 50%; z-index: 2; display: grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(18, 25, 36, 0.85); color: #fff; font: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; transform: translateY(-50%); opacity: 0.85; transition: all .2s ease; } .carousel__prev { left: 0.5rem; } .carousel__next { right: 0.5rem; } .carousel__arrow:hover { background: rgba(255, 255, 255, 0.18); } /* Hidden rather than removed at the ends of the run: the pair keeps its place instead of shifting under the reader's thumb. */ .carousel__arrow:disabled { visibility: hidden; opacity: 0; } }