/* ---------- tokens ---------- */
/* Official Boxabl Brand Style Guide colors:
Pantone 287C → #184273 (Blue)
Pantone 137C → #ffa400 (Gold)
Pantone BlkC → #000000
Pantone 000C → #ffffff
Typography: Keep Calm Medium — Outfit (Google Fonts) is our closest
free-to-host alternative with matching geometric proportions. */
/* Palette is strictly the Boxabl Brand Style Guide: Blue / Gold / Black / White.
Grays are opacities of Black so nothing off-palette is introduced. */
#bxbl-catalog-root {
--bg: #ffffff; /* White (Pantone 000C) */
--surface: #ffffff;
--ink: #000000; /* Black (Pantone Black C) */
--ink-2: rgba(0,0,0,0.60);
--ink-3: rgba(0,0,0,0.42);
--hair: rgba(0,0,0,0.12);
--hair-strong: rgba(0,0,0,0.70);
/* Boxabl brand */
--brand: #184273; /* Pantone 287C — Boxabl Blue */
--brand-deep: #0f2c4f; /* darker blue, hover only */
--gold: #ffa400; /* Pantone 137C — Boxabl Gold */
--gold-deep: #cc8300; /* darker gold — used only where gold text needs contrast on white */
/* "warn" preserved as alias for backwards compat — same color as gold */
--accent: var(--brand);
--warn: var(--gold);
/* Typography */
--type-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--type-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--type-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--rail-w: 280px;
--detail-w: min(1200px, 92vw);
/* iOS notch / home-indicator safe areas (0 on devices without them) */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
/* Topbar height (without safe inset). Mobile shrinks this below. */
--topbar-h: 52px;
}
@media (max-width: 980px) { #bxbl-catalog-root { --topbar-h: 48px; } }
#bxbl-catalog-root *, #bxbl-catalog-root *::before, #bxbl-catalog-root *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Kill the browser's dotted focus outline on mouse use; keep a clean ring for keyboard nav */
#bxbl-catalog-root *:focus { outline: none; }
#bxbl-catalog-root *:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
#bxbl-catalog-root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* overflow-x: clip (not hidden) prevents horizontal scroll WITHOUT turning the
body into a vertical scroll container — `hidden` would force overflow-y:auto
and trap the sticky left rail so it scrolls away. clip keeps sticky working. */
#bxbl-catalog-root, #bxbl-catalog-root { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--type-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; accent-color: var(--brand); }
/* Embedded native build: the catalog markup lives in the host site's light DOM,
so the site's `@layer base` element rules (h1–h6 → black, p → grey) bleed in
and break the catalog's inheritance-based text colors (the navy billboard
headline went black). Re-assert inheritance per element. Once the generator
scopes these under #bxbl-catalog-root their (id + element) specificity stays
below every catalog *class* color rule, so only the inherited cases change;
no-op in the standalone document. (One rule each — the scoper splits commas.) */
#bxbl-catalog-root h1 { color: inherit; }
#bxbl-catalog-root h2 { color: inherit; }
#bxbl-catalog-root h3 { color: inherit; }
#bxbl-catalog-root h4 { color: inherit; }
#bxbl-catalog-root h5 { color: inherit; }
#bxbl-catalog-root h6 { color: inherit; }
#bxbl-catalog-root p { color: inherit; }
#bxbl-catalog-root ::selection { background: var(--brand); color: #ffffff; }
#bxbl-catalog-root input, #bxbl-catalog-root button, #bxbl-catalog-root select, #bxbl-catalog-root textarea { font: inherit; color: inherit; }
/* Grid/flex items default to min-content min-width which causes overflow.
These containers must be allowed to shrink below their min-content. */
#bxbl-catalog-root .shell, #bxbl-catalog-root .rail, #bxbl-catalog-root main, #bxbl-catalog-root .topbar, #bxbl-catalog-root .topbar-mid, #bxbl-catalog-root .detail-grid, #bxbl-catalog-root .detail-info, #bxbl-catalog-root .gallery { min-width: 0; }
#bxbl-catalog-root a { color: inherit; text-decoration: none; }
#bxbl-catalog-root button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
#bxbl-catalog-root img { display: block; max-width: 100%; }
#bxbl-catalog-root ::selection { background: var(--ink); color: var(--bg); }
/* ---------- type ---------- */
/* Outfit is geometric like Keep Calm Medium — tightened tracking on the display
class, slightly looser line-height to give descenders room. */
#bxbl-catalog-root .display { font-family: var(--type-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
#bxbl-catalog-root .display.uppercase, #bxbl-catalog-root .uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
#bxbl-catalog-root .eyebrow { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
#bxbl-catalog-root .label { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
/* ---------- top bar ---------- */
#bxbl-catalog-root .topbar {
/* Elevated above every overlay (detail / project / compare) so the navy
band carries through the whole experience.
NATIVE EMBED: when the catalog runs in the site document (not the iframe),
it sits UNDER the site's own sticky header. --site-h (set by CatalogNative
to the site header's height; 0 everywhere else) offsets the band so the two
stack instead of colliding. Standalone/iframe keep top:0 via the fallback. */
position: sticky; top: var(--site-h, 0px); z-index: 200;
/* First column sizes to brand content (auto) so the BOXABL Catalog wordmark + version
always fit on one line. Middle column takes remaining space; right column is hugs-content. */
/* Columns line up with the page grid below: col1 = rail width (brand aligns
with the "Collections" header), col2 = main area (crumb aligns with the
hero/cards), col3 = action button (aligns with the content right edge). */
/* Three equal-weight columns so the middle slot is TRULY centered in the
bar (not just in its own column). Brand sticks to the left, action to
the right, and the centered slot stays balanced regardless of side widths. */
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0;
/* Grow by the iOS status-bar/notch inset and fill it with the navy band;
content stays centered in the 64px below the notch. */
height: calc(var(--topbar-h) + var(--safe-top));
padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
box-sizing: border-box;
/* Boxabl-navy header — the signature brand chrome, darker per request */
background: var(--brand);
}
/* Brand stays at the bar's left edge, padded the same amount as the rail */
/* Brand acts as the Home link — clickable, no underline, transitions on hover */
#bxbl-catalog-root .brand { display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-5); min-width: 0; justify-self: start; text-decoration: none; color: inherit; cursor: pointer; }
#bxbl-catalog-root .brand:focus { outline: none; }
#bxbl-catalog-root .brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Brand label swaps between BOXABL (catalog) and ‹ Back to catalog (overlays) */
#bxbl-catalog-root .brand-back { display: none; align-items: center; gap: 8px; color: rgba(255,255,255,0.85); font-family: var(--type-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
#bxbl-catalog-root .brand-back svg { width: 14px; height: 14px; }
#bxbl-catalog-root.in-overlay .brand-mark { display: none; }
#bxbl-catalog-root.in-overlay .brand-back { display: inline-flex; }
/* Hide the secondary bars entirely — the topbar's brand-back is the way home */
#bxbl-catalog-root.in-overlay .detail-bar, #bxbl-catalog-root.in-overlay .tool-bar, #bxbl-catalog-root.in-overlay .compare-bar { display: none; }
/* Without the secondary bar, overlays sit flush against the topbar */
#bxbl-catalog-root.in-overlay .detail, #bxbl-catalog-root.in-overlay .compare, #bxbl-catalog-root.in-overlay .tool { padding-top: 0; }
/* Hide the catalog rail + grid underneath so they don't bleed through
(the rail is sticky and was peeking through near the top edge). */
#bxbl-catalog-root.in-overlay .shell { visibility: hidden; }
#bxbl-catalog-root .brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Brand mark — Boxabl logo on a white chip so it reads cleanly on navy */
#bxbl-catalog-root .brand-icon {
width: 36px; height: 36px; flex-shrink: 0;
/* Square-corner logo (style-guide 2.A1) — the website mark. No rounding. */
border-radius: 0;
display: block; object-fit: contain;
background: transparent; padding: 0;
transition: transform 480ms cubic-bezier(.2,.7,.2,1);
}
#bxbl-catalog-root .brand:hover .brand-icon { transform: rotate(-3deg) scale(1.04); }
/* Brand wordmark — white on navy, gold "Catalog" suffix */
#bxbl-catalog-root .brand-mark { font-family: var(--type-display); font-size: 20px; letter-spacing: 0; line-height: 1; white-space: nowrap; font-weight: 400; color: rgba(255,255,255,0.85); }
#bxbl-catalog-root .brand-mark b { font-weight: 700; letter-spacing: 0.04em; color: #ffffff; }
/* "Developer Series" kicker — lives in the nav bar's left slot so it lines up
with CATALOG (center) and PROJECT (right). On /developers the logo+wordmark
are hidden, so this is the only left item; on the standalone catalog it sits
under the BOXABL wordmark. Hidden inside overlays (Back-to-catalog shows). */
#bxbl-catalog-root .brand-kicker { font-family: var(--type-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; line-height: 1; white-space: nowrap; }
#bxbl-catalog-root.in-overlay .brand-kicker { display: none; }
/* Centered in the blue bar — shows the active context (category + version). */
#bxbl-catalog-root .topbar-mid { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-width: 0; padding: 0 var(--space-4); }
#bxbl-catalog-root .crumb { font-family: var(--type-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#bxbl-catalog-root .crumb b { color: #ffffff; font-weight: 600; }
#bxbl-catalog-root .crumb .crumb-sep { opacity: 0.5; padding: 0 4px; }
/* Action button aligns with the content's right edge */
#bxbl-catalog-root .topbar-right { display: flex; align-items: center; gap: var(--space-3); justify-self: end; padding-right: var(--space-7); }
#bxbl-catalog-root .topbar-right .label { cursor: default; }
/* Solid-fill action button — no border, no ghost. */
#bxbl-catalog-root .tb-action {
font-family: var(--type-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
height: 38px; padding: 0 16px; border: 0;
background: var(--gold); color: var(--brand);
cursor: pointer; transition: background 140ms ease, color 140ms ease, transform 120ms ease;
white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
font-weight: 600;
}
#bxbl-catalog-root .tb-action:hover { background: var(--gold-deep); color: var(--brand); }
#bxbl-catalog-root .tb-action:focus { outline: none; }
#bxbl-catalog-root .tb-action:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
/* Call action — secondary to the gold Project CTA, so it's a ghost button on
the navy bar (transparent w/ hairline). Number sourced from boxabl.com. */
#bxbl-catalog-root .tb-call { background: rgba(255,255,255,0.10); color: #ffffff; gap: 7px; padding: 0 14px; text-decoration: none; }
#bxbl-catalog-root .tb-call:hover { background: rgba(255,255,255,0.18); color: #ffffff; }
#bxbl-catalog-root .tb-call svg { width: 16px; height: 16px; flex: none; }
/* On narrow bars, collapse to the phone icon only to save room. */
@media (max-width: 720px) { #bxbl-catalog-root .tb-call .tb-call-num { display: none; } #bxbl-catalog-root .tb-call { padding: 0 10px; } }
/* Call popup — reuses the .share-pop card. The number row is a filled navy
"call now"; the rest are quiet rows. Developers are high-value leads, so the
primary action is one easy tap. */
#bxbl-catalog-root .call-pop { width: 234px; }
#bxbl-catalog-root .call-pop .share-act.is-primary { background: var(--brand); color: #ffffff; align-items: flex-start; }
#bxbl-catalog-root .call-pop .share-act.is-primary svg { color: #ffffff; margin-top: 1px; }
#bxbl-catalog-root .call-pop .share-act.is-primary:hover { background: var(--brand-deep); }
#bxbl-catalog-root .call-pop .call-big { font-family: var(--type-display); font-weight: 600; font-size: 16px; line-height: 1.15; display: block; }
#bxbl-catalog-root .call-pop .call-sub { font-family: var(--type-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; display: block; margin-top: 3px; }
/* Project button — solid gold by default, the catalog's primary CTA.
Press flips to navy with a quick pop. */
#bxbl-catalog-root .tb-project {
gap: 8px;
transition: background 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}
#bxbl-catalog-root .tb-project:hover { background: var(--gold-deep); color: var(--brand); box-shadow: 0 4px 14px -6px rgba(0,0,0,0.5); }
/* Pressed-state animation: scale down + colour flip to navy/gold */
#bxbl-catalog-root .tb-project:active { transform: scale(0.93); background: var(--brand); color: var(--gold); box-shadow: none; }
#bxbl-catalog-root .tb-project.pressed { animation: tb-pop 320ms cubic-bezier(.2,.7,.2,1); }
@keyframes tb-pop {
0% { transform: scale(1); }
35% { transform: scale(0.9); background: var(--brand); color: var(--gold); }
100% { transform: scale(1); }
}
#bxbl-catalog-root .tb-count {
display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
background: rgba(24,66,115,0.16); color: var(--brand); font-size: 10px; font-weight: 600; border-radius: 10px;
}
#bxbl-catalog-root .tb-project:active .tb-count { background: rgba(255,255,255,0.22); color: var(--gold); }
#bxbl-catalog-root .tb-project.is-empty .tb-count { background: rgba(24,66,115,0.12); color: var(--brand); }
/* ---------- layout ---------- */
#bxbl-catalog-root .shell {
display: grid; grid-template-columns: var(--rail-w) 1fr;
/* Use dvh so mobile Safari's URL bar doesn't add invisible scroll. */
min-height: calc(100vh - var(--topbar-h) - var(--safe-top));
min-height: calc(100dvh - var(--topbar-h) - var(--safe-top));
}
#bxbl-catalog-root .rail {
padding: var(--space-5) var(--space-5) var(--space-6);
position: sticky; top: calc(var(--site-h, 0px) + var(--topbar-h) + var(--safe-top)); align-self: start;
height: calc(100vh - var(--topbar-h) - var(--safe-top));
height: calc(100dvh - var(--topbar-h) - var(--safe-top));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* Subtle scroll affordance: a thin fade at the bottom edge */
background:
linear-gradient(to bottom, transparent calc(100% - 32px), rgba(255,255,255,0.95) 100%)
right / 100% 100% no-repeat;
scrollbar-width: thin;
}
#bxbl-catalog-root .rail::-webkit-scrollbar { width: 6px; }
#bxbl-catalog-root .rail::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 3px; }
#bxbl-catalog-root .rail-section + .rail-section { margin-top: var(--space-5); }
#bxbl-catalog-root .rail h4 { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-3) 0; font-weight: 500; }
#bxbl-catalog-root .rail h4.rail-h4-lead { font-size: 13px; letter-spacing: 0.18em; color: var(--brand); font-weight: 700; }
#bxbl-catalog-root .rail-rule { border: 0; height: 2px; background: #d9d9d9; margin: 0 0 var(--space-4) 0; border-radius: 0; }
#bxbl-catalog-root .cat-list { list-style: none; margin: 0; padding: 0; }
#bxbl-catalog-root .cat-list li { margin: 0; }
#bxbl-catalog-root .cat-btn {
width: 100%; display: flex; align-items: baseline; gap: var(--space-3);
padding: 9px 0;
text-align: left; font-family: var(--type-display); font-size: 19px; color: var(--ink);
transition: color 120ms ease;
}
/* Index stays fixed-width, the name fills the row (and wraps cleanly under
itself for two-word categories like "Garden Apartments"), and the count
stays pinned to the right edge, top-aligned with the first line. */
#bxbl-catalog-root .cat-idx { flex: 0 0 auto; }
#bxbl-catalog-root .cat-name { flex: 1 1 auto; min-width: 0; }
/* Desktop keeps the full category name; the mobile short label is hidden. */
#bxbl-catalog-root .cat-name .cn-short { display: none; }
#bxbl-catalog-root .cat-count { flex: 0 0 auto; }
#bxbl-catalog-root .cat-btn:hover { color: var(--brand); }
#bxbl-catalog-root .cat-btn[aria-pressed="true"] {
color: var(--ink); position: relative;
background: var(--gold);
/* Pad the fill outward without shifting text — keeps idx/name aligned
with the other rows while the orange block bleeds into the rail gutter. */
padding-left: 12px; padding-right: 12px;
margin-left: -12px; margin-right: -12px;
width: calc(100% + 24px);
border-radius: 0;
}
#bxbl-catalog-root .cat-btn[aria-pressed="true"] .cat-idx { color: var(--ink-3); }
#bxbl-catalog-root .cat-btn[aria-pressed="true"] .cat-count { color: var(--ink-3); }
#bxbl-catalog-root .cat-idx { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); }
#bxbl-catalog-root .cat-count { font-family: var(--type-mono); font-size: 11px; color: var(--ink-3); }
#bxbl-catalog-root .filters { display: flex; flex-direction: column; gap: var(--space-3); }
#bxbl-catalog-root .filter { display: flex; flex-direction: column; gap: var(--space-2); }
/* Native select kept for form value + a11y, but hidden visually so the
custom dropdown UI owns the look. The OS-native menu (which we can't
theme on macOS) never appears. */
#bxbl-catalog-root .filter select {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
/* Custom Boxabl dropdown — fully themable navy highlight + selected state */
#bxbl-catalog-root .bx-select { position: relative; width: 100%; }
#bxbl-catalog-root .bx-select .bx-trigger {
width: 100%; padding: 10px 36px 10px 12px;
background: var(--surface); border: 0; cursor: pointer;
font-family: var(--type-display); font-size: 16px; color: var(--ink);
text-align: left; position: relative;
transition: background 140ms ease;
}
#bxbl-catalog-root .bx-select .bx-trigger:hover { background: rgba(24,66,115,0.06); }
#bxbl-catalog-root .bx-select .bx-trigger::after {
content: ""; position: absolute; top: 50%; right: 14px;
width: 8px; height: 8px;
border-right: 2px solid var(--brand);
border-bottom: 2px solid var(--brand);
transform: translateY(-70%) rotate(45deg);
transition: transform 160ms ease;
}
#bxbl-catalog-root .bx-select.is-open .bx-trigger::after { transform: translateY(-30%) rotate(-135deg); }
#bxbl-catalog-root .bx-select:focus-within .bx-trigger { outline: 2px solid var(--brand); outline-offset: -2px; }
#bxbl-catalog-root .bx-select .bx-panel {
/* Fixed + JS-anchored to the trigger so the sticky rail's overflow can never
clip it — the full list always shows (flips up near the viewport bottom). */
position: fixed; z-index: 500;
background: #ffffff; padding: 6px 0;
box-shadow: 0 12px 28px -10px rgba(0,0,0,0.18), 0 0 0 1px rgba(24,66,115,0.08);
max-height: 280px; overflow-y: auto;
display: none;
}
#bxbl-catalog-root .bx-select.is-open .bx-panel { display: block; animation: bx-fade 140ms ease-out both; }
@keyframes bx-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
#bxbl-catalog-root .bx-select .bx-opt {
padding: 9px 14px;
font-family: var(--type-display); font-size: 15px; color: var(--ink);
cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
#bxbl-catalog-root .bx-select .bx-opt:hover, #bxbl-catalog-root .bx-select .bx-opt[aria-selected="true"] {
background: var(--brand); color: #ffffff;
}
#bxbl-catalog-root .bx-select .bx-opt[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
/* ---------- main / hero ---------- */
#bxbl-catalog-root main { padding: var(--space-4) var(--space-7) var(--space-8); }
/* ===== Render strip (below the hero title) =====
Six marketing renders sit flush together — no dark frame around them, no
visual chrome competing for attention. The images themselves ARE the strip.
Subtle navy hairline ties them to the topbar; tiles separated by a 1px
navy gap so they read as a curated row, not one big collage. */
/* Curated renders strip — single-row carousel.
Drag to scroll (mouse + touch), gentle snap, smooth deceleration. */
#bxbl-catalog-root .renderstrip {
position: relative;
margin: 0 0 var(--space-5);
}
#bxbl-catalog-root .rs-track {
display: flex; gap: 0;
overflow-x: auto;
overflow-y: hidden;
/* No scroll-snap here: the auto-cruise advances scrollLeft by sub-pixel
increments per frame; any snap (even proximity) yanks it back to the
nearest tile and the strip freezes. scroll-behavior must also stay
'auto' so the cruise isn't smoothed into a stall. */
scroll-snap-type: none;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch; /* iOS momentum */
/* We own the horizontal axis for flick momentum (JS adds decaying inertia so
a swipe runs on, slows, and stops). pan-y leaves vertical page scrolling to
the browser so the page still scrolls when you drag up/down over the strip. */
touch-action: pan-y;
scrollbar-width: none; /* hide scrollbar — drag/buttons do the work */
padding: 4px 6px; /* room for tile lift */
cursor: grab;
-webkit-user-select: none; user-select: none; /* Safari needs the prefix */
/* Edge fade — the auto-cruise can't use scroll-snap (it would yank back), so
instead fade the partial tiles at both ends. The half-visible card now
reads as "the reel continues" rather than a clipped/broken button. */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
#bxbl-catalog-root .rs-track::-webkit-scrollbar { display: none; }
#bxbl-catalog-root .rs-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
#bxbl-catalog-root .rs-tile {
/* Match the catalog card image dimensions below for a unified rhythm:
same width as the grid's min tile (280px) and the same 4:3 image ratio. */
flex: 0 0 clamp(260px, 22vw, 320px);
aspect-ratio: 16 / 9;
background: #f5f5f5 center / cover no-repeat;
border: 0; padding: 0;
cursor: zoom-in; display: block;
position: relative;
/* scroll-snap removed — see .rs-track comment */
transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}
#bxbl-catalog-root .rs-tile::after {
content: ""; position: absolute; inset: 0;
box-shadow: inset 0 0 0 0 var(--gold);
transition: box-shadow 180ms ease;
pointer-events: none;
}
#bxbl-catalog-root .rs-track:not(.is-dragging) .rs-tile:hover { transform: scale(1.012); z-index: 1; }
#bxbl-catalog-root .rs-track:not(.is-dragging) .rs-tile:hover::after { box-shadow: inset 0 0 0 3px var(--gold); }
#bxbl-catalog-root .rs-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Drag should not trigger lightbox open — JS toggles .is-dragging and we
swallow click events while it's set. */
#bxbl-catalog-root .rs-track.is-dragging .rs-tile { pointer-events: none; }
/* Edge fade hints — show "more to see" */
#bxbl-catalog-root .renderstrip::before, #bxbl-catalog-root .renderstrip::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 56px;
pointer-events: none; z-index: 2;
opacity: 0; transition: opacity 220ms ease;
}
#bxbl-catalog-root .renderstrip::before { left: 0; background: linear-gradient(90deg, var(--bg), rgba(255,255,255,0)); }
#bxbl-catalog-root .renderstrip::after { right: 0; background: linear-gradient(270deg, var(--bg), rgba(255,255,255,0)); }
#bxbl-catalog-root .renderstrip.has-prev::before { opacity: 1; }
#bxbl-catalog-root .renderstrip.has-next::after { opacity: 1; }
/* Nudge buttons — solid navy, gold on hover, fade with edge */
#bxbl-catalog-root .rs-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; z-index: 3;
background: var(--brand); color: #ffffff;
border: 0; cursor: pointer;
display: grid; place-items: center;
transition: opacity 220ms ease, background 140ms ease, transform 140ms ease;
opacity: 0; pointer-events: none;
}
#bxbl-catalog-root .rs-nav:hover { background: var(--gold); color: var(--brand); }
#bxbl-catalog-root .rs-nav:active { transform: translateY(-50%) scale(0.94); }
#bxbl-catalog-root .rs-nav svg { width: 18px; height: 18px; }
#bxbl-catalog-root .rs-prev { left: 8px; }
#bxbl-catalog-root .rs-next { right: 8px; }
#bxbl-catalog-root .renderstrip.has-prev .rs-prev, #bxbl-catalog-root .renderstrip.has-next .rs-next { opacity: 1; pointer-events: auto; }
@media (hover: none) {
/* On touch devices: hide nudge buttons, swipe is the input. */
#bxbl-catalog-root .rs-nav { display: none; }
}
/* Compact hero — title + stats sit in a single tight band so the renders
and the catalog grid below get most of the viewport. */
#bxbl-catalog-root .hero {
display: grid; grid-template-columns: 1fr auto;
column-gap: var(--space-6); row-gap: 2px;
align-items: end;
margin-bottom: var(--space-2);
padding-bottom: 0;
}
#bxbl-catalog-root .hero .eyebrow { grid-column: 1 / -1; }
/* Title sits left of the stats on the top row; intro lede flows full width
below so the developer pitch uses every pixel of column space. */
#bxbl-catalog-root .hero h1 {
margin: 0; grid-column: 1; grid-row: 1;
font-size: clamp(18px, 1.7vw, 22px); line-height: 1.12;
}
#bxbl-catalog-root .hero .lede {
grid-column: 1 / -1; grid-row: 2;
margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.4;
}
/* Stats — horizontal row on the right of the same row as the title */
#bxbl-catalog-root .hero-meta {
grid-column: 2; grid-row: 1;
display: flex; gap: var(--space-5); align-items: flex-end;
padding: 0; border: 0;
}
#bxbl-catalog-root .hero-meta .stat { display: flex; flex-direction: column; gap: 2px; }
#bxbl-catalog-root .hero-meta .stat .n { font-family: var(--type-display); font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; color: var(--brand); line-height: 1; }
#bxbl-catalog-root .hero-meta .stat .l { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
/* Narrower laptops — stack title, stats, lede in three rows */
@media (max-width: 980px) {
#bxbl-catalog-root .hero { grid-template-columns: 1fr; }
#bxbl-catalog-root .hero h1 { grid-column: 1; grid-row: 1; }
#bxbl-catalog-root .hero-meta { grid-column: 1; grid-row: 2; flex-wrap: wrap; gap: var(--space-4); }
#bxbl-catalog-root .hero .lede { grid-column: 1; grid-row: 3; font-size: 13px; }
}
/* Developers explainer video — compact, centered, on-palette. */
#bxbl-catalog-root .explainer {
margin: var(--space-7) 0 var(--space-7);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
/* Light grey delineators above and below the video section */
border-top: 2px solid #d9d9d9;
border-bottom: 2px solid #d9d9d9;
text-align: center;
}
#bxbl-catalog-root .explainer .ex-head { margin: 0 auto var(--space-5); max-width: 720px; }
#bxbl-catalog-root .explainer .ex-head .eyebrow {
display: inline-block; margin-bottom: var(--space-2);
color: var(--brand); font-family: var(--type-mono); font-size: 14px;
letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
}
#bxbl-catalog-root .explainer h2 {
margin: 0; color: var(--ink);
font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2;
}
#bxbl-catalog-root .explainer .ex-sub {
margin: var(--space-2) 0 0; color: var(--ink-2); font-size: 14px;
}
#bxbl-catalog-root .ex-shell {
position: relative;
max-width: 880px; margin: 0 auto;
aspect-ratio: 16/9; overflow: hidden;
background: var(--ink);
border: 1px solid var(--brand);
}
#bxbl-catalog-root .ex-shell video { width: 100%; height: 100%; object-fit: cover; display: block; }
#bxbl-catalog-root .ex-shell .ex-play {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 76px; height: 76px;
display: grid; place-items: center;
background: var(--gold); color: var(--brand);
border: 0; border-radius: 50%; cursor: pointer;
box-shadow: 0 14px 36px -16px rgba(0,0,0,0.45);
transition: background 160ms ease, transform 160ms ease;
}
#bxbl-catalog-root .ex-shell .ex-play:hover { background: var(--gold-deep); transform: translate(-50%, -50%) scale(1.05); }
#bxbl-catalog-root .ex-shell .ex-play svg { width: 26px; height: 30px; margin-left: 4px; }
#bxbl-catalog-root .ex-shell.playing .ex-play { display: none; }
@media (max-width: 640px) {
#bxbl-catalog-root .ex-shell .ex-play { width: 56px; height: 56px; }
#bxbl-catalog-root .ex-shell .ex-play svg { width: 20px; height: 22px; }
}
/* Developer value-prop — closing pitch. Centered heading, 5 evenly-aligned
pillar cards with consistent heading height + crisp gold check icons. */
#bxbl-catalog-root .value-prop {
margin: 0 calc(-1 * var(--space-6)) var(--space-4);
padding: 0 var(--space-6) var(--space-3);
background: var(--surface);
}
#bxbl-catalog-root .value-prop .vp-head {
margin: 0 auto var(--space-3); text-align: center; max-width: 720px;
}
#bxbl-catalog-root .value-prop .vp-head .eyebrow {
display: inline-block; margin-bottom: var(--space-3);
color: var(--brand); font-family: var(--type-mono); font-size: 14px;
letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
}
#bxbl-catalog-root .value-prop .vp-head h2 {
margin: 0; color: var(--ink);
font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2;
}
#bxbl-catalog-root .vp-grid {
display: grid; gap: var(--space-5);
grid-template-columns: repeat(5, 1fr);
align-items: start;
}
#bxbl-catalog-root .vp-col {
background: transparent;
padding: 0;
display: flex; flex-direction: column;
}
#bxbl-catalog-root .vp-col h3 {
margin: 0 0 var(--space-2);
font-family: var(--type-display); font-size: 17px; font-weight: 600;
color: var(--brand); line-height: 1.2;
}
#bxbl-catalog-root .vp-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#bxbl-catalog-root .vp-col li {
position: relative; padding-left: 22px;
font-size: 14.5px; line-height: 1.45; color: var(--ink-2);
}
#bxbl-catalog-root .vp-col li::before {
content: ""; position: absolute; left: 0; top: 4px;
width: 14px; height: 14px;
background: var(--gold);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
@media (max-width: 1100px) {
#bxbl-catalog-root .vp-grid { grid-template-columns: repeat(3, 1fr); }
#bxbl-catalog-root .vp-col h3 { min-height: 0; }
}
@media (max-width: 640px) {
/* Phones: ONE clean column (the 2-up grid wrapped awkwardly and felt cramped),
and trim to just the punchiest points so it isn't a wall of text. */
#bxbl-catalog-root .vp-grid { grid-template-columns: 1fr; gap: var(--space-4) var(--space-5); }
#bxbl-catalog-root .vp-col li.vp-trim { display: none; }
/* Full-bleed navy band — use the viewport-width trick so it lands exactly
edge-to-edge regardless of main's padding. */
#bxbl-catalog-root .value-prop { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: var(--space-3) var(--space-5); box-sizing: border-box; }
}
/* ---------- grid ---------- */
#bxbl-catalog-root .grid-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); scroll-margin-top: calc(var(--site-h, 0px) + var(--topbar-h) + var(--space-4)); }
#bxbl-catalog-root .grid-head h2 { margin: 0; font-size: 28px; }
/* Category blurb — sits below the section title when a specific category
is selected. Full width of the main column so it doesn't leave dead
space, muted tone, sets context for the cards below. */
#bxbl-catalog-root .cat-blurb {
margin: 0 0 var(--space-5);
color: var(--ink-2); font-size: 14px; line-height: 1.55;
}
#bxbl-catalog-root .grid {
display: grid; gap: var(--space-6);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* "Pop" effect on category switch — staggered fade-up + subtle scale.
Per skills.sh/pbakaus/impeccable/animate: 100–800ms range, GPU props (opacity, transform),
respect prefers-reduced-motion (handled globally at the bottom of the stylesheet). */
@keyframes card-pop-in {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
#bxbl-catalog-root .card.entering {
animation: card-pop-in 420ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes title-slide-in {
from { opacity: 0; transform: translateY(8px); letter-spacing: 0.02em; }
to { opacity: 1; transform: translateY(0); letter-spacing: -0.01em; }
}
#bxbl-catalog-root .grid-head.entering h2 { animation: title-slide-in 320ms cubic-bezier(.2,.8,.2,1) both; }
#bxbl-catalog-root .grid-head .grid-count.entering { animation: title-slide-in 320ms cubic-bezier(.2,.8,.2,1) 100ms both; }
@keyframes cat-fill-pop {
0% { transform: scale(0.96); }
55% { transform: scale(1.015); }
100% { transform: scale(1); }
}
#bxbl-catalog-root .cat-btn.activating[aria-pressed="true"] {
animation: cat-fill-pop 360ms cubic-bezier(.2,.8,.2,1);
}
/* Borderless card — relies on subtle surface tint + soft hover shadow */
#bxbl-catalog-root .card {
background: var(--surface);
border: 0;
display: flex; flex-direction: column;
transition: transform 200ms ease, box-shadow 200ms ease;
cursor: pointer;
text-align: left;
width: 100%;
position: relative;
}
#bxbl-catalog-root .card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px -18px rgba(0,0,0,0.22);
}
#bxbl-catalog-root .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#bxbl-catalog-root .card-img {
aspect-ratio: 16/9; /* unified 16:9 image frame (catalog-wide design decision) */
background: rgba(0,0,0,0.05) center / cover no-repeat;
position: relative;
overflow: hidden;
}
/* Floor-plan fallback image (no exterior yet) — contain on white so the plan
is shown whole rather than cropped to fill. */
#bxbl-catalog-root .card-img.is-floorcard { background-size: contain; background-color: #ffffff; }
/* "Render · Jun 9" pill on cards whose exterior isn't ready yet.
Sits in the top-right of the image, solid gold on navy text, on-palette. */
#bxbl-catalog-root .render-badge {
position: absolute; top: 10px; right: 10px; z-index: 2;
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 9px;
background: var(--gold); color: var(--brand);
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase; font-weight: 600;
pointer-events: none;
box-shadow: 0 2px 8px -3px rgba(0,0,0,0.25);
}
#bxbl-catalog-root .render-badge svg { width: 11px; height: 11px; }
/* Card action footer — solid-fill brand buttons, no borders.
Compare unselected = navy, Add unselected = gold (palette accent).
Both selected states share the same "done" look — ink/black with a check —
so the two buttons read consistently once the user has acted on a card. */
/* Footer pinned to the card bottom so COMPARE/ADD align across every card,
regardless of price line count (e.g. "est. on request" vs two-line prices). */
/* Invisible deep-link anchor covering the card (image + body) so the model
detail can be opened in a new tab via right-/⌘-/middle-click. */
#bxbl-catalog-root .card-open { position: absolute; inset: 0; z-index: 1; text-decoration: none; }
/* Hover share icon — copies a deep link to this config straight from the grid */
#bxbl-catalog-root .card-share {
position: absolute; top: 8px; right: 8px; z-index: 3;
width: 30px; height: 30px; display: grid; place-items: center;
background: rgba(24,66,115,0.82); color: #ffffff; border: 0; cursor: pointer;
opacity: 0; transform: translateY(-2px);
transition: opacity 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}
#bxbl-catalog-root .card-share svg { width: 15px; height: 15px; }
#bxbl-catalog-root .card-share:hover { background: var(--gold); color: var(--brand); }
#bxbl-catalog-root .card-share:focus-visible { opacity: 1; outline: 2px solid var(--gold); outline-offset: 2px; }
#bxbl-catalog-root .card:hover .card-share { opacity: 1; transform: none; }
@media (hover: none) { #bxbl-catalog-root .card-share { opacity: 1; transform: none; } }
/* Footer sits above the anchor so Compare / Add stay clickable. */
#bxbl-catalog-root .card-foot { display: flex; gap: 8px; margin-top: auto; padding-top: var(--space-4); position: relative; z-index: 2; }
#bxbl-catalog-root .card-foot-btn {
flex: 1; min-width: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 36px; padding: 0 8px; border: 0;
background: var(--brand); color: #ffffff;
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
cursor: pointer; transition: background 140ms ease, color 140ms ease;
}
#bxbl-catalog-root .card-foot-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
#bxbl-catalog-root .card-foot-btn:hover { background: var(--brand-deep); color: #ffffff; }
/* "View details" — the single card action. Gold accent so it reads as the
primary CTA; spans the full card since it's the only button. */
#bxbl-catalog-root .card-foot-single { gap: 0; }
#bxbl-catalog-root .card-foot-btn.card-view { background: var(--gold); color: var(--brand); }
#bxbl-catalog-root .card-foot-btn.card-view:hover { background: var(--gold-deep); color: var(--brand); }
/* Compare + Add-to-project (the project basket) are disabled until there's a
login to SAVE selections — hide every entry point AND overlay so deep links
can't surface them either. Elements remain in the DOM so the catalog JS that
references them (counts, sync) never throws. */
#bxbl-catalog-root .tb-project,
#bxbl-catalog-root .compare-tray,
#bxbl-catalog-root #compare,
#bxbl-catalog-root #projectTool { display: none !important; }
/* Image/spec count — shown in the card body, never over the image */
#bxbl-catalog-root .card-meta {
display: inline-flex; align-items: center; gap: 5px;
color: var(--ink-3); white-space: nowrap;
}
#bxbl-catalog-root .card-meta svg { width: 11px; height: 11px; opacity: 0.8; }
#bxbl-catalog-root .card-img.placeholder {
background:
repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.04) 14px 15px),
rgba(0,0,0,0.05);
display: grid; place-items: center; gap: var(--space-3);
}
#bxbl-catalog-root .card-img.placeholder .box-mark {
width: 56px; height: 56px; opacity: 0.7; border-radius: 10px;
}
#bxbl-catalog-root .card-img.placeholder span { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); text-transform: uppercase; }
#bxbl-catalog-root .card-body { padding: var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
/* Category chip ABOVE the model name so the name has the full card width
and never wraps to a second line ("Townhome 1600 — v3"). */
#bxbl-catalog-root .card-name {
font-family: var(--type-display); font-size: 20px; line-height: 1.2;
font-weight: 500; letter-spacing: -0.015em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0;
}
#bxbl-catalog-root .card-sub { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
#bxbl-catalog-root .card-sub-cat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#bxbl-catalog-root .card-specs { display: flex; gap: var(--space-4); padding-top: var(--space-3); margin-top: var(--space-2); }
#bxbl-catalog-root .card-specs .s { display: flex; flex-direction: column; gap: 2px; }
#bxbl-catalog-root .card-specs .s .v { font-family: var(--type-display); font-size: 16px; }
#bxbl-catalog-root .card-specs .s .k { font-family: var(--type-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
/* Per-sq-ft is the hero number for developers; MSRP is the secondary line. */
/* Reserve two lines of height so a single-line "est. on request" keeps the same
footprint as a two-line price — price baselines stay aligned across cards. */
#bxbl-catalog-root .card-price { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding-top: var(--space-3); margin-top: var(--space-2); min-height: 54px; }
#bxbl-catalog-root .card-price .cp-psqft {
font-family: var(--type-display); font-weight: 600; font-size: 24px; line-height: 1;
color: var(--brand); letter-spacing: -0.01em;
}
#bxbl-catalog-root .card-price .cp-psqft .cp-unit {
font-family: var(--type-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.06em;
color: var(--ink-3); margin-left: 5px;
}
#bxbl-catalog-root .card-price .cp-msrp {
font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2);
}
/* ---------- empty state ---------- */
#bxbl-catalog-root .empty {
background: var(--surface);
padding: var(--space-7);
text-align: center;
color: var(--ink-2);
}
#bxbl-catalog-root .empty .display { font-size: 28px; margin-bottom: var(--space-2); color: var(--ink); }
#bxbl-catalog-root .empty .label { color: var(--ink-2); font-size: 14px; letter-spacing: 0; text-transform: none; }
#bxbl-catalog-root .empty-reset { margin-top: var(--space-4); }
/* "Renderings" pill that ties to the same treatment on individual cards */
#bxbl-catalog-root .empty-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; margin-bottom: var(--space-4);
background: var(--gold); color: var(--brand);
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; font-weight: 600;
}
#bxbl-catalog-root .empty-pill svg { width: 12px; height: 12px; }
/* ---------- lightbox ---------- */
#bxbl-catalog-root .lightbox {
/* Cinematic full-screen viewer. Clean vertical stack: label bar on top,
image fills the middle, thumbnail strip docked at the bottom. */
position: fixed; top: var(--site-h, 0px); right: 0; bottom: 0; left: 0; z-index: 300;
background: var(--brand); /* Boxabl navy */
display: none;
flex-direction: column; align-items: stretch; justify-content: flex-start;
padding: 0;
-webkit-user-select: none; user-select: none;
}
#bxbl-catalog-root .lightbox.open { display: flex; animation: lb-in 240ms ease-out both; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
/* Middle stage: holds the image + the prev/next arrows so the arrows are
centered on the IMAGE region (between the top bar and the strip), not the
whole viewport. */
#bxbl-catalog-root .lightbox-stage {
flex: 1 1 auto; min-height: 0; position: relative;
display: flex; align-items: center; justify-content: center;
padding: var(--space-4) calc(52px + var(--space-5));
}
#bxbl-catalog-root .lightbox-img {
/* RULE: floor plans / images render at maximum size for their aspect ratio.
width/height:100% makes the element fill the stage and object-fit:contain
then scales the picture UP or down to fit while keeping it whole. (Using
max-width/max-height instead would only scale DOWN, so a small trimmed
floor plan would sit tiny in the middle of the navy stage.) */
width: 100%; height: 100%;
object-fit: contain;
background: transparent;
border: 0;
filter: drop-shadow(0 18px 48px rgba(0,0,0,0.6));
animation: lb-img-in 380ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lb-img-in {
from { opacity: 0; transform: scale(0.985); }
to { opacity: 1; transform: scale(1); }
}
/* Top label bar — docked above the image, not overlapping it */
#bxbl-catalog-root .lightbox-top {
flex: 0 0 auto; z-index: 3;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: var(--space-4);
padding: calc(14px + var(--safe-top)) calc(var(--space-6) + var(--safe-right)) 14px calc(var(--space-6) + var(--safe-left));
background: rgba(0,0,0,0.35);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
#bxbl-catalog-root .lightbox-top .lb-kind {
justify-self: center; text-align: center;
color: rgba(255,255,255,0.92);
font-family: var(--type-display); font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
#bxbl-catalog-root .lightbox-top .lb-counter {
justify-self: start;
color: rgba(255,255,255,0.55);
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.18em;
}
/* Bottom film strip — docked below the image as a clean row, not overlapping. */
#bxbl-catalog-root .lightbox-strip {
flex: 0 0 auto; z-index: 3;
display: flex; gap: 8px; align-items: center; justify-content: center;
padding: 14px calc(var(--space-5) + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left));
overflow-x: auto; scrollbar-width: thin;
background: rgba(0,0,0,0.35);
border-top: 1px solid rgba(255,255,255,0.06);
}
#bxbl-catalog-root .lb-thumb {
flex: 0 0 auto; position: relative;
width: 120px; height: 68px; padding: 0; /* 16:9 */
background: #1a1a1a center/cover no-repeat;
border: 0;
cursor: pointer; opacity: 0.45;
transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
#bxbl-catalog-root .lb-thumb.is-floor { background-size: contain; background-color: #ffffff; }
#bxbl-catalog-root .lb-thumb:hover { opacity: 0.9; transform: translateY(-3px); }
#bxbl-catalog-root .lb-thumb.active {
opacity: 1;
box-shadow: 0 0 0 2px var(--gold);
}
/* A video slide fills the stage like an image, but on black so the
letterbox reads cleanly (the frame is shown whole, never cropped). */
#bxbl-catalog-root .lightbox-video { background: #000; }
/* Play badge over a video thumbnail in the strip. */
#bxbl-catalog-root .lb-thumb.is-video .lb-thumb-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 28px; height: 28px; display: grid; place-items: center;
background: rgba(24,66,115,0.85); border-radius: 50%; pointer-events: none;
}
#bxbl-catalog-root .lb-thumb.is-video .lb-thumb-play::before {
content: ""; width: 0; height: 0; margin-left: 2px;
border-style: solid; border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #ffffff;
}
#bxbl-catalog-root .lb-thumb .lb-thumb-cap {
position: absolute; left: 0; right: 0; bottom: 0;
font-family: var(--type-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
color: #ffffff; background: rgba(0,0,0,0.7); padding: 3px 5px; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bxbl-catalog-root .lightbox-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
width: 52px; height: 52px;
background: rgba(255,255,255,0.04);
border: 0;
color: rgba(255,255,255,0.85); cursor: pointer;
display: grid; place-items: center; border-radius: 50%;
transition: background 180ms ease, transform 180ms ease, color 180ms ease;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#bxbl-catalog-root .lightbox-nav:hover { background: rgba(255,255,255,0.18); color: #ffffff; transform: translateY(-50%) scale(1.06); }
#bxbl-catalog-root .lightbox-nav.prev { left: var(--space-5); }
#bxbl-catalog-root .lightbox-nav.next { right: var(--space-5); }
#bxbl-catalog-root .lightbox-nav svg { width: 22px; height: 22px; }
/* Bare X (no box at all) — white on the navy lightbox. */
#bxbl-catalog-root .lightbox-close {
position: absolute; top: calc(var(--space-3) + var(--safe-top)); right: calc(var(--space-4) + var(--safe-right)); z-index: 5;
width: 44px; height: 44px;
background: transparent; border: 0; box-shadow: none;
-webkit-appearance: none; appearance: none;
color: #ffffff; cursor: pointer;
display: grid; place-items: center;
transition: color 160ms ease, transform 160ms ease;
}
#bxbl-catalog-root .lightbox-close:hover { color: rgba(255,255,255,0.7); transform: scale(1.1); }
#bxbl-catalog-root .lightbox-close:focus, #bxbl-catalog-root .lightbox-close:focus-visible { outline: none; box-shadow: none; }
/* ===== Spec sheet viewer (in-app PDF on Boxabl navy) — mirrors the lightbox ===== */
#bxbl-catalog-root .specbox {
position: fixed; top: var(--site-h, 0px); right: 0; bottom: 0; left: 0; z-index: 320; /* above the lightbox (300) */
background: var(--brand); /* Boxabl navy */
display: none;
flex-direction: column; align-items: stretch; justify-content: flex-start;
}
#bxbl-catalog-root .specbox.open { display: flex; animation: lb-in 240ms ease-out both; }
#bxbl-catalog-root .specbox-top {
flex: 0 0 auto; z-index: 3;
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: var(--space-4);
padding: calc(14px + var(--safe-top)) calc(var(--space-6) + var(--safe-right)) 14px calc(var(--space-6) + var(--safe-left));
background: rgba(0,0,0,0.35);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
#bxbl-catalog-root .specbox-top .sb-kind {
justify-self: center; text-align: center;
color: rgba(255,255,255,0.92);
font-family: var(--type-display); font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
#bxbl-catalog-root .specbox-top .sb-counter {
justify-self: start;
color: rgba(255,255,255,0.55);
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.18em;
}
#bxbl-catalog-root .specbox-body {
flex: 1 1 auto; min-height: 0;
display: flex; align-items: stretch;
}
/* Left page-thumbnail rail — same role as the browser viewer's page panel. */
#bxbl-catalog-root .specbox-pages {
flex: 0 0 auto; width: 132px;
background: var(--brand);
overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 16px 12px calc(16px + var(--safe-bottom)) calc(12px + var(--safe-left));
}
#bxbl-catalog-root .specbox-pages:empty, #bxbl-catalog-root .specbox-pages.is-hidden { display: none; }
#bxbl-catalog-root .sb-pagethumb {
flex: 0 0 auto; width: 100%; padding: 0; border: 0; cursor: pointer;
background: transparent; opacity: 0.5;
transition: opacity 160ms ease, transform 160ms ease;
}
#bxbl-catalog-root .sb-pagethumb img {
display: block; width: 100%; height: auto; background: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
#bxbl-catalog-root .sb-pagethumb .sb-pagenum {
display: block; text-align: center; margin-top: 5px;
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(255,255,255,0.6);
}
#bxbl-catalog-root .sb-pagethumb:hover { opacity: 0.9; transform: translateY(-2px); }
#bxbl-catalog-root .sb-pagethumb.active { opacity: 1; }
#bxbl-catalog-root .sb-pagethumb.active img { box-shadow: 0 0 0 2px var(--gold), 0 4px 14px rgba(0,0,0,0.45); }
#bxbl-catalog-root .sb-pagethumb.active .sb-pagenum { color: #ffffff; }
@media (max-width: 760px) { #bxbl-catalog-root .specbox-pages { display: none; } }
#bxbl-catalog-root .specbox-stage {
flex: 1 1 auto; min-height: 0; position: relative;
display: flex; align-items: stretch; justify-content: center;
}
#bxbl-catalog-root .specbox-scroll {
flex: 1 1 auto; min-height: 0; width: 100%;
overflow: auto; -webkit-overflow-scrolling: touch;
display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
padding: var(--space-5) calc(52px + var(--space-5)) var(--space-6);
scrollbar-width: thin;
}
#bxbl-catalog-root .specbox-scroll canvas {
max-width: 100%; height: auto;
background: #ffffff;
box-shadow: 0 18px 48px rgba(0,0,0,0.6);
animation: lb-img-in 380ms cubic-bezier(.2,.7,.2,1) both;
}
#bxbl-catalog-root .specbox-loading {
margin: auto;
color: rgba(255,255,255,0.7);
font-family: var(--type-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
/* Docked footer bar — reserves its own row so it never overlaps the spec
page or gets clipped at the viewport bottom. */
#bxbl-catalog-root .specbox-download {
flex: 0 0 auto; align-self: center; z-index: 5;
margin: 12px auto calc(14px + var(--safe-bottom));
background: var(--gold); color: var(--brand);
font-family: var(--type-display); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
padding: 10px 20px; text-decoration: none;
transition: background 160ms ease, transform 160ms ease;
}
#bxbl-catalog-root .specbox-download:hover { background: var(--gold-deep); transform: translateY(-2px); }
#bxbl-catalog-root .lightbox-close svg { width: 20px; height: 20px; }
/* Subtle "click to zoom" affordance on hero */
#bxbl-catalog-root .gallery-hero { cursor: zoom-in; position: relative; }
/* Main-image nav — arrows (desktop hover / always on phones) + image counter */
#bxbl-catalog-root .hero-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 40px; height: 40px; display: grid; place-items: center;
background: rgba(255,255,255,0.82); color: var(--brand);
border: 0; border-radius: 50%; cursor: pointer; z-index: 5;
box-shadow: 0 2px 12px -3px rgba(0,0,0,0.35);
opacity: 0; transition: opacity 150ms ease, background 140ms ease;
}
#bxbl-catalog-root .gallery-hero:hover .hero-nav, #bxbl-catalog-root .hero-nav:focus-visible { opacity: 1; }
#bxbl-catalog-root .hero-nav:hover { background: #ffffff; }
#bxbl-catalog-root .hero-nav.prev { left: 10px; }
#bxbl-catalog-root .hero-nav.next { right: 10px; }
#bxbl-catalog-root .hero-nav svg { width: 18px; height: 18px; }
#bxbl-catalog-root .hero-counter {
position: absolute; bottom: 10px; right: 10px; z-index: 5;
background: rgba(24,66,115,0.82); color: #fff;
font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.1em;
padding: 3px 9px; border-radius: 11px; pointer-events: none;
}
/* Swipe dots — the obvious "there's more, swipe me" cue (phones). */
#bxbl-catalog-root .hero-dots { position: absolute; left: 0; right: 0; bottom: 9px; z-index: 5; display: none; gap: 6px; justify-content: center; }
#bxbl-catalog-root .hero-dot {
width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
background: rgba(255,255,255,0.6); box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
transition: background 140ms ease, transform 140ms ease;
}
#bxbl-catalog-root .hero-dot.on { background: var(--gold); transform: scale(1.3); }
#bxbl-catalog-root .gallery-hero.is-swiping { cursor: grabbing; }
@media (max-width: 720px) {
/* Phones: no arrow buttons — swipe the image instead, with dots as the cue. */
#bxbl-catalog-root .hero-nav { display: none; }
#bxbl-catalog-root .hero-dots { display: flex; }
#bxbl-catalog-root .hero-counter { display: none; } /* dots replace the counter on phones */
}
#bxbl-catalog-root .gallery-hero.placeholder { cursor: default; }
@media (max-width: 720px) {
/* Phones: swipe is the primary way to move between images, so the arrows are
smaller + subtler and tucked at the very edges, vertically centred on the
image (no longer big circles floating in the navy). */
#bxbl-catalog-root .lightbox-nav { width: 38px; height: 38px; background: rgba(255,255,255,0.12); }
#bxbl-catalog-root .lightbox-nav:hover { background: rgba(255,255,255,0.2); }
#bxbl-catalog-root .lightbox-nav.prev { left: 6px; }
#bxbl-catalog-root .lightbox-nav.next { right: 6px; }
#bxbl-catalog-root .lightbox-nav svg { width: 18px; height: 18px; }
#bxbl-catalog-root .lightbox-top { padding: var(--space-3) var(--space-4); }
#bxbl-catalog-root .lightbox-top .lb-kind { font-size: 16px; letter-spacing: 0.05em; }
#bxbl-catalog-root .lightbox-strip { gap: 8px; padding: 10px var(--space-3); justify-content: flex-start; }
#bxbl-catalog-root .lb-thumb { width: 96px; height: 54px; } /* 16:9 */
#bxbl-catalog-root .lb-thumb .lb-thumb-cap { display: none; }
/* Phones: swipe is primary and the arrows are subtle/translucent at the very
edges, so drop the big side padding — the image (and floor plans) now fill
the screen width at maximum size for their aspect ratio instead of floating
small in the navy. Arrows overlay the image edges, standard for a lightbox. */
#bxbl-catalog-root .lightbox-stage { padding: var(--space-3) 8px; }
}
/* ---------- card hover slideshow ---------- */
#bxbl-catalog-root .card-img-cycle {
position: absolute; inset: 0;
background-repeat: no-repeat; background-position: center; background-size: contain;
background-color: #ffffff; /* opaque so a frame never ghosts the one below */
opacity: 0;
transition: opacity 280ms ease;
pointer-events: none;
}
#bxbl-catalog-root .card-img-cycle.on { opacity: 1; }
/* Card image slideshow controls — make multi-image cards OBVIOUS + browsable on
touch. The wrapper is inert (clicks fall through to the card-open anchor);
only the arrows + dots are interactive, and they sit above the anchor (z-3). */
#bxbl-catalog-root .card-imgnav { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#bxbl-catalog-root .card-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 30px; height: 30px; display: grid; place-items: center;
border: 0; border-radius: 999px; background: rgba(15,32,57,0.55); color: #ffffff;
cursor: pointer; pointer-events: auto; opacity: 0;
transition: opacity 140ms ease, background 140ms ease;
}
#bxbl-catalog-root .card-arrow.prev { left: 8px; }
#bxbl-catalog-root .card-arrow.next { right: 8px; }
#bxbl-catalog-root .card-arrow svg { width: 15px; height: 15px; }
#bxbl-catalog-root .card-arrow:hover { background: var(--brand); }
#bxbl-catalog-root .card:hover .card-arrow { opacity: 1; }
#bxbl-catalog-root .card-dots {
position: absolute; left: 0; right: 0; bottom: 8px;
display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
#bxbl-catalog-root .card-dot {
width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.6);
box-shadow: 0 0 2px rgba(0,0,0,0.45); pointer-events: auto; cursor: pointer;
transition: background 140ms ease, transform 140ms ease;
}
#bxbl-catalog-root .card-dot.on { background: #ffffff; transform: scale(1.3); }
/* Touch / no-hover devices: arrows always visible (nothing to hover) + larger
tap targets so the slideshow is obviously browsable on phones. */
@media (hover: none) {
#bxbl-catalog-root .card-arrow { opacity: 1; width: 44px; height: 44px; }
#bxbl-catalog-root .card-arrow svg { width: 18px; height: 18px; }
#bxbl-catalog-root .card-dot { width: 7px; height: 7px; }
}
/* ---------- hero blueprint texture ---------- */
/* Faint architectural-drafting grid behind the hero — drawn purely in CSS. */
#bxbl-catalog-root .hero {
position: relative;
isolation: isolate;
}
#bxbl-catalog-root .hero::before {
content: ""; position: absolute; inset: -16px -16px 0 -16px; z-index: -1;
background-image:
linear-gradient(to right, rgba(24,66,115,0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(24,66,115,0.06) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.0) 85%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.0) 85%);
pointer-events: none;
}
/* ---------- Ken Burns on detail hero ---------- */
#bxbl-catalog-root .gallery-hero-img {
position: absolute; inset: 0;
background: rgba(0,0,0,0.05) center / cover no-repeat;
transform-origin: 55% 65%;
}
#bxbl-catalog-root .gallery-hero-img.is-exterior {
animation: ken-burns 16s cubic-bezier(.4,.0,.6,1) infinite alternate;
}
#bxbl-catalog-root .gallery-hero-img.is-floor {
background-size: contain;
background-color: rgba(0,0,0,0.04);
}
/* Product-shot renders (e.g. UFO) shown WHOLE on white — no crop, no Ken
Burns pan, so the full unit reads cleanly like a studio render. */
#bxbl-catalog-root .gallery-hero-img.is-contain {
background-size: contain;
background-color: #ffffff;
}
@keyframes ken-burns {
from { transform: scale(1) translate(0, 0); }
to { transform: scale(1.055) translate(-0.6%, -1.2%); }
}
@media (prefers-reduced-motion: reduce) {
#bxbl-catalog-root .gallery-hero-img { animation: none !important; }
#bxbl-catalog-root .card-img-cycle { transition: none !important; }
#bxbl-catalog-root .lightbox.open, #bxbl-catalog-root .lightbox-img { animation: none !important; }
}
/* ---------- detail ---------- */
/* Sits BELOW the main navy topbar (top: 64px) so the topbar stays visible
and the navy band carries through the whole experience. */
#bxbl-catalog-root .detail {
position: fixed; top: calc(var(--site-h, 0px) + var(--topbar-h) + var(--safe-top)); left: 0; right: 0; bottom: 0; z-index: 50;
background: var(--bg);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--safe-bottom);
display: none;
}
#bxbl-catalog-root .detail.open {
display: block;
animation: detail-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes detail-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#bxbl-catalog-root .detail-bar {
position: sticky; top: 0; z-index: 5;
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: var(--space-5);
padding: var(--space-3) var(--space-6);
/* Navy band — matches the catalog topbar for a consistent look & feel */
background: var(--brand);
}
/* X close button — naked navy X (no box). Anchored to the right edge of
the detail content area so it lines up with the info column. */
#bxbl-catalog-root .detail-close {
position: absolute;
top: var(--space-5);
right: calc(max(0px, (100vw - var(--detail-w)) / 2));
z-index: 51;
width: 32px; height: 32px;
display: grid; place-items: center;
background: transparent; color: var(--brand);
border: 0; padding: 0; cursor: pointer;
transition: color 140ms ease, transform 140ms ease;
}
#bxbl-catalog-root .detail-close:hover { color: var(--brand-deep); transform: scale(1.1); }
#bxbl-catalog-root .detail-close svg { width: 22px; height: 22px; stroke-width: 2; }
#bxbl-catalog-root .detail:not(.open) .detail-close { display: none; }
/* Detail-bar tools — Share + One-pager, right side of the navy bar */
#bxbl-catalog-root .detail-tools { grid-column: 2 / 4; justify-self: end; display: flex; gap: 8px; padding-right: 46px; }
#bxbl-catalog-root .dtool {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,0.12); color: #ffffff; border: 0;
font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
padding: 8px 12px; cursor: pointer;
transition: background 140ms ease, color 140ms ease, transform 120ms ease;
}
#bxbl-catalog-root .dtool svg { width: 15px; height: 15px; }
#bxbl-catalog-root .dtool:hover { background: var(--gold); color: var(--brand); }
#bxbl-catalog-root .dtool:active { transform: scale(0.96); }
#bxbl-catalog-root .dtool:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) { #bxbl-catalog-root .detail-tools { padding-right: 42px; } #bxbl-catalog-root .dtool span { display: none; } #bxbl-catalog-root .dtool { padding: 8px; } }
/* Share popover (fixed, JS-anchored under the Share button) */
#bxbl-catalog-root .share-pop {
position: fixed; z-index: 360; display: none; width: 244px;
background: #ffffff; color: var(--ink);
box-shadow: 0 16px 40px -12px rgba(0,0,0,0.35), 0 0 0 1px rgba(24,66,115,0.10);
padding: 10px;
}
#bxbl-catalog-root .share-pop.open { display: block; animation: bx-fade 140ms ease-out both; }
#bxbl-catalog-root .share-pop-title { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 2px 6px 8px; }
#bxbl-catalog-root .share-act {
display: flex; align-items: center; gap: 10px; width: 100%;
background: transparent; border: 0; cursor: pointer; text-align: left;
font-family: var(--type-display); font-size: 14px; color: var(--ink); padding: 9px 8px;
transition: background 120ms ease, color 120ms ease;
}
#bxbl-catalog-root .share-act svg { width: 16px; height: 16px; color: var(--brand); flex: 0 0 auto; }
#bxbl-catalog-root .share-act:hover { background: var(--brand); color: #ffffff; }
#bxbl-catalog-root .share-act:hover svg { color: #ffffff; }
#bxbl-catalog-root .share-qr { display: none; margin: 8px auto 2px; width: 132px; height: 132px; background: #ffffff; place-items: center; }
#bxbl-catalog-root .share-qr.show { display: grid; }
#bxbl-catalog-root .share-qr canvas, #bxbl-catalog-root .share-qr img { width: 132px !important; height: 132px !important; display: block; }
#bxbl-catalog-root .share-url { font-family: var(--type-mono); font-size: 9px; line-height: 1.4; color: var(--ink-3); word-break: break-all; padding: 4px 6px 2px; text-align: center; }
/* Toast — brief confirmation (e.g. "Link copied") */
#bxbl-catalog-root .toast {
position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px);
z-index: 400; background: var(--brand); color: #ffffff;
font-family: var(--type-display); font-size: 14px; padding: 11px 20px;
box-shadow: 0 12px 30px -10px rgba(0,0,0,0.5);
opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease;
}
#bxbl-catalog-root .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#bxbl-catalog-root .back { display: flex; align-items: center; gap: var(--space-2); font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
#bxbl-catalog-root .back:hover { color: #ffffff; }
#bxbl-catalog-root .back svg { width: 12px; height: 12px; }
/* On the navy detail bar, crumb + label go light like the topbar */
#bxbl-catalog-root .detail-bar .crumb { color: rgba(255,255,255,0.55); }
#bxbl-catalog-root .detail-bar .crumb b { color: #ffffff; }
#bxbl-catalog-root .detail-bar .label { color: rgba(255,255,255,0.55); }
#bxbl-catalog-root .detail-grid {
max-width: var(--detail-w);
margin: var(--space-7) auto var(--space-8);
display: grid; grid-template-columns: 1.4fr 1fr;
gap: var(--space-7);
/* Default grid item stretch — combined with align-self: start on the
gallery column (which keeps it at natural height) and a flex-column
info side that pushes its actions row to the bottom, the right-column
bottom lines up with the gallery's spec-strip. */
}
#bxbl-catalog-root .detail-info { display: flex; flex-direction: column; min-width: 0; }
/* ===== Paolo detail-page draft: Downloads row (applicable only) ===== */
#bxbl-catalog-root .detail-downloads { margin-top: var(--space-3); }
#bxbl-catalog-root .detail-downloads .dl-label { display: block; margin-bottom: 6px;
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-3); }
#bxbl-catalog-root .detail-downloads .dl-row { display: grid; grid-template-columns: repeat(5, 1fr);
gap: 6px; margin-bottom: 6px; }
#bxbl-catalog-root .detail-downloads .dl-tile { display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 2px; min-height: 46px; padding: 6px 4px; text-align: center;
border: 1px solid rgba(0,0,0,0.1); background: #fff; color: var(--ink); text-decoration: none;
font-family: var(--type-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
cursor: pointer; transition: border-color 120ms ease; }
#bxbl-catalog-root .detail-downloads .dl-tile:hover { border-color: var(--brand); }
#bxbl-catalog-root .detail-downloads .dl-tile .dl-kind { color: var(--ink-3); font-size: 8px; }
#bxbl-catalog-root .detail-downloads .dl-tile.is-disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }
@media (max-width: 720px) {
#bxbl-catalog-root .detail-downloads .dl-row { grid-template-columns: repeat(3, 1fr); }
/* On phones the detail page scrolls as one — don't pin the top bar. */
#bxbl-catalog-root .detail-bar { position: static; top: auto; }
}
@media (max-width: 980px) {
#bxbl-catalog-root .detail-grid { grid-template-columns: 1fr; }
#bxbl-catalog-root .gallery-col { position: static; top: auto; }
#bxbl-catalog-root .shell { grid-template-columns: 1fr; }
#bxbl-catalog-root .rail { position: static; height: auto; border-right: 0; }
/* Mobile: the detail / compare / project read as a normal in-flow page that
scrolls with the rest of the page — NOT a pinned full-screen modal. The
catalog background is hidden while one is open so it's a clean page. */
#bxbl-catalog-root.in-overlay .billboard { display: none; }
#bxbl-catalog-root.in-overlay .shell { display: none; }
#bxbl-catalog-root .detail, #bxbl-catalog-root .compare, #bxbl-catalog-root .tool { position: static; top: auto; bottom: auto; overflow: visible; }
}
/* Gallery — vertical film strip on the LEFT of the big picture window (per Paolo,
future-proofs drag-and-drop into the hero). Spec line overlays as a footer band. */
/* One unified panel: thumb rail + hero share a single border + background,
divided by a hairline, so they read as one square. */
/* Left column wrapper = the gallery box + its caption below.
Sticky on desktop so the whole set pins while specs/pricing scroll. */
#bxbl-catalog-root .gallery-col {
position: sticky; top: var(--space-6);
/* Stretch to match the info column height so both bottoms align. */
align-self: stretch;
display: flex; flex-direction: column;
min-width: 0;
}
#bxbl-catalog-root .gallery {
flex: 1;
min-height: 0; /* allow the grid to size to the info
column, not to its own tall content */
position: relative; /* anchor for the absolute thumb rail */
display: grid;
grid-template-columns: 128px 1fr; /* wider rail so 16:9 thumbs stay legible */
grid-template-rows: minmax(0, 1fr) auto; /* hero row can shrink below the
thumbnail rail's content height so a
long rail scrolls instead of
stretching the whole gallery */
grid-template-areas:
"thumbs hero"
"thumbs strip";
gap: 0;
background: var(--surface);
}
#bxbl-catalog-root .gallery-thumbs { grid-area: thumbs; }
#bxbl-catalog-root .gallery-hero { grid-area: hero; }
#bxbl-catalog-root .gallery .spec-strip { grid-area: strip; }
/* Compact gallery (e.g. UFO): keep the hero a fixed, tidy ratio instead of
stretching to a long copy column. The gallery is sticky, so a long info
column simply scrolls beside it, and the thumb rail scrolls within. */
#bxbl-catalog-root .gallery-col.compact-gallery { align-self: start; }
#bxbl-catalog-root .gallery-col.compact-gallery .gallery { flex: 0 0 auto; grid-template-rows: auto auto; }
#bxbl-catalog-root .gallery-col.compact-gallery .gallery-hero { aspect-ratio: 16 / 9; min-height: 0; }
/* Desktop two-column: stretch the gallery to the info column's height and pin the
orange spec strip to the BOTTOM, so the orange strip (left) lines up with the
blue Spec Sheet + orange Add to Project bars (right). The hero stays 16:9 at the
top; any leftover space is clean white gallery background. */
@media (min-width: 981px) {
#bxbl-catalog-root .gallery-col.compact-gallery { align-self: stretch; }
#bxbl-catalog-root .gallery-col.compact-gallery .gallery { flex: 1 1 auto; grid-template-rows: 1fr auto; }
#bxbl-catalog-root .gallery-col.compact-gallery .gallery-hero { align-self: start; }
}
#bxbl-catalog-root .gallery-thumbs {
display: flex; flex-direction: column;
gap: var(--space-2);
padding: var(--space-2);
overflow-y: auto;
scrollbar-width: thin;
background: rgba(0,0,0,0.02);
/* Absolutely positioned over the reserved 96px grid column so a long rail
(e.g. UFO's 10 thumbs) SCROLLS and never stretches the hero. The hero now
always matches the info column, like every other detail page. Reset to
in-flow on phones (rail goes horizontal — see the ≤720px rule). */
position: absolute; left: 0; top: 0; bottom: 0; width: 128px;
box-sizing: border-box;
}
/* Roller feel — ONLY when the rail actually overflows (e.g. UFO's 10 thumbs).
JS adds .is-scrollable so short rails (2–4 thumbs) aren't faded for nothing.
Thumbnails snap as you scroll and fade at the top/bottom edges so it reads
as a windowed reel with more above/below. */
#bxbl-catalog-root .gallery-thumbs.is-scrollable {
scroll-snap-type: y proximity;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
#bxbl-catalog-root .gallery-thumbs.is-scrollable .thumb { scroll-snap-align: start; }
#bxbl-catalog-root .thumb {
position: relative;
aspect-ratio: 16/9; /* unified 16:9 image frame */
background: #ffffff center/contain no-repeat; /* contain so floor plans aren't cropped */
border: 0;
cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease;
flex-shrink: 0;
padding: 0;
}
/* Inactive thumbs are slightly dimmed; the active one (and any hovered one)
is full strength. No borders — clean and simple per the style guide. */
#bxbl-catalog-root .thumb { opacity: 0.55; transition: transform 160ms ease, opacity 160ms ease; }
#bxbl-catalog-root .thumb:hover { transform: translateX(2px); opacity: 1; }
#bxbl-catalog-root .thumb[aria-pressed="true"] { opacity: 1; }
/* Exterior thumbs use cover so the render fills the box; floor plans use contain. */
#bxbl-catalog-root .thumb.is-exterior { background-size: cover; }
#bxbl-catalog-root .thumb.is-floor { background-size: contain; background-color: rgba(0,0,0,0.04); }
#bxbl-catalog-root .thumb.is-contain { background-size: contain; background-color: #ffffff; }
/* Video thumb: a play badge over the poster frame. */
#bxbl-catalog-root .thumb.is-video .thumb-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 30px; height: 30px; display: grid; place-items: center;
background: rgba(24,66,115,0.82); color: #fff; font-size: 11px; padding-left: 2px;
border-radius: 50%; pointer-events: none;
}
/* Inline video shown in the detail hero (e.g. the UFO fold clip).
Shown WHOLE (contain) on white so the baked-in BOXABL logo in the
bottom-right is never cropped — the clip's white studio backdrop
blends with the letterbox so there are no visible bars. */
#bxbl-catalog-root .gallery-hero-video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; background: #fff; z-index: 1; display: block;
}
/* Floor-plan animations show WHOLE (never cropped) on white, like a static plan. */
#bxbl-catalog-root .gallery-hero-video.is-floor { object-fit: contain; background: #fff; }
#bxbl-catalog-root .thumb-label {
position: absolute; left: 0; right: 0; bottom: 0;
font-family: var(--type-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
color: #ffffff; padding: 4px 6px;
/* Navy caption bar — matches the navy spec strip and action buttons */
background: var(--brand);
text-align: left;
}
#bxbl-catalog-root .thumb.is-floor .thumb-label { background: var(--brand); }
#bxbl-catalog-root .gallery-hero {
position: relative;
/* Hero stretches to fill its grid cell so it scales up to meet the
navy strip flush with no gap. */
align-self: stretch;
aspect-ratio: auto;
min-height: 320px;
background: #ffffff center/cover no-repeat;
border: 1px solid var(--brand);
overflow: hidden;
}
#bxbl-catalog-root .gallery-hero.placeholder {
background:
repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,0.04) 14px 15px),
rgba(0,0,0,0.05);
display: grid; place-items: center; gap: var(--space-3);
}
#bxbl-catalog-root .gallery-hero.placeholder .box-mark { width: 96px; height: 96px; opacity: 0.65; border-radius: 18px; }
#bxbl-catalog-root .gallery-hero.placeholder span { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-3); text-transform: uppercase; }
/* Gold spec strip — under the hero image only, locked to 41px so it
matches the Add to Project button color on the right column. */
#bxbl-catalog-root .spec-strip {
height: 41px; padding: 0 16px;
background: var(--gold);
color: var(--brand);
font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
display: flex; align-items: center; justify-content: center; gap: 14px;
}
#bxbl-catalog-root .spec-strip .sep { opacity: 0.55; }
#bxbl-catalog-root .detail-info h2 {
margin: 0 0 var(--space-3) 0;
font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1;
/* Allow long names to wrap to a second line instead of truncating. */
white-space: normal; overflow: visible; text-overflow: clip;
word-break: normal;
/* Reserve room on the right so the title doesn't run under the X. */
padding-right: 56px;
}
#bxbl-catalog-root .detail-info .lede { color: var(--ink-2); max-width: 50ch; margin-bottom: var(--space-6); }
/* Large logo title (e.g. UFO) used in place of the text h2. */
#bxbl-catalog-root .detail-logo {
display: block; max-width: 280px; max-height: 96px;
width: auto; height: auto; object-fit: contain;
margin: 0 0 var(--space-3); padding-right: 56px;
}
/* ----- Bottom-right media strip: YouTube parts + the astronaut clip ----- */
#bxbl-catalog-root .detail-media { margin-top: auto; padding-top: var(--space-5); }
#bxbl-catalog-root .detail-media .dm-label {
display: block; margin-bottom: var(--space-2);
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-3);
}
#bxbl-catalog-root .detail-media .dm-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
#bxbl-catalog-root .detail-media .dm-card {
position: relative; flex: 1 1 0; min-width: 110px; aspect-ratio: 16 / 9;
border: 0; padding: 0; cursor: pointer; overflow: hidden;
background: var(--brand) center/cover no-repeat;
box-shadow: 0 8px 24px -14px rgba(0,0,0,0.5);
transition: transform 160ms ease, box-shadow 160ms ease;
}
#bxbl-catalog-root .detail-media .dm-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(0,0,0,0.55); }
#bxbl-catalog-root .detail-media .dm-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 38px; height: 38px; display: grid; place-items: center;
background: rgba(24,66,115,0.85); border-radius: 50%; pointer-events: none;
}
#bxbl-catalog-root .detail-media .dm-play::before {
content: ""; width: 0; height: 0; margin-left: 3px;
border-style: solid; border-width: 8px 0 8px 13px;
border-color: transparent transparent transparent #fff;
}
#bxbl-catalog-root .detail-media .dm-cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 5px 7px; background: var(--brand);
font-family: var(--type-mono); font-size: 9px; letter-spacing: 0.1em;
text-transform: uppercase; color: #fff; text-align: left;
}
/* Price block sits directly under the lede now (spec table removed — its
data lives in the black caption strip below the gallery). */
/* Price block stretches to fill remaining vertical space in the info
column so the actions-row at its bottom edge lines up with the navy
spec strip across in the gallery column. */
#bxbl-catalog-root .price-block {
margin-top: var(--space-4);
/* No horizontal padding: price headline, order row, and action buttons
align flush with the eyebrow/title/lede so the whole info column reads
as one invisible box whose left/right edges match the gallery box. */
padding: var(--space-5) 0 0;
background: var(--surface);
flex: 1 1 auto;
display: flex; flex-direction: column;
}
#bxbl-catalog-root .price-block .actions-row { margin-top: auto; }
#bxbl-catalog-root [hidden] { display: none !important; }
/* "Big and clean" developer headline — Unit price + Per sq ft side by side */
#bxbl-catalog-root .price-headline {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
margin-bottom: var(--space-4); padding-bottom: var(--space-4);
}
#bxbl-catalog-root .price-headline .cell {
display: flex; flex-direction: column; gap: 6px;
}
#bxbl-catalog-root .price-headline .cell.right { text-align: right; align-items: flex-end; }
#bxbl-catalog-root .price-headline .big {
font-family: var(--type-display); font-weight: 600;
font-size: clamp(28px, 4vw, 40px); line-height: 1;
color: var(--ink); letter-spacing: -0.02em;
}
#bxbl-catalog-root .price-headline .small {
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.16em;
color: var(--ink-3); text-transform: uppercase;
}
@media (max-width: 480px) {
#bxbl-catalog-root .price-headline { grid-template-columns: 1fr; gap: var(--space-4); }
#bxbl-catalog-root .price-headline .cell.right { text-align: left; align-items: flex-start; }
}
/* Order quantity — label + stepper + hint on one row; live total sits at
the far right with the per-unit price scaled up. Everything centered on
the same baseline so the row reads cleanly. */
/* Pricing clarity note under the headline — small, muted, non-intrusive so it
informs without competing with the big price. */
#bxbl-catalog-root .price-note {
margin: 0 0 var(--space-2);
font-family: var(--type-mono); font-size: 11px; line-height: 1.5;
letter-spacing: 0.02em; color: var(--ink-3);
}
/* Minimum-order hint — its own full-width row beneath the stepper + total. */
#bxbl-catalog-root .oq-hint {
grid-column: 1 / -1;
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--ink-3);
}
#bxbl-catalog-root .order-qty {
margin-top: var(--space-4);
margin-bottom: var(--space-6); /* breathing room before the spec thumbnail */
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: var(--space-3) var(--space-4);
}
#bxbl-catalog-root .order-qty .oq-label {
font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase; font-weight: 700; color: var(--brand);
}
#bxbl-catalog-root .order-qty .oq-stepper {
display: inline-flex; align-items: stretch;
background: var(--surface);
}
#bxbl-catalog-root .order-qty .oq-stepper button {
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--brand); color: #ffffff;
border: 0; cursor: pointer;
font-family: var(--type-mono); font-size: 18px; line-height: 1;
transition: background 140ms ease;
}
#bxbl-catalog-root .order-qty .oq-stepper button:hover { background: var(--brand-deep); }
#bxbl-catalog-root .order-qty .oq-stepper button:disabled { background: rgba(24,66,115,0.35); cursor: not-allowed; }
#bxbl-catalog-root .order-qty .oq-stepper input {
width: 72px; height: 36px;
border: 0; background: #ffffff;
text-align: center;
font-family: var(--type-display); font-size: 18px; font-weight: 600; color: var(--ink);
-moz-appearance: textfield;
}
#bxbl-catalog-root .order-qty .oq-stepper input::-webkit-outer-spin-button, #bxbl-catalog-root .order-qty .oq-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#bxbl-catalog-root .order-qty .oq-stepper input:focus { outline: 2px solid var(--gold); outline-offset: 0; }
/* Live total — recomputes as the stepper changes */
#bxbl-catalog-root .order-qty .oq-total {
justify-self: end; text-align: right;
display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
#bxbl-catalog-root .order-qty .ot-label {
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-3);
}
#bxbl-catalog-root .order-qty .ot-value {
font-family: var(--type-display); font-size: 22px; font-weight: 600; line-height: 1; color: var(--ink);
}
@media (max-width: 720px) {
/* Stack the live total onto its own row so the big "$X,XXX,XXX" value can't
overflow the info column on phones (was spilling ~7px off the right). */
#bxbl-catalog-root .order-qty { grid-template-columns: auto 1fr; }
#bxbl-catalog-root .order-qty .oq-total { grid-column: 1 / -1; justify-self: end; flex-direction: row; align-items: baseline; gap: 8px; margin-top: 2px; }
}
/* Action row — two equal columns inside the info column. Spec teaser
(with PDF preview thumb above) on the left, Add to Project on the
right. Both end with a 41px navy bar of equal width that aligns with
the spec strip across in the gallery column. */
#bxbl-catalog-root .actions-row {
margin-top: var(--space-5);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
align-items: end; /* both bars sit flush at the bottom, aligned with each other */
}
#bxbl-catalog-root .actions-row .spec-teaser, #bxbl-catalog-root .actions-row .spec-teaser.is-pending { min-width: 0; max-width: none; width: 100%; }
#bxbl-catalog-root .actions-row-btn {
width: 100%;
height: 41px;
padding: 0 var(--space-4);
align-self: end;
justify-content: center;
font-size: 11px; letter-spacing: 0.14em;
}
/* Primary CTA — gold so "Add to project" stands out against the navy
spec-strip + Spec Sheet bar. Higher specificity than .btn-primary. */
#bxbl-catalog-root .actions-row-btn.btn-primary { background: var(--gold); color: var(--brand); }
#bxbl-catalog-root .actions-row-btn.btn-primary:hover { background: var(--gold-deep); color: var(--brand); }
/* Spec sheet teaser — landscape card showing the actual PDF page-1 preview */
#bxbl-catalog-root .spec-teaser {
display: flex; flex-direction: column;
background: #ffffff; text-decoration: none; color: inherit;
cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease;
overflow: hidden;
}
#bxbl-catalog-root .spec-teaser:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0,0,0,0.35); }
/* Pending state — polished teaser, NOT a faded placeholder. Same navy
footer + gold pill treatment as the "Render · Jun 9" badge for visual
consistency across the site. */
#bxbl-catalog-root .spec-teaser.is-pending { cursor: default; opacity: 1; }
#bxbl-catalog-root .spec-teaser.is-pending:hover { transform: none; box-shadow: none; }
#bxbl-catalog-root .st-thumb {
/* Small spec / PDF page-1 preview — draws the developer's eye to the Spec
Sheet. Kept small (capped height) so it doesn't crowd the Order Qty row;
the navy bar sits flush beneath it, aligned with Add to Project. */
width: 100%;
aspect-ratio: 13 / 10; /* matches the 520×402 spec-thumb so the page-1 preview isn't cropped into a band */
max-height: 132px;
background: var(--surface) center top / cover no-repeat;
}
/* Pending-state thumb — subtle navy tint with the gold "Jun 9" pill in the center */
#bxbl-catalog-root .st-thumb-empty {
background: rgba(24,66,115,0.04);
display: grid; place-items: center;
}
#bxbl-catalog-root .st-pending-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 10px;
background: var(--gold); color: var(--brand);
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; font-weight: 600;
}
#bxbl-catalog-root .st-pending-pill svg { width: 12px; height: 12px; }
#bxbl-catalog-root .st-meta {
display: flex; align-items: center; justify-content: space-between;
height: 41px; /* match .actions-row-btn exactly */
padding: 0 var(--space-3);
background: var(--brand); color: #ffffff;
min-width: 0; gap: var(--space-2);
}
#bxbl-catalog-root .st-kicker {
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(255,255,255,0.65);
}
#bxbl-catalog-root .st-cta {
font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase; color: #ffffff; font-weight: 600;
}
/* Pending keeps the navy footer like the active state — consistent + polished. */
@media (max-width: 540px) {
/* Stack the action row on small phones so each control gets full width. */
#bxbl-catalog-root .actions-row { grid-template-columns: 1fr; gap: var(--space-4); }
/* Full-width spec preview: show the WHOLE page-1 (no height cap, natural
13:10 ratio) so the floor plan reads clearly instead of a cropped band. */
#bxbl-catalog-root .st-thumb { max-height: none; aspect-ratio: 13 / 10; }
/* Taller, touch-friendly action bars (≥44px Apple target) — keep the Spec
Sheet bar and Add-to-project identical so they stay visually paired. */
#bxbl-catalog-root .actions-row-btn, #bxbl-catalog-root .st-meta { height: 48px; }
#bxbl-catalog-root .actions-row-btn, #bxbl-catalog-root .st-cta { font-size: 12px; }
}
#bxbl-catalog-root .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
/* Solid-fill buttons only (style-guide palette). No outlines, no ghost
buttons, no borders. Hover deepens the fill from the same palette. */
#bxbl-catalog-root .btn {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-5);
font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 600;
border: 0; cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
#bxbl-catalog-root .btn-primary { background: var(--brand); color: #ffffff; }
#bxbl-catalog-root .btn-primary:hover { background: var(--brand-deep); color: #ffffff; }
#bxbl-catalog-root .btn-secondary { background: var(--gold); color: var(--brand); }
#bxbl-catalog-root .btn-secondary:hover { background: var(--gold-deep); color: var(--brand); }
/* ---------- footer ---------- */
/* Boxabl-blue footer — brand close, white text, gold link hover */
#bxbl-catalog-root footer { padding: var(--space-7); padding-bottom: calc(var(--space-7) + var(--safe-bottom)); background: var(--brand); color: rgba(255,255,255,0.7); font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
#bxbl-catalog-root footer a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 0; color: #ffffff; }
#bxbl-catalog-root footer a:hover { color: var(--gold); }
/* ---------- utility ---------- */
/* ============================================================
RESPONSIVE — desktop / tablet / mobile
Breakpoints: 1200 / 980 / 720 / 480
============================================================ */
/* Slightly tighter padding on smaller laptops */
@media (max-width: 1200px) {
#bxbl-catalog-root main { padding: var(--space-6) var(--space-6) var(--space-7); }
#bxbl-catalog-root .rail { padding: var(--space-6) var(--space-5); }
/* Keep topbar columns aligned with the (now narrower) content padding */
#bxbl-catalog-root .topbar-right { padding-right: var(--space-6); }
#bxbl-catalog-root { --rail-w: 260px; }
}
/* Tablet — rail moves above main, becomes horizontal scroll strip of categories */
@media (max-width: 980px) {
#bxbl-catalog-root .topbar {
grid-template-columns: 1fr auto;
padding: var(--safe-top) calc(var(--space-4) + var(--safe-right)) 0 calc(var(--space-4) + var(--safe-left));
height: calc(var(--topbar-h) + var(--safe-top));
}
/* Overlay top offset is handled by the --topbar-h variable (56px on mobile)
+ safe-top, set on .detail/.compare/.tool directly. */
#bxbl-catalog-root .topbar-mid { display: none; }
#bxbl-catalog-root .topbar-right { gap: 6px; padding-right: 0; }
#bxbl-catalog-root .topbar-right .label:not(:first-child) { display: none; }
#bxbl-catalog-root .brand { padding-left: 0; }
/* Compact builder-tool buttons so the topbar fits on phones */
#bxbl-catalog-root .tb-action { padding: 7px 9px; font-size: 10px; letter-spacing: 0.06em; }
#bxbl-catalog-root .shell {
grid-template-columns: 1fr;
min-height: auto;
}
#bxbl-catalog-root .rail {
position: static;
height: auto;
/* Clip horizontally so the cat-list can scroll within. min-width:0 lets the grid
column rule the size; overflow-x: hidden traps the horizontal overflow. */
overflow-x: hidden;
overflow-y: visible;
border-right: 0;
padding: var(--space-5) var(--space-4);
}
#bxbl-catalog-root .rail-section + .rail-section { margin-top: var(--space-5); }
/* All categories visible at once — chips WRAP into a few tidy rows (≈3), no
horizontal scrolling. */
/* Wrapping chips, content-width: all categories visible, no scroll, readable
(a 4-col grid is too narrow at phone width and breaks the words). Chips are
centered so leftover row space is balanced, not a ragged right gap. */
#bxbl-catalog-root .cat-list {
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
gap: 8px;
margin: 0;
padding: var(--space-1) 0 var(--space-2);
width: 100%; min-width: 0;
}
#bxbl-catalog-root .cat-list li { flex: 0 0 auto; }
/* Phones: swap the two longest names for short labels (Garden Apts / Single
Fam). */
#bxbl-catalog-root .cat-name .cn-full { display: none; }
#bxbl-catalog-root .cat-name .cn-short { display: inline; }
/* Bordered "card" chips (navy text, count badge), active = gold. */
#bxbl-catalog-root .cat-btn {
border: 1.5px solid #e2e6ec;
background: #ffffff;
color: var(--brand);
padding: 8px 11px;
border-radius: 11px;
white-space: nowrap;
font-family: var(--type-display); font-weight: 600;
font-size: 13px;
display: inline-flex; align-items: center; gap: 6px;
line-height: 1;
transition: border-color 120ms ease, background 120ms ease;
}
#bxbl-catalog-root .cat-btn:hover { border-color: #cfd5de; color: var(--brand); }
#bxbl-catalog-root .cat-btn[aria-pressed="true"] {
background: var(--gold); border-color: var(--gold); color: var(--brand);
margin: 0; width: auto; border-radius: 11px;
}
#bxbl-catalog-root .cat-idx { display: none; }
/* Count → small rounded badge, like the reference. */
#bxbl-catalog-root .cat-count {
flex: 0 0 auto;
font-family: var(--type-mono); font-size: 11px; font-weight: 600;
color: var(--ink-2); opacity: 1;
background: #eef1f5; padding: 2px 6px; border-radius: 999px; line-height: 1.4;
}
#bxbl-catalog-root .cat-btn[aria-pressed="true"] .cat-count {
background: rgba(0,0,0,0.12); color: var(--brand);
}
/* Filters wrap in a row instead of stacking */
#bxbl-catalog-root .filters {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-4) var(--space-5);
}
#bxbl-catalog-root .filter { min-width: 140px; flex: 1; }
#bxbl-catalog-root main { padding: var(--space-5) var(--space-4) var(--space-7); }
#bxbl-catalog-root .hero-meta .stat .n { font-size: 30px; }
#bxbl-catalog-root .grid {
gap: var(--space-4);
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* Detail page — stack and reduce padding */
#bxbl-catalog-root .detail-grid {
grid-template-columns: 1fr;
gap: var(--space-5);
margin: var(--space-5) auto var(--space-7);
padding: 0 var(--space-4);
}
#bxbl-catalog-root .detail-bar {
grid-template-columns: auto 1fr auto;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
}
/* Hide the "Spec · 0.1" text on mobile but keep the Project button visible */
#bxbl-catalog-root .detail-bar .label { display: none; }
#bxbl-catalog-root .detail-bar .crumb { display: none; }
#bxbl-catalog-root .detail-info h2 { font-size: clamp(28px, 6vw, 40px); }
#bxbl-catalog-root footer { padding: var(--space-5) var(--space-4); gap: var(--space-2); font-size: 9px; }
}
/* Phones — single-column grid, simplified cards, tighter type */
@media (max-width: 720px) {
#bxbl-catalog-root .brand-mark { font-size: 18px; }
#bxbl-catalog-root .topbar-right .label { font-size: 10px; letter-spacing: 0.1em; }
#bxbl-catalog-root .hero h1 { font-size: clamp(26px, 7vw, 34px); }
#bxbl-catalog-root .hero-meta { gap: var(--space-4); }
#bxbl-catalog-root .hero-meta .stat .n { font-size: 30px; }
#bxbl-catalog-root .grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
#bxbl-catalog-root .card-name { font-size: 20px; }
#bxbl-catalog-root .card-specs { gap: var(--space-3); }
#bxbl-catalog-root .card-specs .s .v { font-size: 14px; }
/* Phones — vertical strip becomes horizontal under the hero for finger reach */
#bxbl-catalog-root .gallery {
grid-template-columns: 1fr;
/* Explicit 3 auto rows for the 3 stacked areas. Without this the gallery
inherited a 2-row template (or a minmax(0,1fr) hero row) that could
collapse the hero to zero height on Safari — the main image vanished. */
grid-template-rows: auto auto auto;
grid-template-areas: "thumbs" "hero" "strip";
gap: 0; /* orange spec strip sits flush under the image */
}
/* Keep the hero a true 16:9 that fills the column width. (Do NOT add a
min-height here — combined with aspect-ratio it back-computes the WIDTH
and the image overflows the screen.) The explicit grid rows above stop it
from collapsing. */
#bxbl-catalog-root .gallery-col.compact-gallery .gallery-hero, #bxbl-catalog-root .gallery-hero { aspect-ratio: 16 / 9; min-height: 0; width: 100%; }
#bxbl-catalog-root .gallery-thumbs {
/* Phones: the main image is swipeable (with a "1/N" counter), so the
thumbnail rail is redundant — hide it for a cleaner detail page. */
display: none;
position: static; width: auto; /* back in flow for the horizontal rail */
flex-direction: row;
max-height: none;
overflow-x: auto; overflow-y: hidden;
padding-bottom: var(--space-1);
/* Horizontal rail: snap each thumb to the left edge AND fade the right edge,
so the right-most tile no longer looks like a half-cut button. */
scroll-snap-type: x proximity;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}
#bxbl-catalog-root .gallery-thumbs .thumb { width: 104px; aspect-ratio: 16/9; scroll-snap-align: start; }
#bxbl-catalog-root .spec-strip { font-size: 10px; padding: 10px 12px; gap: 10px; }
/* Bigger, touch-friendly qty stepper (≥44px) on phones. */
#bxbl-catalog-root .order-qty .oq-stepper button { width: 44px; height: 44px; font-size: 20px; }
#bxbl-catalog-root .order-qty .oq-stepper input { height: 44px; }
#bxbl-catalog-root .price-block { padding: var(--space-4) 0 0; flex: 0 0 auto; }
/* On phones the info column is stacked (no tall gallery beside it to fill),
so cancel the desktop "push actions to the bottom" rule — otherwise the
Spec Sheet / Add-to-project bars float far below the Order Qty leaving a
big empty void. Let them follow the qty row with normal spacing. */
#bxbl-catalog-root .price-block .actions-row { margin-top: var(--space-5); }
#bxbl-catalog-root .price-block .msrp { font-size: 28px; }
#bxbl-catalog-root .actions { width: 100%; }
#bxbl-catalog-root .actions .btn { flex: 1; justify-content: center; padding: var(--space-3) var(--space-4); }
}
/* Small phones — single-column catalog, stacked actions, smaller details */
@media (max-width: 480px) {
#bxbl-catalog-root main { padding: var(--space-4); }
#bxbl-catalog-root .rail { padding: var(--space-4); }
#bxbl-catalog-root .filters { flex-direction: column; gap: var(--space-3); }
#bxbl-catalog-root .filter { min-width: 0; width: 100%; }
#bxbl-catalog-root .grid { grid-template-columns: 1fr; }
#bxbl-catalog-root .card-img { aspect-ratio: 16 / 9; }
#bxbl-catalog-root .hero-meta { gap: var(--space-3) var(--space-4); }
#bxbl-catalog-root .hero-meta .stat .n { font-size: 28px; }
#bxbl-catalog-root .hero-meta .stat .l { font-size: 9px; }
#bxbl-catalog-root .gallery-thumbs .thumb { width: 88px; }
#bxbl-catalog-root .gallery-hero { aspect-ratio: 16 / 9; }
#bxbl-catalog-root .actions { flex-direction: column; }
#bxbl-catalog-root .actions .btn { width: 100%; }
/* Stack the spec-sheet preview above the full-width "Add to project" CTA so
neither gets squeezed into a half-width sliver on small phones. */
#bxbl-catalog-root .actions-row { grid-template-columns: 1fr; }
#bxbl-catalog-root footer { flex-direction: column; align-items: flex-start; }
}
/* ---------- compare tray (floating bottom bar) ---------- */
#bxbl-catalog-root .compare-tray {
position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%);
z-index: 40;
display: none;
align-items: center; gap: var(--space-4);
padding: 12px 16px;
background: var(--ink); color: var(--bg);
box-shadow: 0 20px 40px rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.06);
max-width: calc(100vw - 32px);
}
#bxbl-catalog-root .compare-tray.open {
display: flex;
animation: tray-in 260ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes tray-in {
from { opacity: 0; transform: translate(-50%, 24px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
#bxbl-catalog-root .ct-label {
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.6); white-space: nowrap;
}
#bxbl-catalog-root .ct-thumbs { display: flex; gap: 8px; }
#bxbl-catalog-root .ct-thumb {
width: 48px; height: 27px; /* 16:9 */
background: center / cover no-repeat rgba(255,255,255,0.12);
position: relative; flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.08);
}
#bxbl-catalog-root .ct-thumb-remove {
position: absolute; top: -7px; right: -7px;
width: 18px; height: 18px;
background: var(--bg); color: var(--ink);
border-radius: 50%;
display: grid; place-items: center;
font-size: 11px; cursor: pointer;
border: 0; padding: 0;
line-height: 1;
}
#bxbl-catalog-root .ct-cta {
background: var(--warn); color: var(--bg);
padding: 10px 18px;
font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
border: 0; cursor: pointer;
transition: background 160ms ease;
white-space: nowrap;
}
#bxbl-catalog-root .ct-cta:hover:not(:disabled) { background: var(--gold-deep); }
#bxbl-catalog-root .ct-cta:disabled { opacity: 0.45; cursor: not-allowed; }
#bxbl-catalog-root .ct-clear {
background: transparent; color: rgba(255,255,255,0.55);
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
border: 0; cursor: pointer; padding: 6px 10px;
}
#bxbl-catalog-root .ct-clear:hover { color: var(--bg); }
/* Phones: the tray was overflowing the right edge because its flex children
don't shrink. Span the width, drop the label, and shrink the CTA so the
thumbs + "Compare" button always fit on screen. */
@media (max-width: 720px) {
#bxbl-catalog-root .compare-tray {
left: 10px; right: 10px; transform: none; max-width: none;
bottom: calc(12px + var(--safe-bottom));
gap: 8px; padding: 8px 10px; box-sizing: border-box;
}
#bxbl-catalog-root .compare-tray.open { animation: tray-in-m 240ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes tray-in-m { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#bxbl-catalog-root .ct-label { display: none; }
#bxbl-catalog-root .ct-cta { flex: 1 1 auto; text-align: center; padding: 10px 8px; font-size: 10px; letter-spacing: 0.08em; }
#bxbl-catalog-root .ct-clear { padding: 6px; }
}
/* ---------- compare overlay (fullscreen) ---------- */
#bxbl-catalog-root .compare {
position: fixed; top: calc(var(--site-h, 0px) + var(--topbar-h) + var(--safe-top)); left: 0; right: 0; bottom: 0; z-index: 60;
background: var(--bg);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--safe-bottom);
display: none;
}
#bxbl-catalog-root .compare.open {
display: block;
animation: detail-in 280ms cubic-bezier(.2,.7,.2,1) both;
}
#bxbl-catalog-root .compare-bar {
position: sticky; top: 0; z-index: 5;
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: var(--space-5);
padding: var(--space-3) var(--space-6);
/* Navy band — matches detail bar + tool bar for consistent chrome */
background: var(--brand);
}
#bxbl-catalog-root .compare-bar .back { color: rgba(255,255,255,0.7); }
#bxbl-catalog-root .compare-bar .back:hover { color: #ffffff; }
#bxbl-catalog-root .compare-bar .crumb { color: rgba(255,255,255,0.55); }
#bxbl-catalog-root .compare-bar .crumb b { color: #ffffff; }
#bxbl-catalog-root .compare-bar .label { color: rgba(255,255,255,0.55); }
#bxbl-catalog-root .compare-grid {
max-width: 1400px; margin: var(--space-7) auto var(--space-8); padding: 0 var(--space-6);
display: grid;
grid-template-columns: repeat(var(--compare-cols, 2), minmax(0, 1fr));
gap: var(--space-6);
}
@media (max-width: 720px) {
#bxbl-catalog-root .compare-grid { grid-template-columns: 1fr; padding: 0 var(--space-4); }
}
#bxbl-catalog-root .compare-col {
display: flex; flex-direction: column;
background: var(--surface);
}
#bxbl-catalog-root .compare-col-img {
aspect-ratio: 16/9;
background: center / cover no-repeat rgba(0,0,0,0.05);
}
#bxbl-catalog-root .compare-col-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
#bxbl-catalog-root .compare-col-name { font-family: var(--type-display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; margin: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bxbl-catalog-root .compare-col-cat { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); text-transform: uppercase; }
#bxbl-catalog-root .compare-col-blurb { color: var(--ink-2); font-size: 13px; line-height: 1.55; margin: var(--space-2) 0 var(--space-3); }
#bxbl-catalog-root .compare-rows { margin-top: var(--space-2); }
#bxbl-catalog-root .compare-row {
display: flex; align-items: baseline; justify-content: space-between;
padding: var(--space-2) 0;
gap: var(--space-3);
}
#bxbl-catalog-root .compare-row .k {
font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em;
color: var(--ink-3); text-transform: uppercase; white-space: nowrap;
}
#bxbl-catalog-root .compare-row .v { font-family: var(--type-display); font-size: 18px; text-align: right; }
#bxbl-catalog-root .compare-row.is-price .v { font-size: 22px; }
#bxbl-catalog-root .compare-row.is-tier .v { color: var(--warn); }
#bxbl-catalog-root .compare-col .actions { margin-top: var(--space-4); }
/* ============================================================
BUILDER TOOLS — Project Builder, Pro-forma, Financing,
Quote form, Proposal, Lot Density Planner
============================================================ */
/* Add-to-project button on cards (top-left, stacked under compare) */
/* Generic builder overlay (project + lot planner share the shell) */
#bxbl-catalog-root .tool {
position: fixed; top: calc(var(--site-h, 0px) + var(--topbar-h) + var(--safe-top)); left: 0; right: 0; bottom: 0; z-index: 70;
background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch;
padding-bottom: var(--safe-bottom);
display: none;
}
#bxbl-catalog-root .tool.open { display: block; animation: detail-in 280ms cubic-bezier(.2,.7,.2,1) both; }
#bxbl-catalog-root .tool-bar {
position: sticky; top: 0; z-index: 5;
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5);
padding: var(--space-3) var(--space-6);
/* Navy band — matches the catalog topbar + detail bar for consistent chrome.
(Was white, which hid the white "Back to catalog" link.) */
background: var(--brand);
}
#bxbl-catalog-root .tool-bar .crumb { color: rgba(255,255,255,0.55); }
#bxbl-catalog-root .tool-bar .crumb b { color: #ffffff; }
#bxbl-catalog-root .tool-bar .label { color: rgba(255,255,255,0.55); }
#bxbl-catalog-root .tool-body { max-width: 1100px; margin: var(--space-7) auto var(--space-8); padding: 0 var(--space-6); }
#bxbl-catalog-root .tool-title { font-family: var(--type-display); font-weight: 600; font-size: clamp(28px,4vw,40px); letter-spacing: -0.02em; margin: 0 0 var(--space-2); }
#bxbl-catalog-root .tool-sub { color: var(--ink-2); margin: 0 0 var(--space-6); max-width: 60ch; }
/* Two-column layout: line items / inputs on left, sticky summary on right */
#bxbl-catalog-root .tool-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-7); align-items: start; }
@media (max-width: 860px) { #bxbl-catalog-root .tool-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
/* Project line items */
#bxbl-catalog-root .pj-empty { border: 1px dashed var(--hair-strong); padding: var(--space-7); text-align: center; color: var(--ink-2); }
#bxbl-catalog-root .pj-empty .display { font-family: var(--type-display); font-size: 24px; margin-bottom: var(--space-2); }
#bxbl-catalog-root .pj-item {
display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4); align-items: center;
padding: var(--space-4) 0;
}
#bxbl-catalog-root .pj-thumb { width: 64px; height: 36px; background: center/cover no-repeat rgba(0,0,0,0.05); }
#bxbl-catalog-root .pj-thumb.ph { background: rgba(24,66,115,0.06); display: grid; place-items: center; }
#bxbl-catalog-root .pj-thumb.ph svg { width: 22px; height: 22px; opacity: 0.5; }
#bxbl-catalog-root .pj-info { min-width: 0; }
#bxbl-catalog-root .pj-name { font-family: var(--type-display); font-weight: 500; font-size: 18px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bxbl-catalog-root .pj-meta { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; margin-top: 3px; }
#bxbl-catalog-root .pj-right { display: flex; align-items: center; gap: var(--space-4); }
#bxbl-catalog-root .pj-stepper { display: inline-flex; align-items: center; background: var(--surface); }
#bxbl-catalog-root .pj-stepper button { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; font-family: var(--type-mono); font-size: 14px; background: var(--surface); color: var(--brand); border: 0; }
#bxbl-catalog-root .pj-stepper button:hover { background: var(--brand); color: #ffffff; }
/* font-size:16px floor — iOS Safari would otherwise zoom the page on focus */
#bxbl-catalog-root .pj-stepper input { width: 48px; height: 30px; border: 0; background: #ffffff; text-align: center; font-family: var(--type-mono); font-size: 16px; -moz-appearance: textfield; }
#bxbl-catalog-root .pj-stepper input::-webkit-outer-spin-button, #bxbl-catalog-root .pj-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#bxbl-catalog-root .pj-line { font-family: var(--type-display); font-weight: 600; font-size: 18px; min-width: 92px; text-align: right; }
#bxbl-catalog-root .pj-remove { background: transparent; border: 0; color: var(--ink-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; }
#bxbl-catalog-root .pj-remove:hover { color: var(--warn); }
/* Summary card — borderless, uses surface tint + padding to feel contained */
#bxbl-catalog-root .pj-summary { background: var(--surface); padding: var(--space-5); position: sticky; top: 88px; }
#bxbl-catalog-root .pj-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; }
#bxbl-catalog-root .pj-sum-row .k { font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-2); text-transform: uppercase; }
#bxbl-catalog-root .pj-sum-row .v { font-family: var(--type-display); font-weight: 500; font-size: 17px; }
#bxbl-catalog-root .pj-sum-row.total { margin-top: var(--space-3); padding-top: var(--space-3); }
#bxbl-catalog-root .pj-sum-row.total .k { color: var(--ink); font-weight: 600; }
#bxbl-catalog-root .pj-sum-row.total .v { font-size: 28px; font-weight: 600; color: var(--brand); }
#bxbl-catalog-root .pj-sum-row.discount .v { color: var(--gold-deep); }
#bxbl-catalog-root .pj-badge { display: inline-block; margin-left: 8px; font-family: var(--type-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--brand); background: var(--gold); padding: 2px 7px; text-transform: uppercase; font-weight: 600; }
@media (max-width: 720px) {
#bxbl-catalog-root .pj-item { grid-template-columns: 48px 1fr; gap: var(--space-3); }
#bxbl-catalog-root .pj-item .pj-right { grid-column: 1 / -1; justify-content: space-between; }
#bxbl-catalog-root .pj-summary { position: static; }
}
/* Branded proposal header — only shown when printing */
#bxbl-catalog-root .print-head { display: none; }
/* ---------- BILLBOARD BAND (full-width developer invite, reference format) ---------- */
#bxbl-catalog-root .billboard {
position: relative; overflow: hidden; width: 100%;
/* Right gutter matches the topbar's (var(--space-7)) so the "$99" price
right-aligns under the "PROJECT" button; left matches the brand gutter. */
padding: var(--space-2) var(--space-7) 0 var(--space-5);
background: var(--brand); color: #ffffff;
}
/* Faint wordmark runs across the whole band, left to right */
#bxbl-catalog-root .bb-bg-txt {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: var(--type-display); font-weight: 700; font-size: clamp(80px, 15vw, 220px);
line-height: 1; letter-spacing: 0.04em; color: rgba(255,255,255,0.05);
pointer-events: none; user-select: none; white-space: nowrap; z-index: 0;
}
#bxbl-catalog-root .bb-in {
position: relative; z-index: 1; max-width: 100%; margin: 0;
display: flex; flex-direction: column; gap: var(--space-1);
}
/* Top row: "Developer Series" kicker (left) + starting price (right) */
#bxbl-catalog-root .bb-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
#bxbl-catalog-root .bb-kicker { font-family: var(--type-mono); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
/* Price key: sits in the render row at the far right, bottom-aligned with the
bottom of the houses image. "$99" stacked over a smaller "STARTING / PSF". */
#bxbl-catalog-root .bb-price {
display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
white-space: nowrap; text-align: right;
margin-left: auto; align-self: flex-start;
}
#bxbl-catalog-root .bb-price b { font-family: var(--type-display); font-weight: 700; font-size: calc(var(--bb-h) * 0.86); line-height: 0.92; color: #ffffff; }
#bxbl-catalog-root .bb-price .bb-price-l { font-family: var(--type-mono); font-size: clamp(12px, 1.3vw, 16px); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
/* Single left-flowing stack (reference pattern):
line 1 = "3 boxes." + module chips, line 2 = "Build anything." + render image. */
/* Headline sizes to its own text ("BUILD ANYTHING." width) and the render board
sits right beside it — all left-grouped. The boxes fill line 1 only up to the
headline's right edge (= where the image begins). */
#bxbl-catalog-root .bb-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: var(--space-5); row-gap: var(--space-5); --bb-h: clamp(56px, 7vw, 104px); }
#bxbl-catalog-root .bb-title {
flex: 0 1 auto; min-width: 0;
font-family: var(--type-display); font-weight: 700;
font-size: calc(var(--bb-h) / 1.64); line-height: 0.82; letter-spacing: -0.035em;
margin: 0; text-transform: uppercase;
display: flex; flex-direction: column; gap: var(--space-1);
}
#bxbl-catalog-root .bb-line { display: flex; align-items: center; flex-wrap: nowrap; column-gap: var(--space-4); row-gap: var(--space-2); }
#bxbl-catalog-root .bb-l1, #bxbl-catalog-root .bb-l2 { white-space: nowrap; flex: 0 0 auto; }
#bxbl-catalog-root .bb-title em { font-style: normal; color: var(--gold); }
#bxbl-catalog-root .bb-tag {
color: rgba(255,255,255,0.72); font-size: clamp(13px, 1.0vw, 20px); line-height: 1.3;
max-width: none; margin: 0;
}
#bxbl-catalog-root .bb-tag strong { color: #ffffff; font-weight: 700; }
/* Compact cluster — does NOT stretch the layout. Widths are a true module
scale off a base unit: 20×30 = 1.5× the 20×20, 20×40 = 2× the 20×20. */
#bxbl-catalog-root .bb-boxes { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; --bx: var(--bb-h); }
#bxbl-catalog-root .bb-box {
font-family: var(--type-display); font-weight: 700; line-height: 1; letter-spacing: 0.01em;
font-size: clamp(16px, 1.6vw, 20px); background: var(--gold); color: var(--brand);
display: inline-flex; align-items: center; justify-content: center;
height: var(--bx); text-align: center; white-space: nowrap; flex: 0 0 auto;
}
#bxbl-catalog-root .bb-box-20 { width: var(--bx); }
#bxbl-catalog-root .bb-box-30 { width: calc(var(--bx) * 1.5); }
#bxbl-catalog-root .bb-box-40 { width: calc(var(--bx) * 2); }
#bxbl-catalog-root .bb-mashup { height: clamp(107px, 10.7vw, 163px); width: auto; display: block; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55); }
/* Collection chips — REMOVED on mobile + desktop (Paolo): the same categories
appear immediately under in the left rail (.cat-list), so these were
redundant. Styles kept below in case we reintroduce them elsewhere. */
#bxbl-catalog-root .bb-chips { display: none; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 9px; }
#bxbl-catalog-root .bb-chip {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--type-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
color: #ffffff; background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.18); padding: 9px 14px; cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms ease;
}
#bxbl-catalog-root .bb-chip .bb-chip-n { color: rgba(255,255,255,0.5); font-size: 10px; }
#bxbl-catalog-root .bb-chip:hover { background: var(--gold); color: var(--brand); border-color: var(--gold); transform: translateY(-2px); }
#bxbl-catalog-root .bb-chip:hover .bb-chip-n { color: rgba(24,66,115,0.6); }
#bxbl-catalog-root .bb-chip:active { transform: translateY(0) scale(0.97); }
#bxbl-catalog-root .bb-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Pop-in: top row, headline, tagline, then chips stagger. Armed by JS; falls back to visible. */
#bxbl-catalog-root .billboard.bb-armed .bb-top, #bxbl-catalog-root .billboard.bb-armed .bb-title, #bxbl-catalog-root .billboard.bb-armed .bb-mashup, #bxbl-catalog-root .billboard.bb-armed .bb-price, #bxbl-catalog-root .billboard.bb-armed .bb-tag, #bxbl-catalog-root .billboard.bb-armed .bb-chip { opacity: 0; transform: translateY(16px); }
#bxbl-catalog-root .billboard.bb-armed.in .bb-top, #bxbl-catalog-root .billboard.bb-armed.in .bb-title, #bxbl-catalog-root .billboard.bb-armed.in .bb-mashup, #bxbl-catalog-root .billboard.bb-armed.in .bb-price, #bxbl-catalog-root .billboard.bb-armed.in .bb-tag, #bxbl-catalog-root .billboard.bb-armed.in .bb-chip {
opacity: 1; transform: none;
transition: opacity 520ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
}
#bxbl-catalog-root .billboard.bb-armed.in .bb-tag { transition-delay: 90ms; }
#bxbl-catalog-root .billboard.bb-armed.in .bb-chip { transition-delay: calc(160ms + var(--i, 0) * 45ms); }
@media (max-width: 820px) {
/* Stack the render board below the headline; boxes still fill the line. */
#bxbl-catalog-root .bb-head { flex-direction: column; align-items: stretch; gap: var(--space-4); }
#bxbl-catalog-root .bb-mashup { align-self: flex-start; }
}
@media (max-width: 720px) {
/* Filters are noise on phones — hide the whole Filters rail-section (keep it
on desktop where it's useful). Category browsing stays via the rail list. */
#bxbl-catalog-root #filtersSection { display: none; }
#bxbl-catalog-root .billboard { padding: var(--space-5) var(--space-4); }
#bxbl-catalog-root .bb-chip { padding: 7px 11px; font-size: 10px; }
/* Mobile billboard layout: stack everything left-aligned and tight so there's
no L-shaped dead zone. Order: headline → boxes → $99 line → full-width
render banner → tagline. The image becomes a proper banner instead of a
72px thumbnail, and the price no longer gets stranded to the right. */
#bxbl-catalog-root .bb-head { flex-direction: column; align-items: stretch; gap: var(--space-4); }
#bxbl-catalog-root .bb-title { order: 1; }
#bxbl-catalog-root .bb-boxes { order: 2; }
#bxbl-catalog-root .bb-price { order: 3; flex-direction: row; align-items: baseline; gap: 10px;
margin-left: 0; align-self: flex-start; }
#bxbl-catalog-root .bb-price b { font-size: 46px; line-height: 1; }
#bxbl-catalog-root .bb-mashup { order: 4; width: 100%; height: auto; max-height: 210px; object-fit: cover; object-position: center; }
/* On phones let the boxes and headline words wrap if they get too tight,
so nothing overflows the band. */
#bxbl-catalog-root .bb-line { flex-wrap: wrap; }
#bxbl-catalog-root .bb-l1, #bxbl-catalog-root .bb-l2 { white-space: normal; }
/* The smallest module (20×20) is only ~56px wide and the boxes must keep
their true 1 : 1.5 : 2 ratio (no padding), so shrink the label font on
phones — "20' × 20'" at the 16px floor was touching/clipping the edge. */
#bxbl-catalog-root .bb-box { font-size: 13px; letter-spacing: 0; }
/* The giant faded "BUILD ANYTHING" wordmark sits behind the price and reads
as clutter at phone widths (it collides with the $99). Hide it on phones —
it's purely decorative (aria-hidden) so nothing is lost. */
#bxbl-catalog-root .bb-bg-txt { display: none; }
}
/* ---------- Mobile touch-target comfort (≥40px finger-friendly hit areas) ---------- */
@media (max-width: 720px) {
/* Overlay close "×" — hidden on phones: it overlapped the hero image and was
redundant with the sticky "‹ Back to catalog" topbar, which is the exit. */
#bxbl-catalog-root .detail-close { display: none; }
/* Project line-item quantity steppers — were 30px. */
#bxbl-catalog-root .pj-stepper button { min-width: 38px; min-height: 38px; }
/* Remove-item control — was 18×26; pad out the hit area (glyph stays small). */
#bxbl-catalog-root .pj-remove { min-width: 40px; min-height: 38px; padding: 8px; font-size: 20px; }
/* Share/QR popup copy control — comfortable tap height. */
#bxbl-catalog-root .qr-copy, #bxbl-catalog-root .sh-copy, #bxbl-catalog-root [aria-label="Copy share link"] { min-height: 40px; }
}
/* ---------- CTA / contact form (full-bleed navy panel, Boxabl theme) ---------- */
#bxbl-catalog-root .cta-sec {
position: relative; overflow: hidden;
max-width: 820px;
margin: var(--space-7) auto var(--space-6);
padding: var(--space-6) var(--space-6) var(--space-7);
background: var(--brand); color: #ffffff; text-align: center;
}
/* Pop-in on scroll — armed by JS only when motion is allowed; otherwise visible */
#bxbl-catalog-root .cta-sec.cta-armed { opacity: 0; transform: translateY(26px) scale(0.985); }
#bxbl-catalog-root .cta-sec.cta-armed.in {
opacity: 1; transform: none;
transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.8,.2,1);
}
/* Faint wordmark behind the content */
#bxbl-catalog-root .cta-bg-txt {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: var(--type-display); font-weight: 700; font-size: clamp(90px, 22vw, 220px); line-height: 1;
letter-spacing: 0.02em; color: rgba(255,255,255,0.05);
pointer-events: none; user-select: none; white-space: nowrap; z-index: 0;
}
#bxbl-catalog-root .cta-in { position: relative; z-index: 1; max-width: 100%; margin: 0 auto; }
#bxbl-catalog-root .cta-eyebrow { display: block; margin-bottom: var(--space-4); color: var(--gold); }
#bxbl-catalog-root .cta-title {
font-family: var(--type-display); font-weight: 500;
font-size: clamp(26px, 4vw, 40px); line-height: 1.04; letter-spacing: -0.02em;
margin: 0 0 var(--space-4);
}
#bxbl-catalog-root .cta-title em { font-style: normal; color: var(--gold); }
#bxbl-catalog-root .cta-desc { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.55; max-width: 560px; margin: 0 auto var(--space-5); }
#bxbl-catalog-root .cta-desc strong { color: #ffffff; font-weight: 600; }
#bxbl-catalog-root .cost-box {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: var(--space-3) var(--space-5);
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
padding: var(--space-4) var(--space-5); margin: 0 auto var(--space-4);
}
#bxbl-catalog-root .cc { display: flex; flex-direction: column; gap: 6px; }
#bxbl-catalog-root .cc-l { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
#bxbl-catalog-root .cc-v { font-family: var(--type-display); font-weight: 700; font-size: 26px; line-height: 1; background: transparent; }
#bxbl-catalog-root .cc-v .cc-u { font-size: 16px; font-weight: 600; }
#bxbl-catalog-root .cc.total .cc-l, #bxbl-catalog-root .cc.total .cc-v { color: var(--gold); }
#bxbl-catalog-root .cc-op { font-family: var(--type-display); font-size: 20px; color: rgba(255,255,255,0.4); }
#bxbl-catalog-root .cta-fine { color: rgba(255,255,255,0.5); font-size: 12px; line-height: 1.55; max-width: 560px; margin: 0 auto var(--space-5); }
#bxbl-catalog-root .cta-fine strong { color: rgba(255,255,255,0.82); }
#bxbl-catalog-root .cta-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); text-align: left; }
#bxbl-catalog-root .cta-form .full { grid-column: 1 / -1; }
#bxbl-catalog-root .cta-form label { display: block; font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: var(--space-2); }
#bxbl-catalog-root .cta-form input, #bxbl-catalog-root .cta-form select, #bxbl-catalog-root .cta-form textarea {
width: 100%; box-sizing: border-box; font-family: var(--type-body); font-size: 15px; color: #ffffff;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
padding: 13px 15px; transition: border-color 140ms ease, background 140ms ease;
}
#bxbl-catalog-root .cta-phone-row { display: flex; gap: 10px; align-items: stretch; }
#bxbl-catalog-root .cta-phone-code { flex: 0 0 190px; }
#bxbl-catalog-root .cta-phone-row input { flex: 1 1 auto; min-width: 0; }
#bxbl-catalog-root .cta-form textarea { min-height: 112px; resize: vertical; }
#bxbl-catalog-root .cta-form input::placeholder, #bxbl-catalog-root .cta-form textarea::placeholder { color: rgba(255,255,255,0.4); }
#bxbl-catalog-root .cta-form input:focus, #bxbl-catalog-root .cta-form select:focus, #bxbl-catalog-root .cta-form textarea:focus {
outline: none; border-color: var(--gold); background: rgba(255,255,255,0.10);
}
#bxbl-catalog-root .cta-form select {
-webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffa400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
}
/* Native option list renders on a white menu — keep it readable */
#bxbl-catalog-root .cta-form select option { color: #000000; }
#bxbl-catalog-root .cta-submit-wrap { text-align: center; margin-top: var(--space-3); }
#bxbl-catalog-root .cta-error { margin-top: var(--space-3); color: var(--gold); font-size: 13px; line-height: 1.5; }
#bxbl-catalog-root .cta-submit {
font-family: var(--type-mono); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
font-size: 13px; background: var(--gold); color: var(--brand); border: 0;
padding: 16px 44px; cursor: pointer; transition: background 140ms ease, transform 120ms ease;
}
#bxbl-catalog-root .cta-submit:hover { background: var(--gold-deep); }
#bxbl-catalog-root .cta-submit:active { transform: scale(0.97); }
#bxbl-catalog-root .cta-thanks { max-width: 560px; margin: var(--space-6) auto 0; padding: var(--space-6); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); }
#bxbl-catalog-root .cta-thanks .ct-thanks-title { font-size: 26px; color: var(--gold); margin-bottom: var(--space-2); }
#bxbl-catalog-root .cta-thanks .ct-thanks-sub { color: rgba(255,255,255,0.75); font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 720px) {
#bxbl-catalog-root .cta-sec { margin: var(--space-7) calc(-1 * var(--space-4)) 0; padding: var(--space-7) var(--space-4) calc(var(--space-7) + var(--safe-bottom)); }
#bxbl-catalog-root .cta-form { grid-template-columns: 1fr; }
#bxbl-catalog-root .cta-phone-row { flex-direction: column; }
#bxbl-catalog-root .cta-phone-code { flex-basis: auto; }
#bxbl-catalog-root .cost-box { gap: var(--space-3); padding: var(--space-4); }
#bxbl-catalog-root .cc-op { display: none; }
#bxbl-catalog-root .cc-v { font-size: 26px; }
}
/* ---------- PRINT (proposal) ---------- */
@media print {
#bxbl-catalog-root .topbar, #bxbl-catalog-root .rail, #bxbl-catalog-root .compare-tray, #bxbl-catalog-root .tb-action, #bxbl-catalog-root .tool-bar, #bxbl-catalog-root .actions, #bxbl-catalog-root .pj-stepper button, #bxbl-catalog-root .pj-remove { display: none !important; }
/* Print ONLY the proposal — hide the catalog grid, detail, compare, lightbox */
#bxbl-catalog-root main, #bxbl-catalog-root footer, #bxbl-catalog-root .detail, #bxbl-catalog-root .compare, #bxbl-catalog-root .lightbox { display: none !important; }
#bxbl-catalog-root { background: #fff; }
/* Print background images + brand colors (model photos, navy total, etc.) */
#bxbl-catalog-root, #bxbl-catalog-root .tool, #bxbl-catalog-root .tool-body, #bxbl-catalog-root .pj-item, #bxbl-catalog-root .pj-thumb, #bxbl-catalog-root .pj-summary, #bxbl-catalog-root .pj-sum-row, #bxbl-catalog-root .pj-sum-row.total .v, #bxbl-catalog-root .pj-sum-row.discount .v {
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Only print the proposal when it is actually open — a stray browser
Ctrl/Cmd-P from the catalog must not emit a blank project sheet. */
#bxbl-catalog-root .tool { display: none !important; }
#bxbl-catalog-root .tool.open { position: static; display: block !important; overflow: visible; }
#bxbl-catalog-root .tool-grid { grid-template-columns: 1fr 1fr; }
#bxbl-catalog-root .pj-summary { position: static; border-color: #000; }
/* Bigger model pictures on the printed proposal */
#bxbl-catalog-root .pj-item { grid-template-columns: 120px 1fr auto; break-inside: avoid; }
#bxbl-catalog-root .pj-thumb { width: 120px; height: 90px; border-color: #000; }
/* Show full model names on the printed proposal (no ellipsis truncation) */
#bxbl-catalog-root .pj-name { white-space: normal; overflow: visible; text-overflow: clip; }
/* Branded proposal header */
#bxbl-catalog-root .print-head {
display: flex; align-items: center; gap: 12px;
padding-bottom: 12px; margin-bottom: 8px; border-bottom: 2px solid #000;
}
#bxbl-catalog-root .print-head img { width: 40px; height: 40px; }
#bxbl-catalog-root .print-head .ph-title { font-family: var(--type-display); font-weight: 700; font-size: 20px; }
#bxbl-catalog-root .print-head .ph-sub { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #555; margin-left: auto; }
@page { margin: 1.5cm; }
}
/* Embedded mode (inside boxabl.com /developers): the catalog runs as its
native full-height app inside a viewport-height iframe, so the sticky rail,
sticky toolbar and fixed overlays all work. Only the catalog's own footer is
hidden — the site footer is used instead. */
#bxbl-catalog-root.is-embedded > footer { display: none; }
/* On /developers (embedded) the boxabl.com site header already shows the Boxabl
logo, so the catalog's own brand logo + wordmark are redundant — hide them.
The "‹ Back to catalog" affordance still shows on overlays for navigation.
(On the standalone /catalog the logo stays.) */
#bxbl-catalog-root.is-embedded .brand-icon { display: none; }
#bxbl-catalog-root.is-embedded:not(.in-overlay) .brand-mark { display: none; }
/* On /developers the boxabl.com nav dropdown (Products / Resources / Company)
overlays the top of this iframe. The site posts the exact height its dropdown
extends into the iframe; JS then sets billboard min-height so the navy band's
bottom lines up pixel-perfect with the dropdown's bottom, and collapses back
when the dropdown closes. The transition keeps the grow/shrink in sync with
the dropdown's open/close animation. */
#bxbl-catalog-root.is-embedded .billboard { transition: min-height 0.28s ease-in-out; }
/* ---- Touch / mobile hardening ---- */
/* Stop scroll chaining: scrolling inside an overlay/strip never scrolls the page behind it. */
#bxbl-catalog-root .detail, #bxbl-catalog-root .compare, #bxbl-catalog-root .tool, #bxbl-catalog-root .lightbox, #bxbl-catalog-root .rail, #bxbl-catalog-root .rs-track, #bxbl-catalog-root .lightbox-strip, #bxbl-catalog-root .gallery-thumbs { overscroll-behavior: contain; }
/* On touch devices, guarantee comfortable ≥44px tap targets (Apple HIG / Material). */
@media (pointer: coarse) {
#bxbl-catalog-root .cat-btn, #bxbl-catalog-root .tb-action, #bxbl-catalog-root .card-foot-btn, #bxbl-catalog-root .actions-row-btn, #bxbl-catalog-root .bx-trigger, #bxbl-catalog-root .filter select { min-height: 44px; }
#bxbl-catalog-root .lightbox-nav { width: 48px; height: 48px; }
#bxbl-catalog-root .lightbox-close { width: 46px; height: 46px; }
}
/* Reduce motion / be kinder to slower devices */
@media (prefers-reduced-motion: reduce) {
#bxbl-catalog-root *, #bxbl-catalog-root *::before, #bxbl-catalog-root *::after { transition: none !important; animation: none !important; }
}