/* Plot single — intro copy (Figma frame 36:225, group 67:2860 "Group 143"; the earlier duplicate 36:958 "Group 131" at the same x/y was NOT used — 67:2860 is the live layer on top, both read identically anyway). Pixel reads: 67:2861 heading x160 y1251 w678 h150 Omnes, 70px/75px leading, mixed weights word-by-word ("A beautiful" Regular, "4 bedroom" SemiBold, "home with" Regular, "oak porch" Light Italic, "." Regular), fill #000. → --vl-text-display (70px, exact match); line-height forced to 1 (= font-size), NOT the node's 75px leading — sitewide big-heading rule (Liam, 2026-07-23), already applied identically to this same 70/75 read on dev-plots.css/.vl-dev-plots__heading and plot-titleband.css's price rule. 67:2862 body x1022 y1261 w750 h224 Omnes, **24px/28px leading** (get_design_context read `text-[24px]` / `leading-[28px]` verbatim), fill #000. Mixed: last paragraph SemiBold, one inline span underlined (a plain-text CTA phrase, no visible link chrome in the frame — left as a bare inline element; wp_kses_post preserves whatever tag HBP's editor actually emits). ⚠️ FLAG TO LIAM: the task brief (Step 3) named `--vl-text-body` (18px/22px) for this copy, but the node itself reads 24px/28px — an EXACT match for `--vl-text-card-title` (variables.css: "24 / 28px, node 2:98"), a token no other component consumes yet. Built to the node read, not the brief's guess — confirm at live review. Section paddings — band deltas, same method as dev-plots.css: anchor bar bottom (1080+82=1162) → intro top (1251) = 89px (padding-top) intro bottom (1251+234=1485) → next section bg top (Rectangle 44, 36:968, y=1585) = 100px (padding-bottom) Both values are IDENTICAL to dev-plots.css's own 89/100 read for the equivalent first-section slot on the development page — not a coincidence worth fighting; kept as separate literals here (component files stay independent per CLAUDE.md's "one file per component" rule) rather than sharing a variable. Columns: equal 750 / 750 + 100px gap of the 1600px container box (Liam ruling, 2026-07-27 live review — supersedes the frame's uneven 678/750: the Figma group 67:2860 was 1612px wide, a 12px overshoot past the container, so its raw widths were never authoritative). */ .vl-plot-intro { padding-block: 89px 100px; } .vl-plot-intro__cols { display: flex; align-items: flex-start; gap: 100px; /* 1600 − 750 − 750 (Liam, 2026-07-27) */ } .vl-plot-intro__heading { flex: 1 1 750px; /* equal columns (Liam, 2026-07-27) */ min-width: 0; margin: 0; color: var(--vl-black); /* node fill is literally #000000, not --vl-ink (same convention as dev-plots.css/dev-anchor.css) */ font-size: var(--vl-text-display); /* 70px, node-exact */ font-weight: var(--vl-weight-regular); line-height: 1; /* = font-size at every breakpoint (Liam, 2026-07-23: big headings line-height equals size) */ } /* Mixed-weight accents inside the client-authored heading (HBP TinyMCE can carry inline tags — vl_split_intro_html() keeps them, e.g. the "inline markup kept" harness case). Maps the frame's two accent treatments: "4 bedroom" SemiBold → /; "oak porch" Light Italic → /. Light Italic is --vl-weight-light per variables.css's own comment ("display-heading accents") — this heading is exactly that case, not a new convention. */ .vl-plot-intro__heading strong, .vl-plot-intro__heading b { font-weight: var(--vl-weight-semibold); } .vl-plot-intro__heading em, .vl-plot-intro__heading i { font-style: italic; font-weight: var(--vl-weight-light); } .vl-plot-intro__body { flex: 1 1 750px; min-width: 0; color: var(--vl-black); /* node fill #000000, same override as the heading */ font-size: var(--vl-text-card-title); /* 24px — see pixel-read flag above */ line-height: 1.167; /* node ratio 28/24, unitless so the mobile token size scales it — --vl-text-card-title steps 24→20px at ≤767px (variables.css:89); a fixed 28px would have read as a bloated 1.4 ratio at that size. Same convention as every other line-height in this codebase set against a token (card-development.css, dev-plots.css, dev-titleband.css, plot-titleband.css all use unitless node ratios for exactly this reason — review fix, 2026-07-27). */ } .vl-plot-intro__body p { /* Fixed px margin, not em/ratio: checked every paragraph-rhythm precedent in the codebase (dev-living.css's .vl-dev-living__body is the only other multi-paragraph body block) and grepped the whole css/ directory for any em-based margin — none exist anywhere; every margin sitewide, scaling token or not, is a literal px. 28px = one line's worth of space (dev-living's equivalent rhythm rule uses 22px, because that block's line-height is fixed 22px — --vl-text-body never scales; ours does, but the margin itself isn't a readability-critical value the way line-height is, so it stays the plain px this codebase always uses for margins). */ margin: 0 0 28px; } .vl-plot-intro__body p:last-child { margin-bottom: 0; } .vl-plot-intro__body strong, .vl-plot-intro__body b { font-weight: var(--vl-weight-semibold); /* node: final paragraph is SemiBold */ } /* Half-width-column display headings step to 52px through 1025–1280 (Liam sitewide ruling, 2026-07-31 — see feature-row.css; this heading is a client-authored sentence, so it wraps by design, but at 70px in a ~450px column it towered). */ @media (min-width: 1025px) and (max-width: 1280px) { .vl-plot-intro__heading { font-size: 52px; } } /* ── Tablet + mobile (≤1024) ── No Figma coverage below desktop (frame is desktop-only per CLAUDE.md) — stack heading above body. Heading→body gap 40px at BOTH tablet and mobile — Liam's live-review ruling 2026-07-28 (replaced the launch build's dev-living.css-mirrored 80/50 derivation). */ @media (max-width: 1024px) { .vl-plot-intro__cols { flex-direction: column; gap: 40px; } .vl-plot-intro__heading, .vl-plot-intro__body { flex-basis: auto; } } @media (max-width: 767px) { .vl-plot-intro { /* Top/bottom both 60px — same "uniform mobile pad" precedent as dev-plots.css's `.vl-dev-plots` mobile rule (60px/60px); this section fills the same first-in-zone role dev-plots.css does on the development page. */ padding-block: 60px 60px; } } /* ── Sticky-tab zone props: MOVED to css/plot-morehomes.css (Task 12). CLAUDE.md rule: --vl-sticky-wait = first section's top padding, --vl-sticky-stop = last section's bottom padding. This section (plot- intro) is still FIRST in the zone, so its 89px/60px top-padding value is duplicated as a literal over in plot-morehomes.css's own copy of this block (that file's comment explains why the whole block lives there now: Task 12's section is the new LAST in the zone, so it owns --vl-sticky- stop, and the two props are kept together in one selector rather than split across files). No zone-prop rule is declared in THIS file anymore — see plot-morehomes.css for the live values. FLAG TO LIAM (kept from the original note): the task brief said to mirror "the same way single-hbp_developments.php does it" — but that template never actually sets these props; the sticky tab is OFF on both Development and Plot singles (inc/sticky-contact.php's vl_show_sticky_contact() excludes both post types, replaced there by the anchor bar's own Contact-us pill), so vl_sticky_zone_open() only ever prints the plain `
` wrapper for these two templates — no rail, no tab, and the props currently have ZERO visible effect. Set anyway per the written convention (future-proofing if the tab is ever re-enabled here). */