/* ============================================================================= Compac Panels: one site style (October 2026) The product page (Compac Product Template plugin) is the standard. Every value here is taken from its stylesheet, assets/product-preview.css. This file makes pages built in Enfold's builder match it. Part 1: building blocks, switched on by a Custom CSS Class on an Enfold element (Advanced tab > Developer Settings > Custom CSS Class). Part 2: site-wide rules, so ordinary Enfold pages take the same type, colours and buttons without being rebuilt. Classes for the builder: cps-hero Color Section: the top of a page (label, H1, intro, buttons) cps-panel Column: white bordered box (trade ordering, contact details) cps-section Color Section: a ruled section, 54px above and below cps-charcoal Color Section: the dark band (set a background photo on it) cps-stat Column: a see-through card on the dark band cps-card Column: bordered card with a picture on top cps-benefit Column: bordered card with a teal top line cps-linkcol Column: heading, text and a link under a thin rule cps-cta Color Section: the closing call to action box cps-inline Button: sits beside the next button, not under it cps-outline Button: navy outline Add to a Color Section to lay its columns out on the product page's grid: cps-grid-hero wide column + 400px panel cps-grid-3 / cps-grid-4 / cps-grid-5 equal columns, 18px apart cps-grid-1-2 one third + two thirds (the first full-width column, holding the heading, always spans the row) ============================================================================= */ :root { --cp-teal: #00c4b4; --cp-navy: #021d49; --cp-text: #182632; --cp-muted: #66747d; --cp-line: #dfe5e7; --cp-soft: #f4f6f6; } /* ----------------------------------------------------------------------------- Part 1: building blocks ----------------------------------------------------------------------------- */ /* Page width: 1180px with 20px gutters, as on the product page. */ #top .avia-section[class*="cps-"] .container { max-width: 1220px; width: 100%; padding-left: 20px; padding-right: 20px; } #top .avia-section[class*="cps-"] .template-page.content { padding-top: 0; padding-bottom: 0; } #top .avia-section[class*="cps-"], #top .avia-section[class*="cps-"] .container_wrap { border: 0; } #top .avia-section[class*="cps-"] { background-color: #fff; min-height: 0; } /* Text inside the blocks */ #top [class*="cps-"] .avia_textblock, #top [class*="cps-"] .avia_textblock p, #top [class*="cps-"] .avia_textblock li { color: var(--cp-text); font-size: 16px; line-height: 1.6; font-weight: 500; } #top [class*="cps-"] .avia_textblock p { margin: 0 0 12px; } #top [class*="cps-"] .avia_textblock p:last-child { margin-bottom: 0; } #top [class*="cps-"] .avia_textblock a { color: var(--cp-teal); font-size: 14px; font-weight: 600; text-decoration: none; } #top [class*="cps-"] .avia_textblock a:hover { text-decoration: underline; } #top [class*="cps-"] .avia_textblock h3 { color: var(--cp-navy); font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 8px; } /* Special Heading: the small teal label (its Subheading, set above) and the heading. */ #top [class*="cps-"] .av-special-heading { margin: 0; padding: 0; } #top [class*="cps-"] .av-special-heading .special-heading-border { display: none; } #top [class*="cps-"] .av-special-heading .av-subheading, #top [class*="cps-"] .av-special-heading .av-subheading p { margin: 0 0 8px; color: var(--cp-teal); text-transform: uppercase; letter-spacing: .11em; font-size: 12px; line-height: 1.2; font-weight: 700; opacity: 1; } #top [class*="cps-"] .av-special-heading .av-special-heading-tag { color: var(--cp-navy); font-weight: 600; text-transform: none; padding: 0; margin: 0; } #top [class*="cps-"] .av-special-heading h1.av-special-heading-tag { font-size: clamp(38px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.03em; } #top [class*="cps-"] .av-special-heading h2.av-special-heading-tag { font-size: 32px; line-height: 1.15; letter-spacing: -.02em; } #top [class*="cps-"] .av-special-heading h3.av-special-heading-tag { font-size: 18px; line-height: 1.3; letter-spacing: 0; } /* Buttons: teal with white text, or white with a navy outline. */ #top [class*="cps-"] .avia-button, #top .avia-button.cps-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 0; padding: 10px 18px; border-radius: 0; border: 1px solid var(--cp-teal); background: var(--cp-teal); color: #fff; font-size: 14px; line-height: 1.2; font-weight: 600; text-decoration: none; text-transform: none; letter-spacing: 0; transition: .2s ease; box-shadow: none; } #top [class*="cps-"] .avia-button .avia_iconbox_title { color: inherit; } #top [class*="cps-"] .avia-button:hover { opacity: .88; } #top [class*="cps-"] .avia-button:focus-visible { outline: 2px solid var(--cp-navy); outline-offset: 2px; } #top [class*="cps-"] .cps-outline .avia-button, #top [class*="cps-"] .avia-button.cps-outline { background: #fff; border-color: var(--cp-navy); color: var(--cp-navy); } #top [class*="cps-"] .avia-button-wrap { margin: 0; } #top [class*="cps-"] .avia-button-wrap.cps-inline { display: inline-block; margin: 0 10px 10px 0; vertical-align: top; } /* Grids: Enfold's columns laid out on the product page's grid. */ #top .avia-section[class*="cps-grid-"] .entry-content-wrapper { display: grid; gap: 18px; align-items: start; } #top .avia-section[class*="cps-grid-"] .entry-content-wrapper::before, #top .avia-section[class*="cps-grid-"] .entry-content-wrapper::after { display: none; } #top .avia-section[class*="cps-grid-"] .entry-content-wrapper > .flex_column { width: auto; margin: 0; float: none; clear: none; } #top .avia-section[class*="cps-grid-"] .entry-content-wrapper > .flex_column.av_one_full { grid-column: 1 / -1; } #top .avia-section.cps-grid-3 .entry-content-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); } #top .avia-section.cps-grid-4 .entry-content-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); } #top .avia-section.cps-grid-5 .entry-content-wrapper { grid-template-columns: repeat(5, minmax(0, 1fr)); } #top .avia-section.cps-grid-hero .entry-content-wrapper { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; } #top .avia-section.cps-grid-1-2 .entry-content-wrapper { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; } #top .avia-section[class*="cps-grid-"] .cps-card, #top .avia-section[class*="cps-grid-"] .cps-stat, #top .avia-section[class*="cps-grid-"] .cps-benefit { margin-bottom: 0; align-self: stretch; } #top .avia-section.cps-grid-3 .cps-linkcol { align-self: stretch; } #top .cps-section.cps-grid-3 .entry-content-wrapper { column-gap: 32px; } #top .cps-section .av_one_full .av-special-heading, #top .cps-charcoal .av_one_full .av-special-heading { margin-bottom: 10px; } /* cps-hero */ #top .avia-section.cps-hero .container { padding-top: 30px; padding-bottom: 54px; } #top .cps-hero .av-special-heading { margin-bottom: 20px; } #top .cps-hero .avia_textblock p { font-size: 18px; line-height: 1.55; max-width: 820px; } #top .cps-hero .av_textblock_section { margin-bottom: 20px; } /* cps-panel */ #top .flex_column.cps-panel { background: #fff; border: 1px solid var(--cp-line); padding: 28px; } #top .cps-panel .av-special-heading { margin-bottom: 12px; } #top .cps-panel .avia_textblock p { font-size: 16px; line-height: 1.6; } #top .cps-panel .av_textblock_section { margin-bottom: 12px; } #top .cps-panel .avia-buttonrow-wrap { margin-bottom: 12px; } #top .cps-panel .av_textblock_section:last-child { margin-bottom: 0; } #top .cps-panel .av_textblock_section:last-child .avia_textblock p { font-size: 13px; line-height: 1.5; color: var(--cp-muted); } /* cps-section */ #top .avia-section.cps-section .container { border-top: 1px solid var(--cp-line); padding-top: 54px; padding-bottom: 54px; } #top .cps-section .av-special-heading { margin-bottom: 28px; max-width: 760px; } /* cps-charcoal */ #top .avia-section.cps-charcoal { background-color: #363636; background-size: cover; background-position: center; } #top .avia-section.cps-charcoal .av-section-color-overlay { background: #121212; opacity: .58; } #top .avia-section.cps-charcoal .container { padding-top: 58px; padding-bottom: 58px; } #top .cps-charcoal .av-special-heading { margin-bottom: 28px; } #top .cps-charcoal .av-special-heading .av-special-heading-tag, #top .cps-charcoal .av-special-heading .av-subheading, #top .cps-charcoal .av-special-heading .av-subheading p { color: #fff; } #top .flex_column.cps-stat { padding: 20px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.24); margin-bottom: 18px; } #top .cps-stat .avia_textblock, #top .cps-stat .avia_textblock p { color: #fff; font-size: 16px; line-height: 1.45; margin: 0; } #top .cps-stat .avia_textblock p:first-child, #top .cps-stat .avia_textblock p:first-child strong { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; font-weight: 600; color: #fff; margin-bottom: 6px; } /* cps-card */ #top .flex_column.cps-card { border: 1px solid var(--cp-line); background: #fff; padding: 0; margin-bottom: 18px; transition: border-color .18s ease; } #top .flex_column.cps-card:hover { border-color: var(--cp-teal); } #top .cps-card .avia-image-container { margin: 0; display: block; background: var(--cp-soft); } #top .cps-card .avia-image-container, #top .cps-card .avia-image-container-inner, #top .cps-card .avia-image-overlay-wrap { display: block; width: 100%; } #top .cps-card .avia-image-container img { display: block; width: 100%; aspect-ratio: 450 / 359; object-fit: cover; border-radius: 0; } #top .cps-card .av_textblock_section { padding: 16px; } #top .cps-card .avia_textblock h3 { margin: 0 0 6px; } #top .cps-card .avia_textblock p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--cp-muted); } #top .cps-card .avia_textblock p:last-child { color: var(--cp-teal); font-size: 14px; font-weight: 600; margin: 6px 0 0; } /* cps-benefit */ #top .flex_column.cps-benefit { border: 1px solid var(--cp-line); border-top: 3px solid var(--cp-teal); padding: 22px; background: #fff; margin-bottom: 18px; } #top .cps-benefit .avia_textblock h3 { margin: 0; } #top .cps-benefit .avia_textblock p { font-size: 14px; color: #4f6069; line-height: 1.55; margin: 8px 0 0; } /* cps-linkcol */ #top .flex_column.cps-linkcol { border-top: 1px solid var(--cp-line); padding-top: 20px; } #top .cps-linkcol .avia_textblock h3 { margin-bottom: 10px; } /* Long text beside a section heading */ #top .cps-section .cps-prose .avia_textblock p { font-size: 17px; max-width: 820px; margin-bottom: 16px; } /* cps-cta */ #top .avia-section.cps-cta .container { padding-top: 54px; padding-bottom: 54px; border-top: 1px solid var(--cp-line); } #top .cps-cta .entry-content-wrapper { background: var(--cp-soft); border-top: 4px solid var(--cp-teal); padding: 38px 42px; display: flex; align-items: center; justify-content: space-between; gap: 34px; } #top .cps-cta .entry-content-wrapper::before, #top .cps-cta .entry-content-wrapper::after { display: none; } #top .cps-cta .flex_column { margin: 0; width: auto; float: none; } #top .cps-cta .flex_column:first-child { flex: 1 1 auto; max-width: 720px; } #top .cps-cta .flex_column:last-child { flex: none; display: flex; flex-direction: column; gap: 10px; } #top .cps-cta .av-special-heading { margin-bottom: 12px; } #top .cps-cta .avia_textblock p { color: #445661; } #top .cps-cta .flex_column:last-child .avia-button { width: 170px; min-width: 170px; } #top .cps-cta .avia-button-wrap { display: block; } /* Columns in these blocks: 18px gutters, as the product page's card grid. */ #top [class*="cps-"] .flex_column { margin-top: 0; } /* Home: the slideshow becomes the photo banner. */ .home #main .avia-fullwidth-slider, .home #main .avia-fullwidth-slider .avia-slideshow-inner, .home #main .avia-fullwidth-slider .avia-slideshow-inner > li { height: var(--cp-banner-h) !important; padding-bottom: 0 !important; } .home #main .avia-fullwidth-slider .avia-slideshow-inner > li img { width: 100%; height: var(--cp-banner-h); object-fit: cover; } /* Phones (the product page's own 600px rules) */ @media only screen and (max-width: 767px) { #top .avia-section[class*="cps-"] .container { padding-left: 12px; padding-right: 12px; } #top [class*="cps-"] .av-special-heading h1.av-special-heading-tag { font-size: 34px; } #top [class*="cps-"] .av-special-heading h2.av-special-heading-tag { font-size: 27px; } #top .cps-hero .avia_textblock p { font-size: 17px; } #top .avia-section.cps-hero .container { padding-top: 18px; padding-bottom: 44px; } #top .avia-section.cps-section .container, #top .avia-section.cps-cta .container { padding-top: 40px; padding-bottom: 40px; } #top .avia-section.cps-charcoal .container { padding-top: 40px; padding-bottom: 40px; } #top [class*="cps-"] .avia-button { width: 100%; } #top [class*="cps-"] .avia-button-wrap.cps-inline { display: block; margin-right: 0; } #top .avia-section[class*="cps-grid-"] .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); gap: 10px; } #top .avia-section.cps-grid-hero .entry-content-wrapper, #top .avia-section.cps-grid-1-2 .entry-content-wrapper { gap: 28px; } #top .avia-section.cps-grid-4 .entry-content-wrapper, #top .avia-section.cps-charcoal.cps-grid-3 .entry-content-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } #top .flex_column.cps-panel { padding: 18px; margin-top: 28px; } #top .flex_column.cps-stat { padding: 14px; margin-bottom: 10px; } #top .cps-stat .avia_textblock p:first-child, #top .cps-stat .avia_textblock p:first-child strong { font-size: 24px; } #top .flex_column.cps-card { margin-bottom: 10px; } #top .cps-card .av_textblock_section { padding: 12px; } #top .cps-card .avia_textblock h3 { font-size: 15px; line-height: 1.25; } #top .flex_column.cps-benefit { padding: 20px; margin-bottom: 10px; } #top .cps-cta .entry-content-wrapper { flex-direction: column; align-items: flex-start; padding: 28px 22px; } #top .cps-cta .flex_column:last-child { width: 100%; } #top .cps-cta .flex_column:last-child .avia-button { width: 100%; min-width: 0; } .home #main .avia-fullwidth-slider, .home #main .avia-fullwidth-slider .avia-slideshow-inner, .home #main .avia-fullwidth-slider .avia-slideshow-inner > li, .home #main .avia-fullwidth-slider .avia-slideshow-inner > li img { height: var(--cp-banner-h) !important; } } /* ----------------------------------------------------------------------------- Part 2: site-wide rules Every Enfold page takes the product page's type, colours and buttons. The product pages themselves (body class cptp-template-active) are left alone: they have their own stylesheet, which is the standard. ----------------------------------------------------------------------------- */ /* Body text: dark grey, not teal. */ #top:not(.cptp-template-active) #main .main_color, #top:not(.cptp-template-active) #main .alternate_color, #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) :is(p, li, dd, dt, td, th, label, blockquote, address, strong, em, .avia_textblock, .entry-content) { color: var(--cp-text); } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) :is(p, li) { font-size: 16px; line-height: 1.6; } /* Headings: navy, weight 600, the product page's sizes. */ #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) :is(h1, h2, h3, h4, h5, h6) { color: var(--cp-navy); font-weight: 600; text-transform: none; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) h1 { font-size: clamp(38px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 10px; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) h2 { font-size: 32px; line-height: 1.15; letter-spacing: -.02em; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) h3 { font-size: 18px; line-height: 1.3; letter-spacing: 0; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) h4 { font-size: 16px; line-height: 1.3; } /* Links */ #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) :is(p, li) a:not(.avia-button):not(.button) { color: var(--cp-teal); font-weight: 600; text-decoration: none; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) :is(p, li) a:not(.avia-button):not(.button):hover { text-decoration: underline; } /* The old teal bands become white sections. */ #top:not(.cptp-template-active) #main .avia-section.alternate_color, #top:not(.cptp-template-active) #main .container_wrap.alternate_color:not(.title_container) { background-color: #fff; background-image: none; border-color: var(--cp-line); } /* Buttons everywhere: the product page's teal button. */ #top:not(.cptp-template-active) #main .avia-button, #top:not(.cptp-template-active) #main .woocommerce a.button, #top:not(.cptp-template-active) #main .woocommerce button.button, #top:not(.cptp-template-active) #main input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 0; border: 1px solid var(--cp-teal); background: var(--cp-teal); color: #fff; font-size: 14px; line-height: 1.2; font-weight: 600; text-transform: none; letter-spacing: 0; box-shadow: none; } #top:not(.cptp-template-active) #main .avia-button .avia_iconbox_title, #top:not(.cptp-template-active) #main .avia-button span { color: inherit; font-size: inherit; font-weight: inherit; } #top:not(.cptp-template-active) #main .avia-button:hover, #top:not(.cptp-template-active) #main .woocommerce a.button:hover, #top:not(.cptp-template-active) #main .woocommerce button.button:hover { opacity: .88; background: var(--cp-teal); color: #fff; } #top:not(.cptp-template-active) #main .cps-outline .avia-button, #top:not(.cptp-template-active) #main .avia-button.cps-outline { background: #fff; border-color: var(--cp-navy); color: var(--cp-navy); } /* Accordions (Enfold toggles): the product page's + rows. */ #top:not(.cptp-template-active) #main .togglecontainer { border-top: 1px solid var(--cp-line); margin: 0; } #top:not(.cptp-template-active) #main .togglecontainer .single_toggle { border-bottom: 1px solid var(--cp-line); margin: 0; } #top:not(.cptp-template-active) #main .togglecontainer .toggler { background: transparent; border: 0; padding: 19px 42px 19px 0; color: var(--cp-navy); font-size: 17px; line-height: 1.4; font-weight: 600; } #top:not(.cptp-template-active) #main .togglecontainer .toggle_icon { left: auto; right: 3px; border: 0; } #top:not(.cptp-template-active) #main .togglecontainer .toggle_icon .vert_icon, #top:not(.cptp-template-active) #main .togglecontainer .toggle_icon .hor_icon { border-color: var(--cp-teal); } #top:not(.cptp-template-active) #main .togglecontainer .toggle_wrap { background: transparent; } #top:not(.cptp-template-active) #main .togglecontainer .toggle_content { background: transparent; border: 0; padding: 0 0 24px; font-size: 15px; } /* Breadcrumbs: small and muted. */ #top:not(.cptp-template-active) #main .rank-math-breadcrumb, #top:not(.cptp-template-active) #main .rank-math-breadcrumb p, #top:not(.cptp-template-active) #main .rank-math-breadcrumb a, #top:not(.cptp-template-active) #main .breadcrumb, #top:not(.cptp-template-active) #main .breadcrumb a { font-size: 13px; color: var(--cp-muted); font-weight: 500; } /* Title bar on pages not built in the builder. */ #top:not(.cptp-template-active) #main .title_container { background: #fff; border-bottom: 1px solid var(--cp-line); } #top:not(.cptp-template-active) #main .title_container .main-title, #top:not(.cptp-template-active) #main .title_container .main-title a { color: var(--cp-navy); font-size: 32px; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) h1 { font-size: 34px; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) h2 { font-size: 27px; } #top:not(.cptp-template-active) #main .title_container .main-title { font-size: 27px; } } /* ----------------------------------------------------------------------------- Part 3: the page top used across the site (the Color Section with ID "homeintro") Nearly every page starts with it: a text half (H1 and intro) and a picture half. It now reads like the top of a product page: the picture becomes the photo banner under the header, and the heading and intro sit below it. ----------------------------------------------------------------------------- */ #top:not(.cptp-template-active):not(.home) #main #homeintro, #top:not(.cptp-template-active):not(.home) #main #homeintro::before, #top:not(.cptp-template-active):not(.home) #main #homeintro::after { background: #fff; background-image: none; padding: 0; min-height: 0; } #top:not(.cptp-template-active):not(.home) #main #homeintro .container { max-width: none; width: 100%; padding: 0; } #top:not(.cptp-template-active):not(.home) #main #homeintro .template-page.content { padding: 0; margin: 0 !important; width: 100%; } #top:not(.cptp-template-active):not(.home) #main #homeintro .entry-content-wrapper { display: flex; flex-direction: column-reverse; white-space: normal !important; } #top:not(.cptp-template-active):not(.home) #main #homeintro .entry-content-wrapper::before, #top:not(.cptp-template-active):not(.home) #main #homeintro .entry-content-wrapper::after { display: none; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column { float: none; width: 100% !important; margin: 0 !important; padding: 0; background: transparent; white-space: normal !important; } /* The picture half: the photo banner. */ #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-last { height: var(--cp-banner-h); overflow: hidden; background: var(--cp-soft); } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-last :is(.avia-slideshow, .avia-slideshow-inner, .avia-slideshow-inner > li, .avia-image-container, .avia-image-container-inner, .avia-image-overlay-wrap, .avia-slide-wrap, a) { height: var(--cp-banner-h) !important; width: 100%; max-width: none; margin: 0; padding: 0 !important; display: block; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-last img { width: 100%; height: var(--cp-banner-h); object-fit: cover; display: block; } #top:not(.cptp-template-active):not(.home) #main #homeintro .avia-slideshow-arrows, #top:not(.cptp-template-active):not(.home) #main #homeintro .avia-slideshow-dots { display: none; } /* The text half: heading and intro on the page grid. */ #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first { width: min(1180px, calc(100% - 40px)) !important; margin: 0 auto !important; padding: 30px 0 46px; } #top:not(.cptp-template-active):not(.home) #main #homeintro :is(.av_textblock_section, .avia_textblock) { white-space: normal !important; background: transparent; } #top:not(.cptp-template-active):not(.home) #main #homeintro h1 { color: var(--cp-navy); font-size: clamp(38px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; margin: 0 0 18px; } #top:not(.cptp-template-active):not(.home) #main #homeintro p { color: var(--cp-text); font-size: 18px; line-height: 1.55; max-width: 820px !important; margin: 0 0 12px; } #top:not(.cptp-template-active):not(.home) #main #homeintro a.avia-button, #top:not(.cptp-template-active):not(.home) #main #homeintro .alternate_color a.avia-color-theme-color:hover { background-color: var(--cp-teal) !important; color: #fff !important; } /* Breadcrumbs under the page top, and the rows that follow, sit on the 1180px grid. */ #top:not(.cptp-template-active):not(.home) #main .template-page > .post-entry > .entry-content-wrapper > .flex_column.av_one_full:has(.rank-math-breadcrumb), #top:not(.cptp-template-active):not(.home) #main > .container_wrap > .container .flex_column.av_one_full:has(.rank-math-breadcrumb) { margin: 0 0 6px; } #top:not(.cptp-template-active) #main .av-layout-grid-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; border-top: 1px solid var(--cp-line); background: #fff; } #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell { padding: 54px 0 !important; background-color: transparent; } #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell.av_one_half:first-child { padding-right: 28px !important; } #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell.av_one_half:last-child { padding-left: 28px !important; } #top:not(.cptp-template-active) #main .av-layout-grid-container .col-padding > div > div.flex_column, #top:not(.cptp-template-active) #main .av-layout-grid-container div.col-padding.flex_column { padding: 0; } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-last, #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-last :is(.avia-slideshow, .avia-slideshow-inner, .avia-slideshow-inner > li, .avia-image-container, .avia-image-container-inner, .avia-image-overlay-wrap, .avia-slide-wrap, a), #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-last img { height: var(--cp-banner-h) !important; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first { width: calc(100% - 24px) !important; padding: 18px 0 36px; } #top:not(.cptp-template-active):not(.home) #main #homeintro h1 { font-size: 34px; } #top:not(.cptp-template-active):not(.home) #main #homeintro p { font-size: 17px; } #top:not(.cptp-template-active) #main .av-layout-grid-container { width: calc(100% - 24px); } #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell { padding: 40px 0 !important; } } /* Range pages: the heading block printed by the [cat-title-description] shortcode. */ #top:not(.cptp-template-active) #main #homeintro .category-intro { display: block; height: auto; } #top:not(.cptp-template-active) #main #homeintro .category-intro .left-text { display: block; width: auto; height: auto; min-height: 0; padding: 0; background: none; } #top:not(.cptp-template-active) #main #homeintro .category-intro .left-text p { padding: 0; } #top:not(.cptp-template-active):not(.home) #main #homeintro, #top:not(.cptp-template-active):not(.home) #main #homeintro :is(.container, .template-page, .post-entry, .entry-content-wrapper, .flex_column.avia-builder-el-first, .av_textblock_section, .avia_textblock) { height: auto !important; min-height: 0 !important; } /* A link in the page top (e.g. "Request a Sample") is the page's main button. */ #top:not(.cptp-template-active):not(.home) #main #homeintro .category-intro p > a:only-child { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; margin-top: 8px; background: var(--cp-teal); border: 1px solid var(--cp-teal); color: #fff; font-size: 14px; line-height: 1.2; font-weight: 600; text-decoration: none; } #top:not(.cptp-template-active):not(.home) #main #homeintro .category-intro p > a:only-child:hover { opacity: .88; text-decoration: none; } /* Product grids (range pages): the product page's card. */ #top:not(.cptp-template-active) #main ul.products li.product .inner_product { border: 1px solid var(--cp-line); border-radius: 0; background: #fff; box-shadow: none; transition: border-color .18s ease; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product:hover { border-color: var(--cp-teal); } #top:not(.cptp-template-active) #main ul.products li.product .thumbnail_container { background: var(--cp-soft); margin: 0; } #top:not(.cptp-template-active) #main ul.products li.product .thumbnail_container img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product_header { padding: 16px; text-align: left; border: 0; background: #fff; min-height: 0; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product_header_table, #top:not(.cptp-template-active) #main ul.products li.product .inner_product_header_cell { display: block; padding: 0; height: auto; } #top:not(.cptp-template-active) #main ul.products li.product :is(h2, h3).woocommerce-loop-product__title { color: var(--cp-navy); font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; text-align: left; margin: 0; padding: 0; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product_header :is(p, span, small, div):not(.woocommerce-loop-product__title) { color: var(--cp-muted); font-size: 12px; text-align: left; } #top:not(.cptp-template-active) #main .rank-math-breadcrumb { width: min(1180px, 100%); margin: 0 auto; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first { padding-bottom: 24px; } /* Tiles (by-use pages and anywhere else the "collection-tile" / "company-tile" class is used): white bordered cards, as the product page's cards. */ #top:not(.cptp-template-active) #main .flex_column.collection-tile, #top:not(.cptp-template-active) #main .flex_column.company-tile { background: #fff !important; border: 1px solid var(--cp-line); border-radius: 0; box-shadow: none; } #top:not(.cptp-template-active) #main .collection-tile .av_textblock_section, #top:not(.cptp-template-active) #main .company-tile .av_textblock_section { padding: 16px 16px 0; } #top:not(.cptp-template-active) #main .collection-tile .avia-button-wrap, #top:not(.cptp-template-active) #main .company-tile .avia-button-wrap { padding: 14px 16px 18px; text-align: left; } #top:not(.cptp-template-active) #main .collection-tile .avia-image-container img { display: block; width: 100%; } #top:not(.cptp-template-active) #main #ourproducts .template-page.content { padding-top: 40px; padding-bottom: 54px; } /* Accordion questions: navy. */ #top:not(.cptp-template-active) #main .togglecontainer .toggler, #top:not(.cptp-template-active) #main .togglecontainer .toggler * { color: var(--cp-navy); } #top:not(.cptp-template-active) #main .togglecontainer .toggle_content, #top:not(.cptp-template-active) #main .togglecontainer .toggle_content p { color: var(--cp-text); font-size: 15px; } /* Rows after the page top: no leftover teal borders. */ #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell { border: 0 !important; } /* Forms (the contact form and other Forminator forms): the product page's fields. */ #top:not(.cptp-template-active) #main .forminator-ui .forminator-label { color: var(--cp-navy); font-size: 14px; font-weight: 600; } #top:not(.cptp-template-active) #main .forminator-ui :is(input.forminator-input, textarea.forminator-textarea, select, .select2-selection) { min-height: 44px; padding: 8px 12px; border: 1px solid var(--cp-line); border-radius: 0; background: #fff; color: var(--cp-text); font-size: 16px; box-shadow: none; } #top:not(.cptp-template-active) #main .forminator-ui :is(input.forminator-input, textarea.forminator-textarea, select):focus { border-color: var(--cp-navy); outline: 0; } #top:not(.cptp-template-active) #main .forminator-ui .forminator-button-submit { min-height: 44px; padding: 10px 18px; border-radius: 0; border: 1px solid var(--cp-teal); background: var(--cp-teal); color: #fff; font-size: 14px; font-weight: 600; box-shadow: none; } #top:not(.cptp-template-active) #main .collection-tile, #top:not(.cptp-template-active) #main .collection-tile * { box-shadow: none !important; } /* Nothing in the page top stays white now that its ground is white. */ #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first :is(p, li, span, strong, em, div) { color: var(--cp-text); } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first :is(h1, h2, h3, h4) { color: var(--cp-navy); } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first a:not(.avia-button) { color: var(--cp-teal); } #top:not(.cptp-template-active):not(.home) #main #homeintro .category-intro p:not(.cps-enquire) > a:only-child { color: #fff; } /* ----------------------------------------------------------------------------- Part 4: range and by-use page tops The small label, the second button and the trade ordering panel ([compac-trade-panel]), as at the top of a product page. ----------------------------------------------------------------------------- */ #top:not(.cptp-template-active) #main #homeintro .cps-label { display: block; margin: 0 0 8px; color: var(--cp-teal) !important; text-transform: uppercase; letter-spacing: .11em; font-size: 12px; line-height: 1.2; font-weight: 700; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel { float: right; width: 400px; margin: 0 0 24px 56px; padding: 28px; border: 1px solid var(--cp-line); background: #fff; box-sizing: border-box; height: auto !important; min-height: 0 !important; } #top:not(.cptp-template-active) #main #homeintro :is(.av_textblock_section, .avia_textblock, .category-intro, .left-text) { clear: none; overflow: visible; } #top:not(.cptp-template-active) #main #homeintro .av_textblock_section:has(.cps-trade-panel) { margin: 0; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel h3 { color: var(--cp-navy); font-size: 24px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; text-transform: none; margin: 0 0 12px; padding: 0; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel p { color: var(--cp-text); font-size: 16px; line-height: 1.6; margin: 0 0 18px; padding: 0; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; } #top:not(.cptp-template-active) #main #homeintro a.cps-btn, #top:not(.cptp-template-active) #main #homeintro .category-intro p.cps-enquire > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; margin: 0; background: var(--cp-teal); border: 1px solid var(--cp-teal); color: #fff !important; font-size: 14px; line-height: 1.2; font-weight: 600; text-decoration: none; } #top:not(.cptp-template-active) #main #homeintro a.cps-btn.cps-btn--outline, #top:not(.cptp-template-active) #main #homeintro .category-intro p.cps-enquire > a { background: #fff !important; border-color: var(--cp-navy) !important; color: var(--cp-navy) !important; margin-top: 8px; } #top:not(.cptp-template-active) #main #homeintro a.cps-btn.cps-btn--outline { margin-top: 0; } #top:not(.cptp-template-active) #main #homeintro a.cps-btn:hover { opacity: .88; text-decoration: none; } /* The two buttons under the intro sit side by side. */ #top:not(.cptp-template-active) #main #homeintro .category-intro .text > p:has(> a:only-child) { display: inline-block; margin: 0 10px 0 0; vertical-align: top; } @media only screen and (max-width: 989px) { /* Panel under the heading and intro, full width. */ #top:not(.cptp-template-active) #main #homeintro .category-intro, #top:not(.cptp-template-active) #main #homeintro .flex_column.avia-builder-el-first:has(.cps-trade-panel) { display: flex; flex-direction: column; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel, #top:not(.cptp-template-active) #main #homeintro .av_textblock_section:has(.cps-trade-panel) { order: 9; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel { float: none; width: 100%; margin: 28px 0 0; } } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel { padding: 18px; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel h3 { font-size: 21px; } #top:not(.cptp-template-active) #main #homeintro a.cps-btn, #top:not(.cptp-template-active) #main #homeintro .category-intro .text > p:has(> a:only-child), #top:not(.cptp-template-active) #main #homeintro .category-intro .text > p:has(> a:only-child) > a { width: 100%; box-sizing: border-box; margin-right: 0; } } /* A heading the builder marks as the page's H1 takes the H1 size wherever it sits. */ #top:not(.cptp-template-active) #main .av-special-heading h1.av-special-heading-tag { font-size: clamp(38px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.03em; } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active) #main .av-special-heading h1.av-special-heading-tag { font-size: 34px; } } /* Text coloured white by hand in the editor (it sat on the old teal ground). */ #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first .avia_textblock [style*="color: #ffffff"], #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first .avia_textblock [style*="color:#fff"] { color: var(--cp-text) !important; } /* ----------------------------------------------------------------------------- Part 5: the photo banner is the product page's banner Same heights as .cptp-range-banner (380 to 420px on desktop, 260px on tablets, 185px on phones) and the same soft dark fade so the menu reads. ----------------------------------------------------------------------------- */ :root { --cp-banner-h: clamp(380px, 27vw, 420px); } @media only screen and (max-width: 900px) { :root { --cp-banner-h: 260px; } } @media only screen and (max-width: 600px) { :root { --cp-banner-h: 185px; } } .home #main .avia-fullwidth-slider, #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-last { position: relative; } .home #main .avia-fullwidth-slider::after, #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-last::after { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(to bottom, rgba(0,0,0,.36) 0%, rgba(0,0,0,.08) 58%, rgba(0,0,0,.02) 100%); pointer-events: none; } .home #main .avia-fullwidth-slider .avia-slideshow-arrows, .home #main .avia-fullwidth-slider .avia-slideshow-dots { display: none; } /* The dark band keeps its white text whatever the page-wide text rules say. */ #top:not(.cptp-template-active) #main .cps-charcoal :is(h1, h2, h3, h4, p, strong, li, span, .av-subheading, .avia_textblock) { color: #fff; } #top:not(.cptp-template-active) #main .cps-charcoal .cps-stat .avia_textblock p:not(:first-child) { color: rgba(255,255,255,.82); } /* Home banner: photos only. The slide captions were laid out for the old tall slideshow and get cut off here. */ .home #main .avia-fullwidth-slider .caption_fullwidth, .home #main .avia-fullwidth-slider .avia-caption { display: none !important; } /* Home banner: the slides are finished artwork with wording in them, so they show whole (their own 2560 x 1100 shape) rather than cropped to the banner height. */ .home #main .avia-fullwidth-slider, .home #main .avia-fullwidth-slider .avia-slideshow { height: auto !important; } .home #main .avia-fullwidth-slider .avia-slideshow-inner { height: auto !important; aspect-ratio: 2560 / 1100; padding-bottom: 0 !important; } .home #main .avia-fullwidth-slider .avia-slideshow-inner > li, .home #main .avia-fullwidth-slider .avia-slideshow-inner > li .avia-slide-wrap, .home #main .avia-fullwidth-slider .avia-slideshow-inner > li img { height: 100% !important; } /* The page top no longer needs the 80px the old teal band kept below it. */ #top:not(.cptp-template-active):not(.home) #main #homeintro { margin-bottom: 0 !important; } /* Accordion questions stay navy, and the form button's label stays white. */ #top:not(.cptp-template-active) #main .togglecontainer p.toggler { color: var(--cp-navy) !important; } #top:not(.cptp-template-active) #main .forminator-ui .forminator-button-submit, #top:not(.cptp-template-active) #main .forminator-ui .forminator-button-submit * { color: #fff !important; } /* Pages with no heading of their own in the content (login, trade registration, archives, older posts) show their title: it is the page's only H1 and was hidden. */ #top:not(.cptp-template-active) #main:not(:has(.entry-content-wrapper h1)) .title_container .main-title { display: block !important; } #top:not(.cptp-template-active) #main:not(:has(.entry-content-wrapper h1)) .title_container .container { display: flex; flex-direction: column-reverse; width: min(1180px, calc(100% - 40px)); max-width: none; margin: 0 auto; padding: 28px 0 24px; } #top:not(.cptp-template-active) #main:not(:has(.entry-content-wrapper h1)) .title_container .main-title, #top:not(.cptp-template-active) #main:not(:has(.entry-content-wrapper h1)) .title_container .main-title a { font-family: inherit; font-size: clamp(38px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.03em; margin: 0; } #top:not(.cptp-template-active) #main:not(:has(.entry-content-wrapper h1)) .title_container .breadcrumb { position: static; margin: 0 0 14px; line-height: 1.4; } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active) #main:not(:has(.entry-content-wrapper h1)) .title_container .container { width: calc(100% - 24px); padding: 18px 0; } #top:not(.cptp-template-active) #main:not(:has(.entry-content-wrapper h1)) .title_container .main-title, #top:not(.cptp-template-active) #main:not(:has(.entry-content-wrapper h1)) .title_container .main-title a { font-size: 34px; } } /* ----------------------------------------------------------------------------- Part 6: the home banner slider (3 Oct 2026) A tall slider of kitchen photographs, one per surface colour. The photos have no wording in them, so they fill the banner; each slide's Title and Caption (set on the slide in the builder) sit bottom left as a small label and name. ----------------------------------------------------------------------------- */ #top.home #main .avia-fullwidth-slider .avia-slideshow-inner { aspect-ratio: auto; height: clamp(520px, 72vh, 760px) !important; } #top.home #main .avia-fullwidth-slider .avia-slideshow-inner > li img { object-fit: cover; object-position: center; } #top.home #main .avia-fullwidth-slider::after { background: linear-gradient(to bottom, rgba(0,0,0,.36) 0%, rgba(0,0,0,.04) 34%, rgba(0,0,0,.04) 62%, rgba(0,0,0,.5) 100%); } #top.home #main .avia-fullwidth-slider .caption_fullwidth { display: block !important; z-index: 6; } #top.home #main .avia-fullwidth-slider .caption_fullwidth .container { width: min(1180px, calc(100% - 40px)); max-width: none; padding: 0; } #top.home #main .avia-fullwidth-slider .slideshow_caption { position: absolute; left: 0; right: auto; top: auto; bottom: 44px; width: auto; height: auto; padding: 0; background: none; } #top.home #main .avia-fullwidth-slider .slideshow_inner_caption, #top.home #main .avia-fullwidth-slider .slideshow_align_caption { display: block; position: static; height: auto; width: auto; padding: 0; text-align: left; } #top.home #main .avia-fullwidth-slider .avia-caption-title { display: block !important; margin: 0 0 6px; padding: 0; background: none; color: #fff !important; text-transform: uppercase !important; letter-spacing: .11em !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 700 !important; } #top.home #main .avia-fullwidth-slider .avia-caption-content, #top.home #main .avia-fullwidth-slider .avia-caption-content p { display: block !important; margin: 0; padding: 0; background: none; color: #fff !important; font-size: 28px !important; line-height: 1.15 !important; letter-spacing: -.02em !important; font-weight: 600 !important; } #top.home #main .avia-fullwidth-slider .avia-slideshow-arrows { display: block; z-index: 7; } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots { display: block; z-index: 7; bottom: 14px; } @media only screen and (max-width: 900px) { #top.home #main .avia-fullwidth-slider .avia-slideshow-inner { height: 420px !important; } } @media only screen and (max-width: 600px) { #top.home #main .avia-fullwidth-slider .avia-slideshow-inner { height: 320px !important; } #top.home #main .avia-fullwidth-slider .caption_fullwidth .container { width: calc(100% - 24px); } #top.home #main .avia-fullwidth-slider .slideshow_caption { bottom: 34px; } #top.home #main .avia-fullwidth-slider .avia-caption-content, #top.home #main .avia-fullwidth-slider .avia-caption-content p { font-size: 21px !important; } } #top.home #main .avia-fullwidth-slider, #top.home #main .avia-fullwidth-slider .avia-slideshow, #top.home #main .avia-fullwidth-slider .avia-slideshow-inner { background-color: #363636; } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots a { background: #fff; opacity: .45; } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots a.active { opacity: 1; } #top.home #main .avia-fullwidth-slider .caption_fullwidth, #top.home #main .avia-fullwidth-slider .caption_fullwidth .slideshow_caption, #top.home #main .avia-fullwidth-slider .avia-caption-title, #top.home #main .avia-fullwidth-slider .avia-caption-content { visibility: inherit; opacity: 1; } @media only screen and (max-width: 767px) { #top.home #main .avia-fullwidth-slider .caption_fullwidth { display: block !important; } #top.home #main .avia-fullwidth-slider .avia-slideshow-arrows { display: none; } } /* The fade sits inside each slide, under its caption. */ #top.home #main .avia-fullwidth-slider::after { display: none; } #top.home #main .avia-fullwidth-slider .avia-slide-wrap::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(0,0,0,.36) 0%, rgba(0,0,0,.04) 34%, rgba(0,0,0,.04) 58%, rgba(0,0,0,.55) 100%); pointer-events: none; } #top.home #main .avia-fullwidth-slider .image-overlay { display: none !important; } @media only screen and (max-width: 600px) { /* Phones: the caption sits clear of the dots. */ #top.home #main .avia-fullwidth-slider .slideshow_caption { bottom: 46px; } } /* Tall photographs: show the benchtop, not the wall above it. */ #top.home #main .avia-fullwidth-slider .avia-slideshow-inner > li img.wp-image-16413 { object-position: center 78%; } /* ----------------------------------------------------------------------------- Part 7: the rest of the design (Oct 2026) Labels outside the page top, the contact and topic panels, the buttons under an intro, the FAQ topics and the range filter. ----------------------------------------------------------------------------- */ #top:not(.cptp-template-active) #main .cps-label { display: block; margin: 0 0 8px; padding: 0; color: var(--cp-teal) !important; text-transform: uppercase; letter-spacing: .11em; font-size: 12px !important; line-height: 1.2 !important; font-weight: 700; } #top:not(.cptp-template-active) #main #homeintro .cps-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; } #top:not(.cptp-template-active) #main #homeintro .cps-actions a.cps-btn--outline { margin-top: 0; } /* Contact and topic panels: the trade panel's box, with plain details inside. */ #top:not(.cptp-template-active) #main #homeintro .cps-contact-panel p { margin: 0 0 10px; } #top:not(.cptp-template-active) #main #homeintro .cps-contact-panel p:last-child, #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel ul { margin: 0; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel a:not(.cps-btn) { color: var(--cp-teal) !important; font-weight: 600; text-decoration: none; } #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel ul { list-style: none; padding: 0; border-top: 1px solid var(--cp-line); } #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--cp-line); list-style: none; font-size: 16px; } #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel li a { color: var(--cp-navy) !important; } #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel li span { color: var(--cp-muted) !important; font-size: 13px; } /* FAQ topics: a heading above each group of questions. */ #top:not(.cptp-template-active) #main .av-special-heading.cps-faq-topic { margin: 44px 0 14px; padding: 0; scroll-margin-top: 120px; } #top:not(.cptp-template-active) #main .av-special-heading.cps-faq-topic:first-child { margin-top: 0; } #top:not(.cptp-template-active) #main .av-special-heading.cps-faq-topic .special-heading-border { display: none; } #top:not(.cptp-template-active) #main .av-special-heading.cps-faq-topic .av-special-heading-tag { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: var(--cp-navy); font-weight: 600; text-transform: none; } /* Range filter (All / Matte / Gloss), added by js/site-style.js when every product in the grid is one or the other. */ #top:not(.cptp-template-active) #main .cps-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; } #top:not(.cptp-template-active) #main .cps-filter button { min-height: 36px; padding: 6px 14px; border: 1px solid var(--cp-line); border-radius: 0; background: #fff; color: var(--cp-navy); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; } #top:not(.cptp-template-active) #main .cps-filter button span { margin-left: 6px; color: var(--cp-muted); font-weight: 500; } #top:not(.cptp-template-active) #main .cps-filter button[aria-pressed="true"] { background: var(--cp-navy); border-color: var(--cp-navy); color: #fff; } #top:not(.cptp-template-active) #main .cps-filter button[aria-pressed="true"] span { color: rgba(255,255,255,.75); } #top:not(.cptp-template-active) #main ul.products li.product.cps-filtered-out { display: none !important; } /* ----------------------------------------------------------------------------- Part 8: refinements after review (4 Oct 2026) Small rounded corners, more room between sections, taller banners, a pale grey ground on alternate sections, the home heading on the banner, and the phone menu. Product pages (cptp-template-active) are still left alone. ----------------------------------------------------------------------------- */ :root { --cp-radius: 6px; --cp-radius-card: 8px; --cp-section-pad: 76px; --cp-home-banner-h: clamp(560px, 76vh, 800px); } :root { --cp-banner-h: clamp(440px, 33vw, 560px); } @media only screen and (max-width: 900px) { :root { --cp-banner-h: 320px; --cp-section-pad: 56px; --cp-home-banner-h: 440px; } } @media only screen and (max-width: 600px) { :root { --cp-banner-h: 220px; --cp-section-pad: 46px; --cp-home-banner-h: 340px; } } /* --- Corners --- */ #top:not(.cptp-template-active) #main :is(.avia-button, .woocommerce a.button, .woocommerce button.button, input[type="submit"], a.cps-btn, .cps-filter button, .forminator-button-submit), #top:not(.cptp-template-active) #main #homeintro .category-intro p > a:only-child { border-radius: var(--cp-radius) !important; } #top:not(.cptp-template-active) #main :is(.flex_column.cps-card, .flex_column.cps-benefit, .flex_column.cps-stat, .flex_column.cps-panel, .cps-trade-panel, .flex_column.collection-tile, .flex_column.company-tile, .cps-cta .entry-content-wrapper), #top:not(.cptp-template-active) #main ul.products li.product .inner_product { border-radius: var(--cp-radius-card) !important; } #top:not(.cptp-template-active) #main :is(.flex_column.cps-card, .flex_column.collection-tile, .flex_column.company-tile), #top:not(.cptp-template-active) #main ul.products li.product .inner_product { overflow: hidden; } #top:not(.cptp-template-active) #main .forminator-ui :is(input.forminator-input, textarea.forminator-textarea, select, .select2-selection) { border-radius: var(--cp-radius) !important; } /* --- Room --- */ #top:not(.cptp-template-active) #main .avia-section.cps-section .container, #top:not(.cptp-template-active) #main .avia-section.cps-cta .container { padding-top: var(--cp-section-pad); padding-bottom: var(--cp-section-pad); } #top:not(.cptp-template-active) #main .avia-section.cps-charcoal .container { padding-top: var(--cp-section-pad); padding-bottom: var(--cp-section-pad); } #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell { padding: var(--cp-section-pad) 0 !important; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first { padding: 52px 0 40px; } /* The breadcrumb row closes the page top; the spacer rows the old layout used between sections are not needed. */ #top:not(.cptp-template-active):not(.home) #main > .container_wrap:has(.rank-math-breadcrumb) .template-page { padding-top: 0; padding-bottom: 22px; } #top:not(.cptp-template-active) #main > .container_wrap[id^="after_grid_row"]:not(:has(:is(p, h1, h2, h3, h4, img, a, form, ul, table, iframe))) { display: none; } /* A heading row followed by its accordion reads as one section. */ #top:not(.cptp-template-active) #main .av-layout-grid-container:has(.togglecontainer):not(:has(h2, .cps-faq-topic)) { border-top: 0; } #top:not(.cptp-template-active) #main .av-layout-grid-container:has(.togglecontainer):not(:has(h2, .cps-faq-topic)) .flex_cell { padding-top: 0 !important; } #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer)) .flex_cell, #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .container_wrap + .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer)) .flex_cell { padding-bottom: 26px !important; } /* --- Pale grey on alternate sections (full width, even where the content sits on the 1180px grid) --- */ #top:not(.cptp-template-active) #main .avia-section.cps-section:is(.cps-grid-5, .cps-grid-3), #top:not(.cptp-template-active):not(.home) #main #ourproducts { background-color: var(--cp-soft); } #top:not(.cptp-template-active) #main .avia-section.cps-section:is(.cps-grid-5, .cps-grid-3) .container, #top:not(.cptp-template-active) #main .avia-section.cps-section:is(.cps-grid-5, .cps-grid-3) + .avia-section .container { border-top-color: transparent; } #top:not(.cptp-template-active):not(.home) #main #ourproducts .template-page.content { padding-top: var(--cp-section-pad); padding-bottom: var(--cp-section-pad); } #top:not(.cptp-template-active) #main .av-layout-grid-container:has(.togglecontainer):not(:has(.cps-faq-topic)), #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer, ul.products)), #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .container_wrap + .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer, ul.products)) { background: var(--cp-soft); border-top-color: transparent; width: 100%; max-width: none; margin: 0; box-sizing: border-box; padding-left: max(20px, calc((100% - 1180px) / 2)); padding-right: max(20px, calc((100% - 1180px) / 2)); } /* --- Home: the banner carries the heading (desktop) --- */ #top.home #main .avia-fullwidth-slider .avia-slideshow-inner { height: var(--cp-home-banner-h) !important; } @media only screen and (min-width: 990px) { #top.home #main .avia-fullwidth-slider { z-index: 1; } #top.home #main .avia-fullwidth-slider .avia-slide-wrap::before { background: linear-gradient(90deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.52) 26%, rgba(0,0,0,.18) 48%, rgba(0,0,0,0) 62%), linear-gradient(to bottom, rgba(0,0,0,.36) 0%, rgba(0,0,0,0) 28%); } /* Each slide keeps its own caption, moved to the right, out of the way of the heading. */ #top.home #main .avia-fullwidth-slider .slideshow_caption { left: auto; right: 0; } #top.home #main .avia-fullwidth-slider .slideshow_align_caption, #top.home #main .avia-fullwidth-slider .slideshow_inner_caption { text-align: right; } #top.home #main .avia-section.cps-hero { position: relative; z-index: 2; overflow: visible; } #top.home #main .avia-section.cps-hero :is(.container, .template-page, .post-entry, .entry-content-wrapper) { position: static; overflow: visible; } #top.home #main .avia-section.cps-hero .container { padding-top: 26px; padding-bottom: 26px; } #top.home #main .avia-section.cps-hero.cps-grid-hero .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); } #top.home #main .avia-section.cps-hero .flex_column.av_two_third { position: absolute; left: max(20px, calc((100% - 1180px) / 2)); top: calc(-1 * var(--cp-home-banner-h)); width: min(620px, 48vw) !important; height: var(--cp-home-banner-h); padding-top: 90px; display: flex; flex-flow: row wrap; align-content: center; align-items: center; pointer-events: none; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third > :is(.av-special-heading, .av_textblock_section) { flex: 0 0 100%; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third > .av_textblock_section { margin-bottom: 26px; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .avia_textblock p { font-size: 19px; max-width: 540px; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third :is(a, button) { pointer-events: auto; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .av-special-heading .av-special-heading-tag, #top.home #main .avia-section.cps-hero .flex_column.av_two_third .av-special-heading .av-subheading, #top.home #main .avia-section.cps-hero .flex_column.av_two_third .av-special-heading .av-subheading p, #top.home #main .avia-section.cps-hero .flex_column.av_two_third .avia_textblock, #top.home #main .avia-section.cps-hero .flex_column.av_two_third .avia_textblock p { color: #fff !important; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .av-special-heading h1.av-special-heading-tag { font-size: clamp(42px, 4.4vw, 62px); } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .cps-outline .avia-button { background: transparent !important; border-color: #fff !important; color: #fff !important; } /* What is left under the banner is the trade ordering panel, as one strip: label, heading and the two lines of text on the left, the two buttons on the right. */ #top.home #main .avia-section.cps-hero .flex_column.cps-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 24px 32px; margin: 0; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel::before, #top.home #main .avia-section.cps-hero .flex_column.cps-panel::after { display: none; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > * { margin: 0 !important; grid-column: 1; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av-special-heading, #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av-special-heading .av-special-heading-tag { padding: 0 !important; width: auto; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av-special-heading .av-subheading { margin-bottom: 6px; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av-special-heading h3.av-special-heading-tag { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av_textblock_section .avia_textblock p { margin: 0; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap { grid-row: 1 / span 3; align-self: center; display: block; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap { grid-column: 2; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap.cps-outline { grid-column: 3; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av-special-heading { grid-row: 1; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > section.av_textblock_section:nth-of-type(1) { grid-row: 2; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > section.av_textblock_section:nth-of-type(2) { grid-row: 3; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap .avia-button { margin: 0 !important; } } /* --- Phone menu: a white panel in the page type, starting at the top --- */ html.html_av-overlay-side #top .av-burger-overlay .av-burger-overlay-scroll { background: #fff !important; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul { vertical-align: top; padding: 92px 0 40px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li { border-bottom: 1px solid #dfe5e7; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a .avia-menu-text { background: transparent !important; border: 0 !important; color: #021d49 !important; font-size: 18px; line-height: 1.3; font-weight: 600; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a { padding: 17px 28px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li { border-bottom: 0; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a .avia-menu-text { font-size: 16px; font-weight: 500; color: #182632 !important; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a { padding: 11px 28px 11px 44px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a:hover, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a:hover .avia-menu-text { color: #00c4b4 !important; } html.html_av-overlay-side #top .av-burger-overlay .av-submenu-indicator::before { border-color: #021d49 !important; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a svg, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a svg * { stroke: #021d49; fill: #021d49; } html.av-burger-overlay-active #top #header .av-hamburger-inner, html.av-burger-overlay-active #top #header .av-hamburger-inner::before, html.av-burger-overlay-active #top #header .av-hamburger-inner::after { background-color: #021d49 !important; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a i.wc-account { filter: brightness(0); } /* Phone menu, second and third levels: the page's own font, a group title with its line of description under it, then the ranges. */ html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a .avia-menu-text, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a .avia-menu-text span { font-family: "PP Neue Montreal", Helvetica, Arial, sans-serif !important; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a .cps-menu-title { display: block; color: #021d49; font-size: 16px; line-height: 1.3; font-weight: 600; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a .cps-menu-desc { display: block; margin-top: 2px; color: #66747d; font-size: 13px; line-height: 1.4; font-weight: 500; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu .sub-menu li a { padding: 9px 28px 9px 60px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu .sub-menu { padding-bottom: 8px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li.current-menu-item > a .avia-menu-text { color: #00c4b4 !important; } /* ----------------------------------------------------------------------------- Part 9: Design's V3 polish (4 Oct 2026) One spacing scale, two corner sizes, one rhythm of grounds. Values are from docs/design/v3-handoff/COMPAC-V3-SPEC.md. Same layouts, content and order as before. The footer is not touched. Sizes follow the width of the window between the three widths Design drew (1440, 834, 390), so there is one rule for each rather than three. Grounds: a Color Section or Grid Row is white unless it is one of these: home: the reasons and "good to know" sections are grey a Grid Row holding a product grid, a small label or FAQ topics is grey cps-charcoal is charcoal Add the class cps-grey or cps-white to a section to set it by hand. Home range cards (a cps-card column in a cps-grid-4 section): the Image, then one Text Block holding, in order: the range name (Heading 3), its line of description, its group, and "View range". The picture shows only its top three quarters, so wording baked into the old tiles is cut off and the name and description are ordinary text. ----------------------------------------------------------------------------- */ :root { --cp-field: #c9d3d6; --cp-teal-hover: #00ad9f; --cp-teal-text: #00837a; --cp-charcoal: #363636; --cp-gutter: clamp(20px, calc(8px + 3vw), 40px); --cp-section-pad: clamp(48px, calc(16px + 5.6vw), 96px); --cp-gap: clamp(12px, calc(4px + 1.4vw), 24px); --cp-head-gap: clamp(24px, calc(8px + 2.3vw), 40px); --cp-h1: clamp(36px, calc(22px + 3vw), 64px); --cp-h2: clamp(26px, calc(18px + 1.2vw), 36px); --cp-lead: clamp(17px, 1.3vw, 19px); --cp-banner-h: clamp(440px, 33vw, 560px); /* Design drew 420; Jacques asked for the taller banner back (4 Oct) */ --cp-home-banner-h: clamp(560px, 50vw, 720px); --cp-edge: max(var(--cp-gutter), calc((100% - 1180px) / 2)); } @media only screen and (max-width: 989px) { :root { --cp-banner-h: 320px; } } @media only screen and (max-width: 767px) { :root { --cp-banner-h: 220px; --cp-home-banner-h: 640px; } } /* --- 9.1 Page width: 1180px, with the side margin from the scale --- */ #top:not(.cptp-template-active) #main .avia-section[class*="cps-"] .container, #top:not(.cptp-template-active):not(.home) #main #ourproducts .container { max-width: calc(1180px + 2 * var(--cp-gutter)); width: 100%; padding-left: var(--cp-gutter); padding-right: var(--cp-gutter); } #top:not(.cptp-template-active):not(.home) #main #ourproducts .template-page.content { width: 100%; margin: 0; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first { width: min(1180px, calc(100% - 2 * var(--cp-gutter))) !important; } /* --- 9.2 Type --- */ #top:not(.cptp-template-active) #main .cps-label, #top:not(.cptp-template-active) #main #homeintro .cps-label, #top:not(.cptp-template-active) #main [class*="cps-"] .av-special-heading .av-subheading, #top:not(.cptp-template-active) #main [class*="cps-"] .av-special-heading .av-subheading p { margin: 0 0 8px; color: var(--cp-muted) !important; text-transform: uppercase; letter-spacing: .14em; font-size: 13px !important; line-height: 1.3 !important; font-weight: 600; } #top:not(.cptp-template-active) #main [class*="cps-"] .av-special-heading .av-subheading p { margin: 0; } #top:not(.cptp-template-active) #main .cps-charcoal .av-special-heading .av-subheading, #top:not(.cptp-template-active) #main .cps-charcoal .av-special-heading .av-subheading p { color: #fff !important; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) h1, #top:not(.cptp-template-active) #main .av-special-heading h1.av-special-heading-tag, #top:not(.cptp-template-active):not(.home) #main #homeintro h1 { font-size: var(--cp-h1); line-height: 1; letter-spacing: -.025em; font-weight: 600; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) h2, #top:not(.cptp-template-active) #main [class*="cps-"] .av-special-heading h2.av-special-heading-tag { font-size: var(--cp-h2); line-height: 1.1; letter-spacing: -.015em; font-weight: 600; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) h3, #top:not(.cptp-template-active) #main [class*="cps-"] .avia_textblock h3 { font-size: 20px; line-height: 1.25; } #top:not(.cptp-template-active) #main .cps-section .av_one_full .av-special-heading, #top:not(.cptp-template-active) #main .cps-charcoal .av_one_full .av-special-heading { margin-bottom: 0; max-width: none; } #top:not(.cptp-template-active) #main .cps-section .av_one_full .av-special-heading .av-special-heading-tag { max-width: 24em; } /* Links in text: navy, with a teal underline. */ #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) :is(p, li:not(.product)) a:not(.avia-button):not(.button):not(.cps-btn):not(.category-intro p > a:only-child), #top:not(.cptp-template-active) #main [class*="cps-"] .avia_textblock a:not(.cps-btn), #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first :is(p, li) a:not(.avia-button):not(.cps-btn):not(.category-intro p > a:only-child), #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel a:not(.cps-btn) { color: var(--cp-navy) !important; font-size: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cp-teal); text-decoration-thickness: 2px; text-underline-offset: 4px; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) :is(p, li:not(.product)) a:not(.avia-button):not(.button):not(.cps-btn):not(.category-intro p > a:only-child):hover, #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel a:not(.cps-btn):hover { color: var(--cp-teal-text) !important; } /* --- 9.3 Buttons: teal with navy text, or a navy outline that fills on hover --- */ #top:not(.cptp-template-active) #main .avia-button, #top:not(.cptp-template-active) #main a.cps-btn, #top:not(.cptp-template-active) #main #homeintro a.cps-btn, #top:not(.cptp-template-active):not(.home) #main #homeintro a.avia-button, #top:not(.cptp-template-active):not(.home) #main #homeintro .category-intro p > a:only-child, #top:not(.cptp-template-active) #main .woocommerce a.button, #top:not(.cptp-template-active) #main .woocommerce button.button, #top:not(.cptp-template-active) #main input[type="submit"], #top:not(.cptp-template-active) #main .forminator-ui .forminator-button-submit { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 0 22px; margin: 0; border: 1.5px solid var(--cp-teal) !important; border-radius: var(--cp-radius) !important; background: var(--cp-teal) !important; background-color: var(--cp-teal) !important; color: var(--cp-navy) !important; font-size: 16px; line-height: 1.2; font-weight: 600; text-decoration: none !important; opacity: 1; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } #top:not(.cptp-template-active) #main .avia-button:hover, #top:not(.cptp-template-active) #main a.cps-btn:hover, #top:not(.cptp-template-active) #main #homeintro a.cps-btn:hover, #top:not(.cptp-template-active):not(.home) #main #homeintro a.avia-button:hover, #top:not(.cptp-template-active):not(.home) #main #homeintro .category-intro p > a:only-child:hover, #top:not(.cptp-template-active) #main .woocommerce a.button:hover, #top:not(.cptp-template-active) #main .woocommerce button.button:hover, #top:not(.cptp-template-active) #main input[type="submit"]:hover, #top:not(.cptp-template-active) #main .forminator-ui .forminator-button-submit:hover { background: var(--cp-teal-hover) !important; background-color: var(--cp-teal-hover) !important; border-color: var(--cp-teal-hover) !important; color: var(--cp-navy) !important; opacity: 1; } #top:not(.cptp-template-active) #main .forminator-ui .forminator-button-submit * { color: var(--cp-navy) !important; } #top:not(.cptp-template-active) #main .cps-outline .avia-button, #top:not(.cptp-template-active) #main .avia-button.cps-outline, #top:not(.cptp-template-active) #main a.cps-btn.cps-btn--outline, #top:not(.cptp-template-active) #main #homeintro a.cps-btn.cps-btn--outline, #top:not(.cptp-template-active) #main #homeintro .category-intro p.cps-enquire > a:only-child, #top:not(.cptp-template-active) #main .collection-tile .avia-button, #top:not(.cptp-template-active) #main .company-tile .avia-button { background: #fff !important; background-color: #fff !important; border-color: var(--cp-navy) !important; color: var(--cp-navy) !important; } #top:not(.cptp-template-active) #main .cps-outline .avia-button:hover, #top:not(.cptp-template-active) #main .avia-button.cps-outline:hover, #top:not(.cptp-template-active) #main a.cps-btn.cps-btn--outline:hover, #top:not(.cptp-template-active) #main #homeintro a.cps-btn.cps-btn--outline:hover, #top:not(.cptp-template-active) #main #homeintro .category-intro p.cps-enquire > a:only-child:hover, #top:not(.cptp-template-active) #main .collection-tile .avia-button:hover, #top:not(.cptp-template-active) #main .company-tile .avia-button:hover { background: var(--cp-navy) !important; background-color: var(--cp-navy) !important; border-color: var(--cp-navy) !important; color: #fff !important; } #top:not(.cptp-template-active) #main :is(.avia-button, a.cps-btn, input[type="submit"], .forminator-button-submit):focus-visible { outline: 2px solid var(--cp-navy); outline-offset: 2px; } #top:not(.cptp-template-active) #main [class*="cps-"] .avia-button-wrap.cps-inline { margin: 0 12px 0 0; } #top:not(.cptp-template-active) #main #homeintro .cps-actions, #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel__actions { gap: 12px; } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active) #main [class*="cps-"] .avia-button, #top:not(.cptp-template-active) #main #homeintro a.cps-btn, #top:not(.cptp-template-active) #main .forminator-ui .forminator-button-submit { width: 100%; } #top:not(.cptp-template-active) #main [class*="cps-"] .avia-button-wrap.cps-inline { display: block; margin: 0 0 12px; } } /* --- 9.4 Sections: room and grounds, no rule lines --- */ #top:not(.cptp-template-active) #main .avia-section.cps-section .container, #top:not(.cptp-template-active) #main .avia-section.cps-cta .container, #top:not(.cptp-template-active) #main .avia-section.cps-charcoal .container { border-top: 0; padding-top: var(--cp-section-pad); padding-bottom: var(--cp-section-pad); } #top:not(.cptp-template-active) #main .avia-section[class*="cps-grid-"] .entry-content-wrapper { gap: var(--cp-gap); } #top:not(.cptp-template-active) #main .avia-section[class*="cps-grid-"] .entry-content-wrapper > .flex_column.av_one_full { margin-bottom: calc(var(--cp-head-gap) - var(--cp-gap)); } #top:not(.cptp-template-active) #main .avia-section.cps-section, #top:not(.cptp-template-active) #main .avia-section.cps-section:is(.cps-grid-5, .cps-grid-3) { background-color: #fff; } #top.home:not(.cptp-template-active) #main .avia-section.cps-section:is(.cps-grid-5, .cps-grid-3), #top:not(.cptp-template-active) #main .avia-section.cps-grey { background-color: var(--cp-soft); } #top:not(.cptp-template-active) #main .avia-section.cps-white { background-color: #fff; } /* A call to action that follows a white section sits closer to it: its grey panel does the separating. */ #top:not(.cptp-template-active) #main .avia-section.cps-section:not(.cps-grey) + .avia-section.cps-cta .container { padding-top: 0; } #top.home:not(.cptp-template-active) #main .avia-section.cps-section:is(.cps-grid-5, .cps-grid-3) + .avia-section.cps-cta .container { padding-top: var(--cp-section-pad); } /* Grid Rows (the older pages): full width, with the content on the 1180px grid. */ #top:not(.cptp-template-active) #main .av-layout-grid-container, #top:not(.cptp-template-active) #main .av-layout-grid-container:has(.togglecontainer), #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .av-layout-grid-container .togglecontainer), #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .container_wrap + .av-layout-grid-container .togglecontainer) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; width: 100%; max-width: none; margin: 0; box-sizing: border-box; padding: var(--cp-section-pad) var(--cp-edge); border: 0; background: #fff; } #top:not(.cptp-template-active) #main .av-layout-grid-container > .flex_cell, #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap > .flex_cell.flex_cell.flex_cell { display: block; flex: 1 1 380px; min-width: 0; width: auto; padding: 0 !important; } #top:not(.cptp-template-active) #main .av-layout-grid-container > .flex_cell.av_one_full { flex-basis: 100%; } #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap:has(ul.products), #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap:has(.cps-label), #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap:has(.cps-faq-topic), #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap.cps-grey { background: var(--cp-soft); } /* A heading row and the accordion row under it read as one section. */ #top:not(.cptp-template-active) #main .av-layout-grid-container:has(.togglecontainer):not(:has(.cps-faq-topic, .cps-label, ul.products)), #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer, ul.products, .cps-label)), #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .container_wrap + .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer, ul.products, .cps-label)) { background: #fff; padding-left: var(--cp-edge); padding-right: var(--cp-edge); } #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer, ul.products)), #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .container_wrap + .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer, ul.products)) { padding-bottom: 0; } #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer)) .flex_cell, #top:not(.cptp-template-active) #main .av-layout-grid-container:has(+ .container_wrap + .av-layout-grid-container .togglecontainer):not(:has(.togglecontainer)) .flex_cell { padding-bottom: 0 !important; } #top:not(.cptp-template-active) #main .av-layout-grid-container:has(.togglecontainer):not(:has(h2, .cps-faq-topic)) { padding-top: 0; } /* Spacer rows left from the old layout. */ #top:not(.cptp-template-active) #main > .container_wrap[id^="after_grid_row"]:has(.hr-invisible):not(:has(:is(h1, h2, h3, h4, img, a, form, ul, table, iframe))) { display: none; } #top:not(.cptp-template-active) #main .av-layout-grid-container .hr.hr-invisible { display: none; } /* A white row straight after the page top (Sustainability, Specifications, the policies): the page top's own room is enough. */ #top:not(.cptp-template-active):not(.home) #main #homeintro + .container_wrap:has(.rank-math-breadcrumb) + .av-layout-grid-container:not(:has(.cps-label, .cps-faq-topic, ul.products)) { padding-top: 0; } /* Login and registration forms take the same corners. */ #top:not(.cptp-template-active) #main .woocommerce form :is(input.input-text, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea) { border-radius: var(--cp-radius); } #top:not(.cptp-template-active) #main .woocommerce :is(form.login, form.register, form.lost_reset_password) { border-radius: var(--cp-radius-card); } /* --- 9.5 Page top: banner, breadcrumb, then label, heading, intro, buttons, with the panel beside --- */ #top:not(.cptp-template-active):not(.home) #main { position: relative; } #top:not(.cptp-template-active):not(.home) #main #homeintro + .container_wrap:has(.rank-math-breadcrumb) { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--cp-banner-h) + clamp(20px, calc(8px + 1.1vw), 24px)); background: transparent; border: 0; min-height: 0; } @media only screen and (min-width: 990px) { /* A page with the solid desktop header starts 102px down (Enfold pads #main by the header's height). */ html:not(.html_header_transparency) #top:not(.cptp-template-active):not(.home) #main #homeintro + .container_wrap:has(.rank-math-breadcrumb) { top: calc(102px + var(--cp-banner-h) + clamp(20px, calc(8px + 1.1vw), 24px)); } } #top:not(.cptp-template-active):not(.home) #main #homeintro + .container_wrap:has(.rank-math-breadcrumb) .container { width: 100% !important; max-width: none !important; padding: 0 var(--cp-gutter) !important; min-height: 0; } #top:not(.cptp-template-active):not(.home) #main #homeintro + .container_wrap:has(.rank-math-breadcrumb) :is(.template-page, .flex_column, .av_textblock_section) { padding: 0 !important; margin: 0 !important; width: 100%; } #top:not(.cptp-template-active) #main .rank-math-breadcrumb { width: min(1180px, 100%); margin: 0 auto; } #top:not(.cptp-template-active) #main .rank-math-breadcrumb, #top:not(.cptp-template-active) #main .rank-math-breadcrumb p, #top:not(.cptp-template-active) #main .rank-math-breadcrumb span { font-size: 14px; line-height: 1.4; color: var(--cp-muted); font-weight: 400; } #top:not(.cptp-template-active) #main .rank-math-breadcrumb p { margin: 0; max-width: none !important; } #top:not(.cptp-template-active) #main .rank-math-breadcrumb .separator { color: #9aa6ac; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) .rank-math-breadcrumb p a, #top:not(.cptp-template-active) #main .rank-math-breadcrumb a { font-size: 14px; color: var(--cp-navy) !important; font-weight: 500; text-decoration: none !important; } #top:not(.cptp-template-active) #main :is(.main_color, .alternate_color) .rank-math-breadcrumb p a:hover, #top:not(.cptp-template-active) #main .rank-math-breadcrumb a:hover { color: var(--cp-teal-text) !important; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first { padding: var(--cp-head-gap) 0 clamp(48px, calc(16px + 4.4vw), 80px); } #top:not(.cptp-template-active):not(.home) #main:has(#homeintro + .container_wrap .rank-math-breadcrumb) #homeintro .flex_column.avia-builder-el-first { padding-top: calc(clamp(20px, calc(8px + 1.1vw), 24px) + 20px + var(--cp-head-gap)); } #top:not(.cptp-template-active):not(.home) #main #homeintro h1 { margin: 0; max-width: 11.5em; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first p, #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first .category-intro .text > p { font-size: var(--cp-lead); line-height: 1.6; max-width: 36em !important; margin: 20px 0 0; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first p.cps-label { margin: 0 0 8px; max-width: none !important; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first .avia_textblock > h1 ~ p + p { margin-top: 4px; } #top:not(.cptp-template-active):not(.home) #main #homeintro .av_textblock_section { margin: 0; } #top:not(.cptp-template-active) #main #homeintro .cps-actions { margin: 28px 0 0; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first .category-intro .text > p:has(> a:only-child) { margin: 28px 12px 0 0; } #top:not(.cptp-template-active) #main #homeintro .category-intro p.cps-enquire > a:only-child { margin-top: 0; } /* The panel beside the page top. */ #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel { margin: 0 0 24px 64px; padding: clamp(20px, calc(8px + 1.7vw), 32px); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel h3 { font-size: 22px; line-height: 1.25; letter-spacing: 0; margin: 0; } #top:not(.cptp-template-active) #main #homeintro .flex_column.avia-builder-el-first .cps-trade-panel p { font-size: 16px; line-height: 1.55; margin: 10px 0 0; max-width: none !important; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel__actions { margin-top: 20px; } #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel__actions a.cps-btn { flex: 1 0 auto; padding: 0 20px; } #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel ul { margin: 8px 0 0; border-top: 0; } #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel li { align-items: center; min-height: 48px; padding: 0; border-bottom: 0; border-top: 1px solid var(--cp-line); } #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel li a, #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel.cps-jump-panel li a:not(.cps-btn) { flex: 1; font-size: 16px; font-weight: 600; text-decoration: none !important; padding: 12px 0; } #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel li a:hover { color: var(--cp-teal-text) !important; } #top:not(.cptp-template-active) #main #homeintro .cps-jump-panel li span { font-size: 14px; font-weight: 400; } @media only screen and (max-width: 989px) { #top:not(.cptp-template-active) #main #homeintro .cps-trade-panel { margin: 32px 0 0; } } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first .category-intro .text > p:has(> a:only-child) { margin-right: 0; } #top:not(.cptp-template-active):not(.home) #main #homeintro .flex_column.avia-builder-el-first .category-intro .text > p:has(> a:only-child) + p:has(> a:only-child) { margin-top: 12px; } } /* --- 9.6 Home banner --- */ #top.home #main .avia-fullwidth-slider .avia-slideshow-inner { height: var(--cp-home-banner-h) !important; } #top.home #main .avia-fullwidth-slider .avia-slideshow-arrows { display: none; } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots { position: absolute; z-index: 8; left: var(--cp-edge); right: auto; bottom: 40px; width: auto; height: 8px; display: flex; align-items: center; gap: 8px; text-align: left; } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots a { position: relative; top: 0; bottom: auto; float: none; display: block; width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: #fff; opacity: .55; text-indent: -9999px; overflow: visible; transition: width .2s ease, opacity .2s ease; } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots a::after { content: ""; position: absolute; inset: -14px -4px; } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots a.active { width: 28px; opacity: 1; } #top.home #main .avia-fullwidth-slider .caption_fullwidth .container { width: min(1180px, calc(100% - 2 * var(--cp-gutter))); } #top.home #main .avia-fullwidth-slider .slideshow_caption { left: auto; right: 0; bottom: 40px; } #top.home #main .avia-fullwidth-slider .slideshow_align_caption, #top.home #main .avia-fullwidth-slider .slideshow_inner_caption { text-align: right; } #top.home #main .avia-fullwidth-slider .avia-caption-title { margin: 0 0 2px; letter-spacing: .14em !important; font-weight: 600 !important; } #top.home #main .avia-fullwidth-slider .avia-caption-content, #top.home #main .avia-fullwidth-slider .avia-caption-content p { font-size: 22px !important; line-height: 1.2 !important; letter-spacing: 0 !important; } /* The heading, intro and buttons sit on the banner. */ #top.home #main .avia-fullwidth-slider { z-index: 1; } #top.home #main .avia-section.cps-hero { position: relative; z-index: 2; overflow: visible; } #top.home #main .avia-section.cps-hero :is(.container, .template-page, .post-entry, .entry-content-wrapper) { position: static; overflow: visible; } #top.home #main .avia-section.cps-hero .container { padding-top: clamp(24px, calc(8px + 1.7vw), 32px); padding-bottom: clamp(24px, calc(8px + 1.7vw), 32px); } #top.home #main .avia-section.cps-hero.cps-grid-hero .entry-content-wrapper { display: block; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third { position: absolute; left: var(--cp-edge); top: calc(-1 * var(--cp-home-banner-h)); width: min(620px, calc(100% - 2 * var(--cp-gutter))) !important; height: var(--cp-home-banner-h); margin: 0; padding: 64px 0 0; display: flex; flex-flow: row wrap; align-content: center; align-items: center; pointer-events: none; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third > :is(.av-special-heading, .av_textblock_section) { flex: 0 0 100%; margin: 0; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third :is(a, button) { pointer-events: auto; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .av-special-heading .av-subheading, #top.home #main .avia-section.cps-hero .flex_column.av_two_third .av-special-heading .av-subheading p { color: #fff !important; margin: 0; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .av-special-heading h1.av-special-heading-tag { margin: 12px 0 0; color: #fff !important; font-size: clamp(40px, calc(16px + 4vw), 72px); line-height: .98; letter-spacing: -.025em; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .avia_textblock, #top.home #main .avia-section.cps-hero .flex_column.av_two_third .avia_textblock p { color: #fff !important; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; max-width: 30em; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third > .av_textblock_section { margin: 24px 0 32px; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .avia-button { min-height: 52px; padding: 0 26px; font-size: 17px; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .cps-outline .avia-button { background: transparent !important; background-color: transparent !important; border-color: #fff !important; color: #fff !important; padding: 0 24px; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .cps-outline .avia-button:hover { background: #fff !important; background-color: #fff !important; color: var(--cp-navy) !important; } /* The fade behind the text: navy from the left, and a short dark fade at the top for the menu. */ #top.home #main .avia-fullwidth-slider .avia-slide-wrap::before { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 180px), linear-gradient(90deg, rgba(2,29,73,.86) 0, rgba(2,29,73,.66) min(100%, 780px), rgba(2,29,73,0) min(100%, 1060px)); } @media only screen and (min-width: 768px) and (max-width: 989px) { /* Tablet: the fade covers the whole picture; the header is a bar above it. */ #top.home #main .avia-fullwidth-slider .avia-slide-wrap::before { background: linear-gradient(90deg, rgba(2,29,73,.86) 0, rgba(2,29,73,.66) 100%); } #top.home #main .avia-section.cps-hero .flex_column.av_two_third { padding-top: 0; } } @media only screen and (max-width: 767px) { /* Phone: the picture on top, fading into navy, with the text on the fade. Dots and caption at the top. */ #top.home #main .avia-fullwidth-slider, #top.home #main .avia-fullwidth-slider .avia-slideshow, #top.home #main .avia-fullwidth-slider .avia-slideshow-inner, #top.home #main .avia-fullwidth-slider .avia-slideshow-inner > li { background-color: var(--cp-navy); } #top.home #main .avia-fullwidth-slider .avia-slideshow-inner > li img { height: 400px !important; object-position: center top; } #top.home #main .avia-fullwidth-slider .avia-slide-wrap::before { background: linear-gradient(180deg, rgba(2,29,73,0) 0, rgba(2,29,73,0) 180px, rgba(2,29,73,.9) 380px, #021d49 440px); } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots { top: 22px; bottom: auto; left: 20px; height: 6px; gap: 6px; } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots a { width: 6px; height: 6px; border-radius: 3px; } #top.home #main .avia-fullwidth-slider .avia-slideshow-dots a.active { width: 20px; } #top.home #main .avia-fullwidth-slider .caption_fullwidth .container { width: calc(100% - 40px); } #top.home #main .avia-fullwidth-slider .slideshow_caption { top: 16px; bottom: auto; } #top.home #main .avia-fullwidth-slider .avia-caption-title { font-size: 11px !important; text-shadow: 0 1px 6px rgba(0,0,0,.4); } #top.home #main .avia-fullwidth-slider .avia-caption-content, #top.home #main .avia-fullwidth-slider .avia-caption-content p { font-size: 17px !important; text-shadow: 0 1px 6px rgba(0,0,0,.4); } #top.home #main .avia-section.cps-hero .flex_column.av_two_third { left: 0; width: 100% !important; padding: 0 20px 32px; flex-flow: column nowrap; justify-content: flex-end; align-content: stretch; align-items: stretch; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third > :is(.av-special-heading, .av_textblock_section) { flex: 0 0 auto; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .av-special-heading .av-subheading p { font-size: 12px !important; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .av-special-heading h1.av-special-heading-tag { margin-top: 8px; font-size: clamp(34px, 10.2vw, 40px); line-height: 1; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third > .av_textblock_section { margin: 16px 0 24px; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .avia-button-wrap.cps-inline { margin: 0 0 12px; } #top.home #main .avia-section.cps-hero .flex_column.av_two_third .avia-button-wrap.cps-inline:last-child { margin-bottom: 0; } } /* --- 9.7 Home: the trade ordering strip under the banner --- */ #top.home #main .avia-section.cps-hero .flex_column.cps-panel { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr) auto auto; column-gap: 12px; row-gap: 0; align-items: center; width: auto; margin: 0; padding: clamp(20px, calc(8px + 1.7vw), 32px); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); background: #fff; } @media only screen and (min-width: 1300px) { /* The strip's own padding sits outside the grid, so its text lines up with the headings below. */ #top.home #main .avia-section.cps-hero .flex_column.cps-panel { margin: 0 -33px; } } #top.home #main .avia-section.cps-hero .flex_column.cps-panel::before, #top.home #main .avia-section.cps-hero .flex_column.cps-panel::after { display: none; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > * { margin: 0 !important; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av-special-heading { grid-column: 1; grid-row: 1 / span 2; padding: 0 28px 0 0 !important; width: auto; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av-special-heading .av-subheading { margin-bottom: 4px; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av-special-heading h3.av-special-heading-tag { font-size: 24px; line-height: 1.2; letter-spacing: 0; padding: 0 !important; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > section.av_textblock_section { grid-column: 2; padding-right: 28px; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > section.av_textblock_section:nth-of-type(1) { grid-row: 1; align-self: end; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > section.av_textblock_section:nth-of-type(2) { grid-row: 2; align-self: start; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > section.av_textblock_section .avia_textblock p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cp-text); } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap { grid-row: 1 / span 2; grid-column: 3; align-self: center; display: block; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap.cps-outline { grid-column: 4; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap .avia-button { margin: 0 !important; white-space: nowrap; } @media only screen and (max-width: 989px) { #top.home #main .avia-section.cps-hero .flex_column.cps-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); row-gap: 0; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap { grid-row: 3; grid-column: 1 / -1; justify-self: start; margin-top: 16px !important; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap.cps-outline { grid-column: 1 / -1; margin-left: 100px !important; } } @media only screen and (max-width: 767px) { #top.home #main .avia-section.cps-hero .flex_column.cps-panel { display: flex; flex-direction: column; align-items: stretch; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .av-special-heading { order: 1; padding: 0 0 12px !important; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > section.av_textblock_section, #top.home #main .avia-section.cps-hero .flex_column.cps-panel > section.av_textblock_section:nth-of-type(1), #top.home #main .avia-section.cps-hero .flex_column.cps-panel > section.av_textblock_section:nth-of-type(2) { order: 2; padding: 0; align-self: stretch; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap { order: 3; margin: 16px 0 0 !important; align-self: stretch; } #top.home #main .avia-section.cps-hero .flex_column.cps-panel > .avia-button-wrap.cps-outline { margin: 12px 0 0 !important; } } /* --- 9.8 Figures on charcoal --- */ #top:not(.cptp-template-active) #main .avia-section.cps-charcoal { background-color: var(--cp-charcoal); background-image: none !important; } #top:not(.cptp-template-active) #main .avia-section.cps-charcoal :is(.av-section-color-overlay-wrap, .av-section-color-overlay) { background: none; } #top:not(.cptp-template-active) #main .avia-section.cps-charcoal .av-section-color-overlay { display: none; } #top:not(.cptp-template-active) #main .flex_column.cps-stat { padding: clamp(16px, calc(4px + 1.7vw), 28px); margin: 0; background: #444; border: 1px solid #545454; border-radius: var(--cp-radius-card) !important; } #top:not(.cptp-template-active) #main .cps-stat .avia_textblock p:first-child, #top:not(.cptp-template-active) #main .cps-stat .avia_textblock p:first-child strong { font-size: clamp(24px, calc(14px + 1.6vw), 38px); line-height: 1.05; letter-spacing: -.015em; margin: 0; } #top:not(.cptp-template-active) #main .cps-charcoal .cps-stat .avia_textblock p:not(:first-child) { margin: 8px 0 0; color: #d6dcde; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.4; } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active) #main .avia-section.cps-charcoal.cps-grid-3 .entry-content-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- 9.9 Cards --- */ #top:not(.cptp-template-active) #main .flex_column.cps-card { margin: 0; border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card) !important; overflow: hidden; display: flex; flex-direction: column; } #top:not(.cptp-template-active) #main .flex_column.cps-card:hover { border-color: var(--cp-navy); } #top:not(.cptp-template-active) #main .avia-section.cps-grid-4 .entry-content-wrapper { grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 3 * var(--cp-gap)) / 4)), 1fr)); } /* Home range cards: the picture, the name on a teal strip with its line of description, then the group and "View range". */ #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia-image-container img { aspect-ratio: 1293 / 752; object-fit: cover; object-position: center top; } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .av_textblock_section { padding: 0; flex: 1; display: flex; } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock h3 { grid-column: 1 / -1; position: relative; isolation: isolate; margin: 0; padding: 0 calc(1.4% + 12px) 0 calc(4.6% + 44px); background: var(--cp-charcoal); color: var(--cp-navy); font-size: clamp(17px, 1.55vw, 22px); line-height: 40px; min-height: 40px; letter-spacing: -.01em; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock h3::before { content: ""; position: absolute; z-index: -1; inset: 0 1.4% 0 4.6%; background: var(--cp-teal); clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%); } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock h3 + p:nth-last-of-type(3) { grid-column: 1 / -1; align-self: stretch; margin: 0; padding: 6px calc(1.4% + 12px) 10px 12px; background: var(--cp-charcoal); color: #fff; font-size: 13px; line-height: 1.35; font-style: italic; font-weight: 500; text-align: right; } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock p:nth-last-of-type(2) { grid-column: 1; margin: 0; padding: 14px 0 14px 18px; color: var(--cp-muted); font-size: clamp(13px, 1vw, 14px); line-height: 1.3; font-weight: 500; } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock p:last-of-type { grid-column: 2; display: flex; align-items: center; gap: 6px; margin: 0; padding: 14px 18px 14px 12px; color: var(--cp-navy); font-size: clamp(14px, 1.05vw, 15px); line-height: 1.3; font-weight: 600; white-space: nowrap; } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock p:last-of-type::after { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='%2300c4b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active) #main .avia-section.cps-grid-4 .entry-content-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock { grid-template-columns: minmax(0, 1fr); } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock h3 { font-size: 16px; line-height: 32px; min-height: 32px; padding-left: calc(4.6% + 34px); padding-right: calc(1.4% + 8px); } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock h3::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%); } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock h3 + p:nth-last-of-type(3) { font-size: 11.5px; padding: 5px calc(1.4% + 8px) 8px 8px; } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock p:nth-last-of-type(2) { grid-column: 1; padding: 10px 12px 0; } #top:not(.cptp-template-active) #main .cps-grid-4 .cps-card .avia_textblock p:last-of-type { grid-column: 1; padding: 4px 12px 12px; } } /* Reasons: white cards with a short teal rule. */ #top:not(.cptp-template-active) #main .avia-section.cps-grid-5 .entry-content-wrapper { grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 4 * var(--cp-gap)) / 5)), 1fr)); } #top:not(.cptp-template-active) #main .flex_column.cps-benefit { margin: 0; padding: 24px; border: 0; border-radius: var(--cp-radius-card) !important; background: #fff; } #top:not(.cptp-template-active) #main .flex_column.cps-benefit::before { content: ""; display: block; float: none; width: 24px; height: 3px; margin: 0 0 16px; border-radius: 2px; background: var(--cp-teal); visibility: visible; opacity: 1; } #top:not(.cptp-template-active) #main .cps-benefit .avia_textblock h3 { font-size: 18px; line-height: 1.3; margin: 0; } /* About (home): heading on the left, text and button on the right. */ #top:not(.cptp-template-active) #main .avia-section.cps-grid-1-2 .entry-content-wrapper { gap: 24px 64px; } #top:not(.cptp-template-active) #main .avia-section.cps-grid-1-2 .av-special-heading { margin-bottom: 0; } #top:not(.cptp-template-active) #main .cps-section .cps-prose .avia_textblock p { font-size: var(--cp-lead); line-height: 1.6; max-width: 40em; margin: 0 0 16px; } #top:not(.cptp-template-active) #main .cps-section .cps-prose .avia_textblock p:last-child { margin-bottom: 0; } #top:not(.cptp-template-active) #main .cps-section .cps-prose .avia-button-wrap { margin-top: 24px; } /* Link columns: a rule, a heading, text, and the link at the foot. */ #top:not(.cptp-template-active) #main .cps-section.cps-grid-3 .entry-content-wrapper { gap: 32px 48px; } #top:not(.cptp-template-active) #main .cps-section.cps-grid-3 .entry-content-wrapper > .flex_column.av_one_full { margin-bottom: calc(var(--cp-head-gap) - 32px); } #top:not(.cptp-template-active) #main .flex_column.cps-linkcol { display: flex; flex-direction: column; margin: 0; padding-top: 20px; border-top: 1px solid var(--cp-field); } #top:not(.cptp-template-active) #main .cps-linkcol .av_textblock_section, #top:not(.cptp-template-active) #main .cps-linkcol .avia_textblock { flex: 1; display: flex; flex-direction: column; } #top:not(.cptp-template-active) #main .cps-linkcol .avia_textblock h3 { font-size: 20px; line-height: 1.25; margin: 0; } #top:not(.cptp-template-active) #main .cps-linkcol .avia_textblock p { font-size: 16px; line-height: 1.6; margin: 10px 0 0; } #top:not(.cptp-template-active) #main .cps-linkcol .avia_textblock p:last-child:has(> a) { margin-top: auto; padding-top: 16px; } #top:not(.cptp-template-active) #main .cps-linkcol .avia_textblock a { font-size: 16px; } /* Call to action: a grey panel, text left, the two buttons right. */ #top:not(.cptp-template-active) #main .cps-cta .entry-content-wrapper { flex-wrap: wrap; gap: 24px 48px; padding: clamp(28px, calc(8px + 3.4vw), 56px); border-top: 0; border-radius: var(--cp-radius-card) !important; background: var(--cp-soft); } #top:not(.cptp-template-active) #main .cps-cta .flex_column:first-child { flex: 1 1 420px; max-width: none; } #top:not(.cptp-template-active) #main .cps-cta .flex_column:last-child { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; gap: 12px; } #top:not(.cptp-template-active) #main .cps-cta .av-special-heading { margin-bottom: 0; } #top:not(.cptp-template-active) #main .cps-cta .avia_textblock p { color: var(--cp-text); font-size: 17px; max-width: 36em; margin: 12px 0 0; } #top:not(.cptp-template-active) #main .cps-cta .flex_column:last-child .avia-button { width: auto; min-width: 0; min-height: 52px; padding: 0 24px; font-size: 17px; } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active) #main .cps-cta .flex_column:first-child { flex: 0 0 auto; } #top:not(.cptp-template-active) #main .cps-cta .flex_column:last-child { width: 100%; flex-direction: column; } #top:not(.cptp-template-active) #main .cps-cta .flex_column:last-child .avia-button { width: 100%; } } /* --- 9.10 Range pages: the product grid on grey, white swatch cards --- */ #top:not(.cptp-template-active) #main .av-layout-grid-container .avia_textblock > h2 { margin: 0; } #top:not(.cptp-template-active) #main .av-layout-grid-container .avia_textblock > h2 + p { margin: 10px 0 0; font-size: 16px; max-width: 44em; } #top:not(.cptp-template-active) #main .av-layout-grid-container .av_textblock_section { margin: 0; } #top:not(.cptp-template-active) #main .cps-filter { gap: 8px; margin: 24px 0; } #top:not(.cptp-template-active) #main .cps-filter button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--cp-line); border-radius: var(--cp-radius) !important; font-size: 15px; } #top:not(.cptp-template-active) #main .cps-filter button span { margin: 0; font-weight: 400; } #top:not(.cptp-template-active) #main .avia-product-slider-container .product-sorting { display: none; } #top:not(.cptp-template-active) #main ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - 3 * var(--cp-gap)) / 4)), 1fr)); gap: var(--cp-gap); margin: 24px 0 0; padding: 0; } #top:not(.cptp-template-active) #main .cps-filter + ul.products { margin-top: 0; } #top:not(.cptp-template-active) #main ul.products::before, #top:not(.cptp-template-active) #main ul.products::after { display: none; } #top:not(.cptp-template-active) #main ul.products li.product { width: auto !important; margin: 0 !important; float: none; clear: none; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product { height: 100%; border: 0; border-radius: var(--cp-radius-card) !important; overflow: hidden; background: #fff; transition: box-shadow .18s ease; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product { position: relative; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 1.5px solid var(--cp-navy); border-radius: var(--cp-radius-card); opacity: 0; pointer-events: none; transition: opacity .18s ease; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product:hover { box-shadow: none; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product:hover::after, #top:not(.cptp-template-active) #main ul.products li.product .inner_product:focus-within::after { opacity: 1; } #top:not(.cptp-template-active) #main ul.products li.product .thumbnail_container { background: #e9eded; } #top:not(.cptp-template-active) #main ul.products li.product .thumbnail_container img { aspect-ratio: 4 / 3; height: auto; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product_header { padding: clamp(10px, 1.1vw, 16px) clamp(12px, 1.2vw, 18px); } #top:not(.cptp-template-active) #main ul.products li.product .inner_product_header :is(h2, h3).woocommerce-loop-product__title { font-size: 16px !important; line-height: 1.3 !important; font-weight: 600 !important; margin: 0 !important; padding: 0 !important; } #top:not(.cptp-template-active) #main ul.products li.product a, #top:not(.cptp-template-active) #main ul.products li.product a:hover, #top:not(.cptp-template-active) #main ul.products li.product a:hover :is(h2, h3, div, span, p) { text-decoration: none !important; } #top:not(.cptp-template-active) #main ul.products li.product .inner_product_header :is(p, span, small, div):not(.woocommerce-loop-product__title) { font-size: 13px; line-height: 1.4; margin-top: 2px; } @media only screen and (max-width: 767px) { #top:not(.cptp-template-active) #main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- 9.11 Accordions: one bordered group, rows 60 high --- */ #top:not(.cptp-template-active) #main .togglecontainer { max-width: 960px; margin: 20px 0 0; border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); overflow: hidden; background: #fff; } #top:not(.cptp-template-active) #main .togglecontainer .single_toggle { border-bottom: 0; border-top: 1px solid var(--cp-line); margin: 0; } #top:not(.cptp-template-active) #main .togglecontainer > section:first-child .single_toggle { border-top: 0; } #top:not(.cptp-template-active) #main .togglecontainer .toggler, #top:not(.cptp-template-active) #main .togglecontainer p.toggler { display: flex; align-items: center; box-sizing: border-box; min-height: 60px; margin: 0; padding: 12px 56px 12px clamp(16px, 1.7vw, 24px); font-size: clamp(16px, 1.2vw, 17px); line-height: 1.35; background: #fff; } #top:not(.cptp-template-active) #main .togglecontainer .toggle_icon { top: 50%; right: clamp(12px, 1.4vw, 20px); margin-top: -16px; } #top:not(.cptp-template-active) #main .togglecontainer .toggle_icon { opacity: 1; } #top:not(.cptp-template-active) #main .togglecontainer .toggle_icon .vert_icon, #top:not(.cptp-template-active) #main .togglecontainer .toggle_icon .hor_icon { border-color: var(--cp-navy) !important; opacity: 1; } #top:not(.cptp-template-active) #main .togglecontainer .toggle_content { padding: 0 clamp(16px, 1.7vw, 24px) 20px; margin: 0; } #top:not(.cptp-template-active) #main .togglecontainer .toggle_content, #top:not(.cptp-template-active) #main .togglecontainer .toggle_content p { font-size: 16px; line-height: 1.6; max-width: 46em; } #top:not(.cptp-template-active) #main .av-special-heading.cps-faq-topic { margin: clamp(40px, calc(16px + 2.8vw), 64px) 0 0; } #top:not(.cptp-template-active) #main .av-special-heading.cps-faq-topic:first-child { margin-top: 0; } #top:not(.cptp-template-active) #main .av-special-heading.cps-faq-topic .av-special-heading-tag { font-size: clamp(24px, calc(21px + .5vw), 28px); line-height: 1.15; letter-spacing: -.01em; } /* --- 9.12 By use: the range cards --- */ #top:not(.cptp-template-active):not(.home) #main #ourproducts .template-page.content { padding-top: var(--cp-section-pad); padding-bottom: var(--cp-section-pad); } #top:not(.cptp-template-active):not(.home) #main #ourproducts .entry-content-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 2 * var(--cp-gap)) / 3)), 1fr)); gap: var(--cp-gap); } #top:not(.cptp-template-active):not(.home) #main #ourproducts .entry-content-wrapper::before, #top:not(.cptp-template-active):not(.home) #main #ourproducts .entry-content-wrapper::after { display: none; } #top:not(.cptp-template-active):not(.home) #main #ourproducts .entry-content-wrapper > .flex_column { width: auto; margin: 0; float: none; clear: none; } #top:not(.cptp-template-active) #main .flex_column.collection-tile, #top:not(.cptp-template-active) #main .flex_column.company-tile { display: flex; flex-direction: column; min-height: 0 !important; border: 0; border-radius: var(--cp-radius-card) !important; overflow: hidden; filter: none; } #top:not(.cptp-template-active) #main .collection-tile .avia-image-container, #top:not(.cptp-template-active) #main .collection-tile .avia-image-container :is(.avia-image-container-inner, .avia-image-overlay-wrap, a) { display: block; width: 100%; margin: 0; } #top:not(.cptp-template-active) #main .collection-tile .avia-image-container img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; } #top:not(.cptp-template-active) #main .collection-tile .av_textblock_section, #top:not(.cptp-template-active) #main .company-tile .av_textblock_section { padding: 24px 24px 0; } #top:not(.cptp-template-active) #main .collection-tile .avia_textblock h3 { font-size: 22px; line-height: 1.2; margin: 0; } #top:not(.cptp-template-active) #main .collection-tile .avia_textblock p { font-size: 16px; line-height: 1.6; margin: 12px 0 0; } #top:not(.cptp-template-active) #main .collection-tile .avia-button-wrap, #top:not(.cptp-template-active) #main .company-tile .avia-button-wrap { margin-top: auto; padding: 24px; text-align: left; } #top:not(.cptp-template-active) #main .collection-tile .avia-button { padding: 0 20px; } /* The first tile holds the section's label and heading: it becomes the heading above the cards. */ #top:not(.cptp-template-active) #main #ourproducts .flex_column.collection-tile:has(h2):not(:has(.avia-image-container)) { grid-column: 1 / -1; background: transparent !important; border-radius: 0 !important; overflow: visible; margin-bottom: calc(var(--cp-head-gap) - var(--cp-gap)); } #top:not(.cptp-template-active) #main #ourproducts .flex_column.collection-tile:has(h2):not(:has(.avia-image-container)) .av_textblock_section { padding: 0; } #top:not(.cptp-template-active) #main #ourproducts .flex_column.collection-tile:has(h2):not(:has(.avia-image-container)) h2 { margin: 0; max-width: 24em; } #top:not(.cptp-template-active) #main #ourproducts .flex_column.collection-tile:has(h2):not(:has(.avia-image-container)) h2 br { display: none; } /* --- 9.13 Rows with a picture beside text (About and the pages like it) --- */ #top:not(.cptp-template-active) #main .av-layout-grid-container > .flex_cell.avia-full-stretch:not(:has(*:not(.flex_cell_inner))) { flex: 1 1 380px; aspect-ratio: 4 / 5; min-height: 0 !important; border-radius: var(--cp-radius-card); background-size: cover !important; background-position: center !important; background-color: var(--cp-line); } #top:not(.cptp-template-active) #main .av-layout-grid-container > .flex_cell.avia-full-stretch:not(:has(*:not(.flex_cell_inner))) + .flex_cell, #top:not(.cptp-template-active) #main .av-layout-grid-container > .flex_cell:has(+ .flex_cell.avia-full-stretch) { flex: 1.2 1 420px; } #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell .flex_column { padding: 0 !important; margin: 0; } #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell .avia_textblock > p { font-size: 17px; line-height: 1.65; max-width: 38em; margin: 16px 0 0; } #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell .avia_textblock > p.cps-label { margin: 0 0 8px; } /* --- 9.14 Contact: the form in a white panel, the map beside it --- */ #top:not(.cptp-template-active) #main .av-layout-grid-container:has(form.forminator-custom-form) { gap: 32px; } #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap > .flex_cell.flex_cell.flex_cell:has(form.forminator-custom-form) { flex: 1.3 1 480px; padding: clamp(20px, calc(8px + 2.3vw), 40px) !important; border-radius: var(--cp-radius-card); background: #fff; } #top:not(.cptp-template-active) #main .av-layout-grid-container > .flex_cell:has(form.forminator-custom-form) + .flex_cell, #top:not(.cptp-template-active) #main .av-layout-grid-container > .flex_cell:has(+ .flex_cell form.forminator-custom-form) { flex: 1 1 360px; } #top:not(.cptp-template-active) #main .av-layout-grid-container .flex_cell:has(form.forminator-custom-form) .avia_textblock > h2 + p { font-size: 16px; margin: 12px 0 0; } #top:not(.cptp-template-active) #main form.forminator-custom-form { margin: 28px 0 0; } #top:not(.cptp-template-active) #main .forminator-ui .forminator-label { display: block; height: auto; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--cp-navy); margin: 0 0 6px; padding: 0; position: static; transform: none; } #top:not(.cptp-template-active) #main .forminator-ui .forminator-label .forminator-required { color: #b3261e; font-size: 14px; line-height: 20px; } #top:not(.cptp-template-active) #main .forminator-ui .forminator-description, #top:not(.cptp-template-active) #main .forminator-ui .forminator-description span { display: block; margin: 6px 0 0; text-align: right; font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--cp-muted) !important; } #top:not(.cptp-template-active) #main .forminator-ui :is(input.forminator-input, textarea.forminator-textarea, select, .select2-selection) { min-height: 48px; border: 1px solid var(--cp-field) !important; border-radius: var(--cp-radius) !important; background: #fff !important; } #top:not(.cptp-template-active) #main .forminator-ui .select2-selection { display: flex; align-items: center; height: 48px; padding: 0 14px; } #top:not(.cptp-template-active) #main .forminator-ui .select2-selection .select2-selection__rendered { flex: 1; padding: 0; font-size: 16px; line-height: 1.3; color: var(--cp-text); } #top:not(.cptp-template-active) #main .forminator-ui textarea.forminator-textarea { min-height: 128px; } #top:not(.cptp-template-active) #main .forminator-ui :is(input.forminator-input, textarea.forminator-textarea):focus { border-color: var(--cp-navy) !important; box-shadow: 0 0 0 2px rgba(0,196,180,.35); } #top:not(.cptp-template-active) #main .forminator-ui .forminator-button-submit { min-height: 52px; padding: 0 28px; font-size: 17px; } @media only screen and (min-width: 600px) { /* Two fields a row; the street address, the message and the button take the whole row. */ #top:not(.cptp-template-active) #main form.forminator-custom-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } #top:not(.cptp-template-active) #main form.forminator-custom-form .forminator-row { margin: 0 !important; min-width: 0; } #top:not(.cptp-template-active) #main form.forminator-custom-form .forminator-row > .forminator-col { padding: 0 !important; margin: 0 !important; } #top:not(.cptp-template-active) #main form.forminator-custom-form .forminator-field { margin: 0; } #top:not(.cptp-template-active) #main form.forminator-custom-form > .forminator-row:has(> .forminator-field-address), #top:not(.cptp-template-active) #main form.forminator-custom-form .forminator-field-address { display: contents; } #top:not(.cptp-template-active) #main form.forminator-custom-form > :not(.forminator-row), #top:not(.cptp-template-active) #main form.forminator-custom-form > .forminator-row:has(textarea, .forminator-button-submit, .forminator-field-captcha, .forminator-field-html, .forminator-field-consent), #top:not(.cptp-template-active) #main form.forminator-custom-form .forminator-field-address > .forminator-row:has([id$="street_address"]) { grid-column: 1 / -1; } } #top:not(.cptp-template-active) #main .cps-find-us h3 { font-size: 22px; line-height: 1.25; margin: 0 0 16px; } #top:not(.cptp-template-active) #main .av_gmaps_sc_main_wrap, #top:not(.cptp-template-active) #main .avia-google-map-container { border-radius: var(--cp-radius-card); overflow: hidden; } #top:not(.cptp-template-active) #main .av-layout-grid-container .avia-google-map-container { height: auto !important; aspect-ratio: 1 / 1; } /* --- 9.15 Phone and tablet header: a teal bar 64 high, and the menu as a white panel under it --- */ @media only screen and (max-width: 989px) { .responsive #top #wrap_all #header { position: relative !important; top: 0 !important; height: 64px !important; min-height: 0; margin: 0 !important; background: var(--cp-teal); } .responsive #top #header .header_bg { background: var(--cp-teal) !important; opacity: 1 !important; } .responsive #top #header #header_main { border: 0; } .responsive #top #header #header_main, .responsive #top #header #header_main > .container, .responsive #top #wrap_all #header .av-logo-container, .responsive #top #header .inner-container { height: 64px !important; min-height: 0; line-height: 64px !important; } .responsive #top #wrap_all #header #header_main > .container { width: 100% !important; max-width: none !important; padding: 0 6px 0 20px !important; } .responsive #top #header .inner-container { padding: 0 !important; } .responsive #top #header .logo { position: static; float: none; display: flex; align-items: center; width: auto; height: 64px !important; margin: 0; padding: 0; transform: none !important; } .responsive #top #header .logo a { display: flex; align-items: center; height: 64px; } .responsive #top #header .logo :is(img, svg) { position: static; width: auto !important; height: 38px !important; max-height: 38px; } /* Pages with the solid desktop header (My account, Updates, search) draw a dark logo as a background and hide the white one. On the teal bar the dark one half disappears, so the bar always shows the white logo. */ .responsive #top #header .inner-container { background-image: none !important; } .responsive #top #header .logo img { display: block !important; opacity: 1 !important; visibility: visible !important; } .responsive #top #header nav.main_menu { position: absolute; top: 0; right: 0; height: 64px; } .responsive #top #header .av-main-nav-wrap, .responsive #top #header #avia-menu { height: 64px; } .responsive #top #header .av-burger-menu-main, .responsive #top #header .av-burger-menu-main > a { display: flex; align-items: center; justify-content: center; width: 52px; height: 64px !important; line-height: 64px !important; padding: 0 !important; margin: 0; } .responsive #top #header .av-burger-menu-main .av-hamburger { padding: 0; } .responsive #top #header .av-hamburger-inner, .responsive #top #header .av-hamburger-inner::before, .responsive #top #header .av-hamburger-inner::after, html.av-burger-overlay-active #top #header .av-hamburger-inner::before, html.av-burger-overlay-active #top #header .av-hamburger-inner::after { background-color: #fff !important; } .responsive #top #main { padding-top: 0 !important; } html.html_av-overlay-side #top .av-burger-overlay { top: 64px; height: calc(100% - 64px); } html.html_av-overlay-side #top .av-burger-overlay .av-burger-overlay-bg { display: none; } html.html_av-overlay-side #top .av-burger-overlay .av-burger-overlay-scroll { width: 100%; max-width: none; right: 0; background: #fff !important; } html.html_av-overlay-side #top .av-burger-overlay .av-burger-overlay-inner { width: 100%; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul { padding: 0 0 40px !important; width: 100%; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li { border-bottom: 0; border-top: 0; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li { border-bottom: 1px solid var(--cp-line); } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 20px; box-sizing: border-box; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li > a, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li > a .avia-menu-text { font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--cp-navy) !important; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li.av-show-submenu > a, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li.av-show-submenu > a .avia-menu-text, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li.current-menu-item > a .avia-menu-text { color: var(--cp-teal-text) !important; } /* The arrow: right when closed, down when open. */ html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .av-submenu-indicator { position: static; flex: none; width: 20px; height: 20px; margin: 0 0 0 12px; padding: 0; border: 0; opacity: 1; transform: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 4.5l5.5 5.5-5.5 5.5' fill='none' stroke='%23021d49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform .18s ease; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .av-submenu-indicator::before, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .av-submenu-indicator::after { display: none; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li.av-show-submenu > a > .av-submenu-indicator { transform: rotate(90deg); } /* Children sit on soft grey. */ html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li > ul.sub-menu { margin: 0; padding: 0; background: var(--cp-soft); } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li > ul.sub-menu:first-of-type { padding-top: 4px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul > li > ul.sub-menu:last-of-type { padding-bottom: 8px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 20px 8px 32px; box-sizing: border-box; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a .avia-menu-text { font-size: 16px; line-height: 1.3; font-weight: 600; color: var(--cp-navy) !important; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a .cps-menu-title { font-size: 16px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li a .cps-menu-desc { font-size: 14px; line-height: 1.4; font-weight: 400; margin-top: 2px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu .sub-menu { padding: 0 0 4px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu .sub-menu li a { min-height: 40px; padding: 6px 20px 6px 48px; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu .sub-menu li a, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu .sub-menu li a .avia-menu-text { font-size: 16px; font-weight: 400; color: var(--cp-text) !important; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul .sub-menu li.current-menu-item > a .avia-menu-text { color: var(--cp-teal-text) !important; font-weight: 600; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a:hover, html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a:hover .avia-menu-text { color: var(--cp-teal-text) !important; } /* The Login row: the same size as the rest. */ html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a i.wc-account { display: inline-flex; align-items: center; gap: 8px; font-style: normal; } html.html_av-overlay-side #top .av-burger-overlay #av-burger-menu-ul li a i.wc-account::after { font-family: "PP Neue Montreal", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--cp-navy); } } /* --- 9.16 Product pages: the same corners, room and grounds --- The layout, the content and the order form do not change. These rules sit on top of the product template's own stylesheet. Sections after "at a glance" alternate white and grey in whatever order the settings screen puts them. */ #top.cptp-template-active .cp-new-product .cptp-range-banner:not(.cptp-range-banner--swatch) { height: clamp(380px, 27vw, 420px); } /* Design drew 360; Jacques asked for the earlier height back (4 Oct) */ @media only screen and (max-width: 989px) { #top.cptp-template-active .cp-new-product .cptp-range-banner:not(.cptp-range-banner--swatch) { height: 280px; } } @media only screen and (max-width: 767px) { #top.cptp-template-active .cp-new-product .cptp-range-banner:not(.cptp-range-banner--swatch) { height: 200px; } } #top.cptp-template-active .cp-new-product .cptp-shell { width: min(1180px, calc(100% - 2 * var(--cp-gutter))); padding: clamp(20px, calc(8px + 1.1vw), 24px) 0 var(--cp-section-pad); } #top.cptp-template-active .cp-new-product .cptp-breadcrumbs { margin: 0 0 var(--cp-head-gap); font-size: 14px; line-height: 1.4; color: var(--cp-muted); } #top.cptp-template-active .cp-new-product .cptp-breadcrumbs a { color: var(--cp-navy) !important; font-weight: 500; text-decoration: none; } #top.cptp-template-active .cp-new-product .cptp-breadcrumbs a:hover { color: var(--cp-teal-text) !important; } #top.cptp-template-active .cp-new-product .cptp-breadcrumbs__sep { color: #9aa6ac; } /* Top of the page */ #top.cptp-template-active .cp-new-product .cptp-hero { column-gap: 56px; padding-bottom: var(--cp-section-pad); } @media only screen and (min-width: 901px) { /* The ordering panel sits 32px under the buttons, not half way down the swatch. */ #top.cptp-template-active .cp-new-product .cptp-hero { grid-template-rows: auto 1fr; } } #top.cptp-template-active .cp-new-product .cptp-product-image { border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); overflow: hidden; } #top.cptp-template-active .cp-new-product .cptp-gallery-thumb { border-radius: var(--cp-radius); border: 1px solid var(--cp-line); overflow: hidden; } #top.cptp-template-active .cp-new-product .cptp-gallery-thumb.is-active { border: 2px solid var(--cp-navy) !important; box-shadow: none; outline: 0; } #top.cptp-template-active .cp-new-product .cptp-image-download { color: var(--cp-navy) !important; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cp-teal); text-decoration-thickness: 2px; text-underline-offset: 4px; } #top.cptp-template-active .cp-new-product .cptp-eyebrow, #top.cptp-template-active .cp-new-product .cptp-best-for__label, #top.cptp-template-active .cp-new-product .cptp-card__eyebrow { color: var(--cp-muted); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; line-height: 1.3; font-weight: 600; } #top.cptp-template-active .cp-new-product .cptp-card__eyebrow { font-size: 12px; letter-spacing: .12em; } #top.cptp-template-active .cp-new-product .cptp-glance .cptp-eyebrow { color: #fff; opacity: 1; } #top.cptp-template-active .cp-new-product h1 { font-size: var(--cp-h1); line-height: 1; letter-spacing: -.025em; } #top.cptp-template-active .cp-new-product h2 { font-size: var(--cp-h2); line-height: 1.1; letter-spacing: -.015em; } #top.cptp-template-active .cp-new-product .cptp-sku { margin-top: 10px; font-size: 15px; color: var(--cp-muted); } #top.cptp-template-active .cp-new-product .cptp-best-for__tags { gap: 8px; } #top.cptp-template-active .cp-new-product .cptp-best-for__tag { min-height: 36px; padding: 0 14px; border: 1px solid var(--cp-line); border-radius: var(--cp-radius); background: var(--cp-soft); color: var(--cp-navy) !important; font-size: 14px; font-weight: 600; } #top.cptp-template-active .cp-new-product a.cptp-best-for__tag:hover, #top.cptp-template-active .cp-new-product a.cptp-best-for__tag:focus-visible { background: var(--cp-soft); border-color: var(--cp-navy); color: var(--cp-navy) !important; transform: none; } #top.cptp-template-active .cp-new-product .cptp-intro, #top.cptp-template-active .cp-new-product .cptp-intro p { font-size: var(--cp-lead); line-height: 1.6; } #top.cptp-template-active .cp-new-product .cptp-hero__actions, #top.cptp-template-active .cp-new-product .cptp-final-cta__actions, #top.cptp-template-active .cp-new-product .cptp-guest-order__actions { gap: 12px; } #top.cptp-template-active .cptp-btn { box-sizing: border-box; min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--cp-radius); font-size: 16px; line-height: 1.2; font-weight: 600; opacity: 1; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } #top.cptp-template-active .cptp-btn--primary { background: var(--cp-teal); border-color: var(--cp-teal); color: var(--cp-navy) !important; } #top.cptp-template-active .cptp-btn--primary:hover { background: var(--cp-teal-hover); border-color: var(--cp-teal-hover); color: var(--cp-navy) !important; opacity: 1; } #top.cptp-template-active .cptp-btn--secondary { background: #fff; border-color: var(--cp-navy); color: var(--cp-navy) !important; } #top.cptp-template-active .cptp-btn--secondary:hover { background: var(--cp-navy); border-color: var(--cp-navy); color: #fff !important; opacity: 1; } #top.cptp-template-active .cp-new-product .cptp-trade-note { margin-top: 14px; font-size: 14px; } #top.cptp-template-active .cp-new-product .cptp-hero-order { margin-top: 32px !important; } #top.cptp-template-active .cp-new-product .cptp-order-form form.cart, #top.cptp-template-active .cp-new-product .cptp-guest-order, #top.cptp-template-active .cp-new-product .cptp-hero-order .cptp-guest-order { padding: clamp(20px, calc(8px + 1.7vw), 28px) !important; border-radius: var(--cp-radius-card); } #top.cptp-template-active .cp-new-product .cptp-guest-order__title { font-size: 20px; line-height: 1.25; } #top.cptp-template-active .cp-new-product .cptp-guest-order p { font-size: 16px; line-height: 1.55; } #top.cptp-template-active .cp-new-product .cptp-guest-order__actions .cptp-btn { flex: 1 0 auto; padding: 0 20px; } #top.cptp-template-active .cp-new-product .cptp-order-form :is(select, input.qty, input[type="number"], button.button, a.button) { border-radius: var(--cp-radius); } /* At a glance: charcoal, the table in a white frame, the four cards as on the home page */ #top.cptp-template-active .cp-new-product .cptp-glance { padding: var(--cp-section-pad) max(var(--cp-gutter), calc((100vw - 1180px) / 2)); background-color: var(--cp-charcoal); background-image: none !important; } #top.cptp-template-active .cp-new-product .cptp-glance__heading { margin-bottom: var(--cp-head-gap); } #top.cptp-template-active .cp-new-product .cptp-glance__specs .cptp-matrix-wrap { border: 0; border-radius: var(--cp-radius-card) !important; overflow: hidden; overflow-x: auto; background: #fff; box-shadow: none; } #top.cptp-template-active .cp-new-product .cptp-glance__benefits { gap: var(--cp-gap); margin-top: var(--cp-gap); } #top.cptp-template-active .cp-new-product .cptp-glance-benefit { padding: 24px; border: 1px solid #545454; border-radius: var(--cp-radius-card); background: #444; backdrop-filter: none; } #top.cptp-template-active .cp-new-product .cptp-glance-benefit p { color: #d6dcde !important; } /* Sections: room from the scale, no rule lines, white and grey in turn */ #top.cptp-template-active .cp-new-product .cptp-section { border-top: 0; padding: var(--cp-section-pad) 0; } #top.cptp-template-active .cp-new-product .cptp-section-heading { margin-bottom: var(--cp-head-gap); } #top.cptp-template-active .cp-new-product .cptp-section-heading .cptp-eyebrow { display: block; margin-bottom: 8px; } #top.cptp-template-active .cp-new-product .cptp-shell > section.cptp-section:nth-of-type(even) { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(var(--cp-gutter), calc((100vw - 1180px) / 2)); padding-right: max(var(--cp-gutter), calc((100vw - 1180px) / 2)); background: var(--cp-soft); } #top.cptp-template-active .cp-new-product .cptp-copy-section .cptp-prose, #top.cptp-template-active .cp-new-product .cptp-copy-section .cptp-prose p { font-size: 17px; line-height: 1.65; max-width: 760px; } /* Feature tiles: white, rounded, no teal line */ #top.cptp-template-active .cp-new-product .cptp-product-features-section { border-top: 0; } #top.cptp-template-active .cp-new-product .cptp-product-feature-grid { gap: 16px; } #top.cptp-template-active .cp-new-product .cptp-product-feature, #top.cptp-template-active .cp-new-product .cptp-benefit { padding: 20px; border: 0; border-radius: var(--cp-radius-card); background: #fff; box-shadow: none; } #top.cptp-template-active .cp-new-product .cptp-shell > section.cptp-section:nth-of-type(odd) :is(.cptp-product-feature, .cptp-benefit) { border: 1px solid var(--cp-line); } #top.cptp-template-active .cp-new-product .cptp-product-feature:hover { transform: none; box-shadow: none; } #top.cptp-template-active .cp-new-product .cptp-product-feature h3 { font-size: 16px !important; line-height: 1.3 !important; } #top.cptp-template-active .cp-new-product .cptp-product-feature p { font-size: 14px; line-height: 1.45; color: var(--cp-muted); } /* Accordions: one bordered group, rows 60 high */ #top.cptp-template-active .cp-new-product .cptp-accordions { display: block; border: 1px solid var(--cp-line) !important; border-radius: var(--cp-radius-card); overflow: hidden; background: #fff; } #top.cptp-template-active .cp-new-product .cptp-faq-section .cptp-accordions { max-width: none; } #top.cptp-template-active .cp-new-product .cptp-accordions details { border: 0 !important; border-top: 1px solid var(--cp-line) !important; border-radius: 0; box-shadow: none; background: #fff; } #top.cptp-template-active .cp-new-product .cptp-accordions details:first-child { border-top: 0 !important; } #top.cptp-template-active .cp-new-product .cptp-accordions summary, #top.cptp-template-active .cp-new-product .cptp-accordions summary:hover { display: flex; align-items: center; box-sizing: border-box; min-height: 60px; padding: 12px 56px 12px clamp(16px, 1.7vw, 24px) !important; background: #fff; color: var(--cp-navy); font-size: clamp(16px, 1.2vw, 17px); line-height: 1.35; font-weight: 600; } #top.cptp-template-active .cp-new-product .cptp-accordions details[open] summary { background: #fff; border-bottom: 0; } #top.cptp-template-active .cp-new-product .cptp-accordions summary::after { top: 50%; right: clamp(16px, 1.7vw, 24px); transform: translateY(-50%); color: var(--cp-navy); } #top.cptp-template-active .cp-new-product .cptp-accordion-content { padding: 0 clamp(16px, 1.7vw, 24px) 22px !important; } /* Cards */ #top.cptp-template-active .cp-new-product .cptp-cards { gap: var(--cp-gap); } #top.cptp-template-active .cp-new-product .cptp-card { display: flex; flex-direction: column; border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); overflow: hidden; } #top.cptp-template-active .cp-new-product .cptp-card:hover { border-color: var(--cp-navy); transform: none; box-shadow: none; } #top.cptp-template-active .cp-new-product .cptp-shell > section.cptp-section:nth-of-type(even) .cptp-card { border-color: transparent; } #top.cptp-template-active .cp-new-product .cptp-shell > section.cptp-section:nth-of-type(even) .cptp-card:hover { border-color: var(--cp-navy); } #top.cptp-template-active .cp-new-product .cptp-card__link { color: var(--cp-navy); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cp-teal); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Closing panel: grey, rounded, no teal line */ #top.cptp-template-active .cp-new-product .cptp-final-cta { flex-wrap: wrap; gap: 24px 48px; margin-top: var(--cp-section-pad); padding: clamp(28px, calc(8px + 3.4vw), 56px); border-top: 0; border-radius: var(--cp-radius-card); } #top.cptp-template-active .cp-new-product .cptp-final-cta > div:first-child { flex: 1 1 420px; } #top.cptp-template-active .cp-new-product .cptp-final-cta h2 { margin: 8px 0 0; } #top.cptp-template-active .cp-new-product .cptp-final-cta__text { margin-top: 12px; max-width: 36em; color: var(--cp-text); font-size: 17px; } #top.cptp-template-active .cp-new-product .cptp-final-cta__actions .cptp-btn { width: auto; min-width: 0; min-height: 52px; padding: 0 24px; font-size: 17px; } #top.cptp-template-active .cptp-enquiry-modal__dialog, #top.cptp-template-active .cptp-cart-modal__dialog { border-radius: var(--cp-radius-card); } #top.cptp-template-active :is(.cptp-enquiry-form, .cptp-cart-modal) :is(input, textarea, select) { border-radius: var(--cp-radius); } @media only screen and (max-width: 767px) { /* Phone: the name, buttons and trade panel first, then the swatch. */ #top.cptp-template-active .cp-new-product .cptp-hero { grid-template-areas: "content" "order" "media"; row-gap: 24px; } #top.cptp-template-active .cp-new-product .cptp-hero-order { margin-top: 0 !important; } #top.cptp-template-active .cptp-btn { width: 100%; } #top.cptp-template-active .cp-new-product .cptp-product-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #top.cptp-template-active .cp-new-product .cptp-glance__benefits { grid-template-columns: minmax(0, 1fr); } #top.cptp-template-active .cp-new-product .cptp-final-cta__actions { width: 100%; } #top.cptp-template-active .cp-new-product .cptp-final-cta__actions .cptp-btn { width: 100%; } } /* --- 9.17 Rows: narrower cells keep their share; a cell with a pattern strip keeps room for it --- */ #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap > .flex_cell.flex_cell.flex_cell.av_one_third { flex-basis: 280px; } #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap > .flex_cell.flex_cell.flex_cell.av_one_fourth { flex-basis: 220px; } #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap > .flex_cell.flex_cell.flex_cell.av_one_fifth { flex-basis: 180px; } #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap > .flex_cell.flex_cell.flex_cell.cps-cell-bg { padding-bottom: 84px !important; background-position: center bottom; } /* In a row with a pattern cell the cells are the same height, and a cell set to "middle" centres its content. */ #top:not(.cptp-template-active) #main .av-layout-grid-container:has(> .cps-cell-bg) { align-items: stretch; } #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap:has(> .cps-cell-bg) > .flex_cell.flex_cell.flex_cell.content-align-middle { display: flex; flex-direction: column; justify-content: center; } /* --- 9.18 Edging and accessory product pages (the older product layout) take the product page's look --- */ #top.single-product:not(.cptp-template-active) #main .product-hero-banner { position: relative; height: clamp(380px, 27vw, 420px); overflow: hidden; background: var(--cp-charcoal); } #top.single-product:not(.cptp-template-active) #main .product-hero-banner img { display: block; width: 100%; height: 100%; object-fit: cover; } #top.single-product:not(.cptp-template-active) #main .product-hero-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.36) 0%, rgba(0,0,0,.08) 58%, rgba(0,0,0,.02) 100%); pointer-events: none; } @media only screen and (max-width: 989px) { #top.single-product:not(.cptp-template-active) #main .product-hero-banner { height: 280px; } } @media only screen and (max-width: 767px) { #top.single-product:not(.cptp-template-active) #main .product-hero-banner { height: 200px; } } #top.single-product:not(.cptp-template-active) #main .compac-product-breadcrumb-wrap { padding: clamp(20px, calc(8px + 1.1vw), 24px) var(--cp-gutter) 0; background: #fff; border: 0; } #top.single-product:not(.cptp-template-active) #main .compac-product-breadcrumb-wrap .container { width: 100%; max-width: 1180px; padding: 0; margin: 0 auto; } #top.single-product:not(.cptp-template-active) #main .compac-product-breadcrumb, #top.single-product:not(.cptp-template-active) #main .compac-product-breadcrumb .trail-end { position: static; margin: 0; padding: 0; font-size: 14px; line-height: 1.4; color: var(--cp-muted) !important; font-weight: 400; } #top.single-product:not(.cptp-template-active) #main .compac-product-breadcrumb a { font-size: 14px; color: var(--cp-navy) !important; font-weight: 500; text-decoration: none; } #top.single-product:not(.cptp-template-active) #main .compac-product-breadcrumb a:hover { color: var(--cp-teal-text) !important; } #top.single-product:not(.cptp-template-active) #main .compac-product-breadcrumb .breadcrumb-separator { font-size: 0 !important; padding: 0 2px; } #top.single-product:not(.cptp-template-active) #main .compac-product-breadcrumb .breadcrumb-separator::before { content: "/"; font-size: 14px !important; color: #9aa6ac; } #top.single-product:not(.cptp-template-active) #main .container_wrap.template-shop { border: 0; } #top.single-product:not(.cptp-template-active) #main .container_wrap.template-shop > .container { width: 100%; max-width: calc(1180px + 2 * var(--cp-gutter)); padding: var(--cp-head-gap) var(--cp-gutter) var(--cp-section-pad); } #top.single-product:not(.cptp-template-active) #main .single-product-main-image { padding: 0; margin-right: 56px; border: 0; } #top.single-product:not(.cptp-template-active) #main .single-product-main-image .woocommerce-product-gallery__wrapper > a { display: block; border: 1px solid var(--cp-line); border-radius: var(--cp-radius-card); overflow: hidden; } #top.single-product:not(.cptp-template-active) #main .single-product-main-image img { display: block; width: 100%; border-radius: 0; } #top.single-product:not(.cptp-template-active) #main .product-image-disclaimer { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--cp-muted); } #top.single-product:not(.cptp-template-active) #main h1.product_title { margin: 0; color: var(--cp-navy); font-size: clamp(30px, calc(18px + 1.9vw), 44px); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; } #top.single-product:not(.cptp-template-active) #main .product_meta { margin-top: 12px; border: 0; padding: 0; } #top.single-product:not(.cptp-template-active) #main .product_meta, #top.single-product:not(.cptp-template-active) #main .product_meta span { font-size: 15px; line-height: 1.6; color: var(--cp-muted); } #top.single-product:not(.cptp-template-active) #main .product_meta a { color: var(--cp-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cp-teal); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Related products: a grey section with the heading on the left, cards as on the range pages. */ #top.single-product:not(.cptp-template-active) #main .avia-section:has(section.related.products) { background: var(--cp-soft); border: 0; } #top.single-product:not(.cptp-template-active) #main .avia-section:has(section.related.products) > .container { width: 100%; max-width: calc(1180px + 2 * var(--cp-gutter)); padding: var(--cp-section-pad) var(--cp-gutter); } #top.single-product:not(.cptp-template-active) #main .avia-section:has(section.related.products) .template-page { padding: 0; } #top.single-product:not(.cptp-template-active) #main section.related.products { background: transparent; margin: 0; padding: 0; } #top.single-product:not(.cptp-template-active) #main section.related.products > h2 { width: auto; margin: 0 0 var(--cp-head-gap); padding: 0; text-align: left; color: var(--cp-navy); font-size: var(--cp-h2) !important; line-height: 1.1; letter-spacing: -.015em; } #top.single-product:not(.cptp-template-active) #main section.related.products ul.products { margin-top: 0; } #top.single-product:not(.cptp-template-active) #main section.related.products li.product .inner_product { margin: 0; } @media only screen and (max-width: 767px) { /* The old layout hid the product's picture on phones. It shows, under the name. */ #top.single-product:not(.cptp-template-active) #main div.product { display: flex; flex-direction: column; } #top.single-product:not(.cptp-template-active) #main .single-product-main-image { display: block !important; order: 2; width: 100%; max-width: 280px; margin: 24px 0 0; float: none; } #top.single-product:not(.cptp-template-active) #main .single-product-summary { order: 1; width: 100%; float: none; } } /* --- 9.19 Project pages: the heading is a heading, not a teal bar --- */ #top.single-post:not(.cptp-template-active) #main .entry-content-wrapper > .flex_column.av_one_full:has(> .av_textblock_section :is(h1, h2)):not(:has(img, p, ul)) { background: transparent !important; padding: 0 !important; margin-bottom: var(--cp-head-gap); } #top.single-post:not(.cptp-template-active) #main .entry-content-wrapper > .flex_column.av_one_full:has(> .av_textblock_section :is(h1, h2)):not(:has(img, p, ul)) :is(h1, h2) { margin: 0; color: var(--cp-navy) !important; } #top.single-post:not(.cptp-template-active) #main .avia-image-container img, #top.single-post:not(.cptp-template-active) #main .av-masonry-entry { border-radius: var(--cp-radius-card); } /* --- 9.20 Phones: the page top fills the width --- On the policy pages, Sustainability and the project pages the page top's inner wrapper was floated right at its content's width, so on a phone the banner and heading sat squeezed against the right edge. */ #top:not(.cptp-template-active):not(.home) #main #homeintro :is(.container, .template-page, .post-entry, .entry-content-wrapper) { float: none; width: 100% !important; max-width: none; margin-left: 0; margin-right: 0; } @media only screen and (max-width: 767px) { /* On a phone the pattern strip is drawn taller, so the cell keeps more room under its text. */ #top:not(.cptp-template-active) #main .av-layout-grid-container.container_wrap > .flex_cell.flex_cell.flex_cell.cps-cell-bg { padding-bottom: 128px !important; } }