/* ========================================================================== Floor plan single — composition only. Built against wireframes/wf-floor-plan.html. Every shared part comes from components.css (spec-strip, feat-row, plan-tabs, plan-drawing, plan-video, lead-form, chip, media-grid, home-card, sec-head). What lives here is only how THIS page arranges them. Three composition changes against the wireframe, all measured on it: 1. The viewer wasted 68% of its width — a portrait plan sheet in a 1494px landscape stage rendered the drawing at 479px. The plan is the product on this page, so the viewer takes a measure suited to a roughly square drawing and the drawing fills it. 2. "About" left 554px of dead space — body text capped at 64ch inside a 1088px column, with the feature list spreading full-width underneath and detaching from the paragraph it belongs to. The body column is now itself the measure, so text and features share one edge. 3. Exteriors were capped at 900px inside a 1560px container, leaving 660px empty. They use the real measure. ========================================================================== */ /* The page is one block child of #content.site-content, which GeneratePress makes a flex container. Stated explicitly rather than relying on a stretch default — a flex item that sizes to its content is how this page first rendered as six vertical columns. min-width:0 so the viewer and grids can shrink. */ .model { width: 100%; min-width: 0; } /* Every in-page target has to clear BOTH the fixed header and the sticky sub-nav parked under it, or a jump from the bar lands with the heading hidden behind them. Same rule the community single carries. */ .model [id] { scroll-margin-top: var(--hdc-anchor-top); } /* -------------------------------------------------------------------------- Hero Same construction as .community-hero, deliberately: a floor plan page is a marketing page for a product, not a tool, so it belongs to the photo-hero family (wireframes/STATUS.md §4 "page families"). Same --hdc-hero-h as a community: this page declaring its own shorter height made it read as the lesser of the two, which it is not. The three-layer scrim is kept in sync with .community-hero and the homepage hero: a TOP scrim so the transparent header's links stay legible over bright sky, a bottom lift for the title, and a left wash for the copy. -------------------------------------------------------------------------- */ .model-hero { position: relative; display: flex; align-items: flex-end; min-height: var(--hdc-hero-h); overflow: hidden; background: var(--hdc-surface-ink); } .model-hero__media { position: absolute; inset: 0; } .model-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .model-hero__media--empty { aspect-ratio: auto; } .model-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--hdc-surface-ink) 55%, transparent) 0%, transparent 22%), linear-gradient(to top, color-mix(in srgb, var(--hdc-surface-ink) 78%, transparent) 0%, transparent 58%), linear-gradient(to right, color-mix(in srgb, var(--hdc-surface-ink) 45%, transparent) 0%, transparent 52%); } .model-hero__inner { position: relative; z-index: 1; padding-block: var(--hdc-space-8); } /* Matched to .community-hero__eyebrow, not approximated: fs-300 rather than fs-200, and full-strength on-dark rather than on-dark-muted. Muted grey over a photograph loses the contrast the scrim was built to give it. */ .model-hero__eyebrow { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-eyebrow); text-transform: uppercase; color: var(--hdc-color-on-dark); margin: 0; } .model-hero h1 { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); font-size: var(--hdc-fs-850); line-height: var(--hdc-lh-tight); letter-spacing: -0.01em; color: var(--hdc-color-on-dark); margin: var(--hdc-space-3) 0 0; } /* -------------------------------------------------------------------------- Summary — price, then specs, then the prose Matched to .community-summary / .community-price / .community-specs rather than approximated, so the two pages state a price the same way. Replaced a full-width spec strip band between hero and viewer: that put six numbers ahead of the page's own sentence, and on a phone it was six stacked rows before anything readable. -------------------------------------------------------------------------- */ .model-summary { margin: var(--hdc-space-6) 0 var(--hdc-space-7); } .model-price { margin: 0; line-height: 1.2; font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); font-size: var(--hdc-fs-550); color: var(--hdc-color-heading); } .model-price b { font-weight: inherit; color: inherit; } .model-price.is-unset { color: var(--hdc-color-muted); } .model-summary .spec-list { margin-top: var(--hdc-space-5); font-size: var(--hdc-fs-500); gap: var(--hdc-space-3) var(--hdc-space-6); } .model-summary .spec-list .spec-ico { width: 19px; height: 19px; } /* Total-under-roof and stories — reference figures, deliberately quieter than the spec row so they cannot be mistaken for the A/C number. */ .model-meta { margin: var(--hdc-space-4) 0 0; font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-500); color: var(--hdc-color-muted); } /* -------------------------------------------------------------------------- Title + specs -------------------------------------------------------------------------- */ .model-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hdc-space-6) var(--hdc-space-7); flex-wrap: wrap; } .model-head__id { min-width: 0; } .model-eyebrow { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-eyebrow); text-transform: uppercase; color: var(--hdc-color-muted); margin: 0; } .model-title { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); font-size: var(--hdc-fs-850); line-height: var(--hdc-lh-tight); letter-spacing: -0.01em; color: var(--hdc-color-heading); margin: var(--hdc-space-2) 0 var(--hdc-space-3); } /* -------------------------------------------------------------------------- Floor plan — mirrored split, rail left Chosen from mockups/floorplan-viewer-options.html (C + D4 + T3). Two things drove it: 1. The tab strip came from the community page's plan explorer, which needs a switcher because it shows five plans. Here it only ever held two entries and it buried the film behind a click. Plan and tour are now separate sections. 2. Mirrored, because the About section directly above runs content-left / rail-right — repeating that stacked two identical layouts. The rail is 440px — the SAME width as the About section's form rail directly above it, so both rails run down one line rather than stepping in and out. It carries the tour poster as well as the floors and tools, and at 16:9 that still is now big enough to read as an invitation rather than a thumbnail. The drawing takes ~720px, against 479px in the wireframe. That is the trade this option makes: one block answers both "what is the layout" and "what does it feel like", and nothing sits behind a tab. The whole section sits on --hdc-surface-tint. The drawings are white-ground JPEGs, so the tint frames each one as its own panel without the section having to draw a border round it — the "one edge mechanism per surface" rule satisfied by contrast rather than by a line. -------------------------------------------------------------------------- */ .model-plan { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: var(--hdc-space-8); align-items: start; } .model-plan__rail { position: sticky; top: var(--hdc-sticky-top); } .model-plan__media { min-width: 0; } /* Matte: each drawing sits in an explicit framed panel that fills the column, so a tall townhome plan (a narrow ribbon under the height cap) reads as intentionally centerd in a frame instead of floating. The border is load-bearing — surface on tint is ~1.05:1, so contrast alone cannot draw the panel edge (BUILD-STATUS). */ .model-plan__media .plan-drawing { background: var(--hdc-surface); border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-md); padding: clamp(var(--hdc-space-4), 3vw, var(--hdc-space-7)); } .model-plan__media .plan-drawing img { border-radius: 0; } .model-plan__k { margin: 0 0 var(--hdc-space-2); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-muted); } .model-plan__k ~ .model-plan__k { margin-top: var(--hdc-space-6); } .model-floors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hdc-space-3); } /* No chip override here any more, deliberately. This used to pin --_bg: var(--hdc-surface) so resting chips read as controls against the tint — but the base .chip now sets exactly that, so the rule was redundant AND harmful: at (0,2,0) it tied with .chip.is-on and won on load order, forcing the ACTIVE floor back to white. Same shape of bug as the .siteplan .chip re-pin that used to live in theme.css. Chips paint from --_bg; leave them alone. */ /* Left-aligned, natural width, side by side. Full-width stacked buttons read as primary actions; these are utilities sitting under a heading, and at 440px the rail has room for both on one line. */ .model-tools { display: flex; flex-wrap: wrap; gap: var(--hdc-space-3); } .model-tool { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); color: var(--hdc-color-heading); background: var(--hdc-surface); cursor: pointer; border: 1px solid var(--hdc-line-strong); border-radius: var(--hdc-radius-sm); padding: var(--hdc-space-2) var(--hdc-space-4); text-decoration: none; display: inline-flex; align-items: center; gap: var(--hdc-space-2); transition: border-color var(--hdc-dur) var(--hdc-ease), color var(--hdc-dur) var(--hdc-ease); } .model-tool:hover { border-color: var(--hdc-color-primary); color: var(--hdc-color-primary); } .model-legal { margin: var(--hdc-space-5) 0 0; font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); color: var(--hdc-color-muted); } /* The tour card, in the rail. --hdc-surface on --hdc-surface-tint is 1.04:1 — the two are effectively the same value, so the card had no edge and its "Walk the model" strip read as loose text on the section rather than part of a card. The drawing beside it gets away with this because the artwork itself is a white field; this one needs a real edge. Border, not shadow: every other surface on these pages uses a border. */ .model-plan__tour { margin-top: var(--hdc-space-3); border-radius: var(--hdc-radius-md); /* --_bg, NOT background. theme.css paints every content button from --_bg to stop GeneratePress repainting bare