/* ============================================================================= /demo-v2 — "Every Pin Tells A Story" redesign (Trello UTxTcHhS) A NEW, SEPARATE page. Ported from the approved static concept (documents/vtw26-demo-page-concept-FINAL.html — 7 rounds of iteration, copy/layout locked with Ed) with its inline hardcoded-hex tokens translated 1:1 to this package's real design tokens (design-tokens.css), so this file carries ZERO hardcoded hex — same Task 4 rule the other four pages hold to — except the two `#fff` exceptions vtw26.css's own header comment already carries (white-text-on-dark-chip, same convention, not a new one). Scoped under `.demo-v2` (set on ) rather than edited into vtw26.css, so this experimental page cannot regress /demo, /audit, or page 1 — this file is purely ADDITIVE. vtw26.css is loaded first for shared primitives (.shell, .eyebrow, .lede, .btn, .gate/.field-*, header/badge, focus rings) and is NOT modified by this build. ── THE ONE MOCKUP COLOUR THAT DID NOT SURVIVE TRANSLATION ───────────────── The mockup's before-callout stat number used #FF8A6B — a one-off hex with no equivalent in design-tokens.css (not the same value as any existing token; --aits-orange is FILL ONLY, "never text" per that file's own rule, and this page has no licence to make a first exception to it here). Rather than invent a new token for one decorative highlight, the stat number renders in the same white already used for the rest of that overlay's text — a real pairing already verified elsewhere on this page (white on --ink survives the badge/header work at 17.06:1 AAA). ========================================================================== */ .demo-v2 .shell{max-width:900px} .demo-v2 main{padding-top:8px} /* ═══════════════════════════════════════════════════════════════════════════ VERTICAL RHYTHM — every section-level padding rule on this page, together. (Trello UTxTcHhS — the spacing fix, then its own follow-up.) ⚠️ WHY ONE BLOCK, NOT SCATTERED PER-SECTION RULES. Round 1 fixed the BASE `.demo-v2 section` rule's specificity (it was losing to two vtw26.css desktop rules — see the postmortem below) by adding two enumerated overrides. Round 2 caught the bug THAT FIX INTRODUCED: those two new overrides are now the highest-specificity `section`-level rules in the cascade, which means the PER-SECTION tightenings below (`.s-hook`, `.s-pivot`, `.s-explain`, `.s-gate` — each originally a single low- specificity class selector) were themselves losing to the round-1 fix, silently. Grouping every padding rule here, using the IDENTICAL enumerated pattern at every tier, is what stops a third round of this — the pattern is documented ONCE and applied consistently instead of re-derived ad hoc at each call site. ── THE PATTERN, DERIVED ONCE ──────────────────────────────────────────── For ANY target selector `X` (`section`, `.s-hook`, …), three real states exist and each needs its OWN winning rule: A. normal browsing, no review-toggle class, any viewport → `body.demo-v2:not(.bp-mobile):not(.bp-desktop) X` B. reviewer has toggled body.bp-desktop → `body.demo-v2.bp-desktop X` C. reviewer has toggled body.bp-mobile (or the review classes are wholly absent from Chromium's cascade, e.g. a plain SSR render) → `.demo-v2 X` (the low-specificity fallback; only state where a bare `.demo-v2` prefix is enough, because vtw26.css has no `body.bp-mobile section`-level rule to out-rank) Each tier's specificity is built by prepending the SAME prefix vtw26.css's own competing rule uses (`body.bp-desktop` / `body:not(.bp-mobile):not( .bp-desktop)`), which is what makes it strictly exceed that rule rather than merely tie it — no `!important`, no reliance on source order. ── THE ROUND-1 POSTMORTEM (kept for the next person touching this) ────── `.demo-v2 section{padding:44px 0}` alone was (0,1,1). Two vtw26.css rules also target `section` at desktop width and both beat it in real browsing: body.bp-desktop section → (0,1,2) body:not(.bp-mobile):not(.bp-desktop) section → (0,2,2) — the one a REAL visitor hits: :not(.bp-mobile) and :not(.bp-desktop) are each class- level selectors (their specificity is their ARGUMENT's), so this reads as body + 2 classes + section, not body + section. Measured live before that fix: 44px at 375px (mobile — the unprefixed base `section{padding:var(--vtw-section-y-mobile) 0}` is only (0,0,1)), but 112px at desktop. Fixed by enumerating states A/B above for `section` itself. Round 2 (this comment) extends the SAME reasoning one level deeper, to every section's own tightened value — `.s-hook`, `.s-pivot` etc. are now ALSO enumerated, each beating the section-level rules from round 1 the same way round 1 beat vtw26.css's. ── VALUES: NOTICEABLY TIGHTER, PER ED, NOT JUST "CORRECTLY 44PX" ──────── Base default cut 44px → 28px. Two adjacent sections (.s-explain → .s-gate) go to 0 on their touching edges — the lived-experience explainer flows straight into the opt-in card with no gap of its own (the CARD itself still has its own padding, so this isn't a collision, just no extra section-level air between the flow-arrow and the card). ═══════════════════════════════════════════════════════════════════════ */ .demo-v2 section{padding:28px 0} body.demo-v2.bp-desktop section, body.demo-v2:not(.bp-mobile):not(.bp-desktop) section{padding:28px 0} .demo-v2 .s-hook{padding-top:0} body.demo-v2.bp-desktop .s-hook, body.demo-v2:not(.bp-mobile):not(.bp-desktop) .s-hook{padding-top:0} .demo-v2 .s-pivot{padding:12px 0 4px} body.demo-v2.bp-desktop .s-pivot, body.demo-v2:not(.bp-mobile):not(.bp-desktop) .s-pivot{padding:12px 0 4px} .demo-v2 .s-explain{padding-bottom:0} body.demo-v2.bp-desktop .s-explain, body.demo-v2:not(.bp-mobile):not(.bp-desktop) .s-explain{padding-bottom:0} .demo-v2 .s-gate{padding-top:0} body.demo-v2.bp-desktop .s-gate, body.demo-v2:not(.bp-mobile):not(.bp-desktop) .s-gate{padding-top:0} /* ── shared-primitive overrides for this page's centred editorial voice ──── */ .demo-v2 .eyebrow{justify-content:center;color:var(--action)} .demo-v2 .eyebrow::before{display:none} .demo-v2 .lede{margin-left:auto;margin-right:auto;text-align:center} /* ── 1. Every Pin Tells A Story ───────────────────────────────────────────── */ .s-hook{text-align:center} .hook{ font-family:var(--font-display);font-weight:600; font-size:clamp(2rem,5.5vw,3.4rem);line-height:1.08;margin:0 0 18px;color:var(--ink); letter-spacing:-.01em; } .map-frame{ margin:34px auto 6px;max-width:820px;border-radius:16px;overflow:hidden; box-shadow:0 20px 50px -20px rgba(26,26,46,.35);border:1px solid var(--hairline); background:#fff; } .browser-chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--aits-sand);border-bottom:1px solid var(--hairline)} .browser-chrome .dot{width:9px;height:9px;border-radius:50%;background:var(--hairline)} .browser-chrome .url{ margin-left:10px;background:#fff;border-radius:6px;padding:4px 12px;font-size:11px; color:var(--muted);font-family:var(--font-structural);flex:1; } /* the REAL embed — real iframe of https://reeltravelstories.com/, not a screenshot (Trello UTxTcHhS item 1). 4:3-ish window onto their page; their own header/toggle/map render inside, live. */ .rts-embed{display:block;width:100%;height:640px;border:0;background:var(--aits-sand)} .live-tag{ position:relative;margin-top:-1px; background:var(--action);color:#fff;text-align:center;padding:9px; font-family:var(--font-structural);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; } .cap{text-align:center;font-size:13px;color:var(--muted);margin-top:12px;max-width:560px;margin-left:auto;margin-right:auto} /* ── 2. "Do yours?" pivot ─────────────────────────────────────────────────── */ .s-pivot{text-align:center} .pivot-line-v2{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:clamp(1.7rem,5vw,2.6rem);color:var(--action-hover);margin:0} /* ── 3. before / contrast block ───────────────────────────────────────────── */ .s-before{text-align:center} .before-sub{max-width:560px;margin:0 auto 30px;color:var(--body)} .before-frame{ max-width:760px;margin:0 auto;border-radius:16px;overflow:hidden;position:relative; border:1px solid var(--hairline);box-shadow:0 16px 40px -20px rgba(26,26,46,.3); } /* the REAL, genuinely-redacted image (Trello UTxTcHhS item 2) — pixels changed, not a CSS overlay. No redact-bar element on this page: there is nothing left to cover, the name is gone from the file itself. */ .before-frame img{display:block;width:100%;height:auto;filter:saturate(.35) brightness(.92)} .before-badge{ position:absolute;top:16px;left:16px;background:var(--host-accent);color:#fff; font-family:var(--font-structural);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:7px 13px;border-radius:100px;box-shadow:0 6px 14px -4px rgba(168,30,34,.5); } /* ⚠️ MOBILE COVERAGE BUG (Trello UTxTcHhS follow-up) — real phone screenshot from Ed. .before-frame's height is entirely content-driven (the img is `width:100%;height:auto`), and .before-callout is absolutely positioned with NO height constraint of its own — purely however tall its content (a stat line + a 2-3-line caption at narrow widths) happens to be. On a ~390px phone the image itself renders ~210px tall (2448:1468 source), and the callout's content was ~104px of that — ~50% coverage, hiding most of the map/pins it exists to contrast against. FIX, mobile-first (this file's own convention: base = narrow, overridden at the existing 768px "WIDE" breakpoint below — no bp-desktop/bp-mobile review-toggle duplication needed here, unlike the vertical-rhythm fix: there is no competing vtw26.css rule to out-rank, this is pure responsive sizing, which already tracks the real viewport the toggle classes can't change): · the caption clamps to ONE line (CSS line-clamp, not a second markup copy) instead of wrapping to 2-3 — "the stat alone may carry the point at that size" is honoured by truncating gracefully (ellipsis) rather than dropping the sentence outright · tighter padding and a smaller stat size at the narrow default · a hard `max-height:35%` + `overflow:hidden` safety net regardless of text length, so a future copy edit can't reopen this bug by growing the caption back past one line's worth of characters Restored to the original, more generous treatment at 768px+, where the rendered image is tall enough (~456px at the page's own 760px cap) that the original full callout was never actually a problem — confirmed coverage stayed a comfortable ~20-25% there both before and after. */ .before-callout{ position:absolute;bottom:0;left:0;right:0;background:rgba(26,26,46,.88);backdrop-filter:blur(2px); color:#fff;padding:12px 16px;text-align:left; max-height:35%;overflow:hidden; } .before-callout .stat{font-family:var(--font-display);font-size:clamp(1.05rem,4vw,1.6rem);font-weight:600;line-height:1.15} /* the stat number: plain white, not the mockup's one-off #FF8A6B — see the file header for why. ⚠️ FONT OVERRIDE (Trello UTxTcHhS follow-up) — checked on a real phone render: "0" is genuinely a "0" in the DOM and nothing is clipped (confirmed via computed padding + a live screenshot), but Playfair Display's zero glyph at display size is visually near-identical to a lowercase "o" — "0 stories told" reads as "o stories told", which undermines the one number this whole section exists to land. Same font this page already uses for other display numbers (the 01/02/03 step cards below) — not a broken font, just an ambiguous glyph FOR THIS ONE DIGIT at THIS size. Narrowest possible fix: only the numeral switches to the structural sans (Montserrat), which has an unambiguous "0" — "stories told" stays in the display serif, and the 01/02/03 cards elsewhere on the page are a different selector, untouched. */ .before-callout .stat b{color:#fff;font-family:var(--font-structural)} .before-callout .sub{ font-family:var(--font-structural);font-size:11px;letter-spacing:.04em;color:var(--aits-teal-pale);margin-top:2px; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis; } /* ── 4. "this could be yours" — standalone CTA, jumps to the opt-in ───────── */ .s-yours{text-align:center} .yours-btn{ display:inline-flex;align-items:center;gap:10px; background:var(--action);color:#fff;text-decoration:none; font-family:var(--font-structural);font-weight:700;font-size:clamp(15px,2.4vw,18px);letter-spacing:.01em; padding:18px 34px;border-radius:100px; box-shadow:0 16px 36px -14px rgba(0,112,137,.55); transition:box-shadow .18s ease,transform .18s ease,background-color .18s ease; } .yours-btn:hover{background:var(--action-hover);box-shadow:0 20px 42px -12px rgba(0,112,137,.65);transform:translateY(-2px)} /* ── 4b. lived-experience 3-step explainer — flows into the opt-in ───────── */ .s-explain{background:var(--band-neutral);text-align:center} .s-explain h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,4vw,2.1rem);margin:0 0 12px;color:var(--ink)} .s-explain .lede{max-width:600px;margin:0 auto 34px} .grid3{display:grid;grid-template-columns:1fr;gap:20px;max-width:820px;margin:0 auto;text-align:left} .xcard{background:#fff;border-radius:14px;padding:24px 22px;border:1px solid var(--hairline)} .xcard .num{font-family:var(--font-display);font-weight:600;font-size:1.6rem;color:var(--action);display:block;margin-bottom:6px} .xcard h3{font-family:var(--font-structural);font-size:15px;font-weight:700;margin:0 0 8px;color:var(--ink)} .xcard p{font-size:13.5px;color:var(--body);margin:0} .flow-line{ max-width:600px;margin:38px auto 0;font-family:var(--font-display);font-style:italic;font-weight:600; font-size:clamp(1.2rem,3vw,1.5rem);color:var(--action-hover); } .flow-arrow{margin-top:14px;font-size:22px;color:var(--action)} /* ── 5. centred opt-in card (Trello UTxTcHhS item 3 — the REAL form) ─────── */ .s-gate{background:var(--band-neutral)} .gate-shell{max-width:460px;margin:0 auto;padding:0 20px} .gate-card{background:#fff;border-radius:16px;padding:34px 30px;box-shadow:0 20px 50px -24px rgba(26,26,46,.25)} .gate-card h2{font-family:var(--font-display);font-weight:600;font-size:1.5rem;text-align:center;margin:0 0 8px;color:var(--ink)} .gate-card .sub{text-align:center;color:var(--muted);font-size:14px;margin:0 0 22px} /* .field-wrap/.flabel/.field/.fhint/.ferr/.banner/.vh/.btn/.btn-primary are ALL shared with the live /demo page (vtw26.css) — same markup contract, same classes, just re-homed inside this centred card instead of the left-aligned .gate. Nothing about the FORM'S OWN styling is redefined here; only the CARD WRAPPING IT is page-specific. */ .gate-card .ctarow{margin-top:6px} .gate-note{text-align:center;font-size:11px;color:var(--muted);margin-top:14px} /* ═══ WIDE ═══════════════════════════════════════════════════════════════ */ @media (min-width:768px){ .grid3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} /* .before-callout — restore the original, more generous treatment. The rendered image is tall enough here (~456px at this page's own 760px cap) that the full multi-line caption was never the mobile bug. */ .before-callout{padding:16px 20px;max-height:none;overflow:visible} .before-callout .stat{font-size:clamp(1.2rem,3vw,1.6rem);line-height:normal} .before-callout .sub{-webkit-line-clamp:unset;display:block;overflow:visible;text-overflow:clip} } body.bp-desktop .grid3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} body.bp-desktop .before-callout{padding:16px 20px;max-height:none;overflow:visible} body.bp-desktop .before-callout .stat{font-size:clamp(1.2rem,3vw,1.6rem);line-height:normal} body.bp-desktop .before-callout .sub{-webkit-line-clamp:unset;display:block;overflow:visible;text-overflow:clip}