/* ========================================================================== Fidelity patches for the static clone. Loaded last, after the vendored theme stylesheet. Anything here is a deliberate deviation from the original CSS -- keep it small and documented, since every rule is a place the clone can drift from the source. ========================================================================== */ /* ========================================================================== PHASE 2 BRAND PALETTE -- 1705 Holdings The Builty theme hard-codes its neon-yellow accent (#ffee02) across ~50 rules in bundle.css with NO CSS variable to flip. These rules mirror each accent- bearing selector verbatim and re-point it to the 1705 Holdings warm brushed gold. overrides.css loads after bundle.css at the same precedence, so these equal-specificity rules win by source order. Border shorthands are narrowed to border-*-color so the theme's angled-corner geometry is preserved. Auto-derived from every #ffee02 rule; editor-only (.elementor-editor-active) rules are excluded. The homepage's dark text is already neutral (#212529 / #000), so no text-color shift is needed; the theme's indigo #231E41 only appears on blog/shop pages that are not built. accent #ffee02 -> #C6A15B (warm brushed gold) darker #958e09 -> #9A7A3E (hover/pressed; WooCommerce-only, inert here) ========================================================================== */ /* --- accent: #ffee02 -> #C6A15B ------------------------------------------- */ .theme-btn:after{border-top-color:#C6A15B} .acc2 .accordion-item.collapsed button:before,.acc2 .accordion-item button:before{border-top-color:#C6A15B} .shape:after{border-left-color:#C6A15B} .footer-style-one .footer-p-2 .footer-col form button:before,body .footer-style-one .footer-p-2 form.wpforms-form button:before{background-color:#C6A15B} .desktop-nav .extras .theme-btn:after{border-top-color:#C6A15B} .pricing-plans .price-box:hover .theme-btn:after{border-top-color:#C6A15B} .preloader figure:after{border-top-color:#C6A15B} .first .tab-data .map-pin .location:before{border-top-color:#C6A15B} .sb-404 .search-form input[type="submit"]{background:#C6A15B} .sb-404__img::before{background-color:#C6A15B} .widget-area .widget_search input.search-submit,.wp-block-search .wp-block-search__button{background-color:#C6A15B} .post-text-bottom .tags-links a,.wp-block-tag-cloud .tag-cloud-link,.widget-area .widget_tag_cloud .tag-cloud-link{background-color:#C6A15B} .widget-area td#today{background:#C6A15B} .sticky .blog-post:after{border-left-color:#C6A15B} .social-share a:hover,.social-share a:hover .icon{color:#C6A15B} .wp-block-pullquote blockquote{border-bottom-color:#C6A15B} .wp-block-button a.wp-block-button__link{background:#C6A15B} .wp-block-button.is-style-outline a.wp-block-button__link{border-color:#C6A15B;color:#C6A15B} .post-password-form input[type="submit"]{background:#C6A15B} body div.wpforms-container .wpforms-form button.theme-btn{background:#C6A15B;border-color:#C6A15B} body div.wpforms-container .wpforms-form button.theme-btn:after{border-top-color:#C6A15B} body div.wpforms-container .wpforms-form button.theme-btn:hover{border-color:#C6A15B} .gform_wrapper input.gform_button,.gform_wrapper button[type="button"]{background:#C6A15B;border-color:#C6A15B} .gform_wrapper input.gform_button:hover{border-color:#C6A15B} .social-share a:hover .fab.fa-twitter.x-icon svg path,body.light-d .social-share a:hover .fab.fa-twitter.x-icon svg path{fill:#C6A15B} .mil-category-list li span.mil-active:after{background:#C6A15B} .sb-cart-number{background-color:#C6A15B} .sb-input-number-frame .sb-input-number-btn{background-color:#C6A15B} .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content{background-color:#C6A15B} .woocommerce .widget_price_filter .ui-slider .ui-slider-range{background-color:#C6A15B} .woocommerce .widget_price_filter .ui-slider .ui-slider-handle{background-color:#C6A15B} .woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce-mini-cart__buttons #respond input#submit,.woocommerce-mini-cart__buttons a.button,.woocommerce-mini-cart__buttons button.button,.woocommerce-mini-cart__buttons input.button{border-color:#C6A15B;background:#C6A15B} .woocommerce-mini-cart__buttons a.button.checkout,.woocommerce-mini-cart__buttons button.button.checkout,.woocommerce-mini-cart__buttons input.button.checkout,.woocommerce .woocommerce-mini-cart__buttons a.button.checkout,.woocommerce .woocommerce-mini-cart__buttons button.button.checkout,.woocommerce .woocommerce-mini-cart__buttons input.button.checkout{background-color:#C6A15B} .woocommerce #respond input#submit.alt,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background-color:#C6A15B} .product-single .sb-badge,.sb-badges .sb-badge{background:#C6A15B} .select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected]{background:#C6A15B} body.light-d .cart .cart-table .c-c .c-data .cr-svg{background-color:#C6A15B} .footer-style-one .footer-p-2 .footer-col ul li svg,.contact-form-2 .info ul li svg,.team-detail .team-data .t-tel .data svg,.video-play-btn svg{fill:#C6A15B} .video-play-btn i,.footer-style-one .footer-p-3 .footer-col p i,.estimated-price .est-form .est-main .est-price span.est-price__value,.what-we-build .wwb-ul li.active:before,.w-counter ul li h2,.first .nav-tabs li button.active,.footer-style-one .footer-p-2 .footer-col ul li i,.contact-form-2 .info ul li i,.team-detail .team-data .t-tel .data i,body.light-d .social-share a:hover .icon,.sidebar .widget.widget_recent_entries ul li a:hover{color:#C6A15B} .dark-bg,.service-style-one .service-data:hover .svg-icon:before,.about-style-one .about-data-left:before,.counter-style-one .counter-data:before,.project-style-one .project-post .project-data:hover .project-icon,.project-style-one:before,.team-style-one .open .team-data .team-image:before,.theme-btn,.theme-btn:hover i:after,.featured-slider-one .owl-item.active:before,.featured-slider-one .owl-item.active:after,.team-style-one .team-slider-nav button:hover:before,.core-features .accordion-button:not(.collapsed),.core-features .video:before,.core-features .shape:before,.renovation:before,.renovation:after,.renovation .reno-data:before,.client-review-slider .slider-data .bio .icon,.blog-style-one .blog-data .blog-date,.blog-style-one .blog-data .blog-date:before,.blog-style-one .blog-post .blog-image a:before,.blog-style-one .blog-post .blog-image:before,.footer-style-one .footer-p-2 .footer-col form button:before,.desktop-nav .nav-bar ul>li ul.sub-menu li a:hover:before,.desktop-nav .nav-bar>ul>li.menu-item-has-children>ul.sub-menu:before,.our-goal .data figure:before,.pricing-plans .price-box:hover .theme-btn,.pricing-plans .features,.service-style-two .service-two-box:hover:before,.service-style-two .service-two-box.last span,.certificates .data figure:before,.certificates .c-slider .c-main .c-first figure:before,.blog-style-two .blog-item .blog-date:before,.blog-style-two .blog-item:before,.blog-slider .owl-stage .owl-item.active:nth-child(2) .blog-item:before,.estimated-price .est-form .checkk input:checked+label,.estimated-price:before,.estimated-price:after,.contact-us .c-data ul li a i:before,.contact-us .c-cards .card .address,.heading.heading-style-3 h2 span:before,.history-style-one .history-data a,.cta-section .cta-data figure:before,.ratings,.team-style-two .team-social-medias>a,.team-style-two .team-data:before,.project-completed .prj-slider-nav button,.project-completed .proj-image figure:before,.project-completed .proj-image figure:after,.contact-form-one .accordion-button:not(.collapsed),.contact-form-one:before,.blog-style-three .blog-posts .date:before,.featured-section-three .image:before,.featured-section-three .image:after,.about-how-it-works .y-box,.contact-form-2 .bio,.video-popup:before,.innovation ul li:hover,.builty-pagination a:hover,.sidebar .box h3:before,.sidebar .widget h4.widget-title:before,.sidebar .widget h3:before,.sidebar .widget h2:before,.sidebar .box.recent-posts ul li:hover a,.what-we-build .wwb-ul li.active figure:before,.mobile-nav>ul li.menu-item-has-children.active ul.sub-menu li a:before,.project-d-detail .icon,.next-prev-projects li a,.next-prev-projects li a:hover,.comment .c-data .c-r-btn,.team-detail .image figure:before,.desktop-nav .extras .slideDown,.pd-details .nav-pills .nav-link.active,body.light-d .pd-details .nav-pills .nav-link.active,.rev-tab .total-reviews,.cart .update-cart form button,.cart-t-payment-m .payment-method button,.history .h-box figure:before,#timeline .fill,.popups.modal:before,.desktop-nav .extras a.pr-cart>span,.cart-popup .cart-btns a.checkout,.preloader,.mobile-nav.desktop-menu,.gallery-style-one a:before,.cart .cart-table .c-c .c-data .cr-svg:hover,.first .tab-data .map-pin,.first .tab-data .map-pin .location{background-color:#C6A15B} .service-style-one .service-data .icon,.service-style-one .service-data .svg-icon:before,.project-style-one .project-post .project-data:hover,.theme-btn,.featured-slider-one .owl-nav button,.team-style-one .team-slider-nav button:hover,.video-play-btn,.footer-style-one .footer-p-2 .footer-col form button:before,.footer-style-one .footer-p-3 .footer-col a:hover:after,.footer-style-one .footer-p-3 .footer-col a:after,.mobile-nav.desktop-menu .social-medias a:hover:after,.mobile-nav.desktop-menu .social-medias a:after,.desktop-nav .nav-bar ul>li.menu-item-has-children>ul.sub-menu,.pricing-plans .price-box:hover .theme-btn,.certificates .data .extras:before,.certificates .c-slider .c-main .c-first,.estimated-price .est-form .checkk label,.form-control:focus,.contact-us .c-data ul li a.active img,.contact-us .c-data ul li a.active:before,.project-completed .prj-slider-nav button,.contact-form-one .accordion-button:focus,textarea:focus,textarea:focus-visible,.construction-services .services-nav ul li button.nav-link.active,.builty-pagination a.prev:hover,.builty-pagination a.next:hover,.builty-pagination a.page-numbers:hover,.blog-style-one.blog-style-three .blog-data .blog-date,.next-prev-projects li a:hover,.category.social-medias ul li a:after,.category.shape.form form input:focus,.pd-quality input:focus,.cart .c-c .c-quality input:focus,.cart .cart-table,.checkout .billing form input:focus,.cart-t-payment-m .payment-method button,.cart-popup .cart-btns a.checkout,.box form input:focus,.featured-slider-one .owl-nav button.owl-prev:before,.featured-slider-one .owl-nav button.owl-next:before,.cart .cart-table .c-c .c-data .cr-svg:hover,.first .tab-data .map-pin .location{border-color:#C6A15B} .acc2 .accordion-item button:before{border-top-color:#C6A15B} .team-detail .team-data .t-tel .theme-btn:after{border-top-color:#C6A15B} /* --- darker companion: #958e09 -> #9A7A3E (WooCommerce only) --------------- */ :root{--wc-highlight:#9A7A3E} .woocommerce span.onsale{background-color:#9A7A3E} .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{color:#9A7A3E} .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock{color:#9A7A3E} .woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{color:#9A7A3E} #add_payment_method .cart-collaterals .cart_totals .discount td,.woocommerce-cart .cart-collaterals .cart_totals .discount td,.woocommerce-checkout .cart-collaterals .cart_totals .discount td{color:#9A7A3E} /* --- Phase 2 brand refinements -------------------------------------------- */ /* The accent-swap above turned the full-bleed preloader gold; a charcoal splash is more on-brand ("little gold accent") and the metallic-silver logo reads crisply on it. The gold spinner ring (.preloader figure:after) stays. */ .preloader{background-color:#1c1c1c} /* Single-page anchor nav: keep the sticky header (~108px) from covering the section a nav link jumps to. */ #about,#services,#projects,#why-us,#estimate,#contact{scroll-margin-top:120px} /* Scroll-to-top button: the theme fills it from a THIRD yellow, #fffab3, in a grouped rule the #ffee02 mirror above never touched (.light-bg-yellow,...,button.scrollTopStick.active,...{background-color:#fffab3}). It was the last yellow left on the page. None of that rule's other selectors exist in our markup, so the button is overridden on its own rather than mirroring the whole group. The arrow must move with it: the theme paints it white and blends it with `mix-blend-mode:difference`, which is what made it read black on the pale yellow -- over gold the same blend resolves to #395EA4, a blue arrow. Charcoal at normal blend instead, matching the About badge disc and the why-us seals. */ button.scrollTopStick.active{background-color:#C6A15B} button.scrollTopStick i{color:#1c1c1c;mix-blend-mode:normal} /* ========================================================================== HEADER LAYOUT -- 1705 Holdings Layout, not palette. The theme's header row was authored for Builty's demo labels; 1705's menu does not fit it. Two independent fixes below. ========================================================================== */ /* --- 1. The menu column is too narrow for a five-item menu ----------------- */ /* Above 1024px nothing overrides .elementor-column.elementor-col-33{width:33.333%} (bundle.css), so the menu column .elementor-element-df0a0ef gets 33.333% of the 1300px container = 433px. The menu needs 495px: 5 labels (49.5 + 70.5 + 89.5 + 58 + 67.1) plus 4 x 40px gutters from .header-style-one .nav-bar>ul>li:not(:last-child){margin-right:40px}. The 61px deficit shows up as WRAPPING rather than overflow because .elementor-widget{min-width:0} removes the flex min-content floor, letting each li shrink to its longest word -- so "Our Homes" and "Why Us" broke onto two lines while the single-word labels were fine. Shortening the labels would not have fixed it (even "Homes" still needs 461px); the column has to grow. 22/48/30 rather than 25/50/25: it leaves equal gaps to the logo (197px) and the hamburger (203px), so the menu reads centred even though the narrow logo and the wide burger+CTA block are not symmetric. A true 50% split centres the menu on the page but parks it 98px closer to the hamburger than to the logo. Scoped to min-width:1201px, which is exactly where bundle.css stops applying @media(max-width:1200px){.desktop-nav .nav-bar>ul{display:none}} -- so these widths never apply at a size where the menu is not on screen. */ @media (min-width:1201px){ .elementor-643 .elementor-element.elementor-element-b410ce0{width:22%} .elementor-643 .elementor-element.elementor-element-df0a0ef{width:48%} .elementor-643 .elementor-element.elementor-element-940790b{width:30%} } /* Belt and braces: nothing in the theme pins the links to one line. */ .header-style-one .nav-bar>ul>li>a{white-space:nowrap} /* --- 2. The header row is full-bleed below its 1300px cap ------------------ */ /* .elementor-element-f8de7f1>.elementor-container is capped at 1300px and centred, but has no padding -- so at any viewport under 1300px it runs edge to edge and the logo sits at left:0 while "Get a Quote" touches the right edge (7.5px clearance at 375, 15px at 768, under the scrollbar at 1100). Every body section uses Bootstrap's .container instead, so the header was visibly out of step with the page content at those widths. Tracking Bootstrap's own container widths (rather than inventing a gutter) makes the logo land on the same grid line as the section content below it. */ @media (max-width:1300px){ .elementor-643 .elementor-element.elementor-element-f8de7f1>.elementor-container{ padding-left:12px;padding-right:12px } } @media (min-width:576px) and (max-width:1300px){ .elementor-643 .elementor-element.elementor-element-f8de7f1>.elementor-container{max-width:540px} } @media (min-width:768px) and (max-width:1300px){ .elementor-643 .elementor-element.elementor-element-f8de7f1>.elementor-container{max-width:720px} } @media (min-width:992px) and (max-width:1300px){ .elementor-643 .elementor-element.elementor-element-f8de7f1>.elementor-container{max-width:960px} } @media (min-width:1200px) and (max-width:1300px){ .elementor-643 .elementor-element.elementor-element-f8de7f1>.elementor-container{max-width:1140px} } /* --- 3. The hamburger never reaches the right gutter ----------------------- */ /* Fix 2 above put the logo on Bootstrap's grid line at the LEFT content edge. The burger did not get the mirror of that: measured at 375, the logo sits 0px from the left content edge and the burger 37px from the right. Two causes, both needed: (a) 7px of it is dead flex space. Below 1025px Elementor sizes the header row 49% / 2% / 49%, and the middle (menu) column is display:none on tablet and mobile -- so the two visible columns total 98% and the container's `justify-content:normal` parks the leftover 2% at the RIGHT end. 7px at 375, 13.9px at 768. `margin-left:auto` on the last column absorbs it without touching the percentage widths. (b) 30px of it is the burger SVG's own `margin-right`. The theme MEANT to shrink this on smaller screens -- it has step-downs to 25px at <=1366 and 15px at <=1200 -- but both are scoped `.desktop-nav .nav-bar .extras .menu-start svg` and our `.extras` is NOT inside `.nav-bar` (verified: `.menu-start.closest('.nav-bar')` is null). Neither ever matches, so the desktop 30px survives all the way to 375px. The margin is only removed where the burger is the LAST element in the row. bundle.css hides the CTA at `@media(max-width:767px){.desktop-nav .extras .theme-btn{display:none!important}}`, so above 767 those 30px are the gap between the burger and the button -- a real separator, not a gutter. Nothing is needed between 1025 and 1200: there the columns are 33.333% each, summing to 100%, and the CTA already lands flush (measured 0px at 1100). */ @media (max-width:1024px){ .elementor-643 .elementor-element.elementor-element-940790b{margin-left:auto} } @media (max-width:767px){ .desktop-nav .extras .menu-start svg{margin-right:0} } /* ========================================================================== ABOUT BADGE -- the rotating "CUSTOM HOMES / BUILT TO LAST" ring Type and counter-rotation only. Everything else -- position (bottom:75px; left:-105px), the responsive `left` overrides, the sub-480px hide and the 15s linear `rotateme` spin -- comes from bundle.css untouched, which is why the markup keeps the theme's .goal-mov class. The demo's version was a flattened PNG (Builty copy baked into the pixels); ours is inline SVG text. ========================================================================== */ .our-goal .data .goal-mov text{font-family:'Epilogue',sans-serif} /* .19em is solved, not guessed: it makes the doubled string measure 463.3px against the ring path's 464.92px (2*pi*74), so the text closes the circle with no gap and no overlap. Re-solve it with getComputedTextLength() vs path.getTotalLength() if the copy or the font ever changes. (SVG `textLength` would be the declarative way to do this, but it is not honoured on .) */ .our-goal .data .goal-mov .goal-ring-text{font-size:10.5px;font-weight:700;letter-spacing:.19em} /* Centre mark echoes the real logo: numerals over a small spaced-out suffix. */ .our-goal .data .goal-mov .goal-monogram .gm-name{font-size:24px;font-weight:800;letter-spacing:.02em} .our-goal .data .goal-mov .goal-monogram .gm-suffix{font-size:8px;font-weight:700;letter-spacing:.16em} /* The ring spins with the figure, so the centre monogram would spin too. It counter-rotates on the SAME keyframes at the same duration in reverse, which cancels exactly and keeps it upright at every breakpoint -- without having to duplicate the theme's responsive `left` values the way a sibling element would (the theme's own .goal-mov-img has no responsive override and drifted away from the ring below 992px; nesting sidesteps that bug entirely). The pivot is pinned to the SVG centre (93.5 93.5 in viewBox units) via transform-box:view-box -- NOT transform-box:fill-box/center, which would pivot on the group's own bounding box. That happens to coincide while the mark is a single centred word, but the moment the centre stacks two lines of different widths the bbox centre drifts off 93.5,93.5 and the counter-rotation makes the mark ORBIT the disc instead of sitting still. Pinning to the view-box is independent of content. */ .our-goal .data .goal-mov .goal-monogram{ transform-box:view-box; transform-origin:93.5px 93.5px; animation:rotateme 15s linear infinite reverse } /* A 15s infinite spin is exactly what reduced-motion asks us to stop. Freezing both leaves the ring at its authored 0deg with the monogram upright. */ @media (prefers-reduced-motion:reduce){ .our-goal .data .goal-mov, .our-goal .data .goal-mov .goal-monogram{animation:none} } /* ========================================================================== WHY-US SEALS -- the two crests in the #why-us carousel The demo put "The Viewpoint Construction Awards" here (c-img-1.png), an award 1705 has not won, in grey raster, on BOTH slides. Replaced by two authored crests -- same rule as the About badge: inline SVG with real text, so the copy stays editable and takes the brand gold. See owl/slides.ts for the markup. They are INLINE and not files under /brand/ because an SVG loaded through is an isolated document that neither inherits page CSS nor may fetch the Google-hosted Epilogue webfont -- the type would silently fall back to a generic sans on every visitor's machine. (Outlining the text instead would bake the copy into the art, which is the exact defect that made the demo badge unusable.) No id/defs/textPath either: the carousel triplicates its items for looping, so any id would appear six times over and every href="#id" would resolve to the first copy. bundle.css sizes this slot through `.c-first figure img{padding:30px; max-width:100%;width:auto}`, which cannot reach an inline . Rather than fight the global border-box, the 30px padding lives INSIDE the viewBox (art is inset 30 units in a 236x258 box), so the rendered box matches the 's 236x258 exactly and the card, the section height and the gold skewed slash behind are all untouched. height:auto takes the ratio from the viewBox, which is what lets the crest shrink with .c-first at its 50% and 60% breakpoints. ========================================================================== */ .certificates .c-slider .c-main .c-first figure svg{ display:block; width:236px; max-width:100%; height:auto; margin:0 auto } .certificates .c-slider .c-main .c-first figure svg text{font-family:'Epilogue',sans-serif} /* Sized against the crest's real width at each baseline, not by eye: the shield tapers below y=150, leaving ~117 units at the mark's y=176. Longest word ("WORKMANSHIP", 118.9px at 15px/.04em) rides the upper line where the crest is still full width. Re-check with getComputedTextLength() if the copy changes. */ .certificates .c-slider .c-main .c-first figure svg .seal-line{font-size:15px;font-weight:800;letter-spacing:.04em} .certificates .c-slider .c-main .c-first figure svg .seal-mark{font-size:7.5px;font-weight:700;letter-spacing:.18em} /* ========================================================================== FULL-BLEED HERO -- .featured-slider-two.hero-static Replaced the FULL-HEIGHT HERO block on 2026-07-26, when the hero stopped being a three-slide carousel and became one static frame. Most of that block existed only to contain machinery this rebuild deletes: the inactive slides' height:630px floor, the peek slab's .526 ratio, the stage-takes-its-height- from-the-tallest-item coupling, and the min-height-cannot-shrink-a-flex-child problem in the stacked regime. With one item and no stage, none of it applies. WHAT IT FIXES. Builty sized the photo as a 465x775 parallelogram and filled it with `height:100%;width:auto`, so a 3:2 source rendered 1162px wide inside a 465px window: 60% of every photo's width was discarded, the visible band was chosen by a blind translateX(-30%) identical for all three slides, and the FULL frame height was always shown -- the one axis holding the sky and the lawn. Measured at 1440x900, ~45% of the tallest element on the page was sky and grass. The arithmetic is in wiki/components/hero.md. WHY clip-path AND NOT skew. The theme skews the figure -23deg and counter- skews the +23deg; those cancel, so the house was never distorted. But a skewed wrapper also leans its RIGHT edge, leaving a triangle at the viewport edge, and it forces an oversized hand-offset img -- which is exactly what cost us control of the framing in the first place. A clip-path leaves the img a plain object-fit:cover box, so framing is one honest object-position. CARRIED FORWARD VERBATIM from the old block, because they were measured and are still true: - --hero-header is 100px at 768-1200 and 90px at <=767. The header is position:relative below 1200 and absolute above, so down there the fold is header + hero. >> RE-MEASURE if the header's logo, padding or CTA change. << - 100svh, not vh (the height with the mobile URL bar hidden) and not dvh (which resizes mid-scroll). Plain vh first, as the fallback. - The max(800px, ...) floor above 1201, so a short laptop viewport grows the hero instead of crushing it. ========================================================================== */ /* --- 1. The section box ---------------------------------------------------- ONE custom property drives both the height and the wedge, and that is load-bearing: the diagonal is exactly 23deg only while --wedge equals height * tan(23deg) = height * 0.42447. Deriving both from --hero-h per regime is what stops the angle drifting away from the theme's when the viewport changes. Anywhere --hero-h is a floor rather than an exact height (below 1200 it is a min-height), content taller than the fill will skew the angle slightly -- measure rather than assume if that ever happens. */ @media (min-width:1201px){ .featured-slider-two.hero-static{ --hero-h:max(800px, 100vh); height:var(--hero-h) } } @media (max-width:1200px){ .featured-slider-two.hero-static{--hero-header:100px} } @media (max-width:767px) { .featured-slider-two.hero-static{--hero-header:90px} } @media (max-width:1200px){ .featured-slider-two.hero-static{ --hero-h:calc(100vh - var(--hero-header)); --hero-h:calc(100svh - var(--hero-header)); min-height:var(--hero-h) } } /* Vertically centring the CONTAINER is what replaces the old machinery. The theme relied on .s-item having a definite height (630px, or the fill) with align-items:center doing the centring inside it. With one static item .s-item is height:auto, so it would sit flush under the section's padding-top and the text would read top-aligned in a 900px hero. Centring the container reproduces the theme's composition without giving .s-item back a height it no longer needs -- and the section's own padding-top (120px, 50px at <=1200) still keeps the text clear of the absolutely-positioned header. */ .featured-slider-two.hero-static{ display:flex; align-items:center; overflow:hidden; --split:50%; --wedge:calc(var(--hero-h) * 0.42447) } .featured-slider-two.hero-static > .container{ width:100%; position:relative; z-index:2 } /* 993-1030 is the one desktop step where the theme widens the text column to 50%, so the diagonal has to start further right to stay off it. */ @media (min-width:993px) and (max-width:1030px){ .featured-slider-two.hero-static{--split:56%} } /* --- 2. The photo ---------------------------------------------------------- inset:0 -- the img's box IS the section's box, which is the whole point: object-fit:cover finally has a sane aspect to work with (1.6:1 at 1440x900 against a 1.5:1 source) instead of the 0.6:1 sliver the parallelogram gave it. The polygon's top-left vertex sits --wedge/2 to the RIGHT of --split and its bottom-left vertex the same distance to the LEFT, which leans the edge the same way the theme's skew(-23deg) did. Mixing % and px inside polygon() coordinates is legal. THREE framing controls, and having them at all is the point of this rewrite. TUNE THEM BY LOOKING AT THE RENDER, not by reading the numbers. --hero-shift slides the photo horizontally. This is the one that is easy to get wrong by reasoning instead of measuring: at 1440x900 the box is 1.6:1 and the source 1.5:1, so cover matches the WIDTH exactly and there is no horizontal overflow left for object-position's X to slide. Its X is inert here. Meanwhile only the right ~60% of the box is visible through the wedge, so with no shift the visible band lands on the house's long side wall and the twin gables and porch -- the composition -- sit hidden under the black. The shift moves them into view; what it pushes off the left edge is under the wedge anyway. --hero-zoom must stay >= 1: the shift is applied at transform-origin center, so anything under 1 opens gaps at the top and bottom edges. It also crops sky. --hero-pos Y only, in practice. Slides the ~60px of vertical overflow. The filter calms the blazing blue sky and green lawn toward the black-and-gold page. Judged at render size, not derived from anything. */ .featured-slider-two.hero-static .hero-photo{ position:absolute; inset:0; z-index:0; overflow:hidden; clip-path:polygon( calc(var(--split) + var(--wedge) / 2) 0, 100% 0, 100% 100%, calc(var(--split) - var(--wedge) / 2) 100%) } /* The hero is art-directed with , so the sits one level deeper than the rules below assume. display:contents removes the wrapper from layout entirely, keeping the behaving as a direct child of .hero-photo -- without it the default inline gives the img no definite containing block and its height:100% silently resolves to auto. */ .featured-slider-two.hero-static .hero-photo picture{display:contents} .featured-slider-two.hero-static .hero-photo img{ /* NEUTRAL, and deliberately so. Diego framed 1705-hero-tt.webp himself and it ships un-recropped, so the defaults must not second-guess it: no shift, no zoom, centred. The knobs stay declared because the wedge still hides the left of the frame -- if a future photo needs its subject dragged out from under the black, this is the one place to do it. Read the note above on which axis is live in which regime before touching them. */ --hero-shift:0; --hero-zoom:1; --hero-pos:50% 50%; display:block; width:100%; height:100%; object-fit:cover; object-position:var(--hero-pos); transform:translateX(var(--hero-shift)) scale(var(--hero-zoom)); transform-origin:center; filter:saturate(.84) brightness(.97) contrast(1.05) } /* The scrim. Three layers, each doing exactly one job: 1. left-to-right -- keeps the headline legible where the wedge's lower half reaches back under the text column. It does not need to avoid the text; letting the photo pass behind it is what "full-bleed" means, and the gradient is what makes that safe. 2. top-down -- the header's white nav and hamburger sit over the photo's top-right corner, which in this frame is bright sky and white cloud. Without this the hamburger disappears into a cloud. 3. bottom-up -- grounds the photo into the section's black rather than ending on a bright lawn against the white #about below. A ::after on .hero-photo so the clip-path takes it too: the scrim must never extend past the wedge onto the flat black, where it would show as a smudge. */ .featured-slider-two.hero-static .hero-photo::after{ content:""; position:absolute; inset:0; background: linear-gradient(100deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.88) 30%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.16) 62%, rgba(0,0,0,0) 76%), linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%), linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 34%) } /* The brand rule along the diagonal, in the same gold as every other accent on the page (#C6A15B -- see the PALETTE block at the top of this file). It is a 2px HORIZONTAL band, which on a line leaning 23deg off vertical renders ~1.84px perpendicular: a hairline, which is what it should read as. Its right boundary is the photo's left boundary exactly, so the two abut with no seam -- change --split or --wedge and both move together. */ .featured-slider-two.hero-static .hero-edge{ position:absolute; inset:0; z-index:1; pointer-events:none; background-color:#C6A15B; clip-path:polygon( calc(var(--split) + var(--wedge) / 2 - 2px) 0, calc(var(--split) + var(--wedge) / 2) 0, calc(var(--split) - var(--wedge) / 2) 100%, calc(var(--split) - var(--wedge) / 2 - 2px) 100%) } /* --- 3. The text column ---------------------------------------------------- Everything the theme gated on `.owl-item.active` is gone from the DOM, so the rules that HIDE the text -- `.featured-slider-two .owl-item .s-item .s-first h1{opacity:0;visibility:hidden}` and its siblings -- never match. There is nothing to undo there. Only `.featured-slider-two .s-item .s-first{opacity:0; width:0}` survives, at (0,3,0), and `.featured-slider-two.hero-static .s-item .s-first` is (0,4,0), so it beats it. The three widths restate the theme's own steps, all of which were written against `.active`: 45% base, 50% at <=1030, 100% at <=992. The TYPE ramp needs nothing -- .s-slide-title's 75/65/50/40/35px steps select `.s-item .s-first` with no .active in the path, so they still apply for free. The staggered entrance is the theme's own: fadeInOne at 0.5s/1s/1.5s on the heading, the paragraph and the button. It was gated on .owl-item.active, so it is re-declared here rather than lost. */ .featured-slider-two.hero-static .s-item{height:auto} .featured-slider-two.hero-static .s-item .s-first{opacity:1;width:45%} @media (max-width:1030px){ .featured-slider-two.hero-static .s-item .s-first{width:50%} } @media (max-width:992px) { .featured-slider-two.hero-static .s-item .s-first{width:100%} } .featured-slider-two.hero-static .s-first .s-slide-title{animation:fadeInOne .5s both} .featured-slider-two.hero-static .s-first p{animation:fadeInOne 1s both} .featured-slider-two.hero-static .s-first .hero-ctas{animation:fadeInOne 1.5s both} @media (prefers-reduced-motion:reduce){ .featured-slider-two.hero-static .s-first .s-slide-title, .featured-slider-two.hero-static .s-first p, .featured-slider-two.hero-static .s-first .hero-ctas{animation:none} } /* --- 4. The two CTAs ------------------------------------------------------- The theme authored .s-first for exactly one button, so the row is ours. The column gap has to clear .theme-btn's skewed tail -- a :after that sticks 32px past the button's own right edge -- so 55px leaves ~23px of real space. The margin moves from the button to the row, otherwise the theme's `.s-first .theme-btn{margin-top:50px}` would offset the button against a link that has no such margin. The three values are the theme's own steps: 50px base, 40px at <=1200, 30px at <=992. */ .featured-slider-two.hero-static .s-item .s-first .theme-btn{margin-top:0} .featured-slider-two.hero-static .hero-ctas{ display:flex; align-items:center; flex-wrap:wrap; gap:22px 55px; margin-top:50px } @media (max-width:1200px){ .featured-slider-two.hero-static .hero-ctas{margin-top:40px} } @media (max-width:992px) { .featured-slider-two.hero-static .hero-ctas{margin-top:30px} } /* A text link, not a second .theme-btn. Matching the primary would mean overriding the gold fill, the 2px border, the skewed :after tail AND the black skewed backdrop on its -- four rules -- to produce something that competes with the primary CTA instead of deferring to it. */ .featured-slider-two.hero-static .hero-link{ display:inline-flex; align-items:center; position:relative; gap:10px; color:#fff; font-size:16px; font-weight:700; line-height:1; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.35); transition:color .3s ease-in-out, border-color .3s ease-in-out } /* The link's own box measures 153x23, which is under the 44x44 tap-target minimum -- a text link is a small target on a phone. This grows the HIT AREA without touching layout or moving the underline; padding would have pushed the flex row taller and shifted the text off the button's centre line. It reaches ~10px into the row's 22px gap, so it never steals a tap from .theme-btn. */ .featured-slider-two.hero-static .hero-link::before{ content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%) } .featured-slider-two.hero-static .hero-link:hover{color:#C6A15B;border-bottom-color:#C6A15B} .featured-slider-two.hero-static .hero-link i{font-size:13px;transition:transform .3s ease-in-out} .featured-slider-two.hero-static .hero-link:hover i{transform:translateX(4px)} /* --- 5. Below 992 the diagonal stops working ------------------------------- A 23deg run over a ~700px hero sweeps ~297px horizontally, which eats a 375px viewport whole -- there is no room for both a wedge and a text column, and the theme takes .s-first to width:100% here anyway. So the photo goes genuinely full-bleed behind the text and a vertical scrim carries legibility, which is the mobile hero pattern that actually works. The gold rule has no edge left to trace, so it is hidden rather than left drawing a diagonal across the middle of the screen. */ @media (max-width:992px){ .featured-slider-two.hero-static .hero-photo{clip-path:none} .featured-slider-two.hero-static .hero-edge{display:none} /* --hero-shift is pinned to 0 here even though the desktop default is now also 0, because this is a guard rather than a value: the shift exists only to drag a subject out from under the wedge, and with no wedge to hide behind it just moves the photo off its own left edge. That was a real bug -- a 16% translate on a 375px viewport left a black band down the whole left edge. Anything that tunes desktop framing has to be RESET in this block, not merely overridden; the two regimes crop for different apertures. THIS IS THE ONE PLACE A CROP IS UNAVOIDABLE, which matters because 1705-hero-tt.webp ships pre-framed and un-recropped everywhere else. A 0.52:1 aperture simply cannot show a 1.51:1 photo whole. So the desktop neutral values are deliberately NOT inherited here. The axes also swap roles, which is the opposite of the desktop case: cover scales by HEIGHT down here, leaving ~716px of horizontal overflow for object-position's X and none vertically, so its Y is inert. Sky is therefore cropped by the ZOOM, anchored on the transform-origin. Values chosen from the photo: the houses band sits at roughly y 640-950 of 1694 (~47%) and the foreground house at x 1750-2300 of 2560 (~78%), so the origin parks on it and 2x crops the ~45% sky and the road away. */ .featured-slider-two.hero-static .hero-photo img{ --hero-shift:0; --hero-zoom:2.2; --hero-pos:85% 50%; transform-origin:67% 76% } /* ONE flat overlay, on request -- Diego, 2026-07-26. This replaced a two-layer thirteen-stop gradient that shaped its darkness per band; it worked on the numbers and read as heavy and blotchy, which is the point that matters. A flat tint cannot do what the gradient did, and the trade is explicit: over this interior, .38 leaves the copy at roughly 2:1 against the overlay alone. The text-shadow below is what carries legibility instead. That is a real technique, but it is NOT measurable by the WCAG contrast formula, so the guarantee here is weaker than it was -- see wiki/components/hero.md. A flat overlay that met 4.5:1 unaided would need ~.80, i.e. considerably DARKER than the gradient it replaced. */ .featured-slider-two.hero-static .hero-photo::after{background:rgba(0,0,0,.38)} .featured-slider-two.hero-static .s-first{ text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.75) } } /* --- <=767: a DIFFERENT photo, so a different set of framing values --------- Phones get an interior via (see components/builty/Hero.tsx). It is art direction, not a resolution swap: the streetscape is a wide composition, and a 0.52:1 phone aperture can only take a narrow vertical slice of it, which read as a lot of sky over a dim house. The kitchen crop is crafted portrait (800x1285 from `_2`, framed on the hood/range/island) and has no sky at all. MUST COME AFTER THE <=992 BLOCK -- same specificity, so it wins on order alone. Those values (zoom 2.2, origin 67% 76%) were solved for the streetscape and are actively wrong here: hero-mobile.webp is already cropped to roughly the aperture, so it wants neutral framing and nothing else. This is the same trap as the desktop knobs after the hero photo swap -- per-image tuning does not travel with a new image, and leaving it in place silently re-crops. The scrim is deliberately NOT relaxed here even though the complaint that prompted this was darkness. Measured against this crop it lands at 3.43 / 4.87 / 4.74 for headline / paragraph / link against required 3 / 4.5 / 4.5 -- passing, but the paragraph's margin is 0.37, so there is nothing to give back. The interior does the work instead: warm woods rather than grey sky read as inviting at the same alpha. Re-measure before touching either. */ @media (max-width:767px){ .featured-slider-two.hero-static .hero-photo img{ --hero-zoom:1; --hero-pos:50% 50%; transform-origin:center } } /* ========================================================================== FOOTER TOP BAND -- 1705 Holdings ========================================================================== */ /* The footer's first row (logo / "Call us ..." / CTA) is three Elementor columns that stretch to the tallest of them, but Elementor pins each column's content to the top with `.elementor-widget-wrap{align-content: flex-start}`. The CTA is by far the tallest at 88px, so in a 108px row the 45.3px logo left 52.7px of dead space beneath it and the 30px line of copy left 68px -- the three items read as top-aligned against an empty band. align-content (not align-items) is the right lever: .elementor-widget-wrap is a `flex-wrap:wrap` container, so it is the flex LINE that needs centring, not the items within it. The CTA is unaffected -- at 88px it already fills the 88px content box inside the wrap's 10px padding. No-op once the columns stack below 768px, where each column is only as tall as its own content. */ .footer-style-one .footer-p-1 .elementor-widget-wrap{align-content:center} /* "Get a Consultation" wrapped to two lines, and only just: the base .theme-btn{padding:18px 70px 18px 50px} leaves a 145px content box in the 25% column at 1440, and the label measures 146.9 -- a 1.9px miss. Only above 767px. Below that the columns go full-width AND the theme steps the padding down itself (15px 60px .. at <=767, 13px 55px .. at <=480), which already leaves 153.3 for the same 146.9 label -- so an unscoped override here would clobber two working breakpoints to fix neither. 70px -> 55px is the theme's own tighter value, from .desktop-nav .extras .theme-btn. It costs nothing visually: the label is left-aligned off the 50px left padding, so it still ends 23.4px clear of the skewed black corner, which reaches ~44.7px in from the right edge (the 40px `i` at right:-14px, plus ~18.7px of skew(-24deg) at its top corner). The nowrap then makes one line structural rather than a 9px margin of error. Consequence: the button is 64px tall instead of 88, so the whole band is 24px shorter. The centring above keeps the logo and phone line centred in it. */ @media (min-width:768px){ .footer-style-one .footer-p-1 .theme-btn{padding-right:55px;white-space:nowrap} } /* --- The stacked band at <=767: an oversized logo and a stranded CTA -------- Once the three columns stack they each go full-width, and two things that were being held in check by a 25%-wide column stop being held by anything. 1. THE LOGO HAD NO CAP OF ITS OWN, and the range was wider than it looked. It is `max-width:100%` of its column, so at 1440 the 171px column rendered it 151px and it looked deliberate. Nothing was sizing it; the COLUMN always had been. Once the columns stop being narrow it runs away: 1440 151px (column-constrained, fine) 1024 400px <- its full natural size, in a 505px column 768 357px 375 355px <- 2.3x the SAME asset in the header So this is deliberately NOT scoped to the phone. `max-width` (not `width`) applied unconditionally is a cap rather than a size: 1440 keeps its column-derived 151px untouched, and every width below stops at 154. 154px is not a taste value -- it is the header's own number for the same file (logo.webp, 400x120 natural), so the mark reads identically in both places. Height stays auto so the 10:3 ratio comes off the intrinsic size rather than being restated. 2. THE CTA WAS LEFT-ALIGNED IN A FULL-WIDTH COLUMN. Its container is text-align:start and .theme-btn is inline-flex, so text-align is the right lever -- no flex container to reach for, and it leaves the button's own box model alone. The margin-right is the part that is easy to miss: .theme-btn's skewed tail is a ::after at `right:-32px`, which sits OUTSIDE the border box. Centring the box alone would leave the visible mass 16px right of centre, and the button would read as mis-centred while measuring perfectly. Giving it a 32px right margin -- exactly the tail's reach -- makes the centred unit the button PLUS its tail, which is what the eye actually sees. 3. THE PHONE LINE WAS NOT ASKED FOR and is included anyway, because items 1 and 2 are what exposed it. It is text-align:start like everything else here, and it read as centred at 375 only because it filled the full 355px column on one line. Shrinking the logo and centring the CTA left it as the one ragged element in an otherwise centred stack -- and it now wraps to two lines, which makes the ragged right edge obvious. Centring the whole band's copy is one declaration and reverting it is one deletion. The logo's own wrapper is already text-align:center, so it needs nothing once it is narrow enough for that to mean anything. */ .footer-style-one .footer-p-1 .elementor-widget-image img{max-width:154px} @media (max-width:767px){ .footer-style-one .footer-p-1 .elementor-widget-builty-button .elementor-widget-container{text-align:center} .footer-style-one .footer-p-1 .theme-btn{margin-right:32px} .footer-style-one .footer-p-1 .elementor-widget-builty-footer-call-info{text-align:center} } /* ========================================================================== QUOTE MODAL -- 1705 Holdings The popup contact form the CTAs open (components/builty/contact/QuoteModal). Its panel, fields, heading and button are styled ENTIRELY by the vendored theme (.contact-form-one .c-form-2 and friends). Everything below exists only because the vendored bundle is missing something Bootstrap normally ships, or because the theme never styled a state we now use. ========================================================================== */ /* 1. The bundle has no `.modal.show{display:block}`. It was purge-stripped -- nothing ever added `.show` during the static crawl, so the tool could not see the rule in use -- which means toggling `.show` alone leaves the dialog at display:none. Restored under our own class so the two-phase open can put display and opacity on separate frames. */ .modal.is-open{display:block} /* 2. The theme's own dimmer, `.popups.modal:before`, has NO colour in bundle.css; it inherits one from the gold palette mirror at the top of this file and renders as an 80%-opacity GOLD sheet. That mirror is auto-derived from a grep of bundle.css, so re-colouring the pseudo-element would silently go gold again the next time it is regenerated. Hiding it instead is a `display` rule, immune to that, and Bootstrap's real .modal-backdrop already ships #000 / opacity:.5 with no theme accent in it at all. */ .popups.modal:before{display:none} /* 3. bundle.css declares the modal transitions twice and the LATER copy kills both: `.modal.fade .modal-dialog{transition:none}` (offset 227941) beats the `.3s ease-out` at 227813, and `.fade{transition:none}` (191382) beats `opacity .15s linear` at 191306. So the vendored CSS animates nothing. Restored, scoped to our popup so no other .modal is affected. Keep these durations in step with FADE_MS in QuoteModal.tsx. */ .popups.modal.fade{transition:opacity .25s linear} .popups.modal.fade .modal-dialog{transition:transform .25s ease-out} .modal-backdrop.fade{transition:opacity .25s linear} @media (prefers-reduced-motion:reduce){ .popups.modal.fade, .popups.modal.fade .modal-dialog, .modal-backdrop.fade{transition:none} } /* 4. The panel is #000 and page text is Bootstrap's near-black #212529, so our own copy (intro, inline error, success) would be invisible on it. The theme only ever whitened Contact Form 7's own status element, via `.contact-form-one .c-form-2 .wpcf7 form .wpcf7-response-output{color:#fff}`, and that wrapper is gone with the CF7 markup. */ .conslt-popup .c-form-2 .quote-intro{color:#bdbdbd;margin-bottom:22px} .conslt-popup .c-form-2 .quote-error{color:#ffb4a2;margin:0 0 18px} .conslt-popup .c-form-2 .quote-success{color:#bdbdbd} .conslt-popup .c-form-2 .quote-success-heading{color:#fff;font-size:22px;line-height:32px;margin-bottom:12px} /* 5. There is no `.theme-btn:disabled` anywhere in bundle.css, so a submit in flight looked identical to an idle one. */ .c-form-2 button.theme-btn:disabled{opacity:.6;cursor:default} /* 6. Focus visibility inside the dark panel. `.nice-select:focus {border-color:#999}` is the only focus affordance the theme gives the Subject control, and `.contact-form-one .c-form-2 .nice-select{border-color:#767676 !important}` overrides it -- so the field had no visible focus state at all. The close button's default focus ring is Bootstrap blue on a white pill, which reads as a stray artifact against the gold. */ .conslt-popup .c-form-2 input:focus, .conslt-popup .c-form-2 textarea:focus, .conslt-popup .c-form-2 .nice-select:focus{border-color:#C6A15B!important;outline:none} .conslt-popup .modal-header .btn-close:focus-visible{box-shadow:0 0 0 .25rem rgba(198,161,91,.5)} /* 7. The honeypot: in the DOM for bots, never visible or reachable for people. Not `display:none` -- some bots skip those. */ .quote-honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} /* 8. Fitting the panel on the fold. Measured at 1440x900 the form is 900px tall, and `.popups.modal.show .modal-dialog{margin-top:50px}` then pushed its bottom to 950 -- Submit Now sat below the fold. The theme's 50px offset was authored for the demo's shorter four-field popup. Three reclaims: drop that offset back to the dialog's own symmetric 1.75rem, trim the panel padding (the theme's 55px is generous for a 520px dialog), and tighten the row rhythm. Together that lands the whole form inside 900px with no scrolling. Deliberately NOT capped with max-height + overflow on .modal-content: that was tried and backfires twice over. Setting overflow-y also forces overflow-x to compute to auto, which puts a horizontal scrollbar under the panel, and it clips `.btn-close` -- the theme parks that at `right:-22px`, i.e. deliberately OUTSIDE the content box. Short windows are already handled, by Bootstrap's own `.modal{overflow-y:auto}` scrolling the whole dialog. The 40px top margin is a floor, not a preference: the theme parks .btn-close at `top:-35px`, deliberately half-overhanging the panel's top corner, so anything under 35px clips it against the top of the window. The dialog's own 1.75rem (28px) was 7px short. */ .popups.modal.show .modal-dialog{margin-top:40px} .conslt-popup .c-form-2{padding:40px} .conslt-popup .c-form-2 form .row{margin-bottom:16px} /* The theme panels this at pure #000 (`.contact-form-one .c-form-2`), which against the backdrop read as a hole rather than a card. #232222 is not a new value -- it is the footer's own top band -- and it stays legible either way the scrim falls: near-black where the popup opens over a dark section, about #474747 where it opens over a light one. */ .conslt-popup .c-form-2{background:#232222} /* 9. The theme dimmed at 80%; Bootstrap's backdrop is 50%, which leaves the page reading through behind a dark panel. Split the difference. */ .modal-backdrop.show{opacity:.72} /* 10. That deliberate overhang stops working once the dialog is nearly as wide as the window. Below 576px Bootstrap drops .modal-dialog to `margin:.5rem`, so the panel spans 8..367 of a 375px screen and `right:-22px` puts the button's edge at 389 -- 14px outside, and `.modal{overflow-x:hidden}` cuts it off. Tuck it back inside and shrink it; 70px is oversized on a phone anyway. */ @media (max-width:575.98px){ .conslt-popup .modal-header .btn-close{right:0;top:-28px;width:56px;height:56px} .conslt-popup .c-form-2{padding:28px} } /* ========================================================================== CONTACT PHOTO ACCENT -- 1705 Holdings The two gold wedges above and below the contact photo, matching the About section's image. Requested 2026-07-26 after the dotted world map was replaced with a house photo (components/builty/ContactUs). ========================================================================== */ /* The theme builds this effect on `.our-goal .data .goal-img` and nowhere else, so it is reproduced here rather than invented: .our-goal .data .goal-img{padding:30px 0;position:relative;overflow:hidden} .our-goal .data .goal-img:before{content:"";width:270px;height:100%; position:absolute;bottom:0;left:50%; transform:translateX(-50%) skew(-23deg,0deg);z-index:-1} How it works, because it is not obvious from the declarations: the bar is a single full-height rectangle sitting BEHIND the image (`z-index:-1`). The figure's 30px of vertical padding is the only place it can show, so the skew turns one rectangle into two opposed wedges -- top-right and bottom-left -- with the image itself masking the middle. `overflow:hidden` stops the skewed corners spilling past the photo's left and right edges. `height:100%` resolves against the containing block's PADDING box, so the bar is image-height + 60px and the wedges are a true 30px tall. The colour is hardcoded rather than added to the palette mirror at the top of this file: that block is auto-derived from the theme's #ffee02 groups, and re-deriving it would drop any hand-added selector. */ .contact-us .c-data figure{padding:30px 0;position:relative;overflow:hidden} .contact-us .c-data figure:before{content:"";width:270px;height:100%;background-color:#C6A15B;position:absolute;bottom:0;left:50%;transform:translateX(-50%) skew(-23deg,0deg);z-index:-1} /* ========================================================================== `.h2` HEADINGS THE THEME'S BREAKPOINTS MISS The theme declares its heading sizes as `X h2, X .h2` at base width, but the responsive steps inside its media queries list `h2` ALONE. Our markup uses `
` -- verbatim from the demo, where Elementor emits a div so the section keeps a single real

-- so the base rule matches and none of the steps ever do. The heading then renders at DESKTOP size on a phone. Measured at 375px before this block: the why-us heading computed 50px/60px with a 50px bottom margin (theme intends 25px/35px, 20px), giving a four-line 240px heading followed by a 50px dead gap. The contact card heading computed 35px (theme intends 25px below 425px). Fixed by re-declaring the theme's own steps with `.h2` added -- its numbers, not ours. Equal specificity, and overrides.css loads after bundle.css, so these win on source order. ========================================================================== */ /* Why-us / certificates. Three steps, and the cascade between them is deliberate: <=480 sets only font-size, so margin-bottom keeps falling through from the <=1200 step. That is how the theme behaves for a real

, and reproducing it exactly is the point. */ @media (max-width:1366px){ .certificates .data .h2{font-size:40px;line-height:50px;margin-bottom:30px} } @media (max-width:1200px){ .certificates .data .h2{font-size:35px;line-height:45px;margin-bottom:20px} } @media (max-width:480px){ .certificates .data .h2{font-size:25px;line-height:35px} } /* The contact card's name. Same trap, one step, a different breakpoint. */ @media (max-width:425px){ .contact-us .c-cards .card .details .h2{font-size:25px;line-height:35px} } /* ========================================================================== CERTIFICATES -- IMAGE CLIPPING, AND THE SEAL WHEN STACKED ========================================================================== 1. CLIP THE ACCENT BAR ON THE SECTION IMAGE The gold wedges are one skewed 270px bar behind the image (the same device documented in CONTACT PHOTO ACCENT above). `.our-goal .data .goal-img` carries `overflow:hidden` to keep the skewed corners inside the photo; `.certificates .data .c-img` never got it, so the bar escapes both edges. It only shows on narrow screens, because the spill is a function of box height: extent = 270 + height*tan(17deg). At 375 the figure is 351x450, so the bar reaches 408px and ~28px hangs out each side. Not caused by our portrait crop -- the demo's own c-img-1.png (176x198) computes 409px. Safe to clip: the "100% Custom-Built" badge is `.extras`, a SIBLING of this figure inside `.data`, not a child, so `overflow:hidden` cannot reach it. (Checked deliberately -- see the overflow-axis-coupling gotcha.) */ .certificates .data .c-img{overflow:hidden} /* 2. CENTRE THE SEAL ONCE THE CARD STACKS `.c-main` is `display:flex` with `.c-first` (the white seal box) and `.c-second` (the copy) side by side. At <=600px the theme wraps the row -- `.c-main{flex-wrap:wrap}` and `.c-second{width:100%}` -- but leaves `.c-first` on a percentage width: 40% base, 50% at <=480, 60% at <=375. A flex item narrower than its line sits at flex-start, so the seal ends up flush against the left gutter with a wide empty strip beside it, while the copy underneath runs the full column. Auto side margins centre it on its own flex line without touching the widths the theme chose. Scoped to the wrapped regime only. Above 600px `.c-first` is a real column beside `.c-second` and MUST stay left -- `margin:auto` there would open a gap between the seal and its own copy. */ @media (max-width:600px){ .certificates .c-slider .c-main .c-first{margin-left:auto;margin-right:auto} }