/* ============================================
DIRECTOR PORTFOLIO — global styles
Design tokens. Change colors/fonts here only.
============================================ */
/* Seamless cross-document page transitions (browsers that support it get a
smooth crossfade; others just navigate normally — nothing breaks). */
@view-transition {
navigation: auto;
}
/* Directional (smart) page transition: forward = going deeper (new slides in
from the right, old exits left); back = returning (new from the left, old
exits right). JS (js/transitions.js) sets data-direction on from depth. */
@keyframes vt-out-left { to { transform: translateX(-100%); } }
@keyframes vt-in-right { from { transform: translateX(100%); } }
@keyframes vt-out-right { to { transform: translateX(100%); } }
@keyframes vt-in-left { from { transform: translateX(-100%); } }
::view-transition-old(root) {
animation: 0.5s cubic-bezier(0.22, 1, 0.36, 1) both vt-out-left;
}
::view-transition-new(root) {
animation: 0.5s cubic-bezier(0.22, 1, 0.36, 1) both vt-in-right;
}
:root[data-direction="back"]::view-transition-old(root) { animation-name: vt-out-right; }
:root[data-direction="back"]::view-transition-new(root) { animation-name: vt-in-left; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
:root {
/* Colors: black + white base, red is a spot accent only */
--bg: #0a0a0a;
--bg-elevated: #141414;
--text: #f0ede8;
--text-muted: #6f6c68;
--accent: #e5322d;
--line: rgba(240, 237, 232, 0.1);
/* Typography: pixel display + retro mono (ref: screenshot 2) */
--font-body: "Inter", "Segoe UI", system-ui, sans-serif;
--font-display: "Pixelify Sans", "Space Mono", monospace;
--font-mono: "Space Mono", "Courier New", monospace;
/* Spacing & layout */
--container: 1280px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--section-gap: clamp(4rem, 10vh, 8rem);
--header-h: 3.4rem;
--ticker-h: 2.4rem;
/* Motion */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--speed: 0.45s;
}
/* ---------- Reset ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
min-height: 100dvh; /* dvh = accounts for mobile browser toolbars (no overflow/scroll) */
display: flex;
flex-direction: column;
}
/* Film grain: subtle noise over everything, like a cine print (~10%) */
body::before {
content: "";
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
z-index: 9999;
pointer-events: none;
opacity: 0.1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation: grain 0.5s steps(3) infinite;
}
@keyframes grain {
0% { transform: translate(0, 0); }
33% { transform: translate(-3%, 2%); }
66% { transform: translate(2%, -3%); }
100% { transform: translate(-2%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; }
}
img,
video,
iframe {
display: block;
max-width: 100%;
}
img { height: auto; }
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
}
/* ---------- Typography ---------- */
/* Big display headings — retro pixel font */
h1, h2 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.05;
letter-spacing: 0.005em;
}
/* Smaller headings — retro mono, keeps things readable */
h3 {
font-family: var(--font-mono);
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.04em;
}
h1 { font-size: clamp(2.4rem, 6.5vw, 5rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1rem, 2.2vw, 1.2rem); }
.muted { color: var(--text-muted); }
/* Small technical labels — retro mono */
.eyebrow {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
/* Explicit, equal gap to the title below — same on every eyebrow regardless of
the title's size (so it no longer depends on font-size-driven line-height). */
margin-bottom: 0.5rem;
}
/* ---------- Container & sections ---------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--section-gap);
}
main {
flex: 1;
}
/* ---------- Header: name centered, menu right ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg);
}
.nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: var(--header-h);
padding-inline: 1.2rem;
}
.nav-logo {
grid-column: 2;
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(0.9rem, 0.55rem + 1.2vw, 1.45rem);
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.nav-links {
grid-column: 3;
justify-self: end;
display: flex;
gap: 1.4rem;
list-style: none;
}
.nav-links a {
font-family: var(--font-body);
font-size: clamp(0.82rem, 0.55rem + 1vw, 1.2rem);
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
transition: color var(--speed) var(--ease);
}
.nav-links a:hover {
color: var(--accent);
}
.nav-links a[aria-current="page"] {
font-style: italic;
}
/* Mobile header: name left, tabs right — no dropdown menu */
@media (max-width: 720px) {
.nav {
grid-template-columns: auto 1fr;
padding-inline: 1rem;
}
/* Mobile: name to the left, tabs to the right (font sizes are fluid) */
.nav-logo {
grid-column: 1;
justify-self: start;
}
.nav-links {
grid-column: 2;
gap: 0.8rem;
}
}
/* ---------- Sub-page header: Back (left) + name (right) ---------- */
.page-nav {
display: flex;
align-items: center;
justify-content: space-between;
/* BACK sits on the RIGHT, the name on the left — easier to reach with the right
thumb on mobile. (DOM order stays back-then-name; row-reverse flips it.) */
flex-direction: row-reverse;
height: var(--header-h);
padding-inline: 1.2rem;
}
.page-back {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family: var(--font-mono);
font-size: clamp(0.72rem, 0.55rem + 0.4vw, 0.88rem);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
transition: color var(--speed) var(--ease);
}
.page-back:hover,
.page-back:active { color: var(--accent); }
.page-back .ico-return {
width: 1.5em;
height: 1.5em;
flex: none;
}
.page-name {
font-family: var(--font-mono);
font-weight: 700;
font-size: clamp(0.72rem, 0.55rem + 0.4vw, 0.88rem);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
white-space: nowrap;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-block;
font-family: var(--font-mono);
padding: 0.9rem 2.2rem;
border: 1px solid var(--text);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.btn:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ============================================
HOME: horizontal "film strip" of works
============================================ */
/* Home is a fixed full-screen film strip — never let the PAGE scroll vertically
(on phones you could otherwise drag the whole section up/down). Scoped to
body.home so content pages (about/project) still scroll normally. */
body.home {
height: 100vh;
height: 100dvh;
overflow: hidden;
overscroll-behavior: none;
}
.strip-section {
height: 100vh;
height: 100dvh; /* dvh = fills the visible area under mobile browser toolbars, no scroll/gap */
overflow: hidden;
}
.strip {
display: flex;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
/* leave room for the sticky name card when a card scrolls to the start */
scroll-padding-left: 3rem;
}
.strip::-webkit-scrollbar { display: none; }
.strip-item {
position: relative;
flex: none;
display: flex;
height: 100%;
border-right: 1px solid var(--line);
}
.strip-item:first-child { border-left: 1px solid var(--line); }
/* Vertical label: title at the bottom, work type at the top */
.strip-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
/* title (bottom) clears the ticker; small padding at the top.
values are swapped because the label is rotated 180deg */
padding: calc(var(--ticker-h) + 0.7rem) 1.05rem 1.2rem;
white-space: nowrap;
font-family: var(--font-mono);
font-size: clamp(0.66rem, 0.5rem + 0.5vw, 0.9rem);
font-weight: 400;
color: var(--text-muted);
transition: color var(--speed) var(--ease);
}
.strip-label:hover { color: var(--text); }
.strip-item.is-open .strip-label { color: var(--text); }
/* First card = the director's name (also the link to the About page).
Same vertical label style as the works, bold. */
.strip-name {
writing-mode: vertical-rl;
transform: rotate(180deg);
display: flex;
align-items: center;
justify-content: flex-start;
padding: calc(var(--ticker-h) + 0.7rem) 1.05rem 1.2rem;
white-space: nowrap;
font-family: var(--font-mono);
font-size: clamp(0.66rem, 0.5rem + 0.5vw, 0.9rem);
margin: 0;
}
/* Name card stays pinned to the left while the rest of the strip scrolls
under it (opaque background + higher layer). */
.strip-item--name {
position: sticky;
left: 0;
z-index: 5;
background: var(--bg);
}
.strip-name {
font-weight: 700;
color: var(--text);
transition: color var(--speed) var(--ease);
}
.strip-name:hover { color: var(--accent); }
.strip-type {
font-family: var(--font-mono);
font-size: clamp(0.62rem, 0.55rem + 0.2vw, 0.72rem);
letter-spacing: 0.14em;
text-transform: uppercase;
transition: opacity var(--speed) var(--ease);
}
/* Work type is visible only on the open card */
.strip-item:not(.is-open) .strip-type { opacity: 0; }
/* Media card — square corners, red strip on the right edge */
.strip-media {
width: 0;
min-width: 0;
overflow: visible;
display: flex;
align-items: center;
transition: width 0.7s var(--ease);
}
.strip-item.is-open .strip-media {
width: clamp(18rem, 12rem + 31vw, 42rem);
}
/* Vertical-video works (videoOrientation:"vertical"): keep the open card close to
a 9:16 shape on wide screens so the portrait poster/clip fills it upright,
instead of being cropped top/bottom to fit a wide card (looked "landscape" on
desktop). Mobile keeps its own narrow width via the @media rule further down. */
.strip-item--vertical.is-open .strip-media {
width: min(calc(100dvh * 9 / 16), 30rem);
}
.strip-media .card {
position: relative;
width: 100%;
min-width: 0;
height: 100%;
overflow: visible;
background: var(--bg-elevated);
}
/* Red edge line on the right — shimmers through red shades (no glow) */
.strip-item.is-open .card::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 3px;
pointer-events: none;
background: linear-gradient(180deg, #ff6b5e, #e5322d, #7d0f0c, #e5322d, #ff6b5e);
background-size: 100% 300%;
animation: edge-shimmer 3.5s ease-in-out infinite alternate;
}
@keyframes edge-shimmer {
0% { background-position: 0% 0%; }
100% { background-position: 0% 100%; }
}
.strip-media .card img,
.strip-media .card iframe,
.strip-media .card video {
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
/* Animated preview video sits ON TOP of the poster while the card is open,
fading in/out so the swap to the static poster isn't a hard jump */
.strip-media .card video.card-preview {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.45s var(--ease);
}
.strip-media .card video.card-preview.is-visible {
opacity: 1;
}
/* On video cards the poster is hidden — the clip fades against the card's dark
background rather than blending into the still image. */
.strip-media .card.has-video img {
opacity: 0;
}
/* The film strip is fully fluid (clamp sizes + fluid card width) — it scales
smoothly from mobile to desktop with no breakpoint jump. */
/* ---------- Home bottom labels (decorative, non-functional, no divider line) ---------- */
.home-ticker {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--ticker-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-inline: 1.2rem;
font-family: var(--font-mono);
font-size: clamp(0.6rem, 0.48rem + 0.35vw, 0.72rem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
user-select: none;
background: transparent;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.home-ticker .note {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Red "PROJECTS" tag with a blinking square — a nod to a camera REC light */
.home-ticker .rec {
display: flex;
align-items: center;
gap: 0.55rem;
white-space: nowrap;
font-size: clamp(0.6rem, 0.42rem + 0.55vw, 0.82rem);
color: var(--accent);
}
.home-ticker .rec::before {
content: "";
width: 0.6rem;
height: 0.6rem;
background: var(--accent);
animation: rec-blink 1.6s steps(1, end) infinite;
}
/* Ticker sizes are fluid (clamp) and stay below the header at every width. */
/* Mobile: keep the open card narrow enough that the sticky name (left) and the
next openable card (right) are both visible — name | open | next */
@media (max-width: 720px) {
.strip-item.is-open .strip-media {
width: calc(100vw - 9rem);
}
}
@keyframes rec-blink {
0% { opacity: 1; }
55% { opacity: 0; }
100% { opacity: 1; }
}
/* ---------- Portfolio grid (project pages) ---------- */
.works-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
gap: 2rem;
}
.work-card {
position: relative;
overflow: hidden;
background: var(--bg-elevated);
}
.work-card .thumb {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease), opacity 0.8s var(--ease);
}
.work-card:hover .thumb {
transform: scale(1.04);
opacity: 0.75;
}
.work-card .meta {
padding: 1.1rem 0.2rem;
}
.work-card .meta h3 { margin-bottom: 0.2rem; }
/* ---------- Work / project page (unified content template) ---------- */
.work-hero {
padding-block: clamp(2rem, 7vh, 5rem) clamp(1.5rem, 4vh, 3rem);
}
.work-title {
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(2.6rem, 9vw, 6.5rem);
line-height: 0.92;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.work-sub {
margin-top: 0.7rem;
font-family: var(--font-mono);
font-weight: 700;
font-size: clamp(0.9rem, 2.2vw, 1.3rem);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.work-meta {
margin-top: clamp(1.5rem, 4vh, 2.5rem);
display: grid;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.work-meta .role { color: var(--accent); }
/* Separate the credits block (role + note) from the date/location block */
.work-meta [data-field="date"] { margin-top: 0.8rem; }
/* Holds one or more 16:9 video frames (a work may have several videos) */
.work-video {
display: grid;
gap: clamp(0.75rem, 2vw, 1.25rem);
}
.work-video-frame {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
background: var(--bg-elevated);
overflow: hidden;
cursor: pointer;
}
.work-video-frame iframe,
.work-video-frame video,
.work-video-poster {
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
display: block;
}
/* Portrait videos (vertical ads / reels): 9:16 frames, width-constrained, wrap */
.work-video.is-vertical {
display: flex;
flex-wrap: wrap;
}
.work-video.is-vertical .work-video-frame {
aspect-ratio: 9 / 16;
width: clamp(9rem, 40vw, 18rem);
}
.work-video-play {
position: absolute;
inset: 0;
margin: auto;
width: clamp(3.5rem, 8vw, 5rem);
height: clamp(3.5rem, 8vw, 5rem);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
background: rgba(10, 10, 10, 0.45);
border: 1px solid var(--text);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
cursor: pointer;
transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
border-color var(--speed) var(--ease);
}
.work-video-play:hover {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* Container: holds one or more stacked galleries (photo strip and/or gif reel).
The gap BETWEEN galleries and the gap from the video to the first gallery use
the SAME value so the vertical rhythm is even. */
#work-gallery {
display: grid;
gap: clamp(0.75rem, 2vw, 1.5rem);
}
#work-gallery:not(:empty) {
margin-top: clamp(0.75rem, 2vw, 1.5rem);
margin-bottom: clamp(3rem, 10vh, 7rem);
}
/* Infinite auto-scrolling, draggable strip of stills / GIFs (JS builds .work-track) */
.work-gallery {
overflow: hidden;
cursor: grab;
touch-action: pan-y;
}
.work-gallery.is-dragging { cursor: grabbing; }
.work-track {
display: flex;
gap: clamp(0.6rem, 1.5vw, 1.1rem);
width: max-content;
will-change: transform;
}
.work-track.is-snapping {
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-gallery img,
.work-gallery video {
flex: none;
width: min(82vw, 34rem);
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
background: var(--bg-elevated);
user-select: none;
-webkit-user-drag: none;
}
/* Photo strip (non-reel): FIXED HEIGHT, width follows each photo's own aspect —
landscape photos are wide, PORTRAIT photos show full-height (not cropped).
Mixed orientations sit in one strip. */
.work-gallery:not(.is-reel) img,
.work-gallery:not(.is-reel) video {
width: auto;
max-width: none;
aspect-ratio: auto;
height: clamp(11rem, 46vw, 19rem);
}
/* GIF/clip reel: the centred window is highlighted & plays; the rest dim.
Items may be GIFs (![]()
) or converted mp4 clips (