/* ===== Keep homepage hero text card near the bottom ===== */ body.page-id-10 .home-featured-row .home-featured-left-box.w-vwrapper { margin-bottom: 40px !important; } #page-header .l-subheader { padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box; } @media (min-width: 1200px) { #page-header .l-subheader { padding-left: 48px !important; padding-right: 48px !important; } } @media (min-width: 1600px) { #page-header .l-subheader { padding-left: 64px !important; padding-right: 64px !important; } } @media (max-width: 600px) { .hps-wrap .hps-bar { display: none !important; } .hps-wrap .hps-pills { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; justify-content: stretch !important; } .hps-wrap .hps-pills .hps-pill { flex: initial !important; width: auto !important; } } @media (max-width: 600px){ .hps-wrap .hps-bar{ display:none !important; } .hps-wrap .hps-pills{ display:none !important; } .hps-wrap .hps-panels{ display:grid !important; grid-template-columns:1fr !important; } .hps-wrap .hps-panels > .hps-panel{ grid-area:1 / 1 / 2 / 2 !important; position:relative !important; } .hps-wrap .hps-panels > .hps-blob{ grid-area:1 / 1 / 2 / 2 !important; } .hps-mnav{ display:flex !important; align-items:center; justify-content:center; gap:22px; margin:22px 0 8px; padding-bottom:28px; } .hps-mnav-btn{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; border:1px solid #e7dde1; background:#fff; color:#5e2a42; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; } .hps-mnav-btn:disabled{ opacity:.35; cursor:default; } .hps-mnav-btn svg{ width:22px; height:22px; } .hps-mnav-label{ flex:0 0 auto; text-align:center; min-width:84px; } .hps-mnav-num{ display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:#5e2a42; color:#fff; font-weight:700; font-size:18px; margin-bottom:6px; } } @media (min-width: 601px){ .hps-mnav{ display:none !important; } } @media (max-width: 600px){ .hps-wrap .hps-mnav{ margin-top:40px !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; row-gap:12px !important; column-gap:22px !important; } .hps-wrap .hps-mnav-label{ display:contents !important; } .hps-wrap .hps-mnav-prev{ order:1 !important; } .hps-wrap .hps-mnav-num{ order:2 !important; margin-bottom:0 !important; } .hps-wrap .hps-mnav-next{ order:3 !important; } } @media (max-width: 600px){ .hps-wrap .hps-mnav{ padding-bottom:6px !important; margin-bottom:0 !important; column-gap:14px !important; } .hps-wrap .hps-mnav-btn{ width:64px !important; height:64px !important; border:0 !important; background:transparent !important; position:relative !important; } .hps-wrap .hps-mnav-btn::before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; border:1px solid #e7dde1; background:#fff; z-index:0; } .hps-wrap .hps-mnav-btn svg{ position:relative; z-index:1; } } @media (min-width: 901px) { .home-featured-left-box { margin-left: 0 !important; } } @media (min-width: 901px) { .hps-panels { min-height: 385px !important; } } @media (max-width: 900px) { .hps-mnav, .hps-wrap .hps-mnav-btn { touch-action: manipulation; } .hps-mnav { gap: 16px !important; justify-content: center !important; } .hps-wrap .hps-mnav-btn { width: 72px !important; height: 72px !important; position: relative !important; cursor: pointer; -webkit-tap-highlight-color: transparent; } .hps-wrap .hps-mnav-btn::after { content: ""; position: absolute; top: -28px; bottom: -28px; left: -14px; right: -14px; } } .page-id-7157 .post_image img { height: 450px !important; width: 100% !important; object-fit: contain !important; aspect-ratio: auto !important; } .hpl-testi-hero, .hpl-video-section, .hpl-reviews-section, .hpl-seo-section, .hpl-houzz-section, .hpl-cta-section { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .hpl-testi-hero > .hpl-testi-wrap, .hpl-video-section > .hpl-testi-wrap, .hpl-reviews-section > .hpl-testi-wrap, .hpl-seo-section > .hpl-testi-wrap, .hpl-houzz-section > .hpl-testi-wrap, .hpl-cta-section > .hpl-testi-wrap { padding-left: calc(40px + 22px) !important; padding-right: calc(40px + 22px) !important; } .page-id-1455 .hp-eyebrow { color: #9a5b3b !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; margin-bottom: 14px !important; } .page-id-1455 #gform_wrapper_1 { background: #ffffff !important; border-radius: 20px !important; padding: 40px 40px 44px !important; box-shadow: 3px 4px 35px 0 rgb(224, 234, 237), 0 18px 60px -28px rgba(40,55,71,.28) !important; border: 1px solid rgba(224,234,237,.6) !important; margin-top: 8px !important; } .page-id-1455 #gform_wrapper_1 input[type=text], .page-id-1455 #gform_wrapper_1 input[type=email], .page-id-1455 #gform_wrapper_1 input[type=tel], .page-id-1455 #gform_wrapper_1 input[type=url], .page-id-1455 #gform_wrapper_1 textarea, .page-id-1455 #gform_wrapper_1 select { background: #f7f9fa !important; border: 1px solid #e3e9ee !important; border-radius: 12px !important; padding: 14px 16px !important; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important; font-size: 16px !important; } .page-id-1455 #gform_wrapper_1 input[type=text]:focus, .page-id-1455 #gform_wrapper_1 input[type=email]:focus, .page-id-1455 #gform_wrapper_1 input[type=tel]:focus, .page-id-1455 #gform_wrapper_1 input[type=url]:focus, .page-id-1455 #gform_wrapper_1 textarea:focus, .page-id-1455 #gform_wrapper_1 select:focus { background: #ffffff !important; border-color: #9a5b3b !important; box-shadow: 0 0 0 4px rgba(154,91,59,.12) !important; outline: none !important; } .page-id-1455 #gform_wrapper_1 .gfield_label { font-weight: 700 !important; letter-spacing: .04em !important; color: #283747 !important; margin-bottom: 8px !important; } .page-id-1455 #gform_wrapper_1 .gform_button { background: #283747 !important; color: #fff !important; border-radius: 12px !important; padding: 16px 34px !important; font-weight: 700 !important; letter-spacing: .02em !important; border: none !important; transition: transform .15s ease, box-shadow .2s ease, background .2s ease !important; box-shadow: 0 10px 22px -10px rgba(40,55,71,.55) !important; cursor: pointer !important; } .page-id-1455 #gform_wrapper_1 .gform_button:hover { background: #1d2a37 !important; transform: translateY(-1px) !important; box-shadow: 0 14px 26px -10px rgba(40,55,71,.6) !important; } .page-id-1455 #gform_wrapper_1 .gfield_checkbox label, .page-id-1455 #gform_wrapper_1 .gchoice label { color:#3a4654 !important; } .page-title-26-row { margin-top: 0 !important; } #gform_wrapper_2 { box-shadow: rgb(224, 234, 237) 3px 4px 35px 0px, rgba(40, 55, 71, 0.28) 0px 18px 60px -28px; border-radius: 20px; background: #fff; padding: 40px 40px 44px; border: 1px solid rgba(224, 234, 237, 0.6); } .hps-pill:has(~ .hps-pill.is-active) .hps-pill-n { border-color: #693b4d !important; } /* HPS-CROSSFADE-FIX: process panels crossfade, no jump, height fits tallest panel */ .hps-wrap .hps-panels { display: grid !important; grid-template-columns: 1fr !important; min-height: 0 !important; } .hps-wrap .hps-panels > .hps-panel { grid-area: 1 / 1 / 2 / 2 !important; position: relative !important; inset: auto !important; opacity: 0 !important; visibility: hidden !important; transform: none !important; transition: opacity .35s ease, visibility .35s ease !important; pointer-events: none !important; } .hps-wrap .hps-panels > .hps-panel.is-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .hps-wrap .hps-panels > .hps-blob { grid-area: 1 / 1 / 2 / 2 !important; } .brands-carousel .w-image-h, .carousel-brands-inner-row .w-image-h { border: 1px solid #000 !important; background: #fff !important; box-sizing: border-box !important; padding: 14px 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .brands-carousel img, .carousel-brands-inner-row img { filter: grayscale(100%) !important; -webkit-filter: grayscale(100%) !important; border: 0 !important; padding: 0 !important; max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; box-sizing: border-box !important; } .manufacturers-carousel-row .w-text.line-right::after { box-shadow: none !important; background: linear-gradient(to right, #bfbfbf 0%, #bfbfbf 55%, rgba(191,191,191,0) 100%) !important; height: 1px !important; width: clamp(150px, 100%, 320px) !important; } .brands-carousel .w-image-h, .carousel-brands-inner-row .w-image-h { border: none !important; padding: 0 !important; } .single-ab_product .us_post_carousel.type_carousel .owl-item:not(.active) { visibility: hidden; } .no-touch a.us-btn-style_4:hover, .no-touch a.us-btn-style_4:focus { background: #685060 !important; border-color: transparent !important; color: #ffffff !important; } a.us-btn-style_4:hover .w-btn-label, a.us-btn-style_4:focus .w-btn-label { color: #ffffff !important; } html.no-touch a.w-btn.us-btn-style_4:hover, html.no-touch a.w-btn.us-btn-style_4:focus { background: #685060 !important; color: #ffffff !important; } .w-grid-list .w-grid-item-h { border: none !important; box-shadow: none !important; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; } .home-products-inner-row img { max-width: 380px !important; } .home-products-inner-row .vc_col-sm-4 .w-vwrapper > .w-hwrapper > .w-text { font-size: clamp(20px, 3vw, 34px) !important; line-height: 1.12 !important; max-width: 100% !important; white-space: nowrap !important; } .us_post_list .w-grid-item.ab_product .w-grid-item-h {display: flex !important; flex-direction: column; height: 100%; background: #ffffff !important; border: 1px solid #ECE7E1 !important; border-radius: 14px !important; padding: 0.85rem 0.85rem 1.35rem !important; transition: transform .25s, box-shadow .25s;} /* Fix See-More (AJAX-loaded) product cards: items carry .type-ab_product but not .ab_product */ .us_post_list .w-grid-item.type-ab_product .w-grid-item-h{display:flex !important;flex-direction:column;height:100%;background:#ffffff !important;border:1px solid #ECE7E1 !important;border-radius:14px !important;padding:0.85rem 0.85rem 1.35rem !important;transition:transform .25s, box-shadow .25s;} .our-process-row .hps-panels { isolation: isolate; background-size: 130% 130%; animation: hpsPanelGradientDrift 24s ease-in-out infinite alternate; } .our-process-row .hps-blob { animation: hpsBubbleDrift 14s cubic-bezier(.45, 0, .25, 1) infinite alternate; transform-origin: 50% 50%; will-change: transform, opacity; } .our-process-row .hps-panels::before { animation: hpsAccentGlowDrift 18s cubic-bezier(.45, 0, .25, 1) infinite alternate; will-change: transform, opacity; } .our-process-row .hps-panels::after { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; background: radial-gradient( circle at 72% 38%, rgba(255,255,255,.22), rgba(255,255,255,0) 34% ); opacity: .45; transform: translate3d(0, 0, 0); animation: hpsQuietLightDrift 20s ease-in-out infinite alternate; } .our-process-row .hps-panel { z-index: 2; } .our-process-row .hps-blob, .our-process-row .hps-panels::before, .our-process-row .hps-panels::after { z-index: 0; } @keyframes hpsBubbleDrift { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 45% { transform: translate3d(-24px, -18px, 0) scale(1.045); opacity: .95; } 100% { transform: translate3d(14px, -34px, 0) scale(.985); opacity: .9; } } @keyframes hpsAccentGlowDrift { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 100% { transform: translate3d(26px, 18px, 0) scale(1.08); opacity: .78; } } @keyframes hpsQuietLightDrift { 0% { transform: translate3d(-18px, 6px, 0) scale(1); opacity: .34; } 100% { transform: translate3d(22px, -10px, 0) scale(1.04); opacity: .5; } } @keyframes hpsPanelGradientDrift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @media (max-width: 782px) { .our-process-row .hps-blob { animation-duration: 18s; opacity: .82; } .our-process-row .hps-panels::after { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .our-process-row .hps-panels, .our-process-row .hps-blob, .our-process-row .hps-panels::before, .our-process-row .hps-panels::after { animation: none !important; } } .hnp-design-v2 .hd-intro-panel { isolation: isolate !important; } .hnp-design-v2 .hd-intro-panel > * { position: relative !important; z-index: 2 !important; } .hnp-design-v2 .hd-intro-panel:after { content: "" !important; position: absolute !important; right: -80px !important; bottom: -80px !important; width: 220px !important; height: 220px !important; border-radius: 50% !important; background: rgba(86, 51, 58, .07) !important; pointer-events: none !important; z-index: 0 !important; animation: hdIntroBubbleFloat 14s cubic-bezier(.45, 0, .25, 1) infinite alternate !important; will-change: transform, opacity !important; } .hnp-design-v2 .hd-intro-panel:before { content: "" !important; position: absolute !important; right: -130px !important; bottom: -120px !important; width: 320px !important; height: 320px !important; border-radius: 50% !important; background: radial-gradient( circle at 35% 35%, rgba(255,255,255,.45), rgba(255,255,255,0) 62% ) !important; pointer-events: none !important; z-index: 0 !important; opacity: .42 !important; animation: hdIntroSoftGlowFloat 20s ease-in-out infinite alternate !important; will-change: transform, opacity !important; } @keyframes hdIntroBubbleFloat { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: .95; } 45% { transform: translate3d(-18px, -14px, 0) scale(1.06); opacity: .88; } 100% { transform: translate3d(12px, -30px, 0) scale(.98); opacity: .82; } } @keyframes hdIntroSoftGlowFloat { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: .34; } 100% { transform: translate3d(-26px, -20px, 0) scale(1.08); opacity: .5; } } @media (max-width: 782px) { .hnp-design-v2 .hd-intro-panel:after { animation-duration: 18s !important; } .hnp-design-v2 .hd-intro-panel:before { opacity: .28 !important; } } @media (prefers-reduced-motion: reduce) { .hnp-design-v2 .hd-intro-panel:before, .hnp-design-v2 .hd-intro-panel:after { animation: none !important; } } .hnp-design-v2 .hd-hero-card { isolation: isolate !important; } .hnp-design-v2 .hd-hero-card > * { position: relative !important; z-index: 2 !important; } .hnp-design-v2 .hd-hero-card:before { content: "" !important; position: absolute !important; width: 210px !important; height: 210px !important; right: -85px !important; top: -75px !important; border-radius: 50% !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient( circle at 45% 45%, rgba(176,106,63,.36) 0%, rgba(176,106,63,.28) 42%, rgba(176,106,63,0) 72% ) !important; filter: blur(2px) !important; animation: hdHeroOrangeBubbleClean 16s ease-in-out infinite alternate !important; will-change: transform, opacity !important; } .hnp-design-v2 .hd-hero-card:after { content: none !important; display: none !important; animation: none !important; } @keyframes hdHeroOrangeBubbleClean { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: .92; } 50% { transform: translate3d(-12px, 14px, 0) scale(1.04); opacity: .88; } 100% { transform: translate3d(8px, 26px, 0) scale(.99); opacity: .84; } } @media (prefers-reduced-motion: reduce) { .hnp-design-v2 .hd-hero-card:before { animation: none !important; } } @keyframes hps5BringBubbleFloat { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: .95; } 50% { transform: translate3d(-18px, 18px, 0) scale(1.045); opacity: .88; } 100% { transform: translate3d(10px, 32px, 0) scale(.99); opacity: .82; } } @media (max-width: 767px) { .eapps-google-maps-bar-content { height: 200px !important; } .eapps-google-maps-bar-content .eapps-google-maps-bar-list, .eapps-google-maps-bar-content .eapps-google-maps-bar-content-item-active { height: 166px !important; } } @media screen and (max-width: 900px) { .w-nav.type_mobile.m_layout_panel .w-nav-list.level_1 { width: 100% !important; right: var(--site-outline-width, 0px); } .w-nav.type_mobile.m_layout_panel:has(.w-nav-control.active)::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 2; pointer-events: none; } } @media screen and (max-width: 1024px) { .w-nav.type_mobile.m_effect_afl .w-nav-list.level_1, .w-nav.type_mobile .w-nav-list.level_1 { transition: opacity 0.18s ease !important; transform: none !important; animation: none !important; } .w-nav.type_mobile.m_layout_panel .w-nav-list.level_1 { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 8px 0 24px !important; background: #ffffff !important; z-index: 5 !important; -webkit-overflow-scrolling: touch; overflow-y: auto !important; } .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item { border-bottom: 1px solid rgba(0,0,0,0.07) !important; } .w-nav.type_mobile .w-nav-list.level_1 > .w-nav-item:last-child { border-bottom: 0 !important; } .w-nav.type_mobile .w-nav-anchor.level_1 { display: flex !important; align-items: center !important; min-height: 52px !important; padding: 12px 20px !important; text-align: left !important; font-size: 15px !important; letter-spacing: 0.06em !important; line-height: 1.3 !important; } .w-nav.type_mobile .w-nav-item.togglable > .w-nav-anchor .w-nav-arrow, .w-nav.type_mobile .w-nav-arrow { width: 52px !important; height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; right: 4px !important; opacity: 0.75 !important; transition: transform 0.2s ease, opacity 0.2s ease !important; } .w-nav.type_mobile .w-nav-item.opened > .w-nav-anchor .w-nav-arrow { transform: rotate(180deg) !important; opacity: 1 !important; } .w-nav.type_mobile .w-nav-list.level_2 { background: #f7f5f2 !important; transition: max-height 0.28s ease !important; } .w-nav.type_mobile .w-nav-anchor.level_2 { display: flex !important; align-items: center !important; min-height: 46px !important; padding: 10px 20px 10px 36px !important; font-size: 14px !important; letter-spacing: 0.04em !important; color: #444 !important; } .w-nav.type_mobile .w-nav-list.level_2 > .w-nav-item { border-top: 1px solid rgba(0,0,0,0.05) !important; } .w-nav.type_mobile .w-nav-item.current-menu-item > .w-nav-anchor { color: #7a4a55 !important; font-weight: 600 !important; } .w-nav.type_mobile .w-nav-list.level_1 .menu-item.us_page_block_with_rows, .w-nav.type_mobile .w-nav-list.level_1 li[class*="page_block"] { padding: 18px 20px 6px !important; border-bottom: 0 !important; } .w-nav.type_mobile.m_layout_panel:has(.w-nav-control.active)::before { pointer-events: auto !important; } } @media screen and (max-width: 1024px) { .l-header .w-nav-control, .w-nav.type_mobile .w-nav-control { position: relative !important; z-index: 120 !important; } .w-nav.type_mobile.m_layout_panel .w-nav-list.level_1 { top: 0 !important; padding-top: 92px !important; } } /* Arrows inherit list visibility so chevrons hide when panel closed */ .w-nav.type_mobile.m_layout_panel .w-nav-list.level_1 .w-nav-arrow { visibility: inherit !important; } /* Submenu height animated via --submenu-h; gated on open mobile panel */ @media screen and (max-width: 1024px) { .w-nav.type_mobile.m_layout_panel li.togglable > .w-nav-list.level_2 { display: block !important; overflow: hidden !important; height: 0 !important; max-height: none !important; opacity: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; visibility: hidden !important; transition: height .34s cubic-bezier(.25,.1,.25,1), opacity .26s ease, visibility 0s linear .34s !important; } .w-nav-control.active ~ .w-nav.type_mobile.m_layout_panel li.togglable.opened > .w-nav-list.level_2, .w-nav.type_mobile.m_layout_panel.active li.togglable.opened > .w-nav-list.level_2, .w-nav.type_mobile.m_layout_panel li.togglable.opened > .w-nav-list.level_2 { height: var(--submenu-h, 0px) !important; opacity: 1 !important; visibility: visible !important; transition: height .34s cubic-bezier(.25,.1,.25,1), opacity .26s ease, visibility 0s !important; } .w-nav.type_mobile .w-nav-arrow { transition: transform .34s cubic-bezier(.25,.1,.25,1) !important; } } @media screen and (max-width: 1024px) { .w-nav.type_mobile.m_layout_panel li.menu-item-4323 { display: block !important; margin-top: 14px !important; padding: 4px 20px 22px !important; } .w-nav.type_mobile.m_layout_panel li.menu-item-4323 .w-btn-wrapper { display: block !important; margin: 0 !important; text-align: center !important; } .w-nav.type_mobile.m_layout_panel li.menu-item-4323 .w-btn { display: flex !important; align-items: center; justify-content: center; width: 100% !important; box-sizing: border-box; padding: 16px 22px !important; border-radius: 10px; } } .trending-post-list .w-grid-item-h { position: relative; } .trending-post-list .w-grid-item-h::before { content: "Trending"; position: absolute; top: 14px; left: 14px; z-index: 5; background: #193E4B; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.18); pointer-events: none; } /* pan-y stops browser fighting horizontal drag; !important keeps Owl transition */ .us_post_carousel .owl-carousel, .us_post_carousel .owl-carousel .owl-stage-outer, .us_post_carousel .owl-carousel .owl-stage { touch-action: pan-y !important; overscroll-behavior-x: contain; } .us_post_carousel .owl-carousel .owl-stage { transition-property: transform !important; transition-duration: 0.4s !important; transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !important; will-change: transform; transform: translate3d(0, 0, 0); } .us_post_carousel .owl-carousel .owl-item, .us_post_carousel .owl-carousel .owl-item img { touch-action: pan-y !important; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; } .us_post_carousel .owl-carousel .owl-item img { backface-visibility: hidden; transform: translateZ(0); } .htp-article{max-width:100%;} .htp-article .htp-lead{font-size:1.08em;line-height:1.7;} .htp-tldr{background:#faf4ef;border-left:4px solid #c8551c;border-radius:6px;padding:20px 24px;margin:0 0 32px 0;} .htp-tldr h3{margin:0 0 8px 0;font-size:1.05em;letter-spacing:.02em;text-transform:uppercase;color:#c8551c;} .htp-tldr p{margin:0 0 12px 0;line-height:1.65;} .htp-tldr a{color:#c8551c;font-weight:600;text-decoration:none;} .htp-tldr a:hover{text-decoration:underline;} .htp-figure{margin:28px 0;text-align:center;} .htp-figure figcaption{font-size:.85em;color:#888;margin-top:8px;} .htp-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:20px 0;} .htp-table{width:100%;border-collapse:collapse;font-size:.97em;min-width:520px;} .htp-table th{background:#3a3a3a;color:#fff;text-align:left;padding:12px 14px;font-weight:600;} .htp-table td{padding:12px 14px;border-bottom:1px solid #eee;} .htp-table tr:nth-child(even) td{background:#faf9f8;} .htp-badge{display:inline-block;background:#c8551c;color:#fff;font-size:.72em;padding:2px 8px;border-radius:10px;margin-left:8px;vertical-align:middle;letter-spacing:.03em;} .htp-cols{display:flex;flex-wrap:wrap;gap:20px;margin:20px 0;} .htp-col{flex:1 1 260px;border-radius:8px;padding:18px 20px;} .htp-col h4{margin-top:0;} .htp-pros{background:#eef6ee;border:1px solid #cfe6cf;} .htp-cons{background:#fbeeee;border:1px solid #f0d4d4;} .htp-costs{list-style:none;padding:0;margin:16px 0;} .htp-costs li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #eee;} .htp-cost-price{font-weight:600;color:#c8551c;white-space:nowrap;} .htp-cta{background:#c8551c;color:#fff;border-radius:10px;padding:28px 24px;text-align:center;margin:32px 0;} .htp-cta h3{margin-top:0;color:#fff;} .htp-btn{display:inline-block;background:#fff;color:#c8551c;font-weight:600;padding:12px 24px;border-radius:6px;text-decoration:none;margin-top:8px;} .htp-faq details{border:1px solid #e5e5e5;border-radius:8px;margin:10px 0;padding:0 16px;} .htp-faq summary{cursor:pointer;font-weight:600;padding:14px 0;} .htp-faq-a{padding:0 0 14px 0;color:#444;} .postid-8624 .htp-tldr{background:#eef3f8;border-left-color:#2f5d8a;} .postid-8624 .htp-tldr h3,.postid-8624 .htp-tldr a,.postid-8624 .htp-cost-price{color:#2f5d8a;} .postid-8624 .htp-badge,.postid-8624 .htp-cta{background:#2f5d8a;} .postid-8624 .htp-btn{color:#2f5d8a;} .postid-8627 .htp-tldr{background:#f2f4ea;border-left-color:#5a6b3c;} .postid-8627 .htp-tldr h3,.postid-8627 .htp-tldr a,.postid-8627 .htp-cost-price{color:#5a6b3c;} .postid-8627 .htp-badge,.postid-8627 .htp-cta{background:#5a6b3c;} .postid-8627 .htp-btn{color:#5a6b3c;} .postid-8629 .htp-tldr{background:#e9f3f2;border-left-color:#1f7a6f;} .postid-8629 .htp-tldr h3,.postid-8629 .htp-tldr a,.postid-8629 .htp-cost-price{color:#1f7a6f;} .postid-8629 .htp-badge,.postid-8629 .htp-cta{background:#1f7a6f;} .postid-8629 .htp-btn{color:#1f7a6f;} [class*="products-slider-grid-layout"] .owl-carousel:not(.owl-loaded) { min-height: 600px; display: flex; align-items: center; justify-content: center; } .page-title-26-row .l-section-img { background-size: cover !important; background-position: center 35% !important; } @media (max-width: 1024px) { .page-title-26-row.full_height { min-height: calc(100vh - var(--header-height, 80px)) !important; height: auto !important; } } @media (max-width: 767px) { .page-title-26-row .l-section-h { padding-top: 80px !important; padding-bottom: 0 !important; } } .us_custom_6a4f0050 .w-btn.us-btn-style_2 { padding: 18px 33px !important; } .menu-label-header > a { pointer-events: none; cursor: default; font-size: 11px !important; letter-spacing: 1px; text-transform: uppercase; color: #9b8f96 !important; opacity: 1; padding-top: 14px !important; padding-bottom: 2px !important; } .menu-label-header > a:hover { color: #9b8f96 !important; background: transparent !important; } } } li.menu-label-header, li.menu-label-header > a { pointer-events: none !important; cursor: default !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } li.menu-label-header:hover, li.menu-label-header:hover > a, li.menu-label-header > a:hover, li.menu-label-header > a:focus { background: transparent !important; background-color: transparent !important; color: #9b8f96 !important; } } } li.menu-label-header .w-nav-anchor, li.menu-label-header .w-nav-title { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } li.menu-label-header .w-nav-anchor:hover, li.menu-label-header .w-nav-anchor:focus, li.menu-label-header.w-active > .w-nav-anchor { background: transparent !important; background-color: transparent !important; color: #9b8f96 !important; box-shadow: none !important; } li.menu-label-header .w-nav-anchor:hover .w-nav-title { color: #9b8f96 !important; } .w-nav.type_mobile li.menu-label-header > .w-nav-anchor, .w-nav.type_mobile li.menu-label-header > a { pointer-events: none !important; cursor: default !important; min-height: 0 !important; padding: 18px 20px 4px !important; border-top: 1px solid #ece7ea !important; background: transparent !important; } .w-nav.type_mobile li.menu-label-header .w-nav-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #6b4736 !important; } .w-nav.type_mobile li.menu-label-header:first-child > .w-nav-anchor, .w-nav.type_mobile li.menu-label-header:first-child > a { border-top: 0 !important; } } } } .w-nav.type_desktop li.menu-label-header .w-nav-title, .w-nav.type_mobile li.menu-label-header .w-nav-title, .w-nav.type_desktop li.menu-label-header > a, .w-nav.type_mobile li.menu-label-header > a { color: #6b4736 !important; font-weight: 700 !important; letter-spacing: 1.5px !important; } .w-nav.type_desktop li.menu-label-header, .w-nav.type_mobile li.menu-label-header, .w-nav ul li.menu-label-header { border-top: 1px solid rgba(107, 71, 54, 0.28) !important; margin-top: 10px !important; } .w-nav.type_desktop li.menu-label-header > a, .w-nav.type_mobile li.menu-label-header > a { padding-top: 22px !important; } .w-nav.type_desktop li.menu-label-header:first-child, .w-nav.type_mobile li.menu-label-header:first-child, .w-nav ul li.menu-label-header:first-child { border-top: 0 !important; margin-top: 0 !important; } .manufacturer-carousel .w-grid-item-h, .manufacturer-carousel .w-post-elm.post_image { border-radius: 30px !important; overflow: hidden !important; } .manufacturer-carousel .w-post-elm.post_image { position: relative !important; height: 100% !important; } .manufacturer-carousel .w-post-elm.post_image img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; } /* ===== Hero consultation-box overlap restore (approx 24px below hero) ===== */ /* Move clipping from the row to the slider layer so the box can overlap without clipping rounded corners. */ .home-featured-row { overflow: visible !important; } .home-featured-row > .l-section-slider { overflow: hidden !important; } @media (min-width: 901px) { .home-featured-right-box { position: relative !important; z-index: 2 !important; transform: translateY(24px) !important; } } /* ===== end hero overlap ===== */ /* ===== Homepage hero slider: fill layer + fix -60px offset strip ===== */ body.page-id-10 .home-featured-row .w-slider-h { top: 0 !important; bottom: auto !important; height: 100% !important; } /* ===== Shorten desktop hero height ===== */ @media (min-width: 901px) { body.page-id-10 .home-featured-row { min-height: clamp(720px, calc(100svh - 96px), 840px) !important; } } /* ===== end hero slider/height fix ===== */ } } } /* ===== Keep homepage hero text card near the bottom ===== */ body.page-id-10 .home-featured-row .home-featured-left-box.w-vwrapper { margin-bottom: 40px !important; } @media (max-width: 767px) { .elfsight-widget-google-maps.eapps-google-maps { position: relative !important; height: 320px !important; min-height: 320px !important; max-height: 320px !important; overflow: hidden !important; } .elfsight-widget-google-maps.eapps-google-maps .eapps-google-maps-inner { height: 100% !important; min-height: 0 !important; } .elfsight-widget-google-maps.eapps-google-maps .eapps-google-maps-map-container { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } .elfsight-widget-google-maps.eapps-google-maps .eapps-google-maps-bar-container { display: none !important; } } /* Windows & Doors page: shorter product photos so category labels are visible without scrolling */ .page-id-2071 .home-products-inner-row .w-image img, .page-id-2058 .home-products-inner-row .w-image img { aspect-ratio: 5 / 6 !important; } /* ===== Meet the Experts: keep team headshots from cropping the top of heads ===== */ .photo img { object-position: 50% 18% !important; } /* Scott Kingsley: raise headshot to match the other Dowagiac cards */ .photo img[src*="Scott-Kingsley"] { object-position: 50% 77% !important; } /* ==== HANNAPEL MOBILE REFINEMENTS START ==== */ /* ========================================================================== HANNAPEL.COM - MOBILE UX/UI REFINEMENTS Added via Appearance > Customize > Additional CSS All rules scoped to mobile breakpoints; desktop/tablet >767px untouched. Sections map to the project brief. Remove this block to fully revert. ========================================================================== */ /* -------------------------------------------------------------------------- SECTION 1 - WINDOWS PRODUCT CATALOG (/products/windows/) Two-column compact cards under 600px. Grid: .us_post_list.layout_4500 (usg_* classes are unique to this grid, so these rules touch nothing else). -------------------------------------------------------------------------- */ @media (max-width: 600px) { /* Force a 2-column grid with ~11px gap (override theme --columns) */ body.page-id-4501 .us_post_list.layout_4500 { --columns: 2 !important; --gap: 11px !important; } body.page-id-4501 .us_post_list.layout_4500 .w-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; column-gap: 11px !important; row-gap: 11px !important; } /* Card fills its grid cell so buttons align across a row */ body.page-id-4501 .us_post_list.layout_4500 .w-grid-item-h { height: 100%; padding: 12px 12px 14px !important; } body.page-id-4501 .us_post_list.layout_4500 .usg_vwrapper_1 { height: 100%; } /* The theme's product vwrapper has 15px side padding that squeezed the content to ~65px, forcing titles onto 5-6 uneven lines and stopping the button from filling. Remove it on mobile so title/price/button use the full card width. */ body.page-id-4501 .us_post_list.layout_4500 .usg_vwrapper_1 { padding-left: 0 !important; padding-right: 0 !important; } /* Reorder for a compact card: image -> name -> price tier -> button */ body.page-id-4501 .us_post_list.layout_4500 .usg_post_image_1 { order: 1 !important; margin-bottom: 8px; } body.page-id-4501 .us_post_list.layout_4500 .usg_post_title_1 { order: 2 !important; } body.page-id-4501 .us_post_list.layout_4500 .usg_hwrapper_1 { order: 3 !important; } /* price row */ body.page-id-4501 .us_post_list.layout_4500 .usg_btn_1 { order: 4 !important; margin-top: auto !important; } /* Hide on mobile only (still present in HTML + desktop): description snippet and the redundant window-type category label. */ body.page-id-4501 .us_post_list.layout_4500 .usg_post_custom_field_1 { display: none !important; } /* short_grid_snippet description */ body.page-id-4501 .us_post_list.layout_4500 .usg_post_taxonomy_1 { display: none !important; } /* redundant category label */ body.page-id-4501 .us_post_list.layout_4500 .w-grid-item .wpb_wrapper ul { display: none !important; } /* any feature bullets */ /* Product name: UNIFORM 3-line block on every card, so the price and the button sit at the same height across a row (clean, even grid). With the wrapper padding removed above, every title fits within 3 lines even at 320px, so nothing is cut off. */ body.page-id-4501 .us_post_list.layout_4500 .usg_post_title_1 { font-size: 13px !important; line-height: 1.3 !important; margin: 0 0 6px !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: calc(1.3em * 3) !important; /* reserve exactly 3 lines */ word-break: normal !important; overflow-wrap: break-word; } /* Price tier: keep compact, spaced from title */ body.page-id-4501 .us_post_list.layout_4500 .usg_hwrapper_1 { margin: 0 0 8px !important; } body.page-id-4501 .us_post_list.layout_4500 .ab_price_level { font-size: 14px !important; } /* Full-width "See Product" button on ONE line. The theme adds a fa-long-arrow-right icon (icon_atright) that pushed the label to a 2nd row on narrow cards - hide it on mobile and keep the label centered. */ body.page-id-4501 .us_post_list.layout_4500 .usg_btn_1 { display: flex !important; align-items: center; justify-content: center; width: 100% !important; box-sizing: border-box; min-height: 44px; padding: 11px 8px !important; font-size: 13px !important; white-space: nowrap; } body.page-id-4501 .us_post_list.layout_4500 .usg_btn_1 .w-btn-label { overflow: hidden; text-overflow: ellipsis; } body.page-id-4501 .us_post_list.layout_4500 .usg_btn_1 i { display: none !important; } /* hide the arrow on mobile */ /* Uniform square image box on every card (source images vary 402x402, 402x265, 380x351...). A fixed 1:1 box keeps all cards the same height so title/price/button line up. object-fit:CONTAIN shows each window image in full (scaled to fit, centered on white) instead of cropping the wider / shorter ones - nothing gets cut off. */ body.page-id-4501 .us_post_list.layout_4500 .usg_post_image_1 { aspect-ratio: 1 / 1 !important; overflow: hidden; } body.page-id-4501 .us_post_list.layout_4500 .usg_post_image_1 img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center; } } /* -------------------------------------------------------------------------- SECTION 1b - IMPREZA GRID FILTER "active count" badge position The theme's badge (.w-filter-opener::after, shown when a filter is applied) only sets bottom:50%, so it floats to the wrong spot and overhangs the top of the "Filter by Type" button. Anchor it neatly, vertically centred at the right, and reserve space so it never overlaps the label. -------------------------------------------------------------------------- */ .w-filter.active .w-filter-opener { padding-right: 2.6em !important; } .w-filter-opener::after { top: 50% !important; bottom: auto !important; right: 10px !important; left: auto !important; transform: translateY(-50%) !important; } /* -------------------------------------------------------------------------- SECTION 1c - CABINETRY CATALOG (/products/cabinetry/) "See Product" button Same theme arrow (fa-long-arrow-right) wraps the label to ~3 rows on mobile. Grid: .us_post_list.layout_6242 (products-grid-cabinets). Put the button on ONE line: hide the arrow, keep the label on a single row, full-width target. -------------------------------------------------------------------------- */ @media (max-width: 600px) { .us_post_list.layout_6242 .usg_btn_1 { display: flex !important; align-items: center; justify-content: center; width: 100% !important; box-sizing: border-box; min-height: 44px; padding: 11px 8px !important; font-size: 13px !important; white-space: nowrap; } .us_post_list.layout_6242 .usg_btn_1 .w-btn-label { overflow: hidden; text-overflow: ellipsis; } .us_post_list.layout_6242 .usg_btn_1 i { display: none !important; } /* hide the arrow on mobile */ } /* -------------------------------------------------------------------------- SECTION 3 - CONSULTATION FORM (/request-design-consultation/, page-id-1455) Gravity Forms #gform_wrapper_1. Presentation only - no fields/logic changed. Scoped to page-id-1455 + max-width:600px so desktop/other forms untouched. -------------------------------------------------------------------------- */ @media (max-width: 600px) { /* Tighten vertical rhythm modestly (16px -> 13px) without cramping */ .page-id-1455 #gform_wrapper_1 .gform_fields { grid-row-gap: 13px !important; row-gap: 13px !important; } /* Consistent label / description / validation spacing */ .page-id-1455 #gform_wrapper_1 .gfield_label { margin: 0 0 5px !important; line-height: 1.3 !important; } .page-id-1455 #gform_wrapper_1 .gfield_description { margin: 5px 0 0 !important; padding: 0 !important; } .page-id-1455 #gform_wrapper_1 .gfield_validation_message, .page-id-1455 #gform_wrapper_1 .validation_message { margin: 5px 0 0 !important; padding: 6px 9px !important; font-size: 14px !important; line-height: 1.35 !important; } /* Keep field text at 16px (prevents iOS zoom) + touch-friendly heights */ .page-id-1455 #gform_wrapper_1 .ginput_container input:not([type=radio]):not([type=checkbox]), .page-id-1455 #gform_wrapper_1 .ginput_container select, .page-id-1455 #gform_wrapper_1 .ginput_container textarea { font-size: 16px !important; min-height: 46px; box-sizing: border-box; width: 100%; } .page-id-1455 #gform_wrapper_1 .ginput_container textarea { min-height: 110px; } /* Stack half-width fields (email / phone) full width on phones */ .page-id-1455 #gform_wrapper_1 .gfield--width-half { grid-column: 1 / -1 !important; } /* Radio / checkbox: single comfortable column, 44px tap rows */ .page-id-1455 #gform_wrapper_1 .gfield_radio, .page-id-1455 #gform_wrapper_1 .gfield_checkbox { display: block !important; } .page-id-1455 #gform_wrapper_1 .gchoice { display: flex; align-items: center; min-height: 44px; padding: 6px 0 !important; margin: 0 !important; } .page-id-1455 #gform_wrapper_1 .gchoice input[type=radio], .page-id-1455 #gform_wrapper_1 .gchoice input[type=checkbox] { width: 20px; height: 20px; margin: 0 10px 0 0; flex: 0 0 auto; } .page-id-1455 #gform_wrapper_1 .gchoice label { margin: 0 !important; line-height: 1.3 !important; } /* Full-width, comfortable submit button (GF 2.5 uses a