/* ═══════════════════════════════════════════════════════════════════════════
site.css
───────────
Single global stylesheet for the real estate portfolio site.
Contains:
1. CSS custom properties (color tokens, spacing scale, typography scale)
2. Reset + base typography
3. Pixel cursor system
4. Page-section patterns (hero, project title bars, meta rows, 2-col text,
horizontal scroll grids, persona grids, booklet grids, stacked screens,
flow diagrams, etc.)
5. Scroll-reveal animation system
6. Responsive breakpoint scaling
Naming convention:
Many class names reference real estate portfolio sections (.bates-, .julie-,
.ipg-, .ahw-, .stack-) but the underlying CSS patterns are general-purpose
and reusable. When you build a non-real-estate page, just apply the same
class names where the pattern fits. Renaming to pattern-first names (e.g.
.text-2col, .horizontal-scroll, .persona-grid) is a future cleanup.
To use on a new page:
═══════════════════════════════════════════════════════════════════════════ */
/* TOKENS — exact from Figma */
:root {
--color-orange-9: #1A1714;
--color-orange-9-15: rgba(25, 23, 20, 0.15);
--color-orange-9-25: rgba(25, 23, 20, 0.25);
--color-orange-9-75: rgba(25, 23, 20, 0.75);
--color-orange-9-97: rgba(25, 23, 20, 0.97);
--color-orange-15: #2A2520;
--color-orange-15-15: rgba(42, 37, 32, 0.15);
--color-orange-4: #0D0B08;
--color-orange-54: #F47B20;
--color-grey-91: #F2ECE0;
--color-grey-91-35: rgba(242, 236, 224, 0.35);
--color-grey-91-55: rgba(242, 236, 224, 0.55);
--color-grey-91-80: rgba(242, 236, 224, 0.80);
--color-grey-57: #9A9088;
--color-white-solid: #FFFFFF;
--LF-Gray: #D9D9D9;
/* Responsive horizontal padding.
Desktop default: 85px min, centers content at 1600px on wide screens.
Tablet override sets min to 48px; mobile to 24px (see media queries). */
--pad-min: 85px;
--content-pad-x: max(var(--pad-min), calc((100% - 1600px) / 2 + var(--pad-min)));
/* Vertical spacing scale (8-point grid).
Used to establish consistent rhythm between sections, subsections, and content blocks.
Mobile/tablet overrides scale these down (see media queries). */
--space-xs: 24px; /* tight: header to its accompanying image, body to next paragraph */
--space-s: 40px; /* related blocks within a subsection */
--space-m: 64px; /* between subsections (e.g. Research grid → Personas header) */
--space-l: 96px; /* between project sections (Bates → IPG, etc.) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: var(--color-grey-91);
color: var(--color-orange-15);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
cursor: none;
}
img { display: block; max-width: 100%; }
/* Global body paragraph. Used across every page (real estate, MTBK, future).
Per-section
rules below should only override `color` when the section
bg requires it — they should NOT redeclare family/size/weight/line-height.
If you need a non-paragraph 20px text block, use a class (e.g. .brief-text). */
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 28px;
color: var(--color-orange-4);
}
/* ============================================================
PIXEL CURSOR — small orange square that follows the mouse,
with a fading particle trail rendered to a fullscreen canvas.
Disabled on touch devices and reduced-motion users.
============================================================ */
#cur {
position: fixed;
z-index: 9999;
pointer-events: none;
left: -20px;
top: -20px;
width: 8px;
height: 8px;
background: var(--color-orange-54);
transform: translate(-50%, -50%);
transition: background 150ms ease, outline 120ms ease, width 120ms ease, height 120ms ease;
}
#cur.big {
background: var(--color-orange-4);
outline: 1.5px solid var(--color-orange-54);
outline-offset: 3px;
}
#trail-canvas {
position: fixed;
inset: 0;
z-index: 9990;
pointer-events: none;
}
/* Restore native cursor on touch devices */
@media (pointer: coarse) {
body { cursor: auto; }
#cur, #trail-canvas { display: none; }
}
/* Restore native cursor for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
body { cursor: auto; }
#cur, #trail-canvas { display: none; }
}
/* Inputs/textareas should hide the custom cursor too */
input, textarea, select { cursor: none; }
.page {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
}
/* PLACEHOLDERS — all red per the new mockup */
.ph {
background: #FF0000;
overflow: hidden;
}
/* ============================================================
IMAGE-AS-PLACEHOLDER
When you swap a
for a real inside a grid
container, the image needs to behave like the placeholder did:
- Fill the cell at its full width
- Cover the cell area without distorting (object-fit: cover)
- Inherit the cell's aspect-ratio from the grid's .ph rule
This block applies that behavior to direct-child tags inside
each of the project grid containers. The original .ph rules above
keep working unchanged (so any remaining placeholders still render).
============================================================ */
.research-grid > img,
.personas-grid > img,
.booklets-grid > img,
.booklets-hero > img,
.ipg-deck-grid > img,
.ipg-wide > img,
.website-design-left > img,
.website-design-right > img,
.julie-details > img,
.julie-mobile-strip > img,
.julie-hero-right > img,
.stack-screens > img,
.pdf-grid > img,
.bates-hero-image > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Match the grid cell's aspect-ratio so the image fills exactly the
same footprint a placeholder would have. The aspect-ratio per grid
comes from each grid's existing .ph rule (defined later in this file). */
.research-grid > img { width: 443px; height: 342px; flex: 0 0 443px; scroll-snap-align: start; }
.personas-grid > img { aspect-ratio: 603.25 / 334.08; }
.booklets-grid > img { aspect-ratio: 405 / 308; }
.booklets-hero > img { aspect-ratio: 1270 / 708.23; }
.ipg-deck-grid > img { aspect-ratio: 404.83 / 312.87; }
.ipg-wide > img { aspect-ratio: 1270 / 715; }
.julie-details > img { aspect-ratio: 615 / 747; }
.julie-mobile-strip > img { aspect-ratio: 396 / 808.27; }
.julie-hero-right > img { aspect-ratio: 615 / 747; }
.stack-screens > img { aspect-ratio: 262 / 431; }
.pdf-grid > img { aspect-ratio: 615 / 788.82; }
.bates-hero-image > img { aspect-ratio: 1270 / 749.42; }
/* website-design phones (left) and map (right) — the parent grid cells
have explicit dimensions, so the image just fills 100% of those cells */
.website-design-left > img,
.website-design-right > img { width: 100%; height: 100%; }
/* ============================================================
HERO
============================================================ */
.hero {
align-self: stretch;
min-height: 100vh;
padding-top: clamp(120px, 25vh, 267.66px);
background: var(--color-orange-9);
border-bottom: 1px solid var(--color-orange-15);
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
@media (min-width: 1024px) { .hero { min-height: 848px; } }
.hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
/* Fallback gradient — visible while video loads or if it fails to play */
background: linear-gradient(135deg, #3a2a1f 0%, #1a1410 40%, #0d0b08 100%);
}
.hero-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Cover the hero area while preserving 16:9 aspect ratio */
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
opacity: 0.65;
pointer-events: none;
}
.hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg,
var(--color-orange-9-15) 0%,
var(--color-orange-9-25) 40%,
var(--color-orange-9-75) 70%,
var(--color-orange-9-97) 100%);
}
.hero-content {
align-self: stretch;
min-height: clamp(360px, 60vh, 561.34px);
padding: 48px var(--content-pad-x) 40px;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.hero-eyebrow {
align-self: stretch;
display: flex;
align-items: center;
gap: 9.59px;
}
.hero-eyebrow-line { width: 20px; height: 0.5px; background: var(--color-orange-54); }
.hero-eyebrow-text {
color: var(--color-grey-91-35);
font-family: "Courier Prime", monospace;
font-size: 9px;
font-weight: 400;
letter-spacing: 1.8px;
text-transform: uppercase;
}
.hero-display {
align-self: stretch;
padding-bottom: 0.6px;
display: flex;
flex-direction: column;
gap: 12.89px;
}
.hero-title {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: clamp(56px, 9vw, 120px);
line-height: 0.88;
font-weight: 700;
max-width: 900px;
}
.hero-title .white { color: var(--color-grey-91); }
.hero-title .orange-italic {
color: var(--color-orange-54);
font-style: italic;
font-weight: 400;
}
.hero-sub {
width: 100%;
max-width: 395px;
color: var(--color-grey-91);
font-size: 20px;
font-family: "Helvetica Neue";
font-weight: 400;
line-height: 28px;
}
.hero-spacer { flex: 1; min-height: 16.7px; }
/* ============================================================
WHO I HAVE WORKED WITH — tight 4-column row
============================================================ */
.audience {
width: 100%;
padding: var(--space-m) var(--content-pad-x);
background: var(--color-orange-4);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.audience-headline {
align-self: stretch;
padding-bottom: 32px;
}
.audience-headline h2 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
line-height: 1.05;
}
.audience-headline .white { color: var(--color-grey-91); }
.audience-headline .orange { color: var(--color-orange-54); }
.audience-cols {
align-self: stretch;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 32px;
}
.aud-col {
padding-top: 20px;
border-top: 1px solid var(--color-orange-54);
display: flex;
flex-direction: column;
gap: 3px;
}
.aud-badge {
width: 32px;
height: 32px;
background: var(--color-orange-54);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-grey-91);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 700;
line-height: 16.5px;
letter-spacing: 0.22px;
}
.aud-title {
padding-top: 9px;
color: var(--color-grey-91);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 23px;
}
.aud-body {
padding-top: 8px;
color: var(--color-grey-91);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24.8px;
}
/* ============================================================
PROJECT TITLE BAR (with tagline + badge meta row)
============================================================ */
.project-title-bar {
width: 100%;
padding: var(--space-l) var(--content-pad-x) var(--space-xs);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.project-title-bar.bates-bg { background: var(--LF-Gray); }
.project-title-bar.ipg-bg { background: var(--color-orange-4); }
.project-title-bar.julie-bg { background: var(--color-grey-91); }
.project-title-bar.ahw-bg { background: var(--color-orange-9); }
.project-title {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: clamp(40px, 5.5vw, 72px);
font-weight: 700;
line-height: 0.92;
}
.project-title .ink { color: var(--color-orange-15); }
.project-title .ink-deep { color: var(--color-orange-4); }
.project-title .orange { color: var(--color-orange-54); }
.project-title .cream { color: var(--color-grey-91); }
/* Meta row: 56px badge + tagline (Figma exact: 24px gap) */
.meta-row-wrap {
width: 100%;
padding: 0 var(--content-pad-x);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.meta-row-wrap.bates-bg { background: var(--LF-Gray); }
.meta-row-wrap.ipg-bg { background: var(--color-orange-4); }
.meta-row {
align-self: stretch;
padding: var(--space-xs) 0 var(--space-m);
display: flex;
align-items: center;
gap: 24px;
}
.badge56 {
width: 56px;
height: 56px;
background: var(--color-orange-54);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-grey-91);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 27px;
}
.tagline {
flex: 1;
min-width: 0;
max-width: 487.83px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 23.4px;
}
.tagline.ink { color: var(--color-orange-4); }
.tagline.cream { color: var(--color-grey-91); }
/* ============================================================
SECTION 48 SUBHEADER (Research, Personas, Printed, etc.)
============================================================ */
.section-48 {
width: 100%;
padding: var(--space-m) var(--content-pad-x) var(--space-xs);
display: flex;
align-items: center;
}
.section-48.bates-bg { background: var(--LF-Gray); }
.section-48.ipg-bg { background: var(--color-orange-4); }
.section-48 .h48 {
padding-top: 13.59px;
padding-bottom: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
line-height: 1.2;
}
.h48 .orange { color: var(--color-orange-54); }
.h48 .ink { color: var(--color-orange-4); }
.h48 .ink-15 { color: var(--color-orange-15); }
.h48 .cream { color: var(--color-grey-91); }
.h48 .space { color: var(--color-grey-91); }
/* Body paragraph rows under the section-48 headers */
.section-body-row {
width: 100%;
padding: 0 var(--content-pad-x) var(--space-s);
display: flex;
align-items: center;
}
.section-body-row.bates-bg { background: var(--LF-Gray); }
.section-body-row.ipg-bg { background: var(--color-orange-4); }
.section-body-row p {
flex: 1;
}
.section-body-row.ipg-bg p { color: var(--color-white-solid); }
.section-body-row.bates-bg p { color: var(--color-orange-4); }
/* ============================================================
BATES — single hero image + 2-col text block
============================================================ */
.bates-section { background: var(--LF-Gray); }
/* The big hero image area — Figma: 1270×749 */
.bates-hero-image {
width: 100%;
padding: 0 var(--content-pad-x);
background: var(--LF-Gray);
}
.bates-hero-image .ph {
width: 100%;
aspect-ratio: 1270 / 749.42;
}
/* 2-column text block */
.bates-text-2col {
width: 100%;
padding: var(--space-s) var(--content-pad-x) 0;
background: var(--LF-Gray);
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 48px;
}
.bates-block {
display: flex;
flex-direction: column;
gap: 16px;
}
.bates-block h3 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--color-orange-15);
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 700;
line-height: 1.1;
padding-top: 0.7px;
}
/* .bates-block p: inherits all typography from the global p rule. */
/* ============================================================
RESEARCH GRID — horizontal scroll with desktop enhancements
- Drag-to-scroll on pointer:fine devices
- Edge fade gradients
- Arrow buttons that appear on hover
- Scroll-snap on card edges
- Subtle scale on hover
============================================================ */
.research-imagery {
width: 100%;
padding: 0 0 0;
background: var(--LF-Gray);
position: relative;
overflow: hidden;
}
.research-scroll {
width: 100%;
overflow-x: auto;
/* scroll-padding ensures snap targets line up with the content margin */
scroll-padding-left: var(--content-pad-x);
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Hide native scrollbar on desktop where we have our own affordances */
scrollbar-width: none;
-ms-overflow-style: none;
}
.research-scroll::-webkit-scrollbar { display: none; }
.research-grid {
display: grid;
grid-template-columns: repeat(6, 443px);
grid-template-rows: 342px 342px;
column-gap: 36px;
row-gap: 36px;
width: max-content;
/* Padding here (NOT on the scroll container) so the first card starts at the
content margin and the last card has matching breathing room at the end */
padding-left: var(--content-pad-x);
padding-right: var(--content-pad-x);
}
.research-grid .ph {
width: 443px;
height: 342px;
scroll-snap-align: start;
transition: transform 280ms ease, opacity 280ms ease, box-shadow 280ms ease;
}
/* Desktop / fine-pointer enhancements only — and only at viewports wide enough
that the cards aren't getting clipped awkwardly */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
/* When hovering anywhere in the section, dim non-hovered cards so the
focused one pops. Applies to both .ph placeholders and real s. */
.research-imagery:hover .research-grid .ph,
.research-imagery:hover .research-grid > img {
opacity: 0.78;
transform: scale(0.985);
}
.research-imagery:hover .research-grid .ph:hover,
.research-imagery:hover .research-grid > img:hover {
opacity: 1;
transform: scale(1);
box-shadow: 0 12px 40px rgba(13, 11, 8, 0.18);
}
}
/* Arrow buttons — always visible on desktop (only scroll mechanism since
drag was removed). Hidden via display:none on mobile (touch-swipe instead). */
.research-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-orange-4);
color: var(--color-grey-91);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
opacity: 0.85;
transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
box-shadow: 0 4px 16px rgba(13, 11, 8, 0.25);
}
.research-arrow:hover {
background: var(--color-orange-54);
opacity: 1;
transform: translateY(-50%) scale(1.06);
}
.research-arrow:active {
transform: translateY(-50%) scale(0.96);
}
.research-arrow svg {
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.research-arrow.prev { left: 24px; }
.research-arrow.next { right: 24px; }
/* Below 900px, hide arrow buttons entirely and let native scroll take over */
@media (max-width: 899px) {
.research-arrow { display: none; }
.research-scroll {
scrollbar-width: thin;
-ms-overflow-style: auto;
cursor: auto;
}
.research-scroll::-webkit-scrollbar {
display: block;
height: 6px;
}
.research-scroll::-webkit-scrollbar-thumb {
background: var(--color-orange-15-15);
border-radius: 3px;
}
}
/* Disabled state — at start/end of scroll */
.research-imagery[data-at-start="true"] .research-arrow.prev,
.research-imagery[data-at-end="true"] .research-arrow.next {
opacity: 0 !important;
pointer-events: none;
}
/* On touch devices (coarse pointer), restore native scrollbar and disable enhancements */
@media (pointer: coarse) {
.research-scroll {
scrollbar-width: thin;
-ms-overflow-style: auto;
cursor: auto;
}
.research-scroll::-webkit-scrollbar {
display: block;
height: 6px;
}
.research-scroll::-webkit-scrollbar-thumb {
background: var(--color-orange-15-15);
border-radius: 3px;
}
.research-arrow { display: none; }
}
/* Reduced motion: disable transitions and snap */
@media (prefers-reduced-motion: reduce) {
.research-scroll { scroll-snap-type: none; scroll-behavior: auto; }
.research-grid .ph,
.research-grid > img { transition: none; }
.research-imagery:hover .research-grid .ph,
.research-imagery:hover .research-grid .ph:hover,
.research-imagery:hover .research-grid > img,
.research-imagery:hover .research-grid > img:hover {
transform: none;
opacity: 1;
}
.research-arrow { transition: opacity 100ms linear; }
}
/* ============================================================
PERSONAS — 2×2 equal cards
============================================================ */
.personas-grid {
width: 100%;
padding: 0 var(--content-pad-x);
background: var(--LF-Gray);
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-s);
row-gap: var(--space-s);
}
.personas-grid .ph {
width: 100%;
aspect-ratio: 603.25 / 334.08;
}
/* ============================================================
PRINTED OFFERING BOOKLETS
============================================================ */
.booklets-hero {
width: 100%;
padding: 0 var(--content-pad-x);
background: var(--LF-Gray);
}
.booklets-hero .ph {
width: 100%;
aspect-ratio: 1270 / 708.23;
}
/* Video frame for the booklets hero — 16:9 autoplay loop */
.booklets-hero .video-frame {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--color-orange-15);
position: relative;
}
.booklets-hero .video-frame video,
.booklets-hero .video-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.booklets-grid {
width: 100%;
padding: var(--space-s) var(--content-pad-x) 0;
background: var(--LF-Gray);
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space-s);
row-gap: var(--space-s);
}
.booklets-grid .ph {
width: 100%;
aspect-ratio: 405 / 308;
}
/* ============================================================
WEBSITE DESIGN — 4 small phones on left + big map on right
============================================================ */
.website-design {
width: 100%;
padding: 0 var(--content-pad-x) var(--space-l);
background: var(--LF-Gray);
display: grid;
grid-template-columns: 432px 1fr;
column-gap: var(--space-s);
}
.website-design-left {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 374px 374px;
column-gap: 25px;
row-gap: 49px;
}
.website-design-left .ph {
width: 100%;
aspect-ratio: 182 / 374;
}
.website-design-right .ph {
width: 100%;
aspect-ratio: 757 / 876.45;
}
/* ============================================================
IPG SECTION
============================================================ */
.ipg-section {
background: var(--color-orange-4);
padding-bottom: var(--space-l);
}
/* IPG Deck — 3×3 grid */
.ipg-deck-grid {
width: 100%;
padding: 0 var(--content-pad-x);
background: var(--color-orange-4);
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space-xs);
row-gap: var(--space-xs);
}
.ipg-deck-grid .ph {
width: 100%;
aspect-ratio: 404.83 / 312.87;
}
/* IPG spacer (kept for legacy markup; now zero height) */
.ipg-spacer { display: none; }
/* Custom Pop-Up Card row — text left, image grid right (Figma: 615 + 615, gap 40px) */
.ipg-popup {
width: 100%;
padding: var(--space-m) var(--content-pad-x) 0;
background: var(--color-orange-4);
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-s);
align-items: flex-start;
}
.ipg-popup-left {
display: flex;
flex-direction: column;
gap: var(--space-s);
}
.ipg-popup-left .h48 {
padding-top: 13.59px;
padding-bottom: 1px;
font-family: "Helvetica Neue";
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
line-height: 1.2;
}
.ipg-popup-left p {
color: var(--color-grey-91);
}
.ipg-popup-right {
display: flex;
flex-direction: column;
gap: var(--space-s);
}
.ipg-popup-right .grow-logo {
width: 100%;
aspect-ratio: 615 / 205;
}
.ipg-popup-right .pair {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-s);
}
.ipg-popup-right .pair .ph {
width: 100%;
aspect-ratio: 290 / 163;
}
/* Two wide IPG images */
.ipg-wide {
width: 100%;
padding: var(--space-m) var(--content-pad-x) 0;
background: var(--color-orange-4);
}
.ipg-wide .ph {
width: 100%;
aspect-ratio: 1270 / 715;
}
.ipg-wide.bottom {
padding: var(--space-s) var(--content-pad-x) 0;
}
.ipg-wide.bottom .ph {
aspect-ratio: 1270 / 716;
}
/* Modifier: when the .ipg-wide pattern is reused outside the IPG section,
override the dark background. Used in the Bates section for the website
design wide image. Also adds bottom padding because this is the last
element in the Bates section (the original .ipg-wide has 0 bottom padding
because it stacks with .ipg-wide.bottom in the IPG layout). */
.ipg-wide.bates-bg {
background: var(--LF-Gray);
padding-bottom: var(--space-m);
}
/* The Bates web-design collage is taller than the IPG section's 16:9 wide
images. Override the aspect-ratio so the container fits the image's
natural proportions. The image is 2541×1814 (≈ 1.40 ratio). */
.ipg-wide.bates-bg > img {
aspect-ratio: 2541 / 1814;
height: auto;
}
/* ============================================================
JULIE HOPKINS — cream bg, full custom layout
============================================================ */
.julie-section {
align-self: stretch;
padding: var(--space-l) 0;
background: var(--color-grey-91);
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--space-m);
}
/* Hero row: 2-col, text left + image right */
.julie-hero {
width: 100%;
padding: 0 var(--content-pad-x);
background: var(--color-grey-91);
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-s);
align-items: flex-start;
}
.julie-hero-left {
display: flex;
flex-direction: column;
gap: 40px;
}
.julie-name-block {
display: flex;
flex-direction: column;
gap: 24px;
padding-top: 13.59px;
padding-bottom: 1px;
}
.julie-name-row {
display: flex;
align-items: center;
gap: 24px;
}
.julie-content {
padding-bottom: 102.97px;
display: flex;
flex-direction: column;
gap: 15.3px;
}
.julie-content .h48-line {
font-family: "Helvetica Neue";
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
line-height: 1.2;
}
.julie-content .h48-line .ink { color: var(--color-orange-4); }
.julie-content .h48-line .orange { color: var(--color-orange-54); }
.julie-content p {
padding-top: 0.69px;
}
.julie-hero-right .ph {
width: 100%;
aspect-ratio: 615 / 747;
}
/* 2-up details */
.julie-details {
width: 100%;
padding: 0 var(--content-pad-x);
background: var(--color-grey-91);
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-s);
}
.julie-details .ph {
width: 100%;
aspect-ratio: 615 / 747;
}
/* 6-up mobile strip — Figma: 6 phones at 396×808.27, flex-wrap row.
With justify-content: center and 40px gap, 3 phones fit per row × 2 rows. */
.julie-mobile-strip {
width: 100%;
padding: 0 var(--content-pad-x);
background: var(--color-grey-91);
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space-s);
row-gap: var(--space-s);
}
.julie-mobile-strip .ph {
width: 100%;
aspect-ratio: 396 / 808.27;
}
/* Brief stack — 3 horizontal columns that align exactly to the 3 phone columns above.
Uses 1fr columns with the same 40px gap as julie-mobile-strip so they share grid lines. */
.julie-brief-stack {
width: 100%;
padding: 0 var(--content-pad-x);
background: var(--color-grey-91);
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space-s);
align-items: flex-start;
}
.brief-block {
display: flex;
flex-direction: column;
gap: 14.78px;
}
.brief-block.bottom {
padding-bottom: 86.16px;
gap: 16px;
}
.brief-divider {
padding: 16px 0;
border-bottom: 1px solid var(--color-orange-54);
}
.brief-divider span {
color: var(--color-orange-54);
font-family: "Courier Prime", monospace;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
line-height: 15px;
letter-spacing: 1.5px;
}
/* .brief-text: inherits all typography from the global p rule. */
.deliverables {
height: 93px;
position: relative;
}
.deliverable-tag {
position: absolute;
height: 27px;
padding: 5px 10px;
border: 1px solid var(--color-orange-15-15);
color: var(--color-orange-15);
font-family: "Courier Prime", monospace;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
line-height: 15px;
letter-spacing: 1px;
display: flex;
align-items: center;
}
/* ============================================================
ACCLAIMED HOME WARRANTY — dark
============================================================ */
.ahw-section {
align-self: stretch;
/* True 16:9 aspect ratio matching the video's native ratio.
Min-height: 100vw * 9/16 = 56.25vw so the section is exactly 16:9 of the viewport.
Capped at 900px so on ultra-wide monitors it doesn't get absurdly tall. */
min-height: min(56.25vw, 900px);
padding: var(--space-l) var(--content-pad-x);
background: var(--color-orange-9);
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
position: relative;
overflow: hidden;
}
/* Fullbleed background video — fills the section, behind content */
.ahw-section > .ahw-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* object-fit: contain shows the full video without cropping —
any extra space on top/bottom is filled by the section's bg color. */
object-fit: cover;
object-position: center 30%;
z-index: 0;
opacity: 0.55;
}
/* Gradient overlay — keeps the headline + badge readable over any footage */
.ahw-section::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
var(--color-orange-9-75) 0%,
var(--color-orange-9-25) 50%,
var(--color-orange-9-75) 100%);
z-index: 1;
pointer-events: none;
}
/* Lift the content above the video + overlay (header content only, not the video) */
.ahw-section > .ahw-header {
position: relative;
z-index: 2;
}
.ahw-header {
align-self: stretch;
padding-bottom: 48px;
display: flex;
flex-direction: column;
gap: 23.36px;
}
.ahw-meta {
display: flex;
align-items: center;
gap: 16px;
}
.badge72 {
width: 72px;
height: 72px;
background: var(--color-orange-54);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-grey-91);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 700;
line-height: 27px;
}
.ahw-meta-text {
display: flex;
flex-direction: column;
}
.ahw-meta-text .name {
color: var(--color-grey-91);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 20.8px;
}
.ahw-meta-text .role {
color: var(--color-grey-91-55);
font-family: "Courier Prime", monospace;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
line-height: 16px;
letter-spacing: 1.5px;
}
/* THE STACK — flow LEFT + screens stack RIGHT */
.stack-section {
width: 100%;
padding: 80px var(--content-pad-x) 60px;
background: var(--LF-Gray);
display: flex;
flex-direction: column;
gap: 24px;
}
.stack-headline {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
line-height: 1.05;
}
.stack-headline .ink { color: var(--color-orange-15); }
.stack-headline .orange { color: var(--color-orange-54); }
/* .stack-body: inherits all typography from the global p rule.
A second .stack-body rule below adds align-self: stretch for the flex layout. */
/* THE STACK — matches Figma exactly:
- Outer: vertical flex
- .stack-inner: 2-column layout (left text+flow, right screens grid)
- LEFT column (380px wide): headline + body + flow diagram, stacked with gap: 24px
- RIGHT column (rest): 3×3 grid of 262×431 screens with 12px gaps */
.stack-section {
width: 100%;
padding: var(--space-l) var(--content-pad-x);
background: var(--LF-Gray);
display: flex;
flex-direction: column;
}
.stack-inner {
align-self: stretch;
display: grid;
grid-template-columns: 380px 1fr;
column-gap: 80px;
align-items: flex-start;
}
.stack-content {
width: 380px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-xs);
}
.stack-headline {
align-self: stretch;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
line-height: 1.05;
}
.stack-headline .ink { color: var(--color-orange-15); }
.stack-headline .orange { color: var(--color-orange-54); }
.stack-body {
align-self: stretch;
}
/* Workflow image — replaces the inline flow diagram. Sized to fill the
380px stack-content column at the image's natural aspect ratio.
The max-width matches the original flow diagram's fixed width so the
image doesn't scale up on mobile (where stack-content goes full-width). */
.stack-workflow {
width: 100%;
max-width: 380px;
height: auto;
display: block;
}
/* Below: dead CSS for the old inline flow diagram. The flow was replaced
with a single image (.stack-workflow above). These rules are no longer
referenced by any HTML on this page but are kept for reference / in case
the inline approach is ever wanted again. Safe to remove in a future
cleanup pass. */
/* Flow diagram — fixed 380×706.8px */
.flow {
width: 380px;
height: 706.8px;
position: relative;
}
.flow-rect {
position: absolute;
background: #F1EFE8;
outline: 0.32px solid #5F5E5A;
outline-offset: -0.16px;
}
.flow-rect.purple { background: #EEEDFE; outline-color: #534AB7; }
.flow-rect.coral { background: #FAECE7; outline-color: #993C1D; }
.flow-rect.teal { background: #E1F5EE; outline-color: #0F6E56; }
.flow-rect.amber { background: #FAEEDA; outline-color: #854F0B; }
.flow-rect.pink { background: #FBEAF0; outline-color: #993556; }
.flow-rect.green { background: #EAF3DE; outline-color: #3B6D11; }
.flow-text {
position: absolute;
text-align: center;
font-family: "Helvetica Neue";
font-weight: 500;
white-space: nowrap;
}
.flow-title { font-size: 8.87px; }
.flow-title.gray { color: #2C2C2A; }
.flow-title.purple { color: #3C3489; }
.flow-title.coral { color: #712B13; }
.flow-title.teal { color: #085041; }
.flow-title.amber { color: #633806; }
.flow-title.pink { color: #72243E; }
.flow-title.green { color: #27500A; }
.flow-body { font-size: 7.6px; color: #2A2520; }
/* Screens — RIGHT column, 3×3 grid */
.stack-screens {
align-self: stretch;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 12px;
row-gap: 12px;
}
.stack-screens .ph {
width: 100%;
aspect-ratio: 262 / 431;
}
/* INTERACTIVE PDF DECK — 2×2 grid (4 spreads) */
.pdf-section {
width: 100%;
padding-bottom: var(--space-l);
background: var(--LF-Gray);
display: flex;
flex-direction: column;
}
.pdf-section .pdf-text {
width: 100%;
padding: 0 var(--content-pad-x) var(--space-s);
background: var(--LF-Gray);
}
/* .pdf-section .pdf-text p: inherits all typography from the global p rule. */
.pdf-grid {
width: 100%;
padding: 0 var(--content-pad-x);
background: var(--LF-Gray);
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-s);
row-gap: var(--space-s);
}
.pdf-grid .ph {
width: 100%;
aspect-ratio: 615 / 788.82;
}
/* ============================================================
RESPONSIVE BREAKPOINTS
- Wide: ≥ 1600px → content centered at 1600px max
- Desktop: 1024-1599px → original design (default)
- Tablet: 641-1023px → 2-column where 3-col was, smaller paddings
- Mobile: ≤ 640px → single-column stack, smaller paddings, fluid type
============================================================ */
/* TABLET */
@media (max-width: 1023px) {
:root {
--pad-min: 48px;
/* Scale spacing down on tablet (~75%) */
--space-xs: 20px;
--space-s: 32px;
--space-m: 48px;
--space-l: 72px;
}
/* Audience: 4 → 2 columns */
.audience-cols { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
/* 3-col grids → 2 cols */
.booklets-grid,
.ipg-deck-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Bates 2-col text stays 2-col but tightens */
.bates-text-2col { column-gap: 32px; }
/* Website Design: phones still 2x2, but tighter */
.website-design { grid-template-columns: 1fr 1.5fr; column-gap: 32px; }
/* IPG popup tightens */
.ipg-popup { column-gap: 32px; }
/* Julie hero tightens */
.julie-hero { column-gap: 32px; }
.julie-details { column-gap: 24px; }
/* Mobile strip: stays 3-col on tablet, fluid widths */
.julie-mobile-strip {
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
row-gap: 24px;
}
/* Brief stack: become fluid 3-col on tablet (instead of fixed 396px) */
.julie-brief-stack {
grid-template-columns: repeat(3, 1fr);
column-gap: 32px;
}
/* PDF grid stays 2-col */
.pdf-grid { column-gap: var(--space-s); row-gap: var(--space-s); }
/* AHW + Stack — paddings come from scaled tokens, just the inner gaps */
.stack-inner { column-gap: var(--space-s); }
.stack-screens { column-gap: 8px; row-gap: 8px; }
}
/* MOBILE — stack to single column */
@media (max-width: 640px) {
:root {
--pad-min: 24px;
/* Scale spacing further down on mobile (~50% of desktop) */
--space-xs: 16px;
--space-s: 24px;
--space-m: 40px;
--space-l: 56px;
}
/* Hero: tighter top padding, smaller line-height */
.hero { padding-top: 100px; }
.hero-content {
min-height: 480px;
padding: 32px var(--content-pad-x) 32px;
gap: 16px;
}
.hero-eyebrow-line { width: 16px; }
.hero-eyebrow-text { font-size: 8px; letter-spacing: 1.4px; }
/* Audience: stack to 1 col, headline + intro stack */
.audience-headline { padding-bottom: var(--space-xs); }
.audience-cols { grid-template-columns: 1fr; row-gap: var(--space-xs); }
.aud-col { padding-top: 16px; }
/* Project title bars tighter */
.project-title-bar { padding: 32px var(--content-pad-x) 24px; }
.project-title-bar.ipg-bg { padding-top: 40px; }
/* Meta row stays as flex but allows wrap */
.meta-row { flex-wrap: wrap; gap: var(--space-xs); }
/* Bates: stack everything */
.bates-text-2col {
grid-template-columns: 1fr;
row-gap: var(--space-s);
}
/* Research wireframes: keep horizontal scroll on mobile, just shrink the cards */
.research-grid {
grid-template-columns: repeat(6, 280px);
grid-template-rows: 216px 216px;
column-gap: var(--space-xs);
row-gap: var(--space-xs);
}
.research-grid .ph {
width: 280px;
height: 216px;
}
/* Personas: 2 → 1 col */
.personas-grid {
grid-template-columns: 1fr;
row-gap: var(--space-xs);
}
/* Booklets: 3 → 1 col */
.booklets-grid {
grid-template-columns: 1fr;
row-gap: var(--space-xs);
column-gap: var(--space-xs);
}
/* Website Design: stack, phones go 2-col */
.website-design {
grid-template-columns: 1fr;
row-gap: var(--space-s);
}
.website-design-left {
grid-template-rows: auto auto;
column-gap: var(--space-xs);
row-gap: var(--space-s);
}
/* IPG Deck: 3 → 1 col */
.ipg-deck-grid {
grid-template-columns: 1fr;
row-gap: var(--space-xs);
column-gap: var(--space-xs);
}
/* IPG Popup: stack */
.ipg-popup {
grid-template-columns: 1fr;
row-gap: var(--space-s);
}
.ipg-popup-left p { padding-bottom: 0; }
.ipg-popup-right .pair { column-gap: var(--space-xs); }
/* Julie: stack hero, details, smaller mobile strip */
.julie-section { gap: var(--space-s); }
.julie-hero {
grid-template-columns: 1fr;
row-gap: var(--space-s);
}
.julie-name-row { gap: 16px; }
.julie-content { padding-bottom: 0; }
.julie-details {
grid-template-columns: 1fr;
row-gap: var(--space-xs);
}
.julie-mobile-strip {
grid-template-columns: repeat(2, 1fr);
column-gap: var(--space-xs);
row-gap: var(--space-xs);
}
/* Brief stack collapses to single column on mobile */
.julie-brief-stack {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: var(--space-xs);
}
.brief-block.bottom { padding-bottom: var(--space-s); }
.brief-text { font-size: 16px; line-height: 24px; }
/* AHW: tighter header spacing on mobile */
.ahw-header { padding-bottom: var(--space-xs); gap: 20px; }
.badge72 { width: 56px; height: 56px; }
/* THE STACK: 2-col → 1-col on mobile, screens 3×3 → 2×N */
.stack-inner {
grid-template-columns: 1fr;
row-gap: var(--space-s);
}
.stack-content {
width: 100%;
gap: var(--space-xs);
}
.flow {
width: 100%;
max-width: 380px;
}
/* Screens: 3×3 → 2-col on mobile */
.stack-screens {
grid-template-columns: repeat(2, 1fr);
column-gap: 8px;
row-gap: 8px;
}
.stack-body { font-size: 16px; line-height: 24px; }
/* PDF deck: 2 → 1 col */
.pdf-grid {
grid-template-columns: 1fr;
row-gap: var(--space-xs);
}
.pdf-section .pdf-text p { font-size: 16px; line-height: 24px; }
/* Body text scales down a bit */
.bates-block p,
.julie-content p,
.ipg-popup-left p,
.section-body-row p { font-size: 16px; line-height: 24px; }
/* Audience body text */
.aud-title { font-size: 18px; line-height: 22px; }
.aud-body { font-size: 14px; line-height: 22px; }
/* Tagline tightens */
.tagline { font-size: 16px; line-height: 22px; }
.tagline br { display: none; }
/* Hero sub */
.hero-sub { font-size: 16px; line-height: 24px; max-width: 100%; }
/* Brief divider type */
.brief-divider span { font-size: 12px; }
/* Deliverables: switch from absolute layout to flex-wrap */
.deliverables {
height: auto;
position: static;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.deliverable-tag {
position: static;
left: auto !important;
top: auto !important;
}
}
/* WIDE — ≥1600px gets centered automatically via --content-pad-x */
@media (min-width: 1600px) {
/* Already handled by --content-pad-x. Could add larger paddings if desired. */
}
/* ============================================================
SCROLL REVEAL — subtle "emerge from baseline" on scroll-in
============================================================ */
[data-reveal] {
opacity: 0;
transform: translateY(24px);
filter: blur(2px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
filter 500ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
/* NOTE: `will-change` was previously declared here for
performance hinting, but it caused a brief light-bg flash on
dark sections (Brain Institute, UCGD, hero) when the element
got promoted to its own compositor layer. The transitions are
cheap enough without it on modern browsers — leaving it off. */
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Stagger children of a [data-reveal-stagger] parent — incremental 80ms delays */
[data-reveal-stagger] > [data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(2) { --reveal-delay: 80ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(3) { --reveal-delay: 160ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(4) { --reveal-delay: 240ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(5) { --reveal-delay: 320ms; }
[data-reveal-stagger] > [data-reveal]:nth-child(6) { --reveal-delay: 400ms; }
/* Reduced motion: skip the effect entirely */
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
}
/* ============================================================
LIGHTBOX
A reusable modal for viewing images at full size. Currently
wired up only to the research grid (see portfolio JS).
Structure:
.lightbox — full-viewport overlay (hidden by default)
.lightbox__backdrop — click target for closing
.lightbox__stage — centered image + caption + nav buttons
.lightbox__close
.lightbox__prev
.lightbox__next
.lightbox__image
.lightbox__caption
.lightbox__counter — "3 / 12"
States:
.lightbox.is-open — visible
Z-index: 8000 (above content, below the pixel cursor at 9999)
============================================================ */
.lightbox {
position: fixed;
inset: 0;
z-index: 8000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.lightbox.is-open {
opacity: 1;
visibility: visible;
transition: opacity 220ms ease, visibility 0s linear 0s;
}
.lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(13, 11, 8, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
cursor: none;
}
.lightbox__stage {
position: relative;
width: 100%;
height: 100%;
padding: clamp(24px, 5vw, 80px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-xs);
pointer-events: none;
}
.lightbox__image {
max-width: 100%;
max-height: calc(100% - 80px);
width: auto;
height: auto;
object-fit: contain;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
transform: scale(0.96);
opacity: 1;
transition:
transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 200ms ease;
pointer-events: auto;
will-change: transform, opacity;
}
.lightbox.is-open .lightbox__image {
transform: scale(1);
}
/* Navigation transitions — slide current image out, slide new one in from the opposite side.
States toggled by the JS in the portfolio page:
.is-leaving-next → user clicked next; current image slides LEFT and fades out
.is-leaving-prev → user clicked prev; current image slides RIGHT and fades out
.is-entering-next → new image starts off to the RIGHT, slides into place
.is-entering-prev → new image starts off to the LEFT, slides into place
The slide distance and timing are tuned to feel responsive but not abrupt. */
.lightbox__image.is-leaving-next {
transform: translateX(-32px) scale(0.98);
opacity: 0;
}
.lightbox__image.is-leaving-prev {
transform: translateX(32px) scale(0.98);
opacity: 0;
}
.lightbox__image.is-entering-next {
transform: translateX(32px) scale(0.98);
opacity: 0;
transition: none; /* snap to start position before the entering animation */
}
.lightbox__image.is-entering-prev {
transform: translateX(-32px) scale(0.98);
opacity: 0;
transition: none;
}
/* Caption + counter also slide subtly with the image for cohesion */
.lightbox__caption,
.lightbox__counter {
transition: opacity 200ms ease, transform 200ms ease;
}
.lightbox.is-changing .lightbox__caption,
.lightbox.is-changing .lightbox__counter {
opacity: 0;
transform: translateY(4px);
}
.lightbox__caption {
color: var(--color-grey-91);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
text-align: center;
max-width: 800px;
padding: 0 var(--space-s);
pointer-events: auto;
}
.lightbox__counter {
color: var(--color-grey-91-55);
font-family: "Courier Prime", monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: -8px;
pointer-events: auto;
}
/* Close button (top-right) */
.lightbox__close {
position: absolute;
top: clamp(16px, 3vw, 32px);
right: clamp(16px, 3vw, 32px);
width: 44px;
height: 44px;
background: transparent;
border: 1px solid var(--color-grey-91-55);
color: var(--color-grey-91);
cursor: none;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
transition: background 180ms ease, border-color 180ms ease;
}
.lightbox__close:hover {
background: var(--color-orange-54);
border-color: var(--color-orange-54);
color: var(--color-orange-4);
}
.lightbox__close svg {
width: 18px;
height: 18px;
}
/* Prev / Next nav buttons (vertically centered, on the sides) */
.lightbox__prev,
.lightbox__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
background: transparent;
border: 1px solid var(--color-grey-91-55);
color: var(--color-grey-91);
cursor: none;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.lightbox__prev { left: clamp(16px, 3vw, 32px); }
.lightbox__next { right: clamp(16px, 3vw, 32px); }
.lightbox__prev:hover,
.lightbox__next:hover {
background: var(--color-orange-54);
border-color: var(--color-orange-54);
color: var(--color-orange-4);
}
.lightbox__prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox__next:hover { transform: translateY(-50%) translateX(2px); }
.lightbox__prev svg,
.lightbox__next svg {
width: 22px;
height: 22px;
}
/* Make grid images that are clickable show a "you can click this" affordance.
The pixel cursor will already grow on hover, but a subtle treatment helps too. */
.research-grid > img {
cursor: none;
transition: transform 280ms ease, opacity 280ms ease, box-shadow 280ms ease;
}
/* When body has the no-scroll lock applied, prevent background scrolling */
body.lightbox-open {
overflow: hidden;
}
/* Reduced motion: skip the slide animation, use instant swap */
@media (prefers-reduced-motion: reduce) {
.lightbox,
.lightbox__image,
.lightbox__caption,
.lightbox__counter {
transition: none;
}
.lightbox__image.is-leaving-next,
.lightbox__image.is-leaving-prev,
.lightbox__image.is-entering-next,
.lightbox__image.is-entering-prev {
transform: scale(1);
opacity: 1;
}
.lightbox.is-changing .lightbox__caption,
.lightbox.is-changing .lightbox__counter {
opacity: 1;
transform: none;
}
}
/* Mobile: stack nav buttons at bottom for thumb-friendly access */
@media (max-width: 600px) {
.lightbox__prev,
.lightbox__next {
top: auto;
bottom: 24px;
transform: none;
width: 48px;
height: 48px;
}
.lightbox__prev:hover,
.lightbox__next:hover {
transform: none;
}
.lightbox__image {
max-height: calc(100% - 160px);
}
}
/* ════════════════════════════════════════════════════════════════════════
MTBK — MOUNTAIN BIKING WITH KIDS CASE STUDY
────────────────────────────────────────────
New patterns added for the MTBK page. Reuses the existing token system
(--color-orange-*, --color-grey-91, --LF-Gray, --space-*, --content-pad-x)
and is fully responsive via the same tablet/mobile breakpoints.
All MTBK-specific class names are prefixed `.mtbk-` so they don't clash
with the existing per-project naming (.bates-, .ipg-, .julie-, .ahw-).
Section order in this block matches the section order in the HTML:
1. .mtbk-quote — image-left + quote-right intro
2. .mtbk-section-title — full-width section bands (4 bg variants)
3. .mtbk-band-title — the 72px section headline
4. .mtbk-brand-grid — 3-column brand identity layout
5. .mtbk-content-row — 2-col Evergreen block
6. .mtbk-rdl-row — 3-col Reviews / Destinations / Listicles
7. .mtbk-ai-row — Athlete Interviews (text + 6-up cards)
8. .mtbk-icon-square — 44×44 orange tag (EV / BR / DT / LS / AT)
9. .mtbk-h48 — 48px subheading shared across the page
10. .mtbk-body — class hook on body