/* ========================================================================== MyCabin — Homes overview Page Pack CSS (v1.1.0) Scoped entirely under .pp-homes (Page Pack Spec §5). Trimmed from the revised Claude Design export's shared styles.css: only the rules this page's own hero+filter, full-bleed model grid, FAQ and dark closing CTA sections actually use. 01 Tokens (scoped custom properties, not :root) 02 Base resets (scoped) 03 Section / layout helpers + WordPress Flow-margin protection 04 Buttons, tabs, links 05 Hero + category filter 06 Models grid — full-bleed photo cards 07 FAQ accordion 08 Dark closing CTA + scroll reveal 09 Desktop layer (min-width: 900px) 10 Reduced motion ========================================================================== */ /* ========================================================================== 01 TOKENS — scoped to .pp-homes, never :root, so nothing leaks to the rest of the WordPress site (Page Pack Spec §5, layer 2). Only the palette/ layout/motion values this page's own sections actually reference. ========================================================================== */ .pp-homes { --pp-ink: #27272C; --pp-bone: #FFFFFF; --pp-paper: var(--pp-bone); --pp-surface: #FBF6F3; --pp-accent: #917EBC; --pp-accent-soft: #CDCBFF; --pp-scrim: var(--pp-ink); --pp-ink-line: color-mix(in oklab, var(--pp-ink) 13%, var(--pp-bone)); --pp-ink-72: color-mix(in oklab, var(--pp-ink) 72%, transparent); /* 65%, not 56% — matches the source's own corrected alpha step (measured ~4.64:1 against --pp-surface, restoring WCAG AA after the site's 2026-08-12 rebrand lightened --ink slightly). Same value already used on the reference homepage and Milla 47 Page Packs. */ --pp-ink-56: color-mix(in oklab, var(--pp-ink) 65%, transparent); --pp-bone-60: color-mix(in oklab, var(--pp-bone) 60%, transparent); --pp-bone-line: color-mix(in oklab, var(--pp-bone) 22%, transparent); --pp-maxw: 1280px; --pp-gutter: clamp(18px, 4vw, 40px); /* Centers section content at --pp-maxw via padding rather than a nested "wrap" div — the category filter cancels this with an equal negative margin, then re-applies it as its own padding, so the pill row can still bleed to the viewport edge while its first pill starts at the same x-position as the "Homes" heading. Same mechanism already used for the reference homepage's rails (Page Pack Spec §6 / reference implementation §3), re-derived here from this page's own --rail-pad. */ --pp-section-pad: max(var(--pp-gutter), calc((100% - var(--pp-maxw)) / 2 + var(--pp-gutter))); /* Source's --hdr-h: the fixed Header Site Part's height (styles.css :root). Used only to reserve room for it above the Homes intro on desktop. */ --pp-hdr-h: clamp(58px, 7vw, 74px); --pp-r-pill: 999px; --pp-r-lg: 10px; --pp-ease: cubic-bezier(.22, 1, .36, 1); --pp-t-med: .25s; --pp-t-slow: .35s; } /* ========================================================================== 02 BASE RESETS (scoped) ========================================================================== */ .pp-homes h1, .pp-homes h2, .pp-homes h3, .pp-homes p, .pp-homes figure { margin: 0; } .pp-homes a { color: var(--pp-ink); text-decoration: none; } .pp-homes a:hover { color: var(--pp-accent); } .pp-homes img { max-width: 100%; display: block; } .pp-homes button { font: inherit; color: inherit; } /* ========================================================================== 03 SECTION / LAYOUT HELPERS ========================================================================== */ .pp-homes .pp-section { /* Vertical padding is a native block attribute (Space L / Section — Compact presets, or a bespoke clamp() where no preset is an adequate match — see manifest.json notes). Horizontal padding stays here: it's a computed centering formula, not a simple spacing value, and the category filter depends on this exact variable for its own negative-margin bleed math (§5). */ position: relative; padding-inline: var(--pp-section-pad); } /* The model grid is a plain core/group with no explicit `layout` attribute in content.html — left that way on purpose, so it stays a normal, fully flexible Gutenberg container. WordPress's default for a group with no layout override is "Flow" layout, which generates ` > * + *` { margin-block-start: } on every child except the first, from the active theme's own spacing.blockGap value — regardless of whether this Page Pack ever asked for a gap. That's correct for ordinary stacked content; it is not desired here, since the grid already owns its own child spacing (CSS Grid `gap`, §6) and an unrequested default margin would double up on top of it. Confirmed mechanism — see docs/HOMEPAGE-WORDPRESS-FLOW-MARGIN-FIX-HANDOFF.md and docs/CLAUDE-DESIGN-TO-GUTENBERG-MASTER-WORKFLOW.md §7.1. Scoped narrowly to just this component's own direct children, not a sitewide reset. !important is required because WordPress's own generated rule uses normal specificity (no :where()), so a plain override has no guaranteed way to win against it across every theme/version combination. */ .pp-homes .pp-model-grid > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* Each .pp-model__media is also a plain core/group (image + three absolutely positioned overlay groups). Its children are taken out of flow visually, but a WordPress-injected margin-block-start would still shift an absolutely positioned child away from its explicit inset — the same Flow-margin mechanism as above, neutralized one level down. */ .pp-homes .pp-model__media > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* ========================================================================== 04 BUTTONS, TABS, LINKS ========================================================================== */ .pp-homes .wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding-inline: 21px; border-radius: var(--pp-r-pill); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background var(--pp-t-med), color var(--pp-t-med), border-color var(--pp-t-med); } /* On a photo/dark background */ .pp-homes .pp-btn-light .wp-block-button__link { background: var(--pp-bone); color: var(--pp-ink); } .pp-homes .pp-btn-light .wp-block-button__link:hover { background: var(--pp-accent-soft); color: var(--pp-ink); } .pp-homes .pp-btn-ghost .wp-block-button__link { background: color-mix(in oklab, var(--pp-scrim) 30%, transparent); color: var(--pp-bone); border: 1px solid var(--pp-bone-line); } .pp-homes .pp-btn-ghost .wp-block-button__link:hover { background: color-mix(in oklab, var(--pp-bone) 14%, transparent); border-color: var(--pp-bone); color: var(--pp-bone); } .pp-homes .pp-btn--48 .wp-block-button__link { height: 38px; padding-inline: 19px; } /* Arrow-first text link, styled to look like plain text rather than a pill button — matches the source's own .link-arrow (no background, no border, no fixed height). */ .pp-homes .pp-link-arrow .wp-block-button__link { height: auto; padding: 0; background: transparent; border-radius: 0; color: var(--pp-ink); font-size: 16px; font-weight: 500; } .pp-homes .pp-link-arrow .wp-block-button__link:hover { background: transparent; color: var(--pp-accent); } /* Category filter tab pill — same control the source shares with its floor-plan/interior tabs elsewhere on the site: plain, ink when active. */ .pp-homes .pp-tab .wp-block-button__link { height: 30px; padding-inline: 14px; background: transparent; color: var(--pp-ink); font-size: 14px; border: 1px solid var(--pp-ink-line); } .pp-homes .pp-tab--active .wp-block-button__link, .pp-homes .pp-tab.pp-is-active .wp-block-button__link { background: var(--pp-ink); border-color: var(--pp-ink); color: var(--pp-bone); } .pp-homes .pp-tab--active .wp-block-button__link:hover, .pp-homes .pp-tab.pp-is-active .wp-block-button__link:hover { background: var(--pp-ink); color: var(--pp-bone); } /* ========================================================================== 05 HERO + CATEGORY FILTER ========================================================================== */ .pp-homes .pp-homes-hero { /* padding-bottom is the "Space XS" MyCabin preset, set as a native block attribute on this group in content.html (negligibly close to the source's own clamp(6px,1.5vw,14px) — only the minimum differs, by 2px). padding-top has no adequately close preset match and stays CSS-owned here — see manifest.json notes. */ padding-top: clamp(24px, 4vw, 52px); } .pp-homes .pp-homes-hero__title { font-size: clamp(40px, 8vw, 72px); line-height: 1.02; letter-spacing: -.03em; font-weight: 500; } .pp-homes .pp-homes-hero__sub { margin-top: 14px; max-width: 48ch; color: var(--pp-ink-72); font-weight: 300; line-height: 1.55; } .pp-homes .pp-home-filter { margin-top: clamp(24px, 3vw, 34px); flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; /* Bleeds to the viewport edge on mobile — cancels .pp-section's own centering padding, then re-applies it as this row's own padding, so the first pill still starts flush with the "Homes" heading above it. */ margin-inline: calc(-1 * var(--pp-section-pad)); padding: 0 var(--pp-section-pad) 2px; } .pp-homes .pp-home-filter::-webkit-scrollbar { display: none; } .pp-homes .pp-home-filter .wp-block-button { flex: 0 0 auto; margin: 0; } /* ========================================================================== 06 MODELS GRID — full-bleed photo cards The source's redesigned "homepage rail card" recipe (#rail-models in the source styles.css), reused here for a plain vertical/grid list instead of a horizontal rail: real photographic renders fill the whole card, name/size stay legible over a top scrim, price/specs stay legible over a bottom scrim, and the two actions rise in on hover (desktop) or stay always-on (mobile, no hover). Replaces the previous grey-panel scale-corrected render cards entirely — the new photos are real exterior shots with no transparent margin to correct for. ========================================================================== */ /* One card per row on a phone; the desktop layer (§9) caps it at three. */ .pp-homes .pp-model-grid { margin-top: clamp(18px, 2.4vw, 26px); display: grid; grid-template-columns: 1fr; gap: clamp(40px, 10vw, 48px) clamp(16px, 2vw, 22px); } .pp-homes .pp-model { display: flex; flex-direction: column; } /* .pp-model's own display:flex (an author rule) otherwise overrides the browser's default [hidden]{display:none} (a UA rule) once the category filter starts toggling the hidden attribute on individual cards — same fix the source applies to .btn[hidden] for the identical reason. */ .pp-homes .pp-model[hidden] { display: none; } .pp-homes .pp-model__media { position: relative; aspect-ratio: .58; background: var(--pp-surface); border-radius: var(--pp-r-lg); overflow: hidden; } .pp-homes .pp-model__render { position: absolute; inset: 0; margin: 0; } .pp-homes .pp-model__render img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transition: transform var(--pp-t-slow) var(--pp-ease); } .pp-homes .pp-model:hover .pp-model__render img { transform: scale(1.04); } /* Pure black at modest opacity reads more premium than tinting with the site's warm-black ink here — matches the source's own choice for this one component. Decorative only, so it is a CSS-generated layer rather than an empty markup element. */ .pp-homes .pp-model__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .46) 0%, transparent 28%), linear-gradient(0deg, rgba(0, 0, 0, .54) 0%, transparent 36%); } .pp-homes .pp-model__top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: clamp(14px, 2.2vw, 20px); text-align: center; } .pp-homes .pp-model__badge { display: inline-flex; padding: 4px 10px; border-radius: var(--pp-r-pill); background: rgba(0, 0, 0, .34); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--pp-paper); font-size: 11px; font-weight: 500; } .pp-homes .pp-model__title { margin: 10px 0 0; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--pp-paper); } .pp-homes .pp-model__title a { color: inherit; } /* Sits flush with the bottom at rest (mobile has no hover, so its actions are always on and this is where the text naturally lands); the desktop override below re-anchors it there only at rest, then lifts it clear of the actions once they rise in on hover. */ .pp-homes .pp-model__info { position: absolute; left: 0; right: 0; bottom: 132px; z-index: 2; padding: 0 clamp(14px, 2.2vw, 20px); } .pp-homes .pp-model__specs { font-size: 13px; color: var(--pp-bone-60); } .pp-homes .pp-model__price { margin-top: 4px; font-size: 19px; font-weight: 400; letter-spacing: -.018em; color: var(--pp-paper); } /* Stacked, not side-by-side — Configure runs almost the full card width, Explore sits centred underneath it, matching the source exactly. */ .pp-homes .pp-model__actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; flex-direction: column; align-items: stretch; gap: 10px; padding: 28px clamp(14px, 2.2vw, 20px) clamp(16px, 2.2vw, 20px); background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .72) 100%); } /* Micro Fix 01: source's `.model__actions .btn { width:100%; height:48px; font-size:15px }` targets the real BUTTON only (`.btn`), while Explore is a plain `.link-arrow` text link with no height of its own. This pack's single `.wp-block-button__link` selector matched both, and, being later in the file with the same specificity as `.pp-link-arrow .wp-block-button__link { height: auto }`, it forced Explore to 48px too -- inflating the bottom-anchored action stack (Configure pushed up toward the price, Explore left in an oversized box). Ownership is split instead of compensating with margins: width and font-size still apply to both (unchanged), the fixed 48px height belongs to the real button only, and Explore takes its natural height from `.pp-link-arrow`. Container padding/gap, the info block and hover offsets are not touched. */ .pp-homes .pp-model__actions .wp-block-button__link { width: 100%; font-size: 15px; } .pp-homes .pp-model__actions .wp-block-button:not(.pp-link-arrow) .wp-block-button__link { height: 48px; } .pp-homes .pp-model__actions .pp-link-arrow .wp-block-button__link { justify-content: center; color: var(--pp-paper); } .pp-homes .pp-model__actions .pp-link-arrow .wp-block-button__link:hover { color: var(--pp-accent-soft); } /* ========================================================================== 07 FAQ ACCORDION Native core/columns (matching the source's own two-column layout), with all three confirmed WordPress layout-injection protections applied — see docs/CLAUDE-DESIGN-TO-GUTENBERG-MASTER-WORKFLOW.md §7.1–§7.2 and the identical fix already staging-verified on the Milla 47 Page Pack. FAQ copy and behaviour are unchanged from Page Pack v1.0.0 — the revised export only changed the model cards and the closing CTA. ========================================================================== */ .pp-homes .pp-faq__heading { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; letter-spacing: -.022em; font-weight: 500; max-width: 18ch; } /* `core/columns` always uses "flex" layout (unlike core/group/core/column, which default to Flow unless customized) — its WordPress-generated blockGap is a literal `gap` shorthand on the container itself, not a margin on its children. This page's own column-gap value is set below; without an explicit row-gap alongside it, the row-gap component of that shorthand silently keeps whatever the active theme's own blockGap default supplies — invisible on desktop (a single flex row has no row-gap to display) but fully visible the moment the two columns stack on mobile, landing exactly at the column seam next to the two adjacent hairline borders below. */ .pp-homes .pp-faq-cols { margin-top: clamp(28px, 4vw, 52px); column-gap: clamp(28px, 5vw, 64px); row-gap: 0; border-bottom: 1px solid var(--pp-ink-line); } /* Each `.wp-block-column` inside `.pp-faq-cols` defaults to Flow layout for its own children unless given an explicit `layout` — a *different*, already-confirmed instance of the same margin-block-start mechanism documented in §3, one level down. Neutralized on both the column itself (its own margin-block-start as a Flow child of the columns block) and on each column's own FAQ-item children, matching the Milla 47 Page Pack's own final, staging-verified fix exactly. */ .pp-homes .pp-faq-cols > .wp-block-column { margin-block-start: 0 !important; margin-block-end: 0 !important; } .pp-homes .pp-faq-cols > .wp-block-column > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* Each .pp-faq is a plain core/group (heading + paragraph, no explicit layout) — the same Flow-margin mechanism as §3, neutralized here too so the heading and its answer paragraph sit with zero gap between them; all of this row's actual spacing comes from the heading/paragraph's own padding below, not from a margin. */ .pp-homes .pp-faq > * { margin-block-start: 0 !important; margin-block-end: 0 !important; } .pp-homes .pp-faq { border-top: 1px solid var(--pp-ink-line); } .pp-homes .pp-faq__q { position: relative; margin: 0; padding: 20px 34px 20px 0; font-size: clamp(16.5px, 2vw, 19px); font-weight: 500; letter-spacing: -.015em; cursor: pointer; transition: color .2s; } .pp-homes .pp-faq__q:hover { color: var(--pp-accent); } .pp-homes .pp-faq__q::after { content: "+"; position: absolute; right: 0; top: 18px; font-size: 22px; font-weight: 300; line-height: 1; color: var(--pp-ink-56); } .pp-homes .pp-faq--open .pp-faq__q::after, .pp-homes .pp-faq.pp-is-open .pp-faq__q::after { content: "\2212"; } .pp-homes .pp-faq__a { overflow: hidden; max-height: 0; margin: 0; padding: 0; font-size: 16px; line-height: 1.6; color: var(--pp-ink-72); font-weight: 300; max-width: 52ch; transition: max-height var(--pp-t-slow) var(--pp-ease), padding-bottom var(--pp-t-slow) var(--pp-ease); } .pp-homes .pp-faq--open .pp-faq__a, .pp-homes .pp-faq.pp-is-open .pp-faq__a { max-height: 320px; padding-bottom: 22px; } /* ========================================================================== 08 DARK CLOSING CTA + SCROLL REVEAL Replaces v1.0.0's light-lavender "Not sure which one fits your plot?" section with the same dark ink-background band already staging-verified on the Ready Houses Page Pack (source's own shared .dark-cta-section component, also used on About/How It Works/Homes with Plot) — same layout, only this page's own copy/button destinations differ. Also picks up the source's own .io-fade scroll-triggered reveal (a genuinely custom mechanic — Page Pack Spec's standing test — via a single unobserve-once IntersectionObserver, matching Ready Houses/About/Homes with Plot/How It Works exactly). ========================================================================== */ .pp-homes .pp-dark-cta-section { background: var(--pp-ink); } .pp-homes .pp-dark-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; } .pp-homes .pp-dark-cta__copy { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; min-width: 0; } .pp-homes .pp-dark-cta__copy h2 { font-size: clamp(25px, 7vw, 42px); line-height: 1.16; letter-spacing: -.03em; font-weight: 500; color: var(--pp-paper); } .pp-homes .pp-dark-cta__copy p { font-size: clamp(13px, 2.8vw, 15px); line-height: 1.65; font-weight: 300; color: var(--pp-bone-60); } .pp-homes .pp-dark-cta__note { color: var(--pp-bone-60); } .pp-homes .pp-dark-cta__btns { display: flex; flex-direction: column; gap: 10px; width: 100%; } .pp-homes .pp-dark-cta__btns .wp-block-button { width: 100%; } .pp-homes .pp-dark-cta__btns .wp-block-button__link { width: 100%; } .pp-homes .pp-io-fade { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--pp-ease), transform .8s var(--pp-ease); } .pp-homes .pp-io-fade.pp-in-view { opacity: 1; transform: none; } /* ========================================================================== 09 DESKTOP LAYER — the source's single breakpoint (min-width: 900px) ========================================================================== */ @media (min-width: 900px) { /* At most three cards across, auto-fill (not auto-fit) so a two-card category keeps normal card width instead of stretching to fill the row — matching the source's own behaviour exactly. */ .pp-homes .pp-model-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(300px, calc((100% - 2 * clamp(16px, 2vw, 22px)) / 3))), 1fr)); } .pp-homes .pp-model__media { aspect-ratio: .68; } .pp-homes .pp-model__badge { padding: 5px 12px; font-size: 12px; } .pp-homes .pp-model__title { font-size: clamp(21px, 2.4vw, 26px); } .pp-homes .pp-model__actions { padding-top: 54px; } /* Hover-gated rise-in is a desktop-only affordance — there is no hover on touch, so under 900px the info text and actions stay exactly as above: text at rest, actions always on. */ .pp-homes .pp-model__info { bottom: 20px; transition: transform .4s var(--pp-ease); } .pp-homes .pp-model__actions { transform: translateY(100%); opacity: 0; transition: transform .4s var(--pp-ease), opacity .3s ease; } .pp-homes .pp-model:hover .pp-model__info, .pp-homes .pp-model:focus-within .pp-model__info { transform: translateY(-108px); } .pp-homes .pp-model:hover .pp-model__actions, .pp-homes .pp-model:focus-within .pp-model__actions { transform: translateY(0); opacity: 1; } .pp-homes .pp-dark-cta__btns { display: grid; grid-template-columns: 1fr 1fr; width: auto; } .pp-homes .pp-dark-cta__btns .wp-block-button, .pp-homes .pp-dark-cta__btns .wp-block-button__link { width: auto; } } /* ========================================================================== 10 REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .pp-homes .pp-faq__a { transition: none; } .pp-homes .wp-block-button .wp-block-button__link { transition: none; } .pp-homes .pp-model__render img { transition: none; } .pp-homes .pp-model__info, .pp-homes .pp-model__actions { transition: none; } .pp-homes .pp-io-fade { transition: none; } } /* ========================================================================== Micro Fix 02 -- desktop (>=900px, the desktop layer's own breakpoint) Two root causes, fixed separately; nothing inside the intro stack, the filter row or the cards is touched. 1) Intro starts too high. Source's `.homes-hero { padding: calc(var(--hdr-h) + clamp(24px, 4vw, 52px)) 0 clamp(6px, 1.5vw, 14px) }`: the top padding reserves room for the FIXED header (--hdr-h = clamp(58px, 7vw, 74px)) on top of the clamp. This pack's hero kept only the clamp (its own comment above notes padding-top was left CSS-owned, but the header term was never carried over; the earlier Homes Overview pack had it as `--pp-hdr-h`), so the whole intro stack -- heading, paragraph and filters together -- sat 58-74px too high. Restoring the source's top padding moves the stack as one unit; heading -> paragraph -> filters spacing is unchanged. (The source rule has no breakpoint, so mobile/tablet very likely share this; per this round's desktop-only scope they are left as they were.) 2) Filters -> first card row too far apart. Source's chain is hero padding- bottom + filter padding-bottom (2px) + `.homes-list` padding-top (clamp(28px, 4vw, 48px)) + `.model-grid` margin-top (clamp(18px, 2.4vw, 26px)). This pack already reproduces each of those exactly (the mycabin-xs / mycabin-l presets and the grid margin), so the excess is the one thing source doesn't have: `.pp-homes-list` is a top-level Flow child of `.pp-homes` (its group has no layout attribute) and so receives the theme's `:where(.is-layout-flow) > * + * { margin-block-start: }` on top of its own padding -- the same un-neutralized WordPress default already handled for the grid's and media's children above. Neutralized for this one section only (:where() has zero specificity, so no !important). ========================================================================== */ @media (min-width: 900px) { .pp-homes .pp-homes-hero { padding-top: calc(var(--pp-hdr-h) + clamp(24px, 4vw, 52px)); } .pp-homes > .pp-homes-list { margin-block-start: 0; } } /* ========================================================================== Micro Fix 03 -- desktop (>=900px). Two separate spacing owners around the beige "Questions before you choose." section; nothing in the model grid, the intro, the filters or the FAQ contents is touched. 1) Cards -> beige section: too much white. Source's white band under the last card row is just `.homes-list`'s padding-bottom (clamp(48px, 7vw, 96px)); the beige `section--p bg-surface` follows as a plain sibling. This pack's `.pp-homes-list` bottom padding is already that exact value (the mycabin-section-compact preset), so the excess is not padding: `#faq` is a top-level Flow child of `.pp-homes` (no layout attribute) and receives the theme's `:where(.is-layout-flow) > * + * { margin-block-start: }` ABOVE its background -- extra white the source doesn't have (the same un-neutralized default fixed for `.pp-homes-list` in Micro Fix 02). Neutralized for this one section (:where() has zero specificity). 2) Heading slightly too high inside the beige. Source: `.section--p { padding-block: var(--sec-y-p) }` = clamp(48px, 7vw, 104px). This pack uses the mycabin-section-compact preset, clamp(48px, 7vw, 96px): identical until the viewport passes ~1371px, then capped 8px short of source's 104px -- no preset carries 104px, so it is set here as a bespoke clamp. It has to be !important only because the value being replaced is the block's own inline `padding-top:var(--wp--preset--spacing--mycabin-section-compact)` style attribute, which no normal selector can outrank (kept out of content.html so the markup stays byte-identical). Only padding-TOP: the beige section's bottom padding, horizontal padding, background and every child are left as they are. ========================================================================== */ @media (min-width: 900px) { .pp-homes > #faq { margin-block-start: 0; padding-top: clamp(48px, 7vw, 104px) !important; } } /* ========================================================================== Micro Fix 04 -- FAQ ("Questions before you choose."), desktop (>=900px). Typography + vertical rhythm only; structure, copy, dividers, icons, background and every earlier micro fix are untouched. Source is the `#faq` block of homes.html:

clamp(28px,4.4vw,46px) / 1.06 / -.022em / 500 / 18ch
(inline value beats .faq-cols' clamp(28px,4vw,52px)) .faq--p-cols gap: 0 clamp(30px,5vw,72px) (its own desktop rule) .faq__q padding 20px 0; gap 16px next to the 22px sign; line-height normal .faq--p .faq__q font-size 16px; letter-spacing normal; weight 500 .faq--p .faq__a font-size 15.5px; line-height 1.6; weight 300; padding 0 0 22px Audit result, item by item (pack v1.1.3 vs source): - Heading: font-size / line-height / letter-spacing / weight / 18ch already equal the source (`.pp-faq__heading` above) -- nothing found to change, so nothing is changed (no size was invented from the screenshot). - Heading -> rows gap: the pack used the base `.faq-cols` clamp(28px,4vw,52px), but source overrides it inline with clamp(24px,3.5vw,36px) (16px less at 1440). It is a plain margin-top, so the theme's Flow gap is not involved (an author margin outranks the :where() default). - Questions: the pack used the generic `.faq__q` clamp(16.5px,2vw,19px) with -.015em tracking (19px on desktop); the FAQ on this page is `.faq--p`, whose `.faq--p .faq__q` is 16px with normal tracking. The pack's

also has no line-height of its own, so it took the theme's heading line-height instead of source's `normal` (button inherits body) -- the same defect and one-property remedy as the Milla 47 / Homepage FAQ questions. Text width: source has 16px gap + 22px sign = 38px reserved; the pack reserved 34px. - Answers: 16px in the pack vs `.faq--p .faq__a` 15.5px (line-height 1.6, weight 300, colour and 22px bottom padding already match). - Rows are natural-height (no fixed heights anywhere); the row/answer padding values (20px, 22px) already equal the source's, so the compaction comes entirely from the corrected type sizes/line-height, as intended. - Column gap: source's desktop rule is clamp(30px,5vw,72px); the pack had clamp(28px,5vw,64px) (8px less gap at 1440 = 4px wider text per column, i.e. text that can wrap LATER than source). Set to source's value. - Columns' bottom margin: source's grid has none; zeroed defensively so a WordPress default on the columns block can't add height under the last row. The minus/plus icon (22px, top 18px), the divider lines and the section padding are deliberately left exactly as they were. ========================================================================== */ @media (min-width: 900px) { .pp-homes .pp-faq-cols { margin-top: clamp(24px, 3.5vw, 36px); margin-bottom: 0; column-gap: clamp(30px, 5vw, 72px); } .pp-homes .pp-faq__q { padding-right: 38px; font-size: 16px; line-height: normal; letter-spacing: normal; } .pp-homes .pp-faq__a { font-size: 15.5px; } } /* ========================================================================== Micro Fix 05 -- final dark CTA ("Not sure which one fits your plot?"), desktop (>=900px). Text, buttons, columns, background and the FAQ above are untouched. Source (`homes.html` #plot + styles.css `.dark-cta*`): .dark-cta-section { padding: var(--sec-y-p) 0 } = clamp(48px,7vw,104px) .dark-cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px } .dark-cta__btns (desktop) grid 1fr 1fr, width:auto The FAQ is followed directly by this section -- no margin between them. Two owners, both structural: 1) White strip above the CTA + a section that is slightly short (and a text block that therefore sits slightly high). `#plot` is a top-level Flow child of `.pp-homes` and receives the theme's `:where(.is-layout-flow) > * + * { margin-block-start: }` ABOVE its dark background -- the white band (same un-neutralized default fixed for the list and the FAQ in Micro Fix 02/03). Separately, the block's inline padding is the mycabin-section- compact preset, clamp(48px,7vw,96px), where source is clamp(48px,7vw,104px): identical below ~1371px, up to 8px short per side above it. Both the content block's distance from the top edge and the section's total height come from that one value, so correcting it fixes "too short" and "text too high" together, with no per-element offset. It needs !important only because it replaces the block's own inline padding style (content.html stays byte-identical). 2) Buttons sitting low. Source centres the two columns against each other (`align-items:center`, which this pack already has). The button group is the second Flow child of `.pp-dark-cta` and so ALSO gets the block-gap margin-block-start; a flex item is centred by its MARGIN box, so that margin pushes the visible buttons down by half its size. Source has no such margin. Neutralized on that one element -- the alignment mechanism itself, the grid, widths, gap and styling are unchanged. Not touched on purpose: the left block's internal spacing (source's 12px flex gap between heading and paragraphs is already what the pack declares), all typography, the columns' widths/gap, mobile and tablet. ========================================================================== */ @media (min-width: 900px) { .pp-homes > #plot { margin-block-start: 0; padding-top: clamp(48px, 7vw, 104px) !important; padding-bottom: clamp(48px, 7vw, 104px) !important; } .pp-homes .pp-dark-cta > .pp-dark-cta__btns { margin-block-start: 0; } } /* ========================================================================== Micro Fix 06 -- "Register for demo day" hover (final dark CTA). Source: `.btn--light { background: var(--bone); color: var(--ink) }` and `.btn--light:hover { background: var(--accent-soft); color: var(--ink) }` (#CDCBFF), animated by `.btn`'s `transition: background/color/border-color var(--t-med)` (.25s). This pack already has both the hover rule (`.pp-btn-light .wp-block-button__link:hover`, above) and the .25s transition (`.wp-block-button .wp-block-button__link`, above) -- and they work for every other .pp-btn-light button (the six "Configure" buttons). Root cause: THIS button alone was authored with the editor's Color controls (background #FFFFFF / text #27272C), so its link carries the block attributes as an INLINE style (`style="color:#27272C;background-color: #FFFFFF"`, plus has-background/has-text-color). An inline declaration outranks any ordinary stylesheet rule, so the existing hover rule never applies and the button stays white on hover -- the transition has nothing to animate. (The Configure buttons have no inline colours, which is why they work.) Removing the colours from the block would mean editing content.html; instead the hover state alone is given `!important`, the same narrow pattern the Homepage pack uses for its `.pp-btn-*:hover` backgrounds over inline block colours. Default state (the inline white / dark text) is untouched. Scoped to the CTA's own button group, so no other button changes; "Book a private visit" is not matched. Wrapped in the hover-capable media query so a tap on touch never leaves a stuck lavender state. Colour stays the dark ink; focus styling is not touched. The source's `.btn:active { scale(.96) }` press effect is absent from every button in this pack (not specific to this one), so it is intentionally not added here. ========================================================================== */ @media (hover: hover) and (pointer: fine) { .pp-homes .pp-dark-cta__btns .pp-btn-light .wp-block-button__link:hover { background-color: var(--pp-accent-soft) !important; color: var(--pp-ink) !important; } } /* ========================================================================== Micro Fix 07 -- mobile/tablet (<900px): the two Micro Fix 02 corrections, for the range that block deliberately skipped. The source rules have no breakpoint (`.homes-hero`, `.homes-list`, `.model-grid` apply at every width), so the same two causes apply here and the same two remedies are used; the intro's internal spacing, the filter row and the cards are untouched. 1) Intro stack starts too high. Source `.homes-hero` top padding is `calc(var(--hdr-h) + clamp(24px, 4vw, 52px))`. At phone widths that is 58px (--hdr-h, room for the fixed header) + 24px = 82px; this pack has only the clamp (24px), i.e. 58px too high as one unit -- heading, paragraph and filters move together, so heading -> paragraph -> filters spacing is unchanged. (--pp-hdr-h was added in Micro Fix 02.) 2) Filters -> first card too far apart. Source chain = hero padding-bottom + filter 2px + `.homes-list` padding-top clamp(28px,4vw,48px) + `.model-grid` margin-top clamp(18px,2.4vw,26px); the pack already reproduces every term. The excess is the theme's Flow block-gap `margin-block-start` that `.pp-homes-list` receives as a top-level child of `.pp-homes` (no layout attribute), which source doesn't have -- neutralized for that one section, as in Micro Fix 02. ========================================================================== */ @media (max-width: 899px) { .pp-homes .pp-homes-hero { padding-top: calc(var(--pp-hdr-h) + clamp(24px, 4vw, 52px)); } .pp-homes > .pp-homes-list { margin-block-start: 0; } } /* ========================================================================== Micro Fix 08 -- mobile/tablet (<900px): model section -> FAQ transition and the FAQ's question/answer wrapping. The source rules involved have no breakpoint, so this is the range Micro Fix 03/04 (desktop-only) skipped; the accepted desktop rules are untouched. Nothing here changes the cards, the collapsed rows, the icon, the dividers, the accordion or the heading. 1) White gap below the last card. Source: the white band is just `.homes-list` padding-bottom clamp(48px,7vw,96px) (48px on phones), with the beige `section--p bg-surface` following as a plain sibling. The pack's `.pp-homes-list` bottom padding is that exact value already, so the excess is the theme's Flow block-gap `margin-block-start` on `#faq` (a top-level child of `.pp-homes`, no layout attribute) above its background -- the mechanism fixed at desktop in Micro Fix 03. Neutralized on `#faq`. 2) FAQ top padding: audited, NOT changed. Source `.section--p { padding-block: var(--sec-y-p) }` = clamp(48px,7vw,104px); the pack's inline `mycabin-section-compact` = clamp(48px,7vw,96px). Those are the same number at every width below ~1371px (48px on phones), so no source-proven difference exists to correct here; adding a smaller value would be inventing one. (The excess space seen above the heading on mobile is accounted for by item 1's margin, which sits above the beige edge.) 3) First question / answer wrap too early. Source `.faq--p .faq__q` is 16px with normal tracking and line-height normal (button inherits body); the pack's `.pp-faq__q` is clamp(16.5px,2vw,19px) with -.015em tracking and the theme's heading line-height (16.5px on phones), and reserves 34px for the icon where source reserves 38px (16px gap + 22px sign). The answer is 16px where `.faq--p .faq__a` is 15.5px. These are the values Micro Fix 04 applied at desktop; typography first, exactly as source -- text width is only touched where the source's own geometry differs (38px reserve). No fixed heights: rows size naturally, so the expanded row shortens by itself. ========================================================================== */ @media (max-width: 899px) { .pp-homes > #faq { margin-block-start: 0; } .pp-homes .pp-faq__q { padding-right: 38px; font-size: 16px; line-height: normal; letter-spacing: normal; } .pp-homes .pp-faq__a { font-size: 15.5px; } } /* ========================================================================== Micro Fix 09 -- mobile/tablet (<900px): end of the FAQ -> final dark CTA. These are the mobile counterparts of what Micro Fix 04/05 corrected at desktop; the source rules involved (`.faq-cols`, `.section--p`, `.dark-cta-section`, `.dark-cta`) have no breakpoint. The accepted desktop rules, the FAQ rows, the accordion, the CTA's own padding, the text block's internal spacing and the buttons are untouched. 1) Space after the last FAQ separator. Source: the last separator is the `.faq-cols` border-bottom, followed only by the section's padding-bottom (`.section--p`: clamp(48px,7vw,104px) = 48px on phones), which the pack already equals. The pack's separator belongs to a core/columns block, and WordPress can give that block a bottom margin of its own (the columns block's default) that the source grid doesn't have; that would sit between the separator and the section's padding. Zeroed (the same defensive line Micro Fix 04 added at desktop). 2) White strip before the CTA. `#plot` is a top-level Flow child of `.pp-homes` and receives the theme's `margin-block-start` above its dark background; source has none (the dark section follows the FAQ directly). Its own padding is not touched. 3) CTA headline wraps early ("Not sure which / one fits your plot?"). Source `.dark-cta h2` has no max-width and the column is the full content width; the pack's box, size (clamp(25px,7vw,42px)), line-height and tracking already equal source. The difference is the active theme's default `text-wrap: balance` on headings, which evens the two lines out and breaks earlier; source inherits `text-wrap: pretty` from body, which fills the first line ("Not sure which one fits / your plot?"). Restored on this one heading -- the same override fixed on the Homepage and Demo Day pages. 4) Button group too low. At phone widths the copy (flex 1 1 300px) and the 100%-wide button group wrap onto separate rows; source's only vertical space between them is the 28px row gap. The button group is the second Flow child of `.pp-dark-cta` and additionally gets the block-gap `margin-block-start`, which becomes extra space above the buttons here (at desktop the same margin pushed the row down -- Micro Fix 05). Neutralized on that one element. ========================================================================== */ @media (max-width: 899px) { .pp-homes .pp-faq-cols { margin-bottom: 0; } .pp-homes > #plot { margin-block-start: 0; } .pp-homes .pp-dark-cta__copy h2 { text-wrap: pretty; } .pp-homes .pp-dark-cta > .pp-dark-cta__btns { margin-block-start: 0; } } /* ========================================================================== Micro Fix 10 -- FAQ headline + question label colour (all widths). Source: neither `.h2.h2--p` nor `.faq__q` declares a colour. The headline inherits `body { color: var(--ink) }`; `.faq__q` is a