/* ══════════════════════════════════════════════════════════════════ RESH — site styles Fluid across desktop / tablet / mobile. Class prefix .h-*. ══════════════════════════════════════════════════════════════════ */ @font-face { font-family: Haskoy; src: url("../6901fca08064cdef5f7562a8_Haskoy-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Haskoy; src: url("../6901fca083c31826fb69d224_Haskoy-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Haskoy; src: url("../6901fca06c321d292ddf2513_Haskoy-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: Haskoy; src: url("../6901fca0c5939c7951a42c8c_Haskoy-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: Helveticaneue; src: url("../6901fd43b8691140fc8acf17_HelveticaNeue-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: Helveticaneue; src: url("../6901fd438da05500d8b575af_HelveticaNeue-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Helveticaneue; src: url("../6901fd432dcd756040c75405_HelveticaNeue-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Helveticaneue; src: url("../6901fd43f3f0615f5667fd41_HelveticaNeue-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Helveticaneue Roman; src: url("../6901fd4348503978bfdbd5ef_HelveticaNeue-Roman.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { --h-bg-dark: #111; --h-bg-darker: #161616; --h-bg-light: #f2f2f2; --h-text-light: #f2f2f2; --h-text-dark: #111; --h-text-muted: #b6b6b6; --h-hairline: rgba(242, 242, 242, 0.12); --h-max-w: 1512px; --h-inner-w: 1472px; --h-gutter: 20px; --h-section-py: 80px; --h-hero-h: 905px; --h-header-h: 73px; --h-tabnav-h: 48px; --h-fs-body: 18px; --h-lh-body: 1.2; --h-fs-fine: 13px; --h-fs-copyright: 14px; } /* ─── Reset & base ─── */ *, *::before, *::after { box-sizing: border-box; } html { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; } /* ─── Lenis smooth-scroll: recommended base rules ─────────────── Lenis toggles these classes on at runtime. When Lenis is active we hand scroll control fully to it and disable the browser's own smooth-scroll (which fights the inertia loop). -------------------------------------------------------------- */ html.lenis, html.lenis body { height: auto; } html.lenis.lenis-smooth { scroll-behavior: auto !important; } html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } html.lenis.lenis-stopped { overflow: clip; } html.lenis.lenis-smooth iframe { pointer-events: none; } html, body { margin: 0; padding: 0; background: var(--h-bg-dark); color: var(--h-text-light); font-family: 'Haskoy', 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: var(--h-fs-body); line-height: var(--h-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100vh; height: auto !important; /* Use `clip` (not `hidden`) so `overflow-y: visible` isn't coerced to `auto` by the CSS overflow-propagation rule. With `hidden` on one axis, browsers force the other axis to `auto` — which turns body into a scroll container and BREAKS `position: sticky` on children (they'd pin to body's own scroll, which is always 0). */ overflow-x: clip; overflow-y: visible; } img, video, svg { display: block; max-width: 100%; } button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; } a { color: inherit; text-decoration: none; } /* Skip link (a11y) */ .h-skip-link { position: absolute; left: -9999px; top: -9999px; } .h-skip-link:focus { position: fixed; left: 8px; top: 8px; background: var(--h-text-light); color: var(--h-text-dark); padding: 8px 16px; z-index: 1000; } /* ─── Header (fixed overlay) ─── */ .h-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 16px; padding: var(--h-gutter); pointer-events: none; background: transparent; /* NEVER any background, per Figma */ color: var(--h-text-dark); /* default: over light hero */ transition: color 220ms ease; } /* Section-aware theme is applied by JS (IntersectionObserver) via data-h-theme="light|dark" on .h-header — light theme = dark text, dark theme = light text. Falls back to legacy .is-scrolled. */ .h-header[data-h-theme="dark"], .h-header.is-scrolled { color: var(--h-text-light); } .h-header[data-h-theme="light"] { color: var(--h-text-dark); } .h-header__logo { flex: 1 1 auto; min-width: 0; display: inline-flex; pointer-events: auto; color: inherit; } .h-header__logo svg, .h-header__logo img { width: 240px; height: auto; display: block; transition: filter 220ms ease; } /* Logo source is dark #111; on dark sections invert to light */ .h-header[data-h-theme="dark"] .h-header__logo img, .h-header.is-scrolled .h-header__logo img { filter: invert(1) brightness(1.1); } .h-header[data-h-theme="light"] .h-header__logo img { filter: none; } .h-header__toggle { appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; pointer-events: auto; color: inherit; transition: transform 260ms cubic-bezier(.4,.0,.2,1), color 220ms ease; } /* Rotate 45° (+ → ×) only when menu is OPEN, not on hover */ .h-header__toggle[aria-expanded="true"] { transform: rotate(45deg); } .h-header__toggle svg { width: 16px; height: 17px; stroke: currentColor; } /* ═══ Hero ═══ */ .h-hero { /* Pinned underneath every subsequent section so the About panel (and following ones) can slide up over it — see .h-about, .h-portfolio, etc. below. `z-index: 0` keeps Hero in its own stacking context but always beneath z:1 siblings. */ position: sticky; top: 0; z-index: 0; min-height: var(--h-hero-h); height: var(--h-hero-h); width: 100%; background: var(--h-bg-light); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--h-gutter); overflow: hidden; } /* ─── Overlap layer for sections after Hero ───────────────────── Everything after the (sticky) Hero sits above it and provides its own opaque background, so as the user scrolls each panel naturally covers the previous. About has its own sticky track further down — the reveal is driven by JS in `initReveals` (see home.js). --------------------------------------------------------------- */ .h-portfolio, .h-archive, .h-company, .h-footer { position: relative; z-index: 1; } /* Track wraps About and gives it a 200vh scroll window: 100vh of pinning (during which the text-reveal runs) followed by 100vh of normal scroll where About slides up and Portfolio takes over. */ .h-about-track { position: relative; z-index: 1; height: 200vh; } /* About pins to the top of the viewport, fills it, centres content. `.h-section.h-about` bumps specificity above `.h-section` (which comes later in the file with `position: relative`) so this sticky rule wins. */ .h-section.h-about { position: sticky; top: 0; height: 100vh; min-height: 100vh; z-index: 1; } /* Word segments produced by initReveals — start dim, animate to full opacity on scroll. inline (not inline-block) so line wrapping inside .h-body stays natural. */ .h-reveal__word { display: inline; will-change: opacity; } /* JS writes a `translate3d(0, Nvh, 0)` on the inner wrapper during Phase 1 (BG entering) so the text emerges from behind the top edge of the black background and lands at centre when About pins. */ @media (prefers-reduced-motion: reduce) { .h-hero { position: relative; top: auto; z-index: auto; } .h-about { position: relative; height: auto; min-height: 0; } .h-about-track { height: auto; } .h-about__inner { transform: none !important; } .h-reveal__word { opacity: 1 !important; } } .h-hero__label { position: relative; flex: 0 1 auto; /* Fluid: 280–491 px, scales with viewport so the middle stage never collapses */ width: clamp(220px, 32vw, 490.672px); padding: 4px 10px; border-radius: 3px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #161616; font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: clamp(13px, 1.25vw, 18px); line-height: 1.15; letter-spacing: -0.02em; text-transform: uppercase; z-index: 2; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .h-hero__label--right { text-align: right; } .h-hero__stage { flex: 1 1 auto; min-width: 0; align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; } .h-hero__video-frame { position: relative; width: 100%; height: 669.594px; max-height: 100%; overflow: hidden; } .h-hero__video-frame video, .h-hero__video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ═══ Tab nav (absolute inside hero, sticks to bottom) ═══ */ /* Bottom-fixed navigation menu. Hidden by default; slides UP when the header + toggle opens it. Uses transform for GPU-accelerated animation. */ .h-tabnav-wrap { position: fixed; left: 0; right: 0; bottom: var(--h-gutter); padding: 0 var(--h-gutter); z-index: 90; pointer-events: none; transform: translateY(calc(100% + var(--h-gutter) + 8px)); transition: transform 480ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 480ms; visibility: hidden; will-change: transform; } .h-tabnav-wrap[data-open="true"] { transform: translateY(0); visibility: visible; transition: transform 480ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0s; } .h-tabnav { background: var(--h-bg-darker); width: 100%; min-height: var(--h-tabnav-h); display: flex; align-items: stretch; justify-content: space-between; pointer-events: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } .h-tabnav__link { flex: 1 1 0; min-height: 44px; padding: 15px 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--h-text-light); font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 16px; line-height: 18.4px; letter-spacing: -0.08px; text-transform: uppercase; transition: background 200ms ease, color 200ms ease; } .h-tabnav__link:hover, .h-tabnav__link:focus-visible { background: rgba(242, 242, 242, 0.06); outline: none; } /* ═══ Generic section blocks ═══ */ .h-section { width: 100%; padding: var(--h-section-py) var(--h-gutter); position: relative; } .h-section--dark { background: var(--h-bg-dark); color: var(--h-text-light); } .h-section--light { background: var(--h-bg-light); color: var(--h-text-dark); } .h-section--tight { padding-top: 0; padding-bottom: 0; } .h-container { max-width: var(--h-inner-w); margin: 0 auto; width: 100%; } /* Typography helpers */ .h-label { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 20.7px; letter-spacing: -0.36px; text-transform: uppercase; margin: 0; color: inherit; } .h-body { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.2; letter-spacing: -0.08px; text-transform: uppercase; margin: 0; max-width: 635px; color: inherit; } .h-body p { margin: 0 0 1em; } .h-body p:last-child { margin-bottom: 0; } /* Underlined CTA link */ .h-cta { display: inline-flex; align-items: center; padding: 4px 0; font-family: 'Haskoy', sans-serif; font-weight: 700; font-size: 18px; line-height: 18.4px; letter-spacing: -0.08px; text-transform: uppercase; color: inherit; text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; text-underline-offset: 0.15em; transition: opacity 200ms ease; } .h-cta:hover, .h-cta:focus-visible { opacity: 0.7; outline: none; } /* ═══ About RESH block ═══ */ .h-about { /* Text is naturally centred vertically. The runtime transform on `.h-about__inner` (see home.js — initReveals) shifts the text up during entry so that BG leads slightly, then eases the text back to centre by the time About pins. Net effect: BG enters first, text follows slightly slower, and lands dead-centre in the second section for the reveal. */ display: flex; flex-direction: column; align-items: center; justify-content: center; } .h-about__inner { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; max-width: 726px; width: 100%; will-change: transform; } .h-about__title { width: 100%; max-width: 726px; } .h-about__body { display: flex; flex-direction: column; gap: 24px; } /* ═══ Portfolio ═══ */ /* ── Portfolio track / sticky pin (desktop only) ── Mobile/tablet keep vertical layout — see the media queries below. On desktop the track wraps the sticky section; its height is set at runtime by initPortfolioScroll so vertical scroll = horizontal card translation (1:1 by default). */ .h-portfolio-track { position: relative; z-index: 1; } .h-portfolio { padding-top: 0; padding-bottom: 0; background: var(--h-bg-dark); } .h-portfolio__container { max-width: var(--h-inner-w); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; width: 100%; } .h-portfolio__header { padding: 5px 0 0; width: 726px; max-width: 100%; } .h-portfolio__viewport { /* mobile default — pass-through, no clipping */ display: contents; } .h-portfolio__scroll { --card-w: 756px; --card-gap: 22px; display: flex; gap: var(--card-gap); padding-right: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(242, 242, 242, 0.24) transparent; } .h-portfolio__scroll::-webkit-scrollbar { height: 6px; } .h-portfolio__scroll::-webkit-scrollbar-thumb { background: rgba(242, 242, 242, 0.24); border-radius: 999px; } /* ── Desktop / tablet landscape: pin the section and drive horizontal scroll from vertical ── */ @media (min-width: 900px) { .h-portfolio { position: sticky; top: 0; height: 100vh; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: var(--h-header-h) 0 24px; /* leave room for the fixed header */ } .h-portfolio__container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; /* Align to viewport edges (not the centred `--h-inner-w` frame) so the label and first card sit at the same 20 px left offset as the fixed header logo — otherwise on ≥ 1472 px viewports the container would be centred and everything inside would drift rightwards. */ max-width: none; margin: 0; } .h-portfolio__header { flex: 0 0 auto; padding: 0 var(--h-gutter); width: auto; max-width: none; } .h-portfolio__viewport { display: block; flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; } .h-portfolio__scroll { --card-gap: 24px; height: 100%; padding: 0 var(--h-gutter); overflow: visible; /* transform-driven, not native scroll */ scroll-snap-type: none; will-change: transform; } .h-portfolio__scroll::-webkit-scrollbar { display: none; } } /* Project card */ .h-card { flex: 0 0 var(--card-w); width: var(--card-w); scroll-snap-align: start; display: flex; flex-direction: column; min-height: 905px; } @media (min-width: 900px) { /* In pinned mode cards stretch to fill the sticky viewport height. */ .h-portfolio__scroll .h-card { --card-w: min(640px, 42vw); min-height: 0; height: 100%; } } .h-card__title-row { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; gap: 16px; flex: 0 0 auto; } .h-card__num, .h-card__name { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 20.7px; letter-spacing: -0.36px; text-transform: uppercase; color: var(--h-text-light); margin: 0; } .h-card__name { text-align: right; } .h-card__link { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 905px; overflow: hidden; color: inherit; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 900px) { .h-portfolio__scroll .h-card__link { min-height: 0; /* fill remaining sticky height instead */ height: 100%; } } .h-card__link:hover { transform: scale(1.005); } .h-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1), filter 400ms ease; } .h-card__link:hover .h-card__image { transform: scale(1.03); filter: brightness(0.88); /* slightly darker so overlay text stays readable */ } /* ── Description overlay: hidden by default, fades + slides in on hover ── */ .h-card__overlay { position: absolute; left: 50%; bottom: 24px; z-index: 2; width: min(550px, calc(100% - 40px)); background: var(--h-bg-light); color: var(--h-text-dark); display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1), transform 320ms cubic-bezier(0.4, 0, 0.2, 1); } .h-card__link:hover .h-card__overlay, .h-card__link:focus-visible .h-card__overlay, .h-card:focus-within .h-card__overlay { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .h-card__desc { padding: 15px 20px 10px; font-family: 'Helvetica Neue', 'Helveticaneue', sans-serif; font-weight: 400; font-size: 18px; line-height: 25.6px; letter-spacing: -0.5px; color: var(--h-text-dark); text-transform: none; margin: 0; } .h-card__meta { padding: 0 20px 10px; display: flex; flex-direction: column; gap: 4px; } .h-card__meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .h-card__meta-label { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: -0.36px; text-transform: uppercase; color: var(--h-text-dark); white-space: nowrap; } .h-card__meta-value { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: -0.5px; color: var(--h-text-dark); text-align: right; } .h-card__explore { background: var(--h-bg-darker); color: var(--h-text-light); padding: 12px 10px 12px 20px; min-height: 58px; display: flex; align-items: center; font-family: 'Haskoy', sans-serif; font-weight: 700; font-size: 18px; line-height: 18.4px; letter-spacing: -0.08px; text-transform: uppercase; } /* ═══ Selected Archive (photo ambient wall) ═══ */ .h-archive { position: relative; min-height: var(--h-hero-h); background: var(--h-bg-light); color: var(--h-text-dark); padding: 73px var(--h-gutter) 114.72px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .h-archive__stage { position: relative; width: 1472px; height: 720px; transform-origin: 0 0; /* When at design width, center via auto margin */ margin: 0 auto; } /* Scale down the stage proportionally when viewport is narrower than 1512 */ @media (max-width: 1511px) { .h-archive { /* Kill flex centering so the scaled stage doesn't overflow to the left */ align-items: stretch; justify-content: flex-start; /* Reserve the shrunk visual height + copy padding */ min-height: calc(720px * ((100vw - 40px) / 1472px) + 240px); } .h-archive__stage { align-self: flex-start; margin: 0; /* transform-origin 0 0 → left-align */ transform: scale(calc((100vw - 40px) / 1472px)); } /* Archive detail hero stays exactly one viewport tall — same as `.h-page-hero` on project pages. The 1511 min-height calc above must not stretch this section or the title-pin feels like a dead scroll (background doesn't leave, then everything jumps). */ .h-archive--full { height: 100vh; min-height: 100vh; align-items: center; justify-content: center; } } /* Header spans the entire section (`inset: 0`) — same pattern as `.h-project__hero-overlay` on project detail pages. Content is flex-centred vertically, and horizontally the inner block is capped to the stage width (1472 px on desktop, 100 vw − 2× gutter on smaller viewports) so the title sits at the LEFT edge of the visible photo wall and LEARN MORE at the RIGHT edge — mirroring `.h-hero__label--left` / `.h-hero__label--right`. Header lives OUTSIDE the scaled `.h-archive__stage`, so its typography renders at true 18 px on every viewport (the stage gets a scale transform under 1512 vw which used to shrink this label to ~17 px, making it read smaller than every other section title on the site). NO base `transform` — `initHeroParallax` (home.js) writes pure `translate3d(0, y, 0)` here, keeping the header viewport-centred while the wall scrolls behind it and gliding up with the section once its bottom crosses the viewport top. */ .h-archive__header { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 0 var(--h-gutter); pointer-events: none; will-change: transform; } .h-archive__header-inner { width: min(1472px, 100%); display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; } .h-archive__title { margin: 0; padding: 0; background: transparent; color: var(--h-text-dark); font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 20.7px; letter-spacing: -0.36px; text-transform: uppercase; text-align: left; pointer-events: auto; } .h-archive__more { pointer-events: auto; color: var(--h-text-dark); } /* Archive detail page — one-viewport hero, identical in height and scroll behaviour to `.h-page-hero` on project pages. The photo wall is the "cover": it scrolls with the section. `initHeroParallax` pins only the title overlay to the viewport centre and drags it up once it meets the section's bottom edge. */ .h-archive--full { height: 100vh; min-height: 100vh; padding: 0; align-items: center; justify-content: center; } /* Full-page archive header stays CENTRED (single element, no LEARN MORE), overriding the desktop left/right split above. */ .h-archive--full .h-archive__header { justify-content: center; text-align: center; } .h-archive--full .h-archive__header-inner { justify-content: center; } .h-archive--full .h-archive__title { text-align: center; } /* Photos — display at NATIVE aspect ratio (no crop). Each slot fixes only WIDTH; height auto lets the image itself set the height based on its intrinsic aspect ratio. `overflow: visible` so a taller-than-slot image is drawn in full rather than clipped. */ .h-archive__photo { position: absolute; opacity: 0; transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity; overflow: visible; z-index: 1; } .h-archive__photo img { width: 100%; height: auto; object-fit: contain; object-position: top left; display: block; } .h-archive__photo.is-visible { opacity: 1; } /* Positions (matching Figma exact) — 1472×720 grid. Widths bumped ~10% from the original Figma spec so photos read a bit more prominently. Only WIDTH is set — height follows the image's own aspect ratio (no cropping). */ .h-archive__photo--1 { top: 0px; left: 151px; width: 209px; } .h-archive__photo--2 { top: 18px; left: 762px; width: 185px; } .h-archive__photo--3 { top: 206px; left: 504px; width: 209px; } .h-archive__photo--4 { top: 111px; left: 1059px; width: 278px; } /* landscape slot */ .h-archive__photo--5 { top: 350px; left: 162px; width: 185px; } .h-archive__photo--6 { top: 368px; left: 977px; width: 209px; } .h-archive__photo--7 { top: 389px; left: 1252px; width: 209px; } .h-archive__photo--8 { top: 447px; left: 724px; width: 185px; } /* ── ARCHIVE HERO — full ambient wall (archive detail page only). Applied via `.h-archive--full` modifier. Reuses the base 1472×720 stage so the section stays viewport-height. 10 additional tiles (--9..--18) are packed into the same stage using Figma coordinates from section 418:151 with Y compressed by 0.35 so all four Figma rows fit vertically. `initArchiveShow` rotates through all 18 with only one visible at a time — small spatial overlaps only matter during 900 ms fade hand-offs. */ .h-archive--full .h-archive__photo--9 { top: 90px; left: 0px; width: 185px; } /* SR_9 — left edge, upper */ .h-archive--full .h-archive__photo--10 { top: 35px; left: 350px; width: 209px; } /* SR_1 — top-center */ .h-archive--full .h-archive__photo--11 { top: 220px; left: 892px; width: 185px; } /* SR_11 — mid-right */ .h-archive--full .h-archive__photo--12 { top: 155px; left: 1180px; width: 185px; } /* SR_12 — upper right edge */ .h-archive--full .h-archive__photo--13 { top: 303px; left: 0px; width: 278px; } /* SR_15 — bottom-left landscape */ .h-archive--full .h-archive__photo--14 { top: 442px; left: 340px; width: 209px; } /* SR_16 — bottom-center */ .h-archive--full .h-archive__photo--15 { top: 470px; left: 520px; width: 278px; } /* SR_17 — bottom-center landscape */ .h-archive--full .h-archive__photo--16 { top: 60px; left: 580px; width: 223px; } /* ROKU — upper-center */ .h-archive--full .h-archive__photo--17 { top: 250px; left: 330px; width: 185px; } /* ZELLER-3D — middle */ .h-archive--full .h-archive__photo--18 { top: 440px; left: 1140px; width: 185px; } /* BIOM — bottom-right */ /* ═══ About COMPANY + Contact form ═══ */ /* ── (COMPANY) pinned reveal — mirrors About RESH pattern ── Track = 200 vh (100 vh visible + 100 vh scroll for reveal), the inner section pins for a full viewport of scrolling while `initReveals` lights up words one-by-one. */ .h-company-about-track { position: relative; height: 200vh; z-index: 1; } .h-company-about { /* Mirrors .h-about layout so the reveal maths (initReveals in home.js) see the same natural centring — text lands dead-centre when pinned. */ position: sticky; top: 0; height: 100vh; min-height: 100vh; z-index: 1; background: var(--h-bg-dark); color: var(--h-text-light); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--h-section-py) var(--h-gutter); } .h-company-about__inner { display: flex; flex-direction: column; gap: 24px; max-width: 726px; width: 100%; will-change: transform; } .h-company-about__body { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.2; letter-spacing: -0.08px; text-transform: uppercase; /* colour inherited from .h-company-about (var(--h-text-light)); per-word opacity is driven by initReveals (see home.js) — words start at 0.18 and light to 1 as the pin scrubs. */ } .h-company-about__body p { margin: 0 0 1em; } .h-company-about__body p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .h-company-about { position: relative; height: auto; min-height: 0; } .h-company-about-track { height: auto; } .h-company-about__inner { transform: none !important; } } /* ── (SOMETHING NEW) + form pinned reveal — same pattern as .h-company-about, minus the word illumination. Track is shorter (150 vh: 100 vh entry lag + 50 vh brief centred pin) so we don't force users to scroll a static form for a full extra viewport. ── */ .h-company-form-track { position: relative; height: 150vh; z-index: 1; } .h-company-form { position: sticky; top: 0; height: 100vh; min-height: 100vh; z-index: 1; background: var(--h-bg-dark); color: var(--h-text-light); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--h-section-py) var(--h-gutter); } .h-company-form__inner { display: flex; flex-direction: column; gap: 24px; max-width: 726px; width: 100%; will-change: transform; } @media (prefers-reduced-motion: reduce) { .h-company-form-track { height: auto; } .h-company-form { position: relative; height: auto; min-height: 0; } .h-company-form__inner { transform: none !important; } } /* Legacy .h-company class is no longer used in HTML but kept for backward compat with any deep-linked docs; use flex column layout. */ .h-company { display: flex; flex-direction: column; align-items: center; gap: 44px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .h-company__block { display: flex; flex-direction: column; gap: 24px; max-width: 726px; width: 100%; } .h-company__body { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.2; letter-spacing: -0.08px; text-transform: uppercase; color: var(--h-text-light); margin: 0; } .h-company__body p { margin: 0 0 1em; } .h-company__body p:last-child { margin-bottom: 0; } .h-company__body strong, .h-company__body a { color: var(--h-text-light); font-weight: inherit; text-decoration: none; } .h-company__body a:hover { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; } /* Form */ .h-form { display: flex; flex-direction: column; gap: 12px; max-width: 726px; width: 100%; } .h-form__field { display: block; width: 100%; min-height: 44px; padding: 12px 16px; background: transparent; color: var(--h-text-light); border: 1px solid var(--h-hairline); border-radius: 0; font-family: 'Helvetica Neue', 'Helveticaneue', sans-serif; font-weight: 400; font-size: 16px; line-height: normal; letter-spacing: 0; transition: border-color 200ms ease, background 200ms ease; outline: none; } .h-form__field::placeholder { color: var(--h-text-muted); opacity: 1; } .h-form__field:focus { border-color: var(--h-text-light); background: rgba(242, 242, 242, 0.03); } .h-form__submit { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 44px; padding: 1px 16px; background: var(--h-bg-light); color: var(--h-text-dark); font-family: 'Haskoy', sans-serif; font-weight: 700; font-size: 18px; line-height: 18.4px; letter-spacing: -0.08px; text-transform: uppercase; border: 0; cursor: pointer; transition: opacity 200ms ease; } .h-form__submit:hover, .h-form__submit:focus-visible { opacity: 0.9; outline: none; } .h-form__submit:disabled { opacity: 0.45; pointer-events: none; } .h-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .h-form__fine { font-family: 'Haskoy', sans-serif; font-weight: 100; font-size: var(--h-fs-fine); line-height: 14.95px; letter-spacing: -0.065px; color: var(--h-text-light); margin: 0; } .h-form__fine a { color: var(--h-text-light); text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; } .h-form__success, .h-form__error { display: none; padding: 16px; margin-top: 8px; font-family: 'Haskoy', sans-serif; font-size: 14px; } .h-form__success { color: var(--h-text-light); background: rgba(88, 171, 132, 0.15); } .h-form__error { color: #FF5A5B; background: rgba(255, 90, 91, 0.12); } /* ═══ Back to top ═══ */ .h-back-to-top { display: flex; align-items: center; justify-content: center; position: relative; /* + z-index:1 so it paints above the sticky hero (z:0) */ z-index: 1; min-height: 84px; padding: 33px 0; background: var(--h-bg-dark); color: var(--h-text-light); font-family: 'Haskoy', sans-serif; font-weight: 700; font-size: 16px; line-height: 18.4px; letter-spacing: -0.08px; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; transition: opacity 200ms ease; } .h-back-to-top:hover { /* NB: never use `opacity` here — the bg would become see-through and the sticky hero (z:0) below would show through. Dim the TEXT only. */ color: rgba(243, 243, 243, 0.65); } /* ═══ Footer ═══ */ .h-footer { position: relative; width: 100vw; min-height: 100vh; /* full viewport, per Figma */ background: var(--h-bg-dark); color: var(--h-text-light); overflow: hidden; display: flex; flex-direction: column; isolation: isolate; } /* Static full-screen background image */ .h-footer__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; pointer-events: none; user-select: none; } /* Centered rotating glass RESH logo overlay (WEBM video with transparency) */ .h-footer__logo { position: relative; z-index: 2; align-self: center; margin: 60px auto 0; width: min(441.594px, 40vw); aspect-ratio: 1 / 1; max-height: 60vh; object-fit: contain; display: block; pointer-events: none; user-select: none; background: transparent; } .h-footer__bottom { position: relative; z-index: 2; margin-top: auto; padding: 0 10px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: var(--h-inner-w); margin-left: auto; margin-right: auto; } .h-footer__caption { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 18.4px; letter-spacing: -0.5px; text-transform: uppercase; text-align: center; color: var(--h-text-light); margin: 0; max-width: 1452px; } .h-footer__socials { display: flex; align-items: center; justify-content: center; gap: 12px; } .h-footer__social { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; min-height: 44px; height: 50.4px; padding: 16px 24px; background: rgba(17, 17, 17, 0.85); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: var(--h-text-light); font-family: 'Haskoy', sans-serif; font-weight: 600; font-size: 18px; line-height: 18.4px; letter-spacing: -0.08px; text-transform: uppercase; text-align: center; transition: background 200ms ease, transform 200ms ease; } .h-footer__social:hover, .h-footer__social:focus-visible { background: rgba(17, 17, 17, 1); transform: translateY(-1px); outline: none; } .h-footer__legal { padding-top: 16px; border-top: 1px solid var(--h-text-light); display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .h-footer__legal a, .h-footer__legal span { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: var(--h-fs-copyright); line-height: 14.95px; letter-spacing: -0.065px; text-transform: uppercase; color: var(--h-text-light); white-space: nowrap; } .h-footer__legal a:hover { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; } /* ══════════════════════════════════════════════════════════════════ Global noise overlay — port of ui-layouts.com /r/noise-effect (npx shadcn add https://ui-layouts.com/r/noise-effect) Their pattern is dead-simple: one absolute
with an animated GIF as background at low opacity. All the flicker lives inside the GIF frames, so no CSS keyframes are needed. We adapt it to a *fixed* full-viewport overlay so the grain reads over the entire page regardless of scroll. Tune amount via --h-noise-opacity (0.02–0.08). ══════════════════════════════════════════════════════════════════ */ :root { --h-noise-opacity: 0.02; } .h-noise { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("/assets/images/noise.gif?v=1789630000"); background-repeat: repeat; background-size: 500px 700px; opacity: var(--h-noise-opacity); will-change: opacity; } @media (prefers-reduced-motion: reduce) { .h-noise { opacity: calc(var(--h-noise-opacity) * 0.6); } } /* ══════════════════════════════════════════════════════════════════ SHARED PAGE COMPONENTS Used across About + Project pages (not on the homepage). Layered on top of the base tokens/reset above. ══════════════════════════════════════════════════════════════════ */ /* ═══ Full-viewport video hero (About page + Project pages) ═══ Sits behind the fixed header. Video covers the frame. */ .h-page-hero { position: relative; width: 100%; height: 100vh; min-height: 640px; background: #000; overflow: hidden; z-index: 1; } .h-page-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border: 0; outline: none; } /* ═══ Backstage / editorial gallery — 2-col asymmetric grid ═══ */ .h-page-gallery { background: var(--h-bg-dark); padding: var(--h-section-py) var(--h-gutter); } .h-page-gallery__grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(380px, 60vh); gap: 20px; max-width: var(--h-inner-w); margin: 0 auto; } .h-page-gallery__item { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; background: #0a0a0a; } .h-page-gallery__item--wide { grid-column: 1 / -1; } .h-page-gallery__item--reel { grid-column: 1 / -1; aspect-ratio: 16 / 9; height: auto; min-height: 360px; } /* ═══ Project page ═══ All classes prefixed .h-project__* — layered on the shared shell. Sections are 100 % width, stacked vertically. */ /* Project hero video already covered by .h-page-hero. Below hero: a compact meta strip (project / year / coordinates). */ .h-project__meta { background: var(--h-bg-dark); color: var(--h-text-light); padding: 40px var(--h-gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; border-bottom: 1px solid var(--h-hairline); } .h-project__meta-group { display: flex; flex-direction: column; gap: 6px; } .h-project__meta-label { font-family: 'Haskoy', sans-serif; font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; color: var(--h-text-muted); } .h-project__meta-value { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.3; letter-spacing: -0.02em; text-transform: uppercase; color: var(--h-text-light); } /* Long-form project details: two two-column rows (label + copy). */ .h-project__details { background: var(--h-bg-dark); color: var(--h-text-light); padding: var(--h-section-py) var(--h-gutter); display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: 40px; align-items: start; max-width: var(--h-inner-w); margin: 0 auto; } .h-project__details-label { font-family: 'Haskoy', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--h-text-muted); margin: 0; } .h-project__details-copy { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.4; letter-spacing: -0.02em; color: var(--h-text-light); margin: 0; } .h-project__details-copy + .h-project__details-label { margin-top: 24px; } /* Full-width visual solution — image grid (2 cols on desktop, 1 on mobile). */ .h-project__solution { background: var(--h-bg-dark); padding: 0 var(--h-gutter) var(--h-section-py); } .h-project__solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: var(--h-inner-w); margin: 0 auto; } .h-project__solution-item { width: 100%; height: auto; display: block; border-radius: 4px; background: #0a0a0a; } /* Credits — monospace-feel column of names. */ .h-project__credits { background: var(--h-bg-dark); color: var(--h-text-light); padding: var(--h-section-py) var(--h-gutter); display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: 40px; align-items: start; max-width: var(--h-inner-w); margin: 0 auto; border-top: 1px solid var(--h-hairline); } .h-project__credits pre { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; letter-spacing: -0.01em; color: var(--h-text-light); margin: 0; white-space: pre-wrap; word-break: break-word; } /* View other projects — table-style listing. */ .h-project__other { background: var(--h-bg-dark); color: var(--h-text-light); padding: var(--h-section-py) var(--h-gutter); border-top: 1px solid var(--h-hairline); } .h-project__other-title { font-family: 'Haskoy', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--h-text-muted); margin: 0 0 24px; } .h-project__other-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--h-hairline); } .h-project__other-row { display: grid; grid-template-columns: 40px 2fr 100px 2fr auto; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--h-hairline); align-items: center; color: var(--h-text-light); text-decoration: none; transition: color 200ms ease, background 200ms ease; } .h-project__other-row:hover, .h-project__other-row:focus-visible { background: rgba(255,255,255,0.03); color: #fff; outline: none; } .h-project__other-row span { font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase; } .h-project__other-row-view { justify-self: end; font-weight: 700; text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.15em; } /* Large "GET IN TOUCH" CTA at bottom of project page (before back-to-top). */ .h-project__cta { background: var(--h-bg-dark); padding: var(--h-section-py) var(--h-gutter); display: flex; align-items: center; justify-content: center; } .h-project__cta-link { display: inline-flex; align-items: center; gap: 16px; padding: 20px 40px; background: var(--h-text-light); color: var(--h-text-dark); font-family: 'Haskoy', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; border-radius: 999px; transition: opacity 200ms ease, transform 200ms ease; min-height: 44px; } .h-project__cta-link:hover, .h-project__cta-link:focus-visible { opacity: 0.85; transform: translateY(-2px); outline: none; } /* ══════════════════════════════════════════════════════════════════ PROJECT DETAIL PAGE — new structure Hero-overlay + pinned reveal for INVOLVEMENT/BRIEF + parallax masonry for shots + (RESH)-style CREDITS + hover-preview OTHER PROJECTS list. These classes are additive — the old `.h-project__meta` / `.h-project__details` / `.h-project__solution-grid` / `.h-project__cta` rules still live above so `selected-archive/…` and `privacy-policy` keep rendering. ══════════════════════════════════════════════════════════════════ */ /* ═══ HERO OVERLAY — project / year / coordinates ═══ Sits on top of `.h-page-hero__video`, centred, using the same `Haskoy uppercase clamp(13–18px)` treatment as the homepage hero labels (`.h-hero__label`). */ .h-project__hero-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: var(--h-gutter); pointer-events: none; color: #fff; text-align: center; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); /* Sticky-parallax: JS translates this down on scroll so it lags the video (which flies past faster). See initHeroParallax in home.js. */ will-change: transform; } .h-project__hero-meta { display: flex; flex-direction: column; gap: 4px; } .h-project__hero-meta-key, .h-project__hero-meta-value { margin: 0; font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: clamp(13px, 1.25vw, 18px); line-height: 1.2; letter-spacing: -0.02em; text-transform: uppercase; color: inherit; } /* ═══ INVOLVEMENT + CREATIVE BRIEF pinned reveal ═══ Mirrors the (RESH) About pattern (`.h-about-track` / `.h-about` / `.h-about__inner`) so `initReveals` in home.js re-uses the exact same lag-transform + word-illumination logic. */ .h-project__brief-track { position: relative; height: 200vh; z-index: 1; } .h-project__brief { position: sticky; top: 0; height: 100vh; min-height: 100vh; background: var(--h-bg-dark); color: var(--h-text-light); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--h-gutter); } .h-project__brief-inner { display: flex; flex-direction: column; gap: 24px; padding: 12px 0; max-width: 726px; width: 100%; will-change: transform; } .h-project__brief-block { display: flex; flex-direction: column; gap: 8px; } @media (prefers-reduced-motion: reduce) { .h-project__brief-track { height: auto; } .h-project__brief { position: relative; height: auto; min-height: 0; } .h-project__brief-inner { transform: none !important; } } /* ═══ SOLUTION SHOTS — 2-column parallax, full-bleed to header logo edge ═══ Full-bleed grid: two columns with the same `var(--h-gutter)` outer padding as the header logo. Right column starts ~200 px lower than the left so the two never sit side-by-side horizontally. Each shot gets a per-element `data-parallax` rate (0.10–0.32) → `initSolutionParallax` in home.js translates only *upward*, so the black background stays put and images drift up past it as you scroll. No border-radius, no fade-in — images are on the page from the start. */ .h-project__shots { background: var(--h-bg-dark); padding: var(--h-section-py) var(--h-gutter); } .h-project__shots-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; max-width: none; margin: 0; width: 100%; } .h-project__shots-col { display: flex; flex-direction: column; gap: 160px; min-width: 0; } /* Right column starts lower so its rows never line up with the left */ .h-project__shots-col--right { padding-top: 220px; } .h-project__shot { width: 100%; height: auto; display: block; border-radius: 0; background: #0a0a0a; will-change: transform; } @media (prefers-reduced-motion: reduce) { .h-project__shot { transform: none !important; } } /* ═══ CREDITS — (RESH)-style label + body ═══ Free-standing block: 726px max width, gap 12px between label and body, Haskoy 18px uppercase (h-body typography). */ .h-project__crd { background: var(--h-bg-dark); color: var(--h-text-light); padding: var(--h-section-py) var(--h-gutter); display: flex; justify-content: center; } .h-project__crd-inner { display: flex; flex-direction: column; gap: 12px; max-width: 726px; width: 100%; } .h-project__crd-list { display: flex; flex-direction: column; gap: 6px; /* h-body typography — 18px Haskoy uppercase */ } .h-project__crd-list p { margin: 0; } /* ═══ VIEW OTHER PROJECTS — RESH typography + hover preview ═══ */ .h-project__others { background: var(--h-bg-dark); color: var(--h-text-light); padding: var(--h-section-py) var(--h-gutter); display: flex; justify-content: center; border-top: 1px solid var(--h-hairline); } .h-project__others-inner { display: flex; flex-direction: column; gap: 24px; max-width: 726px; width: 100%; } .h-project__others-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--h-hairline); } .h-project__others-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--h-hairline); color: var(--h-text-light); text-decoration: none; transition: color 200ms ease, opacity 200ms ease; font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.2; letter-spacing: -0.08px; text-transform: uppercase; } .h-project__others-row:hover, .h-project__others-row:focus-visible { color: #fff; outline: none; } /* Dim non-hovered rows for extra focus */ .h-project__others-list:hover .h-project__others-row:not(:hover) { opacity: 0.45; } .h-project__others-year { justify-self: end; color: var(--h-text-muted); } /* Cursor-follow square preview thumbnail No transform transition — the JS positions it under the cursor on `mouseenter` and follows on `mousemove`, so any transition would read as a flying-in animation. Only `opacity` fades. Sharp corners.*/ .h-project__others-preview { position: fixed; top: 0; left: 0; width: 240px; height: 240px; object-fit: cover; border-radius: 0; opacity: 0; transform: translate3d(-9999px, -9999px, 0); transition: opacity 120ms ease; pointer-events: none; z-index: 9998; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); } .h-project__others-preview.is-visible { opacity: 1; } @media (max-width: 991px) { .h-project__shots-inner { column-gap: 24px; } .h-project__shots-col { gap: 100px; } .h-project__shots-col--right { padding-top: 140px; } .h-project__others-row { grid-template-columns: 40px 1fr auto; font-size: 16px; gap: 16px; padding: 16px 0; } } @media (max-width: 767px) { .h-project__others-preview { display: none; } .h-project__hero-overlay { gap: 20px; } /* On phones photos become a single flex column, and each `.h-project__shot` takes 2/3 of the viewport width. They alternate: odd shots hug the LEFT edge, even shots hug the RIGHT edge — so the eye zig-zags down the page. `.h-project__shots-col` flattens via `display: contents` so images from both design-columns become direct flex children of the inner container; that way `:nth-child(even)` alternates across the WHOLE image sequence, not per-column. Large uniform gap between images (no overlap). */ .h-project__shots-inner { display: flex; flex-direction: column; gap: 120px; } .h-project__shots-col { display: contents; } .h-project__shots-col--right { padding-top: 0; } .h-project__shots { padding-left: 0; padding-right: 0; } .h-project__shot { width: 66.6667vw; max-width: 66.6667vw; align-self: flex-start; /* Parallax is disabled on mobile in JS — keep a hard CSS lock so leftover translate values can never close the gap. */ transform: none !important; } .h-project__shot:nth-child(even) { align-self: flex-end; } } @media (max-width: 479px) { .h-project__others-row { grid-template-columns: 32px 1fr auto; font-size: 14px; gap: 12px; } } /* ══════════════════════════════════════════════════════════════════ LEGAL / LONG-FORM PAGE — privacy policy, terms, etc. Reuses the same 726 px centered column, (h-label) headings and (h-body) typography as the project brief blocks, so long-form pages sit inside the same design language. Not pinned / not reveal-animated — the content is read top-to- bottom and users need free scroll. ══════════════════════════════════════════════════════════════════ */ .h-legal { background: var(--h-bg-dark); color: var(--h-text-light); padding: calc(var(--h-header-h) + 40px) var(--h-gutter) var(--h-section-py); display: flex; justify-content: center; } .h-legal__inner { max-width: 726px; width: 100%; display: flex; flex-direction: column; gap: 48px; } .h-legal__hero { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid var(--h-hairline); } .h-legal__hero-row { display: flex; flex-direction: column; gap: 4px; } .h-legal__hero-value { margin: 0; font-family: 'Haskoy', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.2; letter-spacing: -0.08px; text-transform: uppercase; color: var(--h-text-light); } .h-legal__section { display: flex; flex-direction: column; gap: 12px; } .h-legal__copy { /* Layered on top of `.h-body` in HTML — inherits its 18 px Haskoy uppercase treatment. Just adjust paragraph rhythm + link style for the long-form context. */ max-width: none; } .h-legal__copy p { margin: 0 0 1em; } .h-legal__copy p:last-child { margin-bottom: 0; } .h-legal__copy a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: from-font; transition: opacity 200ms ease; } .h-legal__copy a:hover, .h-legal__copy a:focus-visible { opacity: 0.7; outline: none; } @media (max-width: 767px) { .h-legal { padding-top: calc(var(--h-header-h) + 20px); } .h-legal__inner { gap: 36px; } } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════════ */ /* ─── Tablet (≤ 991px) ─── */ @media (max-width: 991px) { :root { --h-section-py: 60px; --h-hero-h: 780px; } .h-hero__label { width: min(30vw, 260px); font-size: 14px; line-height: 1.25; letter-spacing: -0.24px; padding: 4px 8px; } .h-hero__video-frame { height: 540px; } .h-tabnav__link { font-size: 14px; padding: 12px 8px; } .h-about__inner, .h-about__title, .h-company-about__inner, .h-company-form__inner, .h-company__block, .h-form, .h-portfolio__header { max-width: 100%; width: 100%; } /* Shared page components on tablet */ .h-page-gallery__grid { gap: 16px; } .h-project__details, .h-project__credits { grid-template-columns: 1fr; gap: 16px; } .h-project__other-row { grid-template-columns: 32px 1.5fr 80px 2fr auto; gap: 12px; font-size: 12px; } .h-portfolio__scroll { --card-w: 620px; } .h-card { min-height: 780px; } .h-card__link { min-height: 780px; } .h-card__overlay { width: 500px; } /* Archive: base rule already scales via min(); just tighten padding */ .h-archive { padding-block: 60px; } .h-footer__logo { width: min(360px, 50vw); max-height: 45vh; } .h-footer__caption { font-size: 15px; } .h-footer__legal { gap: 12px; font-size: 12px; } } /* ─── Mobile L (≤ 767px) ─── */ @media (max-width: 767px) { :root { --h-gutter: 16px; --h-section-py: 48px; --h-hero-h: 700px; } .h-hero { flex-direction: column; justify-content: space-between; padding: 90px var(--h-gutter) 90px; gap: 16px; } .h-hero__label { width: 100%; text-align: center; font-size: 13px; padding: 6px 10px; } .h-hero__label--right { text-align: center; } .h-hero__stage { width: 100%; flex: 1 1 auto; } .h-hero__video-frame { height: 100%; min-height: 380px; } .h-tabnav-wrap { bottom: 12px; padding: 0 12px; } .h-tabnav__link { font-size: 12px; padding: 12px 4px; min-height: 44px; } /* Portfolio → 1 column stack */ .h-portfolio__scroll { flex-direction: column; padding-right: 0; overflow: visible; --card-w: 100%; gap: 32px; } .h-card { width: 100%; min-height: 640px; } .h-card__link { min-height: 480px; } .h-card__overlay { width: calc(100% - 32px); } /* Archive on mobile — keep the ambient wall as a single 2/3-viewport fading photo, alternating left/right edge in sync with the JS cross-fade. This mirrors the gallery-shots pattern below so archive hero, project shots and about gallery all read the same way on phone. */ .h-archive__stage { transform: none; width: 100%; height: auto; min-height: 60vh; display: block; position: relative; } .h-archive__photo { position: absolute !important; top: 50% !important; left: 0 !important; right: auto !important; width: 66.6667% !important; height: auto !important; transform: translateY(-50%); } /* Odd-indexed slots hug the RIGHT edge for alternating rhythm */ .h-archive__photo:nth-child(even) { left: auto !important; right: 0 !important; } /* Archive header on mobile — force static flow (order: -1 places it ABOVE the photo stage) and disable any parallax translate authored by initHeroParallax. Inner block stacks title + CTA vertically. */ .h-archive__header, .h-archive--full .h-archive__header { position: static !important; inset: auto !important; transform: none !important; order: -1; padding: 0 0 12px !important; justify-content: center !important; } .h-archive__header-inner { flex-direction: column; align-items: center; gap: 12px; width: 100%; } .h-archive__title { text-align: center; } .h-archive__more { margin-left: 0; } .h-archive--full { height: auto; min-height: 0; padding: 73px var(--h-gutter) 80px; } .h-footer__logo { width: 60vw; max-height: 40vh; margin-top: 40px; } .h-footer__socials { flex-direction: column; align-items: stretch; } .h-footer__social { width: 100%; } .h-footer__legal { flex-direction: column; gap: 8px; text-align: center; } /* Shared page components on mobile */ .h-page-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: minmax(260px, 50vh); gap: 12px; } .h-page-gallery__item--reel { min-height: 220px; } .h-project__meta { grid-template-columns: 1fr; gap: 20px; } .h-project__solution-grid { grid-template-columns: 1fr; gap: 8px; } .h-project__other-row { grid-template-columns: 24px 1fr 60px; grid-auto-rows: auto; row-gap: 4px; padding: 16px 0; font-size: 11px; } .h-project__other-row span:nth-child(4) { grid-column: 2 / -1; } .h-project__other-row-view { grid-column: 1 / -1; justify-self: start; margin-top: 4px; } .h-project__cta-link { width: 100%; justify-content: center; padding: 16px 24px; font-size: 14px; } } /* ─── Mobile P (≤ 479px) ─── */ @media (max-width: 479px) { :root { --h-gutter: 12px; --h-hero-h: 640px; } .h-header__logo svg, .h-header__logo img { width: 180px; } .h-hero__label { font-size: 12px; } .h-card { min-height: 560px; } .h-card__link { min-height: 420px; } .h-card__desc { padding: 12px 16px 8px; font-size: 15px; line-height: 22px; } .h-card__meta { padding: 0 16px 8px; } .h-card__explore { padding: 12px 16px; font-size: 15px; } .h-footer__logo { width: 70vw; max-height: 35vh; } .h-footer__caption { font-size: 13px; } } /* ═══ Motion-reduce ═══ */ @media (prefers-reduced-motion: reduce) { .h-archive__photo { transition: none !important; opacity: 1 !important; } .h-header__toggle { transition: color 220ms ease; } .h-tabnav-wrap { transition: none !important; } .h-card__link:hover .h-card__image { transform: none; filter: none; } }