/* Fix: make Buildings catalog card images crop to the 16:9 frame */ /* so any photo size displays correctly (added via Cowork) */ .buildings__grid--card-image { height: 100%; width: 100%; top: 0; left: 0; transform: none; object-fit: cover; object-position: center center; } /* Catalog card frame: 3:2 (matches reference site) so building photos aren't over-cropped */ .buildings__grid--card-top::before { padding-bottom: 66.667%; } /* ===== CARD REDESIGN (catalog listings, matches reference layout) ===== */ .buildings__grid { justify-content: flex-start !important; column-gap: 14px !important; row-gap: 14px !important; } .buildings__grid--card { width: calc((100% - 28px) / 3) !important; position: relative !important; overflow: hidden !important; box-shadow: 0 1px 4px rgba(0,0,0,.12); } /* title ribbon at top */ .buildings__grid--card-header { position: absolute !important; top: 0; left: 0; right: 0; z-index: 4; margin: 0 !important; background: #003654; color: #fff !important; font-size: 18px; line-height: 1.2; text-transform: uppercase; padding: 8px 14px; letter-spacing: .02em; } /* body spacing + prominent price */ .buildings__grid--card-bottom { padding: 12px 16px 14px !important; } .buildings__grid--card-bottom > p.buildings__grid--card-text--full:first-of-type { font-size: 14px; margin: 0 0 6px !important; } .buildings__grid--card-bottom > p.buildings__grid--card-text--full:nth-of-type(2) { font-size: 12px; margin: 0 0 4px !important; line-height: 1; text-transform: uppercase; letter-spacing: .03em; } .buildings__grid--card-bottom > p.buildings__grid--card-text--full:nth-of-type(2) .buildings__grid--card-text--simple { display: block; font-size: 28px; font-weight: 800; color: #003654; font-family: "Sofia-Sans-Condensed", sans-serif; line-height: 1.05; margin-top: 2px; } /* footer row: dimensions left, View Details button right */ .buildings__grid--card-icon { display: none !important; } .buildings__grid--card-bottom > p.buildings__grid--card-text:last-of-type { margin: 12px 0 0 !important; padding: 11px 130px 0 0; border-top: 1px solid #e6e9ed; font-size: 13px; min-height: 40px; display: flex; align-items: center; box-sizing: border-box; } .buildings__grid--card-bottom::after { content: "View Details \2192"; position: absolute; right: 16px; bottom: 14px; background: #006CC0; color: #fff; padding: 9px 13px; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .03em; white-space: nowrap; } .buildings__grid--card:hover .buildings__grid--card-bottom::after { background: #003654; } /* ===== CATALOG FILTER BAR (flat / integrated) ===== */ .buildings__refine{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px;width:80%;margin:0 auto 28px;padding:0 0 22px;box-sizing:border-box;background:transparent;border:none;border-bottom:2px solid rgba(0,54,84,.15);border-radius:0;box-shadow:none;} .buildings__refine--field{display:flex;flex-direction:column;gap:9px;} .buildings__refine--field>label{font-family:'Sofia-Sans-Condensed',sans-serif;font-size:15px;font-weight:600;letter-spacing:.06em;color:#003654;text-transform:uppercase;} .buildings__refine--range{display:flex;align-items:center;gap:10px;} .buildings__refine input[type="number"]{border:none;border-bottom:2px solid #aebac6;border-radius:0;background:transparent;padding:6px 2px;width:66px;font-size:19px;font-family:'Sofia-Sans-Condensed',sans-serif;color:#003654;} .buildings__refine input[type="number"]:focus{border-bottom-color:#006CC0;outline:none;} .buildings__refine--range span{color:#909ca8;font-size:14px;} .buildings__refine select{border:none;border-bottom:2px solid #aebac6;border-radius:0;background:transparent;padding:6px 2px;font-size:17px;font-family:'Sofia-Sans-Condensed',sans-serif;color:#003654;min-width:170px;} .buildings__refine select:focus{border-bottom-color:#006CC0;outline:none;} .buildings__refine--apply{background:#003654;border-radius:0;padding:12px 32px;font-family:'Sofia-Sans-Condensed',sans-serif;font-size:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;border:none;cursor:pointer;} .buildings__refine--apply:hover{background:#006CC0;} .buildings__refine--reset{color:#7a8794;text-transform:uppercase;font-size:13px;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid #c5cfd8;align-self:center;font-family:'Sofia-Sans-Condensed',sans-serif;} .buildings__refine--range select{min-width:0;width:auto;} /* === Mobile buildings grid (responsive columns) — added via Cowork === */ @media only screen and (max-width: 768px){ .buildings__grid--card{ width: calc((100% - 14px) / 2) !important; max-width: calc((100% - 14px) / 2) !important; flex-basis: calc((100% - 14px) / 2) !important; } } @media only screen and (max-width: 430px){ .buildings__grid--card{ width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; } } /* Building card photo slider */ .buildings__grid--card-swiper { position: relative; width: 100%; overflow: hidden; } .buildings__grid--card-swiper .swiper-slide { aspect-ratio: 3 / 2; } .buildings__grid--card-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .buildings__grid--card-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,54,84,.65); cursor: pointer; opacity: 0; transition: opacity .2s ease; } .buildings__grid--card-top:hover .buildings__grid--card-arrow { opacity: 1; } .buildings__grid--card-arrow.prev { left: 8px; } .buildings__grid--card-arrow.next { right: 8px; } .buildings__grid--card-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; } /* Building card photo slider */ .buildings__grid--card-swiper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .buildings__grid--card-swiper .swiper-wrapper, .buildings__grid--card-swiper .swiper-slide { height: 100%; } .buildings__grid--card-swiper .swiper-slide img { position: static; transform: none; aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .buildings__grid--card-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,54,84,.65); cursor: pointer; opacity: 0; transition: opacity .2s ease; } .buildings__grid--card-top:hover .buildings__grid--card-arrow { opacity: 1; } .buildings__grid--card-arrow.prev { left: 8px; } .buildings__grid--card-arrow.next { right: 8px; } .buildings__grid--card-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; } .buildings__grid--card-arrow.next::before { transform: translate(-70%,-50%) rotate(45deg); } .buildings__grid--card-arrow.prev::before { transform: translate(-30%,-50%) rotate(-135deg); } @media (hover: none) { .buildings__grid--card-arrow { opacity: 1; } } /* Mobile/touch fixes for the card slider */ .buildings__grid--card { -webkit-tap-highlight-color: transparent; } @media (hover: none), (pointer: coarse) { /* stop the fake-hover blue overlay from flashing on tap */ .buildings__grid--card:hover .buildings__grid--card-top::after { opacity: 0 !important; } /* smaller, subtler arrows */ .buildings__grid--card-arrow { opacity: 1; width: 30px; height: 30px; background: rgba(0,54,84,.5); } .buildings__grid--card-arrow::before { width: 8px; height: 8px; border-top-width: 2px; border-right-width: 2px; } } /* Bigger cards on phones — widen the grid so the full-width cards nearly fill the screen */ @media only screen and (max-width: 768px) { .buildings__grid { width: 96% !important; } } /* Building detail page (mobile) */ @media only screen and (max-width: 768px) { .building__detail { width: 94%; } .building__detail--information-header { display: none; } } /* Fullscreen lightbox */ #imageLightbox { background: rgba(0,0,0,.9); } #imageLightbox #lightbox-image { max-width: 94vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; } #imageLightbox .pacLightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10000; cursor: pointer; color: #fff; font-size: 40px; line-height: 1; padding: 6px 16px; user-select: none; -webkit-user-select: none; background: rgba(0,108,192,.55); border-radius: 6px; } #imageLightbox .pacLightbox__arrow--prev { left: 14px; } #imageLightbox .pacLightbox__arrow--next { right: 14px; } #imageLightbox .close-btn { z-index: 10001; } /* Hide the header hero video on the Buildings page */ body.page-id-237 .header__media { display: none; } /* Remove "3D Designer" from the Garages & Shops menu (desktop + mobile) */ .navbar__list--dropdown-item:has(> a[href*="postframesolver.azurewebsites.net"]) { display: none; } .mobile__navbar--sublink[href*="postframesolver.azurewebsites.net"] { display: none; } /* Remove the "3D Designer" card in the CTA section (halfway down the page) */ /* Remove the "Garages & Shops" button from the 3D Designer card */ .resources__right--card-link[href*="postframesolver.azurewebsites.net"] { display: none; } /* ---- Metal material page ---- */ .material-slider-wrap .materialSwiper { width: 100%; position: relative; overflow: hidden; } .material-slider-wrap .materialSwiper .swiper-slide img { width: 100%; height: auto; display: block; } .material-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,54,84,.6); color: #fff; font-size: 22px; line-height: 40px; text-align: center; cursor: pointer; user-select: none; } .material-slider__arrow--prev { left: 10px; } .material-slider__arrow--next { right: 10px; } .materialSwiper__pagination { bottom: 8px !important; } .material__description { margin: 6px 0 14px; color: #003654; line-height: 1.6; } .material__specs { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 6px 0 16px; } .material__spec { display: flex; flex-direction: column; min-width: 110px; } .material__spec-label { font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: #6b7785; } .material__spec-value { font-size: 18px; font-weight: 700; color: #003654; } /* Fix: material slider photos keep their real shape (kill the forced 16:9 box) */ .material-slider-wrap .materialSwiper .swiper-slide img { height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; } @media (max-width: 768px) { .gallery-container-materials.material-slider-wrap { height: auto !important; } } /* ---- Steel Siding landing page ---- */ .material-features { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; width: 80%; max-width: 1100px; margin: 0 auto 2rem; } .material-feature { flex: 1 1 210px; background: #f6f8fa; border-top: 4px solid #006CC0; border-radius: 8px; padding: 18px 20px; } .material-feature__title { margin: 0 0 6px; color: #003654; font-size: 20px; } .material-feature__text { margin: 0; color: #41525e; font-size: 15px; line-height: 1.5; } .buildings__grid--card-viewdetails { display: inline-block; margin-top: 6px; color: #006CC0; font-weight: 700; font-size: 15px; } /* Material slider — fix squish at every breakpoint */ .gallery-container-materials.material-slider-wrap, .material-slider-wrap .materialSwiper, .material-slider-wrap .materialSwiper .swiper-wrapper, .material-slider-wrap .materialSwiper .swiper-slide { height: auto !important; } .material-slider-wrap .materialSwiper { max-width: 600px; margin: 0 auto; } .material-slider-wrap .materialSwiper .swiper-slide img { width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; max-height: 70vh; } /* === Material slider squish fix (all breakpoints) === */ .gallery-container-materials.material-slider-wrap, .material-slider-wrap .materialSwiper, .material-slider-wrap .materialSwiper .swiper-wrapper, .material-slider-wrap .materialSwiper .swiper-slide { height: auto !important; } .material-slider-wrap .materialSwiper { max-width: 600px; margin: 0 auto; } .material-slider-wrap .materialSwiper .swiper-slide img { width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; max-height: 70vh; } /* ===== Metal material page (full layout) ===== */ .material--metal .material__tagline { font-size:16px; color:#41525e; line-height:1.5; margin:6px 0 14px; } .material--metal .material__badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; } .material--metal .material__badge { background:#E6F1FB; color:#0C447C; font-size:13px; padding:5px 11px; border-radius:8px; } .material--metal .material__cta-row { display:flex; gap:10px; flex-wrap:wrap; } .material__btn { display:inline-block; font-size:14px; font-weight:700; padding:11px 18px; border-radius:6px; text-decoration:none; cursor:pointer; } .material__btn--primary { background:#006CC0; color:#fff !important; } .material__btn--ghost { border:1px solid #006CC0; color:#006CC0 !important; background:transparent; } .material-band { width:80%; max-width:1100px; margin:2.5rem auto; } .material-band--alt { background:#f6f8fa; width:100%; max-width:none; padding:2.5rem 0; } .material-band--alt > * { width:80%; max-width:1100px; margin-left:auto; margin-right:auto; } .material-band__title { color:#003654; font-size:28px; margin:0 0 6px; } .material-band__sub { color:#6b7785; font-size:14px; margin:0 0 18px; } .material-band__text { color:#28323a; font-size:16px; line-height:1.7; } .material-features-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:14px; } .material-feature-card { background:#fff; border:1px solid #e3e8ec; border-top:4px solid #006CC0; border-radius:0; padding:18px 20px; } .material-feature-card h3 { color:#003654; font-size:18px; margin:0 0 6px; } .material-feature-card p { color:#51606b; font-size:14px; line-height:1.5; margin:0; } .material-tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:22px; } .material-tier { background:#fff; border:1px solid #e3e8ec; border-radius:8px; padding:14px 16px; } .material-tier--prime { border-color:#b5d4f4; } .material-tier--ultra { border-color:#fac775; } .material-tier__name { color:#003654; font-size:16px; font-weight:700; } .material-tier__desc { color:#6b7785; font-size:13px; line-height:1.5; margin-top:4px; } .material-tier__tag { font-size:11px; background:#E6F1FB; color:#0C447C; padding:2px 8px; border-radius:6px; } .material-tier__tag--amber { background:#FAEEDA; color:#854F0B; } .material-swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); gap:14px; } .material-swatch__chip { aspect-ratio:1/1; border-radius:6px; border:0.5px solid rgba(0,0,0,0.15); } .material-swatch__name { font-size:12px; color:#41525e; text-align:center; margin-top:5px; line-height:1.2; } .material-swatch__tier { font-size:11px; color:#888780; text-align:center; line-height:1.2; margin-top:1px; } .material-swatch__tier.is-special { color:#BA7517; font-weight:700; } .material-swatch-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:#6b7785; margin-top:16px; } .material-dot { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:2px; } .material-dot--std { background:#888780; } .material-dot--special { background:#BA7517; } .material-chart-btn { margin-top:18px; } .material-spec-table { width:100%; border-collapse:collapse; font-size:15px; margin-top:8px; } .material-spec-table td { padding:12px 0; border-top:1px solid #eef1f3; } .material-spec-table tr:first-child td { border-top:none; } .material-spec-table__label { color:#6b7785; } .material-spec-table__value { text-align:right; font-weight:700; color:#003654; } .material-cta { background:#003654; text-align:center; padding:2.5rem 1rem; margin-top:2.5rem; } .material-cta__title { color:#fff; font-size:24px; font-weight:700; margin-bottom:16px; } /* ===== Metal page design fixes ===== */ /* hero info stacks vertically and aligns with the sections below */ .material--metal .building__detail--information-materials { display:block !important; width:80%; max-width:1100px; margin:1.25rem auto 0; } .material--metal .building__detail--information-header { margin:0 0 4px; } .material--metal .material__badges { margin:10px 0 16px; align-items:flex-start; } .material--metal .material__badge { display:inline-flex; align-items:center; height:auto; } .material--metal .material__cta-row { justify-content:flex-start; } /* chart button should size to its text, not stretch to 80% */ .material-band--alt > .material__btn, .material-chart-btn { width:auto !important; display:inline-block; } /* ===== Metal page tweaks (hero buttons, color header, chart button) ===== */ .material--metal .material__cta-row { display:none !important; } .material-band--alt .material-band__title, .material-band--alt .material-band__sub { text-align:center; } .material-band--alt .material-swatch-legend { justify-content:center; } .material-chart-btn { display:block; width:max-content; max-width:90%; margin:24px auto 0 !important; background:#006CC0 !important; color:#ffffff !important; border:none !important; font-size:16px; font-weight:700; padding:14px 34px; text-align:center; } /* ===== Metal page tweaks: center chart btn, tighten top spacing ===== */ .material-chart-btn { display:block !important; width:-moz-fit-content !important; width:fit-content !important; max-width:90%; margin:24px auto 0 !important; } .material--metal .building__detail--information-materials { margin:0.5rem auto 0 !important; } .material-band { margin:1.75rem auto; } .material-band--alt { margin:1.75rem 0; } /* ===== Two-column hero: slider left, info right ===== */ .building__detail--material.material--metal { align-items:flex-start; } .material--metal .gallery-container-materials { width:54% !important; max-width:600px; } .material--metal .building__detail--information-materials { width:42% !important; display:block !important; margin:0 !important; max-width:none; } .material--metal .material__description { color:#28323a; font-size:15px; line-height:1.65; margin-top:10px; } @media (max-width:1024px){ .material--metal .gallery-container-materials, .material--metal .building__detail--information-materials { width:100% !important; max-width:100%; } .material--metal .building__detail--information-materials { margin-top:1rem !important; } } /* hero must be a row (theme forces column) */ .building__detail--material.material--metal { flex-direction:row !important; align-items:flex-start !important; } @media (max-width:1024px){ .building__detail--material.material--metal { flex-direction:column !important; } } /* hero: wider slider, tighter gap */ .building__detail--material.material--metal { justify-content:flex-start !important; gap:40px; } .material--metal .gallery-container-materials { width:58% !important; max-width:none !important; } .material--metal .building__detail--information-materials { width:38% !important; } .material-slider-wrap .materialSwiper { max-width:none !important; } /* ===== Premium pass: centered headers + accent, icon benefit cards, spacing ===== */ .material-band__title { text-align:center; } .material-band__title::after { content:""; display:block; width:54px; height:3px; background:#006CC0; margin:12px auto 0; } .material-band__sub { text-align:center; max-width:480px; margin:0 auto 6px; } .material-features-row { gap:20px; margin-top:26px; } .material-feature-card { text-align:center; background:transparent; border:none !important; padding:10px 12px; } .material-feature-card__icon { width:62px; height:62px; border-radius:50%; background:#E6F1FB; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; } .material-feature-card__icon svg { width:28px; height:28px; color:#006CC0; } .material-feature-card h3 { font-size:17px; } .material-band { margin:3rem auto; } .material-band--alt { margin:3rem 0; padding:3rem 0; } /* FAQ accordion */ .material-faq { width:80%; max-width:760px; margin:6px auto 0; } .material-faq__item { border-bottom:1px solid #e3e8ec; } .material-faq__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; background:none; border:none; padding:18px 2px; cursor:pointer; text-align:left; font-size:17px; font-weight:500; color:#003654; } .material-faq__icon { color:#006CC0; font-size:24px; line-height:1; flex-shrink:0; transition:transform .2s ease; } .material-faq__item.is-open .material-faq__icon { transform:rotate(45deg); } .material-faq__a { max-height:0; overflow:hidden; transition:max-height .28s ease; } .material-faq__item.is-open .material-faq__a { max-height:600px; } .material-faq__a-inner { padding:0 2px 18px; color:#51606b; font-size:15px; line-height:1.65; } /* === PAC WINDOWS COLOR GROUPS START === */ /* Centered, divided swatch groups (exterior/interior) — scoped to grouped grids only */ .material-swatches--grouped { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; } .material-swatches--grouped .material-swatch { flex:0 0 92px; } .material-swatch-divider { flex:0 0 100%; width:100%; display:flex; align-items:center; gap:14px; margin:10px 0 2px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#6b7785; font-weight:700; } .material-swatch-divider::before, .material-swatch-divider::after { content:""; flex:1 1 auto; height:1px; background:rgba(0,0,0,0.12); } .material-swatch-divider span { white-space:nowrap; } /* Windows category cards hold portrait window photos — show the WHOLE window (contain), not a cropped slice */ body.tax-material-category.term-windows .buildings__grid--card-top { background:#ffffff; } body.tax-material-category.term-windows .buildings__grid--card-image { object-fit:contain; } /* === PAC WINDOWS COLOR GROUPS END === */ /* === PAC MATERIAL CARDS START === */ /* "Most Popular"-style tag (opt-in via card_tag in pac-catalog-*.php) */ .buildings__grid--card-top { position:relative; } .buildings__grid--card-tag { position:absolute; right:10px; bottom:10px; z-index:5; background:#f5a623; color:#1a1a1a; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:5px 11px; border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,0.28); } /* Keep blurb above the View Details button: reserve space for the button + clamp text */ .buildings__grid--card-bottom { padding-bottom:54px !important; } .buildings__grid--card-bottom > p.buildings__grid--card-text--full:first-of-type { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:0 !important; } /* === PAC MATERIAL CARDS END === */ /* === PAC CARD RIBBON START === */ /* Promotional diagonal corner ribbon on cards (back-office "Ribbon" field) */ .buildings__grid--card-ribbon { position:absolute; top:0; right:0; width:132px; height:132px; overflow:hidden; z-index:6; pointer-events:none; } .buildings__grid--card-ribbon > span { position:absolute; top:24px; right:-44px; width:190px; transform:rotate(45deg); background:#c1121f; color:#fff; text-align:center; padding:7px 0; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; box-shadow:0 2px 5px rgba(0,0,0,0.30); font-family:"Sofia-Sans-Condensed", sans-serif; } /* === PAC CARD RIBBON END === */ /* === PAC FAQ PAGE START === */ .faq-page { width:80%; max-width:1000px; margin:44px auto 64px; } .faq-page__head { text-align:center; margin-bottom:26px; } .faq-page__title { color:#003654; font-size:34px; margin:0 0 8px; } .faq-page__sub { color:#5a6b78; font-size:16px; margin:0; } .faq-tabs { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:30px; } .faq-tab { border:2px solid #003654; background:#fff; color:#003654; padding:10px 22px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; border-radius:999px; cursor:pointer; font-size:14px; line-height:1; transition:background .15s, color .15s; } .faq-tab:hover { background:rgba(0,54,84,.08); } .faq-tab.is-active { background:#003654; color:#fff; } .faq-panel { display:none; } .faq-panel.is-active { display:block; } .faq-page .material-faq { width:100%; max-width:820px; } @media (max-width:600px){ .faq-page { width:92%; } .faq-tab { flex:1 1 100%; } } /* === PAC FAQ PAGE END === */ /* === PAC-CONSISTENCY START === */ .styles__subhead{color:#003654 !important;} .divider__arrow{display:none !important;} /* Second banner: slim solid band */ .divider__wrapper--styles{height:auto !important;min-height:0 !important;background:#006CC0;padding:1.7rem 1.5rem;margin:2.5rem auto;} .divider__image--styles{display:none !important;} .divider__wrapper--styles .divider__text{margin-top:0;} .divider__wrapper--styles .divider__header{font-size:30px;} /* Video section: cleaner framing */ .call__blue-bar{display:none !important;} .call__wrapper .thumbnail__wrapper{box-shadow:0 18px 45px rgba(0,40,70,.22) !important;margin-left:0 !important;} /* Video section text — premium */ .call__kicker{display:block;color:#006CC0;text-transform:uppercase;font-family:'Sofia Sans Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:2.5px;margin-bottom:14px;position:relative;padding-left:46px;} .call__kicker::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:34px;height:3px;background:#006CC0;} .call__text h2{line-height:1.06 !important;font-size:50px !important;} .call__text h2::before{display:none !important;} .call__text>p{line-height:1.75 !important;font-size:19px !important;margin-bottom:2rem !important;} .call__text .call__lists{gap:0 48px;margin-bottom:2.4rem;} .call__text .call__lists ul{list-style:none !important;padding-left:0 !important;margin:0;} .call__text .call__lists ul li{position:relative;padding-left:34px;margin-bottom:17px;font-size:17px;font-weight:600;line-height:1.35;color:#003654;} .call__text .call__lists ul li::before{content:'';position:absolute;left:0;top:0;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23006CC0'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;} .call__cta{position:static !important;display:inline-flex !important;align-items:center;gap:10px;transition:transform .2s ease,box-shadow .2s ease;} .call__cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,54,84,.28);} .call__cta-arrow{transition:transform .2s ease;} .call__cta:hover .call__cta-arrow{transform:translateX(4px);} @media(max-width:768px){.call__text h2{font-size:34px !important;}.call__text>p{font-size:17px !important;}} /* Banner 1: premium navy scrim + accent + CTA */ .divider__image::after{background:linear-gradient(180deg,rgba(8,28,48,.42) 0%,rgba(8,28,48,.74) 100%) !important;} .divider__wrapper .divider__header{letter-spacing:.5px;} .divider__wrapper .divider__text .divider__header::before{content:'';display:block;width:60px;height:4px;background:#fff;opacity:.9;margin:0 auto 22px;} .violator__cta{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;margin-top:26px;background:#fff;color:#003654;font-family:'Sofia Sans Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:18px;padding:14px 30px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;} .violator__cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.3);} .violator__cta-arrow{transition:transform .2s ease;} .violator__cta:hover .violator__cta-arrow{transform:translateX(4px);} @media(max-width:768px){.divider__wrapper .divider__header{font-size:30px !important;}.violator__cta{font-size:16px;padding:12px 24px;}} /* Building styles — premium */ .styles__kicker{display:block;width:80%;text-align:center;color:#006CC0;text-transform:uppercase;font-family:'Sofia Sans Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:2.5px;margin-bottom:12px;} .styles__subhead{max-width:680px !important;line-height:1.7 !important;margin:1rem auto 3.4rem !important;} .styles__card{transition:transform .25s ease,box-shadow .25s ease !important;box-shadow:0 4px 16px rgba(0,40,70,.08);} .styles__card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,40,70,.18);} .styles__card--image-wrapper{overflow:hidden;} .styles__card--image{transition:transform .45s ease !important;} .styles__card:hover .styles__card--image{transform:scale(1.06);} /* Tools & Resources — premium */ .resources__left{margin-top:0 !important;} .resources__right{margin-top:0 !important;} .resources__right--icon{background:#006CC0 !important;box-shadow:0 10px 26px rgba(0,40,70,.14);} .resources__right--card{background:#006CC0 !important;margin-left:0 !important;box-shadow:0 10px 26px rgba(0,40,70,.14);transition:transform .2s ease,box-shadow .2s ease !important;} .resources__right .resources__right--card-wrapper:hover .resources__right--card{transform:translateY(-3px);box-shadow:0 20px 42px rgba(0,40,70,.28) !important;} .resources__right--card-header{color:#fff !important;} .resources__right--card-arrow{fill:#fff !important;} .resources__right--card-arrow .cls-1{fill:#fff !important;} /* Tools eyebrow + mobile gap */ .resources__kicker{display:block;color:#006CC0;text-transform:uppercase;font-family:'Sofia Sans Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:2.5px;margin-bottom:10px;} @media(max-width:768px){.resources__left{margin-top:0 !important;}.resources__right{margin-top:1.5rem !important;}} /* Banner 1: taller image, tighter margins */ .divider:has(.divider__wrapper){margin-top:5rem !important;} .divider__wrapper{height:26rem !important;margin-bottom:5rem !important;} .divider__image{height:26rem !important;} .resources__right--card-text{color:#cfe6fb !important;font-weight:400 !important;font-size:15px !important;} .resources__right--card-links a{color:#fff !important;background:rgba(255,255,255,.12) !important;border:1.5px solid rgba(255,255,255,.55) !important;} .resources__right--card-links a:hover{color:#006CC0 !important;background:#fff !important;border-color:#fff !important;} /* Tools left — why-PAC checklist */ .resources__left--checks{list-style:none;padding:0;margin:.5rem 0 2rem;} .resources__left--checks li{position:relative;padding-left:34px;margin-bottom:14px;font-size:16px;font-weight:500;color:#003654;line-height:1.4;} .resources__left--checks li::before{content:'';position:absolute;left:0;top:1px;width:21px;height:21px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23006CC0'/%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;} .resources{margin-top:0 !important;padding-top:5.5rem !important;padding-bottom:5.5rem !important;} /* Dark tools ribbon */ .tools-ribbon{background:#003654;width:100%;margin-top:5rem;padding:1.7rem 1.25rem;text-align:center;} .tools-ribbon__text{color:#fff;font-family:'Sofia Sans Condensed','Sofia Sans',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;font-size:28px;} @media(max-width:768px){.tools-ribbon{padding:1.2rem 1rem;}.tools-ribbon__text{font-size:21px;letter-spacing:.8px;}} /* PAC-REVIEWS START */ .review__kicker{display:block;text-align:center;color:#006CC0;text-transform:uppercase;font-family:"Sofia Sans Condensed",sans-serif;font-size:15px;font-weight:700;letter-spacing:2.5px;margin-top:5rem;} .review__header{margin:.4rem 0 2.6rem !important;} .review .swiper{padding-top:.6rem;padding-bottom:.6rem;} .review .swiper-slide{display:flex;} .review__card{width:100% !important;flex-direction:column;justify-content:flex-start;padding:1.85rem 1.9rem !important;box-shadow:0 14px 34px rgba(0,40,70,.14);} .review__card--top{align-items:flex-start;} .review__card--rating{flex-shrink:0;} .review__card--rating svg{width:19px;height:19px;color:#FFC107;} .review .review__card--text{font-size:17px;line-height:1.55;display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:6;max-height:9.3em;overflow:hidden;} .review .swiper-wrapper{transition:height .35s ease;} .review .swiper-pagination{position:relative;bottom:auto;margin-top:1.6rem;} .review .swiper-pagination-bullet-active{background:#006CC0;} @media (min-width:640px){ .review .swiper-wrapper{align-items:flex-start;} .review .swiper-slide{height:auto !important;} } @media (max-width:639px){ .review .swiper-wrapper{align-items:flex-start;} .review__card{padding:1.7rem 1.5rem !important;justify-content:flex-start;} .review__kicker{margin-top:3.5rem;} .review__header{margin:.4rem 0 1.8rem !important;} } /* PAC-REVIEWS END */ /* PAC-CONTACT START */ .contact__form{box-shadow:0 24px 60px rgba(0,40,70,.22);} .contact__kicker{display:block;width:100%;text-align:center;color:#bfe0ff;text-transform:uppercase;font-family:"Sofia Sans Condensed",sans-serif;font-weight:700;letter-spacing:2.5px;font-size:15px;margin-top:2.4rem;} .contact__form--header{margin:.35rem 0 .5rem !important;font-size:42px !important;} .contact__form--subhead{width:88%;text-align:center;color:#cfe6fb;font-size:16px;line-height:1.5;margin:0 auto 1.5rem;} .contact__form .wpcf7{width:90%;} .contact__form .wpcf7-form{display:flex;flex-wrap:wrap;gap:.75rem .85rem;align-content:flex-start;} .contact__form .hidden-fields-container{display:none;} .contact__form .wpcf7-form > p:empty{display:none;} .contact__form--item > p:empty{display:none;} .contact__form--item{margin-bottom:0 !important;flex:1 1 calc(50% - .5rem);min-width:0;} .contact__form--item:nth-of-type(5),.contact__form--item:nth-of-type(6){flex-basis:100%;} .contact__form input{height:3.15rem !important;} .contact__form input[type=file]{height:3.4rem !important;padding-top:0 !important;display:flex;align-items:center;} .contact__form textarea{height:6rem !important;} .contact__form input,.contact__form textarea{transition:box-shadow .2s ease;} .contact__form input:focus,.contact__form textarea:focus{box-shadow:inset 0 -3px 0 #003654;outline:none;} .contact__form--submit{flex-basis:100%;margin-top:.4rem;margin-bottom:2.3rem !important;letter-spacing:.12em;transition:.25s ease;} /* premium image treatment */ .contact__right{align-self:stretch;} .contact__right--image-wrapper{overflow:visible;height:100%;display:flex;align-items:center;justify-content:flex-start;} .contact__right picture.contact__right--image{display:block;width:84%;height:84%;overflow:hidden;position:relative;z-index:10;box-shadow:22px 22px 0 0 #003654,0 26px 55px rgba(0,40,70,.24);} .contact__right img.contact__right--image{width:100%;height:100%;object-fit:cover;object-position:center;} .contact__image--border{display:none;} @media (max-width:768px){ .contact__kicker{margin-top:2rem;} .contact__form--header{font-size:34px !important;} .contact__form--subhead{width:90%;font-size:15px;margin-bottom:1.3rem;} .contact__form--item{flex-basis:100% !important;} } .contact__form .label{display:none !important;} /* PAC-CONTACT END */ /* PAC-NAV START */ .navbar__list--dropdown-shop{width:auto;min-width:15.5rem;margin-top:1.2rem;padding:0 .2rem;} .navbar__list--dropdown-header-shop{font-size:13px;letter-spacing:1.5px;padding:.2rem .8rem .7rem;color:#3d6b8a;font-weight:700;} .navbar__shop-item{margin-bottom:.15rem;} .navbar__shop-item a{display:block;line-height:1.2;padding:.55rem .8rem;transition:background .2s ease;} .navbar__shop-item a::before{display:none !important;} .navbar__shop-item a:hover{background:rgba(0,54,84,.08);} .navbar__shop-title{display:block;font-size:19px;font-weight:800;color:#003654;line-height:1.2;} .navbar__shop-desc{display:block;font-size:12.5px;color:#3d6b8a;margin-top:3px;line-height:1.3;} .mobile__navbar--subhead-shop{white-space:normal !important;font-size:18px !important;line-height:1.3;} /* PAC-NAV END */ /* PAC-CONTACTPAGE START */ .contactx{max-width:1180px;margin:0 auto;padding:3.5rem 1.5rem 0;} .contactx__grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:stretch;} .contactx .contact__form{grid-area:auto !important;width:100% !important;justify-self:stretch !important;margin:0 !important;align-self:stretch;box-shadow:0 24px 60px rgba(0,40,70,.22);} .contactx__map{position:relative;display:flex;} .contactx__map iframe{width:100%;height:100%;min-height:460px;border:0;display:block;box-shadow:0 26px 55px rgba(0,40,70,.22);} .contactx__info{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;} .contactx__info-item{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid #e3edf5;padding:1.25rem 1.4rem;text-decoration:none;box-shadow:0 10px 26px rgba(0,40,70,.08);transition:transform .2s ease,box-shadow .2s ease;} .contactx__info-item:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,40,70,.14);} .contactx__info-chip{flex-shrink:0;width:3.2rem;height:3.2rem;border-radius:50%;background:#003654;display:flex;align-items:center;justify-content:center;} .contactx__info-chip img{width:1.5rem;height:1.5rem;filter:brightness(0) invert(1);} .contactx__info-text{display:flex;flex-direction:column;min-width:0;} .contactx__info-label{font-family:"Sofia Sans Condensed",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;font-weight:700;color:#006CC0;} .contactx__info-value{color:#003654;font-weight:800;font-size:19px;line-height:1.25;} .contactx__info-hours{font-size:14px;font-weight:600;} .contactx__info-hours strong{font-weight:800;} .material-faq__q{transition:color .2s;} .material-faq__q:hover span:first-child{color:#006CC0;} .material-cta{padding:3rem 1rem !important;} .material-cta__title{font-size:28px !important;} @media (max-width:900px){ .contactx__grid{grid-template-columns:1fr;gap:1.75rem;} .contactx__map iframe{min-height:320px;} .contactx__info{grid-template-columns:1fr;} } /* PAC-CONTACTPAGE END */ /* PAC-BUILDINGS START */ .gallery-container{position:relative;} .building__detail--ribbon{position:absolute;top:0;right:0;width:158px;height:158px;overflow:hidden;z-index:20;pointer-events:none;} .building__detail--ribbon > span{position:absolute;top:30px;right:-54px;width:230px;transform:rotate(45deg);background:#c1121f;color:#fff;text-align:center;padding:11px 0;font-size:15px;font-weight:800;letter-spacing:2px;text-transform:uppercase;font-family:"Sofia Sans Condensed",sans-serif;box-shadow:0 8px 20px rgba(0,0,0,.28);} .building__detail--ribbon.is-sold > span{background:#a40e1c;} .portable-pricing{display:block;margin:6px 0 16px;} .portable-pricing__primary{display:flex;gap:12px;} .portable-pricing__primary .portable-pricing__box{flex:1 1 0;min-width:0;} .portable-pricing__box{border:1px solid #e1e7ee;border-radius:6px;overflow:hidden;text-align:center;background:#fff;box-shadow:0 6px 16px rgba(0,40,70,.07);} .portable-pricing__type{white-space:nowrap;background:#003654 !important;color:#fff !important;font-weight:700;font-size:12.5px;padding:9px 8px;letter-spacing:.6px;text-transform:uppercase;font-family:"Sofia Sans Condensed",sans-serif;line-height:1.2;} .portable-pricing__value{padding:15px 12px 16px;font-size:30px;font-weight:800;color:#003654 !important;font-family:"Sofia Sans Condensed",sans-serif;line-height:1.02;} .portable-pricing__value.is-struck s{color:#9aa3ad;font-weight:600;font-size:21px;} .portable-pricing__box--sale{border-color:#c0392b;box-shadow:0 8px 22px rgba(192,57,43,.18);} .portable-pricing__box--sale .portable-pricing__type{background:#c0392b !important;} .portable-pricing__value--sale{color:#c0392b !important;font-size:33px;} .portable-pricing__tax{display:block;font-size:11px;font-weight:600;color:#7a828b;margin-top:4px;text-transform:none;letter-spacing:0;} .portable-rto{margin-top:18px;} .portable-rto__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;} .portable-rto__title{font-family:"Sofia Sans Condensed",sans-serif;font-weight:800;font-size:21px;color:#003654;text-transform:uppercase;letter-spacing:.5px;} .portable-rto__sub{font-size:13px;color:#6b7780;} .portable-rto__perks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none;} .portable-rto__perks li{display:inline-flex;align-items:center;gap:7px;background:#eaf3fb;color:#003654;border-radius:999px;padding:6px 13px 6px 11px;font-weight:700;font-size:12px;font-family:"Sofia Sans Condensed",sans-serif;letter-spacing:.4px;text-transform:uppercase;} .portable-rto__perks svg{width:16px;height:16px;color:#006CC0;flex-shrink:0;} .portable-rto__row{display:flex;gap:10px;} .portable-rto__row .portable-pricing__box{flex:1 1 0;min-width:0;} .portable-rto__row .portable-pricing__value{font-size:26px;} @media (max-width:768px){ .building__detail--ribbon{width:118px;height:118px;} .building__detail--ribbon > span{top:22px;right:-48px;width:185px;font-size:13px;padding:9px 0;} .portable-pricing__value{font-size:25px;} .portable-pricing__value--sale{font-size:27px;} .portable-rto__row .portable-pricing__value{font-size:21px;padding:11px 4px 12px;} .portable-rto__row .portable-pricing__type{font-size:10px;padding:7px 3px;letter-spacing:.4px;} .portable-rto__perks li{font-size:11px;padding:5px 10px 5px 9px;} } /* PAC-BUILDINGS END */ /* PAC-NAVANIM START */ .navbar__list--dropdown-wrapper{margin-top:1rem;transform:translateY(-12px);transition:opacity .26s cubic-bezier(.21,.68,.31,1),transform .26s cubic-bezier(.21,.68,.31,1),visibility .26s;box-shadow:0 26px 50px -14px rgba(0,40,70,.32);border-radius:6px;pointer-events:none;} .navbar__list--dropdown-main:hover .navbar__list--dropdown-wrapper{transform:translateY(0);pointer-events:auto;} .navbar__list--dropdown-wrapper::before{content:"";position:absolute;top:-1rem;left:0;right:0;height:1.1rem;} .navbar__list--dropdown li{opacity:0;transform:translateY(9px);transition:opacity .28s ease,transform .28s ease;} .navbar__list--dropdown-main:hover .navbar__list--dropdown li{opacity:1;transform:translateY(0);} .navbar__list--dropdown-main:hover .navbar__list--dropdown li:nth-child(2){transition-delay:.04s;} .navbar__list--dropdown-main:hover .navbar__list--dropdown li:nth-child(3){transition-delay:.08s;} .navbar__list--dropdown-main:hover .navbar__list--dropdown li:nth-child(4){transition-delay:.12s;} .navbar__list--dropdown-main:hover .navbar__list--dropdown li:nth-child(5){transition-delay:.16s;} .navbar__list--dropdown-main:hover .navbar__list--dropdown li:nth-child(6){transition-delay:.20s;} /* PAC-NAVANIM END */ /* PAC-CARDBTN START */ .buildings__grid--card--has-actions .buildings__grid--card-bottom::after{display:none !important;} .buildings__grid--card--has-actions .buildings__grid--card-bottom > p.buildings__grid--card-text:last-of-type{padding-right:0 !important;} .buildings__grid--card-actions{display:flex;gap:8px;width:100%;margin-top:12px;} .buildings__grid--card-btn{flex:1 1 0;min-width:0;text-align:center;padding:10px 6px;font-family:"Sofia Sans Condensed",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.3px;font-size:13px;line-height:1.15;align-self:stretch;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background .2s ease,transform .12s ease;} .buildings__grid--card-btn--view{background:#006CC0;} .buildings__grid--card-btn--view:hover{background:#005CA3;} .buildings__grid--card-btn--design{background:#003654;} .buildings__grid--card-btn--design:hover{background:#06283f;} .buildings__grid--card-btn:active{transform:translateY(1px);} /* PAC-CARDBTN END */ /* === PAC-CONSISTENCY END === */ /* === PAC HERO DIAGRAM START === */ .material__hero-diagram { margin:8px 0 14px; } .material__hero-diagram img { display:block; width:100%; max-width:440px; height:auto; } @media (max-width:600px){ .material__hero-diagram img { max-width:100%; } } /* === PAC HERO DIAGRAM END === */ /* === PAC FOOTER PREMIUM START === */ .footer { position:relative; } .footer::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#006CC0 0%,#4a90d9 50%,#003654 100%); } .footer__wrapper { align-items:center; } .footer__link { gap:6px; flex-wrap:wrap; } .footer__link--item { position:relative; letter-spacing:.03em; transition:color .18s ease, opacity .18s ease; } .footer__link .footer__link--item::after { content:""; position:absolute; left:50%; right:50%; bottom:-4px; height:2px; background:#006CC0; transition:left .22s ease, right .22s ease; } .footer__link .footer__link--item:hover { color:#bcdcff !important; } .footer__link .footer__link--item:hover::after { left:0; right:0; } .footer__image--svg a { display:inline-flex; transition:transform .18s ease, opacity .18s ease; } .footer__image--svg a:hover { transform:translateY(-2px); opacity:.85; } .footer__address--text { line-height:1.5; transition:color .18s ease; } .footer__address--text:hover { color:#bcdcff; } .footer__staff { border-top:1px solid rgba(255,255,255,.10); margin-top:10px; padding:14px 0 4px; } .footer__staff--link { letter-spacing:.06em; opacity:.55; transition:opacity .18s ease; } .footer__staff--link:hover { opacity:.9; } /* === PAC FOOTER PREMIUM END === */ /* === PAC OVERFLOW FIX START === */ /* .tools-ribbon used content-box + 20px side padding on a 100%-width element = 40px horizontal page overflow (right scrollbar). Include padding in the width. */ .tools-ribbon { box-sizing: border-box; max-width: 100%; } /* === PAC OVERFLOW FIX END === */ /* === PAC POLISH PASS START === */ /* badge value/label spacing: inline-flex was collapsing the whitespace text node */ .material--metal .material__badge { gap:5px; } /* hero: keep image top-aligned, but stretch the info column to the image height and center its content vertically — balances short-description products (ThermaGuard) without floating the image on long-description ones (Panel-Loc Plus) */ .building__detail--material.material--metal { align-items:flex-start !important; } .material--metal .building__detail--information-materials { align-self:stretch; display:flex !important; flex-direction:column; justify-content:center; } /* tame very tall hero images */ .material-slider-wrap .materialSwiper .swiper-slide img { max-height:480px; } /* manufacturer resources deep-link row */ .material-resources { text-align:center; } .material-resources__row { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px; } .material-resources__row .material__btn { display:inline-block; } /* "How it's built" construction cutaway band */ .material-construction__row { display:flex; gap:36px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:8px; } .material-construction__img { flex:0 0 300px; max-width:330px; } .material-construction__img img { width:100%; height:auto; display:block; } .material-construction__text { flex:1 1 340px; max-width:520px; color:#28323a; font-size:16px; line-height:1.7; } .material-construction__text strong { color:#003654; } @media (max-width:760px){ .material-construction__row { flex-direction:column; gap:18px; } .material-construction__img { flex-basis:auto; max-width:280px; } } /* Material category card grid: force 3 across (cards were content-box and overflowed to 2) */ .buildings__grid--materials { flex-wrap:wrap; column-gap:14px; row-gap:14px; } .buildings__grid--materials .buildings__grid--card { box-sizing:border-box; width:calc((100% - 28px)/3) !important; max-width:calc((100% - 28px)/3) !important; } @media (max-width:768px){ .buildings__grid--materials .buildings__grid--card { width:calc((100% - 14px)/2) !important; max-width:calc((100% - 14px)/2) !important; } } @media (max-width:480px){ .buildings__grid--materials .buildings__grid--card { width:100% !important; max-width:100% !important; } } /* ---- Mobile fixes for material / door detail pages ---- */ /* Hero was stuck at ~58%/38% on phones (later !important rules beat the media query) */ @media (max-width:1024px){ .material--metal .gallery-container-materials, .material--metal .building__detail--information-materials { width:100% !important; max-width:100% !important; } } /* Content bands were 80% (FAQ 64%) — too narrow on phones */ @media (max-width:600px){ .material-band { width:92% !important; } .material-band--alt > * { width:92% !important; } .material-faq { width:100% !important; } } /* Options & Upgrades hub (page 277): banner removed, so add top breathing room and keep the intro a tidy centered column (was full-width) */ body.page-id-277 .styles { padding-top:64px; } body.page-id-277 .styles__subhead { max-width:760px; margin-left:auto; margin-right:auto; } @media (max-width:600px){ body.page-id-277 .styles { padding-top:32px; } body.page-id-277 .styles__subhead { max-width:92%; } } /* Garage door opener "Choose your opener" good/better/best tier cards */ .material-band--tiers { text-align:center; } .material-band--tiers .material-band__title { margin-left:auto; margin-right:auto; } .material-band__sub--roomy { margin:8px auto 34px; max-width:620px; line-height:1.7; } .opener-tiers { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; align-items:stretch; margin:30px auto 0; max-width:1060px; } .opener-tier { position:relative; flex:1 1 280px; max-width:340px; background:#fff; border:1px solid #e2e6ea; border-radius:12px; padding:26px 22px 24px; display:flex; flex-direction:column; box-shadow:0 4px 14px rgba(0,40,70,.05); } .opener-tier--featured { border-color:#006CC0; box-shadow:0 8px 24px rgba(0,108,192,.16); } .opener-tier__badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#003654; color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; border-radius:20px; white-space:nowrap; } .opener-tier--featured .opener-tier__badge { background:#006CC0; } .opener-tier__img { height:150px; display:flex; align-items:center; justify-content:center; margin:8px 0 12px; } .opener-tier__img img { max-height:150px; max-width:100%; width:auto; object-fit:contain; } .opener-tier__model { margin:0 0 8px; font-size:19px; color:#003654; text-align:center; } .opener-tier__blurb { margin:0 0 14px; font-size:14px; line-height:1.6; color:#41525d; text-align:center; } .opener-tier__features { list-style:none; margin:0 0 16px; padding:0; text-align:left; } .opener-tier__features li { position:relative; padding:5px 0 5px 24px; font-size:14px; line-height:1.5; color:#28323a; border-top:1px solid #eef1f4; } .opener-tier__features li:before { content:"\2713"; position:absolute; left:2px; top:5px; color:#006CC0; font-weight:700; } .opener-tier__best { margin:auto 0 14px; font-size:13px; line-height:1.5; color:#51606b; text-align:left; } .opener-tier__best strong { color:#003654; } .opener-tier__link { align-self:center; margin-top:auto; } @media (max-width:880px){ .opener-tier { flex-basis:100%; max-width:420px; } } /* Slider per-image tier tag (Basic / Plus / Premium) */ .material-slider-wrap .swiper-slide, .material-slide__single { position:relative; } .material-slide__tag { position:absolute; top:14px; left:14px; z-index:3; background:#003654; color:#fff; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:6px 14px; border-radius:20px; box-shadow:0 2px 8px rgba(0,40,70,.25); } /* Portable building pricing boxes (Cash / Sale / 36 / 60 RTO) */ .portable-pricing { display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 10px; } .portable-pricing__box { border:1px solid #d3d6db; border-radius:5px; overflow:hidden; text-align:center; min-width:92px; background:#fff; } .portable-pricing__box--sale { border-color:#b3201f; } .portable-pricing__type { background:#a4262c; color:#fff; font-weight:700; font-size:12.5px; padding:7px 12px; letter-spacing:.02em; line-height:1.15; } .portable-pricing__value { padding:11px 14px 12px; font-size:17px; font-weight:800; color:#003654; font-family:'Sofia-Sans-Condensed',sans-serif; } .portable-pricing__value.is-struck s { color:#8a8f96; font-weight:600; } .portable-pricing__value--sale { color:#c0392b; } .portable-pricing__tax { display:block; font-size:11px; font-weight:600; color:#6b7178; margin-top:1px; } @media (max-width:600px){ .portable-pricing__box { flex:1 1 44%; min-width:0; } } /* Remove the PAC logo watermark overlaid on building detail images (site-wide) */ .watermark { display:none !important; } /* Discreet staff login / manage link in the footer */ .footer__staff { text-align:center; padding:12px 16px 4px; } .footer__staff--link { color:rgba(255,255,255,.42); font-size:12px; letter-spacing:.03em; text-decoration:none; } .footer__staff--link:hover { color:#fff; text-decoration:underline; } /* On Hold / Sold status badge on the building detail page */ .building__status-badge { display:inline-block; font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:5px 14px; border-radius:20px; margin:0 0 10px; } .building__status-badge--hold { background:#fdf2da; color:#9a6a00; border:1px solid #ecd9a6; } .building__status-badge--sold { background:#a4262c; color:#fff; } /* === PAC POLISH PASS END === */ /* === PAC CARD ALIGN START === */ /* Benefit cards: reserve 2 lines for the title so the body copy lines up across all cards */ .material-feature-card h3 { min-height: 2.4em; } /* Color-options tier cards: center their text to match the rest of the centered band */ .material-tier { text-align: center; } .material-tier__name { justify-content: center; } /* === PAC CARD ALIGN END === */ /* === PAC BUILDING GALLERY START === */ .gallery-container { position:relative !important; } .gallery__buttons { position:static !important; } /* Nav bar: an absolute flex strip across the MAIN image; arrows pushed to the edges */ .gallery__buttons--navigation { position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important; aspect-ratio:4 / 3 !important; transform:none !important; display:flex !important; justify-content:space-between !important; align-items:center !important; padding:0 14px !important; box-sizing:border-box !important; width:auto !important; height:auto !important; margin:0 !important; pointer-events:none; z-index:7; } .gallery__buttons--navigation-prev, .gallery__buttons--navigation-next { position:static !important; flex:0 0 auto !important; width:44px !important; height:44px !important; border-radius:50%; background:rgba(12,28,42,.5); box-shadow:0 2px 10px rgba(0,0,0,.28); display:flex !important; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto; opacity:.85; transition:background .18s ease, opacity .18s ease; } .gallery-container:hover .gallery__buttons--navigation-prev, .gallery-container:hover .gallery__buttons--navigation-next { opacity:1; } .gallery__buttons--navigation-prev:hover, .gallery__buttons--navigation-next:hover { background:#006CC0; } .gallery__buttons--navigation svg { width:20px !important; height:20px !important; } .gallery__buttons--navigation .cls-2 { fill:transparent !important; } .gallery__buttons--navigation .cls-1 { fill:#ffffff !important; } /* Zoom button: subtle circular icon, top-right */ .gallery__buttons--fullscreen { width:40px !important; height:40px !important; border-radius:50%; background:rgba(12,28,42,.5); padding:9px; box-sizing:border-box; top:14px !important; right:14px !important; left:auto !important; opacity:.8; transition:background .18s, opacity .18s; cursor:pointer; z-index:7; } .gallery__buttons--fullscreen:hover { background:#006CC0; opacity:1; } .gallery__buttons--fullscreen .cls-1 { fill:transparent !important; } .gallery__buttons--fullscreen .cls-2 { fill:#ffffff !important; } /* Rounded main image + premium thumbnails */ .mySwiper4 .swiper-slide img { border-radius:12px; } .mySwiper3 .swiper-slide { border-radius:10px; overflow:hidden; opacity:.5; transition:opacity .18s ease, box-shadow .18s ease; cursor:pointer; } .mySwiper3 .swiper-slide img { border-radius:10px; } .mySwiper3 .swiper-slide-thumb-active { opacity:1; box-shadow:0 0 0 3px #006CC0; } /* Premium lightbox */ #imageLightbox { background:rgba(8,16,24,.93) !important; } #imageLightbox #lightbox-image { border-radius:8px; box-shadow:0 10px 50px rgba(0,0,0,.55); } .pacLightbox__arrow { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; transition:background .18s ease; } .pacLightbox__arrow:hover { background:#006CC0; } #close-imageLightbox { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; transition:background .18s ease; } #close-imageLightbox:hover { background:#006CC0; } /* Main image: landscape 4:3, WHOLE image visible (no cropping), fits the screen */ .gallery-container { align-self: flex-start !important; } .gallery-container .mySwiper4 { flex:0 0 auto !important; height:auto !important; aspect-ratio:4 / 3 !important; max-height:72vh !important; background:#f4f5f6; border-radius:12px; } .gallery-container .mySwiper4 .swiper-wrapper, .gallery-container .mySwiper4 .swiper-slide { height:100% !important; } .gallery-container .mySwiper4 .swiper-slide img { width:100% !important; height:100% !important; object-fit:contain !important; } /* Thumbnail strip removed — navigate via the arrows (Carson) */ .gallery-container .mySwiper3 { display:none !important; } /* === PAC BUILDING GALLERY END === */ /* === PAC PORTABLE SPECS START === */ /* Revert-insurance: hide the redundant "Low Monthly Payments" perk (3rd) if a theme revert restores it */ .portable-rto__perks li:nth-child(3){ display:none !important; } /* Premium Key Specs — portable building pages only (scoped via :has) */ .building__detail--information:has(.portable-pricing) .building__detail--information-row{ display:flex !important; align-items:center; gap:12px; padding:11px 14px; margin:0 0 8px; border:1px solid #e7ebef; border-radius:10px; background:#fafbfc; transition:border-color .15s ease, box-shadow .15s ease; } .building__detail--information:has(.portable-pricing) .building__detail--information-row:hover{ border-color:#cfe0ee; box-shadow:0 3px 10px rgba(0,45,85,.07); } .building__detail--information:has(.portable-pricing) .building__detail--information-icon{ width:36px !important; height:36px !important; padding:8px; box-sizing:border-box; background:#eaf3fb; border-radius:9px; flex:0 0 auto; } .building__detail--information:has(.portable-pricing) .building__detail--information-text{ margin:0 !important; color:#2a3b48; font-size:.95rem; line-height:1.3; } /* Building ID under the title (portable pages) */ .building__detail--building-id{ margin:4px 0 2px !important; font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#8492a0; } .building__detail--building-id span{ color:#006CC0; } /* Description under the picture, beside key specs (portable pages) */ .building__detail--gallery-desc{ margin-top:18px; padding-top:18px; border-top:1px solid #e7ebef; color:#3a4a57; font-size:.97rem; line-height:1.6; } .building__detail--gallery-desc p{ margin:0 0 .8em; } .building__detail--gallery-desc p:last-child{ margin-bottom:0; } .building__detail--gallery-desc-head{ font-size:.95rem !important; font-weight:700; color:#003E5F; text-transform:uppercase; letter-spacing:.04em; margin:0 0 .55em !important; } /* Share + Print moved to the top-right as premium icon buttons (portable pages) */ .building__detail--information:has(.portable-pricing){ position:relative; } .building__detail--information:has(.portable-pricing) .barndo__information--links{ position:absolute; top:-2px; right:0; margin:0; gap:8px; z-index:4; } .building__detail--information:has(.portable-pricing) .building__detail--information-header{ padding-right:96px; } .building__detail--information:has(.portable-pricing) .barndo__information--share, .building__detail--information:has(.portable-pricing) .barndo__information--print{ margin:0; width:38px; height:38px; padding:0; border:1px solid #e3e8ec; border-radius:50%; background:#fff; color:#003E5F; box-shadow:0 1px 3px rgba(0,40,80,.06); display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .building__detail--information:has(.portable-pricing) .barndo__information--share:hover, .building__detail--information:has(.portable-pricing) .barndo__information--print:hover{ background:#006CC0; border-color:#006CC0; box-shadow:0 4px 12px rgba(0,108,192,.28); transform:translateY(-1px); } .building__detail--information:has(.portable-pricing) .barndo__information--share:hover svg path, .building__detail--information:has(.portable-pricing) .barndo__information--print:hover svg path{ fill:#fff; } .building__detail--information:has(.portable-pricing) .barndo__information--links p{ display:none; } .building__detail--information:has(.portable-pricing) .barndo__information--share svg, .building__detail--information:has(.portable-pricing) .barndo__information--print svg{ width:18px; height:18px; margin:0; } /* Share toast (clipboard-fallback feedback) */ .pac-share-toast{ position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(12px); background:#003E5F; color:#fff; padding:11px 20px; border-radius:999px; font-size:.9rem; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.22); opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:9999; pointer-events:none; } .pac-share-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); } /* Portable price sheet — mirrors Manage Buildings 'Print Price Sheet' (.bs-* from building-manager.css) */ #pacbm-printsheet{ display:none; } .bs-sheet{ max-width:720px; margin:0 auto; color:#1f2a32; font-family:Arial,Helvetica,sans-serif; } .bs-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-bottom:3px solid #003654; padding-bottom:8px; flex-wrap:wrap; } .bs-brand{ font-size:26px; font-weight:800; color:#003654; } .bs-contact{ font-size:11px; color:#555; text-align:right; } .bs-title{ font-size:30px; font-weight:800; color:#003654; margin:16px 0 2px; line-height:1.1; } .bs-meta{ font-size:13px; color:#69737b; margin-bottom:12px; } .bs-photo{ text-align:center; margin:0 0 14px; } .bs-photo img{ max-width:100%; max-height:320px; border-radius:8px; border:1px solid #e4e8eb; } .bs-pricebox{ border:2px solid #003654; border-radius:10px; padding:14px 18px; margin-bottom:14px; } .bs-cash{ font-size:40px; font-weight:800; color:#003654; line-height:1; } .bs-cash .bs-tax{ font-size:16px; font-weight:600; color:#69737b; } .bs-strike{ color:#999; text-decoration:line-through; font-weight:700; } .bs-sale{ color:#c0392b; } .bs-rto{ margin-top:12px; border-top:1px dashed #cfd5da; padding-top:12px; } .bs-rto-h{ font-size:13px; font-weight:700; color:#006CC0; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; } .bs-rto-grid{ display:flex; gap:10px; } .bs-rto-grid > div{ flex:1; text-align:center; background:#f2f6fa; border:1px solid #d8e3ee; border-radius:8px; padding:10px 6px; } .bs-rto-grid b{ display:block; font-size:22px; color:#003654; } .bs-rto-grid span{ font-size:12px; color:#69737b; } .bs-rto-note{ font-size:11px; color:#69737b; text-align:center; margin-top:6px; } .bs-specs{ display:flex; flex-wrap:wrap; gap:6px 24px; margin-bottom:12px; } .bs-spec{ font-size:14px; } .bs-spec span{ color:#69737b; } .bs-spec b{ color:#1f2a32; } .bs-desc{ font-size:13px; line-height:1.55; color:#41525d; margin-bottom:14px; } .bs-foot{ font-size:10px; color:#777; border-top:1px solid #d7dce0; padding-top:7px; line-height:1.45; } @media print{ body:has(#pacbm-printsheet) > *:not(#pacbm-printsheet){ display:none !important; } body:has(#pacbm-printsheet) #pacbm-printsheet{ display:block !important; color:#000; } @page{ margin:12mm; } } /* === PAC PORTABLE SPECS END === */ /* === PAC PORTABLE CARDS START === */ /* "Used" badge — premium amber pill, top-RIGHT on the photo (below the title bar so it never covers the name) */ .buildings__grid--card-used{ position:absolute; top:48px; right:10px; left:auto; bottom:auto; width:auto; height:auto; overflow:visible; z-index:6; pointer-events:none; } .buildings__grid--card-used > span{ position:static; transform:none; display:inline-block; width:auto; background:#d97706; color:#fff; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; box-shadow:0 2px 8px rgba(0,0,0,.30); } /* Uniform premium frame for ALL building cards (rounded to match the site's rounded UI: filters 16px, gallery 12px, pills) */ .buildings__grid--card{ border-radius:14px !important; overflow:hidden; box-shadow:0 5px 18px rgba(0,40,80,.10) !important; transition:transform .18s ease, box-shadow .18s ease; } .buildings__grid--card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(0,40,80,.17) !important; } /* Inventory # on ONE line, muted — hide the redundant "Building:" label (the card title already says it's a building) via font-size:0 on the

, show the id on a single row */ .buildings__grid--card:has(.buildings__grid--card-pricing) .buildings__grid--card-text--full{ font-size:0 !important; white-space:nowrap !important; line-height:1 !important; margin:0 0 8px !important; overflow:hidden !important; } .buildings__grid--card:has(.buildings__grid--card-pricing) .buildings__grid--card-text--full .buildings__grid--card-text--simple{ font-size:12px !important; line-height:1.3 !important; white-space:nowrap !important; color:#8a99a6 !important; font-weight:600 !important; letter-spacing:.02em; } /* Portable card pricing: Cash + 84mo side by side (replaces "Starting at") */ .buildings__grid--card-pricing{ width:100%; display:flex; gap:10px; margin:2px 0 12px; } .buildings__grid--card-pricing .bgcp-item{ flex:1; background:#fff; border:1px solid #d8e3ee; border-radius:10px; padding:8px 12px; display:flex; flex-direction:column; line-height:1.18; } .buildings__grid--card-pricing .bgcp-item--rto{ background:#eef5fb; border-color:#cfe0ee; } .buildings__grid--card-pricing .bgcp-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b8298; } .buildings__grid--card-pricing .bgcp-value{ font-size:20px; font-weight:800; color:#003654; white-space:nowrap; } .buildings__grid--card-pricing .bgcp-value small{ font-size:12px; font-weight:600; color:#6b8298; } /* Portable card dimensions: clean premium row w/ icon (no more orphan icon dead-space) */ .buildings__grid--card-dims{ width:100%; display:flex; align-items:center; gap:7px; color:#41556b; font-size:15px; font-weight:700; margin-bottom:2px; } .buildings__grid--card-dims svg{ width:17px; height:17px; color:#006CC0; flex:0 0 auto; } /* === PAC PORTABLE CARDS END === */ /* === PAC SQUARE CORNERS START === */ /* Carson prefers SQUARE to match the site's square buttons (more on-brand for a builder). Square ALL structural elements; only genuine circles (icon buttons / photo arrows, 50% radius) stay round. */ /* --- buildings listing: cards, filter bar, pricing, tags --- */ .buildings__grid--card{ border-radius:0 !important; } .buildings__refine, .buildings__refine--field select, .buildings__refine--apply, .buildings__refine--reset, .buildings__refine input[type="number"], .buildings__refine select{ border-radius:0 !important; } .buildings__grid--card-pricing .bgcp-item{ border-radius:0 !important; } .buildings__grid--card-used > span{ border-radius:0 !important; } .buildings__grid--card-tag{ border-radius:0 !important; } /* --- building detail page: gallery image, lightbox image, key-spec chips, portable pricing, status badge --- */ .gallery-container .mySwiper4, .mySwiper4 .swiper-slide img, .mySwiper3 .swiper-slide, .mySwiper3 .swiper-slide img, #imageLightbox #lightbox-image{ border-radius:0 !important; } .building__detail--information:has(.portable-pricing) .building__detail--information-row, .building__detail--information:has(.portable-pricing) .building__detail--information-icon{ border-radius:0 !important; } .portable-pricing__box, .portable-rto__perks li{ border-radius:0 !important; } .building__status-badge{ border-radius:0 !important; } /* --- printable price sheet --- */ .bs-photo img, .bs-pricebox, .bs-rto-grid > div{ border-radius:0 !important; } /* --- options & upgrades (materials) page + nav dropdown --- */ .material-feature, .material-feature-card, .material--metal .material__badge, .material__btn, .material-tier, .material-tier__tag, .material-swatch__chip, .material-dot, .material-slide__tag, .opener-tier, .opener-tier__badge, .navbar__list--dropdown-wrapper{ border-radius:0 !important; } /* --- FAQ tabs --- */ .faq-tab{ border-radius:0 !important; } /* --- building-type / category filter buttons (desktop pills + mobile dropdown). Higher specificity to beat the template's inline-style border-radius:999px!important --- */ .buildings__filter--buttons .buildings__filter--buttons-item, .buildings .buildings__filter--buttons-item{ border-radius:0 !important; } .buildings__filter--mobile .buildings__filter--mobile-main, .buildings__filter--mobile .buildings__filter--mobile-dropdown, .buildings__filter--mobile .buildings__filter--mobile-sub{ border-radius:0 !important; } /* Portable cards have their own Design Your Own | View Details buttons (.buildings__grid--card-actions); hide the theme's generic "View Details \2192" ::after so it isn't a duplicate. */ .buildings__grid--card:has(.buildings__grid--card-actions) .buildings__grid--card-bottom::after{ content:none !important; display:none !important; } /* Compact portable card action buttons (smaller buttons + remove dead space below). The 54px card-bottom padding-bottom was reserved for the now-hidden ::after button. Font clamps so the labels stay one line. */ .buildings__grid--card:has(.buildings__grid--card-actions) .buildings__grid--card-btn{ padding:10px 8px !important; font-size:clamp(10px,1.5vw,12px) !important; line-height:1.15 !important; white-space:nowrap !important; letter-spacing:0 !important; } .buildings__grid--card:has(.buildings__grid--card-actions) .buildings__grid--card-actions{ margin-top:12px !important; } .buildings__grid--card:has(.buildings__grid--card-actions) .buildings__grid--card-bottom{ padding-bottom:20px !important; } /* === PAC SQUARE CORNERS END === */ /* === PAC STYLES 3 CARDS START === */ /* "Built to Fit Your Project" section: drop the "Send Us a Message" CTA card (the one w/ the question-mark .styles__card--top-icon) so only the three building-type cards show. (Carson) */ .styles__card--wrapper > a:has(.styles__card--top-icon){ display:none !important; } /* === PAC STYLES 3 CARDS END === */ /* === PAC PORTABLE OVERVIEW START === */ .pac-landing{ width:100%; max-width:none; margin:0; padding:0; } .pbo{ color:#26333d; } .pbo-sec{ width:100%; } .pbo-in{ max-width:1160px; margin:0 auto; padding:58px 26px; } .pbo-kick{ display:inline-flex; align-items:center; gap:11px; font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#006CC0; margin:0 0 16px; } .pbo-kick:before{ content:""; width:26px; height:2px; background:currentColor; } .pbo-kick--light{ color:#9ec4e0; } .pbo-h1{ font-size:clamp(34px,5.4vw,58px); font-weight:800; line-height:1.04; letter-spacing:-.01em; margin:0 0 18px; color:#003248; } .pbo-h2{ font-size:clamp(27px,4vw,40px); font-weight:800; line-height:1.1; letter-spacing:-.01em; margin:0 0 14px; color:#003248; } .pbo-h2--light{ color:#fff; } .pbo-lead{ font-size:18.5px; line-height:1.62; color:#46596a; margin:0 0 28px; max-width:580px; } .pbo-lead--light{ color:#d4e3ef; } .pbo-sub{ font-size:17px; line-height:1.62; color:#5f7180; margin:0 auto 28px; max-width:640px; text-align:center; } .pbo-sub--left{ text-align:left; margin-left:0; } .pbo-btns{ display:flex; flex-wrap:wrap; gap:13px; } .pbo-btns--center{ justify-content:center; } .pbo-btn{ display:inline-flex; align-items:center; gap:8px; padding:16px 30px; font-size:15px; font-weight:700; line-height:1; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; border-radius:0; transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; } .pbo-btn--solid{ background:#006CC0; color:#fff; box-shadow:0 6px 18px rgba(0,80,150,.28); } .pbo-btn--solid:hover{ background:#005CA3; color:#fff; transform:translateY(-2px); } .pbo-btn--ghost{ border:2px solid rgba(255,255,255,.7); color:#fff; } .pbo-btn--ghost:hover{ background:#fff; color:#003248; } .pbo-btn--white{ background:#fff; color:#006CC0; } .pbo-btn--white:hover{ background:#eaf2fb; color:#006CC0; transform:translateY(-2px); } .pbo-hero{ position:relative; min-height:450px; display:flex; align-items:center; overflow:hidden; } .pbo-hero__media{ position:absolute; inset:0; } .pbo-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; } .pbo-hero:after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,28,46,.86) 0%,rgba(0,28,46,.72) 48%,rgba(0,28,46,.42) 100%); } .pbo-hero__content{ position:relative; z-index:2; } .pbo-hero .pbo-h1{ color:#fff; } .pbo-trust{ margin:26px 0 0; font-size:14px; color:#bcd3e4; font-weight:500; } .pbo-stars{ color:#f4b431; letter-spacing:3px; } .pbo-props{ background:#fff; border-bottom:1px solid #e7edf1; } .pbo-props__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-top:34px; padding-bottom:34px; } .pbo-prop{ padding-left:18px; border-left:3px solid #006CC0; } .pbo-prop__n{ display:none; } .pbo-prop strong{ display:block; font-size:18px; color:#003248; margin-bottom:5px; font-weight:800; } .pbo-prop span{ font-size:14px; color:#5f7180; line-height:1.5; } .pbo-styles{ background:#f5f8fa; } .pbo-styles .pbo-kick{ display:flex; justify-content:center; } .pbo-styles .pbo-h2{ text-align:center; } .pbo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .pbo-card{ display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid #e4eaee; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .pbo-card:hover{ box-shadow:0 16px 36px rgba(0,40,80,.15); transform:translateY(-5px); border-color:#cfe0ee; } .pbo-card__img{ aspect-ratio:4/3; overflow:hidden; background:#eef3f7; } .pbo-card__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .pbo-card:hover .pbo-card__img img{ transform:scale(1.06); } .pbo-card__body{ padding:17px 17px 19px; text-align:left; } .pbo-card__body h3{ font-size:18px; font-weight:800; color:#003248; margin:0 0 6px; } .pbo-card__body p{ font-size:13.5px; color:#5f7180; line-height:1.5; margin:0 0 12px; } .pbo-card__cta{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#006CC0; } .pbo-rto{ position:relative; background:#003248; text-align:center; } .pbo-rto .pbo-kick{ display:inline-flex; } .pbo-rto .pbo-lead{ margin-left:auto; margin-right:auto; } .pbo-steps{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:10px 0 34px; } .pbo-step{ display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); padding:13px 20px; font-size:14px; color:#eaf2f8; font-weight:600; } .pbo-step span{ display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; background:#006CC0; color:#fff; font-weight:800; font-size:13px; } .pbo-quality{ background:#fff; } .pbo-quality__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .pbo-checks{ list-style:none; margin:0; padding:0; } .pbo-checks li{ position:relative; padding:13px 0 13px 38px; border-bottom:1px solid #e7edf1; font-size:16px; color:#2a3b48; } .pbo-checks li:before{ content:"\2713"; position:absolute; left:0; top:12px; width:23px; height:23px; background:#006CC0; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; } .pbo-cta{ background:#006CC0; } .pbo-cta__in{ text-align:center; } .pbo-cta .pbo-lead{ margin-left:auto; margin-right:auto; } .pbo-phone{ margin:24px 0 0; } .pbo-phone a{ color:#fff; font-size:21px; font-weight:800; text-decoration:none; } @media(max-width:900px){ .pbo-in{ padding:38px 20px; } .pbo-hero{ min-height:380px; } .pbo-hero:after{ background:linear-gradient(180deg,rgba(0,28,46,.7),rgba(0,28,46,.82)); } .pbo-props__grid{ grid-template-columns:1fr 1fr; gap:24px; } .pbo-grid{ grid-template-columns:1fr 1fr; } .pbo-quality__grid{ grid-template-columns:1fr; gap:26px; } } @media(max-width:520px){ .pbo-grid{ gap:13px; } .pbo-card__body h3{ font-size:16px; } .pbo-step{ padding:11px 15px; font-size:13px; } } .pbo-brochure{ background:#eef3f7; } .pbo-brochure__grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .pbo-brochure__list{ list-style:none; margin:18px 0 0; padding:0; } .pbo-brochure__list li{ position:relative; padding:8px 0 8px 30px; font-size:15px; color:#2a3b48; } .pbo-brochure__list li:before{ content:"\2713"; position:absolute; left:0; top:8px; color:#006CC0; font-weight:700; } .pbo-form{ background:#fff; border:1px solid #dbe3e9; padding:26px; } .pbo-form__row{ margin-bottom:12px; } .pbo-form input{ width:100%; box-sizing:border-box; padding:14px; font-size:15px; border:1px solid #cdd8e0; border-radius:0; background:#fff; color:#1f2a32; font-family:inherit; } .pbo-form input:focus{ outline:none; border-color:#006CC0; box-shadow:0 0 0 3px rgba(0,108,192,.15); } .pbo-form button{ width:100%; justify-content:center; margin-top:4px; cursor:pointer; border:none; } .pbo-form button[disabled]{ opacity:.6; cursor:default; } .pbo-form__note{ font-size:12px; color:#8492a0; margin:12px 0 0; text-align:center; line-height:1.4; } .pbo-form--done{ text-align:center; padding:38px 26px; } .pbo-form--done h3{ color:#003248; font-size:20px; font-weight:800; margin:0 0 8px; } .pbo-form--done p{ color:#5f7180; font-size:15px; line-height:1.5; margin:0 0 18px; } @media(max-width:900px){ .pbo-brochure__grid{ grid-template-columns:1fr; gap:24px; } } .pbo-hero--sub{ min-height:400px; } .pbo-sizes{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:820px; margin:0 auto; } .pbo-sizes span{ display:inline-block; padding:9px 15px; border:1px solid #cfd8e0; background:#fff; font-size:14px; font-weight:600; color:#003248; } .pbo-uses{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0; } .pbo-uses span{ display:inline-block; padding:8px 15px; background:#eaf2fb; color:#0c447c; font-size:13.5px; font-weight:600; } /* === PAC PORTABLE OVERVIEW END === */ /* === PAC PORTABLE VARIANTS START === */ .pbo-variants .pbo-in{padding-top:54px;padding-bottom:54px} .pbo-vlist{margin-top:30px;display:grid;gap:0} .pbo-variant{padding:30px 0;border-top:1px solid #e3e9ee} .pbo-variant:first-child{border-top:0;padding-top:6px} .pbo-variant__name{font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:24px;line-height:1.12;color:#003e5f;margin:0 0 12px;letter-spacing:-.01em} .pbo-variant__desc{font-size:16px;line-height:1.62;color:#46596a;margin:0 0 18px;max-width:780px} .pbo-variant__sizes-label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#006CC0;margin:0 0 10px} .pbo-sizes--compact{gap:8px} .pbo-sizes--compact span{font-size:13px;padding:7px 11px} @media(max-width:820px){.pbo-variant__name{font-size:21px}} .pbo-fineprint{background:#f4f7f9;border-top:1px solid #e3e9ee} .pbo-fineprint .pbo-in{padding-top:30px;padding-bottom:30px} .pbo-fineprint__note{font-size:12.5px;line-height:1.62;color:#7a8a99;margin:0;max-width:1040px} .pbo-fineprint__note strong{color:#46596a} /* === PAC PORTABLE VARIANTS END === */ /* === PAC PORTABLE HUB START === */ .pbo-catnav{background:#003248} .pbo-catnav__in{max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:0 18px} .pbo-catnav a{color:#bcd2e3;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:15px 18px;text-decoration:none;border-bottom:3px solid transparent;transition:.15s} .pbo-catnav a:hover{color:#fff;border-color:#006CC0} /* numbered how-it-works */ .pbo-how .pbo-in{padding-top:56px;padding-bottom:56px} .pbo-how__head{max-width:680px;margin:0 auto;text-align:center} .pbo-how__grid{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .pbo-how__step{position:relative;padding:30px 22px 26px;background:#fff;border:1px solid #e3e9ee} .pbo-how__step:before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:#006CC0} .pbo-how__n{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:#003e5f;color:#fff;font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:24px;margin-bottom:15px} .pbo-how__step h3{font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:18px;color:#003e5f;margin:0 0 8px;text-transform:uppercase;letter-spacing:.01em;line-height:1.1} .pbo-how__step p{font-size:13.5px;line-height:1.55;color:#46596a;margin:0} /* building cards with photo */ .pbo-grp .pbo-in{padding-top:74px;padding-bottom:74px} .pbo-grp__head{max-width:680px;margin:0 auto 4px;text-align:center} .pbo-grp__head .pbo-kick{display:inline-flex;align-items:center;gap:10px;color:#006CC0} .pbo-grp__head .pbo-kick:before,.pbo-grp__head .pbo-kick:after{content:"";width:26px;height:2px;background:#006CC0;display:inline-block;position:static;transform:none} .pbo-grp__head .pbo-h2{font-size:34px;margin-top:15px;line-height:1.08} .pbo-grp__head .pbo-sub{margin:12px auto 0;max-width:600px;text-align:center} .pbo-blds{margin-top:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .pbo-bld{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e9ee;overflow:hidden} .pbo-bld__img{aspect-ratio:3/2;background:#fff;overflow:hidden} .pbo-bld__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease} .pbo-bld:hover .pbo-bld__img img{transform:scale(1.045)} .pbo-bld__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .pbo-bld--nophoto{border-top:4px solid #003e5f} .pbo-bld--nophoto .pbo-bld__body{padding-top:24px} .pbo-bld__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 13px;border-bottom:1px solid #eef2f5;padding-bottom:13px} .pbo-bld__name{font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:23px;line-height:1.06;color:#003e5f;margin:0} .pbo-bld__price{flex:0 0 auto;text-align:right;font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:21px;color:#006CC0;white-space:nowrap;line-height:1} .pbo-bld__price small{display:block;font-size:9.5px;font-weight:700;color:#8a99a6;text-transform:uppercase;letter-spacing:.07em;margin-top:3px} .pbo-bld--pkg .pbo-bld__price{color:#1a7a3c} .pbo-bld__desc{font-size:14.5px;line-height:1.6;color:#46596a;margin:0 0 14px} .pbo-bld__feat{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px} .pbo-bld__feat li{position:relative;padding-left:20px;font-size:13px;line-height:1.45;color:#3c4d5b} .pbo-bld__feat li:before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;background:#006CC0} .pbo-bld__sizes{margin-top:auto;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7a8a99;border-top:1px solid #eef2f5;padding-top:12px} /* expandable option cards */ .pbo-opts{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} .pbo-opt{background:#fff;border:1px solid #e3e9ee;overflow:hidden} .pbo-opt__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 14px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit} .pbo-opt__head h4{font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:17px;color:#003e5f;margin:0;text-transform:uppercase;letter-spacing:.02em} .pbo-opt__icon{flex:0 0 auto;position:relative;width:18px;height:18px} .pbo-opt__icon:before,.pbo-opt__icon:after{content:"";position:absolute;left:50%;top:50%;background:#006CC0;transition:.25s} .pbo-opt__icon:before{width:2px;height:16px;transform:translate(-50%,-50%)} .pbo-opt__icon:after{width:16px;height:2px;transform:translate(-50%,-50%)} .pbo-opt.is-open .pbo-opt__icon:before{transform:translate(-50%,-50%) scaleY(0)} .pbo-opt__teaser{padding:0 22px 20px} .pbo-opt__teaser p{margin:0;font-size:13.5px;line-height:1.56;color:#46596a} .pbo-opt__more{max-height:0;overflow:hidden;transition:max-height .4s ease} .pbo-opt.is-open .pbo-opt__more{max-height:1400px} .pbo-opt__more-in{padding:4px 22px 22px;border-top:1px solid #eef2f5;margin:0 22px;padding-left:0;padding-right:0} .pbo-osub{margin:14px 0 0} .pbo-osub h5{font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:14px;color:#003e5f;margin:0 0 4px;text-transform:uppercase;letter-spacing:.02em} .pbo-osub p{font-size:12.5px;line-height:1.55;color:#46596a;margin:0} .pbo-opt__hint{display:block;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#006CC0} .pbo-opt.is-open .pbo-opt__hint{opacity:0} /* warranty */ .pbo-warr{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .pbo-warr div{text-align:center;padding:22px 14px;border:1px solid #e3e9ee;background:#fff} .pbo-warr strong{display:block;font-family:"Sofia-Sans-Condensed",sans-serif;font-size:30px;font-weight:800;color:#006CC0;line-height:1} .pbo-warr span{display:block;margin-top:8px;font-size:13px;color:#46596a;line-height:1.4} .pbo-grp--alt{background:#f4f7f9} /* transition band: standalone buildings */ .pbo-divband{background:#003e5f} .pbo-divband .pbo-in{padding-top:38px;padding-bottom:38px;text-align:center} .pbo-divband__label{display:inline-block;font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#7fb3e0;margin-bottom:9px} .pbo-divband h3{font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:27px;color:#fff;margin:0 auto 9px;line-height:1.12;max-width:640px} .pbo-divband p{font-size:15px;line-height:1.55;color:#cfe0ee;margin:0 auto;max-width:620px} .pbo-stepbadge{display:flex;justify-content:center;margin-bottom:15px} .pbo-stepbadge__n{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:#003e5f;color:#fff;font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:26px;box-shadow:0 4px 14px rgba(0,40,80,.22)} .pbo-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#1a7a3c;background:#e6f4ec;padding:4px 9px;margin-bottom:12px} .pbo-tag--sole{color:#006CC0;background:#e7f1fb} /* clickable overview cards (link to sub-page) */ a.pbo-bld{text-decoration:none;color:inherit} .pbo-bld--link{transition:box-shadow .18s,transform .18s} .pbo-bld--link:hover{box-shadow:0 10px 26px rgba(0,40,80,.13);transform:translateY(-3px)} .pbo-bld__more{margin-top:14px;padding-top:13px;border-top:1px solid #eef2f5;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#006CC0;display:flex;align-items:center;gap:6px} .pbo-bld--link:hover .pbo-bld__more{color:#003e5f} /* sub-page hero (solid navy) + featured photo */ .pbo-hero--solid{background:linear-gradient(135deg,#003e5f 0%,#00253a 100%) !important;min-height:auto !important} .pbo-hero--solid .pbo-hero__media{display:none} .pbo-hero--solid .pbo-hero__content{padding-top:64px;padding-bottom:64px} .pbo-hero--solid .pbo-h1,.pbo-hero--solid .pbo-lead--light{color:#fff} .pbo-subhero-img{border:1px solid #e3e9ee;background:#fff;margin-bottom:24px;overflow:hidden} .pbo-subhero-img img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover} /* sub-page SPLIT hero (premium: navy text panel + product photo panel) */ .pbo-hero--split{padding:0 !important;min-height:auto !important;background:#fff} .pbo-hero--split:after,.pbo-hero--split:before{display:none !important;content:none !important} .pbo-hero--split .pbo-hero__media{display:none} .pbo-hsplit{display:grid;grid-template-columns:1.02fr .98fr;min-height:454px} .pbo-hsplit__text{position:relative;background:linear-gradient(135deg,#003e5f 0%,#00253a 100%);display:flex;flex-direction:column;justify-content:center;padding:62px clamp(28px,5vw,66px)} .pbo-hsplit__text:after{content:"";position:absolute;top:0;right:0;width:4px;height:100%;background:#006CC0} .pbo-hsplit__text .pbo-h1{color:#fff;margin:6px 0 16px;font-size:40px;line-height:1.06} .pbo-hsplit__text .pbo-lead--light{color:#cfe0ee} .pbo-hsplit__media{background:#fff;display:flex;align-items:center;justify-content:center;padding:30px} .pbo-hsplit__media img{max-width:100%;max-height:400px;object-fit:contain;display:block} .pbo-hsplit .pbo-btns{margin-top:24px} .pbo-hsplit .pbo-trust{margin-top:22px;color:#9fc0db} @media(max-width:860px){.pbo-hsplit{grid-template-columns:1fr}.pbo-hsplit__text{padding:46px 22px}.pbo-hsplit__text:after{display:none}.pbo-hsplit__text .pbo-h1{font-size:31px}.pbo-hsplit__media{min-height:240px;padding:24px;border-top:1px solid #e3e9ee}} /* sub-page available sizes + 3D-builder price CTA */ .pbo-szgrid{margin:28px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:840px} .pbo-szchip{padding:11px 17px;background:#fff;border:1px solid #d8e1e8;font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:16px;color:#003e5f} .pbo-pricecta{margin:34px auto 0;max-width:780px;display:flex;align-items:center;justify-content:space-between;gap:26px;background:#fff;border:1px solid #e3e9ee;border-left:4px solid #006CC0;padding:24px 28px} .pbo-pricecta__txt{display:flex;flex-direction:column;gap:5px} .pbo-pricecta__txt strong{font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:20px;color:#003e5f} .pbo-pricecta__txt span{font-size:14px;color:#46596a;line-height:1.5} .pbo-pricecta .pbo-btn{flex:0 0 auto} .pbo-sznote{margin:18px auto 0;text-align:center;font-size:12px;color:#9aa7b3;line-height:1.55;max-width:680px} /* sub-page: great-for chips */ .pbo-greatfor{margin-top:22px} .pbo-greatfor__lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#006CC0;margin-bottom:11px} .pbo-greatfor__row{display:flex;flex-wrap:wrap;gap:9px} .pbo-greatfor__row span{padding:8px 14px;background:#eef3f8;color:#1a4d6e;font-size:13px;font-weight:700;border:1px solid #dce7f0} /* sub-page: specifications grid */ .pbo-specs{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;max-width:960px} .pbo-spec{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid #e7ecf1} .pbo-spec__k{flex:0 0 auto;font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.03em;color:#003e5f} .pbo-spec__v{text-align:right;font-size:14px;line-height:1.45;color:#46596a} /* sub-page: make-it-yours note */ .pbo-makeyours{margin:30px auto 0;max-width:820px;background:#fff;border:1px solid #e3e9ee;border-left:4px solid #006CC0;padding:20px 24px;font-size:14.5px;line-height:1.6;color:#46596a} .pbo-makeyours strong{color:#003e5f;font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:17px;display:block;margin-bottom:6px} .pbo-makeyours a{color:#006CC0;font-weight:700;text-decoration:none} .pbo-makeyours a:hover{text-decoration:underline} /* sub-page: FAQ */ .pbo-faqs{margin:32px auto 0;max-width:880px} .pbo-faq{border-bottom:1px solid #e7ecf1;padding:18px 0} .pbo-faq:first-child{border-top:1px solid #e7ecf1} .pbo-faq__q{font-family:"Sofia-Sans-Condensed",sans-serif;font-weight:800;font-size:18px;color:#003e5f;margin:0 0 7px} .pbo-faq__a{font-size:15px;line-height:1.62;color:#46596a;margin:0} @media(max-width:820px){.pbo-pricecta{flex-direction:column;align-items:flex-start;gap:16px}.pbo-specs{grid-template-columns:1fr;gap:0}} .pbo-note{margin-top:20px;font-size:11.5px;color:#9aa7b3;line-height:1.55;max-width:900px} @media(max-width:820px){.pbo-blds{grid-template-columns:1fr}.pbo-opts{grid-template-columns:1fr}.pbo-warr{grid-template-columns:repeat(2,1fr)}.pbo-how__grid{grid-template-columns:1fr} .pbo-catnav__in{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none} .pbo-catnav__in::-webkit-scrollbar{display:none} .pbo-catnav a{white-space:nowrap;padding:13px 13px;font-size:11.5px}} /* === PAC PORTABLE HUB END === */ /* Center the 'Color options' band title within the full-width band (base .material-band__title margin:0 was winning; force auto) */ .material-band--alt .material-band__title, .building__colorband .material-band__title{margin-left:auto !important;margin-right:auto !important;} /* === PACBM building-detail premium polish v2 (brand tokens: #003654 navy, #006CC0 action, #006CC0 accent) === */ /* scoped to single building pages only */ /* ---- pricing + key-specs cards ---- */ body.single-building .building__detail--information{ border:1px solid #d7e2ec !important;border-radius:14px !important; box-shadow:0 18px 44px -26px rgba(0,54,84,.4) !important; background:#fff !important; } body.single-building .building__detail--information-subhead{ font-size:13px !important;letter-spacing:1.8px !important;text-transform:uppercase !important; font-weight:800 !important;color:#006CC0 !important;border-bottom:0 !important; position:relative;padding-bottom:12px !important; } body.single-building .building__detail--information-subhead::after{ content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;border-radius:2px; background:linear-gradient(90deg,#0a86e0,#006CC0); } body.single-building .building__detail--information-row{width:100% !important;min-width:0;} body.single-building .building__detail--information-price{ display:flex;justify-content:space-between;align-items:baseline;gap:14px;width:100%; padding:6px 0 !important;margin:0 !important; border-bottom:1px solid #e7eef4;font-size:15.5px !important;color:#54657a !important; } body.single-building .building__detail--information-price:last-of-type{border-bottom:0;} body.single-building .building__detail--information-price b, body.single-building .building__detail--information-price strong{ font-size:19px !important;color:#003654 !important;font-weight:800 !important;white-space:nowrap; } /* buy button: flat brand blue, subtle lift only */ body.single-building .pac-buybox__open{ background:#006CC0 !important; box-shadow:0 14px 28px -12px rgba(0,108,192,.5) !important; transition:transform .18s ease,box-shadow .18s ease,background .18s ease !important; } body.single-building .pac-buybox__open:hover{transform:translateY(-2px);background:#005CA3 !important;} body.single-building .building__detail--information li::marker{color:#006CC0;} /* ---- Important Notes accordion (page one only, not the nav accordion) ---- */ body.single-building .accordion:not(.accordion__nav) .accordion__item--top:not(.accordion__item--top-nav){ background:#006CC0 !important;border-radius:0 !important; box-shadow:0 16px 34px -18px rgba(0,108,192,.5) !important; } body.single-building .accordion:not(.accordion__nav) .accordion__item--bottom:not(.accordion__item--bottom-nav){ border:1px solid #d7e2ec;border-top:0;border-radius:0;background:#fff; } /* ---- "How can we help" ribbon: flat brand navy + signature underline ---- */ body.single-building .tools-ribbon{background:#003654 !important;} body.single-building .tools-ribbon__text{ letter-spacing:2.5px !important;font-size:clamp(15px,1.7vw,20px) !important;font-weight:800 !important; position:relative;display:inline-block;padding-bottom:14px; } body.single-building .tools-ribbon__text::after{ content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0; width:66px;height:3px;border-radius:2px;background:linear-gradient(90deg,#0a86e0,#006CC0); } /* ---- Tools & Resources cards: flat brand blue, white badge icons ---- */ body.single-building .resources__right--icon{display:none !important;} body.single-building .resources__right--card-wrapper{width:100% !important;} body.single-building .resources__right--card{ position:relative !important; background:#006CC0 !important; border-radius:14px !important;border:0 !important; box-shadow:0 20px 44px -22px rgba(0,54,84,.55) !important; padding-left:118px !important;min-height:104px; transition:transform .2s ease,box-shadow .2s ease !important; } body.single-building .resources__right--card::before{ content:"";position:absolute;left:28px;top:50%;transform:translateY(-50%); width:58px;height:58px;border-radius:50%; background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:30px; box-shadow:0 10px 22px rgba(0,54,84,.35); } body.single-building .resources__right>*:nth-child(2) .resources__right--card::before{background-image:url("https://pacbuildingpro.com/wp-content/themes/pac-building-pro/resources/svgs/plus.svg");} body.single-building .resources__right>*:nth-child(4) .resources__right--card::before{background-image:url("https://pacbuildingpro.com/wp-content/themes/pac-building-pro/resources/svgs/dollar.svg");} body.single-building .resources__right>*:nth-child(6) .resources__right--card::before{background-image:url("https://pacbuildingpro.com/wp-content/themes/pac-building-pro/resources/svgs/arrow.svg");} body.single-building .resources__right--card-wrapper:hover .resources__right--card{ transform:translateY(-4px);box-shadow:0 28px 54px -22px rgba(0,54,84,.6) !important; } body.single-building .resources__right--card-arrow{transition:transform .2s ease;} body.single-building .resources__right--card-wrapper:hover .resources__right--card-arrow{transform:translateX(5px);} body.single-building .resources__left--cta a, body.single-building .resources__left--cta button{ box-shadow:0 14px 28px -14px rgba(0,54,84,.55) !important; transition:transform .18s ease,box-shadow .18s ease !important; } body.single-building .resources__left--cta a:hover{transform:translateY(-2px);} /* ---- Reviews: flat brand navy cards ---- */ body.single-building .review__card{ border-radius:14px !important;border:1px solid rgba(255,255,255,.08) !important; background:#003654 !important; box-shadow:0 22px 44px -26px rgba(0,54,84,.7) !important; transition:transform .2s ease,box-shadow .2s ease !important; } body.single-building .review__card:hover{transform:translateY(-4px);} /* ---- Contact band + form: flat brand blue ---- */ body.single-building .contact__blue-bar, body.single-building .contact__form{border-radius:14px !important;} body.single-building .contact__form{ background:#006CC0 !important; box-shadow:0 26px 56px -26px rgba(0,54,84,.55) !important; } body.single-building .contact-banner{ border-radius:14px !important;overflow:hidden !important; background:#006CC0 !important; box-shadow:0 26px 56px -26px rgba(0,54,84,.5) !important; } body.single-building .contact-banner__call-link, body.single-building .contact-banner__message-link{ transition:transform .18s ease,box-shadow .18s ease !important; box-shadow:0 12px 26px -14px rgba(0,54,84,.5) !important; } body.single-building .contact-banner__call-link:hover, body.single-building .contact-banner__message-link:hover{transform:translateY(-2px);} body.single-building .contact__form input[type="text"], body.single-building .contact__form input[type="tel"], body.single-building .contact__form input[type="email"], body.single-building .contact__form textarea{ border-radius:0 !important;border:1px solid rgba(0,54,84,.12) !important; transition:box-shadow .15s ease !important; } body.single-building .contact__form input:focus, body.single-building .contact__form textarea:focus{ outline:none !important;box-shadow:0 0 0 3px rgba(255,255,255,.55) !important; } body.single-building .contact__form--submit{ letter-spacing:1.4px !important; box-shadow:0 16px 30px -14px rgba(0,54,84,.5) !important; transition:transform .18s ease,box-shadow .18s ease,background .18s ease !important; } body.single-building .contact__form--submit:hover{transform:translateY(-2px);} body.single-building .contact__image--border{border-radius:14px !important;} body.single-building .contact__image--border img, body.single-building .bs-contact img{border-radius:14px !important;} /* ---- gallery main image ---- */ body.single-building .gallery-container img, body.single-building .building__detail--gallery img{border-radius:14px !important;} /* ---- square ALL interactive controls (site button language; cards stay 14px) ---- */ body.single-building .pac-buybox__open, body.single-building .pac-buybox__send, body.single-building .pac-buybox__in, body.single-building .contact__form--submit, body.single-building .contact-banner__call-link, body.single-building .contact-banner__message-link, body.single-building .resources__left--cta, body.single-building .barndo__information--links a, body.single-building .barndo__information--links button{border-radius:0 !important;} /* === end building-detail premium polish === */ /* === PAC HERO MOBILE CTA START === */ /* Premium, uncluttered mobile hero: taller image, lighter scrim, one clean CTA, no dots (auto-rotates) */ @media(max-width:768px){ .pac-hero{height:560px} .pac-hero__scrim{background:linear-gradient(to top,rgba(11,42,68,.9) 0%,rgba(11,42,68,.6) 34%,rgba(11,42,68,.2) 64%,rgba(11,42,68,0) 100%)!important} .pac-hero__wrap{padding:0 24px 40px!important} .pac-hero__eyebrow{display:inline-block!important;margin-bottom:18px!important} .pac-hero__title{margin-bottom:14px!important} .pac-hero__sub{margin-bottom:0!important} .pac-hero__ctas{display:flex!important;align-items:flex-start;gap:10px;width:auto;margin-top:24px;margin-bottom:0!important} .pac-hero__ctas .pac-hero__btn--ghost{display:none!important} .pac-hero__ctas .pac-hero__btn--primary{width:auto;justify-content:center;padding:15px 32px;font-size:15.5px} .pac-hero__dots{display:none!important} } /* === PAC HERO MOBILE CTA END === */ /* === PAC A11Y POLISH START === */ /* WCAG AA contrast: sub-labels on the blue Tools cards were 4.19:1 (need 4.5). Pure white -> ~5.8:1 */ .resources__right--card-text{color:#ffffff!important} /* === PAC A11Y POLISH END === */ /* === PAC CONTACT PREMIUM START === */ /* Premium contact panel: calm light surface (was loud bright-blue) with AA-legible navy text in every field state */ .contact__form{background:#f5f8fa!important;padding:46px 42px!important} .contact__kicker{color:#006CC0!important} .contact__form--header{color:#003654!important} .contact__form--subhead{color:#51677a!important} .contact .float{color:#003654!important} .contact input:not([type=submit]):not([type=file]),.contact textarea{background:#ffffff!important;border:1px solid #d3dde5!important;color:#15242f!important} .contact input:not([type=submit]):focus,.contact textarea:focus{border-color:#006CC0!important;outline:none!important;box-shadow:0 0 0 2px rgba(0,108,192,.16)!important} .contact .wpcf7-submit{background:#003654!important;color:#ffffff!important;font-weight:700} .contact .wpcf7-submit:hover{background:#00243b!important} .contact .wpcf7-file{border:1px solid #d3dde5!important;color:#003654!important} .contact__blue-bar{background:#006CC0!important} @media(max-width:768px){.contact__form{padding:34px 22px!important}} /* === PAC CONTACT PREMIUM END === */