/* * Overrides that cannot come from the reference stylesheets. */ /* 1) ElementsKit testimonial markup is delivered as an HTML widget (same markup, so the vendored CSS still targets it) but without the widget's swiper initialiser every slide stacks vertically. Lay the visible slides out the way the reference renders them at rest: two per row, 15px apart, rest clipped. */ .elementor-widget-html .elementskit-testimonial-slider .swiper{overflow:hidden;} .elementor-widget-html .elementskit-testimonial-slider .swiper-wrapper{display:flex;flex-wrap:nowrap;gap:15px;} .elementor-widget-html .elementskit-testimonial-slider .swiper-slide{flex:0 0 calc(50% - 7.5px);width:calc(50% - 7.5px);max-width:calc(50% - 7.5px);} /* Equal-height testimonial cards with the author block pinned to the bottom. The two quotes differ in length, so letting the avatar sit right after the text left the left and right photos at different heights. The target's cards are a fixed 300px, which keeps both avatars on the same line. Card DOM: .swiper-slide-inner > .elementskit-single-testimonial-slider > { .elementskit-commentor-header, .elementskit-commentor-content, .elementskit-commentor-bio } */ .elementor-widget-html .elementskit-testimonial-slider .swiper-slide{display:flex;} .elementor-widget-html .elementskit-testimonial-slider .swiper-slide-inner{ display:flex; flex-direction:column; width:100%; min-height:300px; box-sizing:border-box; } .elementor-widget-html .elementskit-testimonial-slider .elementskit-single-testimonial-slider{ display:flex; flex-direction:column; flex:1 1 auto; width:100%; box-sizing:border-box; /* The target's card body carries 30px padding; the widget-level rules that normally supply it do not apply to this HTML-rendered markup. */ padding:30px; } .elementor-widget-html .elementskit-testimonial-slider .elementskit-commentor-bio{margin-top:auto;} @media (max-width: 767px){ /* Two 50% cards cannot fit a phone; stack them like the target's slider. */ .elementor-widget-html .elementskit-testimonial-slider .swiper-wrapper{flex-wrap:wrap;} .elementor-widget-html .elementskit-testimonial-slider .swiper-slide{ flex:0 0 100%; width:100%; max-width:100%; } } /* 2) The export lowercased SVG attributes, so inline icons had no intrinsic size; build-bundle.js restores viewBox and this keeps them in a sane box. Scoped to the testimonial markup only: a blanket `.elementor-widget-html svg{width:16px}` also shrank the YouTube facade's 68x48 play glyph to 16px. */ .elementor-widget-html .elementskit-testimonial-slider svg{width:16px;height:16px;max-width:16px;max-height:16px;} .elementor-widget-html .elementskit-testimonial-slider .elementskit-watermark-icon svg, .elementor-widget-html .elementskit-testimonial-slider .elementskit-commentor-watermark svg{width:48px;height:48px;max-width:48px;max-height:48px;} .elementor-widget-html .elementskit-testimonial-slider .elementskit-commentor-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .elementor-widget-html .elementskit-testimonial-slider .elementskit-stars{display:flex;gap:2px;margin:0;padding:0;list-style:none;} /* 2b) Testimonial card internals, matched to the target: round avatar with the name/role stacked to its right, and the big quote glyph sitting in the bottom-right corner instead of next to the stars. */ .elementor-widget-html .elementskit-testimonial-slider .elementskit-single-testimonial-slider{position:relative;} .elementor-widget-html .elementskit-testimonial-slider .elementkit-commentor-details{ display:flex; align-items:center; gap:18px; } .elementor-widget-html .elementskit-testimonial-slider .elementskit-commentor-image, .elementor-widget-html .elementskit-testimonial-slider .ekit-testimonial--avatar{ flex:0 0 auto; margin:0; } .elementor-widget-html .elementskit-testimonial-slider .elementskit-commentor-image img, .elementor-widget-html .elementskit-testimonial-slider .ekit-testimonial--avatar img{ width:70px; height:70px; border-radius:50% !important; object-fit:cover; display:block; } .elementor-widget-html .elementskit-testimonial-slider .elementskit-profile-info{ display:flex; flex-direction:column; justify-content:center; gap:2px; } .elementor-widget-html .elementskit-testimonial-slider .elementskit-author-name{margin:0;line-height:1.2;} .elementor-widget-html .elementskit-testimonial-slider .elementskit-author-des{margin:0;line-height:1.2;color:#B81D23;} /* The watermark is inside the header in the markup; pull it out to the corner. */ /* The watermark is an ElementsKit icon-font glyph (class="icon icon-quote"). It inherited the card background colour, so it was invisible, and the generic 16px icon rule shrank it. The target shows a 48px accent glyph in the card's bottom-right corner. */ .elementor-widget-html .elementskit-testimonial-slider .elementskit-icon-content.elementskit-watermark-icon{ position:absolute !important; right:30px; bottom:30px; margin:0 !important; font-size:48px; line-height:1; color:#B81D23; } .elementor-widget-html .elementskit-testimonial-slider .elementskit-icon-content.elementskit-watermark-icon i{ font-size:48px; line-height:1; color:#B81D23; } .elementor-widget-html .elementskit-testimonial-slider .elementskit-commentor-header{position:static;} /* 3) Showcase grid: the reference is four columns at >=1025px and two on phones. The recovered settings do not carry the count, and the 2.3.8 plugin renders .cxb-iq-grid (newer UI) instead of .cxb-b2b-products-grid, so both are pinned. */ .elementor-element-891adea .cxb-b2b-products-grid, .elementor-element-891adea .cxb-iq-grid{display:grid !important;grid-template-columns:repeat(4, minmax(0, 1fr)) !important;gap:24px !important;} @media (max-width: 1024px){ .elementor-element-891adea .cxb-b2b-products-grid, .elementor-element-891adea .cxb-iq-grid{grid-template-columns:repeat(4, minmax(0, 1fr)) !important;} } @media (max-width: 767px){ .elementor-element-891adea .cxb-b2b-products-grid, .elementor-element-891adea .cxb-iq-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} } /* 3b) The bundled plugin (2.3.8) outlines the card button and prints its accent colour from a per-render "critical css" block that only exists when its own widget renders. The grid is rendered by this theme's shortcode, so restate the target's filled-red button and the site colour variables it depends on. */ :root{ --cxb-primary-color:#B81D23; --cxb-primary-color-rgb:184, 29, 35; --cxb-primary-color-dark:#93171c; --cxb-primary-color-hover:#93171c; } .elementor-element-891adea .cxb-b2b-add-to-quote-button{ background-color:#B81D23 !important; background-image:none !important; border-color:#B81D23 !important; color:#FFFFFF !important; } .elementor-element-891adea .cxb-b2b-add-to-quote-button:hover, .elementor-element-891adea .cxb-b2b-add-to-quote-button:focus-visible{ background-color:#93171c !important; border-color:#93171c !important; color:#FFFFFF !important; } /* The target shows the MOQ line as plain text, not a chip. */ .elementor-element-891adea .cxb-b2b-product-card-price-moq, .elementor-element-891adea .cxb-b2b-card-moq{ background:transparent !important; border:0 !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; } /* 4) The footer logo rules in post-140.css target the Header & Footer plugin's own classes (.hfe-site-logo ...), which the core site-logo widget does not emit. Equivalent result: the logo spans the container at its natural ratio (684x513 on the reference). */ .elementor-element-33b50d3d img{width:100% !important;height:auto !important;max-width:100% !important;} /* 5) Header navigation colours. The installed ElementsKit (4.0.9) ships a default .elementskit-navbar-nav-default .elementskit-navbar-nav>li>a{color:#000} that the reference's older build did not have, so every nav item rendered black instead of white. Desktop: the acceptance target is an all-white bar, so every item (including the current one) is white and only hover/focus takes the accent. <=1024px ElementsKit turns this same list into an off-canvas drawer on a near white panel (#F7F7F7). White text there would be invisible, and the reference renders those items in the accent colour, so restore that per breakpoint. */ @media (min-width: 1025px){ .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav > li > a{ color:#FFFFFF !important; } .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav > li > a:hover, .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav > li > a:focus{ color:#B81D23 !important; } .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav > li.current-menu-item > a, .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav > li.current_page_item > a, .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav > li.current-menu-ancestor > a{ color:#FFFFFF !important; } } /* <=1024px ElementsKit turns this list into an off-canvas drawer on a near white panel (#F7F7F7). The target shows dark text there with the accent colour on the current page, so only the current item is tinted. */ @media (max-width: 1024px){ .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav > li.current-menu-item > a, .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav > li.current_page_item > a, .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav > li.current-menu-ancestor > a{ color:#B81D23 !important; } } /* 7) YouTube facade, copied from the export's own codex-yt-facade style block. The target does not embed the player until play is pressed. */ .cx-yt-facade{position:relative;display:block;width:100%;padding-top:56.25%;background:#0b0b0b;cursor:pointer;overflow:hidden} .cx-yt-facade-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;opacity:.92} .cx-yt-facade:hover .cx-yt-facade-play{opacity:1} .cx-yt-facade iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0} .cx-yt-facade-label{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;color:#fff;font:400 14px/1.4 inherit;background:linear-gradient(transparent,rgba(0,0,0,.6))} /* 5b) Products dropdown items. The panel is near-black (#040404) exactly as on the target, but the installed ElementsKit's default `.elementskit-submenu-panel>li>a{color:#000}` made the item labels black on black, so the panel looked empty. The target renders them with the global text colour (#FAFAFA). */ .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav .elementskit-submenu-panel > li > a{ color:#FAFAFA !important; } .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav .elementskit-submenu-panel > li > a:hover, .elementor-138 .elementor-element.elementor-element-7f545ad3 .elementskit-navbar-nav .elementskit-submenu-panel > li > a:focus{ color:#FAFAFA !important; } /* 9) Footer logo size. post-140.css asks for width:25%, but its rule is written against the HFE markup (.hfe-site-logo .hfe-site-logo-container img) while this footer renders Elementor's own site-logo widget, so the rule never matched and the logo stretched to the full column. The target shows it at 25% (~171px). */ .elementor-element-33b50d3d img{ width:25% !important; height:auto !important; } /* 10) Products archive (/products/). The bundled 2.3.8 archive adds a sidebar module column, a per-page/sort toolbar and a three-column grid, and its cards print price, excerpt and a category line. The target's archive (its own "template2") is a single column of four-across cards showing only title, MOQ and Inquire Now. */ body.post-type-archive-cxb_products .cxb-b2b-template2-layout.has-sidebar{display:block !important;} body.post-type-archive-cxb_products .cxb-b2b-template2-layout > *:not(.cxb-b2b-template2-content){display:none !important;} body.post-type-archive-cxb_products .cxb-b2b-template2-content{ width:100% !important; max-width:100% !important; min-width:0 !important; } body.post-type-archive-cxb_products .cxb-b2b-archive-toolbar, body.post-type-archive-cxb_products .cxb-b2b-archive-toolbar-controls{display:none !important;} body.post-type-archive-cxb_products .cxb-b2b-products-grid{ display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)) !important; gap:24px !important; } @media (max-width: 1024px){ body.post-type-archive-cxb_products .cxb-b2b-products-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;} } body.post-type-archive-cxb_products .cxb-b2b-product-card .cxb-b2b-card-price, body.post-type-archive-cxb_products .cxb-b2b-product-card .cxb-b2b-product-excerpt, body.post-type-archive-cxb_products .cxb-b2b-product-card .cxb-b2b-product-meta, body.post-type-archive-cxb_products .cxb-b2b-product-card .cxb-b2b-list-detail-button{display:none !important;} /* The target centres the card copy and has no add-to-quote corner badge. */ body.post-type-archive-cxb_products .cxb-b2b-product-title, body.post-type-archive-cxb_products .cxb-b2b-product-card-price-moq, body.post-type-archive-cxb_products .cxb-b2b-card-moq{ text-align:center !important; justify-content:center !important; } /* The target has no corner badge on archive cards. Hide every non-image direct child of the thumbnail (the badge is a