/* --------------------------------------------------------------------------- Tokens + the scaling model (1rem == 10 artboard px, see README). --------------------------------------------------------------------------- */ :root { --c-bg: #08090b; --c-neon: #3a9dff; /* primary text: electric blue */ --c-neon-rgb: 58, 157, 255; --c-dim: rgba(58, 157, 255, .64); /* labels, secondary text */ --c-hot: #a24dff; /* accent: purple (play button, prompts, hover) */ --c-hot-rgb: 162, 77, 255; --c-line: rgba(58, 157, 255, .18); --glow: 0 0 .5rem rgba(var(--c-neon-rgb), .5), 0 0 2.2rem rgba(var(--c-neon-rgb), .2); --glow-hot: 0 0 .6rem rgba(var(--c-hot-rgb), .6), 0 0 2.4rem rgba(var(--c-hot-rgb), .25); /* Optical depth for display type: three planes that stay attached to the glyph. 1) a sharp navy offset (the "depth" plane), 2) a faint purple separation just past it, 3) a controlled blue bloom. --dx/--dy are set by JS from the pointer (a few px at most) so the planes parallax against the face. */ --dx: 0px; --dy: 0px; --plane: #0b2f63; --plane-hot: #2a1150; --depth: calc(.03em + var(--dx)) calc(.03em + var(--dy)) 0 var(--plane), calc(.055em + var(--dx) * 1.5) calc(.055em + var(--dy) * 1.5) 0 rgba(var(--c-hot-rgb), .2), 0 0 .5rem rgba(var(--c-neon-rgb), .3), 0 0 2.2rem rgba(var(--c-neon-rgb), .14); --depth-hot: calc(.03em + var(--dx)) calc(.03em + var(--dy)) 0 var(--plane-hot), calc(.055em + var(--dx) * 1.5) calc(.055em + var(--dy) * 1.5) 0 rgba(var(--c-neon-rgb), .18), 0 0 .5rem rgba(var(--c-hot-rgb), .35), 0 0 2.2rem rgba(var(--c-hot-rgb), .16); --depth-glow: var(--depth); /* secondary titles: same planes, bloom ~30% quieter so the frames win */ --depth-quiet: calc(.03em + var(--dx)) calc(.03em + var(--dy)) 0 var(--plane), calc(.055em + var(--dx) * 1.5) calc(.055em + var(--dy) * 1.5) 0 rgba(var(--c-hot-rgb), .16), 0 0 .4rem rgba(var(--c-neon-rgb), .2), 0 0 1.8rem rgba(var(--c-neon-rgb), .09); --f-display: 'VT323', 'Menlo', monospace; --f-mono: 'Space Mono', 'Menlo', monospace; --u: .1rem; --ease-out: cubic-bezier(.19, 1, .22, 1); --z-menu: 99999; --z-popup: 100000; --z-preloader: 100005; } html { font-size: calc(var(--vw, 100vw) / 120); } @media (max-width: 1199px) { html { font-size: calc(var(--vw, 100vw) / 96); } :root { --u: 1px; } } @media (max-width: 959px) { html { font-size: calc(var(--vw, 100vw) / 64); } } @media (max-width: 639px) { html { font-size: calc(var(--vw, 100vw) / 48); } } @media (max-width: 479px) { html { font-size: calc(var(--vw, 100vw) / 32); } } @font-face { font-family: 'VT323'; src: url('/fonts/VT323-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Mono'; src: url('/fonts/SpaceMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Mono'; src: url('/fonts/SpaceMono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--c-bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--c-bg); color: var(--c-neon); font-family: var(--f-mono); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-locked { overflow: hidden; } a { color: var(--c-neon); text-decoration: none; } img { display: block; } h1, h2, h3, p, dl, dd, dt, figure { margin: 0; } button { font: inherit; } i { font-style: normal; color: var(--c-dim); } ::selection { background: var(--c-hot); color: var(--c-bg); } /* whole-page fade: in on load, out before navigating (desktop only) */ @media (min-width: 980px) { .site { opacity: 0; transition: opacity .8s ease-in-out; } .site.is-visible { opacity: 1; } .site.is-leaving { opacity: 0; transition-duration: .4s; } } .no-js .site { opacity: 1; } /* scroll-in reveal */ .reveal { opacity: 0; transform: translateY(1.2rem); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-in { opacity: 1; transform: none; } .no-js .reveal { opacity: 1; transform: none; } /* small mono UI text */ .ui, .nl, .topbar__menu, .ftr__copy, .ftr__credit, .row__meta, .row__go, .tagline { font: 400 1.2rem/1.55 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } /* nav link: ">" prompt slides in on hover, stays on the active page */ .nl { position: relative; display: inline-block; white-space: nowrap; color: var(--c-neon); padding-left: 1.2em; transition: color .2s; } .nl::before { content: ''; position: absolute; top: -.4rem; bottom: -.4rem; left: -.6rem; right: -.6rem; } .nl__p { position: absolute; left: 0; top: 0; color: var(--c-hot); text-shadow: var(--glow-hot); opacity: 0; transform: translateX(-.4em); transition: opacity .15s, transform .2s var(--ease-out); } .nl:hover .nl__p, .nl.is-active .nl__p { opacity: 1; transform: none; } .nl:hover { color: #fff; } .nl.is-active { color: var(--c-neon); } .cursor { display: inline-block; margin-left: .2em; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* section heading: > LIGHTING [4] extra */ .sh { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; padding: 3.2rem 2rem 1.2rem; font: 400 3.2rem/1 var(--f-display); text-transform: uppercase; color: var(--c-neon); text-shadow: var(--depth-glow); } .sh__prompt { color: var(--c-hot); text-shadow: var(--depth-hot), var(--glow-hot); } .sh__count { color: var(--c-dim); text-shadow: none; font-size: .7em; } .sh__extra { margin-left: auto; color: var(--c-dim); text-shadow: none; font: 400 1.1rem/1.5 var(--f-mono); letter-spacing: .06em; } .sh--minor { font-size: 2.4rem; padding-top: 2.4rem; text-shadow: var(--depth-quiet); } @media (max-width: 479px) { .sh { padding: 2.4rem 1rem .8rem; font-size: 2.8rem; } .sh__extra { width: 100%; margin-left: 0; } } /* ---- top bar (all pages) ---- */ .topbar { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; height: 5.4rem; padding: 0 2rem; } .topbar__name { font: 400 3rem/1 var(--f-display); text-transform: uppercase; color: var(--c-neon); text-shadow: var(--depth-glow); white-space: nowrap; } .topbar__nav { display: flex; gap: 3.6rem; } .topbar__menu { display: none; color: var(--c-neon); white-space: nowrap; } .topbar--home { position: fixed; left: 0; right: 0; top: 0; mix-blend-mode: normal; transition: background .3s; } .topbar--home .topbar__name { opacity: 0; transition: opacity .25s; pointer-events: none; } .topbar--home.is-scrolled { background: linear-gradient(var(--c-bg) 72%, rgba(7, 8, 10, .85) 88%, transparent); } .topbar--home.is-scrolled .topbar__name { opacity: 1; pointer-events: auto; } @media (max-width: 1199px) { .topbar { padding: 0 1rem; } } @media (max-width: 959px) { .topbar__nav { display: none; } .topbar__menu { display: block; } } @media (max-width: 479px) { .topbar { height: 6.4rem; } .topbar__name { font-size: 3.2rem; } } /* ---- reel hero (home) ---- */ .reel { position: relative; height: 100vh; height: 100svh; min-height: 52rem; overflow: hidden; background: #000; } .reel__video, .reel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .reel__poster { background: 50% / cover no-repeat; opacity: 0; } /* only shown via .reel--still when autoplay is refused */ .reel--still .reel__video { display: none; } .reel--still .reel__poster { opacity: 1; } /* Darkness lives here rather than in the video's own filter. grayscale and brightness are both components of the single `filter` property, so one transition has to drive both and they can never run at different speeds. Doing the dimming with a separate layer is what lets the picture brighten quickly while the colour returns slowly. */ .reel__dim { position: absolute; inset: 0; background: #04050a; opacity: 0; pointer-events: none; transition: opacity var(--hero-lift, 2.2s) ease-in-out; } .reel__shade { transition: opacity .7s ease-in-out; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 10, .55) 0%, rgba(7, 8, 10, .05) 35%, rgba(7, 8, 10, .1) 60%, rgba(7, 8, 10, .96) 100%); } .reel__scan { transition: opacity .7s ease-in-out; position: absolute; inset: 0; opacity: .12; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; } .reel__hud { position: absolute; color: var(--c-neon); font: 400 1.2rem/1.55 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 0 .4rem rgba(0, 0, 0, .8); } .reel__hud--tl { left: 2rem; top: 7.4rem; display: flex; gap: 2rem; } .reel__hud--tr { right: 2rem; top: 7.4rem; color: rgba(var(--c-neon-rgb), .78); } .reel__hud--br { right: 2rem; bottom: 3rem; } .rec { color: var(--c-hot); text-shadow: var(--glow-hot); } .rec i, .rec__dot { display: inline-block; width: .9em; height: .9em; border-radius: 50%; background: var(--c-hot); box-shadow: var(--glow-hot); margin-right: .6em; vertical-align: -.1em; animation: blink 1.4s steps(1) infinite; } .tc { font-variant-numeric: tabular-nums; } .scrollcue::after { content: ''; display: block; width: 1px; height: 4rem; margin: .8rem auto 0; background: linear-gradient(var(--c-neon), transparent); animation: drop 1.8s ease-in-out infinite; } @keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } .reel__title { position: absolute; left: 2rem; right: 2rem; bottom: 6rem; } .wordmark { font: 400 29rem/.82 var(--f-display); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; color: var(--c-neon); text-shadow: var(--depth), var(--glow), 0 .4rem 3rem rgba(0, 0, 0, .8); } .wordmark a, .wordmark span { color: inherit; } .tagline { margin-top: 1.4rem; color: var(--c-neon); text-shadow: 0 0 .4rem rgba(0, 0, 0, .8); } .tagline .cursor { color: var(--c-hot); } @media (max-width: 959px) { .reel__hud--tr { display: none; } } @media (max-width: 479px) { .reel { min-height: 44rem; } .reel__hud--tl { left: 1rem; top: 7.6rem; gap: 1.2rem; font-size: 1.1rem; } .reel__hud--br { right: 1rem; bottom: 2rem; } .reel__title { left: 1rem; right: 1rem; bottom: 4.6rem; } .wordmark { font-size: 8.6rem; white-space: normal; line-height: .85; } .tagline { margin-top: 1rem; font-size: 1.05rem; } } @media (max-width: 639px) { .reel__hud--br { display: none; } } /* ---- work index: three editorial row shapes (A frame-left, B frame-right, C wide) ---- */ .index { border-top: 1px solid var(--c-line); margin: 0 2rem; } .row { border-bottom: 1px solid var(--c-line); } .row__link { display: grid; grid-template-columns: 6rem minmax(0, 46rem) minmax(0, 1fr); grid-template-areas: "num media body"; gap: 3rem; align-items: start; padding: 2.4rem 0; color: var(--c-neon); position: relative; } .row__num { grid-area: num; font: 400 3.2rem/1 var(--f-display); color: var(--c-dim); padding-top: .4rem; } .row__media, .card__media { grid-area: media; display: block; position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; border-radius: .6rem; background: #000; box-shadow: inset 0 0 0 1px var(--c-line); } .row__body { grid-area: body; display: grid; grid-template-columns: 1fr; align-content: start; gap: .8rem; min-width: 0; } /* B: title first, frame on the right, num stays left */ .row--b .row__link { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 46rem); grid-template-areas: "num body media"; } /* C: wide frame, title beneath on the left, tech on the right */ .row--c .row__link { grid-template-columns: 6rem minmax(0, 1fr); grid-template-areas: "num media" "num body"; row-gap: 1.6rem; } .row--c .row__body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title tech" "meta tech" "go tech"; column-gap: 3rem; align-items: start; } .row--c .row__title { grid-area: title; } .row--c .row__meta { grid-area: meta; } .row--c .row__go { grid-area: go; } .row--c .row__tech { grid-area: tech; text-align: right; } .card__img, .card__preview { position: absolute; inset: 0; width: 100%; height: 100%; } .card__img { background: 50% / cover no-repeat; z-index: 1; } .card__preview { object-fit: cover; opacity: 0; z-index: 2; transition: opacity .25s linear; } /* the clip only becomes visible once it is really decoding frames (JS adds is-ready on `playing`) */ .card__preview.is-ready { opacity: 1; } .row__tc { position: absolute; left: 1rem; bottom: .8rem; z-index: 3; font: 400 1.1rem/1 var(--f-mono); color: var(--c-neon); background: rgba(7, 8, 10, .7); padding: .5rem .7rem; border-radius: .3rem; letter-spacing: .06em; } .row__title { font: 400 4.6rem/.9 var(--f-display); text-transform: uppercase; color: var(--c-neon); text-shadow: var(--depth-quiet); transition: color .2s, text-shadow .2s; } .row--c .row__title { font-size: 5.6rem; } .row__meta { color: var(--c-dim); } .row__tech { color: var(--c-dim); font: 400 1.1rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .row__go { margin-top: 1.2rem; color: var(--c-dim); transition: color .2s; } .row__go i { color: inherit; } .slate { display: grid; column-gap: 2rem; row-gap: .4rem; font: 400 1.1rem/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } .slate div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--c-line); padding-bottom: .3rem; } .slate dt { color: var(--c-dim); } .slate dd { color: var(--c-neon); font-variant-numeric: tabular-nums; } @media (min-width: 960px) { .row:hover .row__media { box-shadow: inset 0 0 0 1px var(--accent, var(--c-hot)), 0 0 2.6rem color-mix(in srgb, var(--accent, var(--c-hot)) 28%, transparent); } .row:hover .row__title { color: #cfe6ff; } .row:hover .row__go { color: var(--c-neon); } } @media (max-width: 1199px) { .index { margin: 0 1rem; } .row__link, .row--b .row__link { grid-template-columns: 5rem minmax(0, 38rem) minmax(0, 1fr); gap: 2rem; } .row--b .row__link { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 38rem); } .row--c .row__link { grid-template-columns: 5rem minmax(0, 1fr); } } @media (max-width: 959px) { .row__link, .row--b .row__link, .row--c .row__link { grid-template-columns: 4rem minmax(0, 1fr); grid-template-areas: "num media" "num body"; gap: 1.2rem 1.6rem; } .row--c .row__body { grid-template-columns: 1fr; grid-template-areas: "title" "meta" "tech" "go"; } .row--c .row__tech { text-align: left; } .row__title, .row--c .row__title { font-size: 3.6rem; } } @media (max-width: 479px) { .row__link, .row--b .row__link, .row--c .row__link { grid-template-columns: 1fr; grid-template-areas: "media" "body"; gap: 1.2rem; padding: 1.8rem 0; } .row__num { display: none; } .row__body { gap: .6rem; } .row__title, .row--c .row__title { font-size: 3rem; } .row__go { margin-top: .6rem; } } /* ---- timecoded filmstrip ---- */ .strip { padding-bottom: 2rem; } .strip__scroller { overflow-x: auto; overflow-y: hidden; padding: 0 2rem 1.6rem; scrollbar-width: thin; scrollbar-color: var(--c-dim) transparent; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .strip__track { display: flex; gap: 1.2rem; width: max-content; padding: 1rem 0 0; } .frame { width: 36rem; flex: 0 0 auto; scroll-snap-align: start; } .frame__img { display: block; width: 100%; padding-bottom: 56.25%; background: 50% / cover no-repeat #000; border-radius: .4rem; box-shadow: inset 0 0 0 1px var(--c-line); cursor: pointer; transition: box-shadow .25s, transform .3s var(--ease-out); } .frame__img:hover { box-shadow: inset 0 0 0 1px var(--accent, var(--c-hot)); transform: translateY(-.3rem); } .frame__tc { margin-top: .7rem; font: 400 1.1rem/1.5 var(--f-mono); color: var(--c-dim); letter-spacing: .06em; font-variant-numeric: tabular-nums; } /* sprocket-hole rule above and below the strip */ .strip__track::before, .strip__track::after { content: ''; position: sticky; } .strip__scroller { background: repeating-linear-gradient(90deg, var(--c-line) 0 1.2rem, transparent 1.2rem 2.4rem) 0 0 / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--c-line) 0 1.2rem, transparent 1.2rem 2.4rem) 0 100% / 100% 1px no-repeat; } @media (max-width: 479px) { .strip__scroller { padding: 0 1rem 1.2rem; } .frame { width: 26rem; } } /* ---- project hero: poster + play ---- */ .phero { position: relative; padding: 1rem 2rem 0; } .phero__img { display: block; position: relative; width: 100%; padding-bottom: 56.25%; border-radius: .8rem; background: 50% / cover no-repeat #000; box-shadow: inset 0 0 0 1px var(--c-line); overflow: hidden; } .phero__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 10, .35), transparent 30%, transparent 70%, rgba(7, 8, 10, .5)); } .phero__tag { position: absolute; left: 1.6rem; top: 1.4rem; z-index: 2; color: var(--c-neon); font: 400 1.2rem/1.55 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 0 .4rem rgba(0, 0, 0, .9); } /* playback control in the monitor language: frosted, bordered, small accent dot, sits bottom-left of the frame */ .phero__play { position: absolute; left: calc(2rem + 1.6rem); bottom: 1.6rem; z-index: 2; display: inline-flex; align-items: center; gap: .9rem; padding: .9rem 1.4rem .9rem 1.2rem; border-radius: .4rem; border: 1px solid rgba(var(--c-neon-rgb), .35); background: rgba(7, 8, 10, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--c-neon); font: 400 1.2rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; transition: border-color .2s, background .2s, transform .3s var(--ease-out); } .phero__dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--accent, var(--c-hot)); box-shadow: 0 0 .6rem color-mix(in srgb, var(--accent, var(--c-hot)) 70%, transparent); animation: blink 1.6s steps(1) infinite; } .phero__tri { width: 0; height: 0; border-style: solid; border-width: .5rem 0 .5rem .8rem; border-color: transparent transparent transparent currentColor; } .phero__play:hover, .phero__play:focus-visible, .phero__img:hover + .phero__play { border-color: var(--c-neon); background: rgba(7, 8, 10, .85); box-shadow: 0 0 0 1px rgba(var(--c-neon-rgb), .35), 0 0 2.2rem rgba(var(--c-neon-rgb), .22); transform: translateY(-.15rem); color: #fff; } .phero__play:hover .phero__dot, .phero__img:hover + .phero__play .phero__dot { animation: none; box-shadow: 0 0 1rem color-mix(in srgb, var(--accent, var(--c-hot)) 90%, transparent); } /* ---- title + slate report ---- */ .pinfo { display: grid; grid-template-columns: minmax(0, 1fr) 36rem; gap: 4rem; padding: 3rem 2rem 1rem; align-items: start; } .pinfo__section { color: var(--c-dim); font: 400 1.2rem/1.55 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } .pinfo__title { margin-top: .6rem; font: 400 7rem/.9 var(--f-display); text-transform: uppercase; color: var(--c-neon); text-shadow: var(--depth-quiet); } .pinfo__desc { margin-top: 1.6rem; max-width: 56rem; color: var(--c-neon); font: 400 1.3rem/1.6 var(--f-mono); } .pinfo__tech { margin-top: 1.4rem; color: var(--c-dim); font: 400 1.1rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .slate--report { grid-template-columns: 1fr; border: 1px solid var(--c-line); border-radius: .6rem; padding: 1.2rem 1.4rem; row-gap: .6rem; background: rgba(var(--c-neon-rgb), .025); } .slate__head { border-bottom: 1px solid var(--accent, var(--c-hot)) !important; padding-bottom: .8rem !important; margin-bottom: .4rem; } .slate__head dt { color: var(--accent, var(--c-hot)); } @media (max-width: 959px) { .pinfo { grid-template-columns: 1fr; gap: 2.4rem; } .pinfo__title { font-size: 5.2rem; } } @media (max-width: 479px) { .phero { padding: .6rem 1rem 0; } .phero__play { left: calc(1rem + 1rem); bottom: 1rem; padding: .7rem 1rem .7rem .9rem; font-size: 1.05rem; } .pinfo { padding: 2rem 1rem 0; } .pinfo__title { font-size: 4rem; } } /* ---- credits ---- */ .credits { padding: 1rem 0 1.6rem; } .credits__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; row-gap: .4rem; margin: 0 2rem; font: 400 1.2rem/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; } .credits__row { display: flex; gap: 1.2rem; border-bottom: 1px solid var(--c-line); padding-bottom: .4rem; } .credits__row dt { color: var(--c-dim); flex: 0 0 48%; } .credits__row dd { color: var(--c-neon); } @media (max-width: 639px) { .credits__list { grid-template-columns: 1fr; } } @media (max-width: 479px) { .credits__list { margin: 0 1rem; } } /* ---- more work ---- */ .other { padding-top: 1rem; } .index--other .row__title { font-size: 3.6rem; } .pinfo__yt { margin-top: 1rem; } .pinfo__yt a { color: var(--c-neon); font: 400 1.2rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--c-line); padding-bottom: .2rem; } .pinfo__yt a:hover { color: #fff; border-color: var(--c-neon); } /* ---- raven: an album in progress, presented as a slate ---- */ .raven { display: grid; grid-template-columns: minmax(0, 1fr) 36rem; gap: 4rem 6rem; align-items: start; padding: 6rem 2rem 4rem; } .raven__main { grid-column: 1; } .raven__kicker { color: var(--c-dim); font: 400 1.2rem/1.55 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } .raven__title { margin-top: 1.2rem; font: 400 14rem/.86 var(--f-display); text-transform: uppercase; color: var(--c-neon); text-shadow: var(--depth-glow); } .raven__status { margin-top: 1.4rem; display: flex; align-items: center; color: var(--c-hot); font: 400 1.3rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; } .raven__body { margin-top: 2.6rem; max-width: 56rem; color: var(--c-neon); font: 400 1.3rem/1.7 var(--f-mono); } .raven__body p + p { margin-top: 1.2rem; } .raven__slate { grid-column: 2; margin-top: .6rem; } .raven__note { margin-top: 2.4rem; color: var(--c-dim); font: 400 1.2rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } @media (max-width: 959px) { .raven { grid-template-columns: 1fr; gap: 2.4rem; padding: 4rem 2rem 3rem; } .raven__title { font-size: 9rem; } .raven__slate { grid-column: 1; } } @media (max-width: 479px) { .raven { padding: 3rem 1rem 2rem; } .raven__title { font-size: 6.2rem; } } /* ---- about: profile sheet ---- */ .sheet { display: grid; grid-template-columns: 38rem minmax(0, 1fr); gap: 4rem; padding: 1rem 2rem 0; align-items: start; } .sheet__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: .8rem; background: 50% / cover no-repeat #000; box-shadow: inset 0 0 0 1px var(--c-line); overflow: hidden; margin-bottom: 1.6rem; } .sheet__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 10, .4), transparent 35%); } .sheet__tag { position: absolute; left: 1.2rem; top: 1.2rem; z-index: 2; color: var(--c-neon); font: 400 1.1rem/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } .sheet__title { font: 400 7rem/.9 var(--f-display); text-transform: uppercase; color: var(--c-neon); text-shadow: var(--depth-glow); } .sheet__roles { margin-top: .8rem; color: var(--c-dim); font: 400 1.2rem/1.55 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } .sheet__h { margin-top: 3.2rem; font: 400 2.4rem/1 var(--f-display); text-transform: uppercase; color: var(--c-neon); text-shadow: var(--depth-glow); } .sheet__p { margin-top: 1.2rem; max-width: 62rem; color: var(--c-neon); font: 400 1.3rem/1.65 var(--f-mono); } .sheet__p p + p { margin-top: 1.2rem; } .sheet__p strong { font-weight: 700; color: #fff; } .sheet__p--tight { margin-top: 1rem; } .sheet__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } .sheet__lines { list-style: none; margin: 1.2rem 0 0; padding: 0; font: 400 1.3rem/1.9 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; } .sheet__prompt { color: var(--c-hot); text-shadow: var(--glow-hot); } .sheet__line { display: flex; align-items: center; gap: .7em; } .sheet__icon { width: 1.35em; height: 1.35em; flex: none; color: var(--c-hot); filter: drop-shadow(0 0 .4rem rgba(var(--c-hot-rgb, 255, 63, 208), .55)); } .sheet__line a:hover { color: #fff; } .sheet__tbd { color: var(--c-dim); } @media (max-width: 959px) { .sheet { grid-template-columns: 1fr; gap: 2.4rem; } .sheet__side { max-width: 42rem; } .sheet__title { font-size: 5.2rem; } } @media (max-width: 479px) { .sheet { padding: .6rem 1rem 0; gap: 2rem; } .sheet__title { font-size: 4rem; } .sheet__contact { grid-template-columns: 1fr; gap: 1rem; } } .ftr { display: flex; align-items: flex-start; justify-content: space-between; margin: 4rem 2rem 0; padding: 1.6rem 0 3rem; border-top: 1px solid var(--c-line); } .ftr__logo { font: 400 3.2rem/1 var(--f-display); text-transform: uppercase; color: var(--c-neon); text-shadow: var(--depth-glow); } .ftr__copy { color: var(--c-dim); margin-left: auto; margin-right: 3.6rem; padding-top: .5rem; } .ftr__credit { color: var(--c-neon); padding-top: .5rem; white-space: nowrap; } .ftr__credit span { color: var(--c-dim); } .ftr__credit:hover { color: var(--c-hot); } @media (max-width: 479px) { .ftr { margin: 3rem 1rem 0; padding: 1.2rem 0 2rem; display: block; } .ftr__logo { display: block; margin-bottom: 1.2rem; } .ftr__copy { display: inline; margin: 0; font-size: 1rem; } .ftr__credit { float: right; font-size: 1rem; } } /* Slide-in menu (real pixels). */ .menu-overlay { position: fixed; inset: 0; background: #000; opacity: 0; visibility: hidden; transition: opacity .3s ease-in-out, visibility 0s .3s; z-index: calc(var(--z-menu) - 1); } .menu-overlay.is-open { opacity: .6; visibility: visible; transition-delay: 0s; } .menu { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100vh; background: var(--c-bg); transform: translateX(100%); transition: transform .3s ease-in-out; z-index: var(--z-menu); overflow: hidden; border-left: 1px solid var(--c-line); } .menu.is-open { transform: none; } .menu__close { position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; z-index: 2; } .menu__icon { display: block; position: relative; width: 24px; height: 20px; margin: 10px 0 0 8px; } .menu__icon i { position: absolute; left: 0; top: 9px; width: 100%; height: 2px; background: var(--c-hot); box-shadow: var(--glow-hot); } .menu__icon i:nth-child(1) { transform: rotate(45deg); } .menu__icon i:nth-child(2) { transform: rotate(-45deg); } .menu__container { padding: 48px 40px 38px; height: 100%; display: flex; flex-direction: column; } .menu__list { list-style: none; margin: 0; padding: 0; } .menu__item { font: 400 44px/1.15 var(--f-display); } .menu__item a { display: inline-block; color: var(--c-neon); text-transform: uppercase; text-shadow: var(--depth-glow); } .menu__item a.is-active { color: var(--c-hot); text-shadow: var(--depth-hot), var(--glow-hot); } .menu__foot { margin-top: auto; color: var(--c-dim); font: 400 12px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; } @media (max-width: 640px) { .menu__container { padding: 24px 16px 28px; } } /* ---- video popup (self-hosted original) ---- */ .vpop { position: fixed; inset: 0; z-index: var(--z-popup); background: rgba(8, 9, 11, .94); opacity: 0; transition: opacity .3s; overflow-y: auto; } .vpop[hidden] { display: none; } .vpop.is-open { opacity: 1; } .vpop__close { position: fixed; top: 20px; right: 20px; width: 23px; height: 23px; padding: 0; border: 0; background: none; color: var(--c-neon); cursor: pointer; z-index: 2; } .vpop__close:hover { color: var(--c-hot); } .vpop__close svg { display: block; } .vpop__container { position: absolute; left: 20px; right: 20px; top: 50%; max-width: 1160px; margin: 0 auto; transform: translateY(-50%); } .vpop__player { position: relative; width: 100%; aspect-ratio: var(--ar, 16 / 9); max-height: calc(100vh - 120px); margin: 0 auto; background: #000; box-shadow: 0 0 0 1px var(--c-line), 0 0 6rem rgba(var(--c-neon-rgb), .12); } .vpop__player video, .vpop__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .vpop__fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2rem; text-align: center; color: var(--c-neon); font: 400 1.2rem/1.7 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; background: rgba(7, 8, 10, .85); } .vpop__caption { margin-top: 12px; color: var(--c-neon); font: 400 12px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; } /* ---- lightbox ---- */ .lb { position: fixed; inset: 0; z-index: var(--z-popup); background: var(--c-bg); opacity: 0; transition: opacity .3s; } .lb[hidden] { display: none; } .lb.is-open { opacity: 1; } .lb__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 60px 80px; } .lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .lb__close { position: absolute; top: 20px; right: 20px; width: 23px; height: 23px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; } .lb__close::before, .lb__close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 30px; margin: -15px 0 0 -1px; background: var(--c-neon); transform: rotate(45deg); } .lb__close::after { transform: rotate(-45deg); } .lb__arrow { position: absolute; top: 0; bottom: 0; width: 80px; border: 0; background: none; color: var(--c-hot); cursor: pointer; padding: 0; } .lb__arrow svg { width: 16px; height: 28px; display: block; margin: 0 auto; filter: drop-shadow(0 0 6px rgba(255, 63, 208, .6)); } .lb__arrow--prev { left: 0; } .lb__arrow--next { right: 0; } @media (max-width: 640px) { .lb__stage { padding: 50px 10px; } .lb__arrow { width: 44px; top: auto; bottom: 0; height: 50px; } } /* Home loading screen: the hero reel plays underneath from the first frame and never restarts. The loader is a scrim over it, the footage is simply black and white and half as bright, and the whole opening runs as one sequence: loader out -> footage resolves to colour -> hero text arrives, each element on its own move. */ .pre { position: fixed; inset: 0; z-index: var(--z-preloader); background: var(--c-bg); overflow: hidden; } /* The loading screen now carries its own footage, so it is opaque: nothing behind it is meant to show through any more. The clip is held monochrome and darkened by the scrim; the hero behind it is doing its own thing. */ .pre--clip { background: #04050a; } .pre__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); } .pre__scrim { position: absolute; inset: 0; background: rgba(4, 5, 10, .62); } /* just enough to keep the type readable over moving footage */ .pre.is-done { opacity: 0; transition: opacity var(--pre-fade, .7s) ease-in-out; pointer-events: none; } .pre__scan { position: absolute; inset: 0; pointer-events: none; opacity: .18; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); } /* The longest line, "[#]DP // DIRECTOR // GAFFER]:", measures 45.8rem, so the old 42rem box wrapped it at every width from 480px up and dropped "GAFFER]:" to column zero. 48rem clears it with headroom at every breakpoint. */ .pre__box { position: absolute; left: 50%; top: 50%; width: min(48rem, calc(100% - 4rem)); transform: translate(-50%, -50%); } .pre--clip .pre__text, .pre--clip .pre__pct { text-shadow: 0 .12rem .5rem rgba(0, 0, 0, .95), 0 0 2rem rgba(0, 0, 0, .85), var(--depth-glow); } .pre__text { margin: 0; font: 400 2.4rem/1.25 var(--f-display); color: var(--c-neon); text-shadow: var(--depth-glow); white-space: pre; min-height: 6.25em; } .pre__text .k { color: var(--c-hot); text-shadow: var(--depth-hot), var(--glow-hot); } .pre__text .caret { display: inline-block; width: .55em; height: 1em; vertical-align: -.15em; background: var(--c-neon); box-shadow: var(--glow); animation: blink 1s steps(1) infinite; } .pre__pct { position: absolute; right: 0; bottom: 0; font: 400 2.4rem/1.25 var(--f-display); color: var(--c-hot); text-shadow: var(--depth-hot), var(--glow-hot); opacity: 0; transition: opacity .2s; } .pre__pct.is-on { opacity: 1; } body.is-preloading { overflow: hidden; } @media (max-width: 639px) { .pre__box { width: min(48rem, calc(100% - 3rem)); } .pre__text, .pre__pct { font-size: 2.1rem; } } /* phones keep wrapping as a safety net: the line fits at this size, but an unusually narrow device should fold the text rather than push it out of the viewport, which is what it used to do. */ @media (max-width: 479px) { .pre__box { width: calc(100% - 2rem); } .pre__text { white-space: pre-wrap; overflow-wrap: anywhere; } .pre__text, .pre__pct { font-size: 1.55rem; } .pre__pct { bottom: -2.4rem; } } /* ---- the footage: one continuous playback, graded down while the loader is up, resolving after it clears ---- */ /* NB only the