/* ============================================================
OHB2 Catalog Pages — shared styles for all catalog/product pages
Scoped under .ohb2-body so frontend.css doesn't bleed.
DO NOT edit ohb2.css — this file owns all catalog-specific rules.
============================================================ */
/* ------------------------------------------------------------------
HERO BAND (two product images side-by-side)
------------------------------------------------------------------ */
.ohb2-catalog-hero {
display: flex;
gap: 0;
max-height: 360px;
overflow: hidden;
}
.ohb2-catalog-hero img {
width: 50%;
height: 360px;
object-fit: cover;
display: block;
}
.ohb2-catalog-hero-placeholder {
width: 50%;
height: 360px;
background: #C0C8D0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #555;
text-align: center;
padding: 12px;
box-sizing: border-box;
}
/* ------------------------------------------------------------------
BUILDINGS SUBMENU BAND
------------------------------------------------------------------ */
.ohb2-catalog-subnav {
background: #1A567A;
padding: 20px 20px;
text-align: center;
}
.ohb2-catalog-subnav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
align-items: center;
}
.ohb2-catalog-subnav li {
margin: 0;
}
.ohb2-catalog-subnav li + li::before {
content: '|';
color: rgba(255,255,255,0.4);
padding: 0 8px;
font-weight: 300;
}
.ohb2-catalog-subnav a {
color: rgba(255,255,255,0.75);
text-decoration: none;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
display: inline-block;
padding: 2px 0;
}
.ohb2-catalog-subnav a:hover { color: #E9BB52; }
.ohb2-catalog-subnav .ohb2-subnav-active a {
color: #E9BB52;
font-weight: 700;
background: none;
padding: 3px 8px;
}
/* ------------------------------------------------------------------
CATALOG INTRO SECTION
------------------------------------------------------------------ */
.ohb2-catalog-intro {
background: #fff;
padding: 40px 20px;
text-align: center;
}
.ohb2-catalog-intro-left,
.ohb2-catalog-intro-left .ohb2-catalog-intro-inner,
.ohb2-catalog-intro-left h1,
.ohb2-catalog-intro-left p {
text-align: left !important;
}
.ohb2-catalog-intro-inner {
max-width: 1052px;
margin: 0 auto;
}
.ohb2-catalog-intro h1 {
color: #1A567A;
font-size: 26px;
font-weight: 700;
margin: 0 0 16px;
}
.ohb2-catalog-intro p {
font-size: 15px;
line-height: 1.7;
color: #333;
}
/* ------------------------------------------------------------------
PRODUCT BLOCK (image + content two-column)
------------------------------------------------------------------ */
.ohb2-prod-block {
padding: 44px 20px;
border-top: 1px solid #E5E5E5;
}
.ohb2-prod-block-inner {
max-width: var(--ohb2-col);
margin: 0 auto;
display: flex;
gap: 48px;
align-items: flex-start;
}
/* image column on LEFT by default */
.ohb2-prod-block-img {
flex: 0 0 340px;
width: 340px;
}
/* image column on RIGHT: add class ohb2-prod-img-right */
.ohb2-prod-block-inner.ohb2-prod-img-right {
flex-direction: row-reverse;
}
.ohb2-prod-block-img img {
width: 100%;
height: auto;
display: block;
border: 1px solid #D9D9D9;
}
.ohb2-prod-block-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-top: 8px;
}
.ohb2-prod-block-thumbs img {
width: 100%;
height: 52px;
object-fit: cover;
border: 2px solid transparent;
cursor: pointer;
}
.ohb2-prod-block-thumbs img:hover {
border-color: #1A567A;
}
.ohb2-prod-block-placeholder {
width: 100%;
height: 240px;
background: #D0D5DA;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #555;
text-align: center;
padding: 12px;
box-sizing: border-box;
line-height: 1.4;
}
/* product content column */
.ohb2-prod-block-content {
flex: 1;
}
.ohb2-prod-block-content h2 {
color: #1A567A;
font-size: 21px;
font-weight: 700;
margin: 0 0 12px;
text-transform: uppercase;
}
.ohb2-prod-block-content > p {
font-size: 14px;
line-height: 1.7;
margin-bottom: 16px;
}
.ohb2-prod-block-content h3 {
color: #1A567A;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
margin: 16px 0 6px;
}
.ohb2-prod-block-content ul {
list-style: disc !important;
padding-left: 22px !important;
margin: 0 0 14px;
}
.ohb2-prod-block-content ul li {
list-style: disc !important;
font-size: 13px;
line-height: 1.7;
margin-bottom: 3px;
}
/* SIZES TABLE */
.ohb2-sizes-table {
display: flex;
border: none;
margin-bottom: 12px;
flex-wrap: wrap;
}
.ohb2-sizes-col {
flex: 1;
min-width: 72px;
border-right: none;
padding: 4px 10px;
}
.ohb2-sizes-col:last-child { border-right: none; } /* already clean */
.ohb2-sizes-col strong {
display: block;
font-size: 11px;
font-weight: 700;
color: #1A567A;
margin-bottom: 6px;
white-space: nowrap;
}
.ohb2-sizes-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.ohb2-sizes-col ul li {
font-size: 11px;
line-height: 1.7;
margin-bottom: 0;
}
/* two-column size layout (greenhouse style) */
.ohb2-sizes-two-col {
display: flex;
gap: 24px;
margin-bottom: 12px;
}
.ohb2-sizes-two-col .ohb2-sizes-mini {
flex: 0 0 auto;
}
.ohb2-sizes-mini strong {
display: block;
font-size: 11px;
font-weight: 700;
color: #1A567A;
margin-bottom: 4px;
}
.ohb2-sizes-mini ul {
list-style: none;
padding: 0;
margin: 0;
}
.ohb2-sizes-mini ul li {
font-size: 11px;
line-height: 1.7;
}
/* NOTE fine print */
.ohb2-prod-note {
font-size: 11.5px;
color: #555;
line-height: 1.5;
margin-bottom: 18px;
font-style: italic;
}
/* DUAL CTAs */
.ohb2-prod-ctas {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 270px;
margin-top: 4px;
}
.ohb2-prod-ctas a {
display: block;
text-align: center;
padding: 13px 20px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
border: none;
}
.ohb2-cta-inv {
background: #1A567A;
color: #fff;
}
.ohb2-cta-inv:hover { background: #14405C; color: #fff; }
.ohb2-cta-3d {
background: #14405C;
color: #fff;
}
.ohb2-cta-3d:hover { background: #1A567A; color: #fff; }
/* ------------------------------------------------------------------
COLOR SWATCHES SECTION
------------------------------------------------------------------ */
.ohb2-swatches-section {
background: #fff;
padding: 28px 20px;
border-top: 1px solid #EBEBEB;
}
.ohb2-swatches-inner {
max-width: var(--ohb2-col);
margin: 0 auto;
}
.ohb2-swatches-section h2 {
color: #1A567A;
font-size: 18px;
font-weight: 700;
text-align: center;
margin: 0 0 16px;
text-transform: none;
}
.ohb2-swatch-row {
display: grid;
grid-template-columns: repeat(5, 90px);
gap: 10px;
justify-content: center;
}
.ohb2-swatch-item {
display: flex;
flex-direction: column;
align-items: center;
width: 90px;
}
.ohb2-swatch-tile {
width: 90px;
height: 90px;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 2px;
display: block;
position: relative;
overflow: hidden;
}
.ohb2-swatch-tile::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, rgba(0,0,0,0.055) 0, rgba(0,0,0,0.055) 1px, transparent 1px, transparent 8px);
pointer-events: none;
}
.ohb2-swatch-name {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
color: #fff;
line-height: 1.2;
width: 90px;
min-height: 20px;
padding: 3px 4px;
background: #111;
box-sizing: border-box;
overflow: hidden;
word-break: break-word;
}
.ohb2-swatches-note {
font-size: 11px;
color: #555;
font-style: italic;
text-align: center;
margin-top: 18px;
line-height: 1.5;
}
/* ------------------------------------------------------------------
GALLERY SECTION
------------------------------------------------------------------ */
.ohb2-cat-gallery-section {
background: #fff;
padding: 36px 20px;
border-top: 1px solid #E5E5E5;
}
.ohb2-cat-gallery-inner {
max-width: var(--ohb2-col);
margin: 0 auto;
}
.ohb2-cat-gallery-inner h2 {
color: #1A567A;
font-size: 18px;
font-weight: 400;
text-align: center;
margin: 0 0 22px;
text-transform: none;
}
.ohb2-cat-gallery-grid {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.ohb2-cat-gallery-placeholder {
width: 220px;
height: 160px;
background: #D0D5DA;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #666;
text-align: center;
padding: 8px;
box-sizing: border-box;
}
/* ------------------------------------------------------------------
CATALOG TAIL — Promo duo, Brochure, RTO, FAQ (local copies)
------------------------------------------------------------------ */
/* Promo Duo */
.ohb2-cat-promo-duo {
display: flex;
}
.ohb2-cat-promo-pane {
flex: 1;
background: #fff;
padding: 40px 24px;
text-align: center;
color: #1A567A;
}
.ohb2-cat-promo-pane:first-child {
background: #f5f7f9;
}
.ohb2-cat-promo-img-placeholder {
width: 100%;
height: 180px;
background: #D8D8D8;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #888;
margin-bottom: 20px;
}
.ohb2-cat-promo-pane h3 {
font-size: 18px;
font-weight: 700;
color: #1A567A;
margin: 0 0 20px;
line-height: 1.3;
}
.ohb2-cat-brochure-block {
background: #fff;
padding: 32px 20px;
text-align: right;
border-top: 1px solid #EEE;
}
.ohb2-cat-brochure-inner {
max-width: var(--ohb2-col);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 28px;
}
.ohb2-cat-brochure-inner h3 {
color: #1A567A;
font-size: 17px;
font-weight: 700;
margin: 0;
line-height: 1.3;
}
/* RTO */
.ohb2-cat-rto-section {
background: #fff;
padding: 40px 20px;
border-top: 1px solid #E5E5E5;
}
.ohb2-cat-rto-inner {
max-width: var(--ohb2-col);
margin: 0 auto;
display: flex;
gap: 60px;
align-items: flex-start;
}
.ohb2-cat-rto-text {
flex: 1;
}
.ohb2-cat-rto-text h2 {
color: #1A567A;
font-size: 20px;
font-weight: 700;
margin: 0 0 14px;
}
.ohb2-cat-rto-text p {
font-size: 14px;
line-height: 1.7;
margin-bottom: 20px;
}
.ohb2-cat-rto-advantages {
flex: 0 0 280px;
}
.ohb2-cat-rto-advantages h3 {
color: #1A567A;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 12px;
}
.ohb2-cat-rto-advantages ul {
list-style: none;
padding: 0;
margin: 0;
}
.ohb2-cat-rto-advantages ul li {
font-size: 14px;
line-height: 1.7;
padding-left: 20px;
position: relative;
}
.ohb2-cat-rto-advantages ul li::before {
content: '\2713';
position: absolute;
left: 0;
color: #1A567A;
font-weight: 700;
}
/* FAQ */
.ohb2-cat-faq-section {
background: #F0F0F0;
padding: 40px 20px;
border-top: 1px solid #D9D9D9;
}
.ohb2-cat-faq-inner {
max-width: var(--ohb2-col);
margin: 0 auto;
}
.ohb2-cat-faq-inner h2 {
color: #1A567A;
font-size: 18px;
font-weight: 700;
text-align: center;
margin: 0 0 24px;
}
/* ------------------------------------------------------------------
SHED UPGRADES PAGE
------------------------------------------------------------------ */
.ohb2-upgrades-intro {
background: #fff;
padding: 40px 20px;
border-bottom: 1px solid #E5E5E5;
}
.ohb2-upgrades-intro-inner {
max-width: var(--ohb2-col);
margin: 0 auto;
text-align: center;
}
.ohb2-upgrades-intro h1 {
color: #1A567A;
font-size: 26px;
font-weight: 700;
margin: 0 0 16px;
}
.ohb2-upgrades-intro p {
font-size: 15px;
line-height: 1.7;
}
.ohb2-upgrade-blocks {
background: #fff;
padding: 8px 20px 34px; /* #30: more room before the blue builder band */
}
.ohb2-upgrade-block {
max-width: var(--ohb2-col);
margin: 0 auto;
padding: 28px 0;
border-bottom: 1px solid #EEE;
overflow: hidden;
}
.ohb2-upgrade-block:last-child { border-bottom: none; }
.ohb2-upgrade-img-placeholder {
float: left;
width: 200px;
height: 140px;
background: #D0D5DA;
margin: 0 24px 12px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #666;
text-align: center;
padding: 8px;
box-sizing: border-box;
line-height: 1.4;
}
.ohb2-upgrade-block h2 {
color: #1A567A;
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
margin: 0 0 10px;
}
.ohb2-upgrade-block p {
font-size: 14px;
line-height: 1.7;
margin-bottom: 10px;
}
.ohb2-upgrade-block ul {
padding-left: 20px;
margin: 0 0 10px;
}
.ohb2-upgrade-block ul li {
font-size: 13px;
line-height: 1.7;
margin-bottom: 2px;
}
/* Navy 3D Builder band (pass-4) */
.ohb2-builder-band {
background: #1A567A;
padding: 44px 20px;
}
.ohb2-builder-band-inner {
max-width: var(--ohb2-col);
margin: 0 auto;
display: flex;
gap: 48px;
align-items: center;
flex-wrap: wrap;
}
.ohb2-builder-band-text {
flex: 1;
min-width: 220px;
}
.ohb2-builder-band h2 {
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 12px;
text-transform: uppercase;
}
.ohb2-builder-band p {
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.88);
}
.ohb2-builder-band-cta {
flex: 0 0 auto;
text-align: center;
}
.ohb2-builder-band-cta a {
background: #E9BB52;
color: #1A567A;
display: inline-block;
padding: 16px 36px;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.05em;
text-decoration: none;
}
.ohb2-builder-band-cta a:hover { background: #e0a820; color: #1A567A; }
/* ------------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------------ */
@media (max-width: 900px) {
.ohb2-catalog-hero img,
.ohb2-catalog-hero-placeholder { height: 220px; }
.ohb2-prod-block-inner,
.ohb2-prod-block-inner.ohb2-prod-img-right {
flex-direction: column;
}
.ohb2-prod-block-img { flex: none; width: 100%; }
.ohb2-prod-ctas { max-width: 100%; }
.ohb2-cat-promo-duo { flex-direction: column; }
.ohb2-cat-rto-inner { flex-direction: column; }
.ohb2-cat-rto-advantages { flex: none; }
.ohb2-cat-brochure-inner { justify-content: center; text-align: center; flex-wrap: wrap; }
.ohb2-builder-band-inner { flex-direction: column; text-align: center; }
.ohb2-upgrade-img-placeholder { float: none; width: 100%; margin: 0 0 16px; }
}
@media (max-width: 480px) {
.ohb2-catalog-hero { flex-direction: column; max-height: none; }
.ohb2-catalog-hero img,
.ohb2-catalog-hero-placeholder { width: 100%; height: 180px; }
.ohb2-sizes-col { min-width: 56px; padding: 6px 6px; }
.ohb2-swatch-tile { width: 54px; height: 38px; }
}
/* Brochure block DOWNLOAD IT NOW.
WAS: navy (#1A567A) on all catalog pages, from the original reskin port.
REMOVED 2026-09-30 -- the client asked for the brochure CTA to be formatted
the same way on every page, and the home page band is the reference. This
file loads AFTER ohb2.css, so this rule was the one thing still making the
catalog button a different colour from home's gold. The
.ohb2-cat-brochure-inner half went dead in the same pass: the catalog pages
now render the shared .ohb2-brochure-block band. */
/* ================================================================
FIDELITY-FIX-1 — P3.14 shed-upgrades item polish
================================================================ */
.ohb2-upgrade-img-placeholder {
width: 33% !important;
}
.ohb2-upgrade-block h2 {
font-size: 22px !important;
color: #1A567A !important;
font-weight: 700 !important;
}
/* ================================================================
PASS-2 FIX: F5 catalog hero — single full-width image band
(design shows 1 contextual banner; show first child full-width,
hide second child, regardless of img or placeholder div type)
================================================================ */
.ohb2-catalog-hero > *:first-child {
width: 100% !important;
max-width: none !important;
}
.ohb2-catalog-hero > *:not(:first-child) {
display: none !important;
}
/* Max-height still keeps it from being too tall */
.ohb2-catalog-hero {
max-height: 320px !important;
}
@media (max-width: 700px) {
.ohb2-catalog-hero > *:first-child { height: 220px !important; }
}
/* ================================================================
BATCH 3 — product pages from the content doc
================================================================ */
/* Cover band. The doc supplies one composed 1905x600 banner per product
page, frame and all, so it is shown whole rather than cropped to a
fixed height the way the old two-photo hero was. */
.ohb2-catalog-hero.ohb2-catalog-hero-cover {
max-height: none !important;
display: block;
}
.ohb2-catalog-hero.ohb2-catalog-hero-cover img {
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: fill;
}
/* Swatch tiles now carry the real colour plate. The hex background stays
underneath as the fallback, and the faux-siding overlay the placeholder
tiles used has to go — the photo has its own grain. */
.ohb2-swatch-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* The tiles used to fake a siding texture with a repeating gradient. The
real plate has its own grain, and swatch-grid.blade.php is the only
thing that renders a tile now, so the overlay goes unconditionally
rather than behind a :has() the older Safaris would ignore. */
.ohb2-swatch-tile::after {
content: none;
}
/* "(may vary by delivery location...)" qualifier — the design runs this
inline with the heading, in the same teal, at a smaller weight. */
.ohb2-prod-block-content h3 .ohb2-prod-sub {
font-weight: 400;
font-size: 11px;
text-transform: none;
letter-spacing: 0;
color: #3C7C99;
margin-left: 5px;
}
/* Size columns are plain lists of dimensions, not bullet points — the
content column's disc rule is !important, so this has to be too. */
.ohb2-sizes-col ul,
.ohb2-sizes-col ul li {
list-style: none !important;
}
.ohb2-sizes-col ul {
padding-left: 0 !important;
}
/* The design centres the buttons under the copy column */
.ohb2-prod-ctas {
margin-left: auto;
margin-right: auto;
}
/* Caption bar: navy, attached to the bottom of the framed photo */
.ohb2-prod-block-img .ohb2-prod-block-label {
background: #1A567A;
color: #fff;
border: none;
padding: 7px 6px;
margin: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
order: 2;
}
/* Photo strip is three across, wrapping to a second row — that is where
the tour video tiles land once the mp4s are hosted. */
.ohb2-prod-block-img .ohb2-prod-block-thumbs {
grid-template-columns: repeat(3, 1fr);
margin-top: 8px;
}
.ohb2-prod-block-img .ohb2-prod-block-thumbs img,
.ohb2-prod-block-img .ohb2-prod-thumb-video {
height: 76px;
border: 1px solid #D9D9D9;
}
.ohb2-prod-block-img .ohb2-prod-block-thumbs img:hover,
.ohb2-prod-block-img .ohb2-prod-block-thumbs img.is-active {
border-color: #1A567A;
}
/* The caption belongs to the photo, so it has to sit above the strip */
.ohb2-prod-block-img {
display: flex;
flex-direction: column;
}
.ohb2-prod-block-img > img:first-child { order: 1; }
.ohb2-prod-block-img .ohb2-prod-block-thumbs { order: 3; }
/* Product photo strip */
.ohb2-prod-block-thumbs .ohb2-prod-thumb {
background: #f2f2f2;
}
.ohb2-prod-block-thumbs .ohb2-prod-thumb.is-active {
border-color: #1A567A;
}
a.ohb2-prod-thumb-video {
text-decoration: none;
}
/* Gallery slides are links into Fancybox now, not empty divs */
a.ohb2-cat-gallery-slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-decoration: none;
}
.ohb2-cat-gallery-btn[hidden] {
display: none;
}
@media (max-width: 700px) {
.ohb2-catalog-hero.ohb2-catalog-hero-cover > *:first-child {
height: auto !important;
}
.ohb2-cat-gallery-slide {
flex: 0 0 calc(50% - 6px);
min-width: calc(50% - 6px);
height: 140px;
}
}
/* "Tell us what type of building you're looking for." */
.ohb2-quote-prompt {
color: #fff;
font-size: 14px;
text-align: center;
margin: 18px 0 12px;
}
/* Size column headings are set uppercase in the design */
.ohb2-sizes-col strong {
text-transform: uppercase;
}
/* Colour names run to two words, so every band holds the same height and
the swatch rows line up along the bottom */
.ohb2-swatch-name {
min-height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
/* The swatch grid was five fixed 90px columns at every width, so on a phone
490px of tiles spilled out of a 350px column and the names on both edges
were sliced in half. Columns now shrink with the container, and drop to
three across on a phone so a two-word name still fits its band. */
.ohb2-swatch-row {
grid-template-columns: repeat(5, minmax(0, 90px)) !important;
max-width: 100%;
}
.ohb2-swatch-item,
.ohb2-swatch-tile,
.ohb2-swatch-name {
width: 100% !important;
}
.ohb2-swatch-tile {
aspect-ratio: 1 / 1;
height: auto !important;
}
@media (max-width: 700px) {
.ohb2-swatch-row {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
}
/* Brochure block: a real device mockup where a grey tile used to sit */
.ohb2-cat-brochure-device img {
display: block;
width: 220px;
height: auto;
}
@media (max-width: 700px) {
.ohb2-cat-brochure-device img { width: 180px; margin: 0 auto; }
}
/* ================================================================
BATCH 4 — Shed Upgrades blocks now carry the doc's real 864x864
plates. The old rule floated a fixed-height grey tile; a square
photo needs its own column so the copy stops wrapping under it.
================================================================ */
.ohb2-upgrade-block.ohb2-upgrade-row {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 32px;
align-items: start;
overflow: visible;
}
.ohb2-upgrade-row-img img {
display: block;
width: 100%;
height: auto;
}
.ohb2-upgrade-row-body > *:first-child { margin-top: 0; }
.ohb2-upgrade-note {
font-size: 12px !important;
font-style: italic;
font-weight: 700;
color: #333;
margin-top: 12px;
}
@media (max-width: 700px) {
.ohb2-upgrade-block.ohb2-upgrade-row {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.ohb2-upgrade-row-img img { max-width: 320px; margin: 0 auto; }
}
/* 3D builder band: a real tablet shot replaces the emoji placeholder tile */
.ohb2-builder-band-mockup-left { flex: 0 0 300px !important; }
.ohb2-builder-band-tablet-img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 700px) {
.ohb2-builder-band-mockup-left { flex: none !important; width: 100%; }
.ohb2-builder-band-tablet-img { max-width: 320px; margin: 0 auto; }
}
/* The doc puts an Old Hickory link inside the navy builder band's copy;
the global link colour is navy, which is invisible on that background. */
.ohb2-builder-band-cta-right p a {
color: #E9BB52 !important;
text-decoration: underline;
}
.ohb2-builder-band-cta-right p a:hover { color: #fff !important; }
/* ================================================================
SITE-WIDE DESIGN SWEEP (2026-08-26)
Design pages 4-9: the four product pages and shed upgrades.
Measured off the mockups against a 1440 frame: the content column
is ~940px centred, split 51/47 between the bordered image box and
the copy, and everything is set a good 3-5px larger than the page
had been drawing it.
This block lives here rather than in ohb2.css because the catalog
sheet is link-tagged inside the page body and therefore wins ties.
================================================================ */
/* ----- Intro: centred navy 38px heading over a 940px measure ----- */
.ohb2-catalog-intro {
padding: 40px 20px 34px; /* #22: 6px read as tight under the button stack */
}
.ohb2-catalog-intro .ohb2-catalog-intro-inner,
.ohb2-catalog-intro.ohb2-catalog-intro-narrow .ohb2-catalog-intro-inner {
max-width: var(--ohb2-col) !important;
margin: 0 auto !important;
}
.ohb2-catalog-intro h1,
.ohb2-catalog-intro-left h1 {
font-size: 38px;
font-weight: 700;
color: #1A567A;
line-height: 1.2;
text-align: center !important;
margin: 0 0 20px;
}
.ohb2-catalog-intro p {
font-size: 16px;
line-height: 1.55;
color: #333;
}
/* ----- Product block: 940px, image box left, copy right ----- */
.ohb2-prod-block {
padding: 34px 20px;
border-top: none;
}
.ohb2-prod-block-inner {
max-width: var(--ohb2-col);
gap: 18px;
}
.ohb2-prod-block-img {
flex: 0 0 51%;
width: auto;
max-width: 51%;
display: flex;
flex-direction: column;
}
/* Main photo in a navy box with the caption bar tucked under it.
The label follows the thumbnails in the markup; the design puts it
against the photo, so it is ordered back up. */
.ohb2-prod-block-img > img {
order: 1;
border: 1px solid #1A567A;
border-bottom: none;
}
.ohb2-prod-block-label {
order: 2;
background: #1A567A;
color: #fff;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
text-align: center;
padding: 8px 10px;
margin: 0;
}
.ohb2-prod-block-thumbs {
order: 3;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: 12px;
}
.ohb2-prod-block-thumbs img,
.ohb2-prod-block-thumbs .ohb2-prod-thumb-video {
height: 108px;
border: 2px solid #1A567A;
}
.ohb2-prod-block-thumbs img:hover {
border-color: #124763;
}
/* ----- Copy column ----- */
.ohb2-prod-block-content h2 {
color: #1A567A;
font-size: 26px;
line-height: 1.2;
margin: 0 0 12px;
}
.ohb2-prod-block-content > p {
font-size: 16px;
line-height: 1.5;
color: #333;
margin-bottom: 16px;
}
.ohb2-prod-block-content h3 {
color: #1A567A;
font-size: 18px;
margin: 18px 0 6px;
}
.ohb2-prod-block-content h3 .ohb2-prod-sub {
font-size: 15px;
font-weight: 400;
text-transform: none;
}
.ohb2-prod-block-content ul li {
font-size: 16px;
line-height: 1.5;
color: #333;
margin-bottom: 2px;
}
/* Size tables: plain columns, navy width headings, no rules */
.ohb2-sizes-col {
min-width: 84px;
padding: 2px 10px 2px 0;
}
.ohb2-sizes-col strong {
font-size: 15px;
color: #1A567A;
margin-bottom: 4px;
}
.ohb2-sizes-col ul li {
font-size: 15px;
line-height: 1.5;
color: #333;
}
.ohb2-prod-note {
font-size: 13px;
line-height: 1.45;
color: #555;
}
/* CTAs: two stacked navy bars inset inside the copy column */
.ohb2-prod-ctas {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 86%;
margin: 22px auto 0;
}
.ohb2-prod-ctas a,
.ohb2-cta-inv,
.ohb2-cta-3d {
display: block;
width: 100%;
background: #1A567A;
border: none;
border-radius: 7px;
color: #fff;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.01em;
text-align: center;
padding: 13px 16px;
}
.ohb2-prod-ctas a:hover,
.ohb2-cta-inv:hover,
.ohb2-cta-3d:hover {
background: #124763;
color: #fff;
}
/* ----- Swatch sections ----- */
.ohb2-swatches-section h2 {
font-size: 30px;
font-weight: 700;
color: #1A567A;
line-height: 1.2;
margin-bottom: 20px;
}
@media screen and (max-width: 900px) {
.ohb2-prod-block-img { flex: none; max-width: 100%; }
.ohb2-prod-ctas { max-width: 100%; }
}
@media screen and (max-width: 700px) {
.ohb2-catalog-intro h1,
.ohb2-catalog-intro-left h1 { font-size: 26px; }
.ohb2-prod-block-content h2 { font-size: 21px; }
.ohb2-prod-ctas a,
.ohb2-cta-inv,
.ohb2-cta-3d { font-size: 18px; }
.ohb2-prod-block-thumbs img,
.ohb2-prod-block-thumbs .ohb2-prod-thumb-video { height: 78px; }
.ohb2-swatches-section h2 { font-size: 21px; }
}
/* ----- p4-p7 round 2 ----- */
/* The image box's rule reads as a 2px navy frame in the comp. */
.ohb2-prod-block-img > img {
border-width: 2px;
}
/* The note under a size table is set upright, not italic. */
.ohb2-prod-note,
.ohb2-swatches-note {
font-style: normal;
}
/* Swatch grid: 5 tiles across the same 940px measure as everything
else on the page — it had been 90px tiles on a 490px grid. */
.ohb2-swatches-section {
border-top: none;
padding: 34px 20px;
}
.ohb2-swatches-inner {
max-width: var(--ohb2-col);
}
.ohb2-swatch-row {
grid-template-columns: repeat(5, 1fr) !important;
gap: 33px 33px !important;
justify-content: center !important;
}
.ohb2-swatch-item {
width: 100% !important;
}
.ohb2-swatch-tile {
width: 100% !important;
height: 106px !important;
border: none;
border-radius: 0;
}
.ohb2-swatch-name {
width: 100% !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
min-height: 38px !important;
padding: 10px 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
@media screen and (max-width: 700px) {
.ohb2-swatch-row { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
.ohb2-swatch-tile { height: 78px !important; }
.ohb2-swatch-name { font-size: 10px !important; min-height: 30px !important; padding: 6px 4px !important; }
}
/* ----- Gallery block: same 940px measure, real heading ----- */
.ohb2-cat-gallery-section {
border-top: none;
padding: 34px 20px;
}
.ohb2-cat-gallery-inner {
max-width: var(--ohb2-col);
}
.ohb2-cat-gallery-inner h2 {
font-size: 30px;
font-weight: 700;
color: #1A567A;
line-height: 1.2;
text-align: center;
text-transform: none;
margin: 0 0 20px;
}
/* ---------------------------------------------------------------
Shed upgrades — PDF pages 8 and 9
Same 940px measure as the product pages, image column boxed in
navy at ~294px with the copy beside it.
--------------------------------------------------------------- */
.ohb2-upgrades-intro {
padding: 40px 20px 10px;
border-bottom: none;
text-align: left;
}
.ohb2-upgrades-intro-inner {
max-width: var(--ohb2-col);
text-align: left;
}
.ohb2-upgrades-intro h1 {
font-size: 38px;
font-weight: 700;
color: #1A567A;
line-height: 1.2;
text-align: center;
margin: 0 0 20px;
}
.ohb2-upgrades-intro p {
font-size: 16px;
line-height: 1.55;
color: #333;
}
.ohb2-upgrade-block {
max-width: var(--ohb2-col);
padding: 24px 0;
border-bottom: none;
}
.ohb2-upgrade-block.ohb2-upgrade-row {
grid-template-columns: 294px minmax(0, 1fr);
gap: 40px;
}
.ohb2-upgrade-row-img img {
border: 2px solid #1A567A;
}
.ohb2-upgrade-block h2 {
color: #1A567A;
font-size: 28px;
line-height: 1.2;
margin: 0 0 10px;
}
.ohb2-upgrade-block p {
font-size: 16px;
line-height: 1.5;
color: #333;
margin-bottom: 12px;
}
.ohb2-upgrade-block ul li {
font-size: 16px;
line-height: 1.5;
color: #333;
}
.ohb2-upgrade-note {
font-size: 15px !important;
font-style: normal;
}
@media screen and (max-width: 700px) {
.ohb2-cat-gallery-inner h2 { font-size: 21px; }
.ohb2-upgrades-intro h1 { font-size: 26px; }
.ohb2-upgrade-block h2 { font-size: 21px; }
}
/* ---------------------------------------------------------------
Catalog page tail — PDF pages 4-9
The comps draw this tail exactly as the homepage draws its own:
heading above a rounded navy-framed photo, a wide navy CTA under
it, the brochure two-up, and rent-to-own with a navy-capped
advantages panel. The catalog sheet had grown its own smaller
vocabulary, so it is brought back onto the homepage's.
--------------------------------------------------------------- */
.ohb2-cat-promo-duo {
max-width: var(--ohb2-col);
margin: 0 auto;
gap: 30px;
}
.ohb2-cat-promo-pane,
.ohb2-cat-promo-pane:first-child {
background: #fff;
padding: 10px 0 34px;
display: flex;
flex-direction: column;
align-items: center;
}
.ohb2-cat-promo-pane h3 {
order: -1;
font-size: 38px;
line-height: 1.2;
margin: 0 0 22px;
}
.ohb2-cat-promo-img-placeholder {
height: 236px;
border-radius: 16px;
border: 3px solid #1A567A;
margin-bottom: 26px;
}
.ohb2-cat-promo-pane .ohb2-btn-blue {
min-width: 345px;
font-size: 26px;
padding: 17px 42px;
}
/* Brochure: device left, heading and CTA right */
.ohb2-cat-brochure-block {
border-top: none;
text-align: left;
padding: 34px 20px 44px; /* #21 rhythm */
}
.ohb2-cat-brochure-inner {
max-width: var(--ohb2-col);
justify-content: flex-start;
/* 2026-09-21: 46 -> 30. The device slot grows into this gap and into
the heading column's slack -- see the overscan note further down. */
gap: 30px;
}
.ohb2-cat-brochure-device {
/* 2026-09-21: 492 -> 538, paid for by the gap and the heading column,
so the artwork no longer has to be cropped to the pixel to fill.
The basis is `inner - 394` (394 = the 30px gap + the 364px the two
heading lines need) and capped at 538, so between the 900px stack
breakpoint and 1024 the slot gives width back to the heading instead
of the heading dropping onto its own flex line -- the inner is
`flex-wrap: wrap`, and line breaking happens on flex BASE sizes, so a
fixed 538 would have stacked the block from 971px down. */
flex: 0 1 calc(100% - 394px);
max-width: 538px;
}
/* The heading/CTA column takes what is left: 940 - 538 - 30 = 372px, and the
two heading lines measure 360px and 364px at 38px, so it still sets on two
lines with room to spare. `min-width: 0` keeps a longer heading shrinking
inside the column instead of wrapping the whole column onto its own flex
line (the inner is `flex-wrap: wrap`). */
.ohb2-cat-brochure-inner > div:not(.ohb2-cat-brochure-device) {
flex: 0 1 auto;
min-width: 0;
}
.ohb2-cat-brochure-device img {
width: 100%;
height: auto;
display: block;
}
.ohb2-cat-brochure-inner h3 {
font-size: 38px;
line-height: 1.2;
margin: 0 0 24px;
}
.ohb2-cat-brochure-inner a.ohb2-btn-gold,
.ohb2-cat-brochure-inner .ohb2-btn-gold {
display: inline-flex;
padding: 16px 40px !important;
font-size: 26px;
letter-spacing: 0.01em;
}
/* Rent-to-own block */
.ohb2-cat-rto-section {
border-top: none;
padding: 34px 20px 44px; /* #21 rhythm */
}
.ohb2-cat-rto-inner {
max-width: var(--ohb2-col);
gap: 44px;
}
.ohb2-cat-rto-section .ohb2-cat-rto-heading,
.ohb2-cat-rto-text h2 {
font-size: 38px;
color: #1A567A;
line-height: 1.2;
text-align: center;
margin: 0 0 26px; /* #23 section-heading standard */
}
.ohb2-cat-rto-text p {
font-size: 16px;
line-height: 1.55;
color: #333;
}
.ohb2-cat-rto-text .ohb2-btn-blue {
font-size: 24px;
padding: 15px 38px;
}
.ohb2-cat-rto-advantages {
flex: 0 0 447px;
border: 1px solid #1A567A;
}
.ohb2-cat-rto-advantages h3 {
background: #1A567A;
color: #E9BB52;
font-size: 20px;
letter-spacing: 0.02em;
text-align: center;
padding: 11px 14px;
margin: 0;
}
.ohb2-cat-rto-advantages ul {
padding: 16px 22px;
}
.ohb2-cat-rto-advantages ul li {
font-size: 17px;
font-weight: 700;
line-height: 1.9;
color: #333;
padding-left: 30px;
}
.ohb2-cat-rto-advantages ul li::before {
color: #1A567A;
font-size: 19px;
}
@media screen and (max-width: 900px) {
.ohb2-cat-brochure-device { flex: none; max-width: 100%; }
.ohb2-cat-rto-advantages { flex: none; }
}
@media screen and (max-width: 700px) {
.ohb2-cat-promo-pane h3,
.ohb2-cat-brochure-inner h3,
.ohb2-cat-rto-text h2 { font-size: 26px; }
.ohb2-cat-promo-img-placeholder { height: 180px; }
.ohb2-cat-promo-pane .ohb2-btn-blue { min-width: 0; width: 100%; font-size: 20px; }
.ohb2-cat-brochure-inner a.ohb2-btn-gold,
.ohb2-cat-brochure-inner .ohb2-btn-gold { font-size: 20px; padding: 14px 26px !important; }
.ohb2-cat-rto-text .ohb2-btn-blue { font-size: 18px; }
}
/* =====================================================================
PASS 2026-09-01 (f) — refit to the 940px column
`.ohb2-builder-band-inner` is capped at 940px here but padded 40px 24px
by ohb2.css, and the box is border-box — so the band's content measured
892px against the 940px every other section on the page reports. Raise
the cap by exactly that padding; the gutter still holds below 988px.
(This file loads after ohb2.css on catalog pages, so the fix belongs
here rather than there.)
===================================================================== */
.ohb2-builder-band-inner {
max-width: calc(var(--ohb2-col) + 48px);
}
/* =====================================================================
PASS 2026-09-01 (iv) — FULL-SITE FIDELITY SWEEP, catalog surfaces.
Numbers measured off design-04 / design-06 / design-07 / design-08
normalised to a 1440px page (content column 926px drawn).
This file loads after ohb2.css on catalog pages, so the catalog-only
corrections belong here.
===================================================================== */
/* ---------------------------------------------------------------------
1. PRODUCT THUMB STRIP — 76px tall against a drawn 99px.
design-04, Lofted Barns block: three thumbs of 142 x 99 (aspect 1.434)
sitting under the 448px image panel, then a fourth (the video tile) on
a second row. Ours were 151.8 x 76 — aspect 2.0 — so `cover` was
cropping a third off the top and bottom of every product thumbnail AND
leaving a band of dead white under the image column, which is what
made the two columns of the block finish so far apart.
Height is expressed as an aspect so the tiles keep the drawn shape at
any column width.
--------------------------------------------------------------------- */
.ohb2-prod-block-thumbs .ohb2-prod-thumb {
aspect-ratio: 1.434;
height: auto;
}
.ohb2-prod-block-thumbs .ohb2-prod-thumb-video {
aspect-ratio: 1.434;
height: auto;
}
/* ---------------------------------------------------------------------
2. SHOP OUR INVENTORY / CUSTOM DESIGN IN 3D — 380.6 x 62 against a
drawn 339 x 53.
Same unpinned line-height as every other secondary CTA in the deck
(24px label in a 36px line box). The drawn button is the theme-wide
342 x 56, so the pair comes back onto it.
--------------------------------------------------------------------- */
.ohb2-prod-ctas {
max-width: 342px;
}
.ohb2-prod-ctas a,
.ohb2-cta-inv,
.ohb2-cta-3d {
line-height: 1.15;
padding: 13px 16px;
}
/* ---------------------------------------------------------------------
3. RENT-TO-OWN "LEARN MORE" — 225.7px wide and hard against the left
edge; design-02 / design-03 / design-04 draw it 342 wide and CENTRED
in its 449px text column (button centre 476 against column centre
481.5). The text column itself already measures the drawn 449.
--------------------------------------------------------------------- */
.ohb2-cat-rto-text .ohb2-btn-blue {
display: flex;
width: 342px;
max-width: 100%;
margin: 0 auto;
line-height: 1.15;
padding: 13px 16px;
box-sizing: border-box;
}
/* ---------------------------------------------------------------------
4. Category promo duo — the same 342 x 56 as the homepage pair.
--------------------------------------------------------------------- */
.ohb2-cat-promo-pane .ohb2-btn-blue {
width: 342px;
max-width: 100%;
line-height: 1.15;
padding: 13px 16px;
box-sizing: border-box;
}
@media screen and (max-width: 700px) {
.ohb2-prod-ctas { max-width: 100%; }
.ohb2-cat-rto-text .ohb2-btn-blue,
.ohb2-cat-promo-pane .ohb2-btn-blue { width: 100%; }
}
/* --- (iv) follow-up: the product thumb height is set by
`.ohb2-prod-block-img .ohb2-prod-block-thumbs img { height: 76px }`
(0,3,1), which outranks the .ohb2-prod-thumb rule above. Same drawn
1.434 aspect, at the specificity that actually wins. --- */
.ohb2-prod-block-img .ohb2-prod-block-thumbs img,
.ohb2-prod-block-img .ohb2-prod-block-thumbs .ohb2-prod-thumb-video {
height: auto;
aspect-ratio: 1.434;
}
@media screen and (max-width: 700px) {
.ohb2-prod-block-img .ohb2-prod-block-thumbs img,
.ohb2-prod-block-img .ohb2-prod-block-thumbs .ohb2-prod-thumb-video {
height: auto;
aspect-ratio: 1.434;
}
}
/* --- (iv) round 2: brochure asset padding, at the weight that wins.
`.ohb2-cat-brochure-device img { width: 100% }` lives in this file, so
the compensation rule in ohb2.css only got its margin applied and the
artwork's left edge was clipping. Same 126.4% / -14.9% pair, here.
The slot is already the drawn 492 (design-04 measures the artwork at
491), so the artwork now fills it instead of sitting 21% short. --- */
.ohb2-cat-brochure-device {
overflow: hidden;
}
/* --- 2026-09-21 (Sara): the round-2 numbers cropped the artwork to its own
bounding box and then some. brochure-device-mockup.jpg is 900x474 with the
drawn mockup at x=104..823 -- 11.56% white to the left, 8.44% to the right.
126.4% / -14.9% crops 11.79% and 9.10%, i.e. ~2px of the laptop on the left
and ~6px of the PHONE on the right (about 4 rendered px at 1440), so the
phone met the column edge with its shadow sliced off and read as cut.
Fixed by rebalancing the row rather than shrinking the image, which is what
#38 asked for: the slot went 492 -> 538 (gap 46 -> 30, heading column 402 ->
372 available, both had slack) and the crop is pulled INSIDE the real white
margin -- 10% left, 6.53% right of the image's own width. At 1440 that is a
644px image in a 538px slot: the mockup itself lands 10px inside the left
edge and 12px inside the right, nothing clipped, and it draws 515px wide
against the 497px it drew before. Do not push these past 11.5% / 8.4%: that
is where the artwork starts. --- */
.ohb2-cat-brochure-device img {
width: 119.8%;
max-width: none;
margin-left: -11.98%;
}
@media (max-width: 700px) {
.ohb2-cat-brochure-device img { width: 119.8%; margin-left: -11.98%; }
}
/* ---------------------------------------------------------------------
(iv) MOBILE: the Shed Upgrades rows were never stacking.
`@media (max-width: 700px) { .ohb2-upgrade-block.ohb2-upgrade-row {
grid-template-columns: minmax(0,1fr) } }` sits at line ~960 of this
file. The 940-column pass then added an unqualified
`.ohb2-upgrade-block.ohb2-upgrade-row { grid-template-columns: 294px
minmax(0,1fr) }` further down — same specificity, later in the file,
no media query — so it won at EVERY width and quietly cancelled the
mobile stack.
Measured at 390: the plate took 294px and the copy column was left
with ~56px, so "3/8" LP SMART PANEL" broke one word per line and ran
off the right edge. All 23 upgrade blocks, the whole page.
Re-asserted after the offending rule so source order settles it.
--------------------------------------------------------------------- */
@media screen and (max-width: 700px) {
.ohb2-upgrade-block.ohb2-upgrade-row {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.ohb2-upgrade-row-img img { max-width: 320px; margin: 0 auto; }
}
/* Unified button corner radius — see the measured note in ohb2.css.
Repeated here because ohb2-catalog.css loads after ohb2.css on catalog
pages, so anything added below must not reopen the 4px/0px split. */
.ohb2-btn-gold,
.ohb2-btn-blue,
.ohb2-btn-outline,
.ohb2-cta-inv,
.ohb2-cta-3d,
.ohb2-prod-ctas a,
.ohb2-builder-band-btn {
border-radius: 7px;
}
/* Per-family button radius — see the measured table in ohb2.css, PASS
2026-09-01 (v). Repeated here because this file loads AFTER ohb2.css on
its pages, so the unified 7px block above must not re-round the three
families the deck draws square. */
.ohb2-body .ohb2-hero-cta-btn,
.ohb2-body .ohb2-inv-card .ohb2-btn-gold,
.ohb2-body .ohb2-building-card .ohb2-btn-gold,
.ohb2-body .ohb2-card-btn-row .ohb2-btn-outline,
.ohb2-body .ohb2-card-btn-row .ohb2-btn-blue,
.ohb2-body .ohb2-card-btn-row > a {
border-radius: 0;
}
.ohb2-body .ohb2-builder-cta-band .ohb2-btn-gold,
.ohb2-body .ohb2-bldg-delivery-cta .ohb2-btn-blue,
.ohb2-body .ohb2-bldg-delivery-cta > a {
border-radius: 6px;
}
.ohb2-body .ohb2-design-card-customize a,
.ohb2-body .ohb2-designs-customize-btn {
border-radius: 5px;
}
/* Cards crop square (Sara 2026-09-01); the detail page keeps no-crop. */
.ohb2-inv-card-photo img,
.ohb2-building-card .ohb2-card-thumb img {
object-fit: cover !important;
object-position: center;
}
/* Round 2 mirrors — this file loads after ohb2.css on catalog pages.
See PASS 2026-09-01 (vi) in ohb2.css for the measurements. */
.ohb2-body.ohb2-catalog-page .ohb2-nav-bar {
border-bottom: 0;
}
.ohb2-cat-rto-text .ohb2-btn-blue {
display: flex;
width: 342px;
max-width: 100%;
margin: 0 auto;
font-size: 20px;
line-height: 1.2;
padding: 17px 20px !important;
text-align: center;
}
/* The catalog brochure device measured ZERO WIDTH at 768-900: `flex: none`
shrink-wraps the div while its img is `width: 126.4%` of that same div —
circular, resolves to 0, so the artwork never rendered on tablet/phone.
Same failure the morning pass fixed on the home-page block; this file was
never swept. It takes the full row at that breakpoint now. */
@media screen and (max-width: 900px) {
.ohb2-cat-brochure-device {
flex: 1 1 100%;
max-width: 100%;
}
}
/* =====================================================================
PASS 2026-09-01 (17) — SHED-UPGRADES 3D BUILDER BAND, to the drawing
Sara: this band reads undersized on the demo — small white heading, a
small tablet, a small pill button, dead space around it all. The home
and catalog bands were refitted earlier today; this one carries its own
markup (`shed-upgrades.blade.php`, `.ohb2-builder-band-*`) and never got
the treatment, so it is refitted here against the same page-space
convention: design-09 trimmed to the page and rescaled so the band is
1440 wide, which makes design px == CSS px (`measure-upgrades-band.py`).
Measured off design-09, band-relative, in CSS px:
band height 484 (was 548)
heading ink top 74
heading cap height 31.6 -> 42px type (was 22px, white)
CUSTOM DESIGN cap height 24.3 -> 31px type (was 18px)
The deck sets these two lines in a narrower face: 827px of ink for
a 31.6 cap on the heading, 417 for a 24.3 cap on the subhead. In
the theme's own Roboto the same strings measure 948px at 44px and
475px at 34px, which wrap in the 940 and 443 columns. So each takes
the largest size that still sets on ONE line as drawn -- 42px and
31px -- which keeps the drawn line breaks and lands the cap heights
within 2.3px of the drawing.
heading colour GOLD #E9BB52, ANY underlined
heading ink -> content gap 28
content row top 140
tablet image 460 x 264 (49.7% of the 926 column, 1.742)
column gap 30 (3.2%)
right column 436
subhead -> paragraph gap 8 (tight, as drawn)
paragraph 7 lines, pitch 20 -> 16px/20px (was 14/23.8)
paragraph -> button gap 36
gold button 343 x 58, label cap 20 -> 28px (was 215x49/14px)
button centred in the right column
band bottom padding 79
Sizes are `clamp()`ed on vw between the mobile value and the measured
1440 value, so the band holds its drawn proportions at every width
between the stack breakpoint and 1440 instead of only at 1440. The
image is 500x500 square stock; `aspect-ratio` + `object-fit: cover`
takes the centre 500x287 of it, which is the crop the deck draws (the
tablet and both hands stay inside it).
===================================================================== */
.ohb2-builder-band {
padding: 64px 20px 79px !important;
}
.ohb2-builder-band-inner {
padding: 0 24px !important;
}
.ohb2-builder-band-heading-centered {
font-size: clamp(26px, 2.92vw, 42px) !important;
line-height: 1.15 !important;
color: #E9BB52 !important;
margin: 0 0 26px !important; /* #23 section-heading standard */
padding: 0 !important;
}
/* The whole heading is gold in the drawing; ANY only adds the rule under it. */
.ohb2-builder-band-heading-centered .ohb2-builder-any {
color: inherit;
text-decoration: underline;
text-decoration-color: currentColor;
}
.ohb2-builder-band-two-col {
gap: 3.2%;
align-items: flex-start;
}
.ohb2-builder-band-mockup-left {
flex: 0 0 49.7% !important;
padding-top: 8px;
}
.ohb2-builder-band-tablet-img {
width: 100%;
height: auto;
aspect-ratio: 460 / 264;
object-fit: cover;
object-position: center;
}
.ohb2-builder-band-cta-right h3 {
font-size: clamp(20px, 2.15vw, 31px) !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
margin: 0 0 2px !important;
}
.ohb2-builder-band-cta-right p {
font-size: clamp(14px, 1.11vw, 16px) !important;
line-height: 1.25 !important;
margin: 0 0 36px !important;
padding-bottom: 0 !important;
}
.ohb2-builder-band-btn {
display: block !important;
width: -moz-fit-content !important;
width: fit-content !important;
margin: 0 auto !important;
/* #26/#28: the one CTA size. Was a clamp running up to 28px. */
font-size: 18px !important;
line-height: 1.2 !important;
padding: 15px 24px !important;
letter-spacing: 0.01em !important;
}
@media (max-width: 700px) {
.ohb2-builder-band {
padding: 40px 20px 46px !important;
}
.ohb2-builder-band-heading-centered {
font-size: 26px !important;
margin: 0 0 22px !important;
}
.ohb2-builder-band-two-col {
gap: 22px;
}
.ohb2-builder-band-mockup-left {
flex: none !important;
width: 100%;
padding-top: 0;
}
.ohb2-builder-band-tablet-img {
max-width: 420px;
margin: 0 auto;
}
.ohb2-builder-band-cta-right h3 {
font-size: 22px !important;
margin: 0 0 4px !important;
}
.ohb2-builder-band-cta-right p {
font-size: 15px !important;
line-height: 1.4 !important;
margin: 0 0 26px !important;
}
.ohb2-builder-band-btn {
font-size: 18px !important;
padding: 12px 26px !important;
}
}
/* ---------------------------------------------------------------------
PRODUCT TOUR VIDEO TILES — 2026-09-03.
Supersedes the 2026-09-02 `.ohb2-prod-videos` row of native players,
which is deleted. The deck never drew a player row: design-04 p.1 draws
the Lofted Barn strip as three photos across with the tour video as the
fourth tile, wrapping onto row two, and design-05 draws the same strip
with two videos (Deluxe Playhouse, Side Porch) and three (Playhouse).
Videos always come after the photos.
Measured off design-04 at 9x: the video tile is the same 1.434 box and
the same frame as the photo tiles beside it, its picture is the film's
poster frame on `cover`, and the badge is a white ring with a white
OUTLINED triangle inside it -- the photo shows through the triangle, it
is not a solid glyph. Ring outer diameter is 40 drawn px on a 70 drawn
px tile, so 57% of the tile width, with a 4px stroke, i.e. 10% of the
ring. On the built page at real tile sizes that drawn 57% read heavy --
the badge crowded the poster instead of sitting on it -- so Sara took it
to 42% on 2026-09-03. Only the one width below moves: the ring stroke and
the triangle are geometry INSIDE the 100x100 SVG, so they stay locked to
the ring at whatever size it is drawn, and the badge holds its shape at
every tile size instead of needing a value per breakpoint.
The badge is an SVG background, not borders and clip-paths, because a
percentage-sized border is not expressible in CSS and the ring/triangle
stroke has to scale with the tile.
Sizing and framing are NOT set here. Every strip rule in this file --
the base, the .ohb2-prod-block-img override, the 700px query and both
round-2 aspect fixes -- already names .ohb2-prod-thumb-video alongside
the photo tiles, so the tile tracks them by construction and cannot
drift out of step the next time the strip is retuned.
--------------------------------------------------------------------- */
a.ohb2-prod-thumb-video {
display: block;
position: relative;
background-color: #f2f2f2;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
cursor: pointer;
}
/* Photo tiles take the navy on hover; the film does the same so the strip
answers the pointer with one voice. */
.ohb2-prod-block-img .ohb2-prod-block-thumbs a.ohb2-prod-thumb-video:hover {
border-color: #1A567A;
}
.ohb2-prod-thumb-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 42%;
aspect-ratio: 1;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M35 24 L79 50 L35 76 Z' fill='none' stroke='%23fff' stroke-width='9' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
pointer-events: none;
/* The deck's posters are dark and carry the plain white badge fine. A
bright sky would swallow it, so the ring gets the shallowest shadow
that survives one -- visible only where it has to be. */
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
/* The photo half of each section's Fancybox group. Off-screen rather than
display:none: the visible thumbs are switchers and cannot also be
lightbox triggers, so the photos need anchors of their own to be group
members, and arrowing left out of the film has somewhere to go. Inert to
pointer, keyboard and screen readers -- the strip already exposes these
photos properly. */
.ohb2-prod-fb-photos {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
pointer-events: none;
}
/* Fancybox paints the html5video slide's poster over a black stage; the
films are 1920x1080 and so are the posters, so nothing letterboxes. */
.fancybox__html5video {
background: #000;
}
/* =====================================================================
PASS 2026-09-03 (b) — Brian's round: the RTO advantages box centres
once the catalog section stacks.
Same defect as the home/detail surface (see ohb2.css, item 5) and it
bites wider here, because `.ohb2-cat-rto-inner` already goes to one
column at 900: measured at 768 and 900 the box sat at x=20 and 337px
wide while LEARN MORE was centred at x=213 / x=279 above it.
These rules live in this file rather than ohb2.css because this file
is @push('head')-ed AFTER it, so its own `.ohb2-cat-rto-inner
{ align-items: flex-start }` would otherwise win the tie.
===================================================================== */
@media screen and (max-width: 900px) {
.ohb2-cat-rto-text { align-self: stretch; }
.ohb2-cat-rto-advantages {
align-self: center;
width: 447px;
max-width: 100%;
}
}
/* ---------------------------------------------------------------------
#22 (Mike): "spacing feels a little tight" — the gap between one product
section's button stack and the next section's heading (his marker: the
SHOP OUR INVENTORY / CUSTOM DESIGN stack above "UTILITY SHEDS").
Measured on dev: 68px, which is just the 34px the block pays at the
bottom plus the 34px the next one pays at the top. That is the correct
rhythm INSIDE a section but reads tight as a break BETWEEN two of them,
because the thing above the join is a CTA rather than body copy.
Only the join is widened, to 90px, and only where two product sections
actually touch — the 34px that separates a product section from a
swatch block or the gallery is untouched, and so is every other page.
--------------------------------------------------------------------- */
.ohb2-prod-block + .ohb2-prod-block {
padding-top: 56px;
}
/* ---------------------------------------------------------------------
(3) THE CATALOG BAND — lofted-barns, specialty, space-for-animals,
upgrades, add-on-packages
Same composition as (1) and the same complaint, but a different component:
the artwork is an ![]()
, not a background, and the pair above it is
`.ohb2-cat-promo-duo` — two 560px panes with a 30px gutter whose artwork
fills the pane edge to edge (145..705 and 735..1295 at 1440), and 345px
buttons centred under each.
The old slot was `flex: 0 1 calc(100% - 394px)` capped at 538px, with the
394 derived from the 940 column this page had before dc46dac. Against 1150
that left the heading column short and the band ending at 1077 with 218px
of empty column beside it. It now runs on the pair's own tracks.
With an ![]()
the same sum is done with margins instead of
background-position: blow the file up to 126.582% of the slot so the
ARTWORK is slot-width, then pull it back by its own white margin — which is
a percentage of the slot, not of the image, because that is what margin
percentages resolve against:
left 0.118889 x 1.265823 = 0.150475 -> -15.048%
top 0.147679 x 0.666667 = 0.098453 -> -9.845%
The slot carries the artwork's aspect and clips, so the white never escapes
and the slot IS the laptop.
--------------------------------------------------------------------- */
.ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-inner {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
align-items: center;
justify-content: initial;
flex-wrap: nowrap;
max-width: var(--ohb2-col);
}
.ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-device {
flex: none;
width: 100%;
max-width: none;
aspect-ratio: 711 / 351;
overflow: hidden;
}
.ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-device img {
display: block;
width: 126.582%;
max-width: none;
height: auto;
margin: -9.845% 0 0 -15.048%;
}
.ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-inner > div:not(.ohb2-cat-brochure-device) {
flex: none;
min-width: 0;
text-align: center;
}
.ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-inner a[class*='ohb2-btn'] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 345px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
@media screen and (min-width: 901px) and (max-width: 1189px) {
.ohb2-body .ohb2-cat-brochure-block {
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 900px) {
.ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-inner {
grid-template-columns: 1fr;
row-gap: 24px;
}
/* The phone rule further up this file sets the ![]()
to a flat 180px, which
the negative margins above would drag off its own slot. Below the stack
point the slot is not a track any more, so the compensation comes off and
the artwork simply centres. */
.ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-device {
aspect-ratio: auto;
overflow: visible;
}
.ohb2-body .ohb2-cat-brochure-block .ohb2-cat-brochure-device img {
width: 100%;
margin: 0 auto;
}
}
/* ---------------------------------------------------------------------
Category promo duo -> the homepage's column system (2026-09-30)
Mike: the brochure CTA should be formatted the same way on every page, and
"can we get this to center with the free delivery content above and make the
button the same size". The brochure band below is now the shared homepage
partial, which centres a 342px button in a 575px half of the 1150px column.
The pair above it was still on the catalog sheet's own geometry -- a 30px
gap, no horizontal pane padding, and a 345px min-width button -- so at 1440
the two buttons sat 7.5px apart on x, and at 700px and under `width: 100%`
stretched SHOP NOW / SEE IT IN ACTION edge to edge (390px at a 390 viewport)
against the brochure button's 342px.
Measured on home at 1440: pane 575 wide, padding 0 20px, button 342 centred
at x=836.5; at 390: button 342 at x=24. These rules put the catalog pair on
exactly that, so the pair and the band below share one set of tracks.
Vertical padding is left alone -- only the horizontal inset moves.
--------------------------------------------------------------------- */
.ohb2-cat-promo-duo { gap: 0; }
.ohb2-cat-promo-pane,
.ohb2-cat-promo-pane:first-child {
padding-left: 20px;
padding-right: 20px;
}
.ohb2-cat-promo-pane .ohb2-btn-blue {
min-width: 0;
width: 342px;
max-width: 100%;
}
/* Outranks nothing -- it is the same (0,2,0) as the `width: 100%` rule in the
same range earlier in this file, and wins on source order. */
@media screen and (max-width: 700px) {
.ohb2-cat-promo-pane .ohb2-btn-blue {
width: 342px;
max-width: 100%;
}
}
/* ---------------------------------------------------------------------
AVAILABLE SIZES on a phone: every width column on ONE row
(Mike, 10/2 mobile review: "Can we show all 5 columns on the same line
in mobile view? Or too tight?")
What he was looking at: .ohb2-sizes-table is a wrapping flex row whose
columns carry min-width:84px and 17px type, so at 390 the 350px content
column fits four and drops 16' WIDE onto a second row; at 375 it fits
three and drops TWO. That reads as two separate tables rather than one.
Fix is the two declarations that let a flex row divide instead of wrap:
flex-wrap:nowrap on the table, and flex:1 1 0 + min-width:0 on the
columns so the 84px floor stops forcing the overflow. Five columns then
take an equal fifth of whatever width there is: 70px at 390, 67px at 375.
The type then has to come down to stay inside 67px, and it comes down on
a clamp rather than a second breakpoint, because the available width is
continuous and a step would be wrong on one side of it. 3.4vw puts it at
13.3px on a 390 phone and 12.75px on a 375 one, both above the 12px floor
Sara set, and the 17px ceiling means this costs nothing from 500px up
where the row already fits at full size. The widest strings are the
headings ("10' WIDE") and a 7-character cell ("12 x 40"); both are held
on one line with nowrap so a too-narrow column would show as an overflow,
not as a silent two-line wrap. Measured at 375 and 390: no clipping, no
horizontal scroll.
Only this breakpoint is touched -- the desktop table is unchanged.
--------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
.ohb2-body .ohb2-sizes-table {
flex-wrap: nowrap;
gap: 0;
}
.ohb2-body .ohb2-sizes-col {
flex: 1 1 0;
min-width: 0;
padding: 2px 4px 2px 0;
}
.ohb2-body .ohb2-sizes-col:last-child {
padding-right: 0;
}
.ohb2-body .ohb2-sizes-col strong,
.ohb2-body .ohb2-sizes-col ul li {
font-size: clamp(12px, 3.4vw, 17px);
white-space: nowrap;
}
}