/* ═══════════════════════════════════════════════════════════ Rashmika Madushan B — Lighting & Look-Dev Artist Warm near-black + a single gold key light. ═══════════════════════════════════════════════════════════ */ :root { --bg: #0a0806; --bg-2: #0f0c09; --surface: #16120d; --line: #2a2119; --line-soft: #1e1811; --text: #f4efe6; --muted: #a2968a; --dim: #6b6055; --gold: #e0a949; --gold-lt: #f5cd83; --gold-dk: #b8863a; --gold-a12: rgba(224,169,73,.12); --gold-a25: rgba(224,169,73,.25); --wrap: 1320px; --r: 14px; --ease: cubic-bezier(.22,1,.36,1); --f-head: 'Oswald', 'Arial Narrow', sans-serif; --f-body: 'Inter', system-ui, -apple-system, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; /* clip, not hidden — `hidden` promotes overflow-y to auto and makes a scroll container, which breaks scroll-padding-top. */ overflow-x: clip; } body.is-locked { overflow: hidden; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--f-head); font-weight: 700; line-height: 1.04; letter-spacing: .01em; margin: 0; text-transform: uppercase; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 32px; } .skip-link { position: absolute; left: -9999px; top: 12px; z-index: 999; background: var(--gold); color: #14100a; padding: 10px 18px; border-radius: 8px; font-weight: 600; } .skip-link:focus { left: 12px; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--gold); color: #14100a; } /* ─── reveal ────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ═══ PRELOADER ═════════════════════════════════════════ */ .preloader { position: fixed; inset: 0; z-index: 400; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--bg); transition: opacity .7s var(--ease), visibility .7s; } .preloader.is-done { opacity: 0; visibility: hidden; } .preloader__mark { width: 62px; color: var(--gold); animation: spin 5s linear infinite; } .preloader__mark svg { width: 100%; } @keyframes spin { to { transform: rotate(360deg); } } .preloader__bar { width: 180px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; } .preloader__bar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt)); transition: width .25s ease-out; } .preloader__pct { margin: 0; font-family: var(--f-head); font-size: 12px; letter-spacing: .3em; color: var(--dim); } /* ═══ NAV ═══════════════════════════════════════════════ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; border-bottom: 1px solid transparent; transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s; } .nav.is-stuck { background: rgba(10,8,6,.82); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line-soft); } .nav__inner { max-width: var(--wrap); margin-inline: auto; padding: 0 32px; height: 84px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 13px; } .brand__mark { width: 38px; color: var(--gold); flex: none; filter: drop-shadow(0 0 10px var(--gold-a25)); } .brand__mark svg { width: 100%; display: block; } .brand__text { display: flex; flex-direction: column; line-height: 1.15; } .brand__text strong { font-family: var(--f-head); font-size: 17px; font-weight: 700; letter-spacing: .07em; } .brand__text em { font-style: normal; font-size: 9.5px; letter-spacing: .22em; color: var(--muted); font-weight: 500; } .nav__menu { display: flex; align-items: center; gap: 40px; } .nav__menu a { position: relative; font-family: var(--f-head); font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); padding: 6px 0; transition: color .3s; } .nav__menu a::after { content: ''; position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 0; height: 2px; background: var(--gold); transition: width .35s var(--ease); } .nav__menu a:hover { color: var(--text); } .nav__menu a.is-active { color: var(--gold); } .nav__menu a.is-active::after { width: 100%; } .nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; cursor: pointer; background: none; border: 1px solid var(--line); border-radius: 10px; } .nav__toggle span { display: block; width: 18px; height: 1.6px; margin-inline: auto; background: var(--text); transition: transform .3s var(--ease), opacity .2s; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); } /* ═══ HERO ══════════════════════════════════════════════ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; perspective: 1400px; } .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* ─── backplate ─────────────────────────────────────────── */ /* The blur and the exposure lift are baked into the file, not applied here: the source is a night silhouette averaging ~7% luma, so dimming it in CSS left nothing on screen, and lifting it in CSS would have amplified the compression noise instead of the image. Pre-blurring also cut the encode from 428 KB to 168 KB. All that's left to do is soften the upscale. Inset negatively so no soft edge ever meets the viewport. */ /* No fade-in: the poster is frame one of this very clip, so playback starts on the image already on screen. That also keeps the plate visible where the video is deliberately never loaded (narrow screens, reduced motion) - there, the poster simply stays as a still. Held well down so the clip registers as movement rather than as a picture you're meant to watch. Dimming here rather than in the encode keeps it a one-number adjustment - and unlike lifting, darkening can't drag compression noise up with it. Raise `opacity` to show more of it. */ .hero__video { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; filter: blur(4px); opacity: .3; } /* Still weighted to the right, where the copy sits, so the headline never has to compete with whatever the clip is doing behind it. */ .hero__veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,8,6,.52) 0%, rgba(10,8,6,.70) 48%, rgba(10,8,6,.90) 100%), radial-gradient(ellipse at 30% 55%, rgba(224,169,73,.10), transparent 62%); } /* volumetric god-rays raking down from the top */ .rays { position: absolute; inset: -20% -10%; transform-style: preserve-3d; } .rays span { position: absolute; top: -12%; left: var(--x); width: var(--w); height: 135%; background: linear-gradient(to bottom, rgba(240,205,131,var(--o)) 0%, rgba(224,169,73,calc(var(--o) * .45)) 42%, transparent 82%); transform: rotate(var(--r)); transform-origin: top center; filter: blur(22px); animation: ray 9s ease-in-out infinite alternate; animation-delay: var(--d); } @keyframes ray { from { opacity: .55; transform: rotate(var(--r)) scaleX(.9); } to { opacity: 1; transform: rotate(calc(var(--r) + 2deg)) scaleX(1.12); } } .hero__orb { position: absolute; top: 6%; left: 8%; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(224,169,73,.20) 0%, rgba(224,169,73,.08) 38%, transparent 68%); filter: blur(30px); animation: breathe 11s ease-in-out infinite alternate; } @keyframes breathe { from { transform: scale(1); opacity: .8; } to { transform: scale(1.14); opacity: 1; } } .dust { position: absolute; inset: 0; } .dust i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--gold-lt); opacity: 0; box-shadow: 0 0 6px 1px rgba(245,205,131,.5); animation: mote var(--dur) linear infinite; animation-delay: var(--dl); } @keyframes mote { 0% { opacity: 0; transform: translate3d(0,0,0); } 12% { opacity: var(--op); } 88% { opacity: var(--op); } 100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0); } } .hero__vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 42% 45%, transparent 30%, rgba(6,4,3,.62) 78%, rgba(4,3,2,.9) 100%); } .grain { position: absolute; inset: 0; opacity: .3; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero__inner { position: relative; width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 120px 32px 90px; display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 20px; transform-style: preserve-3d; } /* ─── the character ─────────────────────────────────────── */ .figure { position: relative; justify-self: center; width: 100%; max-width: 620px; } /* JS writes --rx/--ry/--tx/--ty here every frame */ .figure__stage { position: relative; transform: translate3d(var(--tx,0px), var(--ty,0px), 0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style: preserve-3d; will-change: transform; } .figure__halo { position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(224,169,73,.34) 0%, rgba(224,169,73,.10) 45%, transparent 70%); filter: blur(34px); transform: translateZ(-90px); } .figure__img { position: relative; width: 100%; height: auto; transform: translateZ(50px); filter: drop-shadow(0 40px 60px rgba(0,0,0,.75)) drop-shadow(-16px 0 34px rgba(224,169,73,.14)); /* The bust is cropped square, and the crop cuts through solid pixels on three sides: the whole bottom row is opaque, and the shoulders run off the left and right edges (~174px and ~140px of the edge columns). On the old flat-black background those slices were invisible; over the video plate they read as straight lines. So dissolve all three - vertical for the chest, horizontal for the shoulders, intersected so each only eats its own edge. The head sits well inside 10%/90%, so it is untouched. */ -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 97%), linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, #000 74%, transparent 97%), linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-composite: source-in; /* older WebKit spelling */ mask-composite: intersect; } /* Warm rim-light. Masked with the portrait itself so the glow lands on the silhouette — unmasked, `screen` over a full-bleed box shows as a rectangle. */ .figure__rim { position: absolute; inset: 0; background: radial-gradient(ellipse at 26% 26%, rgba(245,205,131,.5), rgba(224,169,73,.12) 42%, transparent 62%); mix-blend-mode: screen; pointer-events: none; transform: translateZ(60px); -webkit-mask: url(../assets/character/rashmika.png) center/contain no-repeat; mask: url(../assets/character/rashmika.png) center/contain no-repeat; } .figure__floor { position: absolute; left: 50%; bottom: -4%; translate: -50% 0; width: 72%; height: 42px; border-radius: 50%; background: radial-gradient(ellipse, rgba(224,169,73,.14), transparent 70%); filter: blur(16px); } /* ─── hero copy ─────────────────────────────────────────── */ .hero__copy { position: relative; transform-style: preserve-3d; } .hero__title { font-size: clamp(2.3rem, 5.1vw, 4.6rem); font-weight: 700; letter-spacing: .005em; line-height: 1.02; margin-bottom: 26px; } .hero__title span { display: block; } .hero__title .gold { color: var(--gold); text-shadow: 0 0 34px rgba(224,169,73,.45); } .hero__lead { max-width: 44ch; margin: 0 0 38px; color: var(--muted); font-size: clamp(.95rem, 1.15vw, 1.06rem); } .hero__row { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; } /* ─── buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 34px; border: 0; cursor: pointer; border-radius: 100px; background: linear-gradient(135deg, var(--gold-lt), var(--gold) 45%, var(--gold-dk)); color: #171107; font-family: var(--f-head); font-size: 14.5px; font-weight: 600; letter-spacing: .13em; box-shadow: 0 10px 30px -10px rgba(224,169,73,.75), inset 0 1px 0 rgba(255,255,255,.34); transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s; } .btn svg { width: 19px; height: 19px; transition: transform .3s var(--ease); } .btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(224,169,73,.9); filter: brightness(1.06); } .btn:hover svg { transform: translateX(5px); } .btn:active { transform: translateY(-1px); } /* ─── social pills ──────────────────────────────────────── */ .socials { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; } .socials a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line); color: var(--muted); transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease); } .socials a:hover { color: var(--gold); border-color: var(--gold-a25); background: var(--gold-a12); transform: translateY(-3px); } .socials a::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; } [data-social="linkedin"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 11-.02 5 2.5 2.5 0 01.02-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.76V21h-4v-5.6c0-1.34-.03-3.07-1.9-3.07-1.9 0-2.2 1.46-2.2 2.97V21H9z'/%3E%3C/svg%3E"); } [data-social="mail"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm9 8.2L4.4 7H19.6L12 13.2zM4 17.6l5.1-4.4 2.9 2.4 2.9-2.4 5.1 4.4H4z'/%3E%3C/svg%3E"); } /* ─── scroll cue ────────────────────────────────────────── */ .scroller { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 9px; font-family: var(--f-head); font-size: 10.5px; letter-spacing: .28em; color: var(--dim); transition: color .3s; } .scroller:hover { color: var(--gold); } .scroller__mouse { width: 23px; height: 37px; border: 1px solid currentColor; border-radius: 100px; display: grid; justify-items: center; padding-top: 7px; } .scroller__mouse i { width: 3px; height: 7px; border-radius: 3px; background: var(--gold); animation: wheel 2s ease-in-out infinite; } @keyframes wheel { 0%,100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(12px); opacity: 0; } } /* ═══ SECTIONS ══════════════════════════════════════════ */ .section { position: relative; padding-block: clamp(80px, 9vw, 130px); } .section--alt { background: var(--bg-2); border-block: 1px solid var(--line-soft); } .head { text-align: center; margin-bottom: 44px; } .head--left { text-align: left; } .head__kicker { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 0 0 12px; font-family: var(--f-head); font-size: 13px; letter-spacing: .34em; color: var(--gold); } .head--left .head__kicker { justify-content: flex-start; } .spark { animation: twinkle 2.6s ease-in-out infinite; } @keyframes twinkle { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } .head__title { font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: .02em; margin-bottom: 14px; } .head__title--gold { color: var(--gold-lt); text-shadow: 0 0 40px rgba(224,169,73,.35); } .head__sub { margin: 0 auto; max-width: 56ch; color: var(--muted); font-size: .98rem; } .head--left .head__sub { margin-inline: 0; } /* underline flourish under left-aligned headings */ .head--left .head__title::after { content: ''; display: block; width: 62px; height: 3px; margin-top: 16px; background: linear-gradient(90deg, var(--gold), transparent); border-radius: 3px; } /* ═══ REEL ══════════════════════════════════════════════ */ /* Each project is a full-width band, still on one side and copy on the other, alternating down the page so the eye zig-zags instead of scanning a uniform grid. */ .reel { display: flex; flex-direction: column; } .band { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(28px, 4.4vw, 68px); align-items: center; padding-block: clamp(44px, 6vw, 78px); cursor: pointer; } .band + .band { border-top: 1px solid var(--line-soft); } .band:first-child { padding-top: 8px; } /* mirror every second band */ .band:nth-child(even) { grid-template-columns: .82fr 1.18fr; } .band:nth-child(even) .band__media { order: 2; } /* ─── the still ─────────────────────────────────────────── */ .band__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r); background: #100c08; box-shadow: 0 40px 80px -40px rgba(0,0,0,.95); transition: box-shadow .6s var(--ease); } .band__media img, .band__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), opacity .5s, filter .6s; } /* Sits a touch under-lit until you engage with it, then comes up. Only where there's a real pointer - on touch there's no hover to lift it back out again. */ @media (hover: hover) { .band__media img { filter: brightness(.88) saturate(.94); } } .band__media video { opacity: 0; z-index: 1; } .band.is-playing .band__media video { opacity: 1; } .band:hover .band__media img { transform: scale(1.045); filter: none; } .band:hover .band__media { box-shadow: 0 46px 90px -38px rgba(0,0,0,.98), 0 0 0 1px var(--gold-a25); } /* hairline frame, inset like a matte */ .band__frame { position: absolute; inset: 14px; z-index: 4; border-radius: 6px; border: 1px solid rgba(245,205,131,.28); opacity: 0; transition: opacity .5s, inset .6s var(--ease); pointer-events: none; } .band:hover .band__frame { opacity: 1; inset: 18px; } /* letterbox bars close in on hover — a viewfinder framing the shot */ .band__bars { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .band__bars::before, .band__bars::after { content: ''; position: absolute; left: 0; right: 0; height: 26px; background: rgba(6,4,3,.9); transition: transform .65s var(--ease); } .band__bars::before { top: 0; transform: translateY(-100%); } .band__bars::after { bottom: 0; transform: translateY(100%); } .band:hover .band__bars::before, .band:hover .band__bars::after { transform: none; } /* a slow key light travelling across the frame */ .band__sweep { position: absolute; inset: -40% -60%; z-index: 2; pointer-events: none; background: linear-gradient(100deg, transparent 38%, rgba(245,205,131,.14) 50%, transparent 62%); opacity: 0; translate: -55% 0; transition: opacity .4s; } .band:hover .band__sweep { opacity: 1; animation: sweep 1.5s var(--ease) forwards; } @keyframes sweep { to { translate: 55% 0; } } /* ─── the copy ──────────────────────────────────────────── */ .band__copy { min-width: 0; } /* big ghost numeral, hairline rule running off it */ .band__num { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; font-family: var(--f-head); font-weight: 700; line-height: 1; font-size: clamp(40px, 5vw, 66px); letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px rgba(224,169,73,.42); transition: -webkit-text-stroke-color .5s, color .5s; } .band__num::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-a25), transparent); } /* mirrored bands read inward, toward the still they belong to */ .band:nth-child(even) .band__copy { text-align: right; } .band:nth-child(even) .band__num { flex-direction: row-reverse; } .band:nth-child(even) .band__num::after { background: linear-gradient(270deg, var(--gold-a25), transparent); } .band:nth-child(even) .band__desc { margin-left: auto; } .band:hover .band__num { color: var(--gold-a12); -webkit-text-stroke-color: var(--gold); } .band__cat { margin: 0 0 8px; font-family: var(--f-head); font-size: 11px; letter-spacing: .26em; color: var(--gold); opacity: .9; } .band__title { font-size: clamp(1.6rem, 2.9vw, 2.5rem); letter-spacing: .02em; transition: color .35s; } .band:hover .band__title { color: var(--gold-lt); } .band__desc { margin: 14px 0 0; max-width: 46ch; color: var(--muted); font-size: .96rem; } .band__act { margin: 24px 0 0; } .band__cta { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 8px; border: 0; background: none; cursor: pointer; color: var(--text); font-family: var(--f-head); font-size: 12.5px; font-weight: 500; letter-spacing: .2em; transition: color .35s; } .band__cta svg { width: 17px; height: 17px; transition: transform .45s var(--ease); } /* underline grows out from the left as you approach */ .band__cta::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-a25)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .band__act { position: relative; display: inline-block; } .band:hover .band__cta { color: var(--gold-lt); } .band:hover .band__cta::after { transform: scaleX(1); } .band:hover .band__cta svg { transform: translateX(6px); } /* ─── entrance ──────────────────────────────────────────── */ /* the band itself doesn't fade; its two halves arrive separately, the still sliding in from the edge it lives on. */ .band.reveal { opacity: 1; transform: none; transition: none; } .band .band__media, .band .band__copy > * { opacity: 0; transition: opacity .9s var(--ease) var(--dl,0s), transform 1s var(--ease) var(--dl,0s); } .band .band__media { transform: translateX(-44px); } .band:nth-child(even) .band__media { transform: translateX(44px); } .band .band__copy > * { transform: translateY(24px); } .band .band__copy > :nth-child(2) { --dl: .08s; } .band .band__copy > :nth-child(3) { --dl: .14s; } .band .band__copy > :nth-child(4) { --dl: .2s; } .band .band__copy > :nth-child(5) { --dl: .26s; } .band.is-in .band__media, .band.is-in .band__copy > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .band .band__media, .band .band__copy > * { opacity: 1; transform: none; transition: none; } .band:hover .band__sweep { animation: none; opacity: 0; } } /* ═══ ABOUT ═════════════════════════════════════════════ */ .about { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 76px); align-items: center; } .about__frame { position: relative; } .about__frame::before { content: ''; position: absolute; left: 50%; top: 48%; translate: -50% -50%; width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(224,169,73,.24), transparent 66%); filter: blur(38px); } .about__frame img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.7)); /* same chest-crop dissolve as the hero portrait */ -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 96%); mask-image: linear-gradient(to bottom, #000 72%, transparent 96%); } .about__body p { margin: 0 0 20px; color: var(--muted); font-size: 1.03rem; max-width: 60ch; } .about__label { font-family: var(--f-head); font-size: 12px; letter-spacing: .24em; color: var(--gold); margin: 34px 0 18px; } /* h3 is uppercased globally, which would turn "DCCs" into "DCCS" */ .about__label--asis { text-transform: none; } /* ─── experience timeline ───────────────────────────────── */ .timeline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; } .timeline::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, var(--gold), var(--line) 70%, transparent); } .timeline__item { position: relative; padding-bottom: 22px; } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { content: ''; position: absolute; left: -26px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-2); border: 2px solid var(--gold); } .timeline__item:first-child::before { box-shadow: 0 0 0 4px var(--gold-a12); } .timeline__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 4px; } .timeline__head h4 { margin: 0; font-family: var(--f-head); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); } .timeline__when { font-family: var(--f-head); font-size: 10.5px; letter-spacing: .14em; color: var(--gold); padding: 3px 11px; border-radius: 100px; background: var(--gold-a12); border: 1px solid var(--gold-a25); white-space: nowrap; } .timeline__where { margin: 0 !important; font-size: .93rem !important; color: var(--dim) !important; } /* ─── DCCs + render engines row ─────────────────────────── */ .capabilities { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(30px, 4vw, 64px); margin-top: clamp(46px, 6vw, 76px); padding-top: clamp(36px, 4vw, 54px); border-top: 1px solid var(--line-soft); } .capabilities .about__label { margin-top: 0; } .tools { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; } .tools li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 78px; } .tools__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: transform .35s var(--ease), border-color .35s, color .35s, box-shadow .35s; } /* the marks are single-path and monochrome, so they inherit the tile's colour */ .tools__ico svg { width: 25px; height: 25px; fill: currentColor; } .tools li:hover .tools__ico { transform: translateY(-5px); border-color: var(--gold-a25); color: var(--gold); box-shadow: 0 12px 26px -14px rgba(224,169,73,.8); } .tools em { font-style: normal; font-family: var(--f-head); font-size: 9.5px; letter-spacing: .12em; color: var(--dim); text-align: center; line-height: 1.35; } /* no logo tiles here - see the note in index.html */ .engines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } /* `flex-start` plus the offsets below, not `center`: the longest entry wraps to two lines on a narrow column, and centring would leave the marker and the rule floating against the middle of the block instead of reading with the name. The offsets park both on the first line either way. */ .engines li { display: flex; align-items: flex-start; gap: 13px; font-family: var(--f-head); font-size: 12.5px; letter-spacing: .16em; line-height: 1.65; text-transform: uppercase; color: var(--muted); transition: color .3s; } .engines li::before { content: ''; flex: none; width: 7px; height: 7px; rotate: 45deg; margin-top: 5px; border: 1px solid var(--gold); transition: background .3s; } /* `flex: 1 0 22px` rather than `flex: 1` so the rule keeps a minimum length instead of being squeezed to nothing by the longest entry. */ .engines li::after { content: ''; flex: 1 0 22px; height: 1px; margin-top: 10px; background: linear-gradient(90deg, var(--line), transparent); } .engines li:hover { color: var(--text); } .engines li:hover::before { background: var(--gold); } /* ═══ CONTACT ═══════════════════════════════════════════ */ /* open-to-work badges above the form */ .avail { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0 0 38px; padding: 0; } .avail li { display: flex; align-items: center; gap: 9px; padding: 9px 20px; border-radius: 100px; background: var(--gold-a12); border: 1px solid var(--gold-a25); font-family: var(--f-head); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-lt); } .avail li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px 1px var(--gold); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .based { margin: -22px 0 38px; text-align: center; font-family: var(--f-head); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; } .form__col { display: flex; flex-direction: column; gap: 22px; } .hp { position: absolute; left: -9999px; } .field { position: relative; } .field__ico { position: absolute; left: 20px; top: 21px; width: 19px; height: 19px; background: var(--dim); -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; transition: background .3s; } .field:focus-within .field__ico { background: var(--gold); } [data-ico="user"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.5-8 5.5V22h16v-2.5c0-3-3.6-5.5-8-5.5z'/%3E%3C/svg%3E"); } [data-ico="mail"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1zm9 8.2L4.4 7H19.6L12 13.2zM4 17.6l5.1-4.4 2.9 2.4 2.9-2.4 5.1 4.4H4z'/%3E%3C/svg%3E"); } [data-ico="pen"] { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.2V21h3.8L18 9.8 14.2 6 3 17.2zM20.7 7.1a1 1 0 000-1.4L18.3 3.3a1 1 0 00-1.4 0l-1.8 1.8L19 8.9l1.8-1.8z'/%3E%3C/svg%3E"); } .field input, .field textarea { width: 100%; padding: 19px 22px 19px 52px; background: rgba(255,255,255,.028); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); font-family: inherit; font-size: 15px; transition: border-color .3s, background .3s, box-shadow .3s; } .field textarea { resize: vertical; min-height: 100%; padding-top: 19px; line-height: 1.65; } .field--area { height: 100%; } .field input::placeholder, .field textarea::placeholder { color: var(--dim); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--gold-a25); background: rgba(255,255,255,.05); box-shadow: 0 0 0 4px rgba(224,169,73,.08); } .btn--submit { justify-content: center; width: 100%; padding-block: 18px; } .form__status { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 14px; min-height: 22px; } .form__status.is-ok { color: var(--gold-lt); } .form__status.is-err { color: #e07a6a; } /* local-preview note - informational, so it must not read as a failure */ .form__status.is-note { color: var(--dim); } .form__status a { color: var(--gold-lt); text-decoration: underline; } .findme { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 58px; } .findme span { font-family: var(--f-head); font-size: 12.5px; letter-spacing: .24em; color: var(--muted); } .direct { text-align: center; margin: 22px 0 0; } .direct a { font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color .3s, border-color .3s; } .direct a:hover { color: var(--gold-lt); border-bottom-color: var(--gold-a25); } /* ═══ FOOTER ════════════════════════════════════════════ */ .footer { border-top: 1px solid var(--line-soft); padding-block: 26px; font-size: 12.5px; color: var(--dim); } .footer__inner { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; } .footer a { font-family: var(--f-head); letter-spacing: .16em; transition: color .3s; } .footer a:hover { color: var(--gold); } /* ═══ PROJECT MODAL ═════════════════════════════════════ */ .modal { position: fixed; inset: 0; z-index: 300; } .modal[hidden] { display: none; } .modal__scrim { position: absolute; inset: 0; background: rgba(4,3,2,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: fade .35s var(--ease); } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal__panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 92px 4vw 80px; animation: rise .5s var(--ease); } @keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .modal__close { position: fixed; top: 26px; right: 30px; z-index: 5; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: rgba(20,15,10,.85); border: 1px solid var(--line); color: var(--text); backdrop-filter: blur(8px); transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease); } .modal__close:hover { background: var(--gold); color: #171107; border-color: var(--gold); transform: rotate(90deg); } .modal__close svg { width: 21px; height: 21px; } .modal__head { max-width: 900px; margin: 0 auto 46px; text-align: center; } .modal__cat { margin: 0 0 10px; font-family: var(--f-head); font-size: 11.5px; letter-spacing: .28em; color: var(--gold); } .modal__title { font-size: clamp(1.7rem, 3.6vw, 2.8rem); margin-bottom: 16px; } .modal__desc { margin: 0 auto; max-width: 62ch; color: var(--muted); } /* YouTube embed - fixed 16:9 box so the iframe can't letterbox itself */ .embed { position: relative; aspect-ratio: 16 / 9; background: #000; } .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* poster shown until the visitor presses play */ .ytlite { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; display: block; } .ytlite img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s, transform .8s var(--ease); } .ytlite:hover img { opacity: .82; transform: scale(1.02); } .ytlite__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 74px; transition: transform .35s var(--ease); } .ytlite__play svg { width: 100%; display: block; } .ytlite__bg { fill: #212121; fill-opacity: .82; transition: fill .3s, fill-opacity .3s; } .ytlite:hover .ytlite__play { transform: scale(1.09); } .ytlite:hover .ytlite__bg { fill: #f00; fill-opacity: 1; } /* One piece of media per screenful, stacked, each at its own shape. The work spans 0.66 → 2.93 aspect ratios, so nothing is cropped or boxed: the size caps below let the frame itself decide which way it runs. A landscape frame runs out of width first and fills the column; a portrait one runs out of height first and stands tall. Both end up about a screen. */ .modal__media { max-width: 1600px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 5vh, 64px); } .modal__media figure { margin: 0; /* shrink-wrap the frame to the media so the border hugs the actual picture rather than boxing a portrait inside a landscape panel */ width: fit-content; max-width: 100%; border-radius: 10px; overflow: hidden; background: #100c08; border: 1px solid var(--line-soft); scroll-snap-align: center; } .modal__media img, .modal__media video { display: block; width: auto; height: auto; max-width: 100%; max-height: 84vh; } /* The YouTube poster is the exception: it's an aspect-ratio box, not an intrinsically sized image, so it has no natural width to shrink-wrap. Cap it by width rather than height - a max-height against a fixed aspect-ratio would letterbox the player instead of resizing it. */ .modal__media .film { width: min(100%, calc(84vh * 16 / 9)); } .embed { width: 100%; } /* Assists the stacking without trapping the scroll - `proximity` snaps when you land near a frame and stays out of the way when you're moving through. */ .modal__panel { scroll-snap-type: y proximity; } /* ═══ FULL-SIZE IMAGE VIEWER ════════════════════════════ */ /* gallery stills advertise that they open bigger */ .modal__media .shot { cursor: zoom-in; } .modal__media .shot img { transition: transform .7s var(--ease), opacity .4s; } .modal__media .shot:hover img { transform: scale(1.02); opacity: .88; } /* above the project modal (300) but below the preloader (400) */ .lightbox { position: fixed; inset: 0; z-index: 350; display: grid; place-items: center; } .lightbox[hidden] { display: none; } .lightbox__scrim { position: absolute; inset: 0; background: rgba(3,2,1,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: fade .3s var(--ease); } .lightbox__img { position: relative; max-width: 94vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.95); animation: pop .35s var(--ease); } .lightbox__close, .lightbox__nav { position: absolute; z-index: 2; cursor: pointer; display: grid; place-items: center; border-radius: 50%; line-height: 1; background: rgba(22,17,12,.86); border: 1px solid var(--line); color: var(--text); backdrop-filter: blur(8px); transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease); } .lightbox__close:hover, .lightbox__nav:hover { background: var(--gold); color: #171107; border-color: var(--gold); } .lightbox__close { top: 24px; right: 26px; width: 50px; height: 50px; } .lightbox__close:hover { transform: rotate(90deg); } .lightbox__close svg { width: 21px; height: 21px; } .lightbox__nav { top: 50%; translate: 0 -50%; width: 54px; height: 54px; } .lightbox__nav svg { width: 22px; height: 22px; } .lightbox__nav--prev { left: 22px; } .lightbox__nav--next { right: 22px; } .lightbox__nav[hidden] { display: none; } .lightbox__meta { position: absolute; z-index: 2; left: 50%; bottom: 20px; translate: -50% 0; display: flex; align-items: center; gap: 14px; margin: 0; padding: 8px 18px; border-radius: 100px; background: rgba(22,17,12,.8); border: 1px solid var(--line); backdrop-filter: blur(8px); font-family: var(--f-head); font-size: 11.5px; letter-spacing: .16em; color: var(--muted); } .lightbox__dims { color: var(--dim); } .lightbox__dims:empty { display: none; } /* freeze the gallery behind the viewer so a wheel scroll doesn't move it */ body.lb-open .modal__panel { overflow: hidden; } /* ═══ RESPONSIVE ════════════════════════════════════════ */ @media (max-width: 1080px) { .band, .band:nth-child(even) { grid-template-columns: 1fr; gap: 26px; } .band:nth-child(even) .band__media { order: 0; } /* stacked, the mirroring has nothing to mirror against */ .band:nth-child(even) .band__copy { text-align: left; } .band:nth-child(even) .band__num { flex-direction: row; } .band:nth-child(even) .band__num::after { background: linear-gradient(90deg, var(--gold-a25), transparent); } .band:nth-child(even) .band__desc { margin-left: 0; } .band .band__media, .band:nth-child(even) .band__media { transform: translateY(28px); } .band__desc { max-width: none; } .hero__inner { grid-template-columns: 1fr; gap: 10px; padding-top: 108px; } .figure { max-width: 380px; order: -1; } .hero__copy { text-align: center; } .hero__lead { margin-inline: auto; } .hero__row { justify-content: center; } .about { grid-template-columns: 1fr; } .about__frame { max-width: 320px; margin-inline: auto; } .capabilities { grid-template-columns: 1fr; } .engines { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .form { grid-template-columns: 1fr; } .field--area textarea { min-height: 190px; } } @media (max-width: 760px) { .wrap, .nav__inner { padding-inline: 20px; } .nav__inner { height: 72px; } .nav__toggle { display: flex; } .nav__menu { position: fixed; inset: 72px 0 auto 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 22px; background: rgba(10,8,6,.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); } .nav__menu.is-open { display: flex; } .nav__menu a { padding: 16px 4px; border-bottom: 1px solid var(--line-soft); font-size: 15px; } .nav__menu a::after { display: none; } /* two columns is too tight for "Real-Time Rendering" - it wraps and the trailing rule collapses to nothing */ .engines { grid-template-columns: 1fr; } .band { padding-block: 34px; } .band__num { font-size: 34px; margin-bottom: 10px; } .band__bars::before, .band__bars::after { height: 16px; } .scroller { display: none; } .modal__panel { padding: 80px 18px 60px; } .modal__close { top: 16px; right: 16px; width: 44px; height: 44px; } /* At this width the side arrows would sit on top of the artwork, so drop them into a bar under it and give the image the full screen width. */ .lightbox__img { max-width: 96vw; max-height: 72vh; } .lightbox__nav { top: auto; bottom: 18px; translate: none; width: 46px; height: 46px; } .lightbox__nav--prev { left: 18px; } .lightbox__nav--next { right: 18px; } .lightbox__meta { bottom: 30px; font-size: 10.5px; padding: 7px 14px; gap: 10px; } .lightbox__close { top: 14px; right: 14px; width: 44px; height: 44px; } .tools li { width: 66px; } .tools__ico { width: 48px; height: 48px; font-size: 16px; } } @media (max-width: 420px) { .hero__row { gap: 18px; } .btn { padding: 14px 26px; font-size: 13px; } }