/* ============================================================
HOMEPAGE.CSS — Truka Real Estate
Styles specific to the homepage (index.php).
The homepage is a single-page guided scroll: three-video hero
followed by five chapters, then footer. Each section below
maps to a partial in /partials/.
This file does NOT contain tokens, base reset, or shared
components — those live in base.css and are loaded first.
Class naming conventions: see truka-code-conventions.md §1.
Organization:
1. Hero zone (.hero-*)
2. Chapter 1 (.ch1-*)
3. Chapter 2 (.ch2-*)
4. Chapter 3 (.ch3-*)
4.5 Ch3 → Ch4 bridge (.ch3-ch4-bridge-*) — cinematic transition
5. Chapter 4 (.ch4-*) — cascade + finale (the page close)
6. Footer (.footer-*)
7. Testimonial modal (.testimonial-modal, .modal-*)
Last updated: 2026-06-01 (v2.3: Ch5 collapsed into Ch4 finale; Ch3→Ch4 bridge added)
============================================================ */
/* ============================================================
1. HERO ZONE — .hero-*, .proof-*
------------------------------------------------------------
Five sub-sections, top to bottom on the page:
§1.A Hero head band (.hero-zone, cream)
§1.B Hero videos band (.hero-videos-band, forest-deep)
§1.C Social proof (.proof-section, paper)
§1.D Opt-in card (.hero-optin-section, paper)
§1.E Next-marker bridge (.hero-next-marker → Ch1)
============================================================ */
/* ============================================================
§1.A — HERO HEAD BAND
------------------------------------------------------------
Cream ground. Two-column grid: eyebrow + headline left, info
+ two CTAs right. The cinematic "dive" comes next in §1.B.
============================================================ */
.hero-zone {
background: var(--cream);
position: relative;
isolation: isolate;
padding: 72px 56px 88px;
}
.hero-zone::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner {
max-width: 1600px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: 80px;
align-items: start;
}
.hero-left { padding: 8px 0 0; }
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--terracotta);
font-weight: 700;
margin-bottom: 24px;
}
.hero-eyebrow::before {
content: "";
width: 36px;
height: 1px;
background: var(--terracotta);
}
.hero-headline {
font-family: var(--serif);
font-size: clamp(48px, 5.4vw, 78px);
line-height: 0.98;
color: var(--ink);
font-weight: 400;
letter-spacing: -0.02em;
max-width: 16ch;
margin: 0;
font-variation-settings: "opsz" 144;
}
.hero-headline em {
font-style: italic;
color: var(--terracotta);
font-weight: 500;
}
.hero-right { padding-top: 18px; }
.hero-info {
font-family: var(--serif);
font-size: 18px;
line-height: 1.55;
color: var(--muted);
font-weight: 400;
margin: 0 0 28px;
max-width: 38ch;
font-variation-settings: "opsz" 24;
}
.hero-cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 26px;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 4px;
text-decoration: none;
transition:
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
background 0.2s ease,
color 0.2s ease;
cursor: pointer;
white-space: nowrap;
border: 1px solid transparent;
}
.hero-btn-primary {
background: var(--terracotta);
color: var(--cream);
border-color: var(--terracotta);
}
.hero-btn-primary:hover {
background: #A8442F;
border-color: #A8442F;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(20, 32, 26, 0.15);
}
.hero-btn-secondary {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.hero-btn-secondary:hover {
background: var(--ink);
color: var(--cream);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(20, 32, 26, 0.15);
}
/* ============================================================
§1.B — HERO VIDEOS BAND
------------------------------------------------------------
Forest-deep ground. Centered intro line in cream italic serif
above a 3-up staircase grid. Videos used to live inside the
hero zone; now they have their own dark band. Single-active
behavior is driven by js/hero.js via id="heroVideoStage".
============================================================ */
.hero-videos-band {
background: var(--forest-deep);
position: relative;
isolation: isolate;
padding: 72px 56px 88px;
overflow: hidden;
}
.hero-videos-band::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: radial-gradient(
ellipse at center,
transparent 35%,
rgba(0, 0, 0, 0.30) 100%
);
}
.hero-videos-band::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-videos-inner {
max-width: 1600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.hero-videos-intro {
text-align: center;
margin-bottom: 44px;
}
.hero-videos-intro-line {
font-family: var(--serif);
font-size: clamp(22px, 2.4vw, 32px);
font-style: italic;
color: var(--cream);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0;
font-variation-settings: "opsz" 36;
}
.hero-videos-intro-line em {
font-style: italic;
color: var(--terracotta-soft);
font-weight: 500;
}
.hero-videos-grid {
display: grid;
grid-template-columns: 1fr 1.4fr 2fr;
gap: 32px;
align-items: end;
}
.hero-video-box {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.4s ease;
background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
box-shadow:
0 1px 2px rgba(20, 32, 26, 0.08),
0 12px 32px rgba(20, 32, 26, 0.12);
}
/* Staircase presence — smaller videos sit slightly recessed */
.hero-video-box[data-video="1"] { opacity: 0.78; }
.hero-video-box[data-video="2"] { opacity: 0.88; }
.hero-video-box[data-video="3"] { opacity: 1; }
.hero-video-box:hover {
opacity: 1;
transform: translateY(-4px);
box-shadow:
0 1px 2px rgba(20, 32, 26, 0.08),
0 24px 48px rgba(20, 32, 26, 0.18);
}
/* Active state — terracotta outline, brightened */
.hero-video-box.is-active {
opacity: 1;
box-shadow:
0 1px 2px rgba(20, 32, 26, 0.1),
0 32px 64px rgba(20, 32, 26, 0.22),
0 0 0 2px var(--terracotta);
}
/* Inactive boxes recede when one is playing */
.hero-videos-grid.has-active .hero-video-box:not(.is-active) {
opacity: 0.55;
transform: scale(0.97);
}
.hero-videos-grid.has-active .hero-video-box:not(.is-active):hover {
opacity: 0.85;
transform: scale(0.97) translateY(-2px);
}
/* Video content — placeholder ground for video, with subtle inner glow */
.hero-video-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse 70% 50% at 50% 40%, rgba(212, 160, 23, 0.05) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 50% 50%, rgba(244, 236, 216, 0.04) 0%, transparent 60%);
}
/* Vignette on inactive boxes only */
.hero-video-box:not(.is-active) .hero-video-content::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.3) 100%);
pointer-events: none;
}
/* Play button — cream disc on inactive, terracotta on active */
.hero-play {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(244, 236, 216, 0.92);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, background 0.3s ease;
z-index: 2;
}
.hero-video-box:hover .hero-play {
background: var(--cream);
transform: scale(1.08);
}
.hero-video-box.is-active .hero-play {
background: var(--terracotta);
}
.hero-play svg {
width: 22px;
height: 22px;
fill: var(--forest-deep);
margin-left: 3px;
}
.hero-video-box.is-active .hero-play svg { fill: var(--cream); }
/* Video meta — bottom corners of each box, cream type on dark gradient */
.hero-video-meta {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: flex-end;
color: var(--cream);
}
.hero-video-meta-num {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
font-weight: 700;
margin-bottom: 2px;
}
.hero-video-meta-title {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 16px;
line-height: 1.15;
font-variation-settings: "opsz" 24;
}
.hero-video-meta-duration {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(244, 236, 216, 0.7);
font-weight: 600;
background: rgba(20, 32, 26, 0.55);
padding: 4px 8px;
border-radius: 3px;
flex-shrink: 0;
}
/* ============================================================
§1.C — SOCIAL PROOF
------------------------------------------------------------
Paper ground. Testimonial carousel of 8 cards between the
Videos Band (forest-deep above) and Opt-in (cream-ish below).
Top horizon is a single concave curve in forest-deep — visually
pours the dark band above down into this section. Bottom is a
double-band horizon: cream curve + gold-soft ribbon offset
above, signalling "this is the section that gets a special
ribbon finish." Faded large Truka tree watermark sits behind
the cards.
============================================================ */
.proof-section {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--ink-soft);
padding: 120px 56px 140px;
}
/* Faded tree watermark behind the cards. The SVG has a dark fill baked
in (#2a382a) so we recolor with filter: brightness(0) invert(1) for a
near-white silhouette. Nav uses the same file via ![]()
; changing the
file would break nav, so the filter approach is the right path here.
Positioned by `top` so the canopy reliably sits near the section's
top edge regardless of carousel content height — the lower trunk
clips at the section's bottom via overflow: hidden on .proof-section. */
.proof-watermark {
position: absolute;
right: -740px;
top: -900px;
height: 2400px;
width: auto;
opacity: 0.035;
filter: brightness(0) invert(1);
z-index: 0;
pointer-events: none;
user-select: none;
}
/* Top horizon — concave, forest-deep, pouring down from videos band */
.proof-horizon-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 1;
pointer-events: none;
}
.proof-horizon-top path { fill: var(--forest-deep); }
/* Bottom double-band horizon — cream primary + gold-soft ribbon above */
.proof-horizon-cream {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 70px;
z-index: 1;
pointer-events: none;
}
.proof-horizon-cream path { fill: var(--cream); }
/* Gold lens shares its bottom-corner endpoints with the cream curve so
the two horizons taper to zero thickness at the section's bottom-left
and bottom-right corners. Same SVG dimensions as cream — the path
itself defines the lens shape (top curve peaks higher than cream's
apex; bottom curve follows cream's apex). */
.proof-horizon-gold {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 70px;
z-index: 2;
pointer-events: none;
}
.proof-horizon-gold path { fill: var(--gold-soft); }
.proof-inner {
position: relative;
z-index: 3;
max-width: 1600px;
margin: 0 auto;
}
/* Header */
.proof-header {
text-align: center;
margin-bottom: 64px;
}
.proof-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--terracotta);
font-weight: 700;
margin-bottom: 24px;
}
.proof-eyebrow::before,
.proof-eyebrow::after {
content: "";
width: 36px;
height: 1px;
background: var(--terracotta);
}
.proof-headline {
font-family: var(--serif);
font-size: clamp(36px, 4vw, 60px);
line-height: 1.1;
color: var(--paper-pure);
font-weight: 400;
letter-spacing: -0.015em;
max-width: 22ch;
margin: 0 auto;
font-variation-settings: "opsz" 144;
}
.proof-headline em {
font-style: italic;
color: var(--terracotta-soft);
font-weight: 500;
}
/* Carousel — native scroll + snap-scroll. Auto-advance and arrow
buttons drive scrollLeft; mobile gets swipe for free. */
.proof-carousel {
position: relative;
}
/* Viewport breaks out of .proof-inner to span the full browser width
and clips the track via overflow: hidden. The track is transformed
horizontally by JS (translateX) — no native scrolling. Cards scroll
edge-to-edge: leaving cards exit at viewport pixel 0, trailing
cards enter from the right edge. The track's leading padding aligns
the first visible card with the section header above. */
.proof-carousel-viewport {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
overflow: hidden;
}
.proof-carousel-track {
display: flex;
gap: 32px;
padding: 0 56px 12px;
will-change: transform;
}
/* Card — Horizon arch silhouette (24px top corners, 4px bottom).
Exactly 3 cards fit horizontally at desktop:
3 cards + 2 gaps (32px each) + leading 56 + small trailing ≈ 100vw
Width formula matches that geometry. */
.proof-card {
flex: 0 0 calc((100vw - 80px) / 3);
background: var(--paper-pure);
border-radius: 24px 24px 4px 4px;
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
overflow: hidden;
position: relative;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.proof-card:hover {
transform: translateY(-4px);
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55);
}
/* Poster sits inset 16px from card's top/left/right — the paper-pure
card body shows around it as an internal frame. Identity bar below
stays edge-to-edge with its own padding. Rounded on all four corners
so the cream frame reads as a matted picture. */
.proof-card-poster {
position: relative;
aspect-ratio: 16 / 9;
margin: 16px 16px 0;
border-radius: 24px;
background: linear-gradient(135deg, var(--forest-deep) 0%, #1c2b24 100%);
overflow: hidden;
}
/* Real-video poster — auto-generated Cloudflare Stream thumbnail.
Fills the poster region; the parent's overflow: hidden + border-radius
clip the image into the rounded shape (no border-radius needed here). */
.proof-card-poster-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder name overlay — visible until real poster JPGs ship */
.proof-card-poster-name {
position: absolute;
left: 20px;
bottom: 14px;
font-family: var(--serif);
font-style: italic;
font-size: 32px;
color: var(--cream);
opacity: 0.4;
font-weight: 400;
font-variation-settings: "opsz" 72;
pointer-events: none;
letter-spacing: -0.01em;
}
.proof-play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--terracotta);
color: var(--cream);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(20, 32, 26, 0.25);
transition: transform 0.2s ease;
padding: 0;
}
.proof-play-button svg {
width: 22px;
height: 22px;
margin-left: 3px;
}
.proof-play-button:hover {
transform: translate(-50%, -50%) scale(1.08);
}
/* Identity bar — same paper-pure as the card body, edge-to-edge below
the poster frame. Text colors stay ink/muted (card is bright). */
.proof-identity {
background: var(--paper-pure);
padding: 20px 24px 22px;
}
.proof-identity-row {
display: flex;
align-items: center;
}
.proof-identity-name-row {
gap: 12px;
margin-bottom: 8px;
}
.proof-identity-logo {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.proof-identity-name {
font-family: var(--serif);
font-size: 18px;
color: var(--ink);
font-weight: 500;
font-variation-settings: "opsz" 36;
line-height: 1.2;
}
.proof-identity-markets-row {
gap: 8px;
}
.proof-identity-pin {
width: 14px;
height: 14px;
color: var(--muted);
flex-shrink: 0;
}
.proof-identity-markets {
font-family: var(--sans);
font-size: 13px;
font-style: italic;
color: var(--muted);
line-height: 1.3;
}
/* Controls — prev arrow + pause + dots + next arrow */
.proof-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 40px;
}
.proof-arrow {
width: 44px;
height: 44px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--cream-dim);
color: var(--cream-dim);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s ease, color 0.2s ease,
background 0.2s ease, transform 0.2s ease;
padding: 0;
}
.proof-arrow svg {
width: 18px;
height: 18px;
}
.proof-arrow:hover {
border-color: var(--terracotta-soft);
color: var(--terracotta-soft);
}
.proof-arrow.is-disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.proof-pause-toggle {
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--cream-muted);
color: var(--cream-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: color 0.2s ease, border-color 0.2s ease;
}
.proof-pause-toggle:hover {
color: var(--terracotta-soft);
border-color: var(--terracotta-soft);
}
.proof-pause-toggle svg {
width: 12px;
height: 12px;
}
.proof-pause-toggle .proof-icon-pause { display: none; }
.proof-pause-toggle .proof-icon-play { display: none; }
.proof-pause-toggle.is-playing .proof-icon-pause { display: block; }
.proof-pause-toggle.is-paused .proof-icon-play { display: block; }
/* ============================================================
§1.D — HERO OPT-IN
------------------------------------------------------------
Paper-pure card. Anchor target for #opt-in (smooth-scroll
from nav CTA and hero "Get the Script" button).
============================================================ */
.hero-optin-section {
max-width: 1400px;
margin: 0 auto;
padding: 30px 80px;
position: relative;
z-index: 2;
}
/* Card — wide 2-column grid inside a 1100px frame.
Left column carries the headline + sub copy (the pitch); right
column carries the GHL iframe + disclaimer (the conversion).
Vertically centered so the short left content aligns with the
taller right form. Stacks to a single column at <=900px. */
.hero-optin-card {
max-width: 1100px;
margin: 0 auto;
background: var(--paper-pure);
border: 1px solid rgba(196, 98, 45, 0.3);
border-radius: 12px;
padding: 56px 64px;
position: relative;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 56px;
align-items: center;
box-shadow: 0 1px 2px rgba(20, 32, 26, 0.04), 0 24px 64px rgba(20, 32, 26, 0.10);
}
.hero-optin-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, var(--gold), var(--terracotta));
border-radius: 12px 0 0 12px;
}
.hero-optin-headline {
font-family: var(--serif);
font-size: clamp(30px, 4vw, 42px);
line-height: 1.1;
color: var(--ink);
font-weight: 400;
letter-spacing: -0.015em;
text-align: left;
margin: 0 0 16px;
font-variation-settings: "opsz" 72;
}
.hero-optin-headline em {
font-style: italic;
color: var(--terracotta);
font-weight: 500;
}
.hero-optin-desc {
font-family: var(--serif);
font-style: italic;
font-size: 17px;
line-height: 1.4;
color: var(--muted);
font-weight: 400;
text-align: left;
margin: 0;
font-variation-settings: "opsz" 24;
}
/* GHL embed wrapper — iframe handles its own width/height/border via
inline styles from the embed snippet; it fills the right column at
100% width with a small gap to the social-proof line underneath. */
.hero-optin-iframe-wrap {
margin: 0;
}
/* Micro social-proof line directly under the form — quiet trust cue
that doesn't compete with the headline or the form fields. */
.hero-optin-proof {
font-family: var(--serif);
font-style: italic;
font-size: 13px;
line-height: 1.4;
color: var(--muted);
font-weight: 400;
text-align: left;
margin: 12px 0 4px;
font-variation-settings: "opsz" 24;
}
.hero-optin-fineprint {
font-family: var(--sans);
font-style: italic;
font-size: 12px;
line-height: 1.4;
color: var(--muted);
font-weight: 400;
text-align: left;
margin: 0;
}
/* ============================================================
§1.E — HERO NEXT-MARKER
------------------------------------------------------------
Bridge cluster (CONTINUE eyebrow → chapter heading → ↓ arrow)
between the opt-in card and the start of Chapter 1's forest-deep
dive. Centered, in the cream banner area below the card.
============================================================ */
.hero-next-marker {
max-width: 1400px;
margin: 0 auto;
padding: 24px 80px 56px;
position: relative;
z-index: 2;
text-align: center;
}
.hero-next-marker-label {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-soft);
font-weight: 600;
margin-bottom: 14px;
}
.hero-next-marker-title {
font-family: var(--serif);
font-size: 22px;
color: var(--ink);
font-weight: 400;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 36;
margin-bottom: 10px;
}
.hero-next-marker-title em {
font-style: italic;
color: var(--terracotta);
font-weight: 500;
}
.hero-next-marker-arrow {
font-size: 20px;
color: var(--terracotta);
line-height: 1;
}
/* 1024px — proof carousel drops from 3 visible cards to 2 (tablet) */
@media (max-width: 1024px) {
.proof-card { flex: 0 0 calc((100vw - 80px) / 2); }
}
/* 900px — collapse 2-col hero, stack video grid, full-width buttons */
@media (max-width: 900px) {
.hero-zone { padding: 40px 24px 48px; }
.hero-inner {
grid-template-columns: 1fr;
gap: 32px;
}
.hero-right { padding-top: 0; }
.hero-headline { font-size: 38px; max-width: none; }
.hero-info { font-size: 16px; }
.hero-cta-row { flex-direction: column; align-items: stretch; }
.hero-btn { width: 100%; padding: 16px 24px; }
.hero-videos-band { padding: 48px 24px 56px; }
.hero-videos-intro { margin-bottom: 28px; }
.hero-videos-intro-line { font-size: 20px; }
.hero-videos-grid {
grid-template-columns: 1fr;
gap: 16px;
}
/* Opt-in card collapses from 2-col to 1-col so the iframe doesn't
get squeezed at narrow widths. Left column stacks above right. */
.hero-optin-card {
grid-template-columns: 1fr;
gap: 32px;
}
/* §1.C Social proof — 1 card at <900px, snap-scroll dominant */
.proof-section { padding: 80px 24px 110px; }
.proof-watermark { display: none; }
.proof-header { margin-bottom: 40px; }
.proof-headline { font-size: 32px; }
.proof-card { flex: 0 0 calc(100vw - 48px); }
.proof-carousel-track { gap: 20px; padding: 0 24px 12px; }
.proof-play-button { width: 52px; height: 52px; }
.proof-play-button svg { width: 18px; height: 18px; }
.proof-card-poster-name { font-size: 26px; left: 16px; bottom: 12px; }
.proof-identity { padding: 16px 18px 18px; }
.proof-identity-name { font-size: 16px; }
.proof-identity-markets { font-size: 12px; }
.proof-controls { margin-top: 28px; gap: 14px; }
.proof-arrow { width: 40px; height: 40px; }
.proof-arrow svg { width: 16px; height: 16px; }
}
/* Mobile — finer type tweaks */
@media (max-width: 700px) {
.hero-eyebrow {
font-size: 10px;
letter-spacing: 0.24em;
margin-bottom: 22px;
}
.hero-eyebrow::before { width: 24px; }
.hero-headline {
font-size: 34px;
line-height: 0.98;
}
.hero-play {
width: 52px;
height: 52px;
}
.hero-video-meta {
bottom: 12px;
left: 12px;
right: 12px;
}
.hero-video-meta-title { font-size: 14px; }
.hero-optin-section {
padding: 36px 24px;
}
.hero-optin-card {
padding: 40px 24px;
}
.hero-optin-headline {
font-size: 30px;
}
.hero-next-marker {
padding: 16px 24px 40px;
}
.hero-next-marker-title { font-size: 18px; }
}
@media (max-width: 380px) {
.hero-headline { font-size: 30px; }
.hero-optin-headline { font-size: 24px; }
}
/* ============================================================
2. CHAPTER 1 — THE OPERATOR — .ch1-*
------------------------------------------------------------
============================================================ */
/* Section wrapper — full-bleed forest-deep ground with scoped cinematic signature.
The grain + vignette pseudoelements scope to this section (not body) because
each chapter on the merged page has its own ground color and signature intensity. */
.ch1-section {
position: relative;
overflow: hidden;
background: var(--forest-deep);
color: var(--cream);
padding: 0;
}
/* Film grain — sits above content (high z-index inside section stacking context). */
.ch1-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Soft vignette — sits below future content (low z-index). */
.ch1-section::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.35) 100%);
}
/* Top horizon curve — subtle single-band concave dip where the paper
area above pours gently into Ch1's forest-deep. ~10px arc depth,
roughly 25-30% of the form-box horizon below. No gold trim; the
dramatic double-band gesture stays reserved for special sections. */
.ch1-top-curve {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 15px;
z-index: 5;
pointer-events: none;
}
.ch1-top-curve path { fill: var(--paper); }
/* Chapter mark — "Chapter I — The Operator" header row at top of section.
Roman numeral display per Build Specs 4.2; hairline divider per Build Specs 2.3. */
.ch1-mark {
max-width: 1400px;
margin: 0 auto;
padding: 80px 80px 0;
position: relative;
z-index: 2;
}
.ch1-mark-row {
display: flex;
align-items: baseline;
gap: 24px;
}
.ch1-mark-num {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 22px;
color: var(--gold);
font-variation-settings: "opsz" 36;
}
.ch1-mark-divider {
flex: 1;
height: 1px;
background: var(--cream-faint);
align-self: center;
}
.ch1-mark-label {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
}
/* Mobile chapter-mark — tighter padding and scaled type per Build Specs 4.11 */
@media (max-width: 700px) {
.ch1-mark {
padding: 48px 24px 0;
}
.ch1-mark-row {
gap: 14px;
}
.ch1-mark-num {
font-size: 17px;
}
.ch1-mark-label {
font-size: 9px;
letter-spacing: 0.22em;
}
}
/* Body — wider container (1600px max-width) so the 2-column layout
breathes more on desktop than the original 1400px allowed. */
.ch1-body {
max-width: 1600px;
margin: 0 auto;
padding: 80px 64px 140px;
position: relative;
z-index: 2;
}
.ch1-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 80px;
align-items: start;
}
/* Right column — landscape photo of Andrew + caption + decade section.
Smaller story column lives on the left; this larger column carries
the image and the proof-of-transformation block underneath. */
.ch1-portrait-col {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Portrait figure — 3:2 landscape holder for /assets/andrew-working.png. */
.ch1-portrait {
position: relative;
aspect-ratio: 3 / 2;
border-radius: 24px;
overflow: hidden;
margin: 0;
box-shadow:
0 24px 56px rgba(0, 0, 0, 0.45),
0 8px 24px rgba(0, 0, 0, 0.3);
}
.ch1-portrait-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ch1-portrait-caption {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 18px;
color: var(--cream-dim);
line-height: 1.3;
font-variation-settings: "opsz" 24;
padding-left: 4px;
}
.ch1-portrait-caption-name {
display: block;
font-style: normal;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
margin-bottom: 6px;
font-family: var(--sans);
}
/* "Operator." carries the emphasis — the chapter title itself.
Reinforces "The Operator" header without competing with it. */
.ch1-portrait-caption-text em {
font-style: italic;
color: var(--gold-soft);
font-weight: 600;
}
/* Tablet — grid collapses to single column. Portrait column moves
ABOVE the story (visual anchor first, narrative below). */
@media (max-width: 1100px) {
.ch1-grid {
grid-template-columns: 1fr;
gap: 64px;
}
.ch1-portrait-col {
order: 1;
max-width: 720px;
}
.ch1-story {
order: 2;
}
}
/* Mobile — body padding tightens, decade-section spacing trims down */
@media (max-width: 700px) {
.ch1-body {
padding: 40px 24px 72px;
}
.ch1-grid {
gap: 40px;
}
.ch1-portrait-col {
max-width: 100%;
}
.ch1-portrait {
border-radius: 16px;
}
.ch1-portrait-caption {
font-size: 15px;
}
.ch1-portrait-caption-name {
font-size: 10px;
letter-spacing: 0.18em;
margin-bottom: 4px;
}
.ch1-decade-section {
margin-top: 40px;
padding-top: 28px;
}
}
/* Story column — right side of grid: eyebrow, headline, beats, credentials. */
.ch1-story {
padding-top: 8px;
}
.ch1-story-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--terracotta-soft);
font-weight: 700;
margin-bottom: 32px;
}
.ch1-story-eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--terracotta-soft);
}
.ch1-story-headline {
font-family: var(--serif);
font-size: clamp(48px, 5.5vw, 84px);
line-height: 0.94;
color: var(--cream);
font-weight: 400;
letter-spacing: -0.025em;
margin-bottom: 48px;
font-variation-settings: "opsz" 144;
}
.ch1-story-headline em {
font-style: italic;
color: var(--gold);
font-weight: 500;
}
/* Four beats — narrative microbeats per Build Specs 2.5 */
.ch1-beats {
display: flex;
flex-direction: column;
gap: 36px;
margin-bottom: 56px;
}
.ch1-beat {
display: grid;
grid-template-columns: 48px 1fr;
gap: 24px;
align-items: baseline;
}
.ch1-beat-num {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 22px;
color: var(--gold);
text-align: right;
padding-top: 4px;
font-variation-settings: "opsz" 36;
line-height: 1;
}
.ch1-beat-text {
font-family: var(--serif);
font-size: 22px;
line-height: 1.4;
color: var(--cream);
font-weight: 400;
font-variation-settings: "opsz" 36;
}
.ch1-beat-text em {
font-style: italic;
color: var(--gold-soft);
font-weight: 400;
}
/* Andrew's direct quotes — curly quotes in gold signal "Andrew speaks" per Build Specs 4.9 */
.ch1-beat-quote {
font-style: italic;
color: var(--cream);
font-weight: 400;
display: block;
margin-top: 4px;
line-height: 1.35;
}
.ch1-beat-quote em {
color: var(--gold);
font-style: italic;
font-weight: 500;
}
/* Aside — supporting human detail recedes via family + size + opacity per Build Specs 4.10 */
.ch1-beat-aside {
display: block;
margin-top: 14px;
font-family: var(--sans);
font-style: italic;
font-size: 13px;
line-height: 1.5;
color: var(--cream-muted);
font-weight: 400;
letter-spacing: 0.01em;
font-variation-settings: normal;
}
/* Visitor-pivot moment — first explicit "you" rendered in terracotta-soft italic per Build Specs 4.4 */
.ch1-beat-you {
color: var(--terracotta-soft);
font-style: italic;
font-weight: 500;
}
/* Decade section — wraps the bridge + stats + closing. A single
top border + 36px padding-top defines the separation from the
portrait caption above. */
.ch1-decade-section {
margin-top: 60px;
padding-top: 36px;
border-top: 1px solid var(--cream-faint);
}
.ch1-decade-bridge {
font-family: var(--serif);
font-style: italic;
font-size: clamp(40px, 5vw, 56px);
color: var(--gold-soft);
font-weight: 400;
line-height: 1;
letter-spacing: -0.015em;
margin-bottom: 56px;
font-variation-settings: "opsz" 72;
}
/* Stats band — three columns, ascending order (10+ → 100+ → 500+).
Single bottom hairline; the top border lives on .ch1-decade-section. */
.ch1-stats {
display: flex;
gap: 48px;
padding-bottom: 40px;
border-bottom: 1px solid var(--cream-faint);
}
.ch1-stat {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.ch1-stat-value {
font-family: var(--serif);
font-size: 56px;
color: var(--cream);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 72;
}
.ch1-stat-value em {
font-style: italic;
color: var(--gold-soft);
font-weight: 400;
}
.ch1-stat-label {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
font-family: var(--sans);
}
/* Closing line — left-aligned terminal pivot to "you" */
.ch1-closing {
font-family: var(--serif);
font-style: italic;
font-size: 24px;
color: var(--cream-dim);
font-weight: 400;
line-height: 1.5;
margin-top: 56px;
font-variation-settings: "opsz" 36;
}
.ch1-closing em {
font-style: italic;
color: var(--terracotta-soft);
font-weight: 500;
}
/* Draft-copy approval tag — visible flag that copy is not yet locked.
Remove when Andrew signs off on the chapter's copy. */
.ch1-approval-tag {
margin-top: 24px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: rgba(212, 160, 23, 0.08);
border: 1px dashed rgba(212, 160, 23, 0.35);
border-radius: 4px;
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-soft);
font-weight: 600;
}
.ch1-approval-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
}
/* Mobile story column — natural document order (photo above, story below). */
@media (max-width: 700px) {
.ch1-story {
padding-top: 0;
}
.ch1-story-eyebrow {
font-size: 9px;
letter-spacing: 0.22em;
margin-bottom: 24px;
}
.ch1-story-eyebrow::before {
width: 20px;
}
.ch1-story-headline {
font-size: 36px;
line-height: 0.98;
margin-bottom: 32px;
letter-spacing: -0.02em;
}
.ch1-beats {
gap: 24px;
margin-bottom: 24px;
}
.ch1-beat {
grid-template-columns: 28px 1fr;
gap: 14px;
}
.ch1-beat-num {
font-size: 16px;
padding-top: 3px;
}
.ch1-decade-bridge {
font-size: 36px;
margin-bottom: 32px;
}
.ch1-stats {
gap: 16px;
padding-bottom: 24px;
}
.ch1-stat-value {
font-size: 32px;
}
.ch1-stat-label {
font-size: 9px;
letter-spacing: 0.22em;
}
.ch1-closing {
font-size: 18px;
margin-top: 32px;
}
.ch1-beat-text {
font-size: 17px;
line-height: 1.45;
}
.ch1-beat-quote {
margin-top: 2px;
line-height: 1.4;
}
.ch1-beat-aside {
margin-top: 10px;
font-size: 12px;
}
.ch1-approval-tag {
margin-top: 20px;
font-size: 9px;
letter-spacing: 0.16em;
padding: 8px 12px;
}
}
/* Small mobile — type tightens further at 380px and below */
@media (max-width: 380px) {
.ch1-story-headline {
font-size: 32px;
}
.ch1-beat-text {
font-size: 16px;
}
}
/* End note — closing bridge to Chapter II. Hairline separation per Build Specs 4.8. */
.ch1-end {
max-width: 1400px;
margin: 0 auto;
padding: 0 80px 100px;
position: relative;
z-index: 2;
}
.ch1-end-inner {
padding-top: 48px;
border-top: 1px solid var(--cream-faint);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.ch1-end-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
}
.ch1-end-next {
font-family: var(--serif);
font-style: italic;
font-size: 18px;
color: var(--cream-dim);
font-weight: 500;
font-variation-settings: "opsz" 24;
}
.ch1-end-next em {
color: var(--terracotta-soft);
}
/* Mobile — end note stacks vertically, smaller type */
@media (max-width: 700px) {
.ch1-end {
padding: 0 24px 56px;
}
.ch1-end-inner {
flex-direction: column;
gap: 14px;
align-items: flex-start;
padding-top: 36px;
}
.ch1-end-label {
font-size: 9px;
}
.ch1-end-next {
font-size: 16px;
}
}
/* ============================================================
3. CHAPTER 2 — THE RANGE — .ch2-*
------------------------------------------------------------
============================================================ */
/* Section wrapper — Chapter 2 ground is --forest (one shade lighter than Ch1).
Cinematic signature scoped to section, vignette intensity slightly lighter
than Ch1 per Build Specs 4.1. */
.ch2-section {
position: relative;
overflow: hidden;
background: var(--forest);
color: var(--cream);
padding: 0;
}
.ch2-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ch2-section::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.30) 100%);
}
/* Chapter mark — same pattern as Ch1, prefixed ch2-* */
.ch2-mark {
max-width: 1400px;
margin: 0 auto;
padding: 80px 80px 0;
position: relative;
z-index: 2;
}
.ch2-mark-row {
display: flex;
align-items: baseline;
gap: 24px;
}
.ch2-mark-num {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 22px;
color: var(--gold);
font-variation-settings: "opsz" 36;
}
.ch2-mark-divider {
flex: 1;
height: 1px;
background: var(--cream-faint);
align-self: center;
}
.ch2-mark-label {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
}
/* Chapter head — eyebrow + headline + lede paragraph */
.ch2-head {
max-width: 1400px;
margin: 0 auto;
padding: 80px 80px 64px;
position: relative;
z-index: 2;
}
.ch2-head-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--terracotta-soft);
font-weight: 700;
margin-bottom: 28px;
}
.ch2-head-eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--terracotta-soft);
}
.ch2-headline {
font-family: var(--serif);
font-size: clamp(48px, 6vw, 88px);
line-height: 0.94;
color: var(--cream);
font-weight: 400;
letter-spacing: -0.025em;
margin-bottom: 28px;
max-width: 20ch;
font-variation-settings: "opsz" 144;
}
.ch2-headline em {
font-style: italic;
color: var(--gold);
font-weight: 500;
}
.ch2-lede {
font-family: var(--serif);
font-size: 22px;
font-style: italic;
line-height: 1.45;
color: var(--cream-dim);
max-width: 580px;
font-weight: 400;
font-variation-settings: "opsz" 36;
}
/* Conversations grid — five cards, first card spans full width (featured),
remaining four pair in two rows per Build Specs 2.5 */
.ch2-conversations {
max-width: 1400px;
margin: 0 auto;
padding: 0 80px;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.ch2-card:first-child {
grid-column: 1 / -1;
}
.ch2-card {
position: relative;
padding: 56px 56px 48px;
background: rgba(20, 32, 26, 0.4);
border: 1px solid var(--cream-faint);
border-radius: 10px;
transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.ch2-card:hover {
background: rgba(20, 32, 26, 0.55);
border-color: rgba(244, 236, 216, 0.22);
transform: translateY(-3px);
}
.ch2-card-num {
position: absolute;
top: 28px;
right: 32px;
font-family: var(--serif);
font-style: italic;
font-size: 32px;
color: var(--gold);
font-weight: 500;
opacity: 0.55;
line-height: 1;
font-variation-settings: "opsz" 72;
transition: opacity 0.4s ease;
}
.ch2-card:hover .ch2-card-num {
opacity: 1;
}
.ch2-card-label {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 700;
margin-bottom: 24px;
}
.ch2-card-quote {
font-family: var(--serif);
font-style: italic;
font-size: 32px;
line-height: 1.25;
color: var(--cream);
font-weight: 400;
margin-bottom: 28px;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 72;
}
.ch2-card:first-child .ch2-card-quote {
font-size: 42px;
line-height: 1.18;
max-width: 80%;
}
/* Gold curly quote marks — "Andrew speaks" visual signature per Build Specs 4.9 */
.ch2-card-quote-open,
.ch2-card-quote-close {
color: var(--gold);
font-weight: 500;
}
.ch2-card-context {
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: var(--cream-dim);
max-width: 56ch;
}
/* Closing statement — "The point" reveal, Andrew speaks directly, then approval tag */
.ch2-closing {
max-width: 1400px;
margin: 0 auto;
padding: 120px 80px 0;
position: relative;
z-index: 2;
}
.ch2-closing-inner {
border-top: 1px solid var(--cream-faint);
padding-top: 64px;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 64px;
align-items: start;
}
.ch2-closing-label {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 700;
padding-top: 12px;
}
.ch2-closing-text {
font-family: var(--serif);
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.2;
color: var(--cream);
font-weight: 400;
letter-spacing: -0.015em;
font-variation-settings: "opsz" 72;
}
.ch2-closing-text em {
font-style: italic;
color: var(--gold);
font-weight: 500;
}
.ch2-closing-text-you {
color: var(--terracotta-soft);
font-style: italic;
font-weight: 500;
}
.ch2-closing-attribution {
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--cream-faint);
display: inline-flex;
align-items: center;
gap: 10px;
}
.ch2-closing-attribution::before {
content: "—";
color: var(--gold);
font-family: var(--serif);
font-style: italic;
font-size: 16px;
}
/* Draft-copy approval tag — same pattern as Ch1, prefixed ch2-* */
.ch2-approval-tag {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 48px;
padding: 10px 16px;
background: rgba(212, 160, 23, 0.08);
border: 1px dashed rgba(212, 160, 23, 0.35);
border-radius: 4px;
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-soft);
font-weight: 600;
}
.ch2-approval-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
}
/* End note — closing bridge to Chapter III */
.ch2-end {
max-width: 1400px;
margin: 0 auto;
padding: 100px 80px;
position: relative;
z-index: 2;
}
.ch2-end-inner {
padding-top: 48px;
border-top: 1px solid var(--cream-faint);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.ch2-end-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
}
.ch2-end-next {
font-family: var(--serif);
font-style: italic;
font-size: 18px;
color: var(--cream-dim);
font-weight: 500;
font-variation-settings: "opsz" 24;
}
.ch2-end-next em {
color: var(--terracotta-soft);
}
/* Tablet — conversations collapse to single column */
@media (max-width: 1100px) {
.ch2-conversations {
grid-template-columns: 1fr;
}
.ch2-card:first-child {
grid-column: 1;
}
.ch2-card:first-child .ch2-card-quote {
font-size: 36px;
max-width: 100%;
}
.ch2-closing-inner {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* Mobile */
@media (max-width: 700px) {
.ch2-mark {
padding: 48px 24px 0;
}
.ch2-mark-row { gap: 14px; }
.ch2-mark-num { font-size: 17px; }
.ch2-mark-label { font-size: 9px; letter-spacing: 0.22em; }
.ch2-head {
padding: 48px 24px 40px;
}
.ch2-head-eyebrow {
font-size: 9px;
letter-spacing: 0.22em;
margin-bottom: 20px;
}
.ch2-head-eyebrow::before { width: 20px; }
.ch2-headline {
font-size: 38px;
line-height: 0.98;
margin-bottom: 20px;
}
.ch2-lede { font-size: 17px; }
.ch2-conversations {
padding: 0 24px;
gap: 16px;
}
.ch2-card {
padding: 32px 24px 28px;
}
.ch2-card-num {
top: 20px;
right: 22px;
font-size: 26px;
}
.ch2-card-label {
font-size: 9px;
letter-spacing: 0.22em;
margin-bottom: 16px;
}
.ch2-card-quote {
font-size: 22px;
line-height: 1.28;
margin-bottom: 18px;
}
.ch2-card:first-child .ch2-card-quote {
font-size: 24px;
}
.ch2-card-context {
font-size: 13px;
}
.ch2-closing {
padding: 72px 24px 0;
}
.ch2-closing-inner {
padding-top: 40px;
gap: 14px;
}
.ch2-closing-label {
padding-top: 0;
font-size: 9px;
}
.ch2-closing-text {
font-size: 24px;
}
.ch2-closing-attribution {
font-size: 11px;
margin-top: 24px;
padding-top: 16px;
}
.ch2-approval-tag {
margin-top: 32px;
font-size: 9px;
letter-spacing: 0.16em;
padding: 8px 12px;
}
.ch2-end {
padding: 64px 24px;
}
.ch2-end-inner {
flex-direction: column;
gap: 14px;
align-items: flex-start;
padding-top: 36px;
}
.ch2-end-label { font-size: 9px; }
.ch2-end-next { font-size: 16px; }
}
@media (max-width: 380px) {
.ch2-headline { font-size: 34px; }
.ch2-card-quote { font-size: 20px; }
.ch2-closing-text { font-size: 22px; }
}
/* ============================================================
4. CHAPTER 3 — THE METHOD — .ch3-*
------------------------------------------------------------
============================================================ */
/* Section wrapper — Chapter 3 ground is --forest-mid (transition shade).
Cinematic signature softer than Ch1/Ch2 per Build Specs 4.1 — opacity 0.035,
vignette rgba(0,0,0,0.25). The brightness arc lifts toward chapters of light. */
.ch3-section {
position: relative;
overflow: hidden;
background: var(--forest-mid);
color: var(--cream);
padding: 0;
}
.ch3-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ch3-section::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.25) 100%);
}
/* Chapter mark — same pattern as Ch1/Ch2 */
.ch3-mark {
max-width: 1400px;
margin: 0 auto;
padding: 80px 80px 0;
position: relative;
z-index: 2;
}
.ch3-mark-row {
display: flex;
align-items: baseline;
gap: 24px;
}
.ch3-mark-num {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 22px;
color: var(--gold);
font-variation-settings: "opsz" 36;
}
.ch3-mark-divider {
flex: 1;
height: 1px;
background: var(--cream-faint);
align-self: center;
}
.ch3-mark-label {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
}
/* Chapter head — eyebrow + headline + lede paragraph */
.ch3-head {
max-width: 1400px;
margin: 0 auto;
padding: 80px 80px 0;
position: relative;
z-index: 2;
}
.ch3-head-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--terracotta-soft);
font-weight: 700;
margin-bottom: 28px;
}
.ch3-head-eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--terracotta-soft);
}
.ch3-headline {
font-family: var(--serif);
font-size: clamp(48px, 6vw, 88px);
line-height: 0.94;
color: var(--cream);
font-weight: 400;
letter-spacing: -0.025em;
margin-bottom: 28px;
max-width: 20ch;
font-variation-settings: "opsz" 144;
}
.ch3-headline em {
font-style: italic;
color: var(--gold);
font-weight: 500;
}
.ch3-lede {
font-family: var(--serif);
font-size: 22px;
font-style: italic;
line-height: 1.45;
color: var(--cream-dim);
max-width: 580px;
font-weight: 400;
font-variation-settings: "opsz" 36;
}
/* Manifesto statements — each statement is its own scroll moment.
Massive vertical breathing room between them. Pure type on ground, no cards. */
.ch3-statements {
max-width: 1400px;
margin: 0 auto;
padding: 0 80px;
position: relative;
z-index: 2;
}
.ch3-statement {
display: grid;
grid-template-columns: 100px 1fr;
gap: 48px;
padding-top: clamp(140px, 20vh, 200px);
padding-bottom: 8px;
position: relative;
}
/* Hairline above each statement (chapter head separates the first) */
.ch3-statement::before {
content: "";
position: absolute;
top: 0;
left: 100px;
right: 0;
height: 1px;
background: var(--cream-faint);
}
.ch3-statement-marker {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding-top: clamp(80px, 12vh, 120px);
}
.ch3-statement-num {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 64px;
color: var(--gold);
opacity: 0.5;
line-height: 0.9;
font-variation-settings: "opsz" 144;
letter-spacing: -0.02em;
}
.ch3-statement-eyebrow {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 700;
}
.ch3-statement-content {
padding-top: clamp(80px, 12vh, 120px);
max-width: 880px;
}
.ch3-statement-text {
font-family: var(--serif);
font-style: italic;
font-size: clamp(40px, 4.6vw, 64px);
line-height: 1.18;
color: var(--cream);
font-weight: 400;
letter-spacing: -0.015em;
margin-bottom: 40px;
font-variation-settings: "opsz" 144;
}
.ch3-statement-text em {
color: var(--gold);
font-weight: 500;
font-style: italic;
}
/* Visitor-pivot rendering per Build Specs 4.4 */
.ch3-statement-you {
color: var(--terracotta-soft);
font-weight: 500;
font-style: italic;
}
.ch3-statement-elab {
font-family: var(--serif);
font-size: 22px;
line-height: 1.55;
color: var(--cream-dim);
font-weight: 400;
font-style: normal;
max-width: 56ch;
font-variation-settings: "opsz" 36;
}
/* Approval section — gold dashed tag in its own bounded section */
.ch3-approval-section {
max-width: 1400px;
margin: 0 auto;
padding: 120px 80px 0;
position: relative;
z-index: 2;
}
.ch3-approval-tag {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: rgba(212, 160, 23, 0.08);
border: 1px dashed rgba(212, 160, 23, 0.35);
border-radius: 4px;
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-soft);
font-weight: 600;
}
.ch3-approval-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
}
/* End note — closing bridge to Chapter IV */
.ch3-end {
max-width: 1400px;
margin: 0 auto;
padding: 80px 80px 100px;
position: relative;
z-index: 2;
}
.ch3-end-inner {
padding-top: 48px;
border-top: 1px solid var(--cream-faint);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.ch3-end-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
}
.ch3-end-next {
font-family: var(--serif);
font-style: italic;
font-size: 18px;
color: var(--cream-dim);
font-weight: 500;
font-variation-settings: "opsz" 24;
}
.ch3-end-next em {
color: var(--terracotta-soft);
}
/* Tablet — statements column narrows */
@media (max-width: 1100px) {
.ch3-statement {
gap: 32px;
grid-template-columns: 80px 1fr;
}
.ch3-statement-num {
font-size: 52px;
}
.ch3-statement-text {
font-size: clamp(36px, 4.4vw, 56px);
}
}
/* Mobile — statement marker collapses above content */
@media (max-width: 700px) {
.ch3-mark {
padding: 48px 24px 0;
}
.ch3-mark-row { gap: 14px; }
.ch3-mark-num { font-size: 17px; }
.ch3-mark-label { font-size: 9px; letter-spacing: 0.22em; }
.ch3-head {
padding: 48px 24px 0;
}
.ch3-head-eyebrow {
font-size: 9px;
letter-spacing: 0.22em;
margin-bottom: 20px;
}
.ch3-head-eyebrow::before { width: 20px; }
.ch3-headline {
font-size: 38px;
line-height: 0.98;
margin-bottom: 20px;
}
.ch3-lede { font-size: 17px; }
.ch3-statements {
padding: 0 24px;
}
.ch3-statement {
grid-template-columns: 1fr;
gap: 0;
padding-top: clamp(80px, 14vh, 120px);
}
.ch3-statement::before {
left: 0;
}
.ch3-statement-marker {
flex-direction: row;
align-items: baseline;
gap: 18px;
padding-top: 32px;
padding-bottom: 20px;
}
.ch3-statement-num {
font-size: 38px;
line-height: 1;
}
.ch3-statement-eyebrow {
font-size: 9px;
letter-spacing: 0.22em;
}
.ch3-statement-content {
padding-top: 0;
}
.ch3-statement-text {
font-size: 28px;
line-height: 1.22;
margin-bottom: 24px;
}
.ch3-statement-elab {
font-size: 17px;
line-height: 1.55;
}
.ch3-approval-section {
padding: 80px 24px 0;
}
.ch3-approval-tag {
font-size: 9px;
letter-spacing: 0.16em;
padding: 8px 12px;
}
.ch3-end {
padding: 56px 24px 64px;
}
.ch3-end-inner {
flex-direction: column;
gap: 14px;
align-items: flex-start;
padding-top: 36px;
}
.ch3-end-label { font-size: 9px; }
.ch3-end-next { font-size: 16px; }
}
@media (max-width: 380px) {
.ch3-headline { font-size: 34px; }
.ch3-statement-text { font-size: 26px; }
.ch3-statement-elab { font-size: 16px; }
}
/* ============================================================
4.5 — CH3 → CH4 BRIDGE — cinematic horizon transition
------------------------------------------------------------
A wide cinematic image straddles the seam between Ch3 (forest-mid)
and Ch4 (forest-deep). The bridge has a smooth vertical gradient
ground from forest-mid (top, continuous with Ch3) to forest-deep
(bottom, continuous with Ch4) — that color fade gives the seam
depth instead of a hard line.
THE HORIZON: the image's bottom edge is clipped to a soft convex
curve via inline SVG . Apex points up at the center
(~Y=71% of image), edges sit lower (~Y=85%) — a shallow brow shape
under which Ch4's dark ground rises. Only ONE edge carries the
gesture; the top of the image stays a clean horizontal mask fade.
The clip-path uses clipPathUnits="objectBoundingBox" so the curve
coordinates are 0–1 normalized to the image's box, keeping the
curve crisp and responsive at every viewport size — no JS, no
recalc. prefers-reduced-motion is satisfied implicitly (no
animation; the seam is structural).
Locked 2026-06-01 (v2.3, horizon refactor).
============================================================ */
.ch3-ch4-bridge {
position: relative;
width: 100%;
/* Height bumped (v2.3 polish 2026-06-01) so the bridge is taller than
the image's natural letterbox aspect — object-fit:cover then fills
vertically and crops the sides instead of top/bottom, preserving
people's heads in the image. Extra height extends downward into the
page flow, leaving Ch3 untouched. */
height: clamp(240px, 28vw, 560px);
overflow: hidden;
background: linear-gradient(
to bottom,
var(--forest-mid) 0%,
var(--forest-mid) 28%,
#1a2820 56%,
#0f1712 80%,
#0f1712 100%
);
}
/* Zero-size SVG defs container — holds the definition
without rendering anything visible. */
.ch3-ch4-bridge-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
.ch3-ch4-bridge-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 50%;
z-index: 1;
/* THE HORIZON CURVE — clips the image to a shape with a convex
curved bottom (apex up at center). Ch4's dark ground rises
beneath this curve. */
clip-path: url(#ch3ch4-horizon);
-webkit-clip-path: url(#ch3ch4-horizon);
/* Top fade preserves continuity with Ch3's forest-mid above; the
bottom fade tapers through the curve zone so the dark ground
bleeds in smoothly along the curve rather than hitting it as a
hard cut. The combination = "depth through the seam." */
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
black 15%,
black 65%,
transparent 95%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 15%,
black 65%,
transparent 95%
);
}
@media (max-width: 700px) {
.ch3-ch4-bridge {
height: clamp(200px, 42vw, 340px);
}
}
/* ============================================================
5. CHAPTER 4 — THE ROOM — .ch4-*
------------------------------------------------------------
============================================================ */
/* Section wrapper — Ch4 ground is forest-deep dark (v2.3 lock — the prior
cream "brightness inversion" was reversed because the Layout-C polaroid
cascade requires a dark ground for the warm photo tones to read).
Cream now lives in the polaroid mats + masthead "LOOKS" wash, not the
chapter ground. Cream chapter-mark band is killed — chapter mark sits
on dark, in cream/gold type, below the bridge image. */
.ch4-section {
position: relative;
overflow: hidden;
background: #0f1712;
color: var(--cream);
padding: 0;
}
.ch4-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 10;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Chapter mark — recomposed for dark ground (v2.3 lock 2026-06-01).
On dark, the numeral reverts to gold per the Ch4 v2.3 ground change;
divider + label adopt cream-muted/cream-faint for legibility. */
.ch4-mark {
max-width: 1400px;
margin: 0 auto;
padding: 80px 80px 0;
position: relative;
z-index: 2;
}
.ch4-mark-row {
display: flex;
align-items: baseline;
gap: 24px;
}
.ch4-mark-num {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
font-size: 22px;
color: var(--gold);
font-variation-settings: "opsz" 36;
}
.ch4-mark-divider {
flex: 1;
height: 1px;
background: var(--cream-faint);
align-self: center;
}
.ch4-mark-label {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--cream-muted);
font-weight: 600;
}
/* (The old .ch4-end "Next — Chapter V" block was retired with Ch5;
the finale band below carries the close. Removed 2026-06-01 v2.3.) */
/* Mobile — chapter mark tightens */
@media (max-width: 700px) {
.ch4-mark {
padding: 48px 24px 0;
}
.ch4-mark-row { gap: 14px; }
.ch4-mark-num { font-size: 17px; }
.ch4-mark-label { font-size: 9px; letter-spacing: 0.22em; }
}
/* ============================================================
5. CHAPTER 4 — THE ROOM (.ch4-*)
Scattered printed photos. Each photo sits on a separate cream
CARD (::before) at its OWN angle; the photo is tilted on top of
it independently, so the cream reveal is uneven — a mounted print,
not a styled border. Coordinates measured off the approved draft.
============================================================ */
.ch4-room{
position:relative;
padding:clamp(56px,7vw,120px) clamp(16px,3vw,56px) clamp(80px,9vw,140px);
background:radial-gradient(115% 110% at 50% 28%, #1c2b22 0%, #0f1712 70%);
overflow:hidden;
}
/* faded Truka tree watermark — sacred, behind everything */
.ch4-room-tree{
position:absolute; left:50%; top:48%;
transform:translate(-50%,-50%);
width:min(900px,72%); height:auto;
opacity:.06; z-index:0; pointer-events:none; user-select:none;
}
/* the stage — wide, fills the field; draft's exact aspect */
.ch4-room-stage{
position:relative;
width:min(1500px,92vw);
margin:0 auto;
aspect-ratio:5 / 3;
z-index:1;
}
/* ---- one mounted photo --------------------------------------------------
SURGICAL KNOBS per item below:
--x left --y top --w width(% of stage) --ar aspect
--card the CREAM CARD's angle (near straight)
--photo the PHOTO's angle (tilted) -> the gap between them = the look
--z stack --pos object-position (what shows) --mat border width
------------------------------------------------------------------------- */
.ch4-cascade-item{
position:absolute;
left:var(--x); top:var(--y); width:var(--w);
z-index:var(--z,2);
transform:rotate(var(--card,1deg)); /* the CARD angle */
}
/* the cream CARD — a real element behind the photo, not a border */
.ch4-cascade-item::before{
content:"";
position:absolute;
inset:calc(-1 * var(--mat,20px)); /* uniform mat width all around */
background:var(--cream);
border-radius:3px;
z-index:-1;
box-shadow:
0 2px 5px rgba(8,14,10,.35),
0 16px 32px -8px rgba(8,14,10,.55),
0 36px 72px -24px rgba(8,14,10,.42);
}
/* the PHOTO — tilted on the card, at its own angle */
.ch4-cascade-item img{
display:block; width:100%;
aspect-ratio:var(--ar,1.5); height:auto;
object-fit:cover; object-position:var(--pos,50% 45%);
border-radius:2px;
transform:rotate(calc(var(--photo,4deg) - var(--card,1deg)));
box-shadow:0 1px 5px rgba(8,14,10,.30); /* the print resting on the cream */
}
/* earthy hover — LIFT + WARM + DEEPER SHADOW. Never a glow. */
.ch4-cascade-item:hover,
.ch4-cascade-item:focus-within{
transform:rotate(var(--card,1deg)) translateY(-8px) scale(1.012);
z-index:8;
}
.ch4-cascade-item:hover::before,
.ch4-cascade-item:focus-within::before{
box-shadow:
0 4px 8px rgba(8,14,10,.40),
0 24px 46px -10px rgba(8,14,10,.60),
0 52px 98px -26px rgba(8,14,10,.50);
}
.ch4-cascade-item:hover img,
.ch4-cascade-item:focus-within img{ filter:brightness(1.04) saturate(1.04); }
/* ---- the five placed photos (positions measured off the draft) ----------
--card stays small (cards barely turn); --photo carries the tilt. */
/* A · leo-steve — flush top-left, OVER B */
.ch4-cascade-a{ --x:0%; --y:2%; --w:28%; --ar:1.30; --card:1deg; --photo:5deg; --pos:50% 45%; --z:6; }
/* B · glenn-david — upper-middle (nudge --x left to show more of David) */
.ch4-cascade-b{ --x:22%; --y:17%; --w:35%; --ar:1.53; --card:1.5deg; --photo:5deg; --pos:46% 46%; --z:3; }
/* C · andrew-ashley — center anchor, in front; headline above it */
.ch4-cascade-c{ --x:49%; --y:33%; --w:37%; --ar:1.85; --card:0.5deg; --photo:3deg; --pos:50% 40%; --z:5; }
/* D · leo-standing — lower-left */
.ch4-cascade-d{ --x:30%; --y:57%; --w:28%; --ar:1.38; --card:0.5deg; --photo:3deg; --pos:50% 45%; --z:3; }
/* E · lisa-smiling — flush bottom-right */
.ch4-cascade-e{ --x:72%; --y:58%; --w:28%; --ar:1.26; --card:1deg; --photo:5deg; --pos:50% 35%; --z:4; }
/* uniform mat width (the cream reveal), same on every photo */
.ch4-cascade-item{ --mat:clamp(16px,1.4vw,26px); }
/* HEADLINE — live text (Fraunces + Inter), tight magazine stack.
Masthead lifts CLEAR of the center photo's top edge so "LOOKS LIKE." has
premium magazine air above the photo rather than crashing into it.
"LOOKS" = cream highlight (NO border), slanted; "LIKE." terracotta.
2026-06-01 (v2.3 polish): bottom raised from 64.8% → 72% to give the
masthead clean negative space above Andrew & Ashley. */
.ch4-room-headline{
position:absolute;
left:73.5%; /* HORIZONTAL KNOB. Shifted right (v2.3 polish 2026-06-01) so "r" of "room" lands where the first "o" was, putting the masthead clear of the Glenn-David card. */
transform:translateX(-50%);
bottom:72%; /* LIFT KNOB. Raise to lift masthead higher off the photo; lower to dip headline into the photo edge. */
width:max-content;
max-width:46%;
z-index:7;
pointer-events:none;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
line-height:.8;
}
.ch4-rh-kicker{
font-family:var(--sans);
font-weight:600;
font-size:clamp(14px,1.15vw,18px); /* +28% (v2.3 polish 2026-06-01) */
letter-spacing:.36em;
text-transform:uppercase;
color:rgba(244,236,216,.82);
margin-bottom:.3em; /* tightened */
}
.ch4-rh-the{
font-family:var(--serif);
font-style:italic;
font-weight:500;
font-variation-settings:"opsz" 40;
font-size:clamp(38px,4.6vw,68px); /* +28% (v2.3 polish 2026-06-01) */
color:var(--gold-soft);
margin-bottom:-.55em; /* tucks "the" down onto "room" — further tightened (v2.3 polish 2026-06-01) so they nearly kiss without overlap */
}
.ch4-rh-room{
font-family:var(--serif);
font-weight:600;
font-variation-settings:"opsz" 144;
font-size:clamp(105px,14vw,192px); /* +28% (v2.3 polish 2026-06-01) */
letter-spacing:-.035em;
color:var(--gold);
}
.ch4-rh-looks{
display:flex;
align-items:center;
gap:.5em;
margin-top:-.05em; /* pulled up tight under "room" */
font-family:var(--sans);
font-weight:800;
font-size:clamp(19px,1.9vw,28px); /* +27% (v2.3 polish 2026-06-01) */
letter-spacing:.12em;
text-transform:uppercase;
}
/* "LOOKS" — cream highlight only, slanted edges. No border. */
.ch4-rh-box{
display:inline-block;
transform:skewX(-9deg); /* SLANT knob */
background:var(--cream);
padding:.26em .58em .2em;
}
.ch4-rh-txt{
display:inline-block;
transform:skewX(9deg); /* keeps LOOKS upright inside the slant */
color:var(--forest-deep);
}
.ch4-rh-like{ color:var(--terracotta); }
/* the quiet creed, under the cascade */
.ch4-room-creed{
position:relative; z-index:1;
max-width:760px; margin:clamp(36px,4.5vw,64px) auto 0;
text-align:center;
font-family:var(--serif); font-weight:400;
font-size:clamp(20px,2.4vw,30px); line-height:1.4;
color:var(--cream); font-variation-settings:"opsz" 40;
}
.ch4-room-creed em{ font-style:italic; color:var(--gold-soft); }
/* ---- mobile: cards straighten and stack ---- */
@media (max-width:760px){
.ch4-room-stage{ aspect-ratio:auto; display:flex; flex-direction:column; gap:22px; width:100%; }
.ch4-cascade-item{ position:static; width:100%; transform:none; --mat:14px; }
.ch4-cascade-item img{ aspect-ratio:1.4; transform:rotate(calc(var(--photo) - var(--card))); }
.ch4-room-headline{ position:static; transform:none; order:-2; width:82%; margin:0 auto 4px; display:block; }
.ch4-cascade-c{ order:-1; }
.ch4-room-tree{ opacity:.05; width:120%; }
}
/* respect reduced-motion — keep the depth, drop the movement */
@media (prefers-reduced-motion:reduce){
.ch4-cascade-item{ transition:none; }
.ch4-cascade-item:hover,
.ch4-cascade-item:focus-within{ transform:rotate(var(--card,1deg)); }
}
/* ============================================================
§5b — CH4 FINALE — the page close + handoff to footer
------------------------------------------------------------
ASYMMETRIC composition (rewritten v2.3 polish, 2026-06-01).
The Tree is the moment: solo-joy.png masked through the half-
Truka-tree silhouette BLEEDS from the right edge of the viewport.
Trunk sits at the seam between image and copy; branches reach
outward into the right of the viewport; the main fork lands over
her face so the laugh reads through the branch windows.
The copy column anchors LEFT at a tight max-width. Negative space
carries the middle. Eye lands on the headline, travels right into
Judy mid-laugh through the tree (the answer to "what is the room"),
descends back left-down to the form. The script ↔ room loop closes.
Ground continuous with .ch4-room above (forest-deep family) — the
room continues into the close, not a separate section.
NO BOX on the form — just a vertical gold→terracotta brand strip
carrying the active-Tier-1 signature from §1.D down to the iframe.
Locked 2026-06-01 (v2.3). Replaces the prior centered template
layout.
============================================================ */
.ch4-finale {
position: relative;
overflow: hidden;
background: linear-gradient(
to bottom,
#1a261d 0%,
#142019 42%,
#0f1712 100%
);
padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 8vw, 120px);
/* Min-height gives the absolute-positioned hero room to command. */
min-height: clamp(560px, 76vh, 880px);
z-index: 1;
}
/* Earthy warmth from below-right (under the tree) — never a glow. */
.ch4-finale::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
ellipse 70% 55% at 72% 92%,
rgba(212, 160, 23, 0.06) 0%,
transparent 70%
);
z-index: 0;
}
/* HERO IMAGE — half-tree knockout, full-bleed right.
Absolute-positioned so it extends past the copy column to the
viewport edge. solo-joy.png is masked through the Truka tree SVG:
the tree-shaped region shows the photo (Judy through branch
windows); outside the tree is transparent, revealing the forest-
deep ground beneath. */
.ch4-finale-hero {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: clamp(420px, 52vw, 880px);
z-index: 1;
pointer-events: none;
}
.ch4-finale-hero-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Position Judy's face high in the container so it aligns with
the tree's main fork (which lands in the upper portion of the
container with the mask-position values below). */
object-position: center 14%;
/* THE TREE MASK — the brand's logo gesture as photography.
- mask-size 200%: tree is 2x container width, so only HALF
fits horizontally (right half of tree, trunk on container's
LEFT edge = seam between image and copy column)
- mask-position right bottom: trunk-base flush with container
bottom; the fork sits naturally in the upper-middle of the
container at her face height; branches above the fork fill
the upper half of the container and reach over her hair
- mask-mode: alpha ignores the SVG's fill color and uses
shape opacity only */
-webkit-mask-image: url('/assets/truka-tree.svg');
mask-image: url('/assets/truka-tree.svg');
-webkit-mask-size: 200% auto;
mask-size: 200% auto;
-webkit-mask-position: center bottom;
mask-position: center bottom;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-mode: alpha;
mask-mode: alpha;
}
/* Constrained container holding the copy column. The hero image lives
OUTSIDE this container so it can bleed past the right edge. */
.ch4-finale-inner {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 64px);
}
/* Copy column — LEFT-anchored, tight max-width. Holds the headline +
form on a single vertical axis. */
.ch4-finale-copy {
position: relative;
z-index: 3;
max-width: 460px;
padding-top: clamp(16px, 3vw, 48px);
text-align: left;
}
/* Eyebrow — single rule, left-aligned (the double-rule centered
eyebrow was retired with the centered layout). */
.ch4-finale-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--terracotta-soft);
font-weight: 700;
margin-bottom: clamp(24px, 3vw, 36px);
}
.ch4-finale-eyebrow::before {
content: "";
width: 36px;
height: 1px;
background: var(--terracotta-soft);
}
/* The closing hero tag — StoryBrand pivot, large Fraunces, left-aligned.
"join" carries gold-soft italic emphasis. */
.ch4-finale-headline {
font-family: var(--serif);
font-size: clamp(36px, 4.6vw, 60px);
line-height: 1.04;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--cream);
margin: 0 0 clamp(20px, 3vw, 28px);
font-variation-settings: "opsz" 144;
}
.ch4-finale-headline em {
font-style: italic;
color: var(--gold-soft);
font-weight: 500;
}
/* Bridge copy — the explicit script ↔ room loop close. Left-aligned. */
.ch4-finale-bridge {
font-family: var(--serif);
font-style: italic;
font-size: clamp(17px, 1.8vw, 22px);
line-height: 1.5;
color: var(--cream-dim);
margin: 0 0 clamp(32px, 4vw, 48px);
font-variation-settings: "opsz" 36;
max-width: 440px;
}
/* Form wrap — NO BOX. No border, no background card, no shadow. Just a
vertical gold→terracotta brand strip on the left carrying the active-
Tier-1 signature down to the iframe. */
.ch4-finale-form {
position: relative;
padding: 4px 0 4px 22px;
margin-bottom: clamp(14px, 2vw, 20px);
}
.ch4-finale-form::before {
content: "";
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 3px;
background: linear-gradient(to bottom, var(--gold), var(--terracotta));
border-radius: 2px;
}
.ch4-finale-form iframe {
display: block;
background: transparent;
}
/* Fineprint — restrained, peer-to-peer, left-aligned. */
.ch4-finale-fineprint {
font-family: var(--sans);
font-style: italic;
font-size: 12px;
color: var(--cream-muted);
margin: 0 0 0 22px;
letter-spacing: 0.02em;
text-align: left;
}
/* Tablet + mobile reorchestration — stack image above copy, full width.
The half-tree mask scales proportionally because mask-size is %-based. */
@media (max-width: 1100px) {
.ch4-finale {
min-height: 0;
padding: 48px 0 60px;
}
.ch4-finale-hero {
position: relative;
width: 100%;
height: clamp(340px, 70vw, 500px);
margin-bottom: clamp(20px, 4vw, 36px);
}
.ch4-finale-hero-img {
/* On stacked layout, center the tree horizontally and pull the
fork closer to the visual center of the strip. */
-webkit-mask-size: 130% auto;
mask-size: 130% auto;
-webkit-mask-position: center 84%;
mask-position: center 84%;
object-position: center 22%;
}
.ch4-finale-copy {
max-width: 100%;
padding-top: 0;
}
.ch4-finale-bridge {
max-width: 100%;
}
}
@media (max-width: 700px) {
.ch4-finale-eyebrow {
font-size: 9px;
letter-spacing: 0.26em;
gap: 10px;
margin-bottom: 20px;
}
.ch4-finale-eyebrow::before { width: 22px; }
.ch4-finale-headline {
font-size: 30px;
line-height: 1.08;
margin-bottom: 18px;
}
.ch4-finale-bridge {
font-size: 16px;
margin-bottom: 28px;
}
}
@media (max-width: 380px) {
.ch4-finale-headline { font-size: 26px; }
}
/* prefers-reduced-motion satisfied implicitly — no animation, no transition. */
/* ============================================================
6. FOOTER — .footer-*
------------------------------------------------------------
Styles added when Zone 3 footer is designed.
============================================================ */
/* ============================================================
7. TESTIMONIAL MODAL — .testimonial-modal, .modal-*
------------------------------------------------------------
Full-screen overlay player launched from the Social Proof
carousel. Hidden by default via the [hidden] attribute. JS
removes [hidden], forces a reflow, then adds .is-visible so
the opacity transition picks up the change. On close, opacity
fades to 0, then [hidden] is reapplied after the transition.
============================================================ */
.testimonial-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 5vh 5vw;
background: var(--forest-deep);
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease;
isolation: isolate;
}
/* [hidden] still removes the element from the a11y tree and layout
even though we also set display: flex above. Order matters: hidden
wins because it appears later and is more specific via the
attribute selector. */
.testimonial-modal[hidden] {
display: none;
}
.testimonial-modal.is-visible {
opacity: 1;
pointer-events: auto;
}
/* Subtle paper-grain noise over the backdrop — matches the texture
on the Videos Band so the modal reads as part of the same world. */
.testimonial-modal::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(15, 25, 23, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--paper-pure);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 200ms ease, transform 200ms ease;
}
.modal-close svg {
width: 20px;
height: 20px;
}
.modal-close:hover {
background: rgba(15, 25, 23, 0.75);
transform: scale(1.05);
}
.modal-content {
position: relative;
z-index: 1;
max-width: min(1200px, 90vw);
width: 100%;
background: var(--ink);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.modal-video-frame {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
background: #000;
}
.modal-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
.modal-identity {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 24px;
background: var(--ink);
}
/* Tree logo recolored to paper-pure via filter (same baked-color SVG
as the carousel watermark — filter approach avoids touching the file). */
.modal-logo {
height: 22px;
width: auto;
flex-shrink: 0;
filter: brightness(0) invert(1);
}
.modal-name {
font-family: var(--serif);
font-size: 17px;
color: var(--paper-pure);
font-weight: 500;
font-variation-settings: "opsz" 36;
line-height: 1.2;
}
.modal-pin {
width: 14px;
height: 14px;
color: var(--cream-muted);
flex-shrink: 0;
margin-left: 4px;
}
.modal-markets {
font-family: var(--sans);
font-size: 13px;
color: var(--cream-muted);
font-style: italic;
line-height: 1.3;
}
@media (max-width: 768px) {
.testimonial-modal {
padding: 2vh 2vw;
}
.modal-close {
width: 38px;
height: 38px;
top: 12px;
right: 12px;
}
.modal-close svg {
width: 16px;
height: 16px;
}
.modal-content {
border-radius: 12px;
}
.modal-identity {
flex-wrap: wrap;
padding: 14px 18px;
gap: 8px;
}
.modal-name {
font-size: 16px;
}
.modal-markets {
font-size: 12px;
flex-basis: 100%;
margin-left: 0;
}
}
/* End of homepage.css */