/* ========================================================================== JOANIN PEREZ — Portfolio 1. Fonts 2. Tokens 3. Reset 4. Grid 5. Type 6. Chrome (header, cursor, transition, preloader, footer) 7. Components 8. Pages Colour rule: black ground, white→grey light, the coral to amber of the landing only ever in text. Type hierarchy — capitals live only at the two ends: 1 Poster Syne 700 CAPS, fitted name, "Let's talk" (the contact e-mail keeps its lowercase) 2 Title Syne 600 mixed case list titles, page / project titles, statements 3 Text Sora 300 mixed case body, clients, values 4 Label Sora 400 CAPS 11px +.07em section labels, meta, filters, HUD ========================================================================== */ /* 1. Fonts ---------------------------------------------------------------- */ @font-face { font-family: 'Syne'; src: url('../fonts/syne-latin-wght-normal.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Syne'; src: url('../fonts/syne-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Sora'; src: url('../fonts/sora-latin-wght-normal.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Sora'; src: url('../fonts/sora-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 2. Tokens --------------------------------------------------------------- */ :root { /* colour */ --bg: #000; --surface: #0b0b0b; --fg: #ededeb; --fg-2: rgba(237, 237, 235, .55); --fg-3: rgba(237, 237, 235, .3); --line: rgba(237, 237, 235, .14); /* the accent is the light of the landing, coral into amber (names stay --blue for history) */ --blue: #f0563f; /* solid accents: coral, 6:1 on black */ --blue-text: #f26b45; --flare-text: linear-gradient(90deg, #f0533d 0%, #f4763c 50%, #f8ad48 100%); --ink: #fff; /* maximum-contrast mark colour */ --sheet: #0c0c0d; /* transition sheet, cards */ --slate: #0d0d0e; --slate-mark: rgba(255,255,255,.18); --slate-text: rgba(255,255,255,.4); --header-fade: rgba(0,0,0,.6); /* Apple-style light: white falling to cool grey */ --grad: linear-gradient(180deg, #ffffff 0%, #f1f1f2 38%, #9a9aa0 100%); --grad-hover: linear-gradient(180deg, #fff 0%, #f1f1f2 19%, #9a9aa0 50%, #f0533d 50%, #f4763c 72%, #f8ad48 100%); /* type */ --font-display: 'Syne', 'Helvetica Neue', Arial, sans-serif; --font-text: 'Sora', 'Helvetica Neue', Arial, sans-serif; --font-meta: 'Sora', 'Helvetica Neue', Arial, sans-serif; /* uppercase, tracked */ --fs-list: clamp(14px, 1.22vw, 20px); --fs-micro: 11px; --fs-small: 13px; --fs-body: clamp(15px, 1.05vw, 17px); --fs-lead: clamp(20px, 1.7vw, 28px); --fs-h3: clamp(28px, 3vw, 48px); --fs-statement: clamp(32px, 4.4vw, 76px); /* grid — 4 cols mobile / 12 cols desktop */ --cols: 4; --margin: 16px; --gutter: 12px; /* spacing (8pt) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --section: clamp(96px, 16vw, 240px); --header-h: 64px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); } @media (min-width: 768px) { :root { --cols: 12; --margin: clamp(20px, 2.2vw, 40px); --gutter: clamp(12px, 1.25vw, 24px); --header-h: 72px; } } /* Alpine — snow, glacier blue, slate ink. Same system, daylight. */ html[data-theme="alpine"] { --bg: #f3f6f9; --surface: #e6edf3; --fg: #0e1a24; --fg-2: rgba(14, 26, 36, .62); --fg-3: rgba(14, 26, 36, .34); --line: rgba(14, 26, 36, .14); --blue: #c4381f; /* the same light, darker so it holds on snow */ --blue-text: #b3321b; --flare-text: linear-gradient(90deg, #b3321b 0%, #c4501b 50%, #b0620f 100%); --ink: #0e1a24; --sheet: #e6edf3; --slate: #e4ebf1; --slate-mark: rgba(14, 26, 36, .22); --slate-text: rgba(14, 26, 36, .45); --header-fade: rgba(243, 246, 249, .85); --grad: linear-gradient(180deg, #0e1a24 0%, #1d2f40 45%, #5f7387 100%); --grad-hover: linear-gradient(180deg, #0e1a24 0%, #1d2f40 22%, #5f7387 50%, #b3321b 50%, #c4501b 72%, #b0620f 100%); color-scheme: light; } /* There is no blue: accents in text are the flare of the landing as a gradient, from coral (not the deep red, which would fall under 4.5:1 on black) to amber. */ html :is(.t-blue, .pl-row.is-active .t, .chip.is-on, .kv a:hover, .pl-count) { background: var(--flare-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* letters that roll move on their own, so each carries its slice of the gradient: a wide band, shifted letter by letter */ html :is(.roll > span + span, .h-nav a[aria-current="page"] .roll > span) .ch { background: var(--flare-text); background-size: 900% 100%; background-position: calc(var(--i) * 9%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; } /* 3. Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: clip; } body { background: var(--bg); color: var(--fg); font-family: var(--font-text); font-size: var(--fs-body); font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, video, canvas, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--ink); color: var(--bg); } :focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } /* 4. Grid ----------------------------------------------------------------- */ /* Children placed with --c (desktop, 12 cols) and --cm (mobile, 4 cols). */ .grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); } .grid > * { grid-column: var(--cm, 1 / -1); min-width: 0; } @media (min-width: 768px) { .grid > * { grid-column: var(--c, 1 / -1); } } .grid-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; display: none; } .grid-overlay.is-on { display: grid; } .grid-overlay span { background: rgba(255, 255, 255, .04); border-inline: 1px solid rgba(255, 255, 255, .1); grid-column: auto; } /* 5. Type ----------------------------------------------------------------- */ .t-label { font-family: var(--font-meta); font-size: var(--fs-micro); line-height: 1.4; font-weight: 400; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); } .t-label.is-bright { color: var(--fg); } .t-muted { color: var(--fg-2); } .t-blue { color: var(--blue-text); } .t-num { font-variant-numeric: tabular-nums; } /* Gradient light on display type. Split text carries it on each glyph. */ .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .grad.is-split { background: none; color: var(--fg); } .grad.is-split .ci, .grad.is-split .wi { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Hover wipe: the light slides down into the flare (tertiary colour) */ .grad-hover { background-image: var(--grad-hover); background-size: 100% 200%; background-position: 0 0; transition: background-position .8s var(--ease-io); } a:hover .grad-hover, button:hover .grad-hover { background-position: 0 100%; } /* split-text helpers */ .w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .c { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .w, .c { text-indent: 0; } .w > .wi, .c > .ci { display: inline-block; will-change: transform; } /* Roll — letters swap vertically on hover, staggered */ .roll { display: inline-grid; overflow: clip; vertical-align: top; } .roll > span { grid-area: 1 / 1; white-space: pre; } .roll .ch { display: inline-block; transition: transform .55s var(--ease-out); transition-delay: calc(var(--i) * 14ms); } .roll > span + span .ch { transform: translateY(105%); } .roll > span + span { color: var(--blue-text); } a:hover .roll > span:first-child .ch, a:focus-visible .roll > span:first-child .ch, button:hover .roll > span:first-child .ch { transform: translateY(-105%); } a:hover .roll > span + span .ch, a:focus-visible .roll > span + span .ch, button:hover .roll > span + span .ch { transform: translateY(0); } /* Fit text — spans its container exactly (App.registerFit) */ .fit-wrap { width: 100%; } .fit { display: block; width: max-content; white-space: nowrap; text-transform: uppercase; font-family: var(--font-display); font-weight: 700; line-height: .78; letter-spacing: -.04em; } /* 6. Chrome --------------------------------------------------------------- */ /* Header: name / city + live clock (col 4) / nav */ .site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); align-items: center; font-size: var(--fs-small); font-weight: 400; line-height: 1.2; pointer-events: none; } .site-header::before { content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; background: linear-gradient(180deg, var(--header-fade), transparent); } .site-header a { pointer-events: auto; } .h-name { --cm: 1 / 3; --c: 1 / 4; font-weight: 500; white-space: nowrap; width: fit-content; display: inline-flex; align-items: center; gap: 10px; } .h-mark { height: 18px; width: 36px; margin-block: -4px; color: var(--fg); } .h-clock { --cm: 1 / 3; --c: 4 / 8; white-space: nowrap; font-variant-numeric: tabular-nums; } .h-clock .paren { color: var(--fg-2); } .h-clock .blink { animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: .25; } } .h-nav { --cm: 3 / 5; --c: 8 / 13; display: flex; justify-content: flex-end; gap: clamp(28px, 4.2vw, 72px); white-space: nowrap; } .h-nav a[aria-current="page"] { color: var(--blue-text); } @media (max-width: 767px) { .site-header { align-items: start; padding-top: 16px; row-gap: 4px; height: auto; } .site-header::before { bottom: -40px; } /* phones: text scrolls right under the header, so off the landing the fade starts solid */ body:not([data-page="home"]) .site-header::before { background: linear-gradient(180deg, var(--bg) 40%, transparent); } .h-name, .h-nav { grid-row: 1; } .h-clock { grid-row: 2; font-size: var(--fs-micro); color: var(--fg-2); } .h-nav { gap: 18px; } } /* Cursor — a point and a viewfinder that closes on what you can open */ @media (hover: hover) and (pointer: fine) { html.has-cur, html.has-cur * { cursor: none !important; } } .cur-dot, .cur-frame { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s; } html.cur-in .cur-dot, html.cur-in .cur-frame { opacity: 1; } .cur-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #fff; } .cur-frame { width: 0; height: 0; } .cur-box { position: absolute; left: 50%; top: 50%; width: var(--fs, 14px); height: var(--fs, 14px); transform: translate(-50%, -50%); } .cur-box i { position: absolute; width: 5px; height: 5px; border: 0 solid #fff; opacity: var(--fo, 0); } .cur-box i:nth-child(1) { left: 0; top: 0; border-top-width: 1px; border-left-width: 1px; } .cur-box i:nth-child(2) { right: 0; top: 0; border-top-width: 1px; border-right-width: 1px; } .cur-box i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px; } .cur-box i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; } .cur-label { position: absolute; top: 50%; left: calc(var(--fs, 14px) / 2 + 10px); transform: translateY(-50%); font-family: var(--font-meta); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #fff; clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease-out); } .cur-frame.has-label .cur-label { clip-path: inset(0 0 0 0); } @media (hover: none), (pointer: coarse) { .cur-dot, .cur-frame { display: none; } } /* Page transition — a dark sheet carrying the destination name */ .pt { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--sheet); clip-path: inset(100% 0 0 0); } .pt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fg-3); } html.is-entering .pt { clip-path: inset(0 0 0 0); } .pt-label { position: absolute; left: var(--margin); bottom: var(--margin); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1; letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Preloader */ .preloader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: none; } html.has-preloader .preloader { display: block; } .pl-top { position: absolute; inset: 0 0 auto; height: var(--header-h); align-items: center; font-size: var(--fs-small); font-weight: 400; } .pl-top > :first-child { --cm: 1 / 3; --c: 1 / 4; } .pl-top > :last-child { --cm: 3 / 5; --c: 10 / 13; text-align: right; } .pl-name { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; white-space: nowrap; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(40px, 9vw, 150px); line-height: .9; letter-spacing: -.035em; } .pl-count { position: absolute; left: var(--margin); bottom: calc(var(--margin) + 6px); font-family: var(--font-display); font-weight: 700; line-height: .8; letter-spacing: -.04em; font-size: clamp(64px, 12vw, 200px); color: var(--blue); font-variant-numeric: tabular-nums; } .pl-meta { position: absolute; right: var(--margin); bottom: var(--margin); text-align: right; } .pl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fg-2); transform-origin: left; transform: scaleX(0); } /* Footer */ .site-footer { padding-top: var(--section); padding-bottom: var(--margin); } .ft-cta a { display: block; } .ft-row { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--line); row-gap: var(--s-5); align-items: start; font-size: var(--fs-small); font-weight: 400; } .ft-row > :nth-child(1) { --c: 1 / 4; } .ft-row > :nth-child(2) { --c: 4 / 7; } .ft-row > :nth-child(3) { --c: 7 / 10; } .ft-row > :nth-child(4) { --c: 10 / 13; text-align: right; } @media (max-width: 767px) { .ft-row > :nth-child(odd) { --cm: 1 / 3; } .ft-row > :nth-child(even) { --cm: 3 / 5; text-align: left; } } .ft-row .t-label { margin-bottom: var(--s-2); display: block; } .ft-row a { display: block; width: fit-content; } .ft-row > :nth-child(4) a { margin-left: auto; } /* 7. Components ----------------------------------------------------------- */ /* Media — real image/video, or a slate until content lands */ .media { position: relative; overflow: hidden; background: var(--surface); aspect-ratio: var(--ratio, 4/5); } .media-inner { position: absolute; inset: 0; will-change: transform; } /* phones: no parallax, so no layer kept per photo (memory is what makes iOS stutter) */ @media (max-width: 767px) { .media-inner { will-change: auto; } } .media-inner > img, .media-inner > video { width: 100%; height: 100%; object-fit: cover; } .slate { position: absolute; inset: 0; background: var(--slate); } .slate::before, .slate::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--slate-mark); } .slate::before { width: 13px; height: 1px; margin: 0 0 0 -6px; } .slate::after { width: 1px; height: 13px; margin: -6px 0 0 0; } .slate-in { position: absolute; inset: 10px; border: 1px solid var(--line); } .slate span { position: absolute; font-family: var(--font-meta); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-text); white-space: nowrap; font-variant-numeric: tabular-nums; } .slate .s-tl { left: 20px; top: 16px; } .slate .s-tr { right: 20px; top: 16px; } .slate .s-bl { left: 20px; bottom: 16px; } .slate .s-br { right: 20px; bottom: 16px; } /* Project list — Hovig: bold uppercase title, " - ", tracked client. The hovered row stays lit, the rest fall to grey, and a 16:9 preview rides to the right of the cursor. Used on Landing, Work and Project. */ .plist { position: relative; padding-inline: var(--margin); font-size: var(--fs-list); } .pl-row a { display: flex; align-items: baseline; padding-block: .42em; overflow: clip; transition: opacity .25s cubic-bezier(.12, .58, .27, 1); } .pl-row .in { display: flex; align-items: baseline; flex: 1; min-width: 0; will-change: transform; } .pl-row .t { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; white-space: nowrap; } .pl-row .cl { margin-left: .9em; } .pl-row .cl { font-weight: 300; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-row .meta { margin-left: auto; padding-left: var(--s-4); font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .pl-row.is-hidden { display: none; } @media (hover: hover) and (pointer: fine) { .plist.is-hovering .pl-row a { opacity: .22; } .plist.is-hovering .pl-row.is-active a { opacity: 1; } .pl-row.is-active .t { color: var(--blue-text); } .pl-row .t { transition: color .3s; } } @media (max-width: 767px) { .pl-row .in { flex-wrap: wrap; } .pl-row .cl { flex-basis: 100%; margin-left: 0; font-size: var(--fs-micro); color: var(--fg-2); } } .vcursor { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; width: clamp(320px, 40vw, 780px); aspect-ratio: 16/9; overflow: hidden; opacity: 0; transition: opacity 1s cubic-bezier(.29, .23, .05, 1); } .vcursor.is-on { opacity: 1; } .vcursor .media { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; } .vcursor .media.is-on { opacity: 1; } .vcursor .media-inner { transition: transform 1s cubic-bezier(.12, .89, .55, 1); transform: scale(1.15); } .vcursor .media.is-on .media-inner { transform: scale(1); } @media (hover: none), (max-width: 767px) { .vcursor { display: none; } } /* Section head: [ Label ] …… right */ .sec-head { align-items: baseline; padding-bottom: var(--s-6); } .sec-head > :nth-child(1) { --cm: 1 / 3; --c: 1 / 7; } .sec-head > :nth-child(2) { --cm: 3 / 5; --c: 7 / 13; justify-self: end; } /* Chips (filters) */ .chip { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--font-meta); font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); transition: color .3s; } .chip sup { font-size: 8px; font-variant-numeric: tabular-nums; } .chip:hover, .chip.is-on { color: var(--fg); } .chip.is-on { color: var(--blue-text); } /* Marquee */ .marquee { overflow: hidden; white-space: nowrap; } .marquee-track { display: inline-flex; will-change: transform; } .marquee-track > * { flex: none; } /* 8. Pages ---------------------------------------------------------------- */ main { position: relative; } /* ---- Landing hero: shared ---- */ .hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--bg); } .hero-info { position: absolute; left: 0; right: 0; bottom: calc(var(--margin) + var(--name-h, 0px) + var(--s-5)); z-index: 3; align-items: end; font-size: var(--fs-small); font-weight: 400; pointer-events: none; } .hero-info > :nth-child(1) { --cm: 1 / 3; --c: 1 / 4; } .hero-info > :nth-child(2) { --cm: 3 / 5; --c: 4 / 8; color: var(--fg-2); } .hero-info > :nth-child(3) { --c: 10 / 13; text-align: right; } @media (max-width: 767px) { .hero-info > :nth-child(3) { display: none; } } .hero-name { position: absolute; left: var(--margin); right: var(--margin); bottom: var(--margin); z-index: 3; pointer-events: none; } /* ---- Landing: the Alps ---- */ .alps { position: relative; height: 480vh; height: 480svh; } .alps-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); } .alps-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .alps-mask { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } /* Black: the photograph as a GPU layer (moved and scaled by heroAlps), black all around, holes by mask */ .ph-layer, .ph-sheen { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; transform-origin: 0 0; will-change: transform; } .ph-layer { background: var(--bg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; } .ph-layer img { position: absolute; display: block; max-width: none; } .ph-sheen { mix-blend-mode: screen; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .ph-sheen i { position: absolute; will-change: transform; background: linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .12) 56%, rgba(255, 255, 255, .3) 64%, transparent 70%); } .no-gl .alps-canvas { display: none; } /* sky: black at night, a pale alpine gradient by day (the canvas is transparent) */ html[data-theme="alpine"] .alps-stage { background: linear-gradient(180deg, #d9dbde 0%, #e6e7e9 40%, #eeeff0 70%, #f0f1f2 100%); } /* The light of Black: a grained radial gradient behind the alpinist that trails the cursor. His cut-out (the photo centred in a canvas three times its size, inlined so it also works from a file on disk) masks it, positioned by frame() through --mw --mh --mx --my; the light also dies out above the info line */ .alps-halo { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen; -webkit-mask-image: url(data:image/png;base64,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AFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAAAlCGAAAABKEMAAAACUIIABAAAoQQADAABQggAGAACgBAEMAABACQIYAACAEgQwAAAAJQhgAAAAShDAAAAAlCCAAQAAKEEAAwAAUIIABgAAoAQBDAAAQAkCGAAAgBIEMAAAACUIYAAAAEoQwAAAAJQggAEAAChBAAMAAFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAAAlCGAAAABKEMAAAACUIIABAAAoQQADAABQggAGAACgBAEMAABACQIYAACAEgQwAAAAJQhgAAAAShDAAAAAlCCAAQAAKEEAAwAAUIIABgAAoAQBDAAAQAkCGAAAgBIEMAAAACUIYAAAAEoQwAAAAJQggAEAAChBAAMAAFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAAAlCGAAAABKEMAAAACUIIABAAAoQQADAABQggAGAACgBAEMAABACQIYAACAEgQwAAAAJQhgAAAAShDAAAAAlCCAAQAAKEEAAwAAUIIABgAAoAQBDAAAQAkCGAAAgBIEMAAAACUIYAAAAEoQwAAAAJQggAEAAChBAAMAAFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAAAlCGAAAABKEMAAAACUIIABAAAoQQADAABQggAGAACgBAEMAABACQIYAACAEgQwAAAAJQhgAAAAShDAAAAAlCCAAQAAKEEAAwAAUIIABgAAoAQBDAAAQAkCGAAAgBIEMAAAACUIYAAAAEoQwAAAAJQggAEAAChBAAMAAFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAABRwf8Bc3pW9o5VHl8AAAAASUVORK5CYII=), linear-gradient(180deg, #000 55%, transparent 74%); mask-image: url(data:image/png;base64,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AFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAAAlCGAAAABKEMAAAACUIIABAAAoQQADAABQggAGAACgBAEMAABACQIYAACAEgQwAAAAJQhgAAAAShDAAAAAlCCAAQAAKEEAAwAAUIIABgAAoAQBDAAAQAkCGAAAgBIEMAAAACUIYAAAAEoQwAAAAJQggAEAAChBAAMAAFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAAAlCGAAAABKEMAAAACUIIABAAAoQQADAABQggAGAACgBAEMAABACQIYAACAEgQwAAAAJQhgAAAAShDAAAAAlCCAAQAAKEEAAwAAUIIABgAAoAQBDAAAQAkCGAAAgBIEMAAAACUIYAAAAEoQwAAAAJQggAEAAChBAAMAAFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAAAlCGAAAABKEMAAAACUIIABAAAoQQADAABQggAGAACgBAEMAABACQIYAACAEgQwAAAAJQhgAAAAShDAAAAAlCCAAQAAKEEAAwAAUIIABgAAoAQBDAAAQAkCGAAAgBIEMAAAACUIYAAAAEoQwAAAAJQggAEAAChBAAMAAFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAAAlCGAAAABKEMAAAACUIIABAAAoQQADAABQggAGAACgBAEMAABACQIYAACAEgQwAAAAJQhgAAAAShDAAAAAlCCAAQAAKEEAAwAAUIIABgAAoAQBDAAAQAkCGAAAgBIEMAAAACUIYAAAAEoQwAAAAJQggAEAAChBAAMAAFCCAAYAAKAEAQwAAEAJAhgAAIASBDAAAABRwf8Bc3pW9o5VHl8AAAAASUVORK5CYII=), linear-gradient(180deg, #000 55%, transparent 74%); -webkit-mask-size: var(--mw) var(--mh), 100% 100%; mask-size: var(--mw) var(--mh), 100% 100%; -webkit-mask-position: var(--mx) var(--my), 0 0; mask-position: var(--mx) var(--my), 0 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; background: #000; } /* the glow: a circle the old size, moved by transform (see heroAlps) */ .halo-glow { position: absolute; left: 0; top: 0; width: 92vmax; height: 92vmax; margin: -46vmax 0 0 -46vmax; will-change: transform; background: radial-gradient(closest-side, #f8ad48 0%, #f4763c 14%, #f0533d 28%, #b8231f 42%, #4f0909 58%, #000 72%); } /* grain: a noise tile overlaid on the light (on black it stays black), jittered like film by transform */ .alps-halo::after { content: ""; position: absolute; inset: -180px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; will-change: transform; animation: halo-grain .5s steps(5) infinite; } @keyframes halo-grain { to { transform: translate3d(157px, 83px, 0); } } @media (prefers-reduced-motion: reduce) { .alps-halo::after { animation: none; } } .alps-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2; pointer-events: none; visibility: hidden; background: linear-gradient(180deg, transparent, var(--bg) 88%); } .alps-copy { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; padding-inline: var(--margin); } .ac { grid-area: 1 / 1; visibility: hidden; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 7.4vw, 136px); line-height: .95; letter-spacing: -.04em; /* gradient-clipped text repaints on every scale step unless it has a layer of its own */ will-change: transform, opacity; } .alps .hero-name .ci { will-change: transform; } .alps-load { position: absolute; left: 0; right: 0; bottom: var(--margin); z-index: 6; align-items: end; pointer-events: none; } .alps-load > :nth-child(1) { --cm: 1 / 3; --c: 1 / 4; } .alps-load > :nth-child(2) { --cm: 3 / 5; --c: 4 / 8; } .alps-load > :nth-child(3) { --c: 10 / 13; text-align: right; } @media (max-width: 767px) { .alps-load > :nth-child(2) { text-align: right; } .alps-load > :nth-child(3) { display: none; } } .ld-alt { font-family: var(--font-text); font-weight: 300; font-size: clamp(40px, 5vw, 88px); line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; } .ld-unit { font-family: var(--font-meta); font-size: var(--fs-small); font-weight: 400; letter-spacing: .07em; text-transform: uppercase; margin-left: .5em; color: var(--fg-2); } .alps-hint { position: absolute; left: 50%; bottom: calc(var(--margin) + clamp(60px, 6.4vw, 112px)); z-index: 4; transform: translateX(-50%); visibility: hidden; font-size: 13px; letter-spacing: .2em; text-align: center; } .alps-hint::after { content: ''; display: block; width: 1px; height: 30px; margin: 10px auto 0; background: currentColor; animation: hint-line 2s var(--ease-io) infinite; } @keyframes hint-line { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* the loader labels stay through the flight: white over a shade at the foot */ .alps-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-io); background: linear-gradient(180deg, rgba(4, 7, 12, 0), rgba(4, 7, 12, .35) 45%, rgba(4, 7, 12, .7)); } .is-lit .alps-shade { opacity: 1; } .alps-load, .alps-load .t-label, .alps-hint { transition: color 1.2s var(--ease-io); } .is-lit .alps-load .grad { --grad: linear-gradient(180deg, #fff 0%, #f2f5f8 60%, #d3dce5 100%); } .is-lit .alps-load .t-label, .is-lit .alps-load .ld-unit, .is-lit .alps-hint { color: #fff; } .alps-load .t-label { font-size: 13px; letter-spacing: .14em; } .alps .js-end { visibility: hidden; } /* the info line sits over the sweater: full white with a soft shadow, never muted */ .alps .hero-info { text-shadow: 0 0 14px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .6); } .alps .hero-info > :nth-child(2), .alps .hero-info > :nth-child(3) { color: var(--fg); } /* phones: the role on its own line, then where and the status side by side */ @media (max-width: 767px) { .alps .hero-info > :nth-child(1) { --cm: 1 / -1; } .alps .hero-info > :nth-child(2) { --cm: 1 / 3; grid-row: 2; } .alps .hero-info > :nth-child(3) { display: block; --cm: 3 / 5; grid-row: 2; text-align: right; } } /* Alpine: the range as a photograph in depth planes (peaks.js) */ .is-peaks .alps-canvas { display: none; } .peaks { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-io); } .peaks.is-ready { opacity: 1; } .pk-cam { position: absolute; left: 0; top: 0; will-change: transform; } .pk-l { position: absolute; will-change: transform; } .pk-l img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; } .pk-skirt { position: absolute; left: 0; right: 0; top: 99.6%; height: 90%; background: linear-gradient(180deg, #090c15 0%, #6d7a8a 14%, #d9e1e9 30%, #eef2f6 46%); } .pk-mist { overflow: hidden; } .pk-mist > i, .pk-veil b { position: absolute; left: 0; top: 0; height: 100%; background: url(../media/peaks/mist.webp) repeat-x 0 0 / auto 100%; will-change: transform; } .pk-slot { left: 0; top: 0; width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; padding: var(--slot-top, 30vh) var(--margin) 0; } .pk-word { position: relative; max-width: 100%; } .pk-word .ac { position: relative; grid-area: auto; } .pk-scrim { position: absolute; inset: -110% -24%; opacity: 0; background: radial-gradient(closest-side, rgba(7, 13, 24, .42), rgba(7, 13, 24, .22) 45%, rgba(7, 13, 24, .07) 75%, rgba(7, 13, 24, 0)); } /* the sky needs only a breath of shade under the white */ .pk-slot[data-slot="0"] .pk-scrim { background: radial-gradient(closest-side, rgba(16, 52, 92, .34), rgba(16, 52, 92, .16) 50%, rgba(16, 52, 92, 0)); } .pk-slot[data-slot="0"] { --slot-top: 9svh; } .pk-slot[data-slot="1"] { --slot-top: 44svh; } .pk-slot[data-slot="2"] { --slot-top: 52svh; } .ac.on-dark { --grad: linear-gradient(180deg, #fff 0%, #f4f7fa 60%, #dbe4ec 100%); } .pk-veil { position: absolute; inset: 0; background: #eef2f6; will-change: opacity; } .pk-veil i { position: absolute; left: -10%; right: -10%; height: 70%; overflow: hidden; opacity: .9; } .pk-veil i:first-child { top: -6%; } .pk-veil i:last-child { top: 40%; transform: scaleX(-1); } @media (max-width: 767px) { .pk-slot[data-slot="0"] { --slot-top: 11svh; } .pk-slot[data-slot="1"] { --slot-top: 42svh; } .pk-slot[data-slot="2"] { --slot-top: 48svh; } } /* ---- Landing D: the patch, a mirrored nav and a band of light ---- The nav sits on the 12 columns and mirrors around the patch: About opens column 1 and Contact closes column 12, Work opens column 3 and Archive closes column 10. Top and bottom keep the page margin; the nav is centred on the patch's height. */ .hero-d { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #000; color: #fff; } .d-flare { position: absolute; top: 0; right: 0; width: 44%; height: 100%; display: block; } .no-flare .d-flare { display: none; } .no-flare::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 34%; background: linear-gradient(90deg, #000 0%, #4f0909 30%, #c4282a 55%, #ef5a40 72%, #f6a73a 88%, #fff2c8 100%); pointer-events: none; } .d-head { --patch-w: clamp(132px, 10.6vw, 214px); position: absolute; z-index: 2; top: var(--margin); left: var(--margin); right: var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; min-height: calc(var(--patch-w) * .5632); } .d-link { font-family: var(--font-text); font-size: clamp(13px, 1.04vw, 19px); font-weight: 400; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; width: fit-content; } .d-link:nth-child(1) { grid-column: 1 / 3; justify-self: start; } .d-link:nth-child(2) { grid-column: 3 / 5; justify-self: start; } .d-patch { grid-column: 6 / 8; justify-self: center; grid-row: 1; width: var(--patch-w); margin: 0; line-height: 0; transform: rotate(-1.5deg); } .d-patch img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); } .d-link:nth-child(4) { grid-column: 9 / 11; justify-self: end; } .d-link:nth-child(5) { grid-column: 11 / 13; justify-self: end; } .d-link, .d-patch { grid-row: 1; } .d-scroll { position: absolute; z-index: 2; left: 50%; bottom: var(--margin); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: clamp(11px, .78vw, 14px); letter-spacing: .16em; text-transform: uppercase; line-height: 1; } .d-scroll i { position: relative; display: block; width: 1px; height: clamp(44px, 4.4vw, 72px); margin-bottom: 6px; background: rgba(255, 255, 255, .28); } .d-scroll i::before { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: top; animation: d-run 2.2s var(--ease-io) infinite; } .d-scroll i::after { content: ''; position: absolute; left: 50%; top: 100%; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid #fff; transform: translateX(-50%); } @keyframes d-run { 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; } } /* the site header waits until the landing has scrolled away */ .is-d .site-header { transform: translateY(-100%); opacity: 0; transition: transform .7s var(--ease-io), opacity .5s; } .is-d.d-past .site-header { transform: none; opacity: 1; } @media (max-width: 767px) { /* phones: the patch on top, the four links in one row beneath it, still mirrored: outer links on the margins, inner ones a quarter in */ .d-head { --patch-w: clamp(124px, 38vw, 168px); grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; min-height: 0; } .d-patch { grid-column: 1 / -1; grid-row: 1; } .d-link { grid-row: 2; font-size: 12px; letter-spacing: .1em; } .d-link:nth-child(1) { grid-column: 1; justify-self: start; } .d-link:nth-child(2) { grid-column: 2; justify-self: start; } .d-link:nth-child(4) { grid-column: 3; justify-self: end; } .d-link:nth-child(5) { grid-column: 4; justify-self: end; } .d-flare { width: 62%; } } /* Index card — a project set in type, used until real frames arrive */ .card { position: relative; width: 100%; aspect-ratio: var(--ratio, 4/5); background: var(--sheet); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(10px, 1vw, 16px); overflow: hidden; } .card-i, .card-m { color: var(--fg-2); } .card-t { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.9vw, 34px); line-height: 1; letter-spacing: -.03em; } /* A — Trail */ .trail { position: absolute; inset: 0; z-index: 1; } .trail-item { position: absolute; left: 0; top: 0; width: clamp(150px, 14vw, 250px); opacity: 0; will-change: transform, clip-path; pointer-events: none; } .trail-item > * { transform-origin: center; } .trail-item .media { width: 100%; } /* C — Format */ .fmt { position: absolute; left: var(--margin); right: var(--margin); top: calc(var(--header-h) + var(--s-6)); bottom: calc(var(--margin) + var(--name-h, 0px) + var(--s-9)); z-index: 1; display: grid; place-items: center; } .fmt-box { position: relative; width: 300px; height: 375px; } .fmt-in { position: absolute; inset: 0; overflow: hidden; } .fmt-in > * { width: 100%; height: 100%; } .fmt-in .card { aspect-ratio: auto; height: 100%; border: 0; } .fmt-in .card-t { font-size: clamp(22px, 2.6vw, 48px); } /* print crop marks, outside each corner */ .cm { position: absolute; width: 16px; height: 16px; } .cm::before, .cm::after { content: ''; position: absolute; background: var(--fg-2); } .cm::before { width: 16px; height: 1px; } .cm::after { width: 1px; height: 16px; } .cm.tl { left: -24px; top: -24px; } .cm.tl::before { left: 0; bottom: 0; } .cm.tl::after { right: 0; top: 0; } .cm.tr { right: -24px; top: -24px; } .cm.tr::before { right: 0; bottom: 0; } .cm.tr::after { left: 0; top: 0; } .cm.bl { left: -24px; bottom: -24px; } .cm.bl::before { left: 0; top: 0; } .cm.bl::after { right: 0; bottom: 0; } .cm.br { right: -24px; bottom: -24px; } .cm.br::before { right: 0; top: 0; } .cm.br::after { left: 0; bottom: 0; } .fmt-read { position: absolute; left: 0; right: 0; bottom: calc(var(--margin) + var(--name-h, 0px) + var(--s-9) - 28px); z-index: 2; pointer-events: none; } .fmt-read > :nth-child(1) { --cm: 1 / 3; --c: 1 / 4; } .fmt-read > :nth-child(2) { --cm: 3 / 5; --c: 10 / 13; text-align: right; font-variant-numeric: tabular-nums; } .hero-c .hero-info { display: none; } /* Review-only switcher */ .switcher { position: fixed; right: 10px; top: 50%; z-index: 60; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-meta); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; } .switcher span { padding: 6px 0 4px; color: var(--fg-2); writing-mode: vertical-rl; transform: rotate(180deg); } .switcher button { width: 28px; height: 28px; border-radius: 50%; color: var(--fg-2); transition: background .3s, color .3s; } .switcher button.is-on { background: var(--ink); color: var(--bg); } /* ---- Landing: selected projects ---- */ .selected { padding-top: var(--section); min-height: 70vh; } /* ---- Work ---- */ .page-top { padding-top: calc(var(--header-h) + clamp(96px, 24vh, 280px)); } .wh-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 2.6vw, 46px); line-height: 1.05; letter-spacing: -.03em; } .wh-title .arrow { color: var(--fg-3); font-family: var(--font-text); font-weight: 300; margin-right: .2em; } .work-tools { margin-top: var(--s-8); margin-bottom: var(--s-7); align-items: baseline; row-gap: var(--s-3); } .work-tools > .t-label { --cm: 1 / -1; --c: 1 / 4; } .work-tools .filters { --cm: 1 / -1; --c: 4 / 13; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); } .work .plist { min-height: 50vh; } /* ---- About: shared ---- */ .ab-label { display: block; margin-bottom: var(--s-3); } .ab-gap { margin-top: var(--s-6); } .ab-list { font-size: var(--fs-small); font-weight: 400; line-height: 1.55; } .ab-xp { font-size: var(--fs-small); font-weight: 400; line-height: 1.45; } .ab-xp li { display: grid; grid-template-columns: 9em 1fr; gap: var(--s-4); padding-block: 10px; border-top: 1px solid var(--line); } .ab-xp li:last-child { border-bottom: 1px solid var(--line); } .ab-xp .yr { font-family: var(--font-meta); font-size: var(--fs-micro); color: var(--fg-2); font-variant-numeric: tabular-nums; padding-top: 2px; } .ab-xp .what span { display: block; color: var(--fg-2); } .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-4); font-size: var(--fs-small); font-weight: 400; } .kv dt { color: var(--fg-2); } .kv dd { text-align: right; } .kv a:hover { color: var(--blue-text); } .ab-text p + p { margin-top: 1em; } /* About A — Statement */ .about-a .ab-head { row-gap: var(--s-6); } .about-a .ab-statement { --c: 1 / 12; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-statement); line-height: 1.02; letter-spacing: -.035em; text-indent: calc((100% - var(--gutter) * 10) / 11 * 3 + var(--gutter) * 3); } @media (max-width: 767px) { .about-a .ab-statement { text-indent: 0; } } .about-a .ab-body { padding-top: var(--section); row-gap: var(--s-8); align-items: start; } .about-a .ab-portrait { --c: 1 / 5; } /* the sheet of ID photos lies a little askew, left side lower (the wrapper turns, so the reveal clip turns with it) */ .about-a .ab-portrait > [data-reveal] { transform: rotate(-2deg); } @media (min-width: 768px) { .about-a .ab-portrait { position: sticky; top: calc(var(--header-h) + var(--s-6)); } } .about-a .ab-right { --c: 7 / 13; display: grid; gap: var(--s-9); } .about-a .ab-text { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.01em; } .about-a .ab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); } /* About: personal photos, inline in the statement and in a strip pinned while it moves sideways */ .ab-chip { display: inline-block; width: 1.9em; height: .74em; margin-inline: .14em; border-radius: 999px; overflow: hidden; vertical-align: -.06em; background: var(--surface); } .ab-chip img { display: block; width: 100%; height: 100%; object-fit: cover; } .ab-strip { --ph: clamp(260px, 44svh, 420px); margin-top: var(--section); } .ab-strip-head > :first-child { --c: 1 / 7; } .ab-strip-head > :last-child { --c: 7 / 13; text-align: right; } .ab-strip-head { --cm: 1 / -1; row-gap: 0; } .ab-track { display: flex; gap: var(--gutter); padding: var(--s-4) var(--margin) 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .ab-track::-webkit-scrollbar { display: none; } .ab-track { scroll-padding-inline: var(--margin); } /* phones: no photo wider than the screen, so the next one always peeks in */ @media (max-width: 767px) { .ab-strip-head { display: flex; justify-content: space-between; } .ab-ph { max-width: 78vw; } } .ab-ph { flex: none; width: calc(var(--ph) * var(--rn)); scroll-snap-align: start; } .ab-ph .media { height: var(--ph); aspect-ratio: auto; } .ab-ph figcaption { margin-top: var(--s-2); } @media (min-width: 768px) { .ab-strip { --ph: clamp(320px, 62svh, 720px); } .ab-strip.is-pinned { overflow-x: clip; min-height: 100svh; padding-top: calc(var(--header-h) + var(--s-6)); display: flex; flex-direction: column; justify-content: center; } .ab-strip.is-pinned .ab-track { width: max-content; overflow: visible; scroll-snap-type: none; padding-right: var(--margin); } } /* ---- Contact ---- */ .contact { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding-top: calc(var(--header-h) + clamp(64px, 18vh, 200px)); padding-bottom: var(--margin); } .contact-lead { --cm: 1 / -1; --c: 4 / 9; font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -.01em; } .contact-lead .t-label { display: block; margin-bottom: var(--s-4); } .contact-mail { margin-top: var(--s-8); display: block; width: 100%; text-align: left; } .contact-mail .m-item { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 13vw, 240px); line-height: .9; letter-spacing: -.045em; padding-right: .35em; } .contact-mail .m-dot { display: inline-block; width: .12em; height: .12em; border-radius: 50%; background: #9a9aa0; vertical-align: .32em; margin-left: .35em; } .contact-meta { margin-top: var(--s-9); padding-top: var(--s-4); position: relative; row-gap: var(--s-5); align-items: start; font-size: var(--fs-small); font-weight: 400; } .contact-meta::before { content: ''; position: absolute; left: var(--margin); right: var(--margin); top: 0; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(var(--line-s, 1)); } .contact-meta > :nth-child(1) { --cm: 1 / 3; --c: 1 / 4; } .contact-meta > :nth-child(2) { --cm: 3 / 5; --c: 4 / 7; } .contact-meta > :nth-child(3) { --cm: 1 / 3; --c: 7 / 10; } .contact-meta > :nth-child(4) { --cm: 3 / 5; --c: 10 / 13; } .contact-meta .t-label { display: block; margin-bottom: var(--s-2); } .contact-meta a { display: block; width: fit-content; } /* ---- Project: one head — title, brief and facts on the left, image right ---- */ .pj-top { padding-top: calc(var(--header-h) + var(--s-6)); } .pj-head { row-gap: var(--s-7); align-items: start; } .pj-side { --c: 1 / 5; display: grid; gap: var(--s-7); } .pj-hero { --c: 5 / 13; } @media (min-width: 768px) { .pj-hero { position: sticky; top: calc(var(--header-h) + var(--s-6)); } } .pj-hero .media { --ratio: 16/10; } .pj-kicker { display: flex; justify-content: space-between; } .pj-title { margin-top: calc(var(--s-7) * -1 + var(--s-4)); font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 3.6vw, 64px); line-height: .98; letter-spacing: -.035em; } .pj-brief { display: grid; gap: var(--s-5); } .pj-brief .brief-text { white-space: pre-line; font-size: var(--fs-lead); line-height: 1.3; font-weight: 300; letter-spacing: -.01em; } .pj-brief .brief-sub { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--s-4); font-size: var(--fs-small); font-weight: 400; line-height: 1.55; } .pj-brief .brief-sub .t-label { padding-top: 2px; } .pj-meta { font-size: var(--fs-small); font-weight: 400; } .pj-meta li { position: relative; padding-block: 9px; display: flex; align-items: baseline; gap: .8em; } .pj-meta li:first-child::before, .pj-meta li::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(var(--line-s, 1)); } .pj-meta li:first-child::before { top: 0; } .pj-meta li::after { bottom: 0; } .pj-meta b { font-weight: 400; font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--fg-2); min-width: 10em; flex-shrink: 0; } .pj-meta span { color: var(--fg); } /* Gallery: every block sits on the 12 columns, rows share their height */ .gal { --gap-g: clamp(8px, 1.25vw, 20px); padding-top: var(--section); } .gal-block { row-gap: var(--gap-g); align-items: start; } .gal-block + .gal-block { margin-top: var(--gap-g); } .gal-block.quad > * { --cm: span 2; --c: span 3; } .gal-block.trio > * { --cm: span 2; --c: span 4; } .gal-block.full > * { --c: 1 / -1; } .gal-block.pair > :nth-child(1) { --cm: 1 / -1; --c: 1 / 7; } .gal-block.pair > :nth-child(2) { --cm: 1 / -1; --c: 7 / 13; } .gal-block.split { align-items: stretch; } .gal-block.split > :nth-child(1) { --cm: 1 / -1; --c: 1 / 9; } .gal-block.split > :nth-child(2) { --cm: 1 / -1; --c: 9 / 13; display: flex; } @media (min-width: 768px) { .gal-block.split > :nth-child(2) .media { flex: 1; aspect-ratio: auto; } } .credits { padding-top: var(--section); row-gap: var(--s-5); } .credits .t-label { --c: 1 / 5; } .credits dl { --c: 5 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--gutter); font-size: var(--fs-small); font-weight: 400; } @media (min-width: 768px) { .credits dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .credits dt { color: var(--fg-2); font-family: var(--font-meta); font-size: var(--fs-micro); letter-spacing: .07em; text-transform: uppercase; } .next-sec { padding-top: var(--section); } /* reveal defaults (JS sets initial states; avoids FOUC before JS) */ html.js [data-reveal] { visibility: hidden; } html.js [data-reveal].is-ready { visibility: visible; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media (max-width: 767px) { .pl-row .meta { display: none; } } /* ---- Mobile ---- */ @media (max-width: 767px) { /* touch scrolls faster than a wheel: a shorter flight */ .alps { height: 380vh; height: 380svh; } .hero-name .fit + .fit { margin-top: .04em; } .alps .hero-info { row-gap: 2px; } /* project: the image right under the title, then the brief */ .pj-side { display: contents; } .pj-side > * { grid-column: 1 / -1; } .pj-title { margin-top: calc(var(--s-7) * -1 + var(--s-3)); } .pj-kicker { order: 1; } .pj-title { order: 2; } .pj-hero { order: 3; } .pj-brief { order: 4; } .pj-meta { order: 5; } /* lists: 44px touch targets */ .pl-row a { padding-block: 11px; } .pl-row + .pl-row a { border-top: 1px solid var(--line); } } /* list thumbnails: touch screens only (no hover preview there) */ .pl-row .th { display: none; } @media (hover: none), (max-width: 767px) { .pl-row a { align-items: center; gap: var(--s-4); } .pl-row .th { display: block; flex: none; width: 48px; } .pl-row .th .slate span, .pl-row .th .slate-in { display: none; } .pl-row .in { flex-direction: column; align-items: flex-start; } .pl-row .cl { margin-left: 0; } } @media (max-width: 767px) { /* header on one line: the clock stays on desktop */ .h-clock { display: none; } .site-header { padding-top: 14px; } .contact-mail .m-item { font-size: 17vw; } } /* Version switch (review only) */ .version-switch { position: fixed; right: var(--margin); bottom: var(--margin); z-index: 60; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 94%, transparent); font-family: var(--font-meta); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; } .version-switch button { padding: 6px 11px; border-radius: 999px; color: var(--fg-2); letter-spacing: inherit; transition: background .3s, color .3s; white-space: nowrap; } .version-switch button.is-on { background: var(--ink); color: var(--bg); } @media (max-width: 767px) { .version-switch { top: 50%; bottom: auto; right: 6px; transform: translateY(-50%); flex-direction: column; padding: 2px; font-size: 9px; border-radius: 14px; } .version-switch button { padding: 6px 7px; } } @media (max-width: 767px) { .ac { max-width: 100%; font-size: 13vw; line-height: .95; } } /* Sound pill on project videos (shown once an audio track is found) */ .sound { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: none; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(10, 10, 10, .55); color: #fff; font: 400 11px/1 var(--font-meta); letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s; } .has-sound > .sound { display: inline-flex; } .sound:hover { background: rgba(10, 10, 10, .8); } .sound button { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } /* volume: opens once the sound is on */ .sound input { -webkit-appearance: none; appearance: none; width: 0; height: 2px; margin: 0; opacity: 0; visibility: hidden; border-radius: 2px; cursor: pointer; background: linear-gradient(#fff, #fff) 0 0 / var(--vol, 80%) 100% no-repeat, rgba(255, 255, 255, .3); transition: width .4s var(--ease-io), margin .4s var(--ease-io), opacity .3s; } .sound input::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; } .sound input::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #fff; } .is-loud .sound input { width: 72px; margin-left: 12px; opacity: 1; visibility: visible; } /* touch: no volume slider (the page cannot set it) and no blur, which repaints with every video frame */ @media (hover: none) { .sound input { display: none; } .sound { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 10, 10, .7); } } .sound i { display: block; width: 12px; height: 10px; background: linear-gradient(currentColor, currentColor) 0 100% / 2px 40% no-repeat, linear-gradient(currentColor, currentColor) 5px 100% / 2px 100% no-repeat, linear-gradient(currentColor, currentColor) 10px 100% / 2px 65% no-repeat; opacity: .5; } .is-loud .sound i { opacity: 1; animation: eq .9s ease-in-out infinite alternate; } @keyframes eq { to { background-size: 2px 90%, 2px 35%, 2px 100%; } } /* About: Download CV, a pill under the portrait */ .ab-cv { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--gutter); height: 40px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; font: 400 var(--fs-small)/1 var(--font-text); transition: background .4s var(--ease-io), color .4s var(--ease-io), border-color .4s; } .ab-cv:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } .ab-cv.is-soon { opacity: .45; pointer-events: none; }