/* ============================================================ project.css — individual project page (e.g. Hermes Campaign). Depends on: tokens.css, base.css Figma: "Prooject v2" (1430, 115:780) / "Project v2" (1024, 115:863) / "Project V2" (640, 115:946) ============================================================ */ /* The page is a long vertical scroll on a warm paper ground. height:auto (base.css pins body to height:100%) lets the body grow with the content so the injected sticky site header (a body child) can pin the whole scroll — its containing block is the body. */ body.project-page { background: var(--paper); height: auto; } .project { background: var(--paper); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; /* No padding or inter-section gap. The page is two FULL-BLEED sections — the main holder (.proj-main) and the footer (.proj-footer) — each owning its own padding, exactly as in Figma "Prooject v2.1" (Frame 15 + Frame 17). The footer butts directly onto the holder (no gap), as in the Figma. */ } /* The header is the shared drop-in module — `.site-header.has-title` (css/header.css + js/header.js), injected with the page title from ``. It sticks to the top, outside `.project`. */ /* ---------- Main holder (Figma "Prooject v2.1" — Frame 15) ---------- Holds the title + gallery + description + the project-selector pagination, stacked on a 100px rhythm. Full-bleed: the body insets itself with side gutters, while the pagination spans edge-to-edge (rules reach the page edges, items inset 20px). */ .proj-main { display: flex; flex-direction: column; gap: 100px; /* Top offset below the 84px sticky nav band. Figma "Prooject v2.1" (1440 116:1929 / 1024 116:2459 / 640 116:2489): the main holder's first content (the title, Frame 13) sits 100px below the nav at every width. */ padding-top: 100px; } /* ---------- Body (title + gallery + description) ---------- Gutter-inset content column — capped at the Figma content width (1162px) with ≥20px side gutters on narrower screens. */ .proj-body { width: min(1162px, 100% - 40px); margin-inline: auto; display: flex; flex-direction: column; gap: 100px; } /* Title stack — Figma "Prooject v2" title block (node 115:785). Breadcrumb + subtitle + year stay muted grey; the hero title is primary near-black (per client). */ .proj-breadcrumb { font-weight: var(--fw-regular); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tertiary-type); } .proj-title { font-weight: var(--fw-medium); font-size: var(--fs-project-title); /* big hero title on desktop; drops to H1 @≤1024 */ line-height: var(--lh-project-title); color: var(--primary-type); } .proj-subtitle { font-weight: var(--fw-medium); font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--tertiary-type); } .proj-year { font-weight: var(--fw-regular); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tertiary-type); } /* ---------- Image gallery ---------- Staggered editorial grid: two large frames (2 cols × 2 rows) bracket two small frames offset into the middle and right columns. Every frame is 4:5. The container's aspect-ratio (1162:2916 from Figma) lets the 3×6 grid size itself, so the spans stay proportional at any width. */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); gap: 20px; aspect-ratio: 1162 / 2916; } .gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; display: block; cursor: pointer; /* click opens the single-image lightbox (js/lightbox.js) */ transition: transform var(--hover-zoom-dur) var(--ease), opacity var(--hover-zoom-dur) var(--ease); } /* Whisper-subtle zoom on hover + gallery isolation: hovering one image fades the others ~5% so the focused shot reads as "selected". Both are hover-only, so nothing sticks after a tap on touch. */ @media (hover: hover) { .gallery img:hover { transform: scale(var(--hover-zoom)); } /* Dim every image EXCEPT the hovered one (:not avoids a specificity fight). */ .gallery:has(img:hover) img:not(:hover) { opacity: var(--dim-others); } } .g-1 { grid-column: 1 / 3; grid-row: 1 / 3; } /* large, top-left */ .g-2 { grid-column: 2; grid-row: 3; } /* small, middle */ .g-3 { grid-column: 3; grid-row: 4; } /* small, right */ .g-4 { grid-column: 1 / 3; grid-row: 5 / 7; } /* large, bottom-left */ /* Description — narrow left column (~1/3 width), like the Figma grid. */ .proj-desc { max-width: 374px; } .proj-desc p { font-weight: var(--fw-regular); font-size: var(--fs-p); line-height: var(--lh-p); } .proj-desc .proj-year { color: var(--primary-type); margin-top: 4px; } /* Collaborator credit (brand · model · stylist) under the description copy. */ .proj-credit-line { font-weight: var(--fw-regular); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--tertiary-type); margin-top: 12px; } /* ---------- Project-selector pagination (Figma "Frame 9") ---------- Full-bleed band: the top + bottom rules span the page edge-to-edge while the prev / All Projects / next items inset 20px (px-20 py-40 in the Figma). */ .proj-pagination { display: flex; align-items: center; gap: 20px; padding: 40px 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .proj-pagination a { flex: 1 0 0; font-weight: var(--fw-medium); font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--primary-type); text-decoration: none; white-space: nowrap; } .proj-pagination .pg-prev { text-align: left; } .proj-pagination .pg-all { text-align: center; } .proj-pagination .pg-next { text-align: right; } .proj-pagination a:hover { text-decoration: underline; } /* ---------- About page ---------- Reuses the project-page shell (paper ground, header, compact menu). Swaps gallery + pagination for a left-aligned title stack + bio column. Figma: Home 19/20/21 — node 33:526. */ .about-body { gap: 36px; } /* tighter than the project body's 100px */ .about-bio { max-width: 374px; display: flex; flex-direction: column; gap: 24px; } .about-bio p { font-weight: var(--fw-regular); font-size: var(--fs-p); line-height: var(--lh-p); } .about-bio a { color: var(--primary-type); text-decoration: underline; } .about-bio .proj-year { color: var(--primary-type); } /* ---------- Projects index (the "All Projects" page) ---------- Reuses the project-page shell (paper ground, titled nav, footer). A responsive thumbnail grid — one card per project — where each card reuses the shared .work-item strikethrough hover from base.css for its caption. Built like the About page (no Figma frame of its own). */ .projects-body { gap: 48px; } .projects-index { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 20px; } /* Each card is a .work-item (for the strike hover) re-laid-out as a vertical block — overrides .work-item's inline-flex row + nowrap. */ .pi-card { display: flex; flex-direction: column; align-items: stretch; gap: 16px; white-space: normal; transition: opacity var(--hover-zoom-dur) var(--ease); } .pi-thumb { overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; background: var(--placeholder); } .pi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--hover-zoom-dur) var(--ease); } /* The "name – descriptor" caption row under the thumb. */ .pi-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: var(--fs-h6); line-height: var(--lh-h6); } @media (hover: hover) { .pi-card:hover .pi-thumb img { transform: scale(var(--hover-zoom)); } /* Isolate the hovered card — the others fade slightly, like the gallery. */ .projects-index:has(.pi-card:hover) .pi-card:not(:hover) { opacity: var(--dim-others); } } /* ---------- Selected Work menu (compact, left-aligned variant) ---------- The menu reappears at the foot of every project page — smaller (H6, no image scatter) and left-aligned, unlike the centred hero menu overlay. */ .proj-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; padding: 10px 0; /* Figma footer (node 77:944) py-[10px] */ } /* Signature mark, sized per Figma footer (48×39, aspect preserved). */ .proj-menu .logo-mark { width: 48px; height: auto; } .proj-menu-list { list-style: none; display: flex; flex-direction: column; } /* Shared .work-item base + the animated strikethrough hover live in base.css. Here we only set the footer menu's own (compact, H6) size + padding. */ .proj-menu-list .work-item { padding: 10px 0; font-size: var(--fs-small); line-height: var(--lh-small); } .proj-contact { font-weight: var(--fw-medium); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--primary-type); text-decoration: none; } .proj-meta-link { font-weight: var(--fw-regular); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--primary-type); text-decoration: none; } /* ---------- Footer (Figma "Prooject v2.1" — Frame 17) ---------- A FULL-BLEED block holding the compact menu + credit, butting directly onto the main holder (no gap, as in the Figma). Layout is shared; the project page opts into the DARK ground via `.is-dark` (logo + type flip to light), while the About page leaves it on the paper ground. */ .proj-footer { padding: 20px; display: flex; flex-direction: column; gap: 100px; /* Figma Frame 17 menu→credit gap */ } /* Project page: dark #252525 ground with the logo + all type flipped to light. */ .proj-footer.is-dark { background: var(--primary-type); } .proj-footer.is-dark .logo-mark { filter: brightness(0) invert(1); } /* white signature */ .proj-footer.is-dark .work-item, .proj-footer.is-dark .proj-contact, .proj-footer.is-dark .proj-meta-link, .proj-footer.is-dark .proj-credit { color: var(--type-inverse); } /* Strikethrough hover must read on the dark ground too (base.css draws it in --primary-type, which would vanish here). */ .proj-footer.is-dark .wi-name::after, .proj-footer.is-dark .wi-desc::after { background: var(--type-inverse); } /* ---------- Footer credit ---------- */ .proj-credit { font-weight: var(--fw-regular); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--primary-type); width: 100%; } /* ---------- Responsive ---------- Tablet (≤1024) reuses the desktop grid — only the body gutters narrow, and the hero title steps down from the 96px desktop size to H1 (36px). Mobile (≤640) restacks the gallery into a single offset column. */ @media (max-width: 1024px) { .proj-title { font-size: var(--fs-h1); line-height: var(--lh-h1); } .projects-index { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .proj-main { gap: 64px; } .proj-body { gap: 64px; } .projects-index { grid-template-columns: 1fr; gap: 56px; } .pi-cap { font-size: var(--fs-p); line-height: var(--lh-p); } /* Gallery: big frames go full-width; small frames offset left / right. Note the `.gallery .g-*` selectors — they must outrank `.gallery img` (which sets width:100%) for the small frames' widths to take. */ .gallery { display: flex; flex-direction: column; gap: 56px; aspect-ratio: auto; } .gallery img { aspect-ratio: 4 / 5; height: auto; width: 100%; } .gallery .g-1 { order: 1; } .gallery .g-2 { order: 2; width: 65%; align-self: flex-start; } /* small, left */ .gallery .g-4 { order: 3; } /* big before… */ .gallery .g-3 { order: 4; width: 48%; align-self: flex-end; } /* …small, right */ /* Keep the prev/next row from colliding on narrow phones. */ .proj-pagination a { font-size: var(--fs-p); line-height: var(--lh-p); } }