/* ============================================================ YAKOUT — Portfolio Theme via CSS custom properties. Dark is default; the #theme-toggle button flips [data-theme] on . Fonts are loaded via in each page's (not @import here — @import blocks CSS parsing before the fonts are even requested). Keep the two in sync if you change families. ============================================================ */ :root { --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --font-sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace; --maxw: 1320px; --gap: 22px; --radius: 0px; /* seamless: razor edges everywhere */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---- DARK (default) ---- */ [data-theme="dark"] { --bg: #0b0b0d; --bg-elev: #161619; --fg: #f5f5f2; --fg-dim: #8b8b91; --line: #24242a; --line-soft: #1a1a1f; /* ember: the tungsten glow in the renders — lives ONLY in the playhead system */ --accent: #e0a14b; --placeholder-a: #17171b; --placeholder-b: #1f1f25; } /* ---- LIGHT ---- */ [data-theme="light"] { --bg: #f4f4f1; --bg-elev: #ffffff; --fg: #131315; --fg-dim: #74747a; --line: #e2e2dd; --line-soft: #edede8; --accent: #a8641a; --placeholder-a: #eaeae5; --placeholder-b: #dddad3; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 13px; -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; /* contain full-bleed 100vw elements */ transition: background 0.4s var(--ease), color 0.4s var(--ease); } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } ::selection { background: var(--accent); color: #0b0b0d; } /* ============ HEADER — wordmark + locations + MENU ============ */ .site-header { display: flex; justify-content: space-between; align-items: flex-start; max-width: none; margin: 0 auto; padding: 26px 36px 14px; } .wordmark { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 38px); font-weight: 700; letter-spacing: -0.03em; margin: 0; line-height: 0.86; } .wordmark a { color: inherit; } .breadcrumb { max-width: var(--maxw); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-dim); margin: 0 0 26px; } .breadcrumb a:hover { color: var(--fg); } .header-meta { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; } .location { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--fg-dim); margin: 0; line-height: 1.7; } /* ---- MENU + mail under the wordmark + dropdown (everything lives in here) ---- */ .brand { position: relative; } .brand-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; } .mail-icon { display: inline-flex; color: inherit; transition: opacity 0.2s var(--ease); } .mail-icon:hover { opacity: 0.6; } .mail-icon svg { width: 17px; height: 17px; display: block; } .menu-btn { display: block; background: transparent; border: 0; padding: 4px 0; color: var(--fg); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; cursor: pointer; transition: color 0.2s var(--ease); } .menu-btn:hover { color: var(--fg-dim); } .menu-drop { position: absolute; top: calc(100% + 10px); left: 0; min-width: 250px; background: var(--bg); border: 1px solid var(--line); z-index: 600; text-align: left; } .menu-drop ul { padding: 8px 0; } .menu-drop a, .menu-theme { display: block; width: 100%; text-align: left; padding: 9px 20px; background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); transition: color 0.15s var(--ease), background 0.15s var(--ease); } .menu-drop a:hover, .menu-theme:hover { color: var(--fg); background: var(--bg-elev); } .menu-drop a.is-active { color: var(--fg); } .menu-extra { border-top: 1px solid var(--line); padding: 8px 0; } /* ============ LAYOUT PRIMITIVES ============ */ .hero, .reel, main { max-width: var(--maxw); margin: 0 auto; padding: 0 36px; } /* the reel underlays everything — a full-screen cinematic top with the header floating over the film */ .reel { margin: 0 0 72px; max-width: none; padding: 0; } /* full-bleed hero: fills the whole first screen, edge to edge */ .reel .media-frame--wide { width: 100vw; height: 100vh; height: 100svh; max-height: none; min-height: 420px; margin: 0; aspect-ratio: auto !important; /* beat the inline natural-ratio from applyReel */ background: #000; } .reel .media-frame--wide video { object-fit: cover; /* fill left-to-right; crop top/bottom as needed */ object-position: center; pointer-events: none; /* clicks belong to the WATCH REEL flow, not the player */ } /* a quiet scrim so the floating header stays readable over any footage */ .reel .media-frame--wide::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent); z-index: 2; pointer-events: none; } /* home: the header floats over the film, always light-on-dark */ body[data-page="home"] .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; color: #fff; } body[data-page="home"] .location { color: rgba(255, 255, 255, 0.75); } body[data-page="home"] .menu-btn { color: #fff; } body[data-page="home"] .menu-btn:hover { color: rgba(255, 255, 255, 0.7); } .hero { margin: 10px auto 120px; } /* ---- reel overlay: WATCH REEL button + caption ---- */ .reel-watch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; width: 97px; height: 97px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; line-height: 1.5; cursor: pointer; transition: opacity 0.3s var(--ease); } /* smaller PLAY circle for work thumbs + the montage */ .reel-watch--sm { width: 66px; height: 66px; font-size: 9px; letter-spacing: 0.14em; } /* while watching, the circle steps aside; the film itself stops the sound */ .media-frame.is-watching .reel-watch { opacity: 0; pointer-events: none; } .media-frame.is-watching { cursor: pointer; } .reel-caption { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 6; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); pointer-events: none; } /* ---- credentials band (awards-row style) ---- */ .cred-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 72px; } .cred-row p { margin: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; } .cred-row p span { display: block; margin-top: 3px; color: var(--fg-dim); } /* ---- statement ---- */ .statement { max-width: 720px; } /* credentials (the logos) — big, four across, lead of the hero */ .creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .creds li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } @media (max-width: 900px) { .creds { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; } } @media (max-width: 520px) { .creds { grid-template-columns: 1fr; gap: 24px; } } .creds__org { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2.3vw, 30px); letter-spacing: -0.02em; line-height: 1.05; } .creds__sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); } @media (max-width: 620px) { .cred-row { grid-template-columns: 1fr; gap: 12px; } } .hero-avail { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 20px; } /* the statement sits under the logos — a voice moment */ .hero-statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.9vw, 24px); line-height: 1.35; letter-spacing: -0.01em; margin: 56px 0 0; padding-top: 48px; border-top: 1px solid var(--line); max-width: 640px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; padding: 9px 16px; border-radius: 0; border: 1px solid var(--line); transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); } .btn--solid:hover { opacity: 0.88; } .btn--ghost:hover { border-color: var(--fg); color: var(--fg); } .section { border-top: 1px solid var(--line); padding-top: 34px; margin-bottom: 128px; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 56px; } .section__title { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; } /* Right-side call-to-action pill in a section header (e.g. "AI in Visualisation" on the architecture-visualisation page). Solid + arrow so it clearly reads as a button, not a label. */ .section__cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bg); background: var(--fg); padding: 11px 20px; border: 1px solid var(--fg); border-radius: 0; white-space: nowrap; transition: opacity 0.2s var(--ease); } .section__cta::after { content: "\2192"; font-size: 13px; } .section__cta:hover { opacity: 0.85; } /* ============ MEDIA FRAME + PLACEHOLDER ============ */ /* seamless: media sits flush on the page — no border, no rounding */ .media-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, var(--placeholder-b) 0%, var(--placeholder-a) 70%); display: flex; align-items: center; justify-content: center; } /* main/hero video: full-bleed, edge to edge across the whole page */ .media-frame--wide { aspect-ratio: 16 / 6.6; background: var(--bg-elev); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; border-left: 0; border-right: 0; max-height: 92vh; } /* hero reel shown at its true ratio (set inline once metadata loads) */ .media-frame--natural { max-height: 82vh; background: var(--bg-elev); } .media-frame--natural img, .media-frame--natural video { object-fit: contain; } /* main/feature media at the top of a category */ .section-feature { margin-bottom: 32px; } /* ---- project (a subfolder rendered as an architecture project) ---- */ .project { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 32px; } .project__title { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 14px; } .project__intro { max-width: 70ch; margin: 0 0 28px; font-size: 14px; line-height: 1.65; color: var(--fg-dim); } .project__stack { display: flex; flex-direction: column; gap: 18px; } .project__media.media-frame { aspect-ratio: auto; height: auto; min-height: 0; background: var(--bg-elev); } .project__stack .media-frame img, .project__stack .media-frame video { position: static; width: 100%; height: auto; object-fit: contain; } .project__stack img { cursor: pointer; } .project__grid { margin-top: 18px; } /* intro paragraph under the main video — near full-width, small side margin */ .section-intro { width: 100vw; max-width: none; margin: 0 calc(50% - 50vw) 48px; padding: 0 clamp(20px, 4vw, 72px); font-size: clamp(11px, 0.9vw, 12.5px); line-height: 1.65; color: var(--fg-dim); } .media-frame img, .media-frame video, .media-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .media-frame iframe { border: 0; } /* upload-slot styled placeholder */ .media-frame[data-placeholder]::after { content: "+ " attr(data-placeholder); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); padding: 8px 16px; border: 1px dashed var(--line); border-radius: 0; background: color-mix(in srgb, var(--bg-elev) 70%, transparent); backdrop-filter: blur(2px); transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .media-frame.has-media[data-placeholder]::after { display: none; } .media-frame:hover[data-placeholder]::after { color: var(--fg); border-color: var(--fg); } /* Home Work section: tall empty bands above & below so the dark↔light theme wash happens in blank space, never mid-content. */ body[data-page="home"] #work { border-top: 0; padding-top: 40vh; padding-bottom: 40vh; margin-bottom: 0; } /* gentle full-page wash when the theme flips on scroll */ body[data-page="home"] { transition: background 0.6s var(--ease), color 0.6s var(--ease); } /* ============ WORK GRID ============ */ .work-grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 88px 36px; } /* Home: scroll the work sideways — two projects in view, swipe/drag for more */ body[data-page="home"] .work-grid { display: flex; grid-template-columns: none; gap: 40px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 6px 0 26px; scrollbar-width: none; cursor: grab; } body[data-page="home"] .work-grid::-webkit-scrollbar { display: none; } body[data-page="home"] .work-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; } body[data-page="home"] .work-item { flex: 0 0 58%; scroll-snap-align: center; } @media (max-width: 900px) { body[data-page="home"] .work-item { flex: 0 0 86%; } } .work-item { position: relative; z-index: 1; } /* hairlines threading the cards together, drawn by scrollfx.js */ .work-lines { display: none; } /* left spine removed — the right rail carries scroll position */ /* solid spine — quiet gray in both themes */ .work-lines path { fill: none; stroke: var(--fg-dim); stroke-width: 1; } /* the playhead: the one place colour lives on this site */ .work-lines circle { fill: var(--accent); stroke: var(--bg); stroke-width: 3; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 65%, transparent)); } @media (max-width: 900px) { .work-lines { display: none; } } .work-item .media-frame { aspect-ratio: 16 / 9; margin-bottom: 20px; } .work-item__title { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px; } .work-item__more { font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-dim); letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; } .work-item__more::after { content: "→"; transition: transform 0.25s var(--ease); } .work-item a:hover .work-item__title { text-decoration: underline; text-underline-offset: 3px; } .work-item a:hover .work-item__more::after { transform: translateX(4px); } /* ============ CASE-STUDY CARDS — frameless, editorial ============ */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px 32px; } /* Home: App Building also scrolls sideways */ body[data-page="home"] .cards { display: flex; grid-template-columns: none; gap: 40px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 6px 0 26px; scrollbar-width: none; cursor: grab; } body[data-page="home"] .cards::-webkit-scrollbar { display: none; } body[data-page="home"] .cards.is-dragging { cursor: grabbing; scroll-snap-type: none; } body[data-page="home"] .case-card { flex: 0 0 47%; scroll-snap-align: center; } @media (max-width: 900px) { body[data-page="home"] .case-card { flex: 0 0 82%; } } .case-card { display: flex; flex-direction: column; } .case-card__thumb.media-frame { aspect-ratio: 16 / 10; margin-bottom: 20px; } .case-card__sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 6px; } .case-card__title { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; } a.case-card:hover .case-card__title { text-decoration: underline; text-underline-offset: 3px; } .case-card--placeholder { opacity: 0.55; } .case-card--placeholder .media-frame { border-style: dashed; } @media (max-width: 700px) { .cards { grid-template-columns: 1fr; } } /* ============ GALLERY (masonry-ish) ============ */ .gallery { display: flex; align-items: flex-start; gap: var(--gap); } .gallery__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); } /* videos/images keep their own aspect ratio (no cropping) */ .gallery__item .media-frame { height: auto; aspect-ratio: auto; min-height: 0; } .gallery__item .media-frame img, .gallery__item .media-frame video { position: static; width: 100%; height: auto; object-fit: contain; } /* keep empty placeholders visible */ .gallery__item .media-frame:not(.has-media) { aspect-ratio: 4 / 5; min-height: 200px; } /* ============ SPLATS — scroll-scrubbed clips ============ */ .splats { display: grid; gap: var(--gap); } .splat-slot.media-frame { aspect-ratio: 16 / 9; } .splat-slot video { pointer-events: none; } /* ============ RIGHT SCROLL RAIL (home) ============ */ .scroll-rail { position: fixed; right: 26px; top: 50%; height: 46vh; transform: translateY(-50%); z-index: 500; pointer-events: none; /* hidden at the top of the page; fades in once you scroll down */ opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0.45s; } .scroll-rail.is-on { opacity: 1; visibility: visible; } .scroll-rail__line { position: absolute; top: 0; bottom: 0; right: 5px; width: 1px; background: var(--line); } .scroll-rail__dot { position: absolute; right: 0; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--fg-dim); background: var(--bg); transform: translateY(-50%); pointer-events: auto; cursor: pointer; padding: 0; } .scroll-rail__dot.is-active { background: var(--accent); border-color: var(--accent); } .scroll-rail__cursor { position: absolute; right: -3px; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--accent); transform: translateY(-50%); transition: top 0.18s var(--ease); } /* the scroll motion graphic: spinning glyph + section name */ .scroll-rail__label { position: absolute; right: 30px; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg); white-space: nowrap; opacity: 0; transition: opacity 0.25s var(--ease), top 0.18s var(--ease); } .scroll-rail.is-scrolling .scroll-rail__label { opacity: 1; } .scroll-rail__label .glyph { display: inline-block; font-size: 13px; color: var(--accent); animation: rail-spin 1.4s linear infinite; } @keyframes rail-spin { to { transform: rotate(360deg); } } @media (max-width: 900px) { .scroll-rail { display: none; } } /* big transitional sentences pinned to viewport centre, crossfading as you scroll the empty theme-wash bands around Work */ .band-text { position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; margin: 0; padding: 0 8vw; text-align: center; pointer-events: none; z-index: 5; opacity: 0; /* container visibility driven by scrollfx.js */ } .band-line { grid-area: 1 / 1; /* stack the sentences so they crossfade in place */ max-width: 1000px; font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.6vw, 54px); line-height: 1.14; letter-spacing: -0.02em; color: var(--fg); opacity: 0; } /* horizontal-scroll hint in a section header */ .section__head .scroll-hint { margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg-dim); white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .section__head .scroll-hint { animation: hint-nudge 1.7s var(--ease) infinite; } } @keyframes hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } /* ============ MONTAGE reel (under App Building) ============ */ .montage { max-width: 1152px; /* 20% larger, same 16:9 frame */ margin: 0 auto 128px; padding: 0 36px; } .montage__frame.media-frame { aspect-ratio: 16 / 9; background: #000; /* black behind the scattered overlay — no frame */ } .montage__video { object-fit: cover; background: #000; } @media (max-width: 620px) { .montage { padding: 0 20px; } } /* ============ RING CURSOR ============ */ .ring-cursor { position: fixed; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; mix-blend-mode: difference; /* white on dark, dark on light — always visible */ border: 0; pointer-events: none; z-index: 700; opacity: 0; transition: opacity 0.22s var(--ease); will-change: transform; } .ring-cursor.is-on { opacity: 1; } /* the circle replaces the native pointer across the whole page */ body.ring-active, body.ring-active * { cursor: none !important; } /* ============ SCROLL REVEAL ============ */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============ ABOUT ============ */ .about { max-width: var(--maxw); margin: 0 auto; padding: 0 36px; margin-bottom: 24px; } /* home closing: big centered statement */ .about--center { text-align: center; padding-top: 40px; } .about--center .section__eyebrow { margin-bottom: 28px; } .about__statement { max-width: 1000px; margin: 0 auto 40px; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 44px); line-height: 1.18; letter-spacing: -0.02em; } .about--center .hero-actions { justify-content: center; } .about__grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 64px; border-top: 1px solid var(--line); padding-top: 64px; } .section__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 14px; } .about__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.3vw, 26px); letter-spacing: -0.015em; line-height: 1.05; margin: 0; text-transform: uppercase; } .about__body p { font-size: 12.5px; line-height: 1.65; margin: 0 0 18px; max-width: 60ch; } /* ============ CV / ABOUT PAGE ============ */ .cv-bio { font-size: 12.5px; line-height: 1.7; max-width: 64ch; margin: 0; color: var(--fg-dim); } .cv-list { display: flex; flex-direction: column; } .cv-list li { display: grid; grid-template-columns: 230px 1fr auto; gap: 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line-soft); } .cv-list li:first-child { border-top: none; } .cv-list__org { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0; } .cv-list__desc { color: var(--fg-dim); font-size: 12px; } .cv-list__year { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-dim); white-space: nowrap; text-align: right; } @media (max-width: 720px) { .cv-list li { grid-template-columns: 1fr auto; gap: 4px 16px; } .cv-list__desc { grid-column: 1 / -1; order: 3; } } /* ============ CASE-STUDY PAGE ============ */ .case { max-width: 900px; margin: 0 auto; } .case__head { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; } .case__icon { width: 64px; height: 64px; flex: none; border-radius: 0; display: flex; align-items: center; justify-content: center; background: var(--fg); color: var(--bg); font-family: var(--font-display); font-weight: 700; font-size: 26px; } .case__title { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; line-height: 1.5; } .case__tagline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-dim); margin: 8px 0 0; } .case__lede { font-size: clamp(12.5px, 1.3vw, 15px); line-height: 1.6; color: var(--fg); margin: 0 0 44px; } .case__h2 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .case__block { margin-bottom: 48px; } /* how-it-works flow */ .flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } .flow__step { flex: 1 1 0; min-width: 130px; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; background: var(--bg-elev); } .flow__num { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--fg); color: var(--bg); font-family: var(--font-mono); font-size: 12px; margin-bottom: 10px; } .flow__label { font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; margin: 0 0 4px; } .flow__desc { font-size: 11px; color: var(--fg-dim); margin: 0; line-height: 1.5; } .flow__arrow { display: flex; align-items: center; color: var(--fg-dim); font-size: 20px; } .case__features { display: flex; flex-direction: column; gap: 14px; } .case__features li { font-size: 12px; line-height: 1.55; padding-left: 20px; position: relative; } .case__features li::before { content: "▹"; position: absolute; left: 0; color: var(--fg-dim); } .case__features strong { font-weight: 600; } .case__shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .case__shots .media-frame { aspect-ratio: 16 / 10; } /* Paper To World: three portrait captures, one shared ratio, full page width */ body[data-page="case-paper-to-world"] .case__shots { grid-template-columns: repeat(3, 1fr); width: 100vw; margin-left: calc(50% - 50vw); padding: 0 clamp(20px, 3vw, 48px); } body[data-page="case-paper-to-world"] .case__shots .media-frame { aspect-ratio: 9 / 16; } @media (max-width: 620px) { body[data-page="case-paper-to-world"] .case__shots { grid-template-columns: 1fr; } } .case__stack { font-family: var(--font-mono); font-size: 13px; color: var(--fg-dim); line-height: 1.7; } .case__stack strong { color: var(--fg); } @media (max-width: 620px) { .flow__arrow { transform: rotate(90deg); } .case__shots { grid-template-columns: 1fr; } } /* ============ LIGHTBOX ============ */ .gallery__item img { cursor: pointer; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 4vh 6vw; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(16px) saturate(0.9); -webkit-backdrop-filter: blur(16px) saturate(0.9); cursor: pointer; animation: lb-fade 0.2s var(--ease); } /* grid images are click-to-enlarge */ .casedetail-grid__item img { cursor: pointer; } .lightbox.open { display: flex; } @keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } } .lightbox__img { max-width: 90vw; max-height: 92vh; object-fit: contain; cursor: default; } .lightbox__close, .lightbox__nav { position: absolute; background: transparent; border: 0; color: #fff; cursor: pointer; opacity: 0.7; transition: opacity 0.2s var(--ease); line-height: 1; } .lightbox__close:hover, .lightbox__nav:hover { opacity: 1; } .lightbox__close { top: 22px; right: 28px; font-size: 34px; } .lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 56px; padding: 0 10px; } .lightbox__prev { left: 2vw; } .lightbox__next { right: 2vw; } @media (max-width: 620px) { .lightbox__nav { font-size: 40px; } .lightbox__close { font-size: 28px; top: 14px; right: 16px; } } /* ============ FOOTER ============ */ .site-footer { border-top: 1px solid var(--line); max-width: var(--maxw); margin: 40px auto 0; padding: 28px 36px 56px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); letter-spacing: 0.04em; } .site-footer a:hover { color: var(--fg); } /* ============ RESPONSIVE ============ */ @media (max-width: 900px) { .site-header { grid-template-columns: 1fr; gap: 18px; } .header-meta { align-items: flex-start; text-align: left; } .main-nav ul { justify-content: flex-start; } .about__grid { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 620px) { .work-grid { grid-template-columns: 1fr; } .hero, main { padding: 0 20px; } .site-header { padding: 22px 20px; } .site-footer { flex-direction: column; gap: 10px; align-items: flex-start; } } /* ============================================================ AI IN ARCH VIZ — bespoke landing page ============================================================ */ .aiviz-main { max-width: var(--maxw); margin: 0 auto; padding: 28px 36px 0; } /* page sub-nav under the main header */ .subnav { display: flex; flex-wrap: wrap; gap: 26px; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid var(--line); } .subnav a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-dim); transition: color 0.2s var(--ease); } .subnav a:hover { color: var(--fg); } .aiviz-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .aiviz-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-dim); white-space: nowrap; } .aiviz-hero.media-frame { aspect-ratio: 16 / 7.4; margin-bottom: 40px; } .aiviz-intro { max-width: 60ch; margin: 0 auto; text-align: center; font-size: clamp(12px, 1.1vw, 14px); line-height: 1.6; color: var(--fg); } .aiviz-rule { border: 0; border-top: 1px solid var(--line); margin: 56px 0; } .aiviz-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .aiviz-row--top { align-items: start; } .aiviz-media.media-frame { aspect-ratio: 16 / 10; } .aiviz-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-dim); margin: 0 0 22px; } .aiviz-h2 { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 22px; } .aiviz-quote { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 2.6vw, 30px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 26px; } .aiviz-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; /* let each tile keep its true aspect ratio */ } .aiviz-lede { margin: 22px 0 0; max-width: 46ch; font-size: clamp(11.5px, 1vw, 13px); line-height: 1.65; color: var(--fg-dim); } .aiviz-gallery__item.media-frame { aspect-ratio: 4 / 3; } @media (max-width: 820px) { .aiviz-row { grid-template-columns: 1fr; gap: 26px; } /* keep the image above the copy even when source order puts copy first */ .aiviz-row > .aiviz-copy { order: 2; } .aiviz-row > .aiviz-media { order: 1; } .aiviz-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .aiviz-main { padding-left: 20px; padding-right: 20px; } .subnav { gap: 16px; } .aiviz-gallery { grid-template-columns: 1fr; } } /* ============================================================ AI IN ARCH VIZ — Case Studies list (no header page) ============================================================ */ .cases-main { max-width: var(--maxw); margin: 0 auto; padding: 28px 36px 0; } .case-study { border-top: 1px solid var(--line); padding: 40px 0 44px; } .case-study__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; } .case-study:nth-child(even) .case-study__media { order: 2; } .case-study__media.media-frame { aspect-ratio: 4 / 5; } .case-study__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-dim); margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .case-study__title { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.7; margin: 0 0 12px; } .case-study__title span { font-weight: 500; } .case-study__meta { display: flex; gap: 28px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); letter-spacing: 0.03em; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .case-study__desc { max-width: 52ch; font-size: 11.5px; line-height: 1.65; color: var(--fg-dim); margin: 0; } .case-study__more { display: inline-block; margin-top: 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); transition: color 0.2s var(--ease); } .case-study__more:hover { color: var(--fg); } @media (max-width: 820px) { .case-study__grid { grid-template-columns: 1fr; gap: 24px; } .case-study:nth-child(even) .case-study__media { order: 0; } .case-study__media.media-frame { aspect-ratio: 16 / 10; } } @media (max-width: 620px) { .cases-main { padding-left: 20px; padding-right: 20px; } } /* ============================================================ Case-study detail page (e.g. Roxy Tower) ============================================================ */ .casedetail-main { max-width: var(--maxw); margin: 0 auto; padding: 28px 36px 0; } .casedetail-intro { margin-bottom: 40px; } .casedetail-title { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 1.8; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 14px; } .casedetail-title span { font-weight: 500; color: var(--fg-dim); } .casedetail-lede { max-width: 64ch; margin: 24px 0 0; font-size: clamp(12px, 1.1vw, 14px); line-height: 1.6; color: var(--fg-dim); } .casedetail-hero.media-frame { aspect-ratio: 16 / 9; } .casedetail-video.media-frame { aspect-ratio: 16 / 9; margin: 0; } /* split intro: copy on the left, hero on the right */ .casedetail-intro--split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .casedetail-intro--split .casedetail-lede { margin-top: 18px; } .casedetail-intro__media.media-frame { aspect-ratio: 4 / 3; } .casedetail-subcaption { text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-dim); margin: -16px 0 26px; } .casedetail-subcaption--left { text-align: left; margin: 4px 0 26px; } @media (max-width: 760px) { .casedetail-intro--split { grid-template-columns: 1fr; gap: 24px; } } .casedetail-block { margin: 56px 0; } /* Project Context with a video beside it */ .casedetail-context { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .casedetail-context__media.media-frame { aspect-ratio: 16 / 9; } @media (max-width: 760px) { .casedetail-context { grid-template-columns: 1fr; gap: 24px; } } .casedetail-h2 { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 18px; } .casedetail-text { max-width: 68ch; font-size: 12px; line-height: 1.7; color: var(--fg-dim); margin: 0; } /* the old 88px headline becomes a wide-tracked whisper — the imagery shouts */ .casedetail-bighead { font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 1.8; letter-spacing: 0.3em; text-transform: uppercase; margin: 0 0 32px; } .casedetail-caption { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; margin: 0 0 26px; } .casedetail-grid { display: grid; gap: var(--gap); align-items: start; } .casedetail-grid[hidden] { display: none; } .casedetail-grid + .casedetail-grid { margin-top: var(--gap); } /* Loose main-folder images (no 1/ 2/): a single row, all beside each other, cropped to one uniform height so tops and bottoms align. */ .casedetail-grid.wf-row { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none !important; } .casedetail-grid.wf-row .casedetail-grid__item { aspect-ratio: auto !important; height: clamp(200px, 24vw, 380px); } .casedetail-grid--2 { grid-template-columns: repeat(2, 1fr); } .casedetail-grid--3 { grid-template-columns: repeat(3, 1fr); } .casedetail-grid__item.media-frame { aspect-ratio: 4 / 3; } /* Workflow page goes near full-width so the step images are large */ body[data-page="there-is-no-world"] .casedetail-main { max-width: none; padding: 28px clamp(24px, 5vw, 80px) 0; } /* Two-column workflow split with a vertical divider (folder 1 | folder 2) */ .wf-split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; margin-top: var(--gap); } .wf-split[hidden] { display: none; } .wf-rule[hidden] { display: none; } .wf-split > .casedetail-grid { padding: 0 clamp(20px, 4vw, 44px); } .wf-split > .casedetail-grid:first-child { padding-left: 0; } .wf-split > .casedetail-grid:last-child { padding-right: 0; border-left: 1px solid var(--line); } @media (max-width: 760px) { .wf-split { grid-template-columns: 1fr; } .wf-split > .casedetail-grid { padding: 0; } .wf-split > .casedetail-grid:last-child { border-left: 0; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 28px; } } @media (max-width: 820px) { .casedetail-grid--3, .casedetail-grid--2 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .casedetail-main { padding-left: 20px; padding-right: 20px; } .casedetail-grid--3, .casedetail-grid--2 { grid-template-columns: 1fr; } } /* ============================================================ Gallery "viewer" layout — filter list ↔ big preview (FUSEPILOT-style) ============================================================ */ .gviz { display: grid; grid-template-columns: 300px 1fr; height: min(72vh, 620px); overflow: hidden; background: #000; /* the whole gallery reads black */ font-family: var(--font-mono); } .gviz-list { display: flex; flex-direction: column; min-height: 0; background: #000; border-right: 1px solid var(--line); } .gviz-list__head { display: flex; justify-content: space-between; padding: 13px 16px; font-size: 11px; letter-spacing: 0.12em; color: var(--fg-dim); border-bottom: 1px solid var(--line); } .gviz-rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; } .gviz-row { display: grid; grid-template-columns: 28px 14px 1fr; gap: 8px; align-items: baseline; padding: 8px 16px; font-size: 12px; letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background 0.12s var(--ease), color 0.12s var(--ease); } .gviz-row .idx { color: var(--fg-dim); } .gviz-row .star { color: #fff; font-size: 7px; line-height: 1; } .gviz-row .name { overflow: hidden; text-overflow: ellipsis; } .gviz-row:hover, .gviz-row.is-active { background: var(--fg); color: var(--bg); } .gviz-row:hover .idx, .gviz-row.is-active .idx, .gviz-row:hover .star, .gviz-row.is-active .star { color: var(--bg); } /* Instagram-style vertical snap feed */ .gviz-feed { position: relative; height: 100%; overflow-y: auto; background: #000; scroll-snap-type: y mandatory; scrollbar-width: none; scroll-behavior: smooth; } .gviz-feed::-webkit-scrollbar { display: none; } .gviz-slide { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; position: relative; } .gviz-slide img, .gviz-slide video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .gviz-cap { position: absolute; left: 22px; right: 22px; bottom: 16px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-dim); pointer-events: none; text-shadow: 0 1px 8px #000; } .gviz-cap .t { color: #fff; text-transform: uppercase; } @media (max-width: 800px) { .gviz { grid-template-columns: 1fr; height: auto; } .gviz-list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 30vh; } .gviz-feed { height: 64vh; } }