/* * Hunter Glass - design fixes from Gary's "Hunterglass:" emails (27 Oct 2026). * Loaded after theme-style.css. Values are taken from the proof (hunterglass-final/index.html, SiteHeader, SiteFooter). */ /* 1. Home slider controls: one row at top right - round prev, dots (active = 26px pill), round next. */ #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a, #top #wrap_all .hg-hero__slider .avia-slideshow-dots { top: 28px; bottom: auto; transform: none; } #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a { width: 30px; height: 30px; line-height: 30px; margin: 0; padding: 0; left: auto; border-radius: 50%; background: rgba(255,255,255,0.35); color: #fff; opacity: 1; display: flex; align-items: center; justify-content: center; transition: background 220ms ease, color 220ms ease; } #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a:hover { background: rgba(255,255,255,0.92); color: #16296b; } #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a svg { width: 8px; height: 15px; margin: 0; display: block; } #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a::before { display: none; } #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a svg path { fill: currentColor; } /* 7 dots = 6 x 10px + 26px + 6 x 8px gaps = 134px wide */ #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a.next-slide { right: max(4vw, 20px); } #top #wrap_all .hg-hero__slider .avia-slideshow-dots { right: calc(max(4vw, 20px) + 38px); left: auto; width: auto; height: 30px; display: flex; gap: 8px; align-items: center; } #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a.prev-slide { right: calc(max(4vw, 20px) + 38px + 134px + 8px); } #top #wrap_all .hg-hero__slider .avia-slideshow-dots a { width: 10px; height: 10px; margin: 0; padding: 0; border: 0; border-radius: 6px; position: static; top: auto; background: rgba(255,255,255,0.45); opacity: 1; transition: width 260ms ease, background 260ms ease; } #top #wrap_all .hg-hero__slider .avia-slideshow-dots a.active { width: 26px; background: #fff; } @media (max-width: 899px) { #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a, #top #wrap_all .hg-hero__slider .avia-slideshow-dots { top: 14px; } #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a.next-slide { right: 18px; } #top #wrap_all .hg-hero__slider .avia-slideshow-dots { right: 56px; } #top #wrap_all .hg-hero__slider .avia-slideshow-arrows a.prev-slide { right: 198px; } } /* 2. Slider text: keep it inside the site's max content width (the 1350px column the header and stat cards use) instead of hugging the left edge on wide screens. */ #top #wrap_all .hg-hero--home > .container { left: max(20px, 5vw, calc((100% - 1350px) / 2)); width: min(700px, 58vw); } /* Stacked tablet/mobile hero (<=1179px): text left-aligned to the content width like the sections below (Gary 28 Oct) - Enfold's content container is 90vw centred; the 58vw box above was centring the copy in a narrower column. */ @media (max-width: 1179px) { #top #wrap_all .main_color.container_wrap.hg-hero--home { padding-left: 0 !important; padding-right: 0 !important; } #top #wrap_all .hg-hero--home > .container { left: auto !important; width: 90vw !important; margin-left: auto !important; margin-right: auto !important; } } /* 3. Top nav: proof spacing after "Blogs" - nav gap 40px + 12px before "Get a Quote" (= 52px), 18px between the two buttons. */ #top #wrap_all #header .av-main-nav > li.hg-btn { margin-left: 12px; } #top #wrap_all #header .av-main-nav > li.hg-btn + li.hg-btn { margin-left: -22px; } /* 4. Home "At Hunter Glass, we believe..." band: text left, tilted white-framed photo right (proof: about / promise). */ @media (min-width: 900px) { #top #wrap_all .hg-about-promise .hg-about-promise__inner { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 691px); grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(32px, 4vw, 64px); justify-content: center; align-items: start; } #top #wrap_all .hg-about-promise .hg-about-promise__inner > .av-special-heading { grid-column: 1; grid-row: 2; margin: 0; } #top #wrap_all .hg-about-promise .hg-about-promise__inner > .av_textblock_section { grid-column: 1; grid-row: 3; } #top #wrap_all .hg-about-promise .hg-about-promise__h2 .av-special-heading-tag { font-size: clamp(24px, 2.2vw, 31px); line-height: 1.42; font-weight: 700; } #top #wrap_all .hg-about-promise .hg-about-promise__text p { margin: 26px 0 0; color: #d3ddec; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; } #top #wrap_all .hg-about-promise .avia-image-container.hg-about-promise__photo { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; padding: 8px; background: #fff; transform: rotate(3deg); box-shadow: 0 14px 34px rgba(11,26,58,0.35); } #top #wrap_all .hg-about-promise .hg-about-promise__photo img { display: block; width: 100%; height: auto; aspect-ratio: 691 / 482; object-fit: cover; } } @media (min-width: 1500px) { #top #wrap_all .hg-about-promise .avia-image-container.hg-about-promise__photo { transform: rotate(4.45deg); } } /* tablet/phone (stacked): thin white frame like the design, not the 34px card padding (Gary 27 Oct) */ @media (max-width: 899px) { #top #wrap_all .hg-about-promise .avia-image-container.hg-about-promise__photo { padding: 6px; } } /* 5. Footer to the proof (SiteFooter): logo + two buttons across the top, then Get in Touch | Quick Links | Main Service Areas | Legal, badges 2 x 2 under Legal, the "Darfield based..." line at the foot of the first column. From 1200px - narrower screens keep the existing layout. Widget HTML is unchanged: the logo and buttons (inside the first widget) are lifted into a top row reserved by padding. */ @media (min-width: 1200px) { #top #wrap_all #footer > .container { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 0; align-items: start; padding-top: calc(80px + 102px); } #top #wrap_all #footer > .container::before, #top #wrap_all #footer > .container::after { display: none; } #top #wrap_all #footer > .container > .flex_column { width: auto; margin: 0; padding: 0; float: none; } #top #wrap_all #footer .seperator { display: none; } /* top row: logo left, buttons right (80px = the footer top padding) */ #top #wrap_all #footer .hg-footer__col--brand > a:first-child { position: absolute !important; top: 80px; margin: 0; left: 0; height: 46px; display: flex; align-items: center; } #top #wrap_all #footer .hg-footer__logo { display: block; width: min(287px, 60vw); height: auto; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group { position: absolute; top: 80px; right: 0; margin: 0; display: flex; gap: 16px; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group .hg-btn { display: flex; align-items: center; justify-content: center; height: 46px; padding: 0; border-radius: 5px; font-size: 19px; white-space: nowrap; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group .hg-btn:first-child { width: 200px; background: transparent; border: 1.5px solid #fff; color: #fff; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group .hg-btn:first-child:hover { background: #fff; color: #132966; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group .hg-btn:last-child { width: 181px; background: #fff; border: 1.5px solid #fff; color: #132966; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group .hg-btn:last-child:hover { background: #dce6fa; border-color: #dce6fa; } /* column 1 stretches to the bottom so the "Darfield based..." line sits at its foot */ #top #wrap_all #footer > .container > .flex_column.first { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; position: static; overflow: visible; } #top #wrap_all #footer > .container > .flex_column.first > .widget, #top #wrap_all #footer > .container > .flex_column.first .textwidget, #top #wrap_all #footer .hg-footer__col--brand { flex: 1 1 auto; display: flex; flex-direction: column; position: static; overflow: visible; } #top #wrap_all #footer .hg-footer__col--brand > .hg-footer__heading { margin-top: 12px; } #top #wrap_all #footer .hg-footer__col--brand > .hg-footer__note { margin-top: auto; padding-top: 34px; white-space: nowrap; font-weight: 700; } /* columns 2-4 (service areas in one list, as the proof) */ #top #wrap_all #footer .hg-footer__links--areas { columns: auto; column-count: 1; display: flex; flex-direction: column; } #top #wrap_all #footer > .container > .flex_column:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; } #top #wrap_all #footer > .container > .flex_column:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; } #top #wrap_all #footer > .container > .flex_column:nth-child(4) { grid-column: 4; grid-row: 1; } /* badges: 2 x 2 white tiles under Legal */ #top #wrap_all #footer > .container > .hg-footer__badges-wrap { grid-column: 4; grid-row: 2; margin: 40px 0 0; padding: 0; border: 0; width: auto; } #top #wrap_all #footer .hg-footer__badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 300px; margin: 0; padding: 0; } #top #wrap_all #footer .hg-footer__badges li { height: 90px; margin: 0; padding: 6px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; list-style: none; } #top #wrap_all #footer .hg-footer__badges img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } } /* 5b. Footer on tablets (768-1199, Gary 27 Oct to the design): logo + buttons across the top, then Get in Touch | Quick Links, Main Service Areas (one list) | Legal with the badges 2 x 2 under it. */ @media (min-width: 768px) and (max-width: 1199px) { #top #wrap_all #footer > .container { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 40px; row-gap: 44px; align-items: start; padding-top: calc(70px + 90px); } #top #wrap_all #footer > .container::before, #top #wrap_all #footer > .container::after { display: none; } #top #wrap_all #footer > .container > .flex_column { width: auto !important; margin: 0 !important; padding: 0; float: none; } #top #wrap_all #footer .seperator { display: none; } #top #wrap_all #footer .hg-footer__col--brand > a:first-child { position: absolute !important; top: 70px; margin: 0; left: 0; height: 46px; display: flex; align-items: center; } #top #wrap_all #footer .hg-footer__logo { display: block; width: 240px; height: auto; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group { position: absolute; top: 70px; right: 0; margin: 0; display: flex; gap: 12px; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group .hg-btn { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 5px; font-size: 17px; white-space: nowrap; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group .hg-btn:first-child { background: transparent; border: 1.5px solid #fff; color: #fff; } #top #wrap_all #footer .hg-footer__col--brand > .hg-btn-group .hg-btn:last-child { background: #fff; border: 1.5px solid #fff; color: #132966; } #top #wrap_all #footer > .container > .flex_column.first { grid-column: 1; grid-row: 1; position: static; overflow: visible; } #top #wrap_all #footer > .container > .flex_column.first > .widget, #top #wrap_all #footer > .container > .flex_column.first .textwidget, #top #wrap_all #footer .hg-footer__col--brand { display: flex; flex-direction: column; position: static; overflow: visible; } #top #wrap_all #footer .hg-footer__col--brand > .hg-footer__note { padding-top: 28px; font-weight: 700; } #top #wrap_all #footer .hg-footer__links--areas { columns: auto; column-count: 1; display: flex; flex-direction: column; } #top #wrap_all #footer > .container > .flex_column:nth-child(2) { grid-column: 2; grid-row: 1; } #top #wrap_all #footer > .container > .flex_column:nth-child(3) { grid-column: 1; grid-row: 2 / span 2; } #top #wrap_all #footer > .container > .flex_column:nth-child(4) { grid-column: 2; grid-row: 2; } #top #wrap_all #footer > .container > .hg-footer__badges-wrap { grid-column: 2; grid-row: 3; margin: 0; padding: 0; border: 0; width: auto; } #top #wrap_all #footer .hg-footer__badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 260px; margin: 0; padding: 0; } #top #wrap_all #footer .hg-footer__badges li { height: 80px; margin: 0; padding: 6px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; list-style: none; } #top #wrap_all #footer .hg-footer__badges img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } } /* H17. Tablets: "Why Canterbury Homeowners Choose Us" to the design - heading, the four points 2 x 2, wide photo underneath (Gary 27 Oct) */ @media (min-width: 768px) and (max-width: 1179px) { #top .hg-why-choose-us .entry-content-wrapper > .av_one_full { grid-template-columns: minmax(0, 1fr) !important; } #top .hg-why-choose-us .entry-content-wrapper > .av_one_full > .avia-image-container { grid-column: 1 !important; grid-row: auto !important; width: 100%; } #top .hg-why-choose-us .entry-content-wrapper > .av_one_full > .avia-image-container img { width: 100%; aspect-ratio: 16 / 7 !important; object-fit: cover; } #top .hg-why-choose-us table.hg-specs, #top .hg-why-choose-us table.hg-specs tbody { display: block; width: 100%; } #top .hg-why-choose-us table.hg-specs tbody { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 40px; } #top .hg-why-choose-us table.hg-specs tr { width: auto !important; grid-column: auto !important; } #top .hg-why-choose-us table.hg-specs tr { display: block; background: transparent; } #top .hg-why-choose-us table.hg-specs td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent; } #top .hg-why-choose-us table.hg-specs td:first-child { margin-bottom: 6px; font-weight: 600; color: #fff; } } /* H18. Tablets: side-by-side raised cards with a heading (Glass Repairs "Failed or Fogged DGUs" / "Emergency Repairs") stack full width, with a smaller title like the design (Gary 27 Oct) */ @media (min-width: 768px) and (max-width: 1179px) { #top .hg-band .entry-content-wrapper:has(> .av_one_half.hg-card--raised h2) { flex-wrap: wrap !important; grid-template-columns: minmax(0, 1fr) !important; } #top .hg-band .entry-content-wrapper > .av_one_half.hg-card--raised:has(.av-special-heading-h2, h2) { grid-column: span 12 !important; flex: 1 1 100% !important; width: 100% !important; } #top .hg-band .entry-content-wrapper > .av_one_half.hg-card--raised:has(.av-special-heading-h2, h2) h2, #top .hg-band .entry-content-wrapper > .av_one_half.hg-card--raised:has(.av-special-heading-h2, h2) .av-special-heading-tag { font-size: 22px !important; line-height: 1.3 !important; } } /* H19. Tab sections: right arrow + fade when the tab titles overflow (button added by functions.php) - Gary 27 Oct */ #top .av-tab-section-outer-container { position: relative; } #top .hg-tabs-more { display: none; position: absolute; right: 0; z-index: 6; width: 64px; padding: 0 10px 0 0; border: 0; cursor: pointer; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 55%); justify-content: flex-end; align-items: center; } #top .hg-tabs-more span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #055ae9; color: #fff; font-size: 22px; line-height: 1; padding-bottom: 3px; box-shadow: 0 2px 8px rgba(19,41,102,0.25); } #top .hg-tabs-has-more > .hg-tabs-more { display: flex; } #top .av-tab-section-outer-container > .av-tabsection-arrow { display: none !important; } /* Enfold's pale grey arrow box - replaced by the one above */ /* H16. Tablets: section spacing halved (Gary 27 Oct) - the band padding token is 108px, phones already use 56px */ @media (min-width: 768px) and (max-width: 1199px) { :root { --hg-pad-l: 54px; } } /* Socket: Happy Monday credit as the proof - white logo at 104px, 75% opacity. */ #top #wrap_all #socket .copyright a img[alt="Happy Monday"] { width: 104px; height: auto; filter: brightness(0) invert(1); } #top #wrap_all #socket .copyright a:has(img[alt="Happy Monday"]) { opacity: 0.75; } #top #wrap_all #socket .copyright a:has(img[alt="Happy Monday"]):hover { opacity: 1; } /* 6. Blog landing grid ([hg_blog_grid], design Blog.html): category pills + 3-up cards. */ #top .hg-blog__pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 48px; } #top .hg-blog .hg-pill { height: 44px; padding: 0 clamp(16px, 4vw, 22px); white-space: nowrap; border-radius: 100px; cursor: pointer; font-family: Poppins, sans-serif; font-size: clamp(15px, 2vw, 17px); font-weight: 500; border: 1px solid #d3ddee; background: #fff; color: #46536f; } #top .hg-blog .hg-pill.is-active { font-weight: 600; border-color: #055ae9; background: #055ae9; color: #fff; } #top .hg-blog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 30px; align-items: stretch; } #top .hg-blog-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e4e9f2; box-shadow: 0 1px 3px rgba(19,41,102,0.07); color: #16296b; text-decoration: none; z-index: 1; transition: box-shadow 300ms ease; } #top .hg-blog-card[hidden] { display: none; } #top .hg-blog-card:hover { box-shadow: 0 14px 34px rgba(19,41,102,0.16); z-index: 5; } #top .hg-blog-card__media { position: relative; width: 100%; aspect-ratio: 380 / 245; overflow: hidden; } #top .hg-blog-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #top .hg-blog-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(102deg, rgba(19,42,85,0.8) 0%, rgba(28,55,104,0.8) 100%); clip-path: polygon(0 68%, 100% 83%, 100% 100%, 0 100%); } #top .hg-blog-card__badge { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 5px 10px; background: #055ae9; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; line-height: 1.2; } #top .hg-blog-card__date { position: absolute; left: 23px; bottom: 13px; z-index: 2; color: #fff; font-size: 15px; font-weight: 600; } #top .hg-blog-card__body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 26px; } #top .hg-blog-card .hg-blog-card__title { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.32; color: #16296b; text-transform: none; letter-spacing: 0; } #top .hg-blog-card__excerpt { margin: 0; font-size: 17px; line-height: 27px; color: #5b6884; } #top .hg-blog-card__more { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; color: #055ae9; font-size: 16px; font-weight: 700; } /* 4b. Home about-promise, Karen 27 Oct (design screenshot): on wide screens the tilted photo is larger, sits right and overhangs the bottom of the blue band into the white testimonials section. */ @media (min-width: 1200px) { #top #wrap_all #about-promise, #top #wrap_all #about-promise .container, #top #wrap_all #about-promise .template-page, #top #wrap_all #about-promise .entry-content-wrapper, #top #wrap_all #about-promise .hg-about-promise__inner { overflow: visible; } #top #wrap_all #about-promise { position: relative; z-index: 2; } #top #wrap_all .hg-about-promise .hg-about-promise__inner { grid-template-columns: minmax(0, 620px) minmax(0, 691px); column-gap: clamp(24px, 2vw, 40px); } #top #wrap_all .hg-about-promise .avia-image-container.hg-about-promise__photo { align-self: start; margin: -50px 0 -170px; transform: rotate(4.45deg); } #top #wrap_all #about-promise + .avia-section, #top #wrap_all #about-promise ~ #testimonials { padding-top: 120px; } } /* ===== Residential page (page-id-296) - Gary's 27 Oct emails, values from "Residential Services.html" ===== */ /* R1. Header (Residential + Commercial): full-bleed staircase photo behind a navy gradient, white text, blue "Get a Free Quote" + white-outline "Call". */ #top:is(.page-id-296, .page-id-306) #hero { position: relative; min-height: 560px; overflow: hidden; background: #132a55; padding: 0; } #top:is(.page-id-296, .page-id-306) #hero::before, #top:is(.page-id-296, .page-id-306) #hero::after { display: none; } #top:is(.page-id-296, .page-id-306) #hero .entry-content-wrapper { display: block; } #top:is(.page-id-296, .page-id-306) #hero .entry-content-wrapper > .flex_column:last-child { position: absolute; inset: 0; width: 100%; margin: 0; padding: 0; z-index: 0; } #top:is(.page-id-296, .page-id-306) #hero .entry-content-wrapper > .flex_column:last-child::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(19,42,85,0.94) 0%, rgba(28,55,104,0.86) 46%, rgba(28,55,104,0.42) 100%); } #top:is(.page-id-296, .page-id-306) #hero .flex_column:last-child .avia-image-container, #top:is(.page-id-296, .page-id-306) #hero .flex_column:last-child .avia-image-container-inner, #top:is(.page-id-296, .page-id-306) #hero .flex_column:last-child .avia-image-overlay-wrap { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; box-shadow: none; } #top:is(.page-id-296, .page-id-306) #hero .flex_column:last-child .avia-image-container::before { display: none; } #top:is(.page-id-296, .page-id-306) #hero .flex_column:last-child img { width: 100%; height: 100%; object-fit: cover; max-width: none; } #top:is(.page-id-296, .page-id-306) #hero .entry-content-wrapper > .flex_column:first-child { position: relative; z-index: 1; width: 100%; max-width: none; margin: 0; padding: clamp(52px, 8vw, 122px) 0 clamp(60px, 6vw, 96px); float: none; } #top:is(.page-id-296, .page-id-306) #hero .hg-breadcrumbwrap, #top:is(.page-id-296, .page-id-306) #hero .hg-breadcrumbwrap a { color: #cddaf1; } #top:is(.page-id-296, .page-id-306) #hero .av_textblock_section:nth-child(2) p, #top:is(.page-id-296, .page-id-306) #hero .hg-eyebrow { color: #78a6f7; } #top:is(.page-id-296, .page-id-306) #hero h1 { margin: 0 0 24px; max-width: 1180px; font-size: clamp(30px, 3.45vw, 58px); font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.8px; } #top:is(.page-id-296, .page-id-306) #hero .hg-hero__lead p { margin: 0 0 34px; max-width: 720px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: #cddaf1; } #top:is(.page-id-296, .page-id-306) #hero .avia-buttonrow-wrap { display: flex; flex-wrap: wrap; gap: 14px 18px; } #top:is(.page-id-296, .page-id-306) #hero .avia-buttonrow-wrap .avia-button { height: 56px; padding: 0 36px; margin: 0; display: inline-flex; align-items: center; border-radius: 5px; font-size: 19px; } #top:is(.page-id-296, .page-id-306) #hero .avia-buttonrow-wrap .avia-button:nth-child(1) { background: #055ae9 !important; border: 1.5px solid #055ae9 !important; color: #fff !important; font-weight: 600; } #top:is(.page-id-296, .page-id-306) #hero .avia-buttonrow-wrap .avia-button:nth-child(1):hover { background: #0246b6 !important; border-color: #0246b6 !important; } #top:is(.page-id-296, .page-id-306) #hero .avia-buttonrow-wrap .avia-button:nth-child(2) { background: transparent !important; border: 1.5px solid #fff !important; color: #fff !important; font-weight: 500; } #top:is(.page-id-296, .page-id-306) #hero .avia-buttonrow-wrap .avia-button:nth-child(2):hover { background: #fff !important; color: #132966 !important; } #top:is(.page-id-296, .page-id-306) #hero .avia-buttonrow-wrap .avia-button .avia_iconbox_title { color: inherit; } #top:is(.page-id-296, .page-id-306) #hero .container, #top:is(.page-id-296, .page-id-306) #hero .template-page { position: static; } #top:is(.page-id-296, .page-id-306) #hero .entry-content-wrapper > .flex_column:last-child::before { display: none; } #top:is(.page-id-296, .page-id-306) #hero .entry-content-wrapper > .flex_column:last-child::after { z-index: 2; } #top:is(.page-id-296, .page-id-306) #hero .entry-content-wrapper > .flex_column:first-child { z-index: 3; } #top:is(.page-id-296, .page-id-306) #hero .entry-content-wrapper > .flex_column:last-child::after { visibility: visible; display: block; width: auto; height: auto; top: 0; right: 0; bottom: 0; left: 0; clear: none; font-size: 0; } /* R2. "Quality Workmanship..." photo: no drop shadow (blue corner stays, as the design). */ #top.page-id-296 #value-proposition .hg-hero__photo .avia-image-container, #top.page-id-296 #value-proposition .hg-hero__photo img { box-shadow: none; } /* R3. Our Services cards (design "Services grid"): photo with category badge + title on the angled band, then white text box + "Learn more". Scoped to #services-grid - the home page uses the same tile component in its simpler image + title form. */ #top #services-grid .flex_column.hg-tilewrap { display: flex; flex-direction: column; aspect-ratio: auto; overflow: visible; container-type: inline-size; background: #fff; border: 1px solid #e4e9f2; box-shadow: 0 1px 3px rgba(19,41,102,0.07); transition: box-shadow 300ms ease; } #top #services-grid .flex_column.hg-tilewrap:hover { box-shadow: 0 14px 34px rgba(19,41,102,0.16); z-index: 5; } #top #services-grid .hg-tilewrap .avia-image-container.hg-tile { position: relative; inset: auto; width: 100%; aspect-ratio: 380 / 245; overflow: hidden; } #top #services-grid .hg-tilewrap .hg-tile .avia-image-container-inner, #top #services-grid .hg-tilewrap .hg-tile .avia-image-overlay-wrap, #top #services-grid .hg-tilewrap .hg-tile a.avia_image { position: absolute; inset: 0; display: block; } #top #services-grid .hg-tilewrap .avia-image-container.hg-tile::after { z-index: 1; background: linear-gradient(102deg, rgba(19,42,85,0.8) 0%, rgba(28,55,104,0.8) 100%); clip-path: polygon(0 68%, 100% 83%, 100% 100%, 0 100%); } #top #services-grid .hg-tilewrap .av_textblock_section { position: static; } #top #services-grid .hg-tilewrap .hg-tile__labelwrap { padding: 0; } #top #services-grid .hg-tilewrap .hg-tile__labelwrap p { margin: 0; } #top #services-grid .hg-tilewrap a.hg-tile__label { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 26px; color: #16296b; font-size: 17px; font-weight: 400; line-height: 27px; } #top #services-grid .hg-tilewrap a.hg-tile__label::before { content: ""; position: absolute; inset: 0; z-index: 3; } #top #services-grid .hg-tilewrap .hg-tile__badge { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 5px 10px; background: #055ae9; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; line-height: 1.2; } #top #services-grid .hg-tilewrap .hg-tile__title { position: absolute; left: 23px; top: calc(100cqw * 245 / 380 - 13px); transform: translateY(-100%); z-index: 2; color: #fff; font-size: 18px; font-weight: 600; line-height: 1.3; } #top #services-grid .hg-tilewrap .hg-tile__desc { color: #5b6884; } #top #services-grid .hg-tilewrap .hg-tile__more { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: #055ae9; font-size: 16px; font-weight: 700; } /* R4. Why choose us (design): 2 x 2 points, title above text, photo right. */ @media (min-width: 990px) { #top #why-choose-us .entry-content-wrapper > .flex_column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: center; } #top #why-choose-us .entry-content-wrapper > .flex_column > .av-special-heading { grid-column: 1; grid-row: 1; align-self: end; } #top #why-choose-us .entry-content-wrapper > .flex_column > .avia-data-table-wrap { grid-column: 1; grid-row: 2; align-self: start; } #top #why-choose-us .entry-content-wrapper > .flex_column > .avia-image-container { grid-column: 2; grid-row: 1 / span 2; margin: 0; } } #top #why-choose-us h2 { margin: 0 0 44px; font-size: clamp(27px, 2.9vw, 42px); font-weight: 700; color: #fff; line-height: 1.22; letter-spacing: -0.4px; } #top #why-choose-us table.hg-specs, #top #why-choose-us table.hg-specs tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 40px 44px; border: 0; background: none; width: 100%; } #top #why-choose-us table.hg-specs tr { display: block; border: 0; background: none; } #top #why-choose-us table.hg-specs td { display: block; padding: 0; border: 0; background: none; text-align: left; } #top #why-choose-us table.hg-specs td:first-child { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #fff; } #top #why-choose-us table.hg-specs td:last-child { font-size: 17px; line-height: 27px; color: #b9c8e4; } #top #why-choose-us .avia-image-container img { width: 100%; height: clamp(280px, 30vw, 470px); object-fit: cover; object-position: 62% 40%; } /* R5. Testimonials heading centred. */ #top #testimonials .av-special-heading, #top #testimonials .av-special-heading h2 { text-align: center; } #top #testimonials .av-special-heading h2 { margin-bottom: 58px; } /* R6. Service-area pills (design): white, rounded, outlined; the last ("Christchurch & wider Canterbury") solid blue. */ #top #service-areas .avia_textblock p:has(.hg-badge) { display: flex; flex-wrap: wrap; gap: 12px; } #top #service-areas .hg-badge { display: inline-block; margin: 0; padding: 10px 20px; background: #fff; border: 1px solid #d3ddee; border-radius: 100px; font-size: 17px; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; color: #1d397e; } #top #service-areas .hg-badge:last-child { background: #055ae9; border-color: #055ae9; color: #fff; } /* R7. "Ready to Get Started?" band (design CtaBlock): narrower subtext, glass texture, white solid + white-outline buttons. */ #top .hg-cta-band { position: relative; overflow: hidden; } #top .hg-cta-band > .container { position: relative; z-index: 1; } #top .hg-cta-band::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--hg-texture-url, none); background-size: 1700px auto; background-position: right -80px; opacity: 0.08; pointer-events: none; } #top .hg-cta-band .avia_textblock p { max-width: 760px; margin-left: auto; margin-right: auto; } #top .hg-cta-band .avia-button { height: 56px; padding: 0 38px; display: inline-flex; align-items: center; border-radius: 5px; font-size: 19px; } #top .hg-cta-band .avia-button:first-child { background: #fff !important; border: 1.5px solid #fff !important; color: #132966 !important; font-weight: 600; } #top .hg-cta-band .avia-button:first-child:hover { background: #dce6fa !important; border-color: #dce6fa !important; } #top .hg-cta-band .avia-button:last-child { background: transparent !important; border: 1.5px solid #fff !important; color: #fff !important; font-weight: 500; } #top .hg-cta-band .avia-button:last-child:hover { background: #fff !important; color: #132966 !important; } #top #why-choose-us table.hg-specs td, #top #why-choose-us table.hg-specs th { width: auto !important; min-width: 0; max-width: none; } /* ===== Residential service pages (children of /residential/, body.parent-pageid-296) - Gary 27 Oct "check all services pages follow format" ===== */ /* S1. Overview: main column takes the full first column, aside card fixed at max 440px (design "Overview"). */ @media (min-width: 990px) { #top.parent-pageid-296 #overview .entry-content-wrapper { display: flex; gap: clamp(40px, 5vw, 88px); align-items: flex-start; } #top.parent-pageid-296 #overview .entry-content-wrapper > .flex_column { float: none; margin: 0; } #top.parent-pageid-296 #overview .entry-content-wrapper > .flex_column:first-child { flex: 1 1 520px; width: auto; min-width: 0; } #top.parent-pageid-296 #overview .entry-content-wrapper > .flex_column.hg-card { flex: 1 1 320px; width: auto; max-width: 440px; } #top.parent-pageid-296 #overview .entry-content-wrapper::before, #top.parent-pageid-296 #overview .entry-content-wrapper::after { display: none; } } #top.parent-pageid-296 #overview .hg-overview__main h2 { margin: 0 0 30px; } #top.parent-pageid-296 #overview .hg-overview__main h3 { margin: 0 0 16px; font-size: 22px; font-weight: 600; color: #16296b; } #top.parent-pageid-296 #overview .hg-overview__main .avia_textblock > p { margin: 0 0 34px; } /* "What We Replace"-style lists: two columns, consistent spacing under the heading */ #top.parent-pageid-296 #overview .hg-overview__main .avia_textblock > ul.hg-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px 34px; margin: 0 0 24px; } #top.parent-pageid-296 #overview .hg-overview__main .avia_textblock > ul.hg-checklist li { margin: 0; font-size: 18px; line-height: 28px; } /* Aside: grey eyebrow, rule above its bullet points */ #top.parent-pageid-296 #overview .hg-why__body .hg-eyebrow { color: #7c8bab; font-size: 14px; font-weight: 600; letter-spacing: 2.4px; margin-bottom: 26px; } #top.parent-pageid-296 #overview .hg-why__body ul.hg-checklist { margin-top: 32px; padding-top: 28px; border-top: 1px solid #e4e9f2; } #top.parent-pageid-296 #overview .hg-why__body ul.hg-checklist li { font-size: 16px; line-height: 25px; } /* S2. The two cards ("Failed or Fogged DGUs" / "Emergency Repairs"): same height. */ #top.parent-pageid-296 .avia-section .entry-content-wrapper:has(> .flex_column.hg-card--raised + .flex_column.hg-card--raised) { display: flex; flex-wrap: wrap; align-items: stretch; } #top.parent-pageid-296 .avia-section .entry-content-wrapper:has(> .flex_column.hg-card--raised + .flex_column.hg-card--raised)::before, #top.parent-pageid-296 .avia-section .entry-content-wrapper:has(> .flex_column.hg-card--raised + .flex_column.hg-card--raised)::after { display: none; } /* S3. "From Call to Completion" (steps band) heading centred. */ #top .hg-steps .hg-steps__head .av-special-heading, #top .hg-steps .hg-steps__head h2 { text-align: center; } @media (min-width: 768px) { #top.parent-pageid-296 .avia-section .entry-content-wrapper:has(> .flex_column.hg-card--raised + .flex_column.hg-card--raised) { flex-wrap: nowrap; gap: 30px; } #top.parent-pageid-296 .avia-section .entry-content-wrapper:has(> .flex_column.hg-card--raised + .flex_column.hg-card--raised) > .flex_column { flex: 1 1 0; width: auto; margin: 0; float: none; } } /* ===== Commercial page (page-id-306) - Gary 27 Oct, values from Commercial.html ===== */ /* C2. "One Team for Every Commercial Glass Need": the four services as 2 x 2 bordered boxes. */ #top #what-we-do table.hg-specs, #top #what-we-do table.hg-specs tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: 100%; border: 0; background: none; } #top #what-we-do table.hg-specs { display: block; } /* only the tbody is the 2 x 2 grid - never 3 + 1 (Gary 27 Oct) */ @media (max-width: 539px) { #top #what-we-do table.hg-specs tbody { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 768px) and (max-width: 1179px) { #top #what-we-do .entry-content-wrapper { flex-wrap: wrap !important; } #top #what-we-do .entry-content-wrapper > .av_one_half { grid-column: span 12 !important; flex: 1 1 100% !important; width: 100% !important; } } #top #what-we-do table.hg-specs tr { display: block; border: 1px solid #e0e6f1; padding: 28px 26px 30px; background: #fff; } #top #what-we-do table.hg-specs td { display: block; width: auto !important; padding: 0; border: 0; background: none; text-align: left; } #top #what-we-do table.hg-specs td:first-child { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: #16296b; } #top #what-we-do table.hg-specs td:last-child { font-size: 17px; line-height: 27px; color: #5b6884; } /* C3. "Recent Commercial Work": centred light/bold heading, centred narrower subtext. */ #top #recent-work .hg-gallery__head .av-special-heading, #top #recent-work .hg-gallery__head h2 { text-align: center; } #top #recent-work .hg-gallery__head h2 { margin: 0 0 14px; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.05; font-weight: 300; color: #1b3268; } #top #recent-work .hg-gallery__head h2 strong { font-weight: 700; color: #16296b; } #top #recent-work .hg-gallery__head .avia_textblock p { margin: 0 auto 54px; max-width: 700px; text-align: center; font-size: 19px; line-height: 30px; color: #5b6884; } /* C4. "Why Businesses Call Us Back": same 2 x 2 points as Residential "Why choose us". */ #top #why-us table.hg-specs, #top #why-us table.hg-specs tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px 44px; border: 0; background: none; width: 100%; } #top #why-us table.hg-specs tr { display: block; border: 0; background: none; } #top #why-us table.hg-specs td { display: block; width: auto !important; padding: 0; border: 0; background: none; text-align: left; } #top #why-us table.hg-specs td:first-child { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: #fff; } #top #why-us table.hg-specs td:last-child { font-size: 17px; line-height: 27px; color: #b9c8e4; } #top #why-us h2 { margin: 0 0 44px; } /* C3b. Recent work cards: "2 photos" count bottom-right on the photo, sentence case (design). */ #top #recent-work .hg-card { position: relative; } #top #recent-work .hg-card .hg-img img { width: 100%; height: 300px; object-fit: cover; } #top #recent-work .hg-card p:has(> .hg-badge:only-child) { margin: 0; height: 0; } #top #recent-work .hg-card .hg-badge { position: absolute; top: calc(300px - 14px); transform: translateY(-100%); left: auto; right: 14px; bottom: auto; z-index: 2; padding: 7px 14px; background: rgba(19,41,102,0.88); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.4px; text-transform: none; } #top #recent-work .hg-card .avia_textblock > p:has(> .hg-badge:only-child) + h3 { margin-top: 0; } /* Home "Our Services" tiles: photos with a wider shape (e.g. Glass Repairs, 882x440) left a white strip - make the image wrappers fill the tile. */ #top .hg-tilewrap .avia-image-container.hg-tile .avia-image-container-inner, #top .hg-tilewrap .avia-image-container.hg-tile .avia-image-overlay-wrap, #top .hg-tilewrap .avia-image-container.hg-tile a.avia_image { height: 100%; } #top #recent-work .hg-card::before, #top #recent-work .hg-card::after { display: none; } /* clearfix pseudo-elements became flex items + gap = white strip above each photo (Karen) */ @media (min-width: 1100px) { #top .hg-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Gary: tiles keep their size when a pill filters the grid */ #top #wrap_all #recent-work .hg-card .avia-image-container.hg-img { margin-top: 0; } /* ===== Contact page - Gary 27 Oct "format second column" (design Contact.html aside): navy Contact Details card, bordered Business Hours and Location cards ===== */ #top .hg-contact__aside { --hg-card-line: #e0e6f1; } /* 1. Contact Details: navy card with blue corner */ #top .hg-contact__aside .hg-panel-dark { position: relative; overflow: hidden; background: linear-gradient(150deg, #16296b 0%, #1d397e 100%); padding: 36px 34px 38px; margin: 0 0 22px; } #top .hg-contact__aside .hg-panel-dark .hg-angle { display: block; position: absolute; right: 0; top: 0; left: auto; bottom: auto; width: 90px; height: 90px; background: rgba(5,90,233,0.6); clip-path: polygon(100% 0, 100% 100%, 0 0); } #top .hg-contact__aside .hg-panel-dark h3 { position: relative; margin: 0 0 22px; font-size: 22px; font-weight: 600; color: #fff; } #top .hg-contact__aside .hg-panel-dark p:not(.hg-small) { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; font-size: 19px; line-height: 28px; } #top .hg-contact__aside .hg-panel-dark p a { color: #fff; } #top .hg-contact__aside .hg-panel-dark p a:hover { color: #a9c8ff; } #top .hg-contact__aside .hg-panel-dark .hg-small { position: relative; display: inline-flex; align-items: center; gap: 10px; margin: 24px 0 0; padding: 8px 16px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); border-radius: 100px; font-size: 15px; line-height: 1.3; color: #fff; } #top .hg-contact__aside .hg-panel-dark .hg-small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6ee7a0; flex: 0 0 8px; } /* 2. Business Hours card = heading block + table + the emergency note (first paragraph of the next text block) */ #top .hg-contact__aside > .av_textblock_section:nth-child(2) { margin: 0; padding: 32px 34px 0; border: 1px solid var(--hg-card-line); border-bottom: 0; } #top .hg-contact__aside > .av_textblock_section:nth-child(2) h3 { margin: 0; padding-bottom: 20px; font-size: 22px; font-weight: 600; color: #16296b; } #top .hg-contact__aside > .avia-data-table-wrap { margin: 0; padding: 0 34px; border: 1px solid var(--hg-card-line); border-top: 0; border-bottom: 0; } #top .hg-contact__aside > .avia-data-table-wrap table { margin: 0; border: 0; background: none; } #top .hg-contact__aside > .avia-data-table-wrap tr { border: 0; background: none; } #top .hg-contact__aside > .avia-data-table-wrap td { padding: 0; border: 0; background: none; font-size: 18px; line-height: 34px; color: #46536f; font-weight: 400; } #top .hg-contact__aside > .avia-data-table-wrap td:last-child { text-align: right; font-weight: 600; color: #16296b; white-space: nowrap; } #top .hg-contact__aside > .av_textblock_section:nth-child(4) { margin: 0; } #top .hg-contact__aside > .av_textblock_section:nth-child(4) p:first-child { margin: 0; padding: 18px 34px 34px; border: 1px solid var(--hg-card-line); border-top: 0; font-size: 17px; line-height: 27px; color: #5b6884; background: linear-gradient(#e0e6f1, #e0e6f1) 34px 0 / calc(100% - 68px) 1px no-repeat; /* rule above the note, inside the card padding */ } /* 3. Location card = heading + text + map */ #top .hg-contact__aside > .av_textblock_section:nth-child(4) h3 { margin: 22px 0 0; padding: 32px 34px 14px; border: 1px solid var(--hg-card-line); border-bottom: 0; font-size: 22px; font-weight: 600; color: #16296b; } #top .hg-contact__aside > .av_textblock_section:nth-child(4) h3 + p { margin: 0; padding: 0 34px 18px; border: 1px solid var(--hg-card-line); border-top: 0; border-bottom: 0; font-size: 17px; line-height: 27px; color: #5b6884; } #top .hg-contact__aside > .avia_codeblock_section { margin: 0; padding: 0 34px 34px; border: 1px solid var(--hg-card-line); border-top: 0; } /* Form + aside fill the full content width (Gary 27 Oct): form flexible, aside 460px flush right with the feature boxes */ @media (min-width: 990px) { #top #form .entry-content-wrapper:has(> .hg-contact__aside) { display: grid !important; grid-template-columns: minmax(0, 1fr) 460px !important; column-gap: 64px !important; } #top #form .entry-content-wrapper:has(> .hg-contact__aside) > .flex_column { grid-column: auto !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } #top .hg-contact__aside { max-width: none; margin-left: 0; } } #top #wrap_all .hg-contact__aside > .avia-data-table-wrap, #top #wrap_all .hg-contact__aside > .avia-data-table-wrap table, #top #wrap_all .hg-contact__aside > .avia_codeblock_section { margin-top: 0; } /* no seam inside the Hours / Location cards */ /* ===== A. About page (Gary 27 Oct) ===== */ /* A1. Our story: text left, the two showroom photos stacked on the right with the blue corner */ #top .hg-our-story .hg-item .avia-image-container img { aspect-ratio: auto; width: 100%; height: clamp(210px, 24vw, 340px); object-fit: cover; } #top .hg-our-story .hg-item + .hg-item .avia-image-container img { height: clamp(170px, 19vw, 260px); } #top .hg-our-story .hg-item .hg-small { margin: 0; font-size: 15px; color: #5b6884; } @media (min-width: 990px) { #top .hg-our-story .entry-content-wrapper { row-gap: 14px; column-gap: clamp(40px, 5vw, 88px); } #top .hg-our-story .entry-content-wrapper > .av_one_half { grid-column: 1 / span 6; grid-row: 1 / span 2; } #top .hg-our-story .entry-content-wrapper > .av_one_fourth.hg-item { grid-column: 7 / span 6; grid-row: 1; position: relative; gap: 10px; } #top .hg-our-story .entry-content-wrapper > .av_one_fourth.hg-item + .hg-item { grid-row: 2; } #top .hg-our-story .entry-content-wrapper > .av_one_fourth.hg-item:not(.hg-item + .hg-item)::before { content: ""; position: absolute; right: -20px; top: -20px; width: 150px; height: 150px; background: #055ae9; clip-path: polygon(100% 0, 100% 100%, 0 0); z-index: 0; visibility: visible; } #top .hg-our-story .hg-item .avia-image-container { position: relative; z-index: 1; margin: 0; } } /* A2. Mission statement: larger centred italic quote */ #top .hg-mission .avia_textblock blockquote, #top .hg-mission .avia_textblock blockquote p { max-width: 1180px; margin: 0 auto; font-size: clamp(22px, 2.2vw, 34px); font-style: italic; font-weight: 300; line-height: 1.44; color: #fff; text-align: center; } /* A3. Meet the Team: centred light/bold heading, narrow subtext */ #top #wrap_all .hg-team__head .av-special-heading h2 { text-align: center; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.05; font-weight: 300; color: #1b3268; } #top #wrap_all .hg-team__head .av-special-heading h2 strong { font-weight: 700; color: #16296b; } #top .hg-team__head .avia_textblock p { max-width: 640px; margin: 0 auto 40px; text-align: center; font-size: 19px; line-height: 30px; color: #5b6884; } /* A4. Team photos: fixed-height boxes, cover without stretching, framed on faces; bottom pair centred under the top three */ #top .hg-team .hg-item .avia-image-container img { aspect-ratio: auto; width: 100%; height: 380px; object-fit: cover; object-position: 50% 25%; } #top .hg-team img.wp-image-127 { object-position: 40% 35%; } #top .hg-team img.wp-image-164 { object-position: 42% 25%; } #top .hg-team img.wp-image-161 { object-position: 62% 30%; } @media (min-width: 990px) { #top .hg-team .entry-content-wrapper > .av_one_half.hg-item { grid-column: span 4; } #top .hg-team .entry-content-wrapper > .av_one_half.hg-item.first { grid-column: 3 / span 4; } } /* A5. Milestones: timeline with a rule and blue dots */ #top .hg-milestones .av-special-heading h2 { text-align: center; } #top .hg-milestones .av-special-heading { margin-bottom: 30px; } #top .hg-milestones .avia_textblock { position: relative; max-width: 900px; margin: 0 auto; padding-left: 58px; } #top .hg-milestones .avia_textblock::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: #cfd9ea; } #top .hg-milestones .avia_textblock p.hg-stat__value { position: relative; margin: 0; font-size: 26px; font-weight: 700; line-height: 1.25; color: #16296b; } #top .hg-milestones .avia_textblock p.hg-stat__value::before { content: ""; position: absolute; left: -58px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #055ae9; box-shadow: 0 0 0 6px rgba(5, 90, 233, 0.16); } #top .hg-milestones .avia_textblock p:not(.hg-stat__value) { margin: 8px 0 46px; font-size: 19px; line-height: 30px; color: #46536f; } #top .hg-milestones .avia_textblock p:last-child { margin-bottom: 0; } /* A6. What We Stand For: centred title */ #top .hg-values__head .av-special-heading h2 { text-align: center; } /* A7. Health & Safety: text left, photo right; associations as a dotted list */ #top .hg-health-and-safety .hg-row { display: block; } #top .hg-health-and-safety .hg-row .hg-eyebrow { margin: 34px 0 20px; font-size: 14px; font-weight: 600; letter-spacing: 2.4px; color: #7c8bab; } #top .hg-health-and-safety .hg-stack { gap: 14px; } #top .hg-health-and-safety .hg-stack p { margin: 0; font-size: 19px; line-height: 28px; color: #16296b; } #top .hg-health-and-safety .hg-stack p::first-letter { color: #055ae9; font-size: 22px; padding-right: 14px; } #top .hg-health-and-safety .avia-image-container img { aspect-ratio: auto; width: 100%; height: clamp(280px, 28vw, 440px); object-fit: cover; object-position: 70% 50%; } @media (min-width: 990px) { #top .hg-health-and-safety .flex_column.av_one_full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: center; } #top .hg-health-and-safety .flex_column.av_one_full > .av-special-heading { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 24px; } #top .hg-health-and-safety .flex_column.av_one_full > .av_textblock_section { grid-column: 1; grid-row: 2; align-self: start; } #top .hg-health-and-safety .flex_column.av_one_full > .avia-image-container { grid-column: 2; grid-row: 1 / span 2; margin: 0; } } /* A8. CTA subtext narrower on About */ #top.page-id-307 .hg-cta-band:not(.hg-mission) .avia_textblock p { max-width: 620px; } /* ===== G. Gary + Karen afternoon batch (27 Oct) ===== */ /* G1. Breadcrumb: current page in white */ #top .hg-breadcrumb .rank-math-breadcrumb .last { color: #fff; } /* G2. Section heads centred with narrower subtext (Residential services + every service page) */ #top:is(.page-id-296, .parent-pageid-296) .flex_column[class*="__head"] { text-align: center; } #top:is(.page-id-296, .parent-pageid-296) .flex_column[class*="__head"] .av-special-heading-tag { text-align: center; } #top:is(.page-id-296, .parent-pageid-296) .flex_column[class*="__head"] .avia_textblock p { max-width: 640px; margin-left: auto; margin-right: auto; } #top.page-id-296 .hg-services__head .av-special-heading-tag { font-weight: 300; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.05; color: #1b3268; } #top.page-id-296 .hg-services__head .av-special-heading-tag strong { font-weight: 700; color: #16296b; } /* G3. FAQ titles centred on all service pages */ #top:is(.page-id-296, .parent-pageid-296) #faq .av-special-heading, #top:is(.page-id-296, .parent-pageid-296) #faq .av-special-heading-tag { text-align: center; } #top:is(.page-id-296, .parent-pageid-296) #faq .av-special-heading { margin-bottom: 44px; } /* G4. Glass repairs: space after the numbered steps */ #top.parent-pageid-296 .avia_textblock ol { margin-bottom: 18px; } /* G5. Service tabs: underline + bolder active tab */ #top .av-tab-section-tab-title-container .av-active-tab-title { border-bottom-color: #055ae9 !important; } #top .av-tab-section-tab-title-container .av-section-tab-title .av-inner-tab-title { font-size: 18px; font-weight: 500; } #top .av-tab-section-tab-title-container .av-active-tab-title .av-inner-tab-title { font-weight: 600; color: #16296b; } /* G6. Overview: title line height + gap before the checklist */ #top .hg-overview__main .av-special-heading-tag { line-height: 1.22; } #top .hg-overview__main .avia_textblock p + .hg-checklist, #top .hg-overview__main .av_textblock_section + .av_textblock_section .hg-checklist:first-child { margin-top: 30px; } /* G7. More space above each gallery / hardware group in the tabs */ #top .av-layout-tab .container > .av_one_full:has(h3):not(.hg-gallery__head) { margin-top: clamp(28px, 3.5vw, 56px); } /* G8. Frameless showers hardware: 5 across, whole product visible, grey border. The tab grid becomes 10 columns with a 16px gap (hardware gap from the design); the text/photo halves get 24px inner padding each so their gutter stays 64px. */ #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 16px; } #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_full { grid-column: span 10; } #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_half { grid-column: span 5; } #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_half.first { padding-right: 24px; } #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_half:not(.first) { padding-left: 24px; } #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_third { grid-column: span 3; } #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_two_third { grid-column: span 7; } #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_fourth.hg-item { grid-column: span 2; } #top.page-id-299 .av-layout-tab .hg-item .avia-image-container img { aspect-ratio: auto; width: 100%; height: clamp(170px, 16vw, 230px); object-fit: contain; background: #fff; border: 1px solid #e4e9f2; border-radius: 12px; padding: 16px; box-sizing: border-box; } #top.page-id-299 .av-layout-tab .hg-item .avia_textblock { text-align: center; font-size: 16px; font-weight: 500; color: #16296b; } @media (max-width: 989px) { #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_half { grid-column: span 10; padding: 0 !important; } #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_fourth.hg-item { grid-column: span 5; } } /* G9. Brochure "View Full Screen": the wrapper was painted as a full-width bar - only the button is styled now */ #top .avia-button-wrap.hg-btn { background: none !important; padding: 0 !important; height: auto; width: auto; border: 0; } #top .avia-button-wrap.hg-btn .avia-button { height: 56px; padding: 0 36px; border-radius: 5px; font-size: 17px; font-weight: 600; border: 0; } /* G10. Pet doors SPCA callout (small logo beside the text, blue left border) */ #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) { display: grid; grid-template-columns: 112px 1fr; column-gap: 32px; align-items: center; background: #eef2f9; border: 0; border-left: 4px solid #055ae9; padding: 34px 38px; } #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) .avia_textblock { display: contents; } #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) img { width: 112px; height: auto; margin: 0; aspect-ratio: auto; display: block; } #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) .avia_textblock > :has(> img), #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) .avia_textblock > img { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: center; } #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) h3 { grid-column: 2; grid-row: 1; margin: 0 0 14px; font-size: 22px; font-weight: 600; color: #16296b; align-self: end; } #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) p:not(:has(img)) { grid-column: 2; grid-row: 2; margin: 0; font-size: 19px; line-height: 30px; color: #46536f; align-self: start; } @media (max-width: 600px) { #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) { grid-template-columns: 1fr; } #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) .avia_textblock > * { grid-column: 1 !important; grid-row: auto !important; } #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) img { margin-bottom: 18px; } } /* G11. Steps ("From Call to Completion") - same title-to-boxes gap everywhere (design 54px) */ #top .hg-band .flex_column.hg-steps__head { margin-bottom: 0; } #top .hg-steps__head .av-special-heading { margin-bottom: 30px; } /* + the 24px grid gap = 54px as designed */ /* G12. Pet gallery masonry ([hg_pet_gallery]) */ #top .hg-petgrid { columns: 4 240px; column-gap: 18px; } #top .hg-petgrid__item { break-inside: avoid; margin: 0 0 18px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 18px rgba(19, 41, 102, 0.08); } #top .hg-petgrid__item a, #top .hg-petgrid__item img { display: block; width: 100%; height: auto; } #top .hg-petgrid__item figcaption { padding: 12px 18px 14px; font-size: 17px; font-weight: 600; color: #16296b; } /* G13. Tab galleries grouped by finish (splashbacks design, all service pages): heading + description on one line, rule underneath, 3 across 4:3 */ #top .av-layout-tab .hg-gallery__head, #top .av-layout-tab .hg-gallery__head .av-special-heading-tag { text-align: left !important; } #top .av-layout-tab .hg-gallery__head .avia_textblock p { margin-left: 0 !important; max-width: 760px; } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 6px; margin-top: clamp(46px, 5vw, 72px); } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery) > .av-special-heading { margin: 0; padding: 0; flex: 0 0 auto; width: auto; } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery) > .av-special-heading .av-special-heading-tag { font-size: 26px; font-weight: 600; letter-spacing: -0.2px; color: #16296b; margin: 0; padding: 0; } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery) > .av_textblock_section { margin: 0; flex: 1 1 260px; width: auto; } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery) > .av_textblock_section p { margin: 0; font-size: 16px; color: #6d7a94; } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery) > .avia-gallery { flex: 1 0 100%; margin-top: 8px; padding-top: 26px; border-top: 1px solid #e0e6f1; } /* G14. About team: glass photo -> portrait on hover (Karen's matched square pairs) + Q&A under each person */ #top .hg-team .hg-flip-wrap, #top .hg-team .hg-flip-wrap .avia_textblock { margin: 0; padding: 0; } #top .hg-flip { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #eef2f9; } #top .hg-flip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; transition: opacity .45s ease; } #top .hg-flip .hg-flip__face { opacity: 0; } #top .hg-flip:hover .hg-flip__face, #top .hg-item:focus-within .hg-flip__face { opacity: 1; } @media (hover: none) { #top .hg-flip .hg-flip__face { opacity: 1; } #top .hg-flip .hg-flip__glass { opacity: 0; } } #top .hg-team__qa { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #e4e9f2; display: grid; gap: 6px; } #top .hg-team__qa li { margin: 0; padding: 0; font-size: 16px; line-height: 1.5; color: #5b6884; } #top .hg-team__qa li strong { color: #16296b; font-weight: 600; } /* G15. Single blog post (single-post.php, design "Blog Post.html") */ #top .hg-post__wrap { width: min(1350px, 90vw); margin: 0 auto; } #top .hg-post__hero { position: relative; min-height: 520px; background: #101d3b; overflow: hidden; } #top .hg-post__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #top .hg-post__hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(19,42,85,.92) 0%, rgba(19,42,85,.25) 70%, rgba(28,55,104,.1) 100%); } #top .hg-post__hero-text { position: absolute; left: 0; bottom: 54px; width: 100%; } #top .hg-post__crumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 15px; color: #a9bce0; margin-bottom: 20px; } #top .hg-post__crumb a { color: #a9bce0; } #top .hg-post__crumb a:hover, #top .hg-post__crumb-current { color: #fff; } #top .hg-post__title { margin: 0; max-width: 1080px; font-size: clamp(30px, 3.4vw, 52px); font-weight: 700; color: #fff; line-height: 1.16; letter-spacing: -0.6px; } #top .hg-post__meta { background: #f4f6fb; border-bottom: 1px solid #e2e8f3; } #top .hg-post__meta .hg-post__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 22px 0; font-size: 16px; color: #5b6884; } #top .hg-post__cat { padding: 7px 14px; background: #055ae9; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; color: #fff; white-space: nowrap; } #top .hg-post__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } #top .hg-post__dot { color: #b9c2d4; } #top .hg-post__body { background: #fff; padding: clamp(46px, 5.8vw, 92px) 0 clamp(54px, 6.8vw, 108px); } #top .hg-post__cols { display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 96px); align-items: flex-start; } #top .hg-post__article { flex: 1 1 520px; min-width: 0; } #top .hg-post__article p, #top .hg-post__article li { font-size: 19px; line-height: 33px; color: #46536f; } #top .hg-post__article p { margin: 0 0 22px; } #top .hg-post__article h2 { margin: 46px 0 18px; font-size: clamp(23px, 2.2vw, 32px); font-weight: 700; color: #16296b; letter-spacing: -0.3px; line-height: 1.25; } #top .hg-post__article h3 { margin: 34px 0 14px; font-size: 22px; font-weight: 600; color: #16296b; } #top .hg-post__article ul, #top .hg-post__article ol { margin: 0 0 26px 22px; } #top .hg-post__article img { max-width: 100%; height: auto; margin: 10px 0 26px; display: block; } #top .hg-post__article blockquote { margin: 34px 0; padding: 26px 30px; border-left: 4px solid #055ae9; background: #f4f6fb; font-size: 21px; line-height: 34px; font-style: italic; color: #16296b; } #top .hg-post__share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 46px; padding-top: 26px; border-top: 1px solid #e0e6f1; font-size: 16px; } #top .hg-post__share span { font-weight: 600; color: #16296b; } #top .hg-post__aside { flex: 1 1 320px; max-width: 460px; display: flex; flex-direction: column; gap: 22px; } #top .hg-post__cta { position: relative; background: linear-gradient(150deg, #16296b 0%, #1d397e 100%); padding: 36px 34px 38px; overflow: hidden; } #top .hg-post__cta::before { content: ""; position: absolute; right: 0; top: 0; width: 90px; height: 90px; background: rgba(5,90,233,.6); clip-path: polygon(100% 0, 100% 100%, 0 0); } #top .hg-post__cta-title { position: relative; font-size: 24px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 14px; } #top .hg-post__cta p { position: relative; margin: 0 0 26px; font-size: 18px; line-height: 28px; color: #c6d3ec; } #top .hg-post__cta a { position: relative; display: flex; align-items: center; justify-content: center; height: 52px; background: #fff; border-radius: 5px; color: #16296b; font-size: 18px; font-weight: 600; text-decoration: none; } #top .hg-post__cta a:hover { background: #dce6fa; } #top .hg-post__box { border: 1px solid #e0e6f1; padding: 32px 34px 34px; } #top .hg-post__box-title { font-size: 20px; font-weight: 600; color: #16296b; margin-bottom: 18px; } #top .hg-post__box p { margin: 0 0 18px; font-size: 17px; line-height: 27px; color: #5b6884; } #top .hg-post__more { font-size: 17px; font-weight: 600; } #top .hg-post__related { display: flex; flex-direction: column; gap: 20px; } #top .hg-post__related a { display: block; color: #16296b; text-decoration: none; } #top .hg-post__related a + a { padding-top: 20px; border-top: 1px solid #eef1f7; } #top .hg-post__related a:hover, #top .hg-post__card:hover { color: #055ae9; } #top .hg-post__rel-meta { display: block; font-size: 14px; color: #7c8bab; margin-bottom: 6px; } #top .hg-post__rel-title { display: block; font-size: 18px; font-weight: 600; line-height: 1.36; } #top .hg-post__feed { background: #f4f6fb; padding: clamp(48px, 6vw, 96px) 0 clamp(52px, 6.5vw, 104px); } #top .hg-post__feed h2 { margin: 0 0 44px; font-size: clamp(24px, 2.3vw, 34px); font-weight: 700; color: #16296b; letter-spacing: -0.3px; } #top .hg-post__feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } #top .hg-post__card { display: block; background: #fff; color: #16296b; text-decoration: none; } #top .hg-post__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } #top .hg-post__card-body { display: block; padding: 20px 22px 24px; } @media (max-width: 767px) { #top .hg-post__hero { min-height: 420px; } #top .hg-post__hero-text { bottom: 34px; } #top .hg-post__aside { max-width: none; } } #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) > p:has(> img) { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: center; } #top.parent-pageid-296 .hg-card--mist:has(img[src*="spca"]) { grid-template-rows: auto auto; align-content: center; } #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_half.hg-item, #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_third.hg-item { grid-column: span 2; padding: 0 !important; } /* pulls: 5 across like knobs */ @media (max-width: 989px) { #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_half.hg-item, #top.page-id-299 .av-layout-tab .av-layout-tab-inner .container > .av_one_third.hg-item { grid-column: span 5; } } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery)::before, #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery)::after { display: none; } /* G13b. Galleries with a title but no description (e.g. frameless showers) - same title + rule */ #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .avia-gallery) { margin-top: clamp(46px, 5vw, 72px); } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .avia-gallery) > .av-special-heading { margin: 0; padding: 0 0 14px; border-bottom: 1px solid #e0e6f1; } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .avia-gallery) > .av-special-heading .av-special-heading-tag { font-size: 26px; font-weight: 600; letter-spacing: -0.2px; color: #16296b; margin: 0; padding: 0; } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .avia-gallery) > .avia-gallery { margin-top: 26px; } /* G16. Contact: hours card closes after the table now the emergency line is gone (Karen) */ #top .hg-contact__aside > .avia-data-table-wrap { padding-bottom: 30px; border-bottom: 1px solid var(--hg-card-line); } /* G17. Section heads inside service-page tabs stay left-aligned like the design (centring is for full-width sections) */ #top .av-layout-tab .flex_column[class*="__head"], #top .av-layout-tab .flex_column[class*="__head"] .av-special-heading-tag, #top .av-layout-tab .flex_column[class*="__head"] .avia_textblock { text-align: left !important; } #top .av-layout-tab .flex_column[class*="__head"] .avia_textblock p { margin-left: 0 !important; } /* ===== H. Gary + Karen batch 3 (27 Oct pm) ===== */ /* H1. Breadcrumb: trail links light blue, current page white */ #top .hg-breadcrumb .rank-math-breadcrumb a { color: #a9bce0; } #top .hg-breadcrumb .rank-math-breadcrumb a:hover { color: #fff; } /* H2. "Request a Quote" in the Why Hunter Glass cards: full width, text centred (all service pages) */ #top .hg-card .avia-button-wrap.hg-btn { display: block; width: 100%; } #top .hg-card .avia-button-wrap.hg-btn .avia-button { display: flex; width: 100%; justify-content: center; text-align: center; box-sizing: border-box; } /* H3. No extra space under the last list in a card (e.g. Glass Balustrades "Options") */ #top .avia_textblock > ul.hg-checklist:last-child, #top .avia_textblock > ul:last-child { margin-bottom: 0; } /* H4. Contact: Location copy in its box, map underneath outside the box; upload box like the other fields */ #top .hg-contact__aside > .avia_codeblock_section { margin-top: 22px !important; padding: 0 !important; border: 0 !important; } #top .hg-contact__aside > .av_textblock_section:nth-child(4) h3 + p { padding-bottom: 32px !important; border-bottom: 1px solid var(--hg-card-line) !important; } #top .hg-contact__aside .avia_codeblock_section iframe { display: block; width: 100%; border: 1px solid var(--hg-card-line); } #top .forminator-field-upload .forminator-multi-upload { background: rgb(251, 252, 254); border: 1px solid rgb(207, 217, 234); border-radius: 4px; } /* H5. Retrofit Before & After (design): Aluminium/Timber as a pill toggle right of the heading, diagram callout, draggable pairs with captions */ @media (min-width: 990px) { #top .hg-compare-band .av-tab-section-outer-container { position: relative; } #top .hg-compare-band .av-tab-section-tab-title-container { position: absolute; z-index: 5; top: 132px; left: auto !important; right: calc((100% - min(1350px, 90vw)) / 2); width: max-content !important; display: flex; gap: 6px; padding: 6px; background: #f4f6fb; border: 1px solid #e4e9f2; } } #top .hg-compare-band .av-tab-section-tab-title-container .av-section-tab-title { padding: 12px 22px; border: 0 !important; background: transparent; } #top .hg-compare-band .av-tab-section-tab-title-container .av-section-tab-title .av-inner-tab-title { font-size: 17px; font-weight: 600; color: #16296b; } #top .hg-compare-band .av-tab-section-tab-title-container .av-active-tab-title { background: #16296b; } #top .hg-compare-band .av-tab-section-tab-title-container .av-active-tab-title .av-inner-tab-title { color: #fff; } #top .hg-compare-band .av-tab-section-tab-title-container .av-section-tab-title::after, #top .hg-compare-band .av-tab-arrow-container { display: none !important; } #top .hg-compare-band .av_one_half .avia_textblock p { max-width: 640px; } #top .hg-diagram-note { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 24px; align-items: center; background: #f4f6fb !important; border: 0 !important; border-left: 4px solid #055ae9 !important; padding: 26px 30px !important; box-shadow: none !important; } #top .hg-diagram-note > .avia-image-container { flex: 0 0 auto; width: min(260px, 100%); margin: 0; } #top .hg-diagram-note > .avia-image-container img { width: 100%; height: auto; aspect-ratio: auto; } #top .hg-diagram-note > .av_textblock_section { flex: 1 1 320px; width: auto !important; min-width: 0; margin: 0; } #top .hg-diagram-note > .av_textblock_section p { margin: 0; font-size: 18px; line-height: 29px; color: #46536f; } #top .flex_column:has(> .hg-diff) { background: #fff; border: 1px solid #e4e9f2; } #top .hg-diff { margin: 0 !important; } #top .hg-diff img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } #top .hg-diff .av-img-diff-label { bottom: 16px; top: auto !important; padding: 6px 14px; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; border-radius: 0; } #top .hg-diff .av-img-diff-label.label-before { left: 16px; background: rgba(13, 26, 51, 0.82); } #top .hg-diff .av-img-diff-label.label-after { right: 16px; left: auto; background: rgba(5, 90, 233, 0.92); } #top .hg-diff__caption { margin: 0 !important; padding: 22px 26px 24px; } #top .hg-diff__caption p { margin: 0; } #top .hg-diff__caption .hg-diff__title { font-size: 19px; font-weight: 600; color: #16296b; margin-bottom: 6px; } #top .hg-diff__caption .hg-diff__note { font-size: 16px; line-height: 25px; color: #5b6884; } /* H6. Low E CTA: text left, "Want to know more?" + button in a right column (design) */ @media (min-width: 990px) { #top .hg-low-e-glass .hg-card--mist { display: grid !important; grid-template-columns: minmax(0, 1fr) 340px; column-gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(34px, 4.5vw, 64px) clamp(28px, 4.5vw, 72px) !important; } #top .hg-low-e-glass .hg-card--mist > * { grid-column: 1; } #top .hg-low-e-glass .hg-card--mist > .av_textblock_section:has(p:nth-of-type(4)), #top .hg-low-e-glass .hg-card--mist > .av_textblock_section:has(p:nth-of-type(4)) .avia_textblock { display: contents; } #top .hg-low-e-glass .hg-card--mist > .av_textblock_section:has(p:nth-of-type(4)) p { grid-column: 1; max-width: 760px; } #top .hg-low-e-glass .hg-card--mist > .av_textblock_section:has(p:nth-of-type(4)) p:last-child { grid-column: 2; grid-row: 1 / span 4; align-self: end; margin: 0 0 18px; font-size: 19px; line-height: 1.5; font-weight: 600; color: #16296b; } #top .hg-low-e-glass .hg-card--mist > .avia-button-wrap { grid-column: 2; grid-row: 5 / span 2; align-self: start; } } #top .hg-low-e-glass .hg-card--mist .avia-button { display: flex; width: 100%; justify-content: center; height: 56px; } #top .hg-low-e-glass .hg-card--mist > .avia-button-wrap { width: 100%; } /* H7. FAQ titles centred where the section is .hg-faq (no #faq id, e.g. Retrofit) */ #top:is(.page-id-296, .parent-pageid-296) .hg-faq .av-special-heading, #top:is(.page-id-296, .parent-pageid-296) .hg-faq .av-special-heading-tag { text-align: center; } #top .hg-diagram-note > .avia-image-container { align-self: center; } #top .hg-diagram-note .avia_textblock > :last-child { margin-bottom: 0; } #top .hg-diff .av-image-diff-wrapper { width: 100% !important; max-width: none !important; } #top .hg-diff .av-image-diff-wrapper img { width: 100% !important; height: auto; } /* H8. Service overview lists: design spacing (10px between points) */ #top .hg-overview__main .avia_textblock ul.hg-checklist { row-gap: 10px !important; column-gap: 34px; } #top .hg-overview__main .avia_textblock ul.hg-checklist li { line-height: 28px; margin: 0 !important; } /* H10. Two-column lists flow down each column (no gap under a short point beside a two-line one) - Gary 27 Oct */ @media (min-width: 768px) { #top .hg-overview__main .avia_textblock ul.hg-checklist { display: block !important; columns: 2; column-gap: 34px; } #top .hg-overview__main .avia_textblock ul.hg-checklist li { break-inside: avoid; margin: 0 0 10px !important; } } /* H11. Gallery titles (Painted, Mirror...): 20px more space above - Enfold's per-element margin:0 outranks G13/G13b - Gary 27 Oct */ #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery), #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .avia-gallery) { margin-top: 20px !important; } /* H12. Gallery main title vs group titles (Karen + Gary 27 Oct): main title bigger/bolder, group titles (Hinged Door Showers, Mirror...) smaller */ #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h2):has(+ .av_one_full > .avia-gallery) .av-special-heading-tag { font-size: 34px !important; font-weight: 700 !important; line-height: 1.2; } #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .av_textblock_section + .avia-gallery) > .av-special-heading .av-special-heading-tag, #top .av-layout-tab .container > .av_one_full:has(> .av-special-heading-h3 + .avia-gallery) > .av-special-heading .av-special-heading-tag { font-size: 20px !important; } /* H15. Burger drawer to the design (Gary 27 Oct): Enfold forced 35px on the top-level items and CTAs */ #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li > a, #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li > a .avia-menu-text { font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--hg-navy) !important; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li:not(.hg-mobile-only) > a { padding: 16px 20px !important; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul .sub-menu li a { padding: 11px 20px 11px 30px !important; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul .sub-menu li a, #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul .sub-menu li a .avia-menu-text { font-size: 14px !important; line-height: 1.4 !important; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only { padding: 0 20px; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li:not(.hg-mobile-only) + li.hg-mobile-only { padding-top: 20px; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a { display: flex !important; align-items: center !important; justify-content: center !important; height: auto !important; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a, #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a .avia-menu-text { font-size: 16px !important; font-weight: 600 !important; color: #fff !important; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a { min-height: 50px; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a .avia-menu-text { min-height: 0 !important; height: auto !important; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a.hg-btn--outline, #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a.hg-btn--outline .avia-menu-text { color: var(--hg-navy) !important; } /* H14. About Health & Safety: Site Safe logo in place of the "Proudly associated with" list (Karen 27 Oct; source is only 93x117) */ #top .hg-health-and-safety .hg-hs-logo { margin: 30px 0 0; } #top .hg-health-and-safety .hg-hs-logo img { width: 150px; height: auto; display: block; } /* H13. Frameless Showers overview photo shows the whole (portrait) image so the bottom of the door is visible (Karen 27 Oct) */ #top .avia-image-container.hg-img--full img { aspect-ratio: auto !important; height: auto !important; object-fit: contain; } /* H9. Overview mist cards (Built to Code, How It Works...): blue left border, no empty space at the bottom */ #top .hg-overview__main .avia_textblock.hg-card--mist, #top .hg-overview__main .hg-card--mist .avia_textblock { border-left: 4px solid #055ae9; padding: 34px 38px !important; } #top .hg-overview__main .hg-card--mist .avia_textblock { border-left: 0; padding: 0 !important; } #top .hg-overview__main .hg-card--mist > :last-child, #top .hg-overview__main .hg-card--mist .avia_textblock > :last-child { margin-bottom: 0 !important; } /* H1b. breadcrumb trail colour wins over the hero link colour */ #top .hg-breadcrumb .rank-math-breadcrumb a, #top .hg-hero .hg-breadcrumb .rank-math-breadcrumb a { color: #a9bce0 !important; } #top .hg-breadcrumb .rank-math-breadcrumb a:hover { color: #fff !important; } #top .hg-breadcrumb .rank-math-breadcrumb .last { color: #fff !important; } /* H20. Splashbacks Shutterstock collections: space between the intro and the filter pills (Karen 27 Oct) */ #top .avia_textblock p + .hg-row:has(.hg-chip) { margin-top: 28px; } /* H21. Blog post quotes (Gary 27 Oct): tinted box, blue left edge, italic quote, small bold caps name */ #top .hg-post__article blockquote.hg-quote { margin: 34px 0; padding: 26px 30px; background: #eef3fb; border: 0; border-left: 4px solid #055ae9; } #top .hg-post__article blockquote.hg-quote p { margin: 0; font-size: 20px; line-height: 1.55; font-style: italic; color: #16296b; } #top .hg-post__article blockquote.hg-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #16296b; } /* H22. Product pages to the design (Gary 27 Oct): SKU tight under the title, small Features / Specifications sub-titles, tighter feature list, spec rows as label (grey) left / value (navy, bold) right; clickable gallery thumbnails */ #top .hg-product .hg-product__info .av-special-heading-h1 { margin-bottom: 0 !important; padding-bottom: 0 !important; } #top .hg-product .hg-product__info .av-special-heading-h1 + .av_textblock_section { margin-top: 6px !important; } #top .hg-product .hg-product__info .av-special-heading-h2 { margin: 36px 0 12px !important; padding: 0 !important; } #top .hg-product .hg-product__info .av-special-heading-h2 .av-special-heading-tag { font-size: 21px !important; line-height: 1.3 !important; font-weight: 600 !important; color: #16296b; } #top .hg-product .hg-product__info .av-special-heading-h2 + * { margin-top: 0 !important; } #top .hg-product .hg-product__info ul.hg-checklist { row-gap: 6px !important; } #top .hg-product .hg-product__info ul.hg-checklist li { font-size: 16px; line-height: 1.6; } #top .hg-product .hg-product__info table.hg-specs { width: 100%; border-collapse: collapse; } #top .hg-product .hg-product__info table.hg-specs td { padding: 13px 0 !important; border: 0 !important; border-bottom: 1px solid #e4e9f2 !important; background: transparent !important; font-size: 15px; vertical-align: top; } #top .hg-product .hg-product__info table.hg-specs td:first-child { font-weight: 400 !important; color: #5b6884 !important; text-align: left; } #top .hg-product .hg-product__info table.hg-specs td:last-child { font-weight: 600 !important; color: #16296b !important; text-align: right; } #top .hg-product .hg-product__thumbs .hg-thumb { cursor: pointer; border: 2px solid transparent; transition: border-color 150ms ease; display: inline-block; } #top .hg-product .hg-product__thumbs .hg-thumb.is-active, #top .hg-product .hg-product__thumbs .hg-thumb:hover { border-color: #055ae9; } /* ===== H23. Main nav: the active item's underline no longer lifts its text (Gary 28 Oct) ===== theme-style.css gives the current item's .avia-menu-text padding-bottom 4px for the underline gap, which made the link 4px taller and, centred, pushed the text up 2px. A matching negative margin keeps the gap without changing the item height. */ #top .av-main-nav > li.menu-item-top-level:is(.current-menu-item, .current-menu-ancestor, .current_page_ancestor, .current-page-ancestor):not(.hg-btn) > a .avia-menu-text { margin-bottom: -4px; } /* ===== H24. Phones (<=767): logo and burger both vertically centred in the 84px header (Gary 28 Oct, round 2) ===== The logo sat 2px from the top (27px gap below); now the logo box is the full header height with the image centred (gaps 14.4 / 14.4 at <=480, 7.1 / 7.1 at 481-767) and the nav box is 84px so the burger centres too (within 1px). */ @media (max-width: 767px) { #top #header .logo { display: flex !important; align-items: center; height: 84px !important; top: 0 !important; } #top #header .logo a { display: block; } #top #header .main_menu { height: 84px !important; top: 0 !important; } #top #header .main_menu .av-main-nav-wrap { height: 100% !important; display: flex !important; align-items: center; } #top #header .main_menu ul.av-main-nav { height: auto !important; align-items: center; } } /* ===== H25. Phones (<=767): footer badges as four even white tiles in one row, like the 2 x 2 tablet tiles (Gary 28 Oct) ===== */ @media (max-width: 767px) { #top #wrap_all #footer .hg-footer__badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 420px; margin: 0; padding: 24px 0; } #top #wrap_all #footer .hg-footer__badges li { height: 72px; min-width: 0; margin: 0; padding: 6px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; list-style: none; } #top #wrap_all #footer .hg-footer__badges img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } } /* ===== H26. Phones + tablets (<=989): header sticks to the top like desktop (Gary 28 Oct) ===== Enfold fixes the header only from 990px; below that it scrolled away. position:sticky can't work (#wrap_all / body clip overflow), so it is fixed, with #main padded by the header height (84px <=767, 90px 768-989) - content starts exactly where it did (checked Home + Contact at 390 / 834 / 989). */ @media (max-width: 989px) { #top #header { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 501; } #top #wrap_all #main { padding-top: 90px !important; } } @media (max-width: 767px) { #top #wrap_all #main { padding-top: 84px !important; } } /* ===== H27. Phones (<=767): Frameless Showers hardware (hinges, handles, knobs, pulls) 2 per row (Gary 28 Oct) ===== The swatches are av_one_fourth columns that went full width; the tab container is a 10-column grid, so span 5 = half. */ @media (max-width: 767px) { #top.page-id-299 .av-layout-tab .container > .flex_column.av_one_fourth, #top.page-id-299 .av-layout-tab .container > .flex_column.av_one_full ~ .flex_column.av_one_half { grid-column: span 5 !important; min-width: 0; } /* 2nd = the two Pulls (halves after a heading; the Overview halves come first) */ } /* ===== H28. Pet Doors, phones only (<=767): products before "Meet Some of Our Furry Friends" (Gary 28 Oct) ===== #main becomes a flex column so the two sections swap with CSS order; everything else keeps its place and height. */ @media (max-width: 767px) { #top.page-id-298 #main { display: flex; flex-direction: column; } #top.page-id-298 #main > * { order: 2; } #top.page-id-298 #main > #hero, #top.page-id-298 #main > #overview, #top.page-id-298 #main > #product-range { order: 0; } #top.page-id-298 #main > #pet-gallery { order: 1; } } /* ===== H29. Blog posts built in the Advanced Layout Builder (Gary 28 Oct) ===== single-post.php keeps the blog layout (template_include filter in functions.php) and the builder's elements sit in the article column. Enfold's text-block styles out-rank the article ones, so repeat them one level more specific - a post in a Text Block looks exactly like the classic one (checked on Single Glazing vs Double Glazing). */ #top .hg-post__article .avia_textblock p, #top .hg-post__article .avia_textblock li { font-size: 19px; line-height: 33px; color: #46536f; } #top .hg-post__article .avia_textblock p { margin: 0 0 22px; } #top .hg-post__article .avia_textblock h2 { margin: 46px 0 18px; font-size: clamp(23px, 2.2vw, 32px); font-weight: 700; color: #16296b; letter-spacing: -0.3px; line-height: 1.25; } #top .hg-post__article .avia_textblock h3 { margin: 34px 0 14px; font-size: 22px; font-weight: 600; color: #16296b; } #top .hg-post__article .avia_textblock ul, #top .hg-post__article .avia_textblock ol { margin: 0 0 26px 22px; } #top .hg-post__article .av_textblock_section:first-child .avia_textblock > :first-child { margin-top: 0; } #top .hg-post__article .av_textblock_section, #top .hg-post__article .avia-image-container { margin-bottom: 0; } #top .hg-post__article .avia_textblock ul.hg-checklist li { font-size: 19px; line-height: 33px; } /* ===== H30. Glass texture on navy bands: one image filling the section, no tiling (Gary 28 Oct) ===== The texture file is only 480x500, drawn at a fixed 1600/1700px width with the default repeat, so seams showed on wide screens / tall sections (e.g. Commercial "Need Commercial Glazing?"). Every band that uses it now covers instead. */ #top .hg-band--navy.hg-hero::before, #top .hg-band--navy.hg-steps::before, #top .hg-cta-band::after, #top .hg-band--navy.hg-enduro-shield::before, #top .hg-band--navy.hg-why-us::before, #top .hg-band--navy.hg-why-choose-us::before, #top .hg-band--navy.hg-values::before, #top .hg-band--navy.hg-feature-image::before, #top .hg-band--navy.hg-mission::before, #top .hg-cta-band::before { background-repeat: no-repeat !important; background-size: cover !important; background-position: right top !important; } /* ===== H31. Mobile menu CTA buttons: proper hover/tap colours (John 2 Nov) ===== The sheet's row hover (theme-style.css 15: li:hover > a { background: --hg-sheet-sub }) also hit the two CTA buttons, so "Get a Quote" went white text on near-white. Use the design-system button hovers instead. */ #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only:hover > a:not(.hg-btn--outline), #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a:not(.hg-btn--outline):focus-visible, #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a:not(.hg-btn--outline):active { background: var(--hg-accent-hover) !important; border-color: var(--hg-accent-hover) !important; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only:hover > a.hg-btn--outline, #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a.hg-btn--outline:focus-visible, #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a.hg-btn--outline:active { background: var(--hg-navy) !important; border-color: var(--hg-navy) !important; } #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only:hover > a.hg-btn--outline, #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only:hover > a.hg-btn--outline .avia-menu-text, #top .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li.hg-mobile-only > a.hg-btn--outline:active .avia-menu-text { color: #fff !important; }