/* ==========================================================================
Responsive - desktop-first overrides down to mobile
========================================================================== */
/* ---- Indoor sub-page section tweaks (mobile) ---- */
@media (max-width: 560px) {
/* Roller "How it works": reveal the faint illustration bg (it was washed out
by the 0.76 white scrim - invisible on mobile). */
.roller-hiw__bg { opacity: 1; }
.roller-hiw__scrim { background: rgba(255, 255, 255, 0.3); }
[class*="page-template-page-indoor"] .styles-row__media { height: 280px; aspect-ratio: auto; }
[class*="page-template-page-indoor"] .sfold-env-card { padding: 24px; gap: 16px; }
}
/* ---- <= 1200px ---- */
@media (max-width: 1200px) {
.site-header__cta { padding: 0.75rem 1.2rem; }
.primary-nav__list { gap: 1.1rem; }
}
/* ---- <= 1024px : tablet ---- */
@media (max-width: 1024px) {
.split { grid-template-columns: 1fr; gap: 2rem; }
.split--media-right .split__media { order: 0; }
[class*="page-template-page-indoor"] .product-intro__body > .product-intro__prompt,
[class*="page-template-page-indoor"] .product-intro__body > .product-intro__btn { display: none; }
[class*="page-template-page-indoor"] .product-intro__showroom { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
[class*="page-template-page-indoor"] .product-intro__showroom .product-intro__prompt { font-family: var(--font-heading); font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: 0; text-align: center; margin: 0; }
.features .split .split__media { order: -1; }
/* stacked: full-bleed rows collapse to one column */
.split--bleed { grid-template-columns: 1fr; }
.split--bleed .split__body,
.split--bleed .values__body { padding-inline: var(--gutter); }
.split--bleed .split__media,
.split--bleed .values__media { min-height: 0; }
.split--bleed .media { aspect-ratio: 3 / 2; height: auto; }
/* Stacked About video (landscape): keep a decent height - tallest near 1024,
tapering down to the 340 floor around ~586px, where it's fine on its own. */
.values--has-video .values__video { min-height: clamp(340px, 58vw, 620px); }
/* About-block: the bespoke 1.3fr/1fr row out-specifies .split--bleed, so
collapse it explicitly; image drops below the copy as a landscape band. */
.about-block .about-block__row { grid-template-columns: 1fr; }
.about-block__media { aspect-ratio: 16 / 10; height: auto; }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.gallery__grid { grid-auto-rows: 200px; }
/* Two-row split (769-1024px): widen the cards toward the map edges and keep a
suitable ~20px side margin instead of the old narrow 640px block. */
.contact__cards { grid-template-columns: repeat(2, 1fr); max-width: min(920px, 100% - 40px); margin-top: 20px; padding-inline: 0; }
.contact-card__value br { display: none; }
.stats { margin-top: -2.5rem; }
.site-footer__grid { grid-template-columns: 1fr 1fr; }
.site-footer__brand { grid-column: 1 / -1; }
}
/* ---- <= 860px : nav collapses to drawer ---- */
@media (max-width: 860px) {
.nav-toggle { display: block; }
/* Shorter header on mobile (was 95px - a touch tall). 80px also lines the
header hamburger up with the drawer's close (X), which sits in a bar of the
same height. Desktop keeps 95px. */
:root { --nav-h: 80px; }
.site-header__cta { display: inline-flex; padding: 0.6rem 1rem; font-size: 0.875rem; min-height: 40px; }
.site-header__actions { display: flex; align-items: center; gap: 0.6rem; }
body.nav-open { overflow: hidden; }
.primary-nav {
position: fixed;
inset: 0;
width: 100%;
height: 100dvh;
background: #fff;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
z-index: 110; /* above the header (100) so it fully covers it */
overflow: hidden; /* bar + footer stay put; the link list scrolls */
margin: 0;
display: flex;
flex-direction: column;
}
.nav-open .primary-nav { transform: translateX(0); visibility: visible; transition: transform 0.35s var(--ease), visibility 0s; }
/* Top bar */
.primary-nav__bar {
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px; min-height: var(--nav-h); flex: none;
border-bottom: 1px solid var(--c-primary);
}
.primary-nav__logo { flex: none; }
.primary-nav__logo-img { display: block; height: 29px; width: auto; }
.nav-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: #101010; background: none; }
.nav-close svg { width: 20px; height: 20px; }
.primary-nav__list { --fit: 1; flex: 1 1 auto; min-height: 0; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; margin: 24px 0 0; }
.primary-nav__list > .menu-item { position: relative; border-bottom: 1px solid #e0e1e1; }
#mobile-nav .primary-nav__list > .menu-item > a {
display: flex; align-items: center;
padding: calc(8px * var(--fit)) 16px; min-height: calc(50px * var(--fit));
font-family: inherit; font-size: 20px; line-height: 1.3; font-weight: 400;
letter-spacing: 0.15px; color: #101010;
}
.primary-nav__list > .menu-item > a::after { display: none; }
.primary-nav__list > .current-menu-item { background: #ebf3fe; border-bottom-color: transparent; }
#mobile-nav .primary-nav__list > .current-menu-item > a { color: var(--c-primary); font-weight: 600; }
/* Active SECTION: when a sub-page is open, its parent item gets a blue, slightly
heavier bottom border + a touch more weight (indicates the current section). */
#mobile-nav .primary-nav__list > .current-menu-parent,
#mobile-nav .primary-nav__list > .current-menu-ancestor,
#mobile-nav .primary-nav__list > .current-page-parent,
#mobile-nav .primary-nav__list > .current-page-ancestor { border-bottom: 2px solid var(--c-primary); }
#mobile-nav .primary-nav__list > .current-menu-parent > a,
#mobile-nav .primary-nav__list > .current-menu-ancestor > a,
#mobile-nav .primary-nav__list > .current-page-parent > a,
#mobile-nav .primary-nav__list > .current-page-ancestor > a { font-weight: 500; }
.menu-item-has-children > a { padding-right: 56px; }
/* Chevron toggle for items with children */
.menu-item-has-children > a::before { display: none; }
.submenu-toggle {
display: block; position: absolute; right: 8px; top: 25px;
transform: translateY(-50%);
width: 40px; height: 40px; background: none;
}
.submenu-toggle::before {
content: ""; position: absolute; top: 50%; left: 50%;
width: 9px; height: 9px; margin: -6px 0 0 -4px;
border-right: 2px solid #101010; border-bottom: 2px solid #101010;
transform: rotate(45deg);
transition: transform var(--dur-fast) var(--ease);
}
.submenu-open .submenu-toggle::before { transform: rotate(-135deg); margin-top: -2px; }
/* Sub-menu - display-toggled (so the fit logic can measure content height and
compress rows to avoid a scroll). Main + sub links both navigate. */
#mobile-nav .sub-menu {
position: static; opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: 0; border-radius: 0; margin: 0; padding: 0;
background: #f5f8fd; display: none;
}
#mobile-nav .submenu-open > .sub-menu { display: block; }
/* Sub-links: ID-scoped so colour beats the home/overlay white-nav rules
(otherwise invisible on the light sub-menu bg). Indented, compressible. */
#mobile-nav .sub-menu .menu-item a { display: block; padding: calc(11px * var(--fit)) 16px calc(11px * var(--fit)) 32px; font-size: 16px; font-weight: 400; color: #2c2d33; white-space: normal; border-radius: 0; border-top: 1px solid #e0e1e1; }
#mobile-nav .sub-menu .menu-item + .menu-item::before { display: none; }
/* Footer: CTA pill + quick contact */
.primary-nav__foot { display: block; flex: none; }
.primary-nav__cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 10px; padding: 12px 32px; min-height: 46px;
background: var(--c-primary); color: #fff; border-radius: 42px;
font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.15px;
box-shadow: 0 2px 7.3px rgba(0, 0, 0, 0.18);
}
.primary-nav__cta-chev { width: 16px; height: 16px; flex: none; }
.primary-nav__contact {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 16px 24px; border-top: 1px solid #e0e1e1;
}
.primary-nav__contact-info { display: flex; flex-direction: column; gap: 4px; }
.primary-nav__contact-label { font-family: inherit; font-size: 10px; font-weight: 500; letter-spacing: 0.15px; color: #62636c; }
.primary-nav__phone { font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 23px; color: #000; }
.primary-nav__call {
display: grid; place-items: center; flex: none;
width: 40px; height: 40px; border-radius: 99px;
background: #ebf3fe; border: 1px solid var(--c-primary); color: var(--c-primary);
}
.primary-nav__call svg { width: 16px; height: 16px; }
}
/* ---- <= 768px ---- */
@media (max-width: 768px) {
.grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
.gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
.gallery__item--1 { grid-column: span 2; grid-row: span 1; }
.gallery__item--4 { grid-column: span 2; }
.gallery__head { flex-direction: column; align-items: flex-start; }
.about-block__cards { grid-template-columns: 1fr; order: 2; width: 100%; text-align: left; }
.about-block__body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.about-block__cta { order: 3; }
.intro__heading { text-align: center; }
.intro__heading mark { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: var(--c-primary); padding: 0.04em 0.2em; }
.intro__heading mark::before { display: none; }
.gallery__head { align-items: center; text-align: center; }
/* About page: Values + Showroom(contact) heads are LEFT on mobile (designer's
mobile frame lefts these; only hero + final CTA are centred). */
.values__head, .values__head h2, .values__head .eyebrow { text-align: left; }
.contact__head { text-align: left; align-items: flex-start; margin-inline: 0; padding-inline: 0; }
.contact__head h2, .contact__head p { text-align: left; margin-inline: 0; }
/* Reveal animations: use vertical offset on mobile so the horizontal
translateX(±32px) can't create sideways scroll before elements animate in. */
[data-reveal="left"], [data-reveal="right"] { transform: translateY(24px); }
/* Heroes: drop the designer's desktop line-breaks and let copy reflow to the
phone width (forced
segments were overflowing). Guideline for all pages. */
.page-hero h1 br, .page-hero__sub br, .hero__title br, .hero__text br { display: none; }
.page-hero h1, .hero__title { overflow-wrap: break-word; }
/* Product/landing heroes centre their content on mobile (designer's mobile
frames centre the title, sub and button; desktop stays left-aligned). */
.page-hero__content { text-align: center; align-items: center; }
.auto-hero__inner { text-align: center; align-items: center; }
.site-header__cta { display: none !important; }
.home .site-main > .hero .hero__inner { padding-top: calc(var(--nav-h) + 1.25rem); }
/* testimonials: show only the active card on small screens */
.testimonial:not(.is-active) { display: none; }
.testimonial.is-active { width: min(520px, 86vw); padding: 24px 20px; }
/* Arrows: 24px, sitting just OUTSIDE the card edge (no overlap) in the gutter. */
.tstm__arrow { width: 24px; height: 24px; font-size: 0.8rem; }
.tstm__arrow--prev { left: -15px; }
.tstm__arrow--next { right: -15px; }
.feature { grid-template-columns: 1fr; }
.feature--media-right .feature__media { order: 0; }
.values__grid { grid-template-columns: 1fr; }
.benefits__grid { grid-template-columns: 1fr; }
.contact__cards { grid-template-columns: 1fr; margin-top: 1.5rem; max-width: 420px; }
.stats { grid-template-columns: 1fr; }
.stat + .stat { border-left: 0; border-top: 1px solid var(--c-border); padding-top: 1.5rem; }
.hero { min-height: 70vh; }
.form-grid-2 { grid-template-columns: 1fr; }
}
/* ---- Contact cards: tidy the wrapped rows (tablet / small-desktop) ----
Widen the single-column stack and round the corners while the cards are
split into two rows (769-1024) or one card per row (561-768). The >1024
desktop grid and the <=560 mobile Figma layout are deliberately left as-is. */
@media (min-width: 561px) and (max-width: 768px) {
.contact__cards { max-width: min(560px, 100% - 40px); padding-inline: 0; }
/* Single-column cards: give the map the same taller, inset, rounded treatment
used at <=560 (the mobile map image is already served up to 767px), and use
the matching mobile pins so they line up with that image. */
.contact__map { width: auto; aspect-ratio: auto; height: 440px; border-radius: 12px; overflow: hidden; margin-inline: 16px; }
.contact__map .map-pin { display: none; --pin-x: var(--pin-mx); --pin-y: var(--pin-my); }
.contact__map .map-pin[data-show-mobile="1"] { display: flex; gap: 0; }
}
@media (min-width: 561px) and (max-width: 1024px) {
.contact-card { border-radius: 12px; }
}
/* ---- <= 560px : phone ---- */
@media (max-width: 560px) {
.site-footer__grid { grid-template-columns: 1fr; }
.site-footer__office li { white-space: normal; align-items: flex-start; }
.site-footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; gap: 0.75rem; }
.site-footer__legal { flex-wrap: wrap; justify-content: flex-start; }
.gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
.gallery__item--1, .gallery__item--4 { grid-column: span 1; }
/* Home gallery CAROUSEL tile (portrait 505/640): its 360px width floor forced
~456px height. Narrow it on phones so it's shorter and peeks the next slide. */
.gallery__track .gallery__item { width: 80vw; }
/* full-width content buttons + comfortable tap targets */
.btn { width: 100%; min-height: var(--tap); }
.btn-row { flex-direction: column; }
.hero__actions .btn { width: auto; }
/* compact/inline buttons must not stretch */
.site-header__cta { width: auto; min-height: 0; }
/* Global section vertical padding: 64px floor was too tall on phones. */
:root { --section-py: 2.75rem; --gutter: 1rem; }
:root { --nav-h: 72px; }
.site-header { border-bottom-width: 0; }
/* Product marquee strip: shorter band, lighter item type. */
.marquee { padding-block: 1.5rem; }
.marquee__track { gap: 2.75rem; }
.marquee__item { font-size: 1.375rem; }
.site-footer { padding-block: 2.5rem; }
.site-footer__grid { gap: 2rem; }
.intro__heading,
.product-intro__heading, .product-operation__heading, .product-process__heading,
.flex-sec__heading, .styles-sec__title, .styles-sec--texture .styles-row__title,
.zt-intro__heading, .zt-materials__title, .zt-3d__heading,
.auto-head h2, .auto-intro__body h2,
.sfold-diffusion__heading, .sfold-env__heading,
.sd-walk__heading, .sd-benefits__heading, .sd-apps__heading,
.pl-tilt__heading, .pl-energy__heading, .pl-materials__heading, .pl-windows__heading,
.roller-hiw__heading,
.aw-arm__heading, .aw-features__heading, .aw-protect__heading, .aw-mat__heading, .aw-compare__heading,
/* Home section headings (were missed - still at desktop 32px/26px). */
.feature__heading, .gallery__heading, .about-block__heading, .tstm__heading {
font-size: 24px; line-height: 1.2; letter-spacing: 0; font-weight: 700;
}
.site-main p { font-size: 14px; line-height: 1.5; }
/* Hero descriptions (landing/product heroes; NOT home's .hero) also 14px. */
.page-hero .page-hero__sub { font-size: 14px; line-height: 1.5; }
.intro-card p, .about-card p,
.op-card__text, .flex-card__text, .sfold-env-card__text,
.pl-tilt-card__text, .pl-energy-card__text, .pl-material__text,
.aw-feature__text, .aw-mat-card__title ~ p,
.auto-range__card p, .sd-app__text, .gallery2-card__body p,
.feature__text, .feature__text p {
font-size: 14px; line-height: 1.5; }
.intro__cols, .about-block__cards { gap: 20px; }
/* Feature (Indoor/Ziptrak/Awnings) image band: fixed 240px on mobile instead
of the desktop 1:1 square (which was far too tall stacked). */
.feature__media { aspect-ratio: auto; height: 240px; min-height: 0; }
.about-card__icon { display: none; }
.about-block__body .text-muted { font-size: 14px; line-height: 1.5; }
.about-card__title { font-size: 14px; line-height: 1.4; margin-bottom: 6px; }
/* Breathing room between the intro copy above and the first card. */
.about-block__cards { margin-top: 24px; }
.about-card { padding: 16px; }
.testimonial__body { gap: 16px; }
/* Outer padding 48px top/bottom (16px sides come from the container gutter). */
.site-footer { padding-top: 48px; padding-bottom: 48px; }
.site-footer a { color: #eff0f3; }
.site-footer a:hover { color: #fff; }
/* Brand: logo, "Office" label, contact rows. */
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__logo-svg { height: 39px; margin-bottom: 0; }
.site-footer__office-label { font-size: 14px; line-height: 21px; font-weight: 600; text-transform: none; letter-spacing: 0.15px; color: #fff; margin-bottom: 0; }
.site-footer__office { margin-top: -4px; }
.site-footer__office { gap: 12px; font-size: 12px; line-height: 18px; }
.site-footer__office li { gap: 8px; align-items: center; white-space: normal; }
.site-footer__ico svg { width: 24px; height: 24px; }
/* Section headings: Inter-style 14px semibold (was display font, ~17px). */
.site-footer__heading { font-family: inherit; font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: 0.15px; color: #eff0f3; margin-bottom: 0; }
/* Link columns: 8px rhythm, 12px links. */
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
.site-footer__col ul { gap: 8px; font-size: 12px; line-height: 18px; }
/* Socials: hide the desktop copy, show the standalone mobile copy. */
.site-footer__social--desktop { display: none; }
.site-footer__social--mobile { display: block; }
.site-footer__social .social-list--links { gap: 16px; margin-top: 0; }
.site-footer__social .social-list--links svg { width: 24px; height: 24px; }
/* Bottom bar: no divider, tight rhythm; copyright + legal at 10px. */
.site-footer__bottom { border-top: 0; margin-top: 0; padding-block: 0; gap: 8px; }
.site-footer__bottom p { font-size: 10px; line-height: 15px; color: #fff; }
.site-footer__legal { gap: 12px; font-size: 10px; line-height: 15px; }
.site-footer__legal a { color: #fff; }
}
@media (max-width: 560px) {
[class*="page-template-page-indoor"] .page-hero h1 { font-size: 34px; line-height: 43px; }
[class*="page-template-page-indoor"] .page-hero__sub { font-size: 14px; line-height: 21px; }
[class*="page-template-page-indoor"] .key-benefits__title h2 { font-size: 30px; line-height: 38px; font-weight: 700; }
[class*="page-template-page-indoor"] .key-benefits__text { font-size: 14px; line-height: 21px; }
[class*="page-template-page-indoor"] .key-benefits__prompt { font-size: 28px; line-height: 35px; font-weight: 700; }
[class*="page-template-page-indoor"] .product-row__heading { font-size: 24px; line-height: 30px; }
[class*="page-template-page-indoor"] .product-row__text { font-size: 14px; line-height: 21px; }
/* Accordion (whyus) heading + triggers + body. */
[class*="page-template-page-indoor"] .split__body h2 { font-size: 24px; line-height: 30px; }
[class*="page-template-page-indoor"] .eyebrow--muted { font-size: 14px; line-height: 18px; }
[class*="page-template-page-indoor"] .accordion__head { font-size: 18px; line-height: 23px; }
[class*="page-template-page-indoor"] .accordion__body p { font-size: 14px; line-height: 21px; }
[class*="page-template-page-indoor"] .cta__heading { font-size: 28px; line-height: 35px; font-weight: 700; }
[class*="page-template-page-indoor"] .cta__text { font-size: 14px; line-height: 21px; }
/* Product image band (nudged 240→224 per review). */
[class*="page-template-page-indoor"] .product-row__media { height: 224px; min-height: 0; aspect-ratio: auto; }
[class*="page-template-page-indoor"] .product-row__media img { width: 100%; height: 100%; object-fit: cover; }
[class*="page-template-page-indoor"] .product-row a.btn { width: auto; align-self: flex-start; min-height: 44px; }
/* Benefit icon tile + radius nudged smaller per review (48→44, 20→16). */
[class*="page-template-page-indoor"] .key-benefit__icon { width: 44px; height: 44px; }
[class*="page-template-page-indoor"] .key-benefit__icon svg { width: 26px; height: 26px; }
[class*="page-template-page-indoor"] .key-benefit { border-radius: 16px; gap: 16px; }
[class*="page-template-page-indoor"] .key-benefits__cards { gap: 16px; }
[class*="page-template-page-indoor"] .btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.product-row__caption { display: none; }
/* Bottom-CTA buttons: narrower (275, not full) + taller (48); both equal size,
centred. Secondary is the white-outline button (styled in sections.css). */
[class*="page-template-page-indoor"] .cta__actions { align-items: center; }
[class*="page-template-page-indoor"] .cta .btn { width: 275px; max-width: 100%; min-height: 48px; }
[class*="page-template-page-indoor"] .cta__text { margin-bottom: 24px; }
[class*="page-template-page-indoor"] .cta { padding-top: 52px; padding-bottom: 52px; }
.page-template-page-indoor-product .site-main h3 { font-size: 18px; line-height: 1.3; }
/* Hero: nudged to 535px so the vertically-centred content sits higher. */
[class*="page-template-page-indoor"] .page-hero { min-height: 535px; }
[class*="page-template-page-indoor"] .page-hero .btn { width: auto; min-height: 56px; padding: 10px 32px; font-size: 16px; }
[class*="page-template-page-indoor"] .cta__heading { text-align: center; line-height: 1.1; }
[class*="page-template-page-indoor"] .cta__text { text-align: center; }
/* Accordion rows: less vertical padding per review (16→12). */
[class*="page-template-page-indoor"] .accordion__head { padding-top: 12px; padding-bottom: 12px; }
[class*="page-template-page-indoor"] .key-benefits__title { row-gap: 12px; }
[class*="page-template-page-indoor"] .whyus { padding-top: 32px; }
}
@media (max-width: 900px) {
[class*="page-template-page-indoor"] .key-benefits__title > .key-benefits__prompt,
[class*="page-template-page-indoor"] .key-benefits__title > .key-benefits__btn { display: none; }
[class*="page-template-page-indoor"] .key-benefits__grid { row-gap: 32px; }
[class*="page-template-page-indoor"] .key-benefits__showroom { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 0; }
[class*="page-template-page-indoor"] .key-benefits__showroom .key-benefits__prompt { text-align: center; }
}
@media (max-width: 560px) {
.product-process { padding-top: 48px; padding-bottom: 48px; }
.product-process__head { gap: 24px; margin-bottom: 48px; }
.product-process .eyebrow { font-size: 16px; line-height: 20px; letter-spacing: 0.15px; color: #63686d; }
.product-process__heading { font-size: 30px; line-height: 38px; letter-spacing: 0; }
.site-main .product-process__sub { font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #62636c; }
.product-process__steps { gap: 32px; }
.process-step { padding-top: 48px; gap: 24px; }
.page-template-page-indoor-product .site-main .process-step__title,
.process-step__title { font-size: 18px; line-height: 27px; }
.site-main .process-step__text { font-size: 16px; line-height: 24px; letter-spacing: 0.15px; }
}
@media (max-width: 560px) {
.page-hero h1,
.auto-hero h1 { font-size: 34px; line-height: 43px; letter-spacing: 0; font-weight: 700; }
.site-main .eyebrow,
.product-intro .eyebrow,
.product-operation .eyebrow { font-size: 14px; line-height: 18px; letter-spacing: 0.1px; font-weight: 600; }
.product-process .eyebrow { font-size: 16px; line-height: 20px; letter-spacing: 0.15px; }
/* `.intro__heading` is deliberately absent - it only exists on Home. */
.product-intro__heading, .product-operation__heading, .product-process__heading,
.flex-sec__heading, .styles-sec__title, .styles-sec--texture .styles-row__title,
.zt-intro__heading, .zt-materials__title, .zt-3d__heading,
.auto-head h2, .auto-intro__body h2,
.sfold-diffusion__heading, .sfold-env__heading,
.sd-walk__heading, .sd-benefits__heading, .sd-apps__heading,
.pl-tilt__heading, .pl-energy__heading, .pl-materials__heading, .pl-windows__heading,
.roller-hiw__heading,
.aw-arm__heading, .aw-features__heading, .aw-protect__heading, .aw-mat__heading, .aw-compare__heading {
line-height: 30px;
}
.product-process__heading { font-size: 30px; line-height: 38px; }
.sfold-env-card__title,
.aw-benefit__title,
.gal-row__title {
font-family: var(--font-heading);
font-size: 18px; line-height: 23px; font-weight: 700; letter-spacing: 0;
}
.op-card__title {
font-family: var(--font-body);
font-size: 24px; line-height: 36px; font-weight: 600; letter-spacing: 0.15px;
}
.page-template-page-indoor-product .site-main .styles-row__title,
.styles-row__title { font-size: 24px; line-height: 30px; letter-spacing: 0; }
.cta__heading { font-weight: 700; letter-spacing: 0; }
.page-slug-standard-awnings .cta__heading, .page-slug-crank-awnings .cta__heading,
.page-slug-automation .cta__heading, .page-slug-gallery .cta__heading {
font-size: 28px; line-height: 35px;
}
.page-slug-fixed-guide-awnings .cta__heading, .page-slug-folding-arm-awnings .cta__heading,
.page-slug-ziptrak .cta__heading {
font-size: 24px; line-height: 30px;
}
[class*="page-template-page-indoor"] .cta__heading { font-size: 28px; line-height: 35px; }
/* ---- Remaining bespoke card titles that were still off the scale. ---- */
.aw-compare-col__title { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: 0; }
.aw-arm-feat__title { font-weight: 700; }
.page-template-page-automation .auto-method h3,
.page-template-page-automation .auto-tile h3,
.page-template-page-automation .auto-range__card h3,
.page-template-page-automation .auto-env__txt h3 {
font-size: 18px; line-height: 23px; font-weight: 700; letter-spacing: 0;
}
.gal-featured__eyebrow { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: 0.1px; }
}
@media (max-width: 560px) {
:root { --section-py: 3rem; }
.sfold-env { padding-top: 64px; padding-bottom: 64px; }
.sfold-env__head { margin-bottom: 32px; }
/* Env cards outside the indoor templates need the same 24px padding. */
.sfold-env-card { padding: 24px; gap: 16px; }
.styles-sec { padding: 48px 16px; }
.styles-sec__head { gap: 16px; }
.styles-sec__inner { gap: 40px; }
.styles-row { gap: 20px; }
.site-main .styles-row__finishes-title { font-size: 18px; line-height: 27px; font-weight: 600; }
.site-main .styles-row__finishes-text { font-size: 16px; line-height: 24px; font-weight: 500; }
.aw-protect { padding-top: 56px; padding-bottom: 56px; }
.product-intro__media { height: 240px; aspect-ratio: auto; overflow: hidden; }
.product-intro__media img { width: 100%; height: 100%; object-fit: cover; }
.product-intro__showroom .btn { width: 100%; min-height: 44px; font-size: 16px; line-height: 24px; font-weight: 500; }
.site-main .product-intro__showroom .key-benefits__prompt,
.site-main .product-intro__showroom > p { font-size: 24px; line-height: 30px; font-weight: 700; font-family: var(--font-heading); text-align: center; }
.cta__actions { gap: 12px; }
.site-main .cta .btn { font-size: 14px; line-height: 21px; }
[class*="page-template-page-indoor"] .cta .btn--primary { width: 275px; min-height: 41px; }
[class*="page-template-page-indoor"] .cta .btn--underline { width: 274px; min-height: 38px; border-radius: 24px; }
.page-hero .container { padding-inline: 24px; }
.page-hero h1 { letter-spacing: 0; }
.page-hero .btn { font-size: 16px; line-height: 24px; }
.page-slug-roller-blinds .page-hero, .page-slug-honeycomb-blinds .page-hero { min-height: 569px; } /* roller, honeycomb */
.page-slug-plantation-shutters .page-hero { min-height: 580px; } /* plantation */
.page-slug-smartdrapes .page-hero, .page-slug-s-fold-sheer-curtains .page-hero { min-height: 574px; } /* smartdrapes, s-fold */
.page-slug-standard-awnings .page-hero, .page-slug-crank-awnings .page-hero,
.page-slug-fixed-guide-awnings .page-hero { min-height: 706px; } /* standard, crank, fixed-guide */
.page-slug-folding-arm-awnings .page-hero { min-height: 619px; } /* folding-arm */
.page-slug-ziptrak .page-hero { min-height: 658px; } /* ziptrak */
.page-slug-automation .auto-hero { min-height: 618px; } /* automation */
.page-slug-gallery .page-hero { min-height: 618px; } /* gallery */
.page-slug-about-us .page-hero { min-height: 560px; } /* about */
.page-slug-contact-us .page-hero { min-height: 724px; } /* contact */
.roller-hiw__text { gap: 16px; }
.roller-hiw__cards { gap: 12px; }
.rhiw-card { padding: 32px; border-radius: 24px; }
.rhiw-card__meta { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.site-main .rhiw-card__label { font-size: 14px; line-height: 21px; font-weight: 600; }
.site-main .rhiw-card__sub { font-size: 12px; line-height: 18px; font-weight: 500; }
.product-operation__head { gap: 12px; }
.site-main .product-operation__cards { gap: 20px; }
.site-main .op-card { padding: 24px; gap: 16px; border-radius: 20px; }
.site-main .op-card__icon { width: 48px; height: 48px; }
.page-template-page-indoor-product .site-main .op-card__title,
.site-main .op-card__title { font-family: var(--font-body); font-size: 24px; line-height: 36px; font-weight: 600; letter-spacing: 0.15px; }
.site-main .op-card__text { font-size: 14px; line-height: 21px; }
.styles-row__details { gap: 24px; }
.styles-row__qualities { gap: 24px; padding-top: 0; }
.styles-row__tags li { box-sizing: border-box; height: 26px; }
.zt-intro, .zt-materials, .zt-3d { padding-top: 48px; padding-bottom: 48px; }
.zt-benefits { gap: 20px; padding-top: 0; padding-bottom: 0; }
.zt-benefits > li { gap: 16px; align-items: center; }
.zt-benefits__ico { width: 44px; height: 44px; flex: none; border-radius: 12px; }
.zt-benefits > li > div { gap: 2px; }
.site-main .zt-benefits strong { font-size: 14px; line-height: 21px; font-weight: 600; }
.site-main .zt-benefits span { font-size: 12px; line-height: 18px; font-weight: 400; }
.zt-materials__head { gap: 8px; }
.page-slug-honeycomb-blinds .flex-sec--feature-grid { padding-top: 56px; padding-bottom: 56px; }
/* Automation: control-methods and where-they-work-best are 64px; the rest 48px. */
.auto-methods, .auto-env { padding-top: 64px; padding-bottom: 64px; }
.auto-intro, .auto-power, .auto-range, .auto-sensors { padding-top: 48px; padding-bottom: 48px; }
/* Awnings: crank/fixed-guide operation bands are 40px, protection 56px. */
.page-slug-crank-awnings .aw-arm, .page-slug-fixed-guide-awnings .aw-guide { padding-top: 40px; padding-bottom: 40px; }
/* Crank materials + comparison bands are 64px. */
.page-slug-crank-awnings .aw-mat, .page-slug-fixed-guide-awnings .aw-compare { padding-top: 64px; padding-bottom: 64px; }
/* Gallery: project grid is 32px top / 48px bottom, CTA 64px with a 24px gutter. */
.gal-projects { padding-top: 32px; padding-bottom: 48px; }
.page-slug-gallery .cta, .page-slug-folding-arm-awnings .cta { padding-top: 64px; padding-bottom: 64px; }
.page-slug-gallery .cta .container, .page-slug-folding-arm-awnings .cta .container { padding-inline: 24px; }
.contact2-bar { padding-top: 24px; padding-bottom: 24px; }
.contact2-bar .container { padding-inline: 20px; }
.contact2-main, .contact2-map-wrap { padding-top: 48px; padding-bottom: 48px; }
/* About: every body section is 48px; the form block uses a 20px gutter. */
.page-template-page-about .brand-story,
.page-template-page-about .values,
.page-template-page-about .whyus,
.page-template-page-about .contact { padding-top: 48px; padding-bottom: 48px; }
.page-template-page-about .form-section { padding-top: 48px; padding-bottom: 48px; }
.page-template-page-about .form-section .container { padding-inline: 20px; }
.page-slug-plantation-shutters .site-main,
.page-slug-crank-awnings .site-main { display: grid; grid-template-columns: 100%; }
.page-slug-plantation-shutters .site-main > *,
.page-slug-crank-awnings .site-main > * { order: 99; }
.page-slug-plantation-shutters .site-main > .page-hero { order: 1; }
.page-slug-plantation-shutters .site-main > .product-intro { order: 2; }
.page-slug-plantation-shutters .site-main > .flex-sec { order: 3; }
.page-slug-plantation-shutters .site-main > .pl-tilt { order: 4; }
.page-slug-plantation-shutters .site-main > .pl-energy { order: 5; }
.page-slug-plantation-shutters .site-main > .pl-windows { order: 6; } /* before materials */
.page-slug-plantation-shutters .site-main > .pl-materials { order: 7; } /* after windows */
.page-slug-plantation-shutters .site-main > .product-operation { order: 8; }
.page-slug-plantation-shutters .site-main > .product-process { order: 9; }
.page-slug-plantation-shutters .site-main > .cta { order: 10; }
.page-slug-crank-awnings .site-main > .page-hero { order: 1; }
.page-slug-crank-awnings .site-main > .product-intro { order: 2; }
.page-slug-crank-awnings .site-main > .aw-arm { order: 3; }
.page-slug-crank-awnings .site-main > .aw-mat { order: 4; } /* before protection */
.page-slug-crank-awnings .site-main > .aw-protect { order: 5; } /* after materials */
.page-slug-crank-awnings .site-main > .product-operation { order: 6; }
.page-slug-crank-awnings .site-main > .product-process { order: 7; }
.page-slug-crank-awnings .site-main > .cta { order: 8; }
/* --- Gallery "featured product" - treated as a standard section + split. --- */
.gal-featured__head { padding-bottom: 24px; }
/* Section heading = H4 24/30 like every other section heading (was H2 30/38). */
.site-main .gal-featured__title { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: 0; }
.site-main .gal-featured__desc { font-size: 14px; line-height: 21px; }
.site-main .gal-featured__specs { font-size: 14px; line-height: 21px; }
.gal-featured .btn { min-height: 44px; font-size: 16px; line-height: 24px; padding: 10px 32px; }
.page-template-page-about .accordion__head { font-size: 18px; line-height: 23px; padding-top: 12px; padding-bottom: 12px; }
.page-template-page-about .accordion__body p { font-size: 14px; line-height: 21px; }
.page-template-page-about .whyus .eyebrow { font-size: 14px; line-height: 18px; }
.zt-schematic { padding: 24px; }
.site-main .zt-schematic__head span { font-size: 14px; line-height: 21px; }
.site-main .zt-schematic__stats b { font-size: 32px; line-height: 40px; letter-spacing: 0.25px; }
.site-main .zt-schematic__stats span { font-size: 10px; line-height: 15px; }
.site-main .zt-schematic__label { font-size: 12px; line-height: 18px; }
.zt-schematic__gallery { gap: 24px; padding-top: 24px; }
.site-main .zt-schematic__more { font-size: 14px; line-height: 21px; }
.page-slug-fixed-guide-awnings .aw-mat { padding-top: 48px; padding-bottom: 48px; }
/* ---- About + Contact: bespoke headings that never got a pass. ---- */
.page-template-page-about .site-main h2 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: 0; }
.page-template-page-about .site-main h3 { font-size: 18px; line-height: 23px; font-weight: 700; letter-spacing: 0; }
.page-template-page-about .form-section h2 { font-size: 28px; line-height: 35px; }
.contact2-card__title,
.page-template-page-contact .site-main h2 { font-size: 18px; line-height: 23px; font-weight: 700; letter-spacing: 0; }
}
@media (min-width: 1025px) {
.gallery__head { --gal-h2: clamp(2rem, 0.2857rem + 3.5714vw, 3.5rem); align-items: flex-start; gap: 40px; margin-bottom: 80px; }
/* Text column: 940px wide, children evenly spaced 24px apart. */
.gallery__head-text { display: flex; flex-direction: column; flex: 1 1 auto; gap: 24px; max-width: 940px; }
.gallery__eyebrow { margin-bottom: 0; line-height: 20px; }
.gallery__heading { margin-bottom: 0; font-size: var(--gal-h2); line-height: 1.268; }
.gallery__intro { gap: 24px; }
.gallery__intro p:first-child { max-width: 746px; }
.gallery__btn-wrap { flex: 0 0 300px; justify-content: flex-end; align-items: flex-start; margin-top: calc(44px + var(--gal-h2) * 0.2054); }
.gallery__btn { min-height: 56px; padding: 10px 32px; gap: 12px; border-radius: 42px; font-size: 16px; line-height: 24px; font-weight: 500; }
.gallery__item { width: clamp(340px, 35.07vw, 505px); }
}
@media (min-width: 1025px) {
.gallery__heading, .tstm__heading { letter-spacing: -0.02em; }
}
@media (min-width: 1441px) {
:root { --gutter: 5.5556vw; }
}
@media (min-width: 1025px) {
.cta .btn.btn--underline { font-size: 0.9375rem; line-height: 1.5; }
}
@media (max-width: 560px) {
.intro__heading,
.feature__heading,
.gallery__heading,
.about-block__heading,
.tstm__heading { line-height: 30px; }
}
@media (max-width: 560px) {
.hero__title { font-size: 34px; line-height: 43px; letter-spacing: 0; font-weight: 700; }
.site-main p.hero__text { font-size: 16px; line-height: 24px; }
.hero__actions .btn { font-size: 16px; line-height: 24px; font-weight: 600; }
.intro-card__title { font-family: var(--font-heading); font-size: 18px; line-height: 23px; font-weight: 700; letter-spacing: 0; }
/* "INDOOR BLINDS" / "OUTDOOR BLINDS" labels are Subheading 2. */
.about-card__title { font-family: var(--font-heading); font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: 0.1px; }
.testimonial__name { font-size: 14px; line-height: 21px; font-weight: 700; }
.site-main .testimonial__loc,
.site-main .testimonial__quote { font-size: 12px; line-height: 18px; }
.page-slug-home .cta__heading { font-size: 28px; line-height: 35px; }
.gallery__btn { font-size: 14px; line-height: 21px; font-weight: 600; }
}
@media (max-width: 560px) {
.page-template-page-awnings .product-row__media { height: 220px; aspect-ratio: auto; min-height: 0; }
.page-template-page-awnings .product-row__media img { width: 100%; height: 100%; object-fit: cover; }
.page-template-page-awnings .product-row__body { padding: 24px; }
.page-template-page-indoor-blinds .product-row__media { height: 240px; aspect-ratio: auto; min-height: 0; }
.page-template-page-indoor-blinds .product-row__body { padding: 24px; }
}
@media (max-width: 560px) {
.page-slug-awnings .page-hero { min-height: 628px; }
.page-slug-awnings .cta { padding-top: 48px; padding-bottom: 48px; }
[class*="page-template-page-indoor"].page-slug-indoor-blinds .page-hero,
.page-slug-indoor-blinds .page-hero { min-height: 569px; }
.page-slug-indoor-blinds .cta { padding-top: 64px; padding-bottom: 64px; }
.page-slug-indoor-blinds .cta .container { padding-inline: 20px; }
}
@media (max-width: 560px) {
.hero { min-height: 547px; }
.intro-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.intro-card__icon { width: 40px; height: 40px; flex: none; }
.intro-card > * { margin: 0; }
.intro__heading { margin-bottom: 40px; }
.testimonial { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.testimonial > * { margin: 0; }
.testimonial__avatar { width: 36px; height: 36px; flex: none; }
.testimonial__author { gap: 12px; }
.section__head { margin-bottom: 24px; }
.gallery__item { height: 353px; aspect-ratio: auto; }
.gallery__head { margin-bottom: 24px; gap: 24px; }
}
@media (max-width: 560px) {
.sd-apps { padding-top: 48px; padding-bottom: 48px; }
.sd-apps__head { gap: 12px; }
.sd-apps__heading br { display: none; }
.sd-apps__grid { gap: 32px; }
.sd-app { padding: 24px; gap: 12px; border-top: 1px solid #0353b6; }
.sd-app__ico { width: 52px; height: 52px; flex: none; }
.site-main .sd-app__text { font-size: 12px; line-height: 18px; }
.sd-app__media { height: 160px; aspect-ratio: auto; min-height: 0; }
.sd-app__media img { width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 1025px) {
.eyebrow { line-height: 20px; }
.btn { line-height: 1.5; }
.cta .btn.btn--underline { font-size: 12px; line-height: 18px; font-weight: 500; }
.cta .btn.btn--primary { font-size: 12px; line-height: 18px; font-weight: 500; }
}
@media (min-width: 1025px) {
.hero__title { font-size: var(--fs-h1); line-height: 1.3; letter-spacing: 0.5px; }
.marquee__item { font-size: 24px; line-height: 1.265; }
.tstm__heading { font-size: var(--fs-h2); line-height: 1.268; }
.intro__heading { font-size: var(--fs-h2); line-height: 1.268; }
.intro-card__title { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: 0; }
.about-block__heading { line-height: 1.262; }
.about-card__title { line-height: 1.25; } /* H7 24/30; mobile keeps 14/18 */
.styles-row__title { font-size: var(--fs-h3); line-height: 1.25; }
.styles-sec--texture .styles-row__title { font-size: var(--fs-h2); line-height: 1.268; }
.feature__heading { line-height: 1.268; }
}
.map-pin__label { line-height: 18px; }
.eyebrow { line-height: 1.25; } /* Subheading 1 = 16/20 */
.brand-story h2 { font-size: var(--fs-h2); line-height: 1.268; } /* H2 56/71 */
.values__head h2,
.contact__head h2,
.form-section__head h2 { font-size: var(--fs-h3); line-height: 1.25; } /* H3 48/60 */
.values__item h3 { line-height: 1.25; } /* H7 24/30 */
.stat__num,
.stat-hero__num,
.page-hero__stat-num { line-height: 1.25; }
@media (min-width: 1025px) {
.site-footer > .container { padding-inline: calc(var(--gutter) * 0.8); }
}
.gallery__track { padding-left: var(--gutter); padding-right: var(--gutter); }
/* Fabric / textures band: its own clamp topped out at 80 but tracked a
different curve, giving 58.4px at 1440 instead of 80. */
.styles-sec { padding-inline: var(--gutter); }
@media (min-width: 1025px) {
.split--bleed .split__body,
.split--bleed .values__body { padding-inline: var(--gutter); }
}
.site-main .stats-band > .container { padding-inline: var(--gutter); max-width: 100%; }
@media (min-width: 1025px) {
.page-template-page-about .split--bleed > .split__body,
.page-template-page-about .split--bleed > .values__body { padding-inline: var(--gutter); }
}
.product-intro__media .media { width: 100%; max-width: 100%; }
.product-intro__grid,
.product-intro--media-left .product-intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.product-intro--media-left .product-intro__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 1024px) {
.product-intro__grid,
.product-intro--media-left .product-intro__grid { grid-template-columns: minmax(0, 1fr); }
}
.about-block .about-block__row .split__body { padding-left: var(--gutter); }
@media (min-width: 1025px) {
/* 45.486% = 655/1440. Plus the gutter and the 56px column gap, the copy lands
on exactly 655 at 1440 and the image still bleeds to the right edge. */
.about-block .about-block__row { grid-template-columns: calc(var(--gutter) + 45.486% + 56px) 1fr; }
.about-block .about-block__row .split__body { padding-right: 56px; }
.about-block__heading { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; margin-block: 24px 12px; }
.about-block__body > p { font-size: 18px; line-height: 27px; letter-spacing: 0.15px; color: #2C2D33; margin-bottom: 0; }
.about-block__heading, .about-block__body > p { margin-right: -20px; }
.about-block__cta { margin-block: 40px 0; }
.about-block__cta .btn { min-height: 56px; }
.about-block__cards { margin-top: 56px; gap: 24px; }
.about-card { padding: 24px; }
.about-card__icon { width: 50px; height: 50px; margin-bottom: 24px; }
.about-card__title { font-weight: 600; letter-spacing: normal; margin-bottom: 8px; }
.about-card p { letter-spacing: 0.15px; }
}
@media (min-width: 1025px) {
.hero__content { max-width: 100%; }
.hero__title { max-width: 65.47%; }
.hero__text { max-width: 42.66%; }
}
/* ==========================================================================
Ziptrak "Design Your Blind" embed. The client's live site uses a flat
width:100% / height:1000 iframe; that is too tall for phones, so the height
steps down while staying generous enough for the tool's own UI.
Also: `.zt-3d__inner` was frozen at 1280px like the About block, so it never
scaled above 1440 - now follows the container.
========================================================================== */
.zt-3d__inner { max-width: 100%; }
.zt-3d__frame--embed { line-height: 0; background: #f4f5f7; }
.zt-3d__frame--embed iframe { display: block; width: 100%; height: 1000px; border: 0; }
@media (max-width: 1024px) { .zt-3d__frame--embed iframe { height: 820px; } }
@media (max-width: 560px) {
.zt-3d__frame--embed { height: 640px; overflow: hidden; }
.zt-3d__frame--embed iframe {
width: 600px;
height: 1072px;
transform: scale(0.5967);
transform-origin: top left;
}
}
/* Buttons: 1.5x at EVERY width (was desktop-only, so mobile still showed 14/14). */
.btn { line-height: 1.5; }
/* Eyebrows inside product sections set `line-height: 1` at 0,2,0 specificity,
which out-specified the global `.eyebrow` fix - matched here. */
.product-intro .eyebrow,
.product-operation .eyebrow,
.product-process .eyebrow { line-height: 20px; }
.marquee__item { line-height: 1.265; }
.brand-story h2 { font-size: var(--fs-h2); line-height: 1.268; } /* was max 64 */
.values__head h2,
.contact__head h2,
.form-section__head h2 { font-size: var(--fs-h3); line-height: 1.25; }
.whyus .split__body h2 { font-size: var(--fs-h3); line-height: 1.25; }
/* Card/label type that was off the scale or collapsed. */
.values__item h3 { line-height: 1.25; } /* 24/30 */
.values__card-title { font-size: 14px; line-height: 21px; } /* was 13/16 */
.contact2-hours b.contact2-closed { line-height: 21px; } /* 14/21 */
.stat-hero__label { line-height: 1.5; } /* Medium/20 = 20/30 */
.product-intro__prompt { line-height: 1.25; } /* 24/30 */
.stat__num,
.stat-hero__num,
.page-hero__stat-num { font-size: var(--fs-h6); line-height: 1.25; }
.cta { padding-block: clamp(3rem, 6.67vw, 6rem); }
.page-hero { padding-block: clamp(3rem, 4vw + var(--nav-h), 6rem); }
/* Final four from the sweep. */
.feature__text { line-height: 1.5; }
/* Subheading 1 is 16/20 at DESKTOP. Mobile uses Subheading 2 (14/18), set in
the mobile blocks above - so this must not leak below 1025. */
@media (min-width: 1025px) {
.site-main .eyebrow,
.site-main .eyebrow--muted { line-height: 20px; }
}
.zt-schematic__stats b { font-size: var(--fs-h6); line-height: 1.25; }
.zt-intro, .zt-materials, .zt-3d { padding-block: clamp(3rem, 2rem + 4.5vw, 6rem); }
.form-section { padding-block: clamp(3rem, 2rem + 4.5vw, 6rem); }
@media (max-width: 560px) {
.site-main .eyebrow,
.site-main .eyebrow--muted { line-height: 18px; }
[class*="page-template-page-indoor"] .product-intro__showroom .product-intro__prompt,
.site-main .product-intro__prompt { line-height: 30px; }
}
.gal-featured .btn { font-size: 16px; line-height: 24px; }
.key-benefits__title h2,
.key-benefits h2 { font-size: var(--fs-h2); line-height: 1.268; }
.stats-band h2 { font-size: var(--fs-h3); line-height: 1.25; }
@media (max-width: 560px) {
.site-main .product-process .eyebrow { font-size: 16px; line-height: 20px; }
.site-main .product-intro__prompt,
[class*="page-template-page-indoor"] .product-intro__showroom .product-intro__prompt { line-height: 1.25; }
}
/* ==========================================================================
Gallery lightbox - stretch fix, close button, and the Featured-style strip.
The stage used `background-size: cover` inside a fixed 70vh box, so any photo
whose aspect differed from that box was cropped hard and read as stretched.
`contain` shows the whole photo at its true proportions; the dialog is also
narrower now so a portrait shot is not stranded in a very wide frame.
========================================================================== */
.gal-lightbox__dialog { width: min(1040px, 94vw); }
.gal-lightbox__stage {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: clamp(260px, 56vh, 620px);
border-radius: 12px;
}
/* Close sat under the image; lift it and give it a chip so it is legible over
any photo. */
.gal-lightbox__close {
z-index: 3;
top: 12px;
right: 12px;
display: grid;
place-items: center;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
color: #101010;
font-size: 26px;
}
.gal-lightbox__close:hover { background: #fff; }
/* Thumbnail strip: horizontal scroller with arrows that appear only when the
images actually overflow. */
.gal-lightbox__thumbwrap { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.gal-lightbox__thumbwrap[hidden] { display: none; }
.gal-lightbox__thumbs {
display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth;
/* min-width:0 is what actually lets a flex child scroll - without it the
track sizes to its content and scrollLeft never moves. */
flex: 1 1 auto; min-width: 0; padding-bottom: 4px;
scrollbar-width: none; -ms-overflow-style: none;
}
.gal-lightbox__thumbs::-webkit-scrollbar { display: none; }
.gal-lightbox__thumb {
flex: 0 0 96px; width: 96px; height: 72px;
border: 2px solid transparent; border-radius: 8px;
background-size: cover; background-position: center;
opacity: 0.55; cursor: pointer; transition: opacity 0.18s, border-color 0.18s;
}
.gal-lightbox__thumb:hover { opacity: 0.85; }
.gal-lightbox__thumb.is-active { opacity: 1; border-color: var(--c-primary); }
.gal-lightbox__nav {
flex: 0 0 36px; width: 36px; height: 36px;
display: grid; place-items: center;
border: 1px solid var(--c-border-2); border-radius: 9999px;
background: #fff; color: #101010; cursor: pointer;
}
.gal-lightbox__nav[hidden] { display: none; }
.gal-lightbox__nav.is-off { opacity: 0.35; } /* dimmed, still clickable - see main.js */
.gal-lightbox__nav svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
.gal-lightbox { padding: 12px; }
.gal-lightbox__stage { height: clamp(200px, 42vh, 360px); }
.gal-lightbox__thumb { flex-basis: 72px; width: 72px; height: 56px; }
}
/* ---- shared ---- */
.site-footer__top { display: flex; flex-direction: column; }
.site-footer__brand { display: flex; flex-direction: column; }
.site-footer__office-block { display: flex; flex-direction: column; }
.site-footer__links { display: flex; }
.site-footer__col { display: flex; flex-direction: column; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-footer__office { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-footer__office li { display: flex; align-items: center; }
.site-footer__bottom { display: flex; }
.site-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; }
.social-list--links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
/* ---- DESKTOP (>=1025) ---- */
@media (min-width: 1025px) {
.site-footer { padding-block: 80px; }
.site-footer > .container { display: flex; flex-direction: column; gap: 64px; }
.site-footer__top { flex-direction: row; gap: 32px; padding-bottom: 0; border-bottom: 1px solid #E0E1E1; }
.site-footer__brand { flex: 1 1 640px; gap: 22.9px; }
.footer__logo-svg { height: 48px; width: auto; }
.site-footer__office-block { padding-top: 17.1px; gap: 15.5px; }
/* "OFFICE" is Medium/12 here but SemiBold/14 on mobile. */
.site-footer__office-label { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0.15px; color: #fff; text-transform: uppercase; margin: 0; }
.site-footer__office { gap: 15.5px; }
.site-footer__office li { gap: 12px; }
.site-footer__ico svg { width: 20px; height: 20px; }
.site-footer__office a { font-size: 14px; line-height: 21px; font-weight: 500; letter-spacing: 0.15px; color: #EFF0F3; }
.site-footer__links { flex: 1 1 640px; flex-direction: row; gap: 32px; }
.site-footer__col--services { flex: 1 1 416px; gap: 16px; padding-bottom: 69.5px; }
.site-footer__col--quick { flex: 0 0 192px; gap: 16px; padding-bottom: 81.5px; }
/* Headings are Sora Subheading 1 (16/20) on desktop. */
.site-footer__heading { font-family: var(--font-heading); font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: 0.15px; color: #EFF0F3; margin: 0; }
.site-footer__col ul { gap: 12px; }
.site-footer__col a { font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #EFF0F3; }
/* Socials sit under Quick Links; 22px icons, 24px apart. */
.site-footer__social--desktop { display: block; margin-top: 8px; }
.site-footer__social--mobile { display: none; }
.site-footer__social .social-list--links { gap: 24px; }
.site-footer__social svg { width: 22px; height: 22px; }
.site-footer__bottom { flex-direction: row; align-items: center; gap: 28px; border-top: 0; margin: 0; padding: 0; }
.site-footer__bottom p { flex: 1 1 auto; font-family: var(--font-footer); font-size: 16px; line-height: 24px; color: #fff; margin: 0; }
.site-footer__legal { gap: 28px; }
.site-footer__legal a { font-size: 16px; line-height: 24px; letter-spacing: 0.15px; color: #fff; }
}
/* ---- MOBILE (<=560) ---- */
@media (max-width: 560px) {
.site-footer { padding-block: 48px; }
.site-footer > .container { display: flex; flex-direction: column; gap: 32px; padding-inline: var(--gutter); }
.site-footer__top { gap: 32px; border-bottom: 0; }
.site-footer__brand { gap: 16px; }
.footer__logo-svg { height: 39px; width: auto; }
.site-footer__office-block { padding-top: 0; gap: 12px; }
/* SemiBold/14 on mobile, sentence case. */
.site-footer__office-label { font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: 0.15px; color: #fff; text-transform: none; margin: 0; }
.site-footer__office { gap: 12px; margin-top: 0; }
.site-footer__office li { gap: 8px; }
.site-footer__ico svg { width: 24px; height: 24px; }
.site-footer__office a { font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: 0.15px; color: #EFF0F3; }
.site-footer__links { flex-direction: row; gap: 24px; align-items: flex-start; }
.site-footer__links > .site-footer__col { flex: 1 1 0; min-width: 0; }
.site-footer__col { gap: 8px; padding-bottom: 0; }
.site-footer__heading { font-family: var(--font-body); font-size: 14px; line-height: 21px; font-weight: 600; letter-spacing: 0.15px; color: #EFF0F3; margin: 0; }
.site-footer__col ul { gap: 8px; }
.site-footer__col a { font-size: 12px; line-height: 18px; letter-spacing: 0.15px; color: #EFF0F3; }
/* Socials stand alone between the links and the legal row; 24px icons. */
.site-footer__social--desktop { display: none; }
.site-footer__social--mobile { display: block; margin-top: 0; }
.site-footer__social .social-list--links { gap: 16px; }
.site-footer__social svg { width: 24px; height: 24px; }
.site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; border-top: 0; margin: 0; padding: 0; }
.site-footer__bottom p { font-family: var(--font-body); font-size: 10px; line-height: 15px; color: #fff; margin: 0; }
.site-footer__legal { gap: 12px; flex-wrap: wrap; }
.site-footer__legal a { font-size: 10px; line-height: 15px; letter-spacing: 0.15px; color: #fff; }
}
/* Footer corrections after measuring against the supplied CSS. */
@media (min-width: 1025px) {
.site-footer__top { min-height: 295.5px; }
/* The social SVGs carry their own intrinsic size; box them explicitly. */
.site-footer__social svg { display: block; width: 22px; height: 22px; }
.site-footer__social a { display: inline-flex; }
}
@media (max-width: 560px) {
.site-footer__social svg { display: block; width: 24px; height: 24px; }
.site-footer__social a { display: inline-flex; }
}
.site-footer .social-list--links { line-height: 0; }
.site-footer .social-list--links li { display: flex; }
@media (min-width: 1025px) {
.site-footer .site-footer__social .social-list--links svg,
.site-footer .site-footer__col .social-list--links svg { width: 22px; height: 22px; }
}
@media (max-width: 560px) {
.site-footer .site-footer__social .social-list--links svg,
.site-footer .site-footer__col .social-list--links svg { width: 24px; height: 24px; }
}
@media (min-width: 1025px) {
.site-footer h3.site-footer__heading { font-family: var(--font-heading); font-size: 16px; line-height: 20px; font-weight: 600; }
}
@media (max-width: 560px) {
.site-footer h3.site-footer__heading { font-family: var(--font-body); font-size: 14px; line-height: 21px; font-weight: 600; }
}
@media (max-width: 560px) {
/* Hero scrim is 65% black on mobile, not the 54% the desktop frame uses. */
.hero__overlay { background: rgba(0, 0, 0, 0.65); }
/* Running strip scaled down to match the compact 80px desktop strip (~56px on
mobile): 16 + 23 + 16 ≈ 55. */
.marquee { padding-block: 16px; }
.marquee__item { font-size: 18px; line-height: 23px; opacity: 0.6; }
.marquee__track { gap: 40px; }
/* Feature photos carry no caption on mobile (the frame has none), and the
button is a 188x44 pill rather than full width. */
.feature__caption { display: none; }
.feature__body .btn { width: auto; min-height: 44px; padding: 10px 32px; gap: 8px; }
/* Gallery: the button sits BELOW the image strip. The inline copy beside the
heading is hidden and the one after the strip takes over - see gallery.php. */
.gallery__btn-wrap--inline { display: none; }
.gallery__btn-wrap--below { display: flex; justify-content: center; width: 100%; margin-top: 24px; }
.gallery__btn { width: auto; min-height: 44px; padding: 10px 32px; }
.gallery__item { border-radius: 16px; }
.about-block__row { display: grid; grid-template-columns: 1fr; }
/* (0,2,0) to beat `.split--bleed .split__body`, which sets display:flex. */
.split--bleed .about-block__body { display: contents; }
.about-block__body .eyebrow { order: 0; }
.about-block__heading { order: 1; }
.about-block__body > p { order: 2; }
.about-block__cards { order: 3; margin-top: 0; }
.about-block .split__media { order: 4; }
.about-block__cta { order: 5; margin: 0; display: flex; justify-content: center; }
.split--bleed .about-block__media { border-radius: 16px; overflow: hidden; }
.about-block__cta .btn { width: auto; min-height: 41px; padding: 10px 32px; gap: 8px; }
/* Testimonials sit on the grey. */
.testimonials { background: #F5F5F5; }
}
/* The below-the-strip gallery button is mobile-only; desktop keeps the inline one. */
@media (min-width: 561px) {
.gallery__btn-wrap--below { display: none; }
}
@media (max-width: 560px) {
.gallery__heading br,
.about-block__heading br { display: none; }
/* text-wrap: balance (base.css h1-h6) evens the ragged edge out and ignores
the cap, which is how the gallery heading kept losing "made" off line 2. */
.gallery__heading,
.about-block__heading { text-wrap: wrap; text-wrap-style: auto; }
.gallery__heading { max-width: 295px; margin-inline: auto; }
.about-block__heading { max-width: 345px; margin-inline: auto; }
}
@media (max-width: 560px) {
/* Running strip is Typography-800, not the slate the token was giving it. */
.marquee__item { color: #2C2D33; }
.feature__body .btn {
width: 188px; max-width: 100%;
padding: 10px 32px; gap: 8px; min-height: 44px;
border-radius: 42px;
box-shadow: 0 2px 7.3px rgba(0, 0, 0, 0.18);
white-space: nowrap;
}
.about-block__row { padding-inline: 16px; }
.cta__actions { align-items: center; }
.cta .btn { width: auto; max-width: 100%; }
.cta .btn--primary { min-width: 275px; min-height: 41px; padding: 10px 32px; }
.cta .btn.btn--underline { min-width: 274px; min-height: 38px; }
}
@media (max-width: 560px) {
.footer__logo-svg { width: 167px; height: 39px; }
}
@media (max-width: 560px) {
.page-hero__bar { background: transparent; border-top: 1px solid #E0E1E1; }
.page-hero__bar-inner { padding: 20px; gap: 16px; }
.page-hero__stat-num { font-size: 24px; line-height: 30px; }
/* Content-width, so "Happy customers" keeps to one line instead of being
squeezed into an equal third and wrapping. */
.page-hero__stat { flex: 0 1 auto; }
/* --- Brand story ------------------------------------------------------
Frame order is heading, image, then the copy. `display: contents` lifts
the body's children into the same column so the image can sit between
them; the row carries the gutter the body would have. */
.brand-story .split { display: grid; grid-template-columns: 1fr; gap: 24px; padding-inline: 16px; }
.brand-story .split--bleed .split__body,
.brand-story .split__body { display: contents; }
.brand-story .split__body > h2 { order: 0; }
.brand-story .split__media { order: 1; min-height: 0; }
.brand-story .split__body > * { order: 2; }
.brand-story .split__body > h2 { order: 0; }
.brand-story .split--bleed .media,
.brand-story .split__media .media { aspect-ratio: auto; width: 100%; height: 200px; border-radius: 12px; overflow: hidden; }
/* --- Values: image + overlay card -------------------------------------- */
.values .split { padding-inline: 16px; }
/* No radius on this one - the frame rounds the brand-story image but not this. */
.values__media .media { aspect-ratio: auto; width: 100%; height: 320px; border-radius: 0; overflow: hidden; }
/* Frame card is 240x94 at 16 from the left edge of the image. */
/* max-width:60% in sections.css caps this at 214.8 on a 358 image, which is
what forced the title onto two lines. The frame is 240 at 16 from the left. */
.values__card { width: 240px; max-width: none; padding: 12px 16px; gap: 8px; border-radius: 12px; left: 16px; right: auto; bottom: 16px; }
/* --- Values list ------------------------------------------------------- */
.values__list { gap: 24px; }
.values__item { gap: 16px; }
/* --- Showroom head + map ----------------------------------------------- */
.contact__head { padding-inline: 16px; }
.contact__map { width: auto; aspect-ratio: auto; height: 440px; border-radius: 12px; overflow: hidden; margin-inline: 16px; }
.contact__map .map-pin {
display: none;
--pin-x: var(--pin-mx);
--pin-y: var(--pin-my);
}
.contact__map .map-pin[data-show-mobile="1"] {
display: flex;
gap: 0;
}
/* Marker 28 tall in a 32 box; chip 20 tall, 10px side padding, 8/12 label. */
.contact__map .map-pin__icon { width: 22px; height: 28px; }
.contact__map .map-pin__label {
font-size: 8px;
font-weight: 400;
line-height: 12px;
letter-spacing: 0.15px;
padding: 4px 10px;
border-radius: 9999px;
}
.contact__cards { padding-inline: 16px; max-width: none; }
.contact-card {
display: grid;
grid-template-columns: 24px 1fr;
grid-template-rows: auto auto;
align-items: center;
column-gap: 12px;
row-gap: 2px;
padding: 16px;
min-height: 73px;
background: #F9F9F9;
border: 1px solid #E0E1E1;
border-radius: 8px;
text-align: left;
justify-items: start;
}
.contact-card__icon { grid-row: 1 / 3; grid-column: 1; width: 24px; height: 24px; }
.contact-card__label { grid-column: 2; font-size: 14px; line-height: 21px; font-weight: 700; color: #000; }
.contact-card__value { grid-column: 2; font-size: 12px; line-height: 18px; color: #62636C; }
}
@media (max-width: 560px) {
/* --- Hero: tighten the gap above and below the stats ---------------------
Frame: hero content padding 40/20/32, then the bar's own 20. */
.page-hero--panel .page-hero__inner,
.page-hero__content { padding-bottom: 32px; }
.page-hero__bar-inner { padding: 20px; }
/* --- Contact stack: 12px between cards, phone card in Sapphire ---------- */
.contact__cards { gap: 12px; }
.contact-card--active { background: #0353B6; border-color: #0353B6; }
.contact-card--active .contact-card__label,
.contact-card--active .contact-card__value,
.contact-card--active .contact-card__value a { color: #FFFFFF; }
.contact-card--active .contact-card__icon { color: #FFFFFF; }
/* --- Enquiry form ------------------------------------------------------
Frame: section padding 48/20 with a 72% black scrim; header gap 12 with an
H3 28/35; body a 20-padded glass panel, gap 16, radius 12; fields 44 tall
(message 100) at radius 8; button 41 tall. */
.form-section { padding: 48px 20px; }
.form-section__overlay { background: rgba(0, 0, 0, 0.72); }
/* --- Form header -------------------------------------------------------
Frame "FormHeader": 350 wide, align-items flex-start, gap 12. Both text
blocks are LEFT aligned - the dump emits `text-align` only when it is not
left (the button label carries `center`, these do not), so the desktop
centring has to be undone here. */
.form-section__inner { padding-inline: 0; }
.form-section__head { gap: 12px; text-align: left; align-items: stretch; }
.form-section__head h2 { font-size: 28px; line-height: 35px; }
.form-section__head p {
font-size: 14px;
line-height: 21px;
letter-spacing: 0.15px;
padding-inline: 0; /* 20px comes off the section, giving the frame's 350 */
max-width: none;
}
.form-section__head p br { display: none; }
.form-card {
padding: 20px;
gap: 16px;
background: rgba(255, 255, 255, 0.078);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(9px);
border-radius: 12px;
}
.form-card .cib-form-fields { gap: 16px; }
.form-card .cib-form-fields input,
.form-card .cib-form-fields textarea {
background: rgba(255, 255, 255, 0.102);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #FFFFFF;
font-size: 12px;
line-height: 18px;
padding: 0 16px;
min-height: 44px;
}
.form-card .cib-form-fields textarea { min-height: 100px; padding: 12px; }
.form-card .cib-form-fields input::placeholder,
.form-card .cib-form-fields textarea::placeholder { color: rgba(255, 255, 255, 0.749); }
.form-card .cib-form-fields .btn {
width: auto; min-height: 41px;
padding: 10px 16px 10px 20px; gap: 8px;
border-radius: 42px;
font-size: 14px; font-weight: 500; line-height: 21px;
}
}
@media (max-width: 560px) {
/* The base .cib-form input rule carries 0.9rem vertical padding, which took
these to 52 tall against the frame's 44. Zero it and let min-height rule. */
.form-card .cib-form-fields input[type="text"],
.form-card .cib-form-fields input[type="tel"],
.form-card .cib-form-fields input[type="email"] {
padding: 0 16px;
height: 44px;
min-height: 0;
}
}
@media (max-width: 560px) {
.page-hero--panel,
.page-slug-about-us .page-hero { padding-bottom: 0; }
.page-hero--panel .page-hero__content { padding-bottom: 52px; }
.page-hero--panel .page-hero__inner { padding-bottom: 0; }
.page-hero__stat-label,
.page-hero__stat > *:last-child { font-size: 12px; line-height: 18px; }
}
@media (max-width: 560px) {
.zt-hero .page-hero__content,
.zt-hero .page-hero__inner { padding-top: 0; }
.zt-hero { padding-top: 140px; }
.zt-intro .eyebrow { display: block; margin-bottom: 12px; }
.zt-intro__heading { margin-top: 0; margin-bottom: 12px; }
.zt-intro__text { margin-top: 0; }
/* --- Technical schematic ------------------------------------------------
"Technical schematic / 001" and "Dimensions in meters" share one row and
both wrapped to two lines at 14px. 12/18 is an existing type step in this
frame and fits each on one line (154 + 129 + gap inside 326).
Needs the `.site-main` prefix to match the 14px rule at line 844 - a
plain `.zt-schematic__head span` loses on specificity. */
.site-main .zt-schematic__head span { font-size: 12px; line-height: 18px; }
.zt-schematic__label { font-weight: 500; }
.zt-schematic__chips { gap: 8px; flex-wrap: nowrap; }
.zt-schematic__chips i { width: 38px; height: 38px; flex: none; }
.zt-materials .split__media,
.zt-materials .split__media .media,
.zt-materials figure.media {
aspect-ratio: auto;
width: 100%;
height: 219px;
}
.zt-materials .btn--primary {
width: fit-content;
min-height: 44px;
padding: 10px 32px;
align-self: flex-start;
margin-inline: 0;
font-size: 14px;
line-height: 21px;
font-weight: 600;
border-radius: 42px;
}
}
@media (max-width: 560px) {
.zt-hero__actions {
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 303px;
max-width: 100%;
margin-inline: auto;
}
.zt-hero__actions .btn { width: 100%; min-width: 0; }
.zt-hero__actions .btn--primary {
min-height: 56px;
padding: 10px 32px;
font-size: 16px;
line-height: 24px;
}
.zt-hero__actions .btn--light {
min-height: 49px;
padding: 14px 24px;
font-size: 14px;
line-height: 21px;
}
.zt-schematic { padding-block: 16px; min-height: 0; }
}
@media (max-width: 560px) {
/* --- Hero button: 294x56, padding 10/32 ------------------------------- */
.auto-hero .btn {
width: 294px;
max-width: 100%;
min-height: 56px;
padding: 10px 32px;
}
/* --- Intro ------------------------------------------------------------
Mobile order (client): eyebrow → title → IMAGE → text → button. The image
is a sibling of the body (which holds eyebrow/title/text/button), so we
hoist the body's children into the flex grid with `display:contents` and
sequence everything with `order` (same technique as the why-us accordion).
Image sits at its natural ~709/662 aspect (≈334px tall) - the old fixed
200px was too short. `width:100%` keeps the aspect from driving the width. */
.auto-intro__grid {
display: flex;
flex-direction: column;
gap: 24px;
align-items: stretch;
}
.auto-intro__body { display: contents; }
.auto-intro__body > .eyebrow { order: 1; }
.auto-intro__body > h2 { order: 2; }
.auto-intro__media { order: 3; }
.auto-intro__body > p { order: 4; }
.auto-intro__body > .btn { order: 5; }
.auto-intro .media,
.auto-intro figure,
.auto-intro__media .media {
aspect-ratio: 709 / 662;
width: 100%;
height: auto;
border-radius: 12px;
overflow: hidden;
}
.auto-intro h2,
.auto-intro__body h2 { font-size: 30px; line-height: 38px; }
/* Intro button is the SMALL one: 358x44 with a 14/21 label, unlike the
hero's 56/16. */
.auto-intro .btn {
min-height: 44px;
padding: 10px 32px;
font-size: 14px;
line-height: 21px;
}
/* --- Control methods --------------------------------------------------
This header is `align-items: flex-start` in the frame - left. Power
sources and Product range are `center` and stay centred, so this is
scoped rather than applied to every `.auto-head`. */
.auto-methods .auto-head { text-align: left; align-items: flex-start; gap: 12px; }
.auto-methods .auto-head > * { text-align: left; margin-inline: 0; }
.auto-methods__grid { grid-template-columns: 1fr; gap: 0; }
.auto-method {
padding: 24px 0;
gap: 16px;
border-right: 0;
border-block: 1px solid #C4C7C9;
}
.auto-method + .auto-method { border-top: 0; }
.auto-power .auto-tile { padding: 24px; gap: 24px; }
.page-template-page-automation .auto-power .auto-tile h3 { font-size: 28px; line-height: 35px; }
.auto-power .auto-tile p { font-size: 16px; line-height: 24px; }
.auto-range__card {
padding: 24px;
gap: 12px;
border-radius: 12px;
min-height: 0;
}
}
@media (max-width: 560px) {
/* --- Hero --------------------------------------------------------------
The title is written with two
for the frame's three lines, but the
blanket `.page-hero h1 br { display: none }` (line 223) hid them and it
wrapped to four. This page wants them. */
.page-template-page-gallery .page-hero h1 {
text-wrap: wrap;
text-wrap-style: auto;
}
.page-template-page-gallery .page-hero h1 br { display: inline; }
.page-template-page-gallery .page-hero .container { padding-inline: 16px; }
.page-template-page-gallery .page-hero--product .page-hero__sub { font-size: 14px; line-height: 21px; }
.page-template-page-gallery .page-hero .btn { width: 294px; max-width: 100%; min-width: 0; min-height: 56px; padding: 10px 32px; }
.gal-filter { gap: 12px; }
.gal-filter__label { font-size: 10px; line-height: 15px; font-weight: 600; }
.gal-filter__pills { gap: 8px; }
.gal-pill {
padding: 8px 16px;
min-height: 31px;
border-radius: 20px;
font-size: 10px;
line-height: 15px;
font-weight: 600;
}
/* "Showing N projects" 14/21 w400; "CLEAR ALL" 10/15 w700. */
.gal-filter__count { font-size: 14px; line-height: 21px; font-weight: 400; }
.gal-clear { font-size: 10px; line-height: 15px; font-weight: 700; }
/* --- Project cards: image 260x195 -------------------------------------- */
.gal-card__media,
.gal-card figure,
.gal-card .media {
aspect-ratio: auto;
width: 260px;
height: 195px;
}
.gal-featured__eyebrow { font-size: 24px; line-height: 30px; font-weight: 700; }
/* Main image 358x220 (was 268), thumbnails 80x60 (were 128x128) at gap 8,
the active one ringed 2px #0353B6. */
.gal-featured__stage { aspect-ratio: auto; width: 100%; height: 220px; }
.gal-featured__thumbs { gap: 8px; height: auto; }
.gal-featured__thumb {
aspect-ratio: auto;
width: 80px;
height: 60px;
flex: none;
border: 2px solid transparent;
}
.gal-featured__thumb.is-active,
.gal-featured__thumb[aria-current="true"] { border-color: #0353B6; }
.gal-featured__specs {
border: 1px solid #E0E1E1;
border-radius: 8px;
overflow: hidden;
}
.gal-spec {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 24px;
min-height: 69px;
border-bottom: 1px solid #E8E8E8;
}
.gal-spec:last-child { border-bottom: 0; }
.gal-spec small { font-size: 12px; line-height: 18px; font-weight: 500; }
.gal-spec strong { font-size: 14px; line-height: 21px; font-weight: 600; text-align: right; }
/* --- CTA: body copy is 18/27 ON THIS PAGE ---------------------------
Scoped. `.cta` is shared by nine templates and the frames disagree -
awnings, for one, specifies 14/21 - so an unscoped rule here was wrong
everywhere except gallery. */
.page-template-page-gallery .cta p,
.page-template-page-gallery .cta__text { font-size: 18px; line-height: 27px; }
}
.gal-lightbox[open] { display: flex; } /* UA sets display:block when open */
.gal-lightbox:not([open]) { display: none; }
.gal-lightbox::backdrop { background: transparent; } /* .gal-lightbox__overlay draws it */
.gal-lightbox {
position: fixed;
inset: 0;
margin: 0;
border: 0;
padding: 24px;
background: transparent;
color: inherit;
width: 100vw;
max-width: 100vw;
max-height: 100dvh;
height: 100dvh;
box-sizing: border-box;
align-items: center;
align-items: safe center;
overflow-y: auto;
overflow-x: hidden;
}
.gal-lightbox__dialog {
max-width: 100%;
box-sizing: border-box;
max-height: calc(100dvh - 48px);
}
@media (max-width: 560px) {
/* The overlay pads 12 at this width, not 24. */
.gal-lightbox { padding: 12px; }
.gal-lightbox__dialog { max-height: calc(100dvh - 24px); }
}
@media (max-width: 560px) {
.gal-track { gap: 32px; }
.gal-card,
.gal-row--fit .gal-card {
width: 260px;
flex: 0 0 260px;
max-width: 260px;
}
/* Row heading ("Indoor blinds") is H4 24/30; the card tag under each image
("Roller blinds") is H5 18/23. Both were fluid clamps topping out at 48
and 32. */
.gal-row__title { font-size: 24px; line-height: 30px; }
.gal-card__title { font-size: 18px; line-height: 23px; }
}
@media (max-width: 560px) {
.contact2-hero__actions { flex-direction: column; gap: 12px; align-items: center; }
.contact2-hero__actions .btn {
/* `flex: 1 1 100%` from the 768px block (sections.css) beats any `width`,
which is what kept these at the full 342. */
flex: 0 0 auto;
width: 278px;
max-width: 100%;
min-width: 0;
height: 52px;
min-height: 0;
padding: 14px 32px;
gap: 14px;
font-size: 16px;
line-height: 24px;
}
.contact2-bar__left strong { font-size: 14px; line-height: 21px; }
.contact2-bar__right {
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
/* Number 18/23 w700, not 32/40. */
.contact2-bar__num { font-size: 18px; line-height: 23px; }
/* Tap to call: 350x44, padding 16/40, gap 12, white, label Bold/14 centred. */
.contact2-bar__right .btn {
width: 100%;
min-width: 0;
/* Same conflict as the hero buttons: 16 + 21 + 16 is 53, but the frame
draws 44. Height wins, padding-block gives way (11 + 21 + 11 = 43,
rounded up by the explicit height). */
height: 44px;
min-height: 0;
padding: 11px 40px;
gap: 12px;
justify-content: center;
text-align: center;
font-size: 14px;
line-height: 21px;
font-weight: 700;
}
/* --- Showroom card -----------------------------------------------------
Phone / Email / Address line 1 are already 18/27 w600 and correct. These
two were not: the frame puts Address line 2 at 14/20 and the hours rows
at 14/21 (the time itself Bold/14). */
.contact2-info__addr2 { font-size: 14px; line-height: 20px; }
.contact2-hours div { font-size: 14px; line-height: 21px; }
/* --- Map + showroom details -------------------------------------------
Map footer address Regular/14, "OPEN IN GOOGLE MAPS" SemiBold/14, the
details heading 18/23 and each detail row Regular/14. All were 16-18. */
.contact2-map__bar { font-size: 14px; line-height: 21px; }
.contact2-details h2 { font-size: 18px; line-height: 23px; }
.contact2-details li { font-size: 14px; line-height: 21px; }
}
@media (max-width: 560px) {
[class*="page-template-page-indoor"] .key-benefits__showroom { align-items: stretch; }
[class*="page-template-page-indoor"] .key-benefits__showroom .key-benefits__btn { width: 100%; }
[class*="page-template-page-indoor"] .key-benefits__showroom .btn {
width: 100%;
min-width: 0;
min-height: 44px;
padding: 10px 32px;
gap: 8px;
font-size: 16px;
line-height: 24px;
font-weight: 500;
}
/* The prompt above it stays centred as before. */
[class*="page-template-page-indoor"] .key-benefits__showroom .key-benefits__prompt { text-align: center; }
}
@media (max-width: 560px) {
/* --- Hero -------------------------------------------------------------
The title is authored with three
for the frame's four lines. Two
things hid them: the blanket `.page-hero h1 br { display: none }`, and
`text-wrap: balance` on the base h1, which re-flows the text and ignores
the breaks. `text-wrap: normal` does NOT undo balance - it needs `wrap`
plus `text-wrap-style: auto`. (Third page this pair has cost time on.) */
.page-template-page-indoor-product .page-hero h1 {
text-wrap: wrap;
text-wrap-style: auto;
}
.page-template-page-indoor-product .page-hero h1 br:not(.br-desktop) { display: inline; }
/* Hero button 294x56. `min-width: 333px` on `.page-hero--product .btn`
(sections.css:713) is what held it wide - clear it first. */
.page-template-page-indoor-product .page-hero .btn {
width: 294px;
max-width: 100%;
min-width: 0;
min-height: 56px;
padding: 10px 32px;
}
/* --- Product intro ----------------------------------------------------
Frame "Placeholder" is 240 tall. `.split__media` was already 240 but the
figure inside ran 334 and spilled out below it, which is the gap before
"Want to see our indoor blinds in person?". `aspect-ratio` has to be
cleared alongside the height or it decides the width instead. */
.page-template-page-indoor-product .product-intro .split__media,
.page-template-page-indoor-product .product-intro .media {
aspect-ratio: auto;
width: 100%;
height: 240px;
}
/* --- Key benefits -----------------------------------------------------
Section intro is Medium/14 with 0.15px tracking, not Regular. */
.page-template-page-indoor-product .flex-sec__intro {
font-weight: 500;
letter-spacing: 0.15px;
}
/* Benefit-Card: padding 20 (was 32), gap 12, radius 12 - that padding is
what made the cards 216 tall against the frame's 174. */
.page-template-page-indoor-product .flex-card {
padding: 20px;
gap: 12px;
border-radius: 12px;
}
.page-template-page-indoor-product .flex-sec--media-left .split__media { order: 0; }
/* "Unique "left right" feature" measures 308 natural against a 358 column,
so it fits on one line - `text-wrap: balance` was splitting it into two
anyway. Same reset as the hero. */
.page-template-page-indoor-product .flex-split__heading {
text-wrap: wrap;
text-wrap-style: auto;
}
.page-template-page-indoor-product .flex-split__heading br { display: none; }
/* Image under the "Find showroom" button: 358x400 on a #0000001A ground. */
.page-template-page-indoor-product .flex-sec--slider .split__media,
.page-template-page-indoor-product .flex-sec--slider .media {
aspect-ratio: auto;
width: 100%;
height: 400px;
background-color: #0000001A;
}
/* --- Available styles -------------------------------------------------
Every row image is 358x200 - covers both the styles rows and the one
above "Sheer / Light diffusing". */
.page-template-page-indoor-product .styles-row__media {
aspect-ratio: auto;
width: 100%;
height: 200px;
}
/* --- CTA --------------------------------------------------------------
The copy carries two
placed for the DESKTOP line breaks; at 358 each
chunk wraps again, which is the ragged breaking. Mobile lets it flow -
same convention as the hero, About heading and About form intro.
tools/fix-br-spacing.php guarantees a space before every
, so hiding
them cannot run words together. */
.page-template-page-indoor-product .cta__text br { display: none; }
}
@media (max-width: 560px) {
.sfold-diffusion__heading {
text-wrap: wrap;
text-wrap-style: auto;
}
.sfold-diffusion__heading br { display: none; }
.sfold-compare__card {
width: 310px;
max-width: 100%;
/* `min-height: 320px` (sections.css:1411) is the reason a plain `height`
did nothing - a min-height always beats a height. It has to come down
as well. */
min-height: 160px;
height: 160px;
border-radius: 16px;
border-width: 1px;
overflow: hidden;
}
.sfold-compare__body,
.sfold-compare__tint { min-height: 0; }
.styles-sec--center .styles-row__media {
aspect-ratio: auto;
width: 100%;
height: 240px;
}
.page-slug-s-fold-sheer-curtains .product-operation--watermark .op-card__watermark { display: none; }
}
@media (max-width: 560px) {
.page-slug-s-fold-sheer-curtains .page-hero__sub { color: #E1E1E1; }
.page-slug-smartdrapes .page-hero__sub { color: #EFF0F3; }
}
@media (max-width: 560px) {
.product-process__heading {
text-wrap: wrap;
text-wrap-style: auto;
}
}
@media (max-width: 560px) {
.page-slug-smartdrapes .page-hero { padding-top: 108px; } /* title lands 56 below the header */
/* "The unique walkthrough feature" - the frame breaks after "walkthrough".
Balance was splitting it "The unique" / "walkthrough feature". */
.sd-walk__heading {
text-wrap: wrap;
text-wrap-style: auto;
}
.sd-walk__media {
aspect-ratio: auto;
width: 100%;
height: 200px;
border: 1px solid #0353B6;
padding: 0;
}
.sd-walk__media > img {
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
.sd-walk__fig { top: 12px; left: 12px; right: auto; bottom: auto; }
.sd-walk__coord { right: 12px; bottom: 12px; top: auto; left: auto; }
.sd-walk__fig {
width: auto;
height: 19px;
padding: 4px 8px;
border-radius: 8px;
font-size: 9px;
line-height: 11px;
font-weight: 500;
}
/* COORD_Z_882 is plain 9/11 white text in the frame - no pill, no rule
line, no border. */
.sd-walk__coord-tag {
padding: 0;
border: 0;
background: none;
border-radius: 0;
font-size: 9px;
line-height: 11px;
font-weight: 500;
color: #FFFFFF;
}
.sd-walk__coord-line { display: none; }
.sd-benefit { padding: 20px; gap: 12px; }
/* Icon is 40x40 at radius 8 in the frame, not 56x56 at 12. */
.sd-benefit__ico { width: 40px; height: 40px; border-radius: 8px; }
}
@media (max-width: 560px) {
.pl-tilt-card {
padding: 24px;
gap: 16px;
border-radius: 20px;
}
.pl-tilt-card__viz {
flex: none;
margin-bottom: 0;
overflow: hidden;
display: block;
}
.pl-tilt-card:nth-child(1) .pl-tilt-card__viz img,
.pl-tilt-card:nth-child(2) .pl-tilt-card__viz img {
display: block;
margin-inline: auto;
width: 313px;
max-width: none;
height: 158px; /* 225 x 0.70 */
max-height: none;
object-fit: fill; /* squeeze the Y axis only */
transform: none;
}
.pl-tilt-card:nth-child(1) .pl-tilt-card__viz { height: 129px; }
.pl-tilt-card:nth-child(1) .pl-tilt-card__viz img { margin-top: -14px; }
.pl-tilt-card:nth-child(2) .pl-tilt-card__viz { height: 147px; }
.pl-tilt-card:nth-child(2) .pl-tilt-card__viz img { margin-top: -6px; }
.pl-tilt-card:nth-child(3) .pl-tilt-card__viz { height: 140px; }
.pl-tilt-card:nth-child(3) .pl-tilt-card__viz img {
display: block;
margin-inline: auto;
height: 100%;
width: auto;
max-height: 140px;
object-fit: contain;
transform: none;
}
.page-template-page-indoor-product .site-main .pl-tilt-card__title {
font-size: 24px;
line-height: 30px;
letter-spacing: 0;
}
}
@media (max-width: 560px) {
.pl-energy__cards { gap: 20px; }
.pl-energy-card {
padding: 24px;
gap: 16px;
border-radius: 16px;
overflow: hidden; /* lets the flush bar follow the rounded corners */
}
.pl-energy-card__ico svg { width: 24px; height: 24px; }
.pl-energy-card__text { font-size: 14px; line-height: 21px; }
/* Title is 18/23 w700 0.25px. 18 already lands via the sub-page h3
normaliser; this pins the line-height and tracking exactly. */
.page-template-page-indoor-product .site-main .pl-energy-card__title {
font-size: 18px;
line-height: 23px;
letter-spacing: 0.25px;
}
.pl-energy-card__bar {
height: 6px;
border-radius: 0;
background: none;
width: calc(100% + 48px);
margin: 0 -24px -24px;
}
.pl-energy-card__bar span { border-radius: 0; }
}
@media (max-width: 560px) {
.pl-windows__grid { grid-template-columns: 1fr; gap: 24px; }
.pl-window { gap: 16px; }
.pl-window__box {
aspect-ratio: auto; /* it was square; the frame's box is 358x241 */
height: 241px;
padding: 16px;
border-radius: 16px;
}
/* Type badge: 16/16 from the corner, 4px 8px padding, radius 6. */
.pl-window__type {
top: 16px;
left: 16px;
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.15px;
}
.pl-window__viz { height: auto; }
.pl-window__viz svg { height: 100%; width: 100%; }
.pl-window--standard .pl-window__viz,
.pl-window--arched .pl-window__viz { width: 128px; height: 160px; }
.pl-window--wide .pl-window__viz { width: 176px; height: 96px; }
.pl-window--tall .pl-window__viz { width: 96px; height: 176px; }
.pl-window--round .pl-window__viz { width: 128px; height: 128px; }
/* Text block: gap 4, centred. Title is Inter 600 20/30, sub 12/18. */
.pl-window__meta { gap: 4px; }
.pl-materials__grid { gap: 40px; }
.pl-material { gap: 16px; }
.pl-material__media {
aspect-ratio: auto;
width: 100%;
height: 220px;
border-radius: 12px;
}
.pl-material__text { font-size: 14px; line-height: 21px; }
.page-template-page-indoor-product .site-main .pl-material__title {
font-size: 18px;
line-height: 27px;
font-weight: 600;
letter-spacing: 0.15px;
}
/* Section title is H3 28/35; the shared heading sweep sets 24/1.2. */
.site-main .pl-materials__heading,
.site-main .pl-windows__heading { font-size: 28px; line-height: 35px; }
}
@media (max-width: 560px) {
.roller-hiw__inner { justify-items: center; }
.roller-hiw__text {
align-items: center;
text-align: center;
}
.roller-hiw__text > * { text-align: center; }
/* Title is H4 24/30 in the frame. */
.site-main .roller-hiw__heading { font-size: 24px; line-height: 30px; }
.roller-hiw__detail { font-size: 14px; line-height: 21px; }
.roller-hiw__bg { opacity: 1; }
.roller-hiw__scrim { background: rgba(255, 255, 255, 0.35); }
/* --- Fabric type images -----------------------------------------------
358x280 here. `.styles-row__media` is shared across the product pages and
each frame gives it a different height - honeycomb 200, s-fold 240 -
so this keys off `.styles-sec--tall`, which only roller renders. */
.styles-sec--tall .styles-row__media {
aspect-ratio: auto;
width: 100%;
height: 280px;
}
}
@media (max-width: 560px) {
/* Hero button 294x56, padding 10/32. `min-width: 333px` on
`.page-hero--product .btn` does not apply here, but the awnings variant
has its own sizing - clear both so the width lands. */
.page-hero--awnings .btn {
width: 294px;
max-width: 100%;
min-width: 0;
min-height: 56px;
padding: 10px 32px;
}
/* --- Content section ("stats band") ------------------------------------
Frame: padding 48px 16px, gap 32. */
.stats-band { padding-block: 48px; }
.site-main .stats-band h2,
.stats-band__head h2 { font-size: 24px; line-height: 30px; }
.stats-band__text { padding-top: 0; gap: 32px; }
.stats-band::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: rgba(255, 255, 255, 0.70);
pointer-events: none;
}
}
@media (max-width: 560px) {
.stats-band__prompt {
font-weight: 700;
font-size: 24px;
line-height: 1;
letter-spacing: 0;
text-align: center;
max-width: none;
width: 100%;
}
/* Frame "ShowroomCTA": a column at gap 12 with a full-width button, not the
space-between row the desktop uses. */
.stats-band__foot {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.stats-band__foot .btn {
min-height: 44px;
min-width: 0;
width: 100%;
padding: 10px 32px;
font-size: 16px;
line-height: 24px;
font-weight: 500;
}
.stats-band__bg {
width: auto;
min-width: 1525px;
height: 100%;
left: -42px;
top: 0;
max-width: none;
}
.stats-band__bg svg { width: auto; height: 100%; min-width: 1525px; }
}
@media (max-width: 560px) {
.page-template-page-awnings .cta {
padding: 48px 16px;
}
/* Overlay is a flat rgba(0,0,0,0.6) in the frame. */
.page-template-page-awnings .cta__overlay {
background: rgba(0, 0, 0, 0.6);
}
/* Heading H4 24/30, centred, white, across the full 358. */
.page-template-page-awnings .cta__heading {
font-size: 24px;
line-height: 30px;
text-align: center;
}
/* Body 14/21, centred - NOT the 18/27 the gallery frame uses. */
.page-template-page-awnings .cta__text {
font-size: 14px;
line-height: 21px;
text-align: center;
}
/* CTAActions: a 350-wide centred column at gap 12, not a wrapping row. */
.page-template-page-awnings .btn-row {
flex-direction: column;
align-items: center;
gap: 12px;
width: 350px;
max-width: 100%;
margin-inline: auto;
}
/* Primary 275x41, padding 10/32, radius 42, label 14/21 w600. */
.page-template-page-awnings .btn-row .btn--primary {
width: 275px;
max-width: 100%;
min-width: 0;
min-height: 41px;
padding: 10px 32px;
border-radius: 42px;
font-size: 14px;
line-height: 21px;
font-weight: 600;
}
/* Secondary "Ask us a question": 274x38, 1px white, radius 24, 14/21 w500. */
.page-template-page-awnings .btn-row .btn:not(.btn--primary) {
width: 274px;
max-width: 100%;
min-width: 0;
min-height: 38px;
padding: 8px 24px;
border: 1px solid #FFFFFF;
border-radius: 24px;
font-size: 14px;
line-height: 21px;
font-weight: 500;
}
}
@media (max-width: 560px) {
/* MainHeading H4 24/30. Was 28 - `.whyus .split__body h2` uses --fs-h3,
whose clamp bottoms out at 28 on a 390 viewport. */
.page-template-page-awnings .whyus .split__body h2 { font-size: 24px; line-height: 30px; }
/* SectionLabel 14/18 w600. */
.page-template-page-awnings .whyus .eyebrow--muted { font-size: 14px; line-height: 18px; }
/* Accordion trigger 18/23 Sora 700. Was 1.5rem = 24px. */
.page-template-page-awnings .whyus .accordion__head { font-size: 18px; line-height: 23px; }
/* Body copy 14/20 in the frame; 14/21 already matches within a pixel. */
.page-template-page-awnings .whyus .accordion__body p { font-size: 14px; line-height: 21px; }
}
@media (max-width: 560px) {
.page-hero--awnings { padding-block: 96px 40px; }
.page-template-page-awnings .product-row__heading {
font-size: 24px;
line-height: 30px;
letter-spacing: 0;
}
.page-template-page-awnings .products-overview .btn {
width: 150px;
max-width: 100%;
min-width: 0;
min-height: 44px;
padding: 10px 24px;
}
}
@media (max-width: 560px) {
.page-template-page-awnings-product .page-hero { padding-block: 120px 64px; }
/* Hero pill 294x56. `min-width: 333px` on `.page-hero--product .btn`
(sections.css:713) is what held it wide - clear it first. */
.page-template-page-awnings-product .page-hero .btn {
width: 294px;
max-width: 100%;
min-width: 0;
min-height: 56px;
padding: 10px 32px;
}
/* --- Intro ------------------------------------------------------------
* The prompt and button belong BELOW the picture. The template already
* renders a mobile-only duplicate (`.product-intro__showroom`) after the
* media for exactly this - it was just scoped to the indoor templates, so
* the awnings sub-pages kept theirs above the image.
*/
.page-template-page-awnings-product .product-intro__body > .product-intro__prompt,
.page-template-page-awnings-product .product-intro__body > .product-intro__btn { display: none; }
.page-template-page-awnings-product .product-intro__showroom {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 24px;
}
/* Prompt: Sora 700, 24px, line-height 100%, tracking 0, centred. */
.page-template-page-awnings-product .product-intro__showroom .product-intro__prompt {
font-family: var(--font-heading);
font-size: 24px;
line-height: 1;
font-weight: 700;
letter-spacing: 0;
text-align: center;
margin: 0;
}
/* Image 350x220. `aspect-ratio` has to be cleared alongside the height or
it decides the width instead - the recurring trap on this project. */
.page-template-page-awnings-product .product-intro__media { max-width: none; }
.page-template-page-awnings-product .product-intro__media .media {
aspect-ratio: auto;
width: 350px;
max-width: 100%;
height: 220px;
margin-inline: auto;
overflow: hidden;
}
.page-template-page-awnings-product .product-intro__media .media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page-template-page-awnings-product .product-intro__ph {
--ph-min: 0;
width: 350px;
max-width: 100%;
height: 220px;
min-height: 0;
margin-inline: auto;
}
/* The container caps at 240 (line 683); 220 fits inside it. */
.page-template-page-awnings-product .product-intro__media { height: auto; }
/* "Visit our Kilsyth showroom": 358x44, padding 10/32, gap 8, radius 42,
border 1px with a 2px bottom. */
.page-template-page-awnings-product .product-intro__showroom .product-intro__btn { width: 100%; }
.page-template-page-awnings-product .product-intro__showroom .btn {
width: 100%;
min-width: 0;
min-height: 44px;
padding: 10px 32px;
gap: 8px;
border-radius: 42px;
border: 1px solid var(--c-primary);
border-bottom-width: 2px;
font-size: 16px;
line-height: 24px;
font-weight: 500;
}
}
@media (max-width: 560px) {
/* Scoped to .aw-arm: the fixed-guide section (.aw-guide) reuses
.aw-arm__text but its frame is LEFT aligned, and an unscoped rule here
was centring it too. */
.aw-arm .aw-arm__text { align-items: center; text-align: center; }
.aw-arm .aw-arm__text > * { text-align: center; }
.aw-arm__heading { text-wrap: wrap; text-wrap-style: auto; }
.aw-arm__detail { font-size: 14px; line-height: 21px; }
/* --- Arm Positions Card -----------------------------------------------
342 wide, padding 24, gap 24, on #0353B6 with a soft blue shadow. */
.aw-arm__panel {
padding: 24px;
gap: 24px;
box-shadow: 0 8px 16px rgba(3, 83, 182, 0.101961);
}
/* Header: 6px gap, title H4 24/30 (was 32/40). The badge already matches
the frame - 4px 12px, 1px #F8F9F9, pill radius, 10/15. */
.aw-arm__panel-top {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.aw-arm__panel-title { font-size: 24px; line-height: 30px; }
.aw-arm__cards { flex-direction: column; gap: 12px; }
.aw-arm-card {
width: 100%;
padding: 12px;
gap: 12px;
min-height: 230px;
border-radius: 12px;
border-color: rgba(255, 255, 255, 0.101961);
}
/* Diagram sits in a 155-tall frame. */
.aw-arm-card__viz { height: 155px; flex: none; }
.aw-arm-card__viz img,
.aw-arm-card__viz svg { max-height: 155px; height: auto; }
/* Label pair: 4px apart; title Sora 600 14/18, sub Inter 500 12/18. */
.aw-arm-card__title {
font-family: var(--font-heading);
font-weight: 600;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: #000;
}
.aw-arm-card__sub {
font-weight: 500;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.15px;
color: #2C2D33;
margin-top: 4px;
}
/* Bullet info row: 8px top padding above a #E0E1E1 rule, copy 14/21 white. */
.aw-arm__steps {
grid-template-columns: 1fr;
gap: 8px;
padding-top: 8px;
border-top-color: #E0E1E1;
}
.aw-arm__steps p,
.aw-arm__steps > * {
font-size: 14px;
line-height: 21px;
letter-spacing: 0.15px;
color: #FFFFFF;
}
}
@media (max-width: 560px) {
/* Section padding 48/16, and 40 between the header and the list. */
.aw-features { padding-block: 48px; }
.aw-features__head { gap: 16px; margin-bottom: 40px; }
/* Heading is already 24 via the shared sweep; the frame's line-height is 30. */
.aw-features__heading { line-height: 30px; max-width: none; }
/* Subtitle 14/21 centred - was 18/27. */
.aw-features__intro { font-size: 14px; line-height: 21px; max-width: none; }
/* Features list: one column at gap 16 (was 24). */
.aw-features__grid { gap: 16px; }
/* Card: padding 24, gap 16. Background #EBF3FE and radius 24 already match. */
.aw-feature { padding: 24px; gap: 16px; }
/* Icon 48x48 with a 24px glyph - was 56/28. Radius 12 already matches. */
.aw-feature__ico { width: 48px; height: 48px; }
.aw-feature__ico svg { width: 24px; height: 24px; }
/* Title H5 18/23 w700 - was 24/30 w600. */
.aw-feature__title {
font-size: 18px;
line-height: 23px;
font-weight: 700;
letter-spacing: 0;
}
/* Body 14/21 with 0.15px tracking on #2C2D33 - was 16/26 on #444749. */
.aw-feature__text {
font-size: 14px;
line-height: 21px;
letter-spacing: 0.15px;
color: #2C2D33;
}
}
@media (max-width: 560px) {
/* Section padding 48/16; 32 between the header and the stack. */
.aw-protect { padding-block: 48px; }
.aw-protect__head { gap: 12px; margin-bottom: 32px; }
.aw-protect__heading { max-width: none; }
.aw-protect__grid {
border-top: 0;
border-radius: 16px;
overflow: hidden;
}
.aw-benefit {
padding: 24px;
gap: 16px;
border-right: 0;
border-bottom: 1px solid #0353B6;
}
.aw-benefit:last-child { border-bottom: 0; }
/* Icon 52x50 in the frame; radius 12 and the 24px glyph already match. */
.aw-benefit__ico { width: 52px; height: 50px; }
/* Content group gap 8 (was 12); title Inter 600 16/24 (was 20/30). */
.aw-benefit__body { gap: 8px; }
.aw-benefit__title {
font-size: 16px;
line-height: 24px;
font-weight: 600;
letter-spacing: 0.15px;
}
/* Body copy 14/21, 0.15px, #62636C - already correct, restated so the
card reads as one unit if the shared sweeps change. */
.aw-benefit__text { font-size: 14px; line-height: 21px; letter-spacing: 0.15px; color: #62636C; }
}
@media (max-width: 560px) {
/* Section 48/16, 32 between header and panel. */
.aw-mat { padding-block: 48px; }
.aw-mat__head { gap: 12px; margin-bottom: 32px; }
.aw-mat__heading { max-width: none; }
.aw-mat__intro { font-size: 14px; line-height: 21px; max-width: none; }
/* Finishes panel: padding 40/16, gap 32, on #EBF3FE (already the fill). */
.aw-mat__panel { padding: 40px 16px; gap: 32px; }
.aw-mat__cards { gap: 24px; }
.aw-mat-card { gap: 8px; }
.aw-mat-card__media {
aspect-ratio: auto;
width: 100%;
height: 240px;
}
/* Card title H5 18/23 w700 - was 24/30 w600. */
.aw-mat-card__title { font-size: 18px; line-height: 23px; font-weight: 700; }
/* Colour / fabric blocks. */
.aw-mat__cols { gap: 32px; }
.aw-mat-block { gap: 20px; }
.aw-mat-block__ico { border-radius: 8px; }
/* The second block's icon is 36 with an 18px glyph in the frame. */
.aw-mat-block:nth-child(2) .aw-mat-block__ico { width: 36px; height: 36px; }
.aw-mat-block:nth-child(2) .aw-mat-block__ico svg { width: 18px; height: 18px; }
.aw-mat-block__title { font-size: 18px; line-height: 23px; letter-spacing: 0.25px; }
.aw-mat-block__desc { font-size: 14px; line-height: 21px; }
.aw-mat__swatches { gap: 12px 16px; }
.aw-swatch { gap: 6px; width: 40px; }
.aw-swatch__chip { width: 40px; height: 40px; border-radius: 9999px; }
.aw-swatch__name { opacity: 1; font-weight: 500; }
.aw-swatch--sel .aw-swatch__chip,
.styles-swatch--sel .styles-swatch__chip { outline: none; }
/* Fabric tags: 6px apart, padding 6/12, radius 16 (were 10 / 11-32 / 20). */
.aw-mat__pills { gap: 6px; }
.aw-pill { padding: 6px 12px; border-radius: 16px; }
/*
* Block footers: a 16px gap above a #E0E1E1 divider. The frame sets the
* colour note at 14/21 and the fabric note at 12/18 - different sizes, so
* they are addressed separately.
*/
.aw-mat-block__note {
padding-top: 16px;
border-top-color: #E0E1E1;
font-size: 14px;
line-height: 21px;
}
.aw-mat-block:nth-child(2) .aw-mat-block__note { font-size: 12px; line-height: 18px; }
}
@media (max-width: 560px) {
.page-template-page-awnings-product .product-intro--media-left .product-intro__media { order: 0; }
.page-slug-fixed-guide-awnings .product-intro__ph,
.page-slug-fixed-guide-awnings .product-intro__media .media {
--ph-min: 0;
width: 358px;
max-width: 100%;
height: 240px;
min-height: 0;
aspect-ratio: auto;
margin-inline: auto;
}
}
@media (max-width: 560px) {
/* Eyebrow, title and body are LEFT aligned here (the folding-arm section
centres them; this one does not). */
.aw-guide .aw-arm__text { align-items: flex-start; text-align: left; }
.aw-guide .aw-arm__text > * { text-align: left; }
.aw-guide .aw-arm__inner {
display: flex;
flex-direction: column;
gap: 12px;
}
.aw-guide .aw-arm__text { display: contents; }
.aw-guide .aw-guide__panel { order: 2; margin-top: 12px; }
.aw-guide .aw-arm__features { order: 3; margin-top: 12px; }
/* Panel title 24 (was 32/40). */
.aw-guide__title { font-size: 24px; line-height: 30px; }
.aw-guide .aw-arm__features { display: flex; flex-direction: column; gap: 12px; }
.aw-guide .aw-arm-feat {
align-items: center;
padding: 16px;
gap: 16px;
border-radius: 16px;
}
.aw-guide .aw-arm-feat__ico { width: 44px; height: 44px; }
.aw-guide .aw-arm-feat__ico svg { width: 24px; height: 24px; }
.aw-guide .aw-arm-feat__body { gap: 4px; }
.aw-guide .aw-arm-feat__title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
letter-spacing: 0.15px;
}
.aw-guide .aw-arm-feat__text { font-size: 14px; line-height: 21px; }
/* Callout labels 13px (base rule is 10). Line-height stays 15 - a 13px
glyph sits inside it fine. Mobile only; desktop keeps 10. */
.aw-guide__callout .txt { font-size: 13px; }
}
@media (max-width: 560px) {
.aw-protect__heading,
.aw-compare__heading {
text-wrap: wrap;
text-wrap-style: auto;
}
/* --- Comparison cards --------------------------------------------------
Frame: 358 wide, padding 24, gap 24, radius 16. The second card is
#EBF3FE with no border; the first is white with a 1px #0353B6. */
.aw-compare__grid { gap: 16px; padding-inline: 0; }
.aw-compare-col {
padding: 24px;
gap: 24px;
border-radius: 16px;
}
/* Header: icon 28, title H4 24/30, 12 apart (was 56 / 32-40 / 24). */
.aw-compare-col__head { gap: 12px; }
.aw-compare-col__ico { width: 28px; height: 28px; }
.aw-compare-col__ico svg,
.aw-compare-col__ico img { width: 28px; height: 28px; }
.aw-compare-col__title { font-size: 24px; line-height: 30px; }
/* Items: 16 apart, 12 gap, 12 bottom padding, 18px marks, 2px inside. */
.aw-compare-col__list { gap: 16px; }
.aw-compare-item { gap: 12px; padding-bottom: 12px; }
.aw-compare-item__mark svg { width: 18px; height: 18px; }
.aw-compare-item__body { gap: 2px; }
.aw-compare-item__txt { font-size: 14px; line-height: 21px; }
/* --- Customisation images (Canvas, Mesh, …) ----------------------------
358x334 on this page. These are `.styles-row__media` - the
styles-selection section - NOT `.aw-mat-card__media`. Fixed guide does
not render the materials section at all, so the earlier rule was inert. */
.page-slug-fixed-guide-awnings .styles-row__media {
aspect-ratio: auto;
width: 100%;
height: 334px;
}
}
/* .site-main to outrank the 18/27 rule at line 675, which is (0,2,0). */
.page-template-page-awnings-product .styles-row__finishes-title { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0.15px; }
/* Row: 10px apart, one line, scrolls rather than wrapping if it ever overflows. */
.page-template-page-awnings-product .styles-row__swatches {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: 18px;
padding: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.page-template-page-awnings-product .styles-row__swatches::-webkit-scrollbar { display: none; }
/* Item: as wide as its label (min the 36 chip), 4px between chip and name. */
.page-template-page-awnings-product .styles-swatch {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 44px;
min-width: 0;
}
.page-template-page-awnings-product .styles-swatch__chip {
width: 44px;
height: 44px;
border: 1px solid #E8E8E8;
border-radius: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.page-template-page-awnings-product .styles-swatch__name {
/* 9px so the widest label (PARCHMENT) clears its neighbours: it overhangs
the 44px item by ~7px each side against an 18px gap. */
font-size: 9px;
line-height: 15px;
font-weight: 400;
letter-spacing: 0.15px;
color: #000;
white-space: nowrap;
}
@media (max-width: 560px) {
.page-template-page-awnings .page-hero h1,
.page-template-page-awnings-product .page-hero h1 {
text-wrap: wrap;
text-wrap-style: auto;
}
.page-template-page-awnings .page-hero h1 br:not(.br-desktop),
.page-template-page-awnings-product .page-hero h1 br:not(.br-desktop) { display: inline; }
.page-template-page-awnings-product .page-hero .container { padding-inline: 16px; }
.page-slug-standard-awnings .page-hero .page-hero__sub,
.page-slug-crank-awnings .page-hero .page-hero__sub {
font-size: 16px;
line-height: 24px;
font-weight: 500;
letter-spacing: 0.15px;
}
/* Standard awnings: intro image 240 tall (folding-arm is 220, fixed-guide 334). */
.page-slug-standard-awnings .product-intro__ph,
.page-slug-standard-awnings .product-intro__media .media {
--ph-min: 0;
height: 240px;
}
/* Styles & finishes: eyebrow and title centred, row images 334 tall. */
.page-slug-standard-awnings .styles-sec__head {
align-items: center;
text-align: center;
}
.page-slug-standard-awnings .styles-sec__head > * { text-align: center; }
.page-slug-standard-awnings .styles-row__media {
aspect-ratio: auto;
width: 100%;
height: 334px;
}
}
@media (max-width: 560px) {
.page-slug-crank-awnings .aw-arm .aw-arm__text { align-items: flex-start; text-align: left; }
.page-slug-crank-awnings .aw-arm .aw-arm__text > * { text-align: left; }
/* Body copy: Inter 400 14/21, ls 0.15, #62636C (base is 18/27 #2C2D33). */
.page-slug-crank-awnings .aw-arm__detail {
font-size: 14px;
line-height: 21px;
font-weight: 400;
letter-spacing: 0.15px;
color: #62636C;
}
}
@media (max-width: 560px) {
/* Frame content is 358 wide here (the folding-arm frame is 342). */
.page-slug-crank-awnings .aw-arm .container { padding-inline: 16px; }
.page-slug-crank-awnings .aw-arm__inner {
display: flex;
flex-direction: column;
gap: 12px;
}
.page-slug-crank-awnings .aw-arm__text { display: contents; }
.page-slug-crank-awnings .aw-arm__panel { order: 2; margin-top: 12px; }
.page-slug-crank-awnings .aw-arm__features { order: 3; margin-top: 12px; }
.page-slug-crank-awnings .aw-arm__panel {
padding: 40px 20px;
gap: 24px;
border-radius: 0;
box-shadow: none;
align-items: stretch;
justify-content: flex-start;
}
/* Title centred, H4 24/30 Sora 700 white, no tracking (base has 0.25px). */
.page-slug-crank-awnings .aw-arm__panel-top {
flex-direction: column;
align-items: center;
gap: 0;
}
.page-slug-crank-awnings .aw-arm__panel-title {
font-size: 24px;
line-height: 30px;
letter-spacing: 0;
text-align: center;
}
.page-slug-crank-awnings .aw-arm__cards,
.page-slug-crank-awnings .aw-arm__steps { display: contents; }
.page-slug-crank-awnings .aw-arm-card:nth-child(1) { order: 1; }
.page-slug-crank-awnings .aw-arm-step:nth-child(1) { order: 2; }
.page-slug-crank-awnings .aw-arm-card:nth-child(2) { order: 3; }
.page-slug-crank-awnings .aw-arm-step:nth-child(2) { order: 4; }
.page-slug-crank-awnings .aw-arm-card:nth-child(3) { order: 5; }
.page-slug-crank-awnings .aw-arm-step:nth-child(3) { order: 6; }
/* Card 318x257: 12 pad + 181 diagram + 12 + 18 title + 4 + 18 sub + 12.
Gap goes to 0 so the two label gaps can differ (12 then 4). */
.page-slug-crank-awnings .aw-arm-card {
gap: 0;
padding: 12px;
height: 257px;
min-height: 0;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.101961);
}
/* Diagram frame 132.33x181 - the exported PNGs are already 133x181. */
.page-slug-crank-awnings .aw-arm-card__viz { height: 181px; flex: none; }
.page-slug-crank-awnings .aw-arm-card__viz img {
height: 181px;
max-height: 181px;
width: auto;
}
.page-slug-crank-awnings .aw-arm-card__title { margin-top: 12px; }
/* Step rows: 12px between the number and the copy, both 14/21 white. */
.page-slug-crank-awnings .aw-arm-step {
flex-direction: row;
align-items: flex-start;
gap: 12px;
}
.page-slug-crank-awnings .aw-arm-step__num {
flex: none;
font-size: 14px;
line-height: 21px;
font-weight: 700;
letter-spacing: 0.15px;
color: #FFFFFF;
}
.page-slug-crank-awnings .aw-arm-step__text {
flex: 1 1 auto;
font-size: 14px;
line-height: 21px;
font-weight: 400;
letter-spacing: 0.15px;
color: #FFFFFF;
}
/* --- details-stack: two 358x98 cards, gap 12 (identical to fixed-guide) */
.page-slug-crank-awnings .aw-arm__features { gap: 12px; }
.page-slug-crank-awnings .aw-arm-feat {
align-items: center;
padding: 16px;
gap: 16px;
border-radius: 16px;
}
.page-slug-crank-awnings .aw-arm-feat__ico { width: 44px; height: 44px; }
.page-slug-crank-awnings .aw-arm-feat__ico svg { width: 24px; height: 24px; }
.page-slug-crank-awnings .aw-arm-feat__body { gap: 4px; }
.page-slug-crank-awnings .aw-arm-feat__title {
font-size: 16px;
line-height: 20px;
font-weight: 600;
letter-spacing: 0.15px;
}
.page-slug-crank-awnings .aw-arm-feat__text { font-size: 14px; line-height: 21px; }
}
@media (max-width: 560px) {
.page-template-page-awnings-product .cta p,
.page-template-page-awnings-product .cta__text { font-size: 14px; line-height: 21px; }
}
@media (min-width: 1025px) {
.page-hero--panel .page-hero__bar { background: transparent; }
.page-hero--panel { padding-bottom: 0; }
}
@media (max-width: 560px) {
.page-slug-folding-arm-awnings .page-hero h1 { font-size: 33px; }
}