@font-face { font-family: "Hardshock"; src: url("fonts/Hardshock.otf") format("opentype"); font-weight: normal; font-style: normal; } :root { --bg: #1b1b1b; --purple: #d2c0f9; --white: #ffffff; /* Customizy's card pink. */ --pink: #b86287; /* Minimum space between page content and the viewport edges. Full-bleed section backgrounds ignore this and still run edge to edge. */ --gutter: 100px; --progress-h: 3px; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Hold the scrollbar's column open even while something has locked scrolling. Every scroll lock on this site — the intro overlay, the resume viewer, the mobile menu — sets `overflow: hidden`, which takes the scrollbar away and widens the layout by its width. Measured on a work<->about jump: the moment the intro unlocked, clientWidth went 1600 -> 1585 and everything anchored to the right edge snapped across 15px. Reserving the gutter permanently means locking and unlocking no longer changes the available width at all. */ html { scrollbar-gutter: stable; } /* Nothing on this site scrolls sideways, and on a phone that is not a cosmetic point: a document even a few pixels wider than the screen becomes pannable, and once the visual viewport can move away from the layout viewport every `position: fixed` overlay — the focused clip, the back-to-top button — is drawn somewhere the finger is not. It also eats the edge swipe the system back gesture wants. `clip`, not `hidden`: `hidden` would turn into a scroll container and take every `position: sticky` on the page with it — the hero, the project deck and the pinned panels all depend on it. `clip` refuses the scroll without creating one. The overflow it catches is a safety net; the elements that caused it are sized to the viewport where they are declared. Deliberately no `overscroll-behavior-x` here. It would stop the sideways overscroll, but browsers read it as "this page handles the horizontal gesture itself" and withdraw swipe-to-go-back along with it — which is the gesture this is all meant to protect. With nothing to scroll sideways there is no overscroll left to suppress anyway. */ html, body { overflow-x: clip; } /* is only there to pick a source. Taking it out of the box tree means every existing rule that positions or sizes the — and several assume it is a direct child of its frame — keeps working unchanged. `display: contents` promotes the picture's children to items of whatever contains it, and is one of those children. In a flex column it became a zero-height flex item and bought itself a full gap: every section with a wrapped heading grew by exactly one `gap`, +101px down the work page and +91 down the about page, with the desktop artwork untouched. renders nothing by definition, so say so. */ picture { display: contents; } picture > source { display: none; } /* Built for the mobile frames and shown only there. Declared off here rather than inside the breakpoint so a future desktop rule cannot reveal them by accident. */ .works__brand, .works__dots, .experience__dots, .knowmore { display: none; } body { background: var(--bg); font-family: "Hardshock", sans-serif; } body.about-page { background: #5c4c7f; } /* Sticks to the top of the viewport. It stays in flow, so nothing shifts when it engages — and the resume viewer can still swap it to fixed without the page jumping, because leaving flow costs the same either way. */ .nav { position: sticky; top: 0; z-index: 210; width: 100%; /* 18 + 79 + 3 = 100px of header. It used to stand 140px tall, which ate enough of a laptop viewport that the hero opened already half-scrolled. */ padding-top: 18px; background: var(--bg); } body.about-page .nav { background: #5c4c7f; } /* Scroll progress, pinned to the bottom edge of the sticky header. */ .nav__progress { width: 100%; height: var(--progress-h); /* Faint enough that the empty track reads as a hairline rule rather than a grey band across the page, but still there so the fill has something to travel along. */ background: rgba(255, 255, 255, 0.07); overflow: hidden; } /* The same light purple on both pages — it reads against the work page's dark and the about page's deeper purple alike. */ .nav__progress-bar { display: block; width: 100%; height: 100%; background: var(--purple); /* A thin bar loses the weight that made it visible, so the glow carries the read instead of thickness. */ box-shadow: 0 0 6px rgba(210, 192, 249, 0.75); /* scaleX rather than width: it animates on the compositor, so scrolling stays smooth. */ transform: scaleX(0); transform-origin: 0 50%; } .nav__inner { width: 100%; padding: 0 var(--gutter); height: 79px; display: flex; align-items: center; justify-content: space-between; } .nav__logo { display: block; /* Keeps the mark's 80:107 crop as the bar comes down. */ height: 79px; width: 59px; flex-shrink: 0; } .nav__logo img { display: block; height: 100%; width: 100%; object-fit: cover; } .nav__links { display: flex; align-items: center; height: 56px; gap: 50px; } .nav__link { position: relative; font-family: "Hardshock", sans-serif; font-size: 16px; line-height: normal; color: var(--white); text-decoration: none; white-space: nowrap; } .nav__link--active { color: var(--purple); display: inline-flex; flex-direction: column; align-items: flex-start; } /* Tracks .nav__link's size — 48/60 is the same 0.8 ratio as 16/20, so the stroke stays the same length relative to the word it sits under. */ .nav__underline { display: block; width: 48px; height: auto; margin-top: -3px; } /* Scaled with the bar so the button keeps the same optical weight inside it; the image keeps its own aspect ratio. */ .nav__contact { display: block; height: 46px; flex-shrink: 0; } .nav__contact img { display: block; height: 100%; width: auto; } /* ===== Hero ===== */ /* The hero pins to the top and the rest of the page scrolls up over it. top is normally 0, but on a viewport shorter than the hero it goes negative so the hero can still travel far enough to reveal its bottom (photo and badges) before the panel covers it. */ .hero { position: sticky; top: min(0px, 100vh - 850px); z-index: 0; width: 100%; /* Was 40px under a 140px header. With the header at 100px this sat as a visible hole between the bar and the greeting, so it comes in to match. */ margin: 20px 0 0; height: 850px; } .hero__greeting { position: absolute; left: 0; right: 0; top: 0; font-family: "Urbanist", sans-serif; font-weight: 500; font-size: 36px; color: var(--white); text-align: center; } .hero__name { font-family: "Hardshock", sans-serif; font-size: 40px; color: var(--purple); } .hero__title { position: absolute; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 135px; text-transform: uppercase; line-height: 1; white-space: nowrap; } .hero__title--1 { left: 0; right: 0; top: 91px; color: rgba(255, 255, 255, 0.9); text-align: center; } .hero__title--2 { left: 0; right: 0; top: 260px; color: #695397; text-align: center; } .hero__photo-wrap { position: absolute; left: 50%; margin-left: -239.81px; top: 291.05px; width: 479.61px; height: 541.28px; } /* Holds the photo and its gradient together so the entrance can move them as one. Box-for-box the same as .hero__photo-wrap, so every offset inside it — including the gradient's deliberate overflow — resolves exactly as before. */ .hero__photo-group { position: absolute; inset: 0; } /* Owns the hover scale and nothing else — see the note in index.html. */ .hero__photo-zoom { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; transition: transform 0.55s cubic-bezier(0.22, 0.75, 0.24, 1); } /* Hover-capable pointers only. A tap on a touch screen leaves the hover behind, so the photo grew and the rest of the hero dimmed and both stayed that way until something else was touched — a reaction to a tap on something that is not a control, which reads as the page having done something you cannot undo. On a phone the photo is a photograph. */ @media (hover: hover) and (pointer: fine) { .hero__photo-wrap:hover .hero__photo-zoom { transform: scale(1.06); } } /* The rest of the hero pulls back so the photo is unambiguously the subject. brightness, not opacity: heroEntrance() leaves an inline `opacity: 1` on the greeting, the badges and the stickers, which would outrank any opacity rule here. GSAP writes `filter` on .hero itself but on none of these children, so this is the one property that is free to use. Declared on hover only — CSS interpolates a filter out of `none` (GSAP notably cannot), so there is no need for an always-on brightness(1) that would give every badge a stacking context it does not otherwise have. */ .hero__greeting, .hero__title, .hero__badge { transition: filter 0.45s ease; } @media (hover: hover) and (pointer: fine) { .hero:has(.hero__photo-wrap:hover) .hero__greeting, .hero:has(.hero__photo-wrap:hover) .hero__title, .hero:has(.hero__photo-wrap:hover) .hero__badge { filter: brightness(0.62); } } .hero__photo { display: block; width: 100%; height: 100%; object-fit: cover; } .hero__photo-fade { position: absolute; left: -83.39px; top: 192.95px; width: 652px; height: 366px; background: linear-gradient(to bottom, rgba(27, 27, 27, 0) 40%, rgba(27, 27, 27, 1) 85%); pointer-events: none; } .hero__badge { position: absolute; } /* Both badges flank the hero photo, so they hang off the centre line like the photo does. Pinning them to the gutters throws them into the far corners on a wide viewport, away from the composition they belong to. */ /* Box-for-box the badge it sits in; owns the mobile tilt and nothing else. */ .hero__badge-tilt { position: absolute; inset: 0; } .hero__badge--collab { left: 50%; margin-left: 193px; top: 543.99px; width: 283px; height: 110px; } .hero__collab-text { position: absolute; left: 4px; top: 4px; width: 188px; font-family: "Hardshock", sans-serif; font-size: 19.5px; color: var(--purple); } .hero__collab-logo { position: absolute; display: block; } .hero__collab-logo--1 { left: 67.93px; top: 62.58px; width: 107.59px; height: 41.79px; } .hero__collab-logo--2 { left: 185.69px; top: 62.58px; width: 91.55px; height: 41.71px; } .hero__collab-arrow { position: absolute; left: 192px; top: 19.01px; width: 33px; height: 34px; } .hero__badge--illustrator { left: 50%; margin-left: -476px; top: 643.99px; width: 244px; height: 89px; } .hero__illustrator-text { position: absolute; left: 3px; top: 1.76px; width: 313.28px; font-family: "Hardshock", sans-serif; font-size: 26.4px; color: rgba(210, 192, 249, 0.7); line-height: 1.2; } .hero__illustrator-text span { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 28.16px; color: rgba(255, 255, 255, 0.9); text-transform: uppercase; } .hero__sticker { position: absolute; display: block; } .hero__sticker--1 { left: 157px; top: 16.72px; width: 54.69px; height: 56.79px; } .hero__sticker--2 { left: 193.43px; top: 21.31px; width: 47.92px; height: 50.58px; } /* The star doodle exists only in the phone frame. */ .hero__star { display: none; } /* Everything after .animate is one opaque layer. It has to be opaque and above the hero, or the pinned hero shows through the sections that have no background of their own (works, design stack, footer). flow-root keeps .projects' top margin inside the panel — left to collapse through, it would open a transparent strip revealing the hero photo. */ .scroll-panel { position: relative; z-index: 1; display: flow-root; background: var(--bg); } /* ===== Animate ===== */ /* Sits outside .scroll-panel so its own artwork is what rises over the hero. The PNG is transparent for its top ~93px (the cloud bumps) and opaque below, so the clouds read as a shaped reveal edge instead of a straight cut. */ /* Sits outside .scroll-panel so its own artwork is what rises over the hero. The PNG is transparent for its top ~93px (the cloud bumps) and opaque below, so the clouds read as a shaped reveal edge instead of a straight cut. Because the art is sized with `cover`, that opaque line lands at a fixed fraction of the viewport width — 93 of the source's 1680px, i.e. 5.54vw — so it slides further down as the window widens. The top padding has to track it or the heading collides with the clouds on wider screens; the -11px lands the heading a constant ~40px clear of the cloud line at any width. */ .animate { position: relative; z-index: 1; width: 100%; margin-top: 100px; padding: calc(5.54vw - 11px) 0 80px; background: url("assets/animate-bg.png") center top / cover no-repeat; } .animate__inner { position: relative; width: 100%; padding: 240px var(--gutter) 0; } .animate__heading { position: absolute; left: 50%; margin-left: -172.69px; top: 30px; width: 345.38px; height: auto; z-index: 2; } .animate__carousel { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 60px, black calc(100% - 60px), transparent 100%); } .animate__track { display: flex; /* Figma's 14px was too tight once these were real clips rather than grey boxes — neighbouring screenshots ran together. The marquee reads this value back off the computed style, so its loop stays seamless. */ gap: 32px; width: max-content; animation: animate-scroll 28s linear infinite; } .animate__carousel:hover .animate__track { animation-play-state: paused; } /* The row's whole rule: every clip is the same height and its width falls out of its own aspect ratio, so a 2.05:1 screen recording sits next to a 1.52:1 one without either being cropped or letterboxed. --ratio is written into the markup from the encoded file, so the box can never disagree with the video inside it. */ /* Every clip is 271px tall and exactly half its video's pixel width, so each one draws at a clean 2:1 downscale from its 542px-tall source. This used to be 271.44px tall with the width left to aspect-ratio, and it shimmered. Three things stacked up: the fractional height made 542 scale by 1.9967 instead of 2; box-sizing: border-box meant the 1px border ate into that, taking the content box to 269.44 and the scale to 2.0116; and the fractional widths that fell out of aspect-ratio put every edge on a sub-pixel boundary that the marquee moved a little further every frame. So the browser re-sampled the outermost pixel column on each frame and the #d9d9d9 behind it flashed through — the pale flicker along the edges. Whole numbers throughout fix it. The border is gone rather than compensated for: it was black on a near-black page, so it was invisible anyway, and it is what pushed the height off an exact factor of two. */ .animate__clip { flex: 0 0 auto; height: 271px; width: calc(var(--w) * 0.5px); /* Dark, so a clip that has not loaded yet — or any hairline the compositor leaves at an edge — reads as page rather than as a pale seam. */ background: #141414; overflow: hidden; /* Its own compositor layer: rasterised once, then only translated by the marquee, instead of being re-rasterised as the track moves. */ transform: translateZ(0); backface-visibility: hidden; } .animate__video { display: block; width: 100%; height: 100%; /* The box is cut to the clip's own ratio, so this only ever trims the sub-pixel rounding rather than any actual picture. */ object-fit: cover; /* Edge floats its own toolbar over any