/* ============================================================ How It Works — sticky tower / scrolling copy section Namespaced with "hiw-" prefix. Uses the site's own CSS custom properties so this respects the light/dark theme toggle. IMPORTANT: this page does NOT use CSS position:sticky for the image column. This site's global `overflow-x: hidden` on both and causes both to compute overflow-y:auto, which makes the nearest "scroll container" ancestor for sticky purposes — but the actual scroll position lives at the document level, not on body's own scrollTop. That mismatch silently breaks position:sticky (verified: the frame's screen position moved with scroll instead of staying pinned). The fix is a small scroll-driven position:fixed toggle in how-it-works-tower.js instead — see .hiw-visual-frame.is-pinned / .is-bottomed below, which that script applies. ============================================================ */ .hiw-layout { display: flex; align-items: flex-start; max-width: 1320px; margin: 0 auto; padding: 1rem 2rem 4rem; gap: 4vw; position: relative; /* containing block for the "bottomed" state */ } .hiw-visual-col { flex: 0 0 33%; max-width: 33%; height: calc(100vh - var(--nav-h, 74px) - 48px); display: flex; align-items: flex-start; justify-content: center; position: relative; /* placeholder box that always reserves layout space */ } .hiw-visual-frame { position: relative; width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card), 0 18px 40px -18px rgba(20, 40, 32, .3); border: 1px solid var(--border); background: var(--surface); } /* Applied by JS while the tower section is mid-scroll: pins the frame to the viewport at a fixed screen position. Left/width are set inline by JS (measured from the column), since position:fixed can't resolve percentage sizes against a flex ancestor. */ .hiw-visual-frame.is-pinned { position: fixed; top: calc(var(--nav-h, 74px) + 24px); height: calc(100vh - var(--nav-h, 74px) - 48px); } /* Applied by JS once the text column has scrolled past the tower entirely: settles the frame at the bottom of .hiw-layout instead of continuing to float over whatever content comes after the tower. */ .hiw-visual-frame.is-bottomed { position: absolute; bottom: 0; top: auto; height: calc(100vh - var(--nav-h, 74px) - 48px); } /* PAN MODE: the image fills the frame's width (so it renders much larger than the old shrink-to-fit-viewport-height mode) and is consequently taller than the frame. JS translates it vertically so the floor being discussed is always centered in view — the frame acts as a window gliding up and down the tower. */ .hiw-visual-frame img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; transition: transform .55s cubic-bezier(.22,.61,.36,1); will-change: transform; } .hiw-scrim { position: absolute; inset: 0; pointer-events: none; } .hiw-spotlight { position: absolute; left: 0; right: 0; box-shadow: 0 0 0 2000px rgba(10, 20, 16, .48); border-top: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transition: top .45s cubic-bezier(.22,.61,.36,1), height .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease; opacity: 0; } .hiw-spotlight.is-active { opacity: 1; } .hiw-floor-chip { position: absolute; left: 12px; top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill, 999px); padding: 6px 13px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-text, var(--teal)); box-shadow: var(--shadow-card); } .hiw-text-col { flex: 0 0 63%; max-width: 63%; padding-top: 8px; } .hiw-intro { padding-bottom: 4vh; margin-bottom: 4vh; border-bottom: 1px solid var(--border); } .hiw-intro .page-title { margin-top: 8px !important; } .hiw-floor-block { min-height: 66vh; display: flex; flex-direction: column; justify-content: center; padding: 5vh 0; border-bottom: 1px solid var(--border); } .hiw-floor-block:last-child { border-bottom: none; } .hiw-floor-block h2 { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin: 4px 0 14px; color: var(--text); } .hiw-floor-block p { font-size: 14.5px; line-height: 1.7; color: var(--text-dim); max-width: 54ch; margin: 0 0 12px; } .hiw-floor-block ul { margin: 10px 0 0; padding: 0; list-style: none; max-width: 54ch; } .hiw-floor-block li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 13.5px; line-height: 1.65; color: var(--text-dim); } .hiw-floor-block li strong { color: var(--text); } .hiw-floor-block li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-light); border: 1.5px solid var(--teal); } .hiw-floor-block.is-current h2 { color: var(--teal-text, var(--teal)); } /* ---------- Mobile: stack, no pin, no spotlight ---------- */ @media (max-width: 860px) { .hiw-layout { flex-direction: column; padding: 0.5rem 1rem 2.5rem; gap: 0; } .hiw-visual-col { height: auto; max-width: 100%; flex: none; padding: 12px 0 24px; } .hiw-visual-frame { height: auto; width: 100%; aspect-ratio: 560 / 1888; } .hiw-visual-frame img { position: static; height: auto; transform: none !important; } .hiw-visual-frame.is-pinned, .hiw-visual-frame.is-bottomed { position: static !important; } .hiw-spotlight { display: none; } .hiw-floor-chip { display: none; } .hiw-text-col { max-width: 100%; flex: none; padding-top: 0; } .hiw-floor-block { min-height: 0; padding: 28px 0; } }