/* home.css — THE HOMEPAGE ONLY (site/index.html), DISPATCH-2026-10-02d "stunning pass".
*
* ⭐ WHY A SEPARATE FILE AND NOT site/styles.css: styles.css is loaded by every marketing page and each page
* versions it (`styles.css?v=`), so a homepage rebuild in it would be a cache-bust on twenty pages and a
* regression surface on all of them. This file is loaded by index.html alone. Everything here is scoped under
* `.home2` (the homepage ), so even a later page that loads it by mistake is untouched.
*
* ⚖️ THE VISUAL SOURCE OF TRUTH is wiki/design/adperch-homepage-2026-10-02.html. Layout, sizes and colours are
* ported from it; the motion rules below are its animation rules, scoped, with every keyframe renamed `hp-*` so a
* future `@keyframes pulse` in styles.css cannot silently take one over.
* ⛔ KEYFRAMES ARE REFERENCED FROM CLASS RULES, NEVER FROM AN INLINE `style="animation:…"` — the dispatch's own
* implementation note: inline references failed to run in the mockup. Inline styles in the markup carry only a
* per-element `animation-delay` or `offset-path`.
*
* ⚠ THE HOOKS THE SCRIPTS NEED KEEP THEIR OLD NAMES — `.hero-scene`, `.hero-scene-inner`, `.town-drop`,
* `.hero-drop-cap`, `#scene-replay`, `#iso-scene`, `[data-role]`, `.btn-role-action`. Their styles.css rules
* still apply and are overridden here where the new design differs (the dashed panel is gone, for one).
*/
.home2 {
--hp-ink: #2b2420;
--hp-cream: #f5f2ec;
--hp-card: #fffdf9;
--hp-line: #e2dbd1;
--hp-muted: #5f554d;
--hp-terra: #c65a36;
--hp-terra-ink: #a9472a;
--hp-dark: #1f1a17; /* ⚖️ both dark bands: the warm brown-black, never a cool grey */
--hp-gold: #c49a63;
--hp-sage: #aec493;
--hp-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
background: var(--hp-cream);
color: var(--hp-ink);
}
.home2 main { font-family: Inter, system-ui, sans-serif; color: var(--hp-ink); overflow-x: clip; line-height: normal; }
.home2 main p { margin: 0; }
.home2 main h1, .home2 main h2, .home2 main h3 { margin: 0; }
.home2 main a { color: var(--hp-terra-ink); }
.home2 main a:hover { color: #7e3218; }
.home2 .hp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; position: relative; }
.home2 .hp-kick { font: 500 12px/1 var(--hp-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--hp-terra-ink); margin-bottom: 16px; }
.home2 .hp-dk .hp-kick { color: #e8906c; }
.home2 .hp-h2 { font: 600 clamp(36px, 4.4vw, 56px)/1.06 'Playfair Display', Georgia, serif; letter-spacing: -.01em; }
.home2 .hp-h2-xl { font: 600 clamp(40px, 5.6vw, 76px)/1.02 'Playfair Display', Georgia, serif; letter-spacing: -.015em; }
.home2 .hp-h2 em, .home2 .hp-h2-xl em, .home2 .hp-h1 em { font-style: italic; font-weight: 500; color: var(--hp-terra); }
.home2 .hp-section { padding: 104px 0; }
@media (max-width: 640px) { .home2 .hp-section { padding: 72px 0; } }
.home2 .lift { transition: transform .2s ease, box-shadow .2s ease; }
.home2 .lift:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px rgba(43, 36, 32, .55); }
/* ══ 1 · HEADER ═══════════════════════════════════════════════════════════════════════════════════════════
The live nav is kept as it is (Co-founders, the phone menu from nav-menu.js, the Sign up modal); only its
ground matches the cream page. */
.home2 nav.nav { background: var(--hp-cream); }
/* ══ 2 · HERO ═════════════════════════════════════════════════════════════════════════════════════════════ */
.home2 .hp-hero {
position: relative; overflow: hidden; padding: 64px 0 84px;
background-color: var(--hp-cream);
background-image: radial-gradient(900px 620px at 78% 52%, rgba(240, 164, 127, .28), rgba(240, 164, 127, 0) 70%),
radial-gradient(#e2dbd1 1.1px, transparent 1.2px);
background-size: auto, 22px 22px;
}
.home2 .hp-hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; z-index: 1; }
.home2 .hp-hero-copy { flex: 1 1 500px; min-width: 0; position: relative; z-index: 2; }
.home2 .hp-beta { display: flex; align-items: center; margin-bottom: 22px; }
.home2 .beta-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6c8c54; margin-right: 10px;
box-shadow: 0 0 0 0 rgba(108, 140, 84, .6); animation: hp-bdot 2s ease-out infinite; }
@keyframes hp-bdot { 70% { box-shadow: 0 0 0 8px rgba(108, 140, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(108, 140, 84, 0); } }
/* ⚖️ THE LIVE SIZING, NOT THE MOCKUP'S (Bret's Oct 1 ruling, restated in the dispatch): about 3.3rem, 17ch,
balanced, which is three lines at 1280 and 1440. The mockup's clamp(40px, 4.4vw, 62px) makes four. */
.home2 .hp-h1 { font: 600 2.1rem/1.1 'Playfair Display', Georgia, serif; letter-spacing: -.015em; max-width: 18ch; text-wrap: balance; color: var(--hp-ink); }
@media (min-width: 768px) { .home2 .hp-h1 { font-size: 3.3rem; max-width: 17ch; line-height: 1.06; } }
.home2 .hp-hero-sub { font-size: 22px; line-height: 1.5; color: var(--hp-muted); margin-top: 24px; max-width: 34ch; }
@media (max-width: 640px) { .home2 .hp-hero-sub { font-size: 19px; margin-top: 18px; } }
.home2 .hp-help { margin-top: 18px; font-size: 16px; color: #6a6058; }
.home2 .hp-help + .hp-help { margin-top: 8px; font-size: 15px; }
.home2 .hp-help a { font-weight: 600; }
/* ── The doors: ONE component, two sizes ────────────────────────────────────────────────────────────────
⚖️ The hero's 2×2 and the closer's wide row are the same markup with the same colours per role; only the
container class sizes them. ⚠ The buttons keep `data-role` / `data-opener` (main.js opens the modal from
them) and `.btn-role-action` exactly (scripts/check-door-copy.mjs reads the action through that class). */
.home2 .hp-doors { display: grid; gap: 12px; }
.home2 .door {
position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
padding: 12px 18px; border-radius: 12px; min-height: 0; box-sizing: border-box; margin: 0;
border: 2px solid transparent; text-align: left; font: inherit; cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
}
.home2 .door:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px rgba(43, 36, 32, .55); }
.home2 .door:active { transform: translateY(-1px); }
.home2 .door:focus-visible { outline: 3px solid var(--hp-terra); outline-offset: 3px; }
.home2 .door-fig { flex: none; width: 24px; display: inline-flex; justify-content: center; }
.home2 .door-fig svg { width: 100%; height: auto; display: block; }
.home2 .door-fig-wide { width: 30px; }
.home2 .door-body { display: block; min-width: 0; }
.home2 .door-word { display: block; margin-top: 6px; font: 600 23px/1.1 'Playfair Display', Georgia, serif; white-space: nowrap; }
.home2 .door .btn-role-action { display: block; margin-top: 2px; font: 500 14.5px/1.3 Inter, sans-serif; white-space: nowrap; color: inherit; }
.home2 .door-tag { position: absolute; top: 8px; right: 12px; font: 500 11.5px/1 Inter, sans-serif; opacity: .7; pointer-events: none; white-space: nowrap; }
.home2 .door-founder { background: var(--hp-gold); color: var(--hp-ink); }
.home2 .door-vc { background: #2e2421; border-color: #5a524c; color: var(--hp-cream); }
.home2 .door-vc .door-word, .home2 .door-vc .door-tag { color: var(--hp-sage); }
.home2 .door-vc .door-tag { opacity: .85; }
.home2 .door-community { background: var(--hp-sage); color: var(--hp-ink); }
.home2 .door-community .btn-role-action { color: #8a3f22; }
.home2 .door-cofounder { background: #f1e7dc; border-color: var(--hp-terra); color: var(--hp-ink); }
.home2 .door-cofounder .btn-role-action { color: #8a3f22; }
.home2 .hp-doors-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; max-width: 600px; }
@media (max-width: 520px) { .home2 .hp-doors-2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .home2 .hp-doors-2 .door { padding: 16px 20px; } }
/* the closer's row: wide and short, ~1340px across, ~88px tall */
.home2 .hp-doors-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 48px; text-align: left; position: relative; z-index: 1;
width: min(1340px, calc(100vw - 64px)); margin-left: 50%; transform: translateX(-50%);
}
.home2 .hp-doors-4 .door { padding: 14px 22px; gap: 16px; min-height: 88px; }
.home2 .hp-doors-4 .door-fig { width: 26px; }
.home2 .hp-doors-4 .door-fig-wide { width: 32px; }
.home2 .hp-doors-4 .door-word { font-size: 26px; }
.home2 .hp-doors-4 .btn-role-action { font-size: 15.5px; }
.home2 .hp-doors-4 .door-tag { top: 9px; right: 14px; font-size: 12.5px; }
@media (max-width: 1100px) { .home2 .hp-doors-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .home2 .hp-doors-4 { grid-template-columns: 1fr; width: calc(100vw - 32px); } }
/* ── The Pips (DISPATCH-2026-10-03d): Percy's helpers, flying the hero's top and bottom bands, behind everything.
One canvas filling the hero, drawn by /pips.js. ⭐ The canvas IS the hero's box and every lane sits a full pip
inside it, so nothing is cut at a corner (the old floaters were placed by percentage and drifted off the edge). */
.home2 .hp-pips { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
/* ⚖️ "They stay off the headline and copy column." Round 3 (Bret 2026-10-03): visible in the first screen at EVERY size,
phones included — /pips.js finds the free stretches (on a phone, the band above the eyebrow) and draws at most two. */
/* ── The town: frameless, larger, bleeding off the right edge on wide screens ────────────────────────── */
.home2 .hp-town { flex: 1 1 520px; min-width: 0; position: relative; }
/* ⛔ THE DASHED PANEL IS GONE (dispatch §2: "Remove the dashed panel border"). styles.css still draws it for the
class, so every panel property is reset here rather than renamed — `.hero-scene` is main.js's hook. */
.home2 .hero-scene { max-width: none; border: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.home2 .hero-scene.is-over, .home2 .hero-scene.is-hinted { border: 0; background: none; box-shadow: none; }
.home2 .hero-scene:focus-visible { outline: 2px solid var(--hp-terra); outline-offset: 6px; border-radius: 12px; }
.home2 .hp-townwrap { position: relative; width: 118%; margin-right: -18%; cursor: pointer; }
@media (max-width: 1000px) { .home2 .hp-townwrap { width: 100%; margin-right: 0; } }
.home2 .hp-stack { position: relative; }
.home2 .hp-stack #iso-scene { position: relative; z-index: 1; filter: drop-shadow(0 40px 50px rgba(43, 36, 32, .18)); }
.home2 .hp-pixels { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* ⭐ PIXEL STATE: the canvas paints the town BEHIND the SVG and the SVG shows only the drop edge, so the dotted
edge and the chip stay sharp above the pixels. `is-px` is set by home.js while the canvas is showing. */
.home2 .hp-stack.is-px #scene-cam > :not(.dropring) { opacity: 0; }
.home2 .hp-stack.is-px #iso-scene { filter: none; }
/* ⚠ the deck-read moment dims the town (styles.css `.hero-scene.is-reading #iso-scene`); the drop shadow above
outranks that selector, so the dim is restated here with the shadow kept */
.home2 .hero-scene.is-reading .hp-stack #iso-scene { filter: saturate(.35) brightness(.62) drop-shadow(0 40px 50px rgba(43, 36, 32, .18)); transition: filter .5s ease; }
.home2 .hero-scene.is-read .hp-stack #iso-scene { transition: filter .6s ease; }
.home2 .hp-town-foot .deck-reading { justify-content: center; }
/* the drop edge: a dotted terracotta outline on the ground edge, marching slowly */
.home2 .dropring { animation: hp-dring 3s linear infinite; transition: fill .2s; }
@keyframes hp-dring { to { stroke-dashoffset: -40; } }
.home2 .hp-townwrap:hover .dropring, .home2 .hero-scene.is-over .dropring { fill: rgba(198, 90, 54, .12); }
/* the chip floats over the fountain */
.home2 .town-drop {
top: 60%; padding: 12px 20px; gap: 9px; border-radius: 999px; background: var(--hp-card); color: #8a3f22;
font-size: 16px; font-weight: 700; box-shadow: 0 10px 30px rgba(43, 36, 32, .18), 0 0 0 4px rgba(198, 90, 54, .12);
animation: hp-chipf 3.4s ease-in-out infinite;
}
@keyframes hp-chipf { 50% { transform: translate(-50%, calc(-50% - 5px)); } }
.home2 .hp-town-foot { text-align: center; margin-top: -6px; position: relative; z-index: 2; }
.home2 .hp-town-foot .hero-drop-cap { margin: 0; font-size: 16px; color: var(--hp-muted); }
.home2 .hp-town-foot .hero-drop-free { background: #e3ead8; color: #55703f; border-radius: 999px; padding: 3px 9px; font-size: 13px; white-space: nowrap; }
.home2 .scene-watch { display: inline-block; margin: 16px auto 0; border: 1.5px solid var(--hp-terra); color: var(--hp-terra); border-radius: 10px;
padding: 11px 24px; font-weight: 600; background: rgba(255, 253, 249, .7); }
.home2 .scene-watch[hidden] { display: none; }
.home2 .scene-watch:hover { background: var(--hp-terra); color: #fff; }
/* ══ HERO FIT, ROUND 2 (Bret 2026-10-02): the hero FILLS the window, it does not merely fit inside it. Round 1
(799266e1) shrank everything to fit 1280×720 and on a MacBook Chrome window it ended ~120px short, with the next
section's band showing underneath. Now, from 900px wide up (phones and narrow tablets keep the layout above):
· min-height = the window minus the sticky header, so the next section starts exactly at the fold. 100vh first, then
100dvh, then 100svh — each line overrides the last only where the browser understands it.
· ⭐ THE HEADER HEIGHT IS A VARIABLE, NOT A NUMBER: --hp-nav-h defaults to the header's measured 62px and home.js
re-measures the real header on load and resize, so a header change cannot leave a gap or push the hero past the fold.
· capped at 1100px (Bret said ~1000; 1000 would show an 18px band at 1920×1080, whose fill is 1018) so a huge monitor gets a centred hero, not a stretched one.
· type, doors and the town scale with HEIGHT between the round-1 compact sizes (720 tall) and the large look
(1100+ tall); the two columns are centred vertically in whatever height there is. */
.home2 { --hp-nav-h: 62px; }
@media (min-width: 900px) {
.home2 .hp-hero {
--hp-fill: min(calc(100vh - var(--hp-nav-h)), 1100px);
--hp-fill: min(calc(100dvh - var(--hp-nav-h)), 1100px);
--hp-fill: min(calc(100svh - var(--hp-nav-h)), 1100px);
min-height: var(--hp-fill);
display: flex; flex-direction: column; justify-content: center;
padding: clamp(16px, 3vh, 40px) 0;
}
/* wider on big windows so a 72px headline keeps its three lines */
.home2 .hp-hero .hp-hero-grid { width: 100%; max-width: clamp(1200px, 82vw, 1440px); gap: clamp(32px, 3vw, 56px); align-items: center; }
.home2 .hp-hero-copy { flex: 1 1 420px; }
.home2 .hp-town { flex: 1 1 360px; }
.home2 .hp-beta { margin-bottom: clamp(10px, 2vh, 24px); }
.home2 .hp-h1 { font-size: clamp(44px, 6.2vh, 72px); }
.home2 .hp-hero-sub { font-size: clamp(19px, 2.2vh, 24px); margin-top: clamp(10px, 2vh, 24px); }
.home2 .hp-doors-2 { gap: clamp(10px, 1.3vh, 16px); margin-top: clamp(16px, 3.2vh, 40px); max-width: clamp(600px, 44vw, 680px); }
.home2 .hp-doors-2 .door { min-height: clamp(72px, 8.6vh, 96px); padding: 10px clamp(16px, 1.6vh, 22px); }
.home2 .hp-doors-2 .door-word { font-size: clamp(22px, 2.6vh, 28px); margin-top: 4px; }
.home2 .hp-doors-2 .btn-role-action { font-size: clamp(14px, 1.45vh, 16px); }
.home2 .hp-doors-2 .door-tag { font-size: clamp(11.5px, 1.15vh, 13px); }
.home2 .hp-hero .hp-help { margin-top: clamp(10px, 2vh, 24px); font-size: clamp(15.5px, 1.6vh, 17px); }
.home2 .hp-hero .hp-help + .hp-help { margin-top: 4px; font-size: clamp(15px, 1.5vh, 16px); }
/* ⭐ the town is sized by HEIGHT: the fill height less ~210px for the caption, the button and the padding, at the
SVG's 760:600 ratio — and never wider than its bleed width. The same width sets the caption's pull-up (the SVG's
ground ends ~11% of its width above its bottom edge), so the caption always lands 8px under the ground. */
.home2 .hp-town { --hp-town-w: min(118%, calc((var(--hp-fill) - 210px) * 760 / 600)); }
.home2 .hp-townwrap { width: var(--hp-town-w); margin-left: auto; margin-right: auto; }
.home2 .hp-town-foot { margin-top: calc(-0.11 * var(--hp-town-w) + 8px); }
.home2 .hp-town-foot .hero-drop-cap { font-size: clamp(15px, 1.6vh, 17px); }
.home2 .scene-watch { margin-top: 12px; padding: clamp(9px, 1.1vh, 12px) clamp(20px, 2vh, 26px); }
}
@media (min-width: 900px) and (max-width: 1000px) {
/* the old ≤1000 rule un-bleeds the town for a stacked layout; at 900–1000 the columns are now side by side */
.home2 .hp-townwrap { width: min(100%, var(--hp-town-w)); }
}
@media (min-width: 900px) and (max-width: 1099px) {
/* narrow side-by-side: the doors get the width (the town is height-capped anyway), and the 2×2 cards drop their title
below the corner tag so "Co-founder" and "Free to start" cannot collide */
.home2 .hp-hero-copy { flex: 1 1 470px; }
.home2 .hp-town { flex: 1 1 300px; }
.home2 .hp-doors-2 .door { padding-top: 22px; gap: 12px; }
.home2 .hp-doors-2 .door-word { font-size: 21px; margin-top: 0; }
}
/* the deck-read result replaces the town in place; give it the column's room */
.home2 .hp-town .deck-card { margin: 0 auto; max-width: 520px; }
/* ══ 3 · WARM PATHS, NOT COLD LISTS ═════════════════════════════════════════════════════════════════════ */
.home2 .hp-why { background: linear-gradient(90deg, #e3e6e8 0%, #ebe5dc 48%, #f4dccd 100%); overflow: hidden; }
.home2 .hp-why .hp-cold { color: #7d858d; }
.home2 .hp-why-card { margin-top: 44px; background: rgba(255, 253, 249, .55); border: 1px solid rgba(43, 36, 32, .08); border-radius: 28px;
padding: 18px 10px; box-shadow: 0 40px 80px -50px rgba(43, 36, 32, .45); backdrop-filter: blur(4px); }
.home2 .hp-why-card svg { display: block; width: 100%; height: auto; }
/* ⚖️ ON A PHONE THE WIDE SCENE STACKS, COLD OVER WARM (Bret 2026-10-01, the ruling the old diagram carried).
At 390px the 1200-wide drawing shrinks its labels to ~4px. The two phone views are