/* ============================================== PERGOLA PROS — Base Utilities ================================================ */ /* ----------------------------------------------- CSS Variables ----------------------------------------------- */ :root { --pp-font: var(--font-primary); --pp-color-heading: #0F172B; --pp-color-body: #353638; --pp-color-muted: #34353C; --pp-color-accent: #DD2F2E; --pp-color-accent-dark: #C41B20; --pp-color-dark-bg: #0B1124; --pp-color-dark-mid: #13203B; --pp-color-white: #ffffff; --pp-color-border: rgba(0, 0, 0, 0.17); --pp-color-light-bg: #F8F9FA; --pp-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } /* ----------------------------------------------- Global Font Override ----------------------------------------------- */ .pp-hero, .pp-products, .pp-eng, .pp-steps, .pp-feat, .pp-banner, .pp-image-text, .pp-plan, .pp-reviews, .pp-contact, .pp-faq, .pp-footer-wrap, .pp-announcement, .pp-header, .kp-footer.pergola-footer { font-family: var(--pp-font) !important; } .pp-hero *, .pp-products *, .pp-eng *, .pp-steps *, .pp-feat *, .pp-banner *, .pp-image-text *, .pp-plan *, .pp-reviews *, .pp-contact *, .pp-faq *, .pp-footer-wrap *, .pp-announcement *, .pp-header * { font-family: var(--pp-font) !important; } .pp-container, .container { max-width: 1440px; margin: 0 auto; padding: 0 var(--container-px); } /* RC22-iPad-Menu-Fix-15Jul: removed this file's own .mobile-only/.desktop-only visibility rules. They duplicated assets/theme.css's sitewide rule but with a DIFFERENT breakpoint (max-width:768px here vs max-width:1024px in theme.css) and no media query on the unconditional ".mobile-only{display:none!important}" base rule. Because this stylesheet's renders inline inside sections/pergola-pros-header.liquid (i.e. later in the document than theme.css, which loads in ), this rule won the cascade at equal specificity, hiding every ".mobile-only" element — including #mobile-menu-drawer and its wrapper's contents — at any viewport from 769px up to 1024px. That range covers essentially every iPad portrait width (768–834px is the range Nick reported broken menus on) except the narrow historical 768px case, which happened to fall exactly on this file's own re-enable threshold and so looked fine by accident. theme.css's sitewide rule (already correct at max-width:1024px, matching the rest of the site's mobile/desktop nav split) now applies uncontested for Pergola Pros too — no Pergola-specific override is needed here since none of the other four brands' layout/component stylesheets ever carried one of these overrides in the first place. */ /* Base Utilities */ .flex { display: flex; } .justify-center { justify-content: center; } .items-center { align-items: center; } .gap-2 { gap: 0.5rem; } .text-sm { font-size: 14px; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* ----------------------------------------------- Buttons ----------------------------------------------- */ .pp-btn, .pp-btn--header { display: inline-block; background: var(--pp-color-accent); color: #fff; font-family: var(--pp-font); font-size: 18px; font-weight: 400; line-height: 1; padding: 18px 20px; border-radius: 8px; border: 2px solid var(--pp-color-accent); text-decoration: none; transition: all .3s ease; white-space: nowrap; cursor: pointer; } .pp-btn:hover { background: var(--pp-color-white); color: var(--pp-color-accent); } .pp-btn--outline { background: transparent; color: #fff; border-color: #fff; } .pp-btn--outline:hover { background: #fff; color: var(--pp-color-accent); border-color: #fff; } .pp-btn--full-width { width: 100%; text-align: center; display: block; } .pp-btn--dark { background: transparent; color: var(--pp-color-accent); border-color: var(--pp-color-accent); } .pp-btn--dark:hover { background: var(--pp-color-accent); color: #fff; } .pp-btn--text-link { display: inline-block; background: none; border: none; padding: 0; width: auto; font-size: 15px; font-weight: 400; color: var(--pp-color-accent); text-decoration: underline; text-align: left; } .pp-btn--text-link:hover { background: none; color: var(--pp-color-accent-dark); } /* ----------------------------------------------- Freight Notice (subtle informational note placed next to enquiry CTAs — SGS-CC-Brief-Fix-Batch-11Jul Task 6. Mirrors the existing sp-supply-note pattern used on Shutter Pros: light neutral box, muted text, small type — deliberately not a red/alert treatment. ----------------------------------------------- */ .pp-freight-notice { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.55; color: var(--pp-color-muted); background: var(--pp-color-light-bg); border: 1px solid var(--pp-color-border); border-radius: 6px; padding: 10px 12px; margin-top: 12px; font-family: var(--pp-font); } .pp-freight-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--pp-color-muted); opacity: 0.75; } /* ----------------------------------------------- USP Slider ----------------------------------------------- */ .pp-usp-slider { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-family: var(--pp-font); } .pp-usp-slide { display: flex; align-items: center; justify-content: center; gap: 10px; padding-right: 15px; border-right: 1px solid rgba(255, 255, 255, 0.15); } .pp-usp-slide:last-child { border-right: none; } .pp-usp-icon-wrap { display: flex; align-items: center; justify-content: center; color: #fff; } .pp-usp-icon-wrap svg, .pp-usp-icon-wrap img { width: 18px; height: 18px; object-fit: contain; } .pp-usp-text { font-size: 14px; font-weight: 300; letter-spacing: 0.3px; white-space: nowrap; } /* ----------------------------------------------- Generic Section Titles (Used across sections) ----------------------------------------------- */ .pp-section-title, .pp-products__title { font-family: var(--pp-font); font-size: var(--fs-48); font-weight: 400; color: var(--pp-color-heading); line-height: 1.15; margin-bottom: 16px; } .pp-section-subtitle { font-family: var(--pp-font); font-size: var(--fs-20); font-weight: 300; color: var(--pp-color-body); line-height: 1.65; max-width: 880px; margin: 0 auto; } /* pp-section-title now uses var(--fs-48) which scales automatically via theme.css */ /* ============================================= PERGOLA PROS SECTION RESPONSIVE OVERRIDES ============================================= */ /* --- Tablet: 991px --- */ @media (max-width: 991px) { /* Hero */ .pp-hero { height: auto; min-height: 500px; } .pp-hero__content { max-width: 100%; } .pp-hero__buttons { flex-direction: column; align-items: stretch; gap: 12px; } /* Products */ .pp-products__grid { gap: 16px; } .pp-product-card { padding: 20px 14px; } /* Engineering */ .pp-eng { padding: 50px 0; } .pp-eng__grid { gap: 40px; } .pp-eng__card-wrap { padding: 36px; } .pp-eng__intro { margin-bottom: 28px; } /* Steps */ .pp-steps__grid { gap: 16px; } .pp-step__card { padding: 24px 16px; } /* Features */ .pp-feat__grid { gap: 16px; } .pp-feat__card { padding: 24px 16px; } /* Image Text */ .pp-image-text__grid { gap: 32px; } /* Plan Section */ .pp-plan__grid { gap: 24px; } .pp-plan__card { padding: 28px 20px; } /* Banner */ .pp-banner__inner { gap: 24px; padding: 40px 24px; } .pp-banner__content { gap: 20px; } /* Contact */ .pp-contact-split__form-col { padding: 50px 24px; } /* Contact Options */ .pp-contact-options__grid { gap: 16px; } .pp-contact-options__card { padding: 24px 16px; } /* Contact Form Custom */ .pp-form__grid { gap: 16px; } /* FAQ */ .pp-faq__wrapper { max-width: 100%; } .pp-faq__summary { padding: 18px 14px; } .pp-faq__body { padding: 0 14px 18px; } /* Reviews */ .pp-reviews__grid { gap: 16px; } /* About Hero */ .pp-about-hero__grid { gap: 32px; } /* About Innovation */ .pp-about-innovation__grid { gap: 32px; } /* About Principles */ .pp-about-principles__grid { gap: 16px; } .pp-about-principles__card { padding: 28px 20px; } /* About Showroom */ .pp-about-showroom__grid { gap: 24px; } /* About Stats */ .pp-about-stats__grid { gap: 16px; } /* Accessories */ .pp-acc-grid { gap: 16px; } .pp-acc-card { padding: 20px 14px; } /* Integration Steps */ .pp-integration__grid { gap: 16px; } /* Product Main */ .pp-product__grid { gap: 24px; } .pp-product__info { padding: 0; } /* Product Delivery */ .pp-delivery__grid { gap: 24px; } .pp-delivery__card { padding: 24px 16px; } /* Product Reviews */ .pp-product-reviews__grid { gap: 16px; } /* Product Risk Banner */ .pp-risk-banner__inner { padding: 32px 24px; gap: 24px; } /* Product Features */ .pp-product-feat__grid { gap: 16px; } /* Compatibility Table */ .pp-compat__wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Knowledge Article */ .pp-article__grid { gap: 32px; } .pp-article__content { padding: 0; } /* Knowledge Hero */ .pp-knowledge-hero__inner { padding: 50px 24px; } /* Knowledge Tabs */ .pp-knowledge-tabs__list { gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Inspiration Gallery */ .pp-inspiration__grid { gap: 12px; } /* Footer */ .pp-footer-wrap { padding: 40px 0 20px; } .pp-footer__grid { gap: 24px; } .pp-footer__bottom { margin-top: 30px; } /* USP Slider */ .pp-usp-slider { padding: 12px 0; } /* Product Engineering */ .pp-product-eng__grid { gap: 32px; } /* Section title spacing */ .pp-section-title, .pp-products__title { margin-bottom: 20px; } } /* --- Mobile: 575px --- */ @media (max-width: 575px) { /* Hero */ .pp-hero { min-height: 420px; } .pp-hero__title { margin-bottom: 16px; } .pp-hero__text { margin-bottom: 20px; } .pp-hero__buttons a { width: 100%; text-align: center; } /* Products */ .pp-product-card { padding: 16px 12px; } .pp-product-card__image { height: 200px; } /* Engineering */ .pp-eng { padding: 30px 0; } .pp-eng__grid { gap: 24px; } .pp-eng__card-wrap { padding: 24px 16px; } .pp-eng__intro { margin-bottom: 20px; } .pp-eng__item { padding: 16px 0; } /* Steps */ .pp-step__card { padding: 20px 14px; } /* Features */ .pp-feat__card { padding: 20px 14px; } .pp-feat__icon { margin-bottom: 12px; } /* Image Text */ .pp-image-text__grid { gap: 20px; } /* Plan Section */ .pp-plan__card { padding: 24px 14px; } /* Banner */ .pp-banner__inner { padding: 28px 16px; gap: 20px; } .pp-banner__stats { gap: 12px; } .pp-banner__stat { padding: 12px 8px; } .pp-banner__content { gap: 16px; } /* Contact */ .pp-contact-split__form-col { padding: 32px 16px; } .pp-contact-split__image-col { height: 280px; } .pp-contact-row { gap: 16px; } .pp-contact-input { padding: 12px 14px; } /* Contact Options */ .pp-contact-options__card { padding: 20px 14px; } /* Contact Form Custom */ .pp-form__input, .pp-form__textarea, .pp-form__select { padding: 12px 14px; } /* FAQ */ .pp-faq__summary { padding: 14px 12px; } .pp-faq__body { padding: 0 12px 14px; } /* Reviews */ .pp-review-card { padding: 20px 14px; } /* About Hero */ .pp-about-hero__grid { gap: 20px; } .pp-about-hero__content { padding: 0; } /* About Innovation */ .pp-about-innovation__grid { gap: 20px; } /* About Principles */ .pp-about-principles__card { padding: 24px 16px; } .pp-about-principles__icon { margin-bottom: 12px; } /* About Showroom */ .pp-about-showroom__grid { gap: 16px; } /* About Stats */ .pp-about-stats__stat { padding: 16px 12px; } /* Accessories */ .pp-acc-card { padding: 16px 12px; } .pp-acc-card__img { height: 180px; } /* Integration Steps */ .pp-integration__card { padding: 20px 14px; } /* Product Main */ .pp-product__grid { gap: 16px; } .pp-product__gallery { max-height: 350px; } .pp-info-btn { padding: 12px 14px; } .pp-quote-btn { padding: 14px 16px; } /* Product Delivery */ .pp-delivery__card { padding: 20px 14px; } /* Product Reviews */ .pp-product-review { padding: 20px 14px; } /* Product Risk Banner */ .pp-risk-banner__inner { padding: 24px 16px; flex-direction: column; text-align: center; gap: 16px; } /* Compatibility Table */ .pp-compat-table th, .pp-compat-table td { padding: 10px 8px; font-size: var(--fs-14); } /* Knowledge Article */ .pp-article__grid { gap: 20px; } .pp-article__sidebar { order: -1; } /* Knowledge Hero */ .pp-knowledge-hero__inner { padding: 30px 16px; } /* Knowledge Tabs */ .pp-knowledge-tab { padding: 10px 14px; white-space: nowrap; } /* Inspiration Gallery */ .pp-inspiration__grid { gap: 8px; } /* Footer */ .pp-footer-wrap { padding: 30px 0 16px; } .pp-footer__bottom { margin-top: 20px; } /* USP Slider */ .pp-usp-slider { padding: 8px 0; } /* Product Engineering */ .pp-product-eng__grid { gap: 20px; } /* Section title spacing */ .pp-section-title, .pp-products__title { margin-bottom: 16px; } } /* ================================================ MOBILE PRODUCT PAGE FIXES ================================================ */ @media (max-width: 768px) { /* Fix padding that causes gap and left clipping */ .pp-product-main { padding: 20px 16px !important; } .pp-product-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; } .pp-product-info { padding-left: 0 !important; margin-left: 0 !important; width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } .pp-product-gallery { width: 100% !important; margin-bottom: 0 !important; } } /* Fix Platinum model fixed image height */ .pp-product-main-img { height: auto !important; max-height: none !important; aspect-ratio: auto !important; } /* Fix Platinum slider track padding */ .splide__track { padding-left: 0 !important; padding-right: 0 !important; }